/* Layout — app shell, sidebar, topbar, content */
:root {
      --bg:          #080c10;
      --bg2:         #0d1219;
      --bg3:         #111820;
      --border:      #1a2530;
      --border2:     #243040;
      --accent:      #2e8fff;
      --accent-dim:  rgba(46,143,255,0.12);
      --accent-glow: rgba(46,143,255,0.20);
      --text:        #e2eaf4;
      --text2:       #7a8fa0;
      --text3:       #3a4d5e;
      --green:       #00d48a;
      --green-dim:   rgba(0,212,138,0.12);
      --red:         #ff4d6a;
      --red-dim:     rgba(255,77,106,0.12);
      --yellow:      #ffb020;
      --nav-w:       220px;
      --header-h:    56px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; }

    /* ── Layout — CSS Grid ── */
    #app {
      display: grid;
      grid-template-columns: var(--nav-w) 1fr;
      grid-template-rows: 100vh;
      height: 100vh;
      opacity: 0;
      transition: opacity 0.3s;
    }
    #app.ready { opacity: 1; }

    /* ── Sidebar ── */
    #sidebar {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      overflow: hidden;
      height: 100vh;
    }

    /* ── Main area ── */
    #main {
      grid-column: 2;
      grid-row: 1;
      display: grid;
      grid-template-rows: var(--header-h) 1fr;
      height: 100vh;
      overflow: hidden;
    }

    /* ── Top bar ── */
    #topbar {
      grid-row: 1;
      height: var(--header-h);
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 16px;
      padding: 0 24px;
    }

    /* ── Content ── */
    #content {
      grid-row: 2;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 24px;
      padding-bottom: 48px;
      -webkit-overflow-scrolling: touch;
    }