/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  --bg-deep:     #0f1117;
  --bg-surface:  #171b24;
  --bg-elevated: #1e2330;
  --bg-line:     #252c3a;

  --ink-100: #f0ece3;
  --ink-200: #c5bfb1;
  --ink-300: #9b968e;
  --ink-400: #746f68;
  --ink-500: #565248;

  --accent:       #3b82f6;
  --accent2:      #14b8a6;
  --accent-soft:  rgba(59,130,246,.13);
  --critical:     #e05040;
  --critical-soft:rgba(224,80,64,.11);
  --done:         #5fa87a;
  --danger:       #e05040;
  --line:         #2a3040;
  --line-critical:#e05040;

  --font-body:    "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", Calibri, Arial, sans-serif;
  --font-mono:    Consolas, "Courier New", monospace;

  --radius-sm: 5px;  --radius-md: 8px;  --radius-lg: 14px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 20px -12px rgba(0,0,0,.55);
  --sidebar-w: 68px;
  --header-h:  52px;
}

[data-theme="light"] {
  --bg-deep:     #f8f7f5;   /* near-white with just a hint of warmth */
  --bg-surface:  #ffffff;
  --bg-elevated: #f1efeb;
  --bg-line:     #e2ddd6;

  --ink-100: #1a1815;
  --ink-200: #3c3930;
  --ink-300: #6a6760;
  --ink-400: #9a9790;
  --ink-500: #b8b3ab;

  --accent:       #2563eb;
  --accent2:      #0d9488;
  --accent-soft:  rgba(37,99,235,.12);
  --critical:     #c03828;
  --critical-soft:rgba(192,56,40,.10);
  --done:         #2a7a4c;
  --danger:       #c03828;
  --line:         #d4cfc8;
  --line-critical:#c03828;
  --shadow-card: 0 1px 0 rgba(0,0,0,.04) inset, 0 4px 12px -6px rgba(0,0,0,.14);
}

/* ── Mobile overlay independent theme
   Applied via data-mobile-theme on .mobile-overlay (and on #asst-panel in
   mobile view) so the mobile UI can have its own theme that does not touch
   the desktop html[data-theme] attribute.
────────────────────────────────────────────────────────────────────────── */
.mobile-overlay[data-mobile-theme="dark"],
body.is-mobile-view #asst-panel[data-mobile-theme="dark"] {
  --bg-deep:      #0f1117;
  --bg-surface:   #171b24;
  --bg-elevated:  #1e2330;
  --bg-line:      #252c3a;
  --ink-100:      #f0ece3;
  --ink-200:      #c5bfb1;
  --ink-300:      #9b968e;
  --ink-400:      #746f68;
  --ink-500:      #565248;
  --accent:       #3b82f6;
  --accent2:      #14b8a6;
  --accent-soft:  rgba(59,130,246,.13);
  --critical:     #e05040;
  --critical-soft:rgba(224,80,64,.11);
  --done:         #5fa87a;
  --danger:       #e05040;
  --line:         #2a3040;
  --line-critical:#e05040;
  --shadow-card:  0 1px 0 rgba(255,255,255,.03) inset,0 8px 20px -12px rgba(0,0,0,.55);
}
.mobile-overlay[data-mobile-theme="light"],
body.is-mobile-view #asst-panel[data-mobile-theme="light"] {
  --bg-deep:      #f8f7f5;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f1efeb;
  --bg-line:      #e2ddd6;
  --ink-100:      #1a1815;
  --ink-200:      #3c3930;
  --ink-300:      #6a6760;
  --ink-400:      #9a9790;
  --ink-500:      #b8b3ab;
  --accent:       #2563eb;
  --accent2:      #0d9488;
  --accent-soft:  rgba(37,99,235,.12);
  --critical:     #c03828;
  --critical-soft:rgba(192,56,40,.10);
  --done:         #2a7a4c;
  --danger:       #c03828;
  --line:         #d4cfc8;
  --line-critical:#c03828;
  --shadow-card:  0 1px 0 rgba(0,0,0,.04) inset,0 4px 12px -6px rgba(0,0,0,.14);
}

/* ================================================================
   2. BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { transition: background .3s, color .3s; }
html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--ink-200);
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Subtle radial only — no grid squares */
body { background-image: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(59,130,246,.09), transparent 55%); transition: background .3s; }
[data-theme="light"] body { background-image: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(37,99,235,.06), transparent 55%); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: 0; }

/* ================================================================
   3. HEADER
   ================================================================ */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

.app__header {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(15,17,23,.88);
  border-bottom: 1px solid var(--bg-line);
  transition: background .3s, border-color .3s;
}
[data-theme="light"] .app__header { background: rgba(248,247,245,.92); }

.header__row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 8px; padding: 6px 12px 4px 16px; min-height: 50px;
}
.header__row > .brand     { flex: 0 0 auto; order: 0; }
.header__row > .plan-bar  { flex: 1 1 0; min-width: 0; order: 1; display: flex; justify-content: center; }
.header__row > .user-menu { flex: 0 0 auto; order: 2; }

