:root { --yellow:#f4c400; --yellow-soft:#ffdc35; --ink:#181812; --muted:#6b6b62; --paper:#f4f3ee; --white:#fff; --line:#deddd5; --shadow:0 18px 45px rgba(24,24,18,.10); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,620px) 1fr; background:#151511; }
.login-card { background:var(--paper); padding:clamp(36px,7vw,90px); display:flex; flex-direction:column; justify-content:center; }
.login-brand,.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:52px; height:52px; border-radius:14px; background:var(--yellow); display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.brand strong,.login-brand strong { display:block; font-size:17px; }
.brand span,.login-brand span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.login-card .eyebrow { margin-top:70px; }
.login-card h1 { font-size:clamp(46px,6vw,76px); line-height:.92; letter-spacing:-.065em; margin:8px 0 22px; max-width:550px; }
.lead { font-size:18px; line-height:1.6; color:var(--muted); max-width:520px; }
form { display:grid; gap:18px; margin-top:28px; max-width:470px; }
label { font-weight:700; font-size:13px; }
input { width:100%; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:white; padding:15px 16px; outline:none; }
input:focus { border-color:#9d8200; box-shadow:0 0 0 3px rgba(244,196,0,.2); }
.primary { border:0; background:var(--yellow); color:#111; padding:16px 18px; font-weight:900; border-radius:12px; display:flex; justify-content:space-between; cursor:pointer; }
.primary:hover { background:var(--yellow-soft); transform:translateY(-1px); }
.primary:disabled { opacity:.65; cursor:wait; transform:none; }
.access-note { max-width:470px; color:var(--muted); font-size:12px; line-height:1.5; margin-top:18px; }
.form-error { border:1px solid #e2b5ad; background:#fff0ed; color:#8a2d20; border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.45; }
.status-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:#171712; }
.status-card { width:min(100%,520px); background:var(--paper); border-radius:20px; padding:clamp(30px,6vw,56px); box-shadow:var(--shadow); }
.status-card>p:last-child { color:var(--muted); line-height:1.55; }
.status-card .primary { width:100%; margin-top:24px; }
.status-card h1 { font-size:clamp(30px,5vw,48px); letter-spacing:-.045em; line-height:1; }
.spinner { width:38px; height:38px; margin:46px 0 18px; border:4px solid #d7d5ca; border-top-color:#9e8500; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.login-aside { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:8vw; color:white; background:radial-gradient(circle at 70% 25%,#5b5014,transparent 33%),linear-gradient(145deg,#12120d 0%,#27250f 100%); }
.login-aside:before { content:"DS"; position:absolute; right:-2vw; top:8vh; font-size:30vw; line-height:1; font-weight:1000; letter-spacing:-.13em; color:rgba(244,196,0,.08); }
.login-aside blockquote { z-index:1; max-width:700px; margin:0 0 25px; font-size:clamp(30px,4vw,62px); line-height:1.05; font-weight:800; letter-spacing:-.04em; }
.login-aside span { z-index:1; color:var(--yellow); font-weight:800; }
.topbar { height:80px; position:fixed; top:0; left:0; right:0; z-index:5; background:rgba(255,255,255,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.top-actions { display:flex; gap:10px; }
.icon-button,.avatar { width:42px; height:42px; border:1px solid var(--line); background:white; border-radius:12px; display:grid; place-items:center; cursor:pointer; }
.avatar { border:0; background:var(--ink); color:var(--yellow); font-size:12px; font-weight:900; }
.sidebar { position:fixed; left:0; top:80px; bottom:0; width:230px; padding:34px 18px 20px; background:#1a1a16; color:white; display:flex; flex-direction:column; z-index:4; }
.nav-title,.sidebar-foot small { font-size:10px; letter-spacing:.16em; color:#86867b; font-weight:800; padding:0 12px; margin-bottom:10px; }
.nav-link { display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:10px; color:#bdbdb2; font-weight:700; font-size:14px; margin-bottom:4px; }
.nav-link span { width:20px; text-align:center; }
.nav-link:hover,.nav-link.active { background:#2a2a23; color:white; }
.nav-link.active { box-shadow:inset 3px 0 var(--yellow); }
.sidebar-foot { margin-top:auto; padding:18px 12px 4px; border-top:1px solid #33332d; display:grid; gap:4px; }
.sidebar-foot small { padding:0; margin:0; }
.sidebar-foot strong { font-size:13px; }
.sidebar-foot span { font-size:11px; color:var(--yellow); }
.content { margin-left:230px; padding-top:80px; min-height:100vh; }
.page { max-width:1280px; margin:0 auto; padding:clamp(28px,5vw,64px); }
.welcome { display:grid; grid-template-columns:1fr minmax(280px,370px); gap:28px; align-items:end; margin-bottom:62px; }
.eyebrow { color:#8b7500; font-size:10px; font-weight:900; letter-spacing:.17em; margin:0 0 8px; }
.welcome h1,.page-title h1 { font-size:clamp(42px,6vw,72px); letter-spacing:-.06em; line-height:.96; margin:0 0 12px; }
.welcome>div>p:last-child,.page-title>p:last-child { color:var(--muted); font-size:17px; }
.yellow-card { background:var(--yellow); border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.yellow-card span { display:block; font-size:10px; font-weight:900; letter-spacing:.15em; }
.yellow-card strong { display:block; font-size:24px; margin:12px 0 4px; }
.yellow-card p { margin:0; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin:0 0 18px; }
.section-head h2,.poll-card h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
.section-head a { color:#7a6700; font-weight:800; font-size:13px; }
.section-head.compact { margin-top:32px; }
.news-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.news-grid.single { grid-template-columns:minmax(0,1fr); }
.news-card,.list-card,.poll-card,.event-card,.member-card,.quick-card,.module-card { background:white; border:1px solid var(--line); border-radius:16px; }
.news-card { min-height:230px; padding:25px; display:flex; flex-direction:column; }
.news-card h3 { font-size:22px; line-height:1.15; margin:18px 0 10px; }
.news-card p,.list-card p { color:var(--muted); line-height:1.55; }
.news-card time { margin-top:auto; color:#8a8a80; font-size:12px; }
.chip { display:inline-flex; width:max-content; background:#fff5b8; color:#695900; border-radius:99px; padding:5px 9px; font-size:9px; letter-spacing:.1em; font-weight:900; text-transform:uppercase; }
.dashboard-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; margin-top:16px; }
.setup-banner { margin:-28px 0 48px; padding:18px 20px; display:flex; justify-content:space-between; gap:20px; border:1px solid #d3c368; background:#fff9d7; border-radius:14px; }
.setup-banner strong { font-size:13px; }
.setup-banner span { color:#6f6641; font-size:12px; line-height:1.45; }
.empty-state { min-height:140px; display:grid; place-content:center; text-align:center; gap:6px; padding:24px; color:var(--muted); border:1px dashed #c9c7bb; border-radius:16px; background:rgba(255,255,255,.45); }
.empty-state strong { color:var(--ink); }
.empty-state p { margin:0; font-size:12px; line-height:1.5; }
.event-card { padding:16px; display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.event-card h3 { margin:5px 0 3px; font-size:16px; }
.event-card p { margin:0; color:var(--muted); font-size:12px; }
.date-tile { flex:0 0 58px; height:65px; border-radius:12px; background:#22221c; color:white; display:grid; place-content:center; text-align:center; }
.date-tile strong { font-size:23px; line-height:1; }
.date-tile span { color:var(--yellow); font-size:9px; font-weight:900; margin-top:4px; }
.ghost { margin-left:auto; border:1px solid var(--line); background:white; padding:9px 12px; border-radius:9px; font-size:11px; font-weight:800; cursor:pointer; }
.ghost.selected { background:#e7f7e9; color:#207b2e; border-color:#b8e4be; }
.poll-card { padding:27px; margin-top:32px; background:#20201a; color:white; border-color:#20201a; }
.poll-card .eyebrow { color:var(--yellow); }
.poll-card h2 { margin-top:15px; }
.poll-card>p:not(.eyebrow) { color:#b9b9ae; font-size:12px; }
.poll-bar { height:7px; background:#44443c; border-radius:9px; overflow:hidden; margin:24px 0 10px; }
.poll-bar i { display:block; height:100%; background:var(--yellow); }
.poll-actions { display:flex; gap:8px; margin-top:22px; }
.poll-actions button { flex:1; padding:10px; border:1px solid #494940; border-radius:8px; background:#2a2a23; color:white; cursor:pointer; font-size:11px; font-weight:800; }
.poll-actions button:hover { background:var(--yellow); color:#111; }
.quick-grid,.module-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.quick-card,.module-card { padding:20px; display:grid; gap:5px; min-height:125px; text-align:left; cursor:pointer; color:var(--ink); }
.quick-card>span,.module-card>span { justify-self:end; }
.quick-card strong,.module-card strong { margin-top:auto; }
.quick-card small,.module-card small { color:var(--muted); }
.quick-card:hover,.module-card:hover { border-color:#ad9300; transform:translateY(-2px); box-shadow:0 12px 30px rgba(24,24,18,.07); }
.page-title { margin-bottom:36px; }
.stack { display:grid; gap:12px; }
.list-card { padding:24px; display:flex; justify-content:space-between; gap:30px; }
.list-card h2 { margin:12px 0 4px; font-size:22px; }
.list-card time { color:var(--muted); font-size:12px; white-space:nowrap; }
.search { position:relative; display:block; max-width:520px; margin-bottom:24px; font-size:20px; }
.search input { padding-left:46px; margin:0; }
.search { color:var(--muted); }
.search::first-letter { position:absolute; }
.member-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.member-card { display:flex; align-items:center; gap:14px; padding:16px; }
.member-avatar { width:48px; height:48px; border-radius:50%; background:#24241e; color:var(--yellow); display:grid; place-items:center; font-weight:900; font-size:12px; }
.member-card div:nth-child(2) { display:grid; gap:4px; }
.member-card span { color:var(--muted); font-size:12px; }
.member-card .icon-button { margin-left:auto; }
.module-grid { grid-template-columns:repeat(3,1fr); }
.module-card { border:1px solid var(--line); min-height:155px; }
.toast { position:fixed; z-index:10; right:24px; bottom:24px; background:#171712; color:white; padding:14px 18px; border-radius:10px; box-shadow:var(--shadow); font-size:13px; }
.bottom-nav { display:none; }
@media (max-width:900px) { .login-shell{grid-template-columns:1fr}.login-aside{display:none}.login-card{min-height:100vh}.sidebar{display:none}.content{margin-left:0;padding-bottom:75px}.bottom-nav{position:fixed;z-index:8;left:0;right:0;bottom:0;height:70px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav a{flex:1;display:grid;place-content:center;text-align:center;color:#77776e;gap:3px}.bottom-nav a.active{color:#111}.bottom-nav a.active span{color:#9e8500}.bottom-nav small{font-size:9px;font-weight:800}.dashboard-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px) { .topbar{height:68px;padding:0 16px}.topbar .brand-mark{width:40px;height:40px}.topbar .brand span{display:none}.content{padding-top:68px}.page{padding:28px 16px}.welcome{grid-template-columns:1fr;margin-bottom:42px}.news-grid,.member-grid{grid-template-columns:1fr}.module-grid{grid-template-columns:repeat(2,1fr)}.list-card{display:block}.list-card time{display:block;margin-top:16px}.event-card{align-items:flex-start}.event-card .ghost{padding:8px}.login-card{padding:28px 22px}.login-card .eyebrow{margin-top:50px}.login-card h1{font-size:48px}.setup-banner{margin:-15px 0 38px;display:grid}.toast{left:16px;right:16px;bottom:86px;text-align:center} }
@media (prefers-reduced-motion:no-preference) { button,a,.quick-card,.module-card { transition:.18s ease; } }