/* ── Google Fonts ── */
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');
    /* ════════════════════════════════
       RESET / BASE
    ════════════════════════════════ */

    /* ════════════════════════════════
       APP SHELL  (sidebar + column)
    ════════════════════════════════ */
    #container {
      display: flex !important;
      height: calc(100vh - 28px) !important;
      overflow: hidden !important;
      padding: 0 !important;
      margin: 0 !important;
      max-width: none !important;
      width: 100% !important;
    }

    /* ════════════════════════════════
       SIDEBAR — overrides Bootstrap
    ════════════════════════════════ */
    #sidebar {
      width: var(--sidebar-w) !important;
      min-width: var(--sidebar-w) !important;
      background: var(--bg2) !important;
      border-right: 1px solid var(--border) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      transition: width 0.25s ease, min-width 0.25s ease !important;
      position: relative !important;
      z-index: 50 !important;
      height: 100% !important;
      float: none !important;
    }
    #sidebar.tt-collapsed { width: 52px !important; min-width: 52px !important; }

    /* Sidebar user row */
    .tt-sb-user {
      padding:10px 12px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:8px; flex-shrink:0; overflow:hidden;
    }
    .tt-sb-avatar {
      width:28px; height:28px; border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; color:var(--bg); font-family:var(--font-mono); flex-shrink:0;
    }
    .tt-sb-uname { font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; }
    .tt-sb-usub  { font-size:9px; color:var(--text3); font-family:var(--font-mono); white-space:nowrap; margin-top:1px; }
    #sidebar.tt-collapsed .tt-sb-uinfo { display:none; }

    /* Clock inside sidebar */
    .tt-sb-clock {
      padding:8px 14px; border-bottom:1px solid var(--border); flex-shrink:0; overflow:hidden;
    }
    .tt-sb-clock-val {
      font-family:var(--font-mono); font-size:20px; font-weight:700;
      color:var(--accent); letter-spacing:1px; line-height:1; transition:opacity 0.2s;
    }
    .tt-sb-clock-sub {
      font-size:9px; color:var(--text3); font-family:var(--font-mono);
      text-transform:uppercase; letter-spacing:0.5px; margin-top:2px;
    }
    #sidebar.tt-collapsed .tt-sb-clock-val { font-size:12px; letter-spacing:0; }
    #sidebar.tt-collapsed .tt-sb-clock-sub { display:none; }

    /* Section labels */
    .tt-sb-section {
      font-size:8.5px; text-transform:uppercase; letter-spacing:1.5px;
      color:var(--text3); font-weight:700; padding:12px 14px 4px;
      font-family:var(--font-mono); white-space:nowrap; flex-shrink:0;
      transition:opacity 0.2s;
    }
    #sidebar.tt-collapsed .tt-sb-section { opacity:0; height:0; padding:0; overflow:hidden; }

    .tt-nav-arrow {
      font-size:16px; color:var(--text3); transition:transform 0.2s; flex-shrink:0; margin-left:auto;
    }
    .tt-nav-item[aria-expanded="true"] .tt-nav-arrow { transform:rotate(90deg); }

    #sidebar.tt-collapsed .tt-nav-label,
    #sidebar.tt-collapsed .tt-nav-badge,
    #sidebar.tt-collapsed .tt-nav-arrow { display:none !important; }

    /* Sub-menus */
    .tt-sub {
      display:none; flex-direction:column;
      background:var(--bg3); padding-left:36px;
    }
    .tt-sub.open { display:flex; }
    .tt-sub a {
      font-size:11px; color:var(--text3); padding:7px 10px;
      text-decoration:none !important; transition:color 0.15s;
      border-left:1px solid var(--border); display:flex; align-items:center;
      justify-content:space-between;
    }
    .tt-sub a:hover { color:var(--accent); border-left-color:var(--accent); }
    .tt-sub a b { font-size:9px; color:var(--accent); font-family:var(--font-mono); }
    #sidebar.tt-collapsed .tt-sub { display:none !important; }

    /* ════════════════════════════════
       MAIN CONTENT COLUMN
    ════════════════════════════════ */
    #main-content {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      min-width: 0 !important;
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .wrapper.site-min-height {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      padding: 0 !important;
      margin: 0 !important;
      min-height: 0 !important;
    }
    #content-area {
      flex: 1 !important;
      overflow-y: auto !important;
      background: var(--bg) !important;
      min-height: 0 !important;
    }
    #content-area::-webkit-scrollbar { width:4px; }
    #content-area::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

    /* ════════════════════════════════
       TOPBAR  (replaces Bootstrap header)
    ════════════════════════════════ */
    header.header { display:none !important; }  /* hide old header */

    .tt-topbar {
      height: var(--header-h);
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 5px 16px;
      gap: 12px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 200;
    }