:root { --bg: #030806; --bg-card: rgba(255,255,255,0.03); --bg-card-h: rgba(255,255,255,0.055); --border: rgba(255,255,255,0.08); --border-g: rgba(60,160,90,0.3); --g1: #4cd97b; --g2: #5dd98a; --g3: #12412d; --g4: #2a7846; --gm: rgba(42,120,70,0.18); --text: #e8f0ea; --text2: rgba(220,240,228,0.6); --text3: rgba(220,240,228,0.32); --red: #f87171; --red-bg: rgba(248,113,113,0.12); --teal: #2dd4bf; --purple: #a78bfa; --amber: #fbbf24; --orange: #fb923c; --sidebar: 264px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); background-image: radial-gradient(ellipse 70% 40% at 50% -5%,rgba(18,60,32,.4) 0%,transparent 55%), radial-gradient(ellipse 50% 30% at 85% 90%,rgba(12,45,22,.2) 0%,transparent 55%); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif; min-height:100vh; display:flex; -webkit-font-smoothing:antialiased; font-size:18px; } /* #ceo-shell wraps sidebar+main so the auth gate can hide them as one unit (see ceo/index.html). Without this, .main's flex:1 does nothing — flex properties only apply when the direct parent is a flex container, and that used to be . */ #ceo-shell{display:flex;width:100%;min-height:100vh} /* ── Sidebar ── */ .sidebar{ width:var(--sidebar); min-height:100vh; background:rgba(0,0,0,.28); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0;left:0;bottom:0; z-index:100; } .sb-logo{ padding:22px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; } .logo-box{ width:30px;height:30px; background:var(--g3); border:1px solid var(--border-g); border-radius:7px; display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:800;color:var(--g1); flex-shrink:0; } .logo-name{font-size:18px;font-weight:700;color:var(--text)} .logo-tag{font-size:18px;color:var(--text3);font-weight:500} .sb-nav{padding:14px 10px;flex:1;display:flex;flex-direction:column;gap:3px} .nav-sec{font-size:18px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:10px 10px 4px;margin-top:4px} .nav-item{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:8px; cursor:pointer;font-size:18px;font-weight:500; color:var(--text2);transition:all .14s; border:1px solid transparent; } .nav-item:hover{background:var(--bg-card-h);color:var(--text)} .nav-item.active{background:var(--gm);border-color:var(--border-g);color:var(--g2)} .ni{width:18px;text-align:center;font-size:18px;opacity:.8;flex-shrink:0} .sb-footer{padding:16px 18px;border-top:1px solid var(--border)} .sb-footer-txt{font-size:18px;color:var(--text3);line-height:1.5} /* ── Main ── */ .main{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-width:0} /* ── Topbar ── */ .topbar{ padding:16px 26px; border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; background:rgba(3,8,6,.85); backdrop-filter:blur(12px); position:sticky;top:0;z-index:50; } .tb-left{display:flex;align-items:center;gap:14px} .tb-title{font-size:21px;font-weight:600;color:var(--text)} .tb-right{display:flex;align-items:center;gap:10px} .badge-live{ display:inline-flex;align-items:center;gap:5px; background:var(--gm);border:1px solid var(--border-g); border-radius:100px;padding:4px 11px; font-size:18px;font-weight:600;color:var(--g2); } .dot{width:5px;height:5px;background:var(--g2);border-radius:50%;box-shadow:0 0 5px var(--g2);animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .period-sel{ background:var(--bg-card);border:1px solid var(--border); color:var(--text);padding:7px 13px;border-radius:8px; font-size:18px;font-family:inherit;cursor:pointer;outline:none; } .period-sel:focus{border-color:var(--border-g)} .period-sel option{background:#081208} /* ── Page ── */ .page{padding:24px 26px;display:none} .page.active{display:block} /* ── Section header ── */ .sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .sec-title{ font-size:18px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--text3);display:flex;align-items:center;gap:8px; } .sec-title::before{content:'';display:inline-block;width:3px;height:12px;background:var(--g1);border-radius:2px} /* ── Scrollbar ── */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)} /* ── Responsive ── */ @media(max-width:1280px){.g5,.g6{grid-template-columns:repeat(3,1fr)}} @media(max-width:1000px){.g4,.g3{grid-template-columns:repeat(2,1fr)}.cr2,.cr31{grid-template-columns:1fr}} @media(max-width:700px){.sidebar{display:none}.main{margin-left:0}}