/* ═══════════════════════════════════════════
       DESIGN TOKENS
       ═══════════════════════════════════════════ */
    :root {
      --bg:        #f5f6fa;
      --surface:   #ffffff;
      --surface2:  #f9fafc;
      --surface3:  #f0f2f8;
      --border:    #e8eaf2;
      --border2:   #d8dce8;
      --text:      #14162a;
      --muted:     #5a6080;
      --subtle:    #9298b0;
      --ink:       #2c3050;

      /* Brand — deep indigo + coral accent */
      --brand:     #3a3fff;
      --brand-dim: rgba(58,63,255,.08);
      --brand-glow:rgba(58,63,255,.2);
      --accent:    #ff4f6a;
      --accent-dim:rgba(255,79,106,.08);
      --green:     #0fa672;
      --green-dim: rgba(15,166,114,.09);
      --amber:     #f59e0b;
      --red:       #e04040;

      --r:   12px;
      --r2:  8px;
      --sidebar: 248px;

      --shadow-sm: 0 1px 3px rgba(20,22,42,.06), 0 1px 2px rgba(20,22,42,.04);
      --shadow:    0 4px 16px rgba(20,22,42,.08), 0 1px 4px rgba(20,22,42,.04);
      --shadow-lg: 0 12px 40px rgba(20,22,42,.12), 0 4px 12px rgba(20,22,42,.06);
    }

    /* Workspace themes: token-driven so every view, modal, and tool changes together. */
    :root[data-theme="neon"] {
      color-scheme: dark;
      --bg:#080b12;--surface:#101520;--surface2:#151c29;--surface3:#1c2635;
      --border:#263247;--border2:#3a4961;--text:#edfaff;--muted:#9fb5c5;--subtle:#70879b;--ink:#f4fdff;
      --brand:#24f4c7;--brand-dim:rgba(36,244,199,.1);--brand-glow:rgba(36,244,199,.3);--accent:#ff3df2;
      --green:#24f4c7;--green-dim:rgba(36,244,199,.1);--amber:#ffd166;--red:#ff5577;
      --shadow-sm:0 0 0 1px rgba(36,244,199,.04);--shadow:0 12px 30px rgba(0,0,0,.42),0 0 22px rgba(36,244,199,.05);--shadow-lg:0 20px 55px rgba(0,0,0,.6),0 0 35px rgba(255,61,242,.08);
    }
    :root[data-theme="editorial"] {
      --bg:#f2efe6;--surface:#fffdf7;--surface2:#f8f4e9;--surface3:#ebe5d7;--border:#ded7c7;--border2:#c8beaa;
      --text:#292720;--muted:#696356;--subtle:#958d7c;--ink:#171713;--brand:#b52c20;--brand-dim:rgba(181,44,32,.08);--brand-glow:rgba(181,44,32,.18);--accent:#1e5a78;
      --r:3px;--r2:2px;--shadow-sm:0 1px 0 rgba(23,23,19,.08);--shadow:3px 3px 0 rgba(23,23,19,.09);--shadow-lg:7px 7px 0 rgba(23,23,19,.12);
    }
    :root[data-theme="studio"] {
      --bg:#fff5ea;--surface:#fffdfa;--surface2:#fff7ed;--surface3:#f8e8d7;--border:#efd9c5;--border2:#dfbea2;
      --text:#3d2b2a;--muted:#7f615b;--subtle:#aa8980;--ink:#4a2529;--brand:#e45c3a;--brand-dim:rgba(228,92,58,.09);--brand-glow:rgba(228,92,58,.22);--accent:#a83b78;--green:#27866c;
      --r:18px;--r2:12px;--shadow-sm:0 2px 7px rgba(101,55,36,.07);--shadow:0 9px 26px rgba(101,55,36,.1);--shadow-lg:0 20px 50px rgba(101,55,36,.15);
    }
    :root[data-theme="evergreen"] {
      --bg:#edf3ec;--surface:#fbfdf8;--surface2:#f2f7ef;--surface3:#e2ebe0;--border:#d3dfd0;--border2:#b8cbb5;
      --text:#20342b;--muted:#587064;--subtle:#84988d;--ink:#173c2d;--brand:#267a55;--brand-dim:rgba(38,122,85,.09);--brand-glow:rgba(38,122,85,.2);--accent:#d97941;--green:#267a55;
      --r:10px;--r2:7px;--shadow-sm:0 1px 3px rgba(23,60,45,.06);--shadow:0 7px 20px rgba(23,60,45,.09);--shadow-lg:0 18px 44px rgba(23,60,45,.13);
    }
    :root[data-theme="neon"] body { background-image:radial-gradient(circle at 72% 8%,rgba(255,61,242,.1),transparent 30%),linear-gradient(rgba(36,244,199,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(36,244,199,.025) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px; }
    :root[data-theme="editorial"] .page-title, :root[data-theme="editorial"] .settings-section-title { font-family:Georgia,serif;letter-spacing:-.02em; }
    :root[data-theme="studio"] .side { background:#4a2529; }
    :root[data-theme="evergreen"] .side { background:#173c2d; }
    :root[data-theme="neon"] .side { background:#05070c;border-right:1px solid rgba(36,244,199,.22); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { -webkit-text-size-adjust: 100%; }

    body {
      font-family: 'Lato', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      min-height: 100vh;
    }

    /* ── GLOBAL STATUS ── */
    .global-status-banner {
      position: fixed;
      top: 24px;
      left: calc(var(--sidebar) + max(24px, (100vw - var(--sidebar) - 720px) / 2));
      z-index: 9999;
      width: min(720px, calc(100vw - var(--sidebar) - 48px));
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 16px 16px 18px;
      border: 1px solid var(--border2);
      border-radius: var(--r);
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 18px 45px rgba(20,22,42,.18), 0 4px 14px rgba(20,22,42,.1);
      isolation: isolate;
      pointer-events: auto;
    }

    .global-status-banner::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      border-radius: var(--r) 0 0 var(--r);
      background: var(--brand);
    }

    .global-status-banner.hidden { display: none !important; }

    .global-status-banner.info::before {
      background: var(--brand);
    }

    .global-status-banner.warning::before {
      background: var(--amber);
    }

    .global-status-banner.error::before {
      background: var(--red);
    }

    .global-status-banner.success::before {
      background: var(--green);
    }

    .global-status-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .global-status-copy strong {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 14px;
      line-height: 1.2;
    }

    .global-status-copy span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .global-status-dismiss {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--surface2);
      color: var(--muted);
      cursor: pointer;
      font-size: 19px;
      line-height: 1;
      flex-shrink: 0;
      align-self: flex-start;
      transition: all .15s ease;
    }

    .global-status-dismiss:hover {
      color: var(--text);
      border-color: var(--border2);
      background: var(--surface3);
    }

    .feature-paused {
      opacity: .58;
      cursor: not-allowed !important;
    }

    .feature-paused[aria-disabled="true"] {
      filter: grayscale(.15);
    }

    @media (max-width: 640px) {
      .global-status-banner {
        top: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        padding: 14px;
        gap: 10px;
      }
    }

    /* ── LAYOUT ── */
    .app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; transition: grid-template-columns .2s ease; }
    .main { overflow: auto; min-width: 0; }
    .view { display: none; padding: 28px 32px 40px; max-width: 1440px; margin-inline: auto; }
    /* Views using view-content: reset outer padding and use view-content */
    #calendarView, #approvalsView, #ideasView { padding: 28px 0 40px; }
    #calendarView .page-hdr, #approvalsView .page-hdr, #ideasView .page-hdr { margin-left: 32px; margin-right: 32px; }
    .view.active { display: block; animation: vEnter .18s ease; }
    @keyframes vEnter { from { opacity:.5; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }

    /* ── SIDEBAR ── */
    .side {
      background: var(--text);
      display: flex;
      flex-direction: column;
      height: 100vh;
      position: sticky;
      top: 0;
      overflow: hidden;
      transition: width .2s ease;
    }

    .side-logo {
      padding: 20px 18px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo-mark {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 17px;
      color: #fff;
      letter-spacing: -.3px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .logo-beta {
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: var(--brand);
      color: #fff;
      padding: 3px 7px;
      border-radius: 4px;
    }

    /* Connection status */
    .side-connection {
      padding: 10px 10px 0;
    }

    .connection-card {
      margin: 0 10px 10px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--r);
      background: rgba(255,255,255,.035);
    }
    @keyframes brandGlowPulse {
      0%, 100% {
        box-shadow: 0 6px 16px rgba(12, 15, 46, 0.22), 0 0 0 0 rgba(58,63,255,0);
      }
      50% {
        box-shadow: 0 10px 26px rgba(12, 15, 46, 0.28), 0 0 0 6px rgba(58,63,255,.18);
      }
    }
    .connection-card.api-live-pulse {
      animation: brandGlowPulse 4s ease-in-out infinite;
      will-change: box-shadow;
    }
    .connection-card.compact {
      padding: 12px;
    }

    .conn-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .connection-card.compact .conn-row {
      margin-bottom: 10px;
    }

    .conn-heading {
      margin: 0 0 6px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px;
      line-height: 1.15;
      color: #fff;
    }

    .conn-helper {
      margin: 0 0 12px;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(255,255,255,.52);
    }

    .conn-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      flex-shrink: 0;
      transition: background .3s;
    }
    .conn-dot.on {
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(15,166,114,.25);
      animation: dotPulse 3s ease-in-out infinite;
    }
    @keyframes dotPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(15,166,114,.4); }
      50%      { box-shadow: 0 0 0 5px rgba(15,166,114,0); }
    }

    .conn-label {
      font-size: 11px;
      font-family: 'DM Mono', monospace;
      color: rgba(255,255,255,.45);
      letter-spacing: .04em;
    }

    .conn-token-preview {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: rgba(255,255,255,.3);
      margin-bottom: 8px;
    }

    .conn-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .connection-card.compact .conn-actions {
      flex-direction: column;
      gap: 7px;
    }
    .connection-card.compact .conn-actions .btn {
      width: 100%;
      justify-content: center;
      min-height: 30px;
    }
    .connection-card.compact .conn-actions .btn.ghost {
      min-height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.58);
    }
    .conn-last-sync {
      margin-top: 8px;
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: rgba(255,255,255,.34);
    }
    .connection-card.compact .conn-last-sync {
      margin-top: 6px;
      text-align: center;
    }

    /* Sync row */
    .side-sync {
      padding: 10px 16px 12px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    #syncBtn {
      width: 100%;
      justify-content: center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.7);
      font-size: 12px;
    }
    #syncBtn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }

    .sync-meta {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sync-meta span {
      font-size: 10px;
      font-family: 'DM Mono', monospace;
      color: rgba(255,255,255,.28);
      line-height: 1.4;
    }

    /* Nav */
    .side-nav {
      flex: 1;
      padding: 16px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
    }

    .nav-section-label {
      font-size: 9px;
      font-family: 'DM Mono', monospace;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.22);
      padding: 0 8px;
      margin: 10px 0 5px;
    }
    .nav-section-label:first-child { margin-top: 0; }

    .nav-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: rgba(255,255,255,.45);
      font-size: 13px;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: background .12s, color .12s;
      position: relative;
    }
    .nav-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
    .nav-btn.active {
      background: rgba(58,63,255,.2);
      color: #fff;
      border: 1px solid rgba(58,63,255,.35);
    }
    .nav-btn.active .nav-icon { color: var(--brand); opacity: 1; }

    .nav-icon {
      width: 16px; height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: .6;
      flex-shrink: 0;
    }
    .nav-icon svg {
      width: 100%; height: 100%;
      stroke: currentColor; fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .nav-tag {
      font-size: 9px;
      font-family: 'DM Mono', monospace;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: .04em;
      flex-shrink: 0;
    }
    .nav-tag.needs { background: rgba(255,79,106,.15); color: var(--accent); }
    .nav-tag.free { background: rgba(15,166,114,.15); color: var(--green); }

    /* Sidebar toggle button */
    .sidebar-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.1);
      background: transparent;
      color: rgba(255,255,255,.45);
      cursor: pointer;
      flex-shrink: 0;
      transition: background .12s, color .12s;
    }
    .sidebar-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }

    /* ── COLLAPSED SIDEBAR ── */
    .app.sidebar-collapsed {
      --sidebar: 56px;
    }
    .app.sidebar-collapsed .side-logo { padding: 18px 0 16px; justify-content: center; }
    .app.sidebar-collapsed .logo-mark { display: none; }
    .app.sidebar-collapsed .side-connection { display: none; }
    .app.sidebar-collapsed .side-sync { display: none; }
    .app.sidebar-collapsed .nav-section-label { display: none; }
    .app.sidebar-collapsed .nav-text { display: none; }
    .app.sidebar-collapsed .nav-tag { display: none; }
    .app.sidebar-collapsed .side-nav {
      padding: 12px 6px;
      align-items: center;
    }
    .app.sidebar-collapsed .nav-btn {
      justify-content: center;
      padding: 10px;
      width: 40px;
      position: relative;
    }
    .app.sidebar-collapsed .nav-icon { opacity: .7; }
    .app.sidebar-collapsed .nav-btn.active .nav-icon { opacity: 1; }
    .app.sidebar-collapsed .nav-btn:hover .nav-icon { opacity: 1; }
    .app.sidebar-collapsed .side-bottom { padding: 10px 6px 14px; }
    .app.sidebar-collapsed .side-bottom .nav-btn { justify-content: center; padding: 10px; width: 40px; }

    /* Tooltips in collapsed mode */
    .app.sidebar-collapsed .nav-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      font-family: 'Lato', sans-serif;
      white-space: nowrap;
      padding: 5px 9px;
      border-radius: 6px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .12s;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .app.sidebar-collapsed .nav-btn:hover::after { opacity: 1; }

    /* Bottom of sidebar */
    .side-bottom {
      padding: 10px 10px 14px;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .side-bottom .nav-btn { font-size: 12px; color: rgba(255,255,255,.3); }
    .side-bottom .nav-btn:hover { color: rgba(255,255,255,.6); }