@media (max-width: 900px) {
  .header__row > .plan-bar  { flex: 1 1 100%; order: 2; }
  .header__row > .user-menu { order: 1; margin-left: auto; }
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__logo { flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; gap: 1px; }
.brand__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em;
  background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; white-space: nowrap; line-height: 1.1;
}
.brand__mark em { font-style: italic; font-weight: 400; }
.brand__sub { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); white-space: nowrap; line-height: 1; }
@media (max-width: 520px) { .brand__sub { display: none; } }

.plan-bar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.plan-switch {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: var(--bg-elevated); border: 1px solid var(--bg-line); border-radius: 16px;
  transition: background .3s, border-color .3s;
}
.plan-switch::-webkit-scrollbar { display: none; }
.plan-switch__btn { padding: 5px 12px; font-size: 11px; font-weight: 600; color: var(--ink-300); border-radius: 999px; white-space: nowrap; transition: color .2s, background .2s; }
.plan-switch__btn:hover { color: var(--ink-100); }
.plan-switch__btn.is-active { background: var(--ink-100); color: var(--bg-deep); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--bg-line);
  color: var(--ink-300); font-size: 12px; transition: all .15s;
}
.icon-btn:hover { color: var(--ink-100); border-color: #4a5568; }
.icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }
.icon-btn--theme { position: relative; overflow: hidden; }
.icon-btn--theme .fa-sun { transition: opacity .2s; }
.icon-btn--theme .fa-moon { opacity: 0; position: absolute; transition: opacity .2s; }
[data-theme="light"] .icon-btn--theme .fa-sun { opacity: 0; }
[data-theme="light"] .icon-btn--theme .fa-moon { opacity: 1; }

.sync-pill {
  display: none; align-items: center; gap: 5px;
  padding: 4px 9px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--bg-line);
  color: var(--ink-400); transition: all .25s; white-space: nowrap;
}
.sync-pill.is-saving,
.sync-pill.is-saved,
.sync-pill.is-error { display: inline-flex; }
.sync-pill.is-saving { color: var(--accent); border-color: var(--accent); }
.sync-pill.is-saved  { color: var(--done);   border-color: var(--done); }
.sync-pill.is-error  { color: var(--danger); border-color: var(--danger); }
.sync-pill__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ================================================================
   4. RIGHT SIDEBAR
   ================================================================ */
.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--bg-surface); border-left: 1px solid var(--bg-line);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--header-h) + 10px) 7px 14px; gap: 3px;
  z-index: 25; overflow-y: auto; scrollbar-width: none;
  transition: background .3s, border-color .3s;
}
.sidebar::-webkit-scrollbar { display: none; }

.sb-btn {
  width: 54px; min-height: 44px; padding: 7px 4px 5px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  color: var(--ink-400); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-body); font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: all .15s; cursor: pointer;
}
.sb-btn i { font-size: 13px; }
.sb-btn:hover { color: var(--ink-100); background: var(--bg-elevated); border-color: var(--bg-line); }
.sb-btn.is-active, .sb-btn.is-on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.sb-btn.is-edit-on { color: var(--bg-deep); background: var(--ink-200); border-color: var(--ink-200); }
[data-theme="light"] .sb-btn.is-edit-on { color: var(--bg-surface); }

.sb-divider { width: 36px; height: 1px; background: var(--bg-line); margin: 5px 0; flex-shrink: 0; transition: background .3s; }
.sb-spacer { flex: 1; }
.sb-legend { display: flex; gap: 6px; align-items: center; padding: 6px 0; flex-shrink: 0; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; }
.sb-dot--critical { background: var(--critical); box-shadow: 0 0 0 2px var(--critical-soft); }
.sb-dot--done     { background: var(--done); }

/* ================================================================
   5. PLAN META
   ================================================================ */
.plan-meta {
  padding: 10px 16px 4px;
  padding-right: calc(var(--sidebar-w) + 16px);
  display: flex; flex-direction: column; gap: 2px;
}
.plan-meta__eyebrow { font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.plan-meta__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -.01em;
  color: var(--ink-100); line-height: 1.1; outline: 0; transition: color .3s;
}
.plan-meta__title em { font-style: italic; color: var(--ink-300); font-weight: 400; }
.plan-meta__title[contenteditable="true"] { border-bottom: 1px dashed var(--accent); padding-bottom: 2px; }
.plan-meta__stats { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: var(--ink-300); }
.plan-meta__stats b { color: var(--ink-100); font-weight: 600; margin-right: 2px; }
.plan-meta.is-tasks-view {
  max-width: 1150px; margin: 0 auto; padding-left: 0; padding-right: 0;
}
@media (max-width: 900px) {
  .plan-meta.is-tasks-view { padding-left: 14px; }
}
.plan-meta__stats .critical-stat b { color: var(--critical); }

/* ================================================================
   6. CANVAS
   ================================================================ */
.canvas {
  position: relative; padding: 10px 16px 80px;
  padding-right: calc(var(--sidebar-w) + 16px); overflow-x: auto;
}
.canvas.is-outline { overflow-x: visible; }