/* ============================================
   BLUEPRINT — Project Management App
   Neon Design System · Electric Coast Theme
   ============================================ */

/* ── Design Tokens (from Neon DS 1.0) ── */
:root {
  --violet-50:#fdf2fe;--violet-100:#fae5fd;--violet-200:#f5c6fb;--violet-300:#ef9af7;--violet-400:#e76ef3;--violet-500:#ff68f2;--violet-600:#c84cc0;--violet-700:#8e3588;--violet-800:#5e2360;--violet-900:#3b1661;--violet-950:#250d3e;
  --heat-50:#fff2ed;--heat-100:#ffe1d6;--heat-200:#ffc1a8;--heat-300:#ff9b79;--heat-400:#ff704d;--heat-500:#e85535;--heat-600:#c03a23;--heat-700:#8f2519;--heat-800:#5a0030;--heat-900:#40001f;--heat-950:#280013;
  --acid-50:#edfff3;--acid-100:#d5ffe2;--acid-200:#a8ffc0;--acid-300:#7bfb9f;--acid-400:#57f57f;--acid-500:#35c762;--acid-600:#22994a;--acid-700:#156c39;--acid-800:#0a5547;--acid-900:#003f55;--acid-950:#002836;
  --solar-50:#fffce8;--solar-100:#fff8c5;--solar-200:#ffef85;--solar-300:#ffe24a;--solar-400:#ffd024;--solar-500:#e5ae0c;--solar-600:#b88304;--solar-700:#8c5d07;--solar-800:#6a2b00;--solar-900:#481c00;--solar-950:#2d1000;
  --toxic-50:#f3ffe6;--toxic-100:#e3ffca;--toxic-200:#c8ff96;--toxic-300:#b2ff4d;--toxic-400:#8fe033;--toxic-500:#6eb820;--toxic-600:#529214;--toxic-700:#3a6c0f;--toxic-800:#1e5319;--toxic-900:#0e3f24;--toxic-950:#062816;
  --mint-50:#ecfffe;--mint-100:#d0fefa;--mint-200:#a1fdf5;--mint-300:#72f3ec;--mint-400:#4fe8e4;--mint-500:#2fc4c0;--mint-600:#1d9e9b;--mint-700:#13787a;--mint-800:#0a5b5a;--mint-900:#00423a;--mint-950:#002a25;
  --coast-50:#eff8ff;--coast-100:#dbf0ff;--coast-200:#b8e2ff;--coast-300:#8ed1ff;--coast-400:#63c2ff;--coast-500:#3da2ed;--coast-600:#2580c9;--coast-700:#1762a2;--coast-800:#0e4a84;--coast-900:#003166;--coast-950:#001f42;
  --indigo-50:#f0f0ff;--indigo-100:#e0dfff;--indigo-200:#c3c1ff;--indigo-300:#a5a2ff;--indigo-400:#8784ff;--indigo-500:#6b66e6;--indigo-600:#534ec4;--indigo-700:#3e399e;--indigo-800:#2c2a80;--indigo-900:#221b66;--indigo-950:#150f42;
  --neutral-50:#fafafa;--neutral-100:#f4f4f5;--neutral-200:#e4e4e7;--neutral-300:#d4d4d8;--neutral-400:#a1a1aa;--neutral-500:#71717a;--neutral-600:#52525b;--neutral-700:#3f3f46;--neutral-800:#27272a;--neutral-900:#18181b;--neutral-950:#0a0a0b;

  /* Semantic */
  --color-success:#57f57f; --color-success-light:#edfff3; --color-success-dark:#003f55;
  --color-warning:#ffe24a; --color-warning-light:#fffce8; --color-warning-dark:#6a2b00;
  --color-danger:#ff704d;  --color-danger-light:#fff2ed;  --color-danger-dark:#5a0030;
  --color-info:#8784ff;    --color-info-light:#f0f0ff;    --color-info-dark:#221b66;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Bricolage Grotesque', var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;

  /* Radius */
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);

  --transition-fast:150ms ease-out;
  --transition-base:200ms ease-out;

  /* iOS-style spring easings */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.18,1.25,.4,1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 400ms;

  /* ── Theme surfaces (light) ── */
  --bg:         var(--neutral-50);
  --surface:    #fff;
  --surface-alt: var(--neutral-100);
  --border:     var(--neutral-200);
  --text-h:     var(--neutral-900);
  --text-b:     var(--neutral-600);
  --text-m:     var(--neutral-500); /* was 400, bumped for 4.5:1 on white */

  /* Primary = Electric Coast */
  --primary:       var(--coast-500);
  --primary-hover: var(--coast-600);
  --primary-light: var(--coast-50);
  --primary-text:  #fff;

  --sidebar-bg: var(--coast-950);
  --sidebar-text: rgba(255,255,255,.72);
  --sidebar-hover: rgba(255,255,255,.08);
  --sidebar-active-bg: rgba(99,194,255,.15);
  --sidebar-active-text: var(--coast-400);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg:         var(--neutral-950);
  --surface:    var(--neutral-900);
  --surface-alt: var(--neutral-800);
  --border:     var(--neutral-700);
  --text-h:     #f0f0f2;
  --text-b:     var(--neutral-300); /* was 400, bumped for contrast on dark surfaces */
  --text-m:     var(--neutral-400); /* was 500, bumped for contrast on dark surfaces */
  --primary:       var(--coast-400);
  --primary-hover: var(--coast-300);
  --primary-light: rgba(99,194,255,.08);
  --primary-text:  #020e1e;
  --sidebar-bg: #020e1e;
  --sidebar-text: rgba(255,255,255,.72);
  --sidebar-hover: #0f2a42;
  --sidebar-active-bg: rgba(99,194,255,.15);
  --sidebar-active-text: var(--coast-300);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.3);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-b);background:var(--bg);display:flex;height:100vh;height:100dvh;overflow:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
.hidden{display:none !important}

/* ════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════ */
.sidebar{
  width:240px;flex-shrink:0;height:100vh;
  display:flex;flex-direction:column;
  background:var(--sidebar-bg);
  border-right:1px solid rgba(255,255,255,.06);
  transition:transform var(--transition-base);
  z-index:40;
  box-shadow:1px 0 4px rgba(0,0,0,.03);
}
.sidebar-brand{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  background:#fff;
  border-bottom:1px solid var(--border);
}
.sidebar-logo{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--logo-bg, var(--coast-900));
  color:var(--logo-mark, var(--coast-400));
  border-radius:var(--radius-lg);
}
.sidebar-logo svg{fill:currentColor;
}
.sidebar-title{font-family:'Bricolage Grotesque',var(--font-sans);font-weight:800;font-size:var(--text-xl);color:var(--logo-text, var(--coast-900));text-transform:uppercase;letter-spacing:.06em}

/* Sidebar project picker */
.sidebar-project-picker{
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
.sp-current{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  cursor:pointer;transition:all var(--duration-fast);
  font-size:var(--text-sm);font-weight:600;color:var(--text-h);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.sp-current:hover{box-shadow:var(--shadow-md)}
.sp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;flex-grow:0;display:block;aspect-ratio:1/1}
.sp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-arrow{color:var(--text-m);flex-shrink:0;transition:transform var(--duration-fast)}

.sp-dropdown{
  display:none;position:absolute;left:var(--space-3);right:var(--space-3);top:100%;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-1);z-index:50;
  max-height:240px;overflow-y:auto;
}
.sp-dropdown.open{display:block;animation:popoverSpring var(--duration-base) var(--ease-spring)}

.sp-option{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--text-h);
  transition:background var(--duration-fast);
}
.sp-option:hover{background:var(--surface-alt)}
.sp-option svg{margin-left:auto;color:var(--primary);flex-shrink:0}
.sp-active{background:var(--primary-light)}

.sp-divider{height:1px;background:var(--border);margin:var(--space-1) var(--space-2)}
.sp-new-btn{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  cursor:pointer;font-size:var(--text-sm);font-weight:500;color:var(--primary);
  transition:background var(--duration-fast);
}
.sp-new-btn:hover{background:var(--surface-alt)}
.sp-new-btn svg{opacity:.7}

.sp-new-form{
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3);
  border-top:1px solid var(--border);
}
.sp-new-form input{
  width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text-h);font-family:var(--font-sans);
}
.sp-new-form input:focus{outline:none;border-color:var(--primary)}
.sp-color-row{display:flex;gap:6px;flex-wrap:wrap}
.sp-color-dot{
  width:22px;height:22px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:all var(--duration-fast);
}
.sp-color-dot:hover{transform:scale(1.15)}
.sp-color-dot.active{border-color:var(--text-h);transform:scale(1.1)}
/* New project modal color grid */
.np-color-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);
}
.np-color-option{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  border:1.5px solid var(--border);background:var(--surface);
  cursor:pointer;transition:all var(--duration-fast);
  font-family:var(--font-sans);
}
.np-color-option:hover{border-color:var(--neutral-300);background:var(--surface-alt)}
.np-color-option.active{border-color:var(--text-h);background:var(--surface-alt)}
.np-color-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.np-color-label{font-size:var(--text-xs);font-weight:500;color:var(--text-h)}

@media(max-width:480px){.np-color-grid{grid-template-columns:repeat(2,1fr)}}

.sidebar-nav{flex:1;padding:var(--space-2) var(--space-3);overflow-y:auto}

.sidebar-label{
  display:block;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(255,255,255,.5);
  padding:var(--space-4) var(--space-3) var(--space-2);
}

.sidebar-link{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;color:var(--sidebar-text);
  border:1px solid transparent;
  position:relative;overflow:hidden;
}
.sidebar-link::before{
  content:'';position:absolute;inset:0;
  background:var(--sidebar-hover);
  border-radius:var(--radius-md);
  transform:translateY(100%);opacity:0;
  transition:transform 300ms cubic-bezier(.16,1,.3,1),opacity 200ms ease;
  z-index:-1;pointer-events:none;
}
.sidebar-link:hover::before{transform:translateY(0);opacity:1}
.sidebar-link:hover{color:#fff}
.sidebar-link:hover svg{opacity:.8}
.sidebar-link.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);border-color:var(--primary)}
.sidebar-link.active::before{display:none}
[data-theme="dark"] .sidebar-link.active{border-color:var(--primary)}
.sidebar-link svg{flex-shrink:0;opacity:.7}
.sidebar-link.active svg{opacity:1}

.sidebar-footer{
  padding:var(--space-4) var(--space-5);border-top:1px solid rgba(255,255,255,.06);
}
.sidebar-user{display:flex;align-items:center;gap:var(--space-3)}
.sidebar-user-info{display:flex;flex-direction:column}
.sidebar-user-name{font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.85)}
.sidebar-user-role{font-size:var(--text-xs);color:rgba(255,255,255,.6)}

/* Dark mode sidebar overrides */
[data-theme="dark"] .sidebar{border-right-color:rgba(255,255,255,.04)}
[data-theme="dark"] .sidebar-footer{border-top-color:rgba(255,255,255,.04)}

/* ════════════════════════════════════════
   MAIN WRAP
   ════════════════════════════════════════ */
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}

/* ════════════════════════════════════════
   TOP BAR
   ════════════════════════════════════════ */
.topbar{
  display:flex;align-items:center;gap:var(--space-4);
  height:56px;padding:0 var(--space-6);
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.topbar-menu-btn{
  display:none;border:none;background:none;color:var(--text-b);cursor:pointer;
  padding:var(--space-1);border-radius:var(--radius-md);
}
.topbar-menu-btn:hover{background:var(--surface-alt)}

.topbar-search{
  display:flex;align-items:center;gap:var(--space-2);flex:1;max-width:400px;
  padding:var(--space-2) var(--space-3);
  background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.topbar-search svg{color:var(--text-m);flex-shrink:0}
.topbar-search input{
  border:none;background:none;outline:none;width:100%;
  font-size:var(--text-sm);color:var(--text-h);
}
.topbar-search input::placeholder{color:var(--text-m)}
.topbar-search{position:relative;max-width:600px}
.topbar-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(87,245,127,.08)}

.search-shortcut{
  font-size:10px;color:var(--text-m);font-family:var(--font-mono);
  background:var(--surface);border:1px solid var(--border);
  padding:1px 5px;border-radius:var(--radius-sm);
  pointer-events:none;flex-shrink:0;
}
.topbar-search:focus-within .search-shortcut{display:none}

/* ── Search Results Panel ── */
.search-results{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  width:100%;max-height:480px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 16px 48px -8px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  z-index:300;
}
.search-results.open{display:block;animation:popoverSpring var(--duration-base) var(--ease-spring)}
[data-theme="dark"] .search-results{
  box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.sr-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
}
.sr-section{
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
}
.sr-section:nth-child(even){border-right:none}
.sr-section:nth-child(odd):last-child{grid-column:1/-1;border-right:none}
.sr-grid > .sr-section:nth-last-child(1){border-bottom:none}
.sr-grid > .sr-section:nth-last-child(2):nth-child(odd){border-bottom:none}

.sr-section-header{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);margin-bottom:var(--space-2);
}
.sr-section-icon{display:flex;align-items:center;color:var(--text-m);flex-shrink:0}
.sr-count{
  font-size:9px;font-weight:600;
  background:var(--surface-alt);color:var(--text-m);
  padding:0 5px;border-radius:var(--radius-full);margin-left:auto;
}

.sr-list{display:flex;flex-direction:column;gap:1px}

.sr-item{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-2);border-radius:var(--radius-md);
  cursor:pointer;transition:background var(--duration-fast);
}
.sr-item:hover{background:var(--surface-alt)}
.sr-item-name{
  font-size:var(--text-xs);font-weight:500;color:var(--text-h);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sr-item-name mark{
  background:rgba(87,245,127,.2);color:inherit;border-radius:2px;padding:0 1px;
}
[data-theme="dark"] .sr-item-name mark{background:rgba(87,245,127,.15)}

.sr-channel-hash{
  font-size:var(--text-base);font-weight:700;color:var(--text-m);
  width:20px;text-align:center;flex-shrink:0;
}
/* (sr-view-icon removed — uses sr-section-icon now) */

.sr-more{
  padding:var(--space-2);text-align:center;
  font-size:var(--text-xs);font-weight:600;color:var(--primary);
  cursor:pointer;border-radius:var(--radius-md);
  transition:background var(--duration-fast);
}
.sr-more:hover{background:var(--primary-light)}

.sr-empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding:var(--space-10);color:var(--text-m);font-size:var(--text-sm);
}

/* Recent items */
.sr-recent-header{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);padding:var(--space-3) var(--space-5) var(--space-2);
  border-bottom:1px solid var(--border);
}
.sr-recent-list{padding:var(--space-2) var(--space-3)}
.sr-recent-list .sr-item{padding:8px var(--space-3)}
.sr-time{font-size:10px;color:var(--text-m);font-family:var(--font-mono);flex-shrink:0;margin-left:auto}

/* Quick access grid */
.sr-recent-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  padding:var(--space-2);
}
.sr-quick-item{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding:var(--space-4) var(--space-2);border-radius:var(--radius-lg);
  cursor:pointer;transition:background var(--duration-fast);
  font-size:var(--text-xs);font-weight:500;color:var(--text-b);text-align:center;
}
.sr-quick-item:hover{background:var(--surface-alt);color:var(--text-h)}
.sr-quick-icon{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);border-radius:var(--radius-lg);color:var(--text-m);
  transition:all var(--duration-fast);
}
.sr-quick-item:hover .sr-quick-icon{background:var(--primary-light);color:var(--primary)}

@media(max-width:768px){
  .search-results{width:calc(100vw - var(--space-8));left:calc(-1 * var(--space-4))}
  .sr-grid{grid-template-columns:1fr}
  .sr-recent-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:480px){
  .search-shortcut{display:none}
  .sr-recent-grid{grid-template-columns:repeat(2,1fr)}
}

.topbar-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}

.topbar-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  color:var(--text-b);cursor:pointer;transition:all var(--transition-fast);
  position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.topbar-btn:active{transform:scale(.96)}
.topbar-btn:hover{background:var(--surface-alt);color:var(--text-h)}

/* Profile Menu */
.profile-menu-wrap{position:relative}
.profile-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  width:240px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  z-index:250;overflow:hidden;
  animation:popoverSpring var(--duration-base) var(--ease-spring);
}
[data-theme="dark"] .profile-menu{box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}

.pm-header{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-4);
  border-bottom:1px solid var(--border);
}
.pm-header-info{display:flex;flex-direction:column;min-width:0}
.pm-name{font-size:var(--text-sm);font-weight:600;color:var(--text-h);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-role{font-size:var(--text-xs);color:var(--text-m)}

.pm-items{padding:var(--space-2)}
.pm-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;color:var(--text-h);
  cursor:pointer;transition:background var(--duration-fast);
}
.pm-item:hover{background:var(--surface-alt)}
.pm-item svg{color:var(--text-m);flex-shrink:0}
.pm-item:hover svg{color:var(--text-h)}

.pm-divider{height:1px;background:var(--border);margin:var(--space-1) var(--space-2)}

.pm-logout{color:var(--heat-500)}
.pm-logout svg{color:var(--heat-400)}
.pm-logout:hover{background:var(--heat-50)}
[data-theme="dark"] .pm-logout:hover{background:rgba(255,112,77,.08)}

/* Create Menu */
.create-menu-wrap{position:relative;flex-shrink:0}
.create-menu-btn{
  gap:var(--space-2);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-4);
  height:38px;
}

.create-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  width:320px;max-height:480px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 16px 48px -8px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  z-index:200;
}
.create-menu.open{display:block;animation:popoverSpring var(--duration-base) var(--ease-spring)}
[data-theme="dark"] .create-menu{
  box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.cm-section{padding:var(--space-2) var(--space-2);border-bottom:1px solid var(--border)}
.cm-section:last-child{border-bottom:none}

.cm-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);padding:var(--space-2) var(--space-3) var(--space-1);
}

.cm-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  cursor:pointer;transition:background var(--duration-fast);
}
.cm-item:hover{background:var(--surface-alt)}
.cm-item:active{transform:scale(.99)}

.cm-icon{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);border-radius:var(--radius-md);
  color:var(--text-m);flex-shrink:0;
}
.cm-item:hover .cm-icon{color:var(--primary);background:var(--primary-light)}

.cm-info{display:flex;flex-direction:column;flex:1;min-width:0}
.cm-name{font-size:var(--text-sm);font-weight:600;color:var(--text-h)}
.cm-desc{font-size:10px;color:var(--text-m);line-height:1.4;margin-top:1px}

.cm-item kbd{
  font-size:10px;font-family:var(--font-mono);color:var(--text-m);
  background:var(--surface-alt);border:1px solid var(--border);
  padding:1px 6px;border-radius:var(--radius-sm);flex-shrink:0;
}

@media(max-width:480px){
  .create-menu{width:calc(100vw - var(--space-8));right:calc(-1 * var(--space-2))}
}

/* Undo / Redo */
.undo-redo-group{display:flex;gap:2px}
.undo-redo-group .topbar-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
@media(max-width:480px){.undo-redo-group{display:none}}

/* Font size control */
.font-size-control{
  display:flex;align-items:center;gap:2px;
  background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:2px;
  box-shadow:var(--shadow-sm);
}
.font-btn{
  width:30px;height:30px;border:none;position:relative;
  background:none;
}
.font-btn svg{opacity:.65}
.font-btn-minus,.font-btn-plus{
  position:absolute;bottom:1px;right:1px;
  font-size:14px;font-weight:800;line-height:1;
  color:var(--text-h);
}
.font-size-label{
  font-size:10px;font-weight:600;color:var(--text-m);
  min-width:34px;text-align:center;font-family:var(--font-mono);
  user-select:none;
}

@media(max-width:480px){.font-size-control{display:none}}

/* Theme toggle icons */
.icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:block}

.topbar-notif .notif-dot{
  position:absolute;top:7px;right:7px;width:8px;height:8px;
  background:var(--color-danger);border-radius:50%;border:2px solid var(--surface);
}

/* ════════════════════════════════════════
   AVATAR
   ════════════════════════════════════════ */
.avatar{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--acid-500),var(--acid-800));
  color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.avatar-sm{width:28px;height:28px;font-size:10px}
.avatar-xs{width:24px;height:24px;font-size:9px}

/* ════════════════════════════════════════
   CONTENT AREA
   ════════════════════════════════════════ */
/* Project banner */
.project-banner{
  display:none;align-items:center;
  padding:var(--space-3) var(--space-6);
  flex-shrink:0;
}
.pb-left{display:flex;align-items:center;gap:var(--space-4)}
.pb-name{font-family:var(--font-heading);font-size:var(--text-base);font-weight:700;letter-spacing:.02em}
.pb-stats{font-size:var(--text-sm);opacity:.7}

.content{flex:1;overflow-y:auto;padding:var(--space-6)}

.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:var(--space-6);gap:var(--space-4);flex-wrap:wrap;
}
.page-title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:800;color:var(--text-h);letter-spacing:-.02em}
.page-subtitle{font-size:var(--text-sm);color:var(--text-m);margin-top:2px}

.page-header-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* ════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;
  border:none;border-radius:var(--radius-md);cursor:pointer;
  transition:all var(--transition-fast);white-space:nowrap;
}
.btn-primary{background:var(--primary);color:var(--primary-text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* Filter Buttons */
.filter-group{display:flex;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.filter-btn{
  padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:500;
  border:none;background:none;color:var(--text-b);cursor:pointer;
  transition:all var(--transition-fast);
}
.filter-btn:hover{color:var(--text-h)}
.filter-btn.active{background:var(--surface);color:var(--text-h);box-shadow:var(--shadow-sm)}

/* ════════════════════════════════════════
   BADGES
   ════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;padding:2px 10px;
  font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-full);
  white-space:nowrap;
}
.badge-sm{padding:1px 7px;font-size:10px}
.badge-blue{background:var(--coast-100);color:var(--coast-700)}
.badge-green{background:var(--acid-100);color:var(--acid-700)}
.badge-amber{background:var(--solar-100);color:var(--solar-700)}
.badge-red{background:var(--heat-100);color:var(--heat-600)}
.badge-purple{background:var(--violet-100);color:var(--violet-700)}
.badge-neutral{background:var(--neutral-200);color:var(--neutral-600)}

[data-theme="dark"] .badge-blue{background:rgba(99,194,255,.15);color:var(--coast-200)}
[data-theme="dark"] .badge-green{background:rgba(87,245,127,.15);color:var(--acid-200)}
[data-theme="dark"] .badge-amber{background:rgba(255,226,74,.15);color:var(--solar-200)}
[data-theme="dark"] .badge-red{background:rgba(255,112,77,.15);color:var(--heat-200)}
[data-theme="dark"] .badge-purple{background:rgba(135,132,255,.15);color:var(--indigo-200)}
[data-theme="dark"] .badge-neutral{background:rgba(255,255,255,.1);color:var(--neutral-300)}

/* ════════════════════════════════════════
   CARDS (shared)
   ════════════════════════════════════════ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);
}
.card-header h3{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;color:var(--text-h)}
.card-link{font-size:var(--text-xs);font-weight:600;color:var(--primary);transition:opacity var(--transition-fast)}
.card-link:hover{opacity:.85}

/* ════════════════════════════════════════
   STAT CARDS
   ════════════════════════════════════════ */
/* ── Welcome Page (Stripe-style animated gradient) ── */
.welcome-hero{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 56px);
  margin:calc(-1 * var(--space-6));
  padding:var(--space-10) var(--space-8) var(--space-8);
  position:relative;overflow:hidden;
  background:#0a0a2e;
  animation:heroWake .8s cubic-bezier(.16,1,.3,1);
}

@keyframes heroWake{
  from{opacity:0;filter:brightness(0)}
  40%{opacity:1;filter:brightness(.3)}
  100%{filter:brightness(1)}
}

@keyframes welcomeReveal{
  0%{clip-path:inset(100% 0 0 0);transform:translateY(20px)}
  100%{clip-path:inset(0 0 0 0);transform:translateY(0)}
}

@keyframes welcomeRevealRight{
  0%{clip-path:inset(0 0 0 100%);transform:translateX(20px)}
  100%{clip-path:inset(0 0 0 0);transform:translateX(0)}
}

@keyframes welcomeColorFlash-blue{
  0%{background:rgba(99,194,255,.3)}
  100%{background:transparent}
}
@keyframes welcomeColorFlash-violet{
  0%{background:rgba(231,110,243,.25)}
  100%{background:transparent}
}
@keyframes welcomeColorFlash-green{
  0%{background:rgba(87,245,127,.2)}
  100%{background:transparent}
}
@keyframes welcomeColorFlash-gold{
  0%{background:rgba(255,226,74,.2)}
  100%{background:transparent}
}
@keyframes welcomeColorFlash-pink{
  0%{background:rgba(255,104,242,.2)}
  100%{background:transparent}
}
@keyframes welcomeColorFlash-cyan{
  0%{background:rgba(79,232,228,.2)}
  100%{background:transparent}
}
@keyframes welcomeColorFlash-indigo{
  0%{background:rgba(135,132,255,.2)}
  100%{background:transparent}
}

/* Glass-ending variants — end at glass bg instead of transparent */
@keyframes welcomeColorFlash-pink-glass{
  0%{background:rgba(255,104,242,.25)}
  100%{background:rgba(255,255,255,.08)}
}
@keyframes welcomeColorFlash-cyan-glass{
  0%{background:rgba(79,232,228,.25)}
  100%{background:rgba(255,255,255,.1)}
}
@keyframes welcomeColorFlash-indigo-glass{
  0%{background:rgba(135,132,255,.25)}
  100%{background:rgba(255,255,255,.1)}
}

/* Animated blob gradients */
.welcome-hero .hero-blob{
  position:absolute;border-radius:50%;
  filter:blur(80px);
  mix-blend-mode:screen;
  pointer-events:none;z-index:0;
  opacity:0;animation-fill-mode:forwards;
}
.hero-blob-1{animation:blobEnter 2s cubic-bezier(.16,1,.3,1) .2s forwards, blobMove1 12s ease-in-out 2.2s infinite alternate !important}
.hero-blob-2{animation:blobEnter 2s cubic-bezier(.16,1,.3,1) .5s forwards, blobMove2 14s ease-in-out 2.5s infinite alternate !important}
.hero-blob-3{animation:blobEnter 2s cubic-bezier(.16,1,.3,1) .8s forwards, blobMove3 16s ease-in-out 2.8s infinite alternate !important}
.hero-blob-4{animation:blobEnter 2s cubic-bezier(.16,1,.3,1) 1.1s forwards, blobMove4 13s ease-in-out 3.1s infinite alternate !important}
.hero-blob-5{animation:blobEnter 2s cubic-bezier(.16,1,.3,1) 1.4s forwards, blobMove5 15s ease-in-out 3.4s infinite alternate !important}

@keyframes blobEnter{
  from{opacity:0;transform:scale(.3)}
  to{opacity:.6;transform:scale(1)}
}
.hero-blob-1{
  width:50%;height:60%;top:-10%;left:-5%;
  background:radial-gradient(circle, #63c2ff 0%, transparent 70%);
}
.hero-blob-2{
  width:45%;height:55%;top:10%;right:-10%;
  background:radial-gradient(circle, #e76ef3 0%, transparent 70%);
}
.hero-blob-3{
  width:40%;height:50%;bottom:-15%;left:20%;
  background:radial-gradient(circle, #57f57f 0%, transparent 70%);
}
.hero-blob-4{
  width:35%;height:45%;bottom:5%;right:15%;
  background:radial-gradient(circle, #ffe24a 0%, transparent 70%);
}
.hero-blob-5{
  width:30%;height:40%;top:30%;left:40%;
  background:radial-gradient(circle, #8784ff 0%, transparent 70%);
}

@keyframes blobMove1{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(8%,12%) scale(1.1)}
  66%{transform:translate(-5%,8%) scale(.95)}
  100%{transform:translate(12%,-5%) scale(1.05)}
}
@keyframes blobMove2{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-12%,8%) scale(1.15)}
  66%{transform:translate(6%,-10%) scale(.9)}
  100%{transform:translate(-8%,15%) scale(1.1)}
}
@keyframes blobMove3{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(10%,-8%) scale(1.05)}
  66%{transform:translate(-8%,6%) scale(1.15)}
  100%{transform:translate(5%,-12%) scale(.95)}
}
@keyframes blobMove4{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-6%,-10%) scale(1.1)}
  66%{transform:translate(10%,5%) scale(.95)}
  100%{transform:translate(-12%,8%) scale(1.05)}
}
@keyframes blobMove5{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6%,10%) scale(1.1)}
  66%{transform:translate(-10%,-6%) scale(1.05)}
  100%{transform:translate(8%,-8%) scale(.9)}
}

/* Dark overlay for text readability */
.welcome-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 40%, transparent 100%);
  pointer-events:none;z-index:1;
}

/* Motivational quote — inside right column above weather */
.welcome-quote{
  padding:var(--space-4) var(--space-5);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-xl);
  color:rgba(255,255,255,.7);
  animation:welcomeRevealRight .7s cubic-bezier(.16,1,.3,1) .5s both;
}
.welcome-quote svg{opacity:.3;margin-bottom:var(--space-2)}
.welcome-quote-text{
  font-size:var(--text-sm);font-style:italic;line-height:1.6;
  color:rgba(255,255,255,.8);margin-bottom:var(--space-2);
}
.welcome-quote-author{
  font-size:var(--text-xs);font-weight:600;color:rgba(255,255,255,.45);
}

/* Weather widget */
.welcome-weather{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  animation:welcomeRevealRight .7s cubic-bezier(.16,1,.3,1) .7s both, welcomeColorFlash-cyan-glass .8s ease .7s both;
  border-radius:var(--radius-xl);
  color:#fff;
}
.weather-loading{font-size:var(--text-xs);color:rgba(255,255,255,.5)}
.weather-icon{display:flex;align-items:center;opacity:.85}
.weather-info{display:flex;flex-direction:column}
.weather-temp{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;line-height:1.1}
.weather-desc{font-size:var(--text-xs);opacity:.7}
.weather-details{
  display:flex;flex-direction:column;gap:1px;
  font-size:10px;opacity:.6;
  padding-left:var(--space-3);border-left:1px solid rgba(255,255,255,.15);
}
.weather-location{cursor:pointer;transition:opacity var(--duration-fast)}
.weather-location:hover{opacity:1}

/* Zip code input form */
.weather-zip-form{
  display:flex;align-items:center;gap:var(--space-2);
}
.weather-zip-form svg{opacity:.5;flex-shrink:0}
.weather-zip-form input{
  width:140px;padding:5px 10px;font-size:var(--text-xs);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-md);color:#fff;font-family:var(--font-sans);
}
.weather-zip-form input::placeholder{color:rgba(255,255,255,.4)}
.weather-zip-form input:focus{outline:none;border-color:rgba(255,255,255,.4)}
.weather-zip-btn{
  padding:5px 12px;font-size:var(--text-xs);font-weight:600;
  background:rgba(255,255,255,.2);color:#fff;border:none;
  border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--duration-fast);
}
.weather-zip-btn:hover{background:rgba(255,255,255,.3)}
.weather-zip-error{font-size:10px;color:#ff9b79;margin-top:var(--space-1);display:block}

@media(max-width:768px){
  .welcome-weather{padding:var(--space-2) var(--space-3);gap:var(--space-2)}
  .weather-details{display:none}
  .weather-temp{font-size:var(--text-base)}
}

.welcome-content{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1fr 320px;gap:var(--space-6);
  align-items:center;
}
.welcome-left{min-width:0}
.welcome-right{
  display:flex;flex-direction:column;gap:var(--space-4);align-items:stretch;
  align-self:center;max-height:80vh;
}

/* Quick Chat panel */
.welcome-chat{
  width:100%;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xl);
  overflow:hidden;
  height:380px;flex-shrink:0;
  animation:welcomeRevealRight .8s cubic-bezier(.16,1,.3,1) 1s both, welcomeColorFlash-indigo-glass .9s ease 1s both;
}
.wc-header{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:var(--text-xs);font-weight:600;color:rgba(255,255,255,.7);
}
.wc-header svg{opacity:.5}
.wc-header span{flex:1}
.wc-channel-picker{position:relative;margin-left:auto}
.wc-channel-btn{
  display:flex;align-items:center;gap:var(--space-2);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:11px;font-weight:600;padding:4px 10px;
  border-radius:var(--radius-full);cursor:pointer;font-family:var(--font-sans);
  transition:background var(--duration-fast);white-space:nowrap;
}
.wc-channel-btn:hover{background:rgba(255,255,255,.18)}
.wc-channel-btn .sp-dot{width:6px;height:6px;min-width:6px;min-height:6px;flex-shrink:0}

.wc-channel-btn svg{opacity:.5}
.wc-hash{font-weight:700;opacity:.5;width:8px;text-align:center;flex-shrink:0}

.wc-channel-dd{
  display:none;position:absolute;top:calc(100% + 4px);right:0;
  min-width:220px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-1);z-index:20;
  max-height:240px;overflow-y:auto;
}
.wc-channel-dd.open{display:block;animation:popoverSpring var(--duration-base) var(--ease-spring)}

.wc-channel-option{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-xs);font-weight:500;color:var(--text-h);
  cursor:pointer;transition:background var(--duration-fast);
}
.wc-channel-option:hover{background:var(--surface-alt)}
.wc-channel-option.active{background:var(--primary-light);font-weight:600}
.wc-channel-option .sp-dot,
.wc-channel-option .wc-hash{
  width:8px !important;height:8px !important;
  max-width:8px !important;max-height:8px !important;
  min-width:8px !important;min-height:8px !important;
  flex:0 0 8px !important;
  border-radius:50% !important;
  align-self:center !important;
  display:block !important;
}

.wc-messages{
  flex:1;overflow-y:auto;padding:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);
  min-height:0;
}
.wc-msg{
  display:flex;align-items:flex-start;gap:var(--space-2);
}
.wc-msg-body{flex:1;min-width:0}
.wc-msg-name{font-size:10px;font-weight:600;color:rgba(255,255,255,.6);margin-right:var(--space-1)}
.wc-msg-text{font-size:var(--text-xs);color:rgba(255,255,255,.85);word-break:break-word}
.wc-msg-time{font-size:9px;color:rgba(255,255,255,.3);flex-shrink:0;margin-top:2px}
.wc-empty{
  display:flex;align-items:center;justify-content:center;
  flex:1;font-size:var(--text-xs);color:rgba(255,255,255,.3);
}

.wc-input-row{
  display:flex;gap:var(--space-2);padding:var(--space-3);
  border-top:1px solid rgba(255,255,255,.1);
}
.wc-input-row input{
  flex:1;padding:6px 10px;font-size:var(--text-xs);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-md);color:#fff;font-family:var(--font-sans);
}
.wc-input-row input::placeholder{color:rgba(255,255,255,.35)}
.wc-input-row input:focus{outline:none;border-color:rgba(255,255,255,.3)}
.wc-send{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);border:none;border-radius:var(--radius-md);
  color:#fff;cursor:pointer;flex-shrink:0;
  transition:background var(--duration-fast);
}
.wc-send:hover{background:rgba(255,255,255,.25)}

/* Chat filters */
.wc-filters,.chat-filters{
  display:flex;gap:2px;padding:var(--space-2) var(--space-3);
  border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;
}
.chat-filters{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border)}
.wc-filter{
  padding:3px 10px;font-size:10px;font-weight:600;
  border:none;border-radius:var(--radius-full);cursor:pointer;
  transition:all var(--duration-fast);
}
.wc-filters .wc-filter{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);
}
.wc-filters .wc-filter:hover{color:rgba(255,255,255,.8)}
.wc-filters .wc-filter.active{background:rgba(255,255,255,.2);color:#fff}

.chat-filters .wc-filter{
  background:var(--surface-alt);color:var(--text-m);
}
.chat-filters .wc-filter:hover{color:var(--text-h)}
.chat-filters .wc-filter.active{background:var(--primary-light);color:var(--primary)}

.wc-mention-popup{
  position:absolute;bottom:100%;left:0;right:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-1);max-height:200px;overflow-y:auto;
  margin-bottom:var(--space-1);z-index:10;
}
.wc-mention-popup .mention-item{padding:6px 10px}
.wc-input-row{position:relative}

/* Staggered mask reveal animations with color flash */
.welcome-date{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:500;color:rgba(255,255,255,.65);
  margin-bottom:var(--space-4);
  animation:welcomeReveal .7s cubic-bezier(.16,1,.3,1) .4s both, welcomeColorFlash-blue .8s ease .4s both;
  border-radius:var(--radius-md);padding:var(--space-1) var(--space-2);margin-left:calc(-1 * var(--space-2));
}

.welcome-date svg{opacity:.7}
.welcome-greeting{
  font-family:var(--font-heading);font-size:3rem;font-weight:800;
  color:#fff;letter-spacing:-.02em;line-height:1.1;
  margin-bottom:var(--space-3);
  text-shadow:0 2px 16px rgba(0,0,0,.2);
  animation:welcomeReveal .8s cubic-bezier(.16,1,.3,1) .6s both, welcomeColorFlash-violet .9s ease .6s both;
}
.welcome-summary{
  font-size:var(--text-lg);color:rgba(255,255,255,.7);line-height:1.6;
  margin-bottom:var(--space-6);
  animation:welcomeReveal .7s cubic-bezier(.16,1,.3,1) .85s both, welcomeColorFlash-green .8s ease .85s both;
}
.welcome-alert{color:#ff9b79;font-weight:600}
.welcome-briefing{
  font-size:var(--text-sm);color:rgba(255,255,255,.6);line-height:1.7;
  margin-bottom:var(--space-6);max-width:520px;
  animation:welcomeReveal .7s cubic-bezier(.16,1,.3,1) .8s both, welcomeColorFlash-green .8s ease .8s both;
  border-radius:var(--radius-md);padding:var(--space-1) 0;
}

/* Quick action buttons */
.welcome-actions{
  display:flex;gap:var(--space-3);margin-bottom:var(--space-8);
  animation:welcomeReveal .7s cubic-bezier(.16,1,.3,1) 1.1s both, welcomeColorFlash-gold .8s ease 1.1s both;
}
.welcome-btn{
  background:rgba(255,255,255,.12);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);
  font-size:var(--text-sm);gap:var(--space-2);
  transition:all var(--duration-fast);
}
.welcome-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.welcome-btn-primary{background:rgba(255,255,255,.25);font-weight:700}

/* Focus tasks */
.welcome-focus{
  padding:var(--space-5);
  background:rgba(255,255,255,.08);
  animation:welcomeReveal .7s cubic-bezier(.16,1,.3,1) 1.3s both, welcomeColorFlash-pink-glass .8s ease 1.3s both;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xl);
}
.welcome-focus-label{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(255,255,255,.5);
  margin-bottom:var(--space-3);
}
.welcome-focus-list{display:flex;flex-direction:column;gap:var(--space-1)}

.welcome-task{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--duration-fast);
}
.welcome-task:hover{background:rgba(255,255,255,.08)}
.welcome-task-name{
  font-size:var(--text-sm);font-weight:500;color:#fff;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.welcome-overdue{
  font-size:9px;font-weight:700;color:#fff;
  background:rgba(255,112,77,.5);padding:2px 8px;border-radius:var(--radius-full);
  flex-shrink:0;
}
.welcome-today{
  font-size:9px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.2);padding:2px 8px;border-radius:var(--radius-full);
  flex-shrink:0;
}

@media(max-width:768px){
  .welcome-hero{padding:var(--space-6)}
  .welcome-content{grid-template-columns:1fr}
  .welcome-greeting{font-size:var(--text-2xl)}
  .welcome-actions{flex-wrap:wrap}
  .welcome-focus{padding:var(--space-4)}
  .welcome-right{flex-direction:row;flex-wrap:wrap}
  .welcome-chat{min-height:200px}
}

.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}

.stat-card{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-5);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-fast),transform var(--transition-fast);
}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-icon{
  width:44px;height:44px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-icon-blue{background:var(--coast-100);color:var(--coast-600)}
.stat-icon-green{background:var(--acid-100);color:var(--acid-600)}
.stat-icon-amber{background:var(--solar-100);color:var(--solar-600)}
.stat-icon-red{background:var(--heat-100);color:var(--heat-500)}

[data-theme="dark"] .stat-icon-blue{background:rgba(99,194,255,.12);color:var(--coast-300)}
[data-theme="dark"] .stat-icon-green{background:rgba(87,245,127,.12);color:var(--acid-300)}
[data-theme="dark"] .stat-icon-amber{background:rgba(255,226,74,.12);color:var(--solar-200)}
[data-theme="dark"] .stat-icon-red{background:rgba(255,112,77,.12);color:var(--heat-300)}

.stat-body{display:flex;flex-direction:column;min-width:0}
.stat-value{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:800;color:var(--text-h);line-height:1.1}
.stat-label{font-size:var(--text-xs);color:var(--text-m);margin-top:2px}
.stat-trend{font-size:var(--text-xs);font-weight:600;margin-left:auto;white-space:nowrap}
.stat-trend-up{color:var(--acid-500)}
.stat-trend-down{color:var(--heat-400)}

/* ════════════════════════════════════════
   DASHBOARD GRID
   ════════════════════════════════════════ */
.dash-grid{display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto auto;gap:var(--space-4)}
.dash-recent{grid-column:1;grid-row:1/3}
.dash-activity{grid-column:2;grid-row:1}
.dash-projects{grid-column:2;grid-row:2}

/* ── Task List ── */
.task-list{display:flex;flex-direction:column}
.task-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border);transition:background var(--transition-fast);
}
.task-item:last-child{border-bottom:none}
.task-item:hover{background:var(--surface-alt)}

.task-item input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;
}
.task-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.task-name{font-size:var(--text-sm);font-weight:500;color:var(--text-h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-name.checked{text-decoration:line-through;color:var(--text-m)}
.task-meta{font-size:var(--text-xs);color:var(--text-m)}

/* ── Activity Feed ── */
.activity-feed{display:flex;flex-direction:column}
.activity-item{
  display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border);
}
.activity-item:last-child{border-bottom:none}
.activity-body{min-width:0}
.activity-body p{font-size:var(--text-xs);color:var(--text-b);line-height:1.5}
.activity-body strong{color:var(--text-h);font-weight:600}
.activity-body em{font-style:normal;color:var(--primary)}
.activity-link{
  color:var(--primary);font-weight:600;font-style:normal;
  text-decoration:none;border-bottom:1px dashed transparent;
  transition:all var(--transition-fast);
}
.activity-link:hover{border-bottom-color:var(--primary)}
.activity-task-name{font-weight:600;font-style:normal;color:var(--text-h)}
.activity-time{font-size:10px;color:var(--text-m)}

/* ── Projects ── */
.project-list{display:flex;flex-direction:column}
.project-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);
}
.project-row:last-child{border-bottom:none}
.project-color{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}
.project-info{flex:1;display:flex;flex-direction:column;gap:var(--space-2)}
.project-name{font-size:var(--text-sm);font-weight:600;color:var(--text-h)}
.project-pct{font-size:var(--text-xs);font-weight:700;color:var(--text-m);width:36px;text-align:right}

.progress-bar{
  height:6px;background:var(--surface-alt);border-radius:var(--radius-full);overflow:hidden;
}
.progress-fill{
  height:100%;background:var(--acid-400);border-radius:var(--radius-full);
  transition:width var(--transition-base);
}
.progress-violet{background:var(--violet-400)}
.progress-green{background:var(--acid-400)}
.progress-amber{background:var(--solar-400)}

/* ════════════════════════════════════════
   KANBAN BOARD
   ════════════════════════════════════════ */
.kanban-board{
  display:flex;gap:var(--space-4);overflow-x:auto;
  padding-bottom:var(--space-4);height:calc(100vh - 160px);
}
.kanban-col{
  flex:0 0 280px;display:flex;flex-direction:column;
  background:var(--surface-alt);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.kanban-col-header{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border);
}
.kanban-dot{width:10px;height:10px;border-radius:var(--radius-full);flex-shrink:0}
.kanban-col-header h4{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;color:var(--text-h);flex:1}
.kanban-count{
  font-size:var(--text-xs);font-weight:700;color:var(--text-m);
  background:var(--surface);padding:1px 8px;border-radius:var(--radius-full);
}

.kanban-cards{
  flex:1;overflow-y:auto;padding:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);
  min-height:60px;transition:background var(--transition-fast);
}
.kanban-cards.drag-over{background:rgba(87,245,127,.04)}

.kanban-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3);
  cursor:grab;transition:all var(--transition-fast);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.kanban-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary)}
.kanban-card.dragging{opacity:.5;transform:rotate(2deg)}

.kanban-card-labels{margin-bottom:var(--space-2)}
.kanban-card-title{font-size:var(--text-sm);font-weight:600;color:var(--text-h);line-height:1.4}
.kanban-card-desc{font-size:var(--text-xs);color:var(--text-m);margin-top:var(--space-1);line-height:1.5}
.kanban-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:var(--space-3);
}
.kanban-date{font-size:var(--text-xs);color:var(--text-m)}
.kanban-overdue{color:var(--heat-400);font-weight:600}

.kanban-card-done{opacity:.65}
.kanban-card-done .kanban-card-title{text-decoration:line-through}

/* ════════════════════════════════════════
   TABLE VIEW (Airtable-style)
   ════════════════════════════════════════ */
.airtable-wrap{
  overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.airtable{width:100%;border-collapse:collapse;font-size:var(--text-sm);white-space:nowrap}

.airtable thead{background:var(--surface-alt)}
.airtable th{
  padding:var(--space-2) var(--space-3);text-align:left;
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-m);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface-alt);z-index:1;
}
.airtable td{
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);color:var(--text-b);
}
.airtable tbody tr{cursor:pointer}
.airtable tbody tr:hover{background:var(--surface-alt)}
.airtable tbody tr:last-child td{border-bottom:none}

/* Expand button column */
.at-expand{width:36px;text-align:center}
.at-expand-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:none;background:none;
  color:var(--text-m);cursor:pointer;border-radius:var(--radius-md);
  transition:all var(--transition-fast);opacity:.5;
}
.at-expand-btn:hover{opacity:1;background:var(--surface-alt);color:var(--primary)}
tr:hover .at-expand-btn{opacity:.8}

.at-check{width:40px;text-align:center}
.at-check input{accent-color:var(--primary);cursor:pointer}

/* Editable task title */
.at-task{font-weight:500;color:var(--text-h);min-width:220px}
.at-editable{
  outline:none;cursor:text;border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-2) !important;
  transition:box-shadow var(--transition-fast);
}
.at-editable:focus{
  box-shadow:0 0 0 2px var(--primary);
  background:var(--surface);
}

/* Inline selects */
/* (inline selects removed — replaced by cell chips + dropdowns) */

/* ── Cell chips (assignee, project, date in table) ── */
.at-cell-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;font-size:var(--text-xs);font-weight:500;
  color:var(--text-b);border-radius:var(--radius-full);
  border:1px solid transparent;
  cursor:pointer;transition:all var(--transition-fast);
  white-space:nowrap;
}
.at-cell-chip:hover{border-color:var(--border);background:var(--surface-alt)}
.at-cell-chip .avatar{margin-right:-2px}

.at-cell-project{color:var(--text-h);font-weight:600}
.at-proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}

.at-cell-date{color:var(--text-m);font-family:var(--font-mono);gap:5px}
.at-cell-date svg{opacity:.55;flex-shrink:0}
.at-cell-date:hover svg{opacity:.8}
.at-chip-overdue{color:var(--heat-400) !important;font-weight:600}
.at-chip-overdue svg{opacity:.7}

/* Hidden date input behind the chip */
.at-hidden-date{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}

.at-no-tags{color:var(--text-m);font-size:var(--text-xs)}

.at-row-done .at-task{text-decoration:line-through;color:var(--text-m)}
.at-row-done .at-editable{text-decoration:line-through;color:var(--text-m)}
.at-row-done .at-cell-chip{opacity:.55}

/* ── Dropdown item variants ── */
.dd-active{background:var(--surface-alt)}
.dd-assignee-item{display:flex;align-items:center;gap:8px}
.dd-assignee-name{font-size:var(--text-sm);font-weight:500;color:var(--text-h)}
.dd-project-item{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:500;color:var(--text-h)}

.dd-you{font-size:10px;color:var(--text-m);font-weight:400}

.team-card-me{border-color:var(--primary);border-width:2px}
.team-you-badge{
  font-size:10px;font-weight:600;color:var(--primary);
  background:var(--primary-light);padding:1px 8px;
  border-radius:var(--radius-full);margin-left:4px;vertical-align:middle;
}

[data-theme="dark"] .at-cell-chip:hover{background:var(--surface-alt)}

/* Priority indicators */
.priority{
  font-size:var(--text-xs);font-weight:600;display:inline-flex;align-items:center;gap:4px;
}
.priority::before{content:'';width:6px;height:6px;border-radius:50%}
.priority-urgent{color:var(--heat-500)}.priority-urgent::before{background:var(--heat-400)}
.priority-high{color:var(--solar-600)}.priority-high::before{background:var(--solar-400)}
.priority-medium{color:var(--coast-600)}.priority-medium::before{background:var(--coast-400)}
.priority-low{color:var(--neutral-500)}.priority-low::before{background:var(--neutral-300)}

[data-theme="dark"] .priority-urgent{color:var(--heat-200)}
[data-theme="dark"] .priority-high{color:var(--solar-200)}
[data-theme="dark"] .priority-medium{color:var(--coast-200)}
[data-theme="dark"] .priority-low{color:var(--neutral-400)}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media(max-width:1024px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .dash-recent,.dash-activity,.dash-projects{grid-column:1;grid-row:auto}
}

/* Old 768px block — merged into consolidated mobile section below */

@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr}
  .topbar-search{display:none}
}

/* ════════════════════════════════════════
   SIDEBAR OVERLAY (mobile)
   ════════════════════════════════════════ */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;
}
.sidebar.open ~ .sidebar-overlay,
.sidebar.open + .sidebar-overlay{display:block}

/* ════════════════════════════════════════
   MODAL
   ════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:var(--space-4);
}
.modal-overlay.open{display:flex}

.modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;
  width:100%;max-width:580px;max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);
  animation:modalIn .25s cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .modal{
  box-shadow:0 24px 48px -12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

@keyframes modalIn{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Header */
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5) var(--space-6) var(--space-4);
}
.modal-header-left{display:flex;align-items:center;gap:var(--space-3)}
.modal-icon{
  width:36px;height:36px;border-radius:var(--radius-lg);
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.modal-header h3{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:700;color:var(--text-h)}
.modal-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text-m);
  cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);
}
.modal-close:hover{background:var(--surface-alt);color:var(--text-h)}

/* Body */
.modal-body{padding:0 var(--space-6) var(--space-6)}

/* Title input — larger, borderless */
.form-row-title input{
  font-size:var(--text-xl);font-weight:700;color:var(--text-h);
  border:none;background:none;padding:var(--space-2) 0;width:100%;
  border-bottom:2px solid transparent;transition:border-color var(--transition-fast);
}
.form-row-title input::placeholder{color:var(--text-m);font-weight:500}
.form-row-title input:focus{
  outline:none;border-bottom-color:var(--primary);
}

/* Form rows */
.form-row{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.form-row label{
  font-size:var(--text-xs);font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:var(--space-1);
}
.form-row label svg{opacity:.65}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="date"],.form-row select,.form-row textarea{
  padding:10px 14px;font-size:var(--text-sm);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-alt);color:var(--text-h);
  transition:all var(--transition-fast);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 3px rgba(87,245,127,.1);
}
.form-row textarea{resize:vertical;min-height:80px;line-height:1.6}
.form-row select{
  cursor:pointer;appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.form-row select:hover{border-color:var(--neutral-300)}
[data-theme="dark"] .form-row select:hover{border-color:var(--border)}
.form-row input[type="date"]{
  padding-right:12px;
}
.form-row input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.35;cursor:pointer;
}
.form-row input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:.6}

.form-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:480px){.form-row-2col{grid-template-columns:1fr}}

/* Chip picker in modal (status / priority) */
/* Custom Select Dropdown */
.custom-select{position:relative}
.cs-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:10px 14px;
  background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--radius-lg);cursor:pointer;
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-h);
  transition:all var(--transition-fast);
}
.cs-trigger:hover{border-color:var(--neutral-300)}
.cs-open .cs-trigger{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,194,255,.1)}
.cs-selected{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.cs-selected span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-selected .avatar{flex-shrink:0}
.cs-selected .sp-dot{flex-shrink:0}
.cs-arrow{color:var(--text-m);flex-shrink:0;transition:transform var(--duration-fast)}
.cs-open .cs-arrow{transform:rotate(180deg)}

.cs-dropdown{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-1);z-index:20;
  max-height:220px;overflow-y:auto;
}
.cs-open .cs-dropdown{display:block;animation:popoverSpring var(--duration-base) var(--ease-spring)}

.cs-option{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;color:var(--text-h);
  cursor:pointer;transition:background var(--duration-fast);
}
.cs-option:hover{background:var(--surface-alt)}
.cs-option.cs-active{background:var(--primary-light);font-weight:600}
.cs-option svg:last-child{margin-left:auto;color:var(--primary);flex-shrink:0}
.cs-option .avatar{flex-shrink:0}
.cs-option .sp-dot{flex-shrink:0}

.chip-picker{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.chip-option{
  cursor:pointer;transition:all var(--transition-fast);
  opacity:.6;outline:2px solid transparent;outline-offset:2px;
}
.chip-option:hover{opacity:.85}
.chip-option.active{
  opacity:1;outline-color:currentColor;
}

/* Footer */
.modal-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--space-5);border-top:1px solid var(--border);margin-top:var(--space-2);
}
.modal-footer-right{display:flex;gap:var(--space-3);margin-left:auto}

.btn-outline{
  background:none;border:1px solid var(--border);color:var(--text-b);
  padding:var(--space-2) var(--space-5);
}
.btn-outline:hover{background:var(--surface-alt);color:var(--text-h);border-color:var(--border)}

.btn-primary#btn-save{padding:var(--space-2) var(--space-6)}

.btn-danger-ghost{
  background:none;border:none;color:var(--text-m);
  display:inline-flex;align-items:center;gap:var(--space-1);
  transition:all var(--transition-fast);
}
.btn-danger-ghost:hover{color:var(--heat-500);background:rgba(255,112,77,.08);border-radius:var(--radius-md)}
[data-theme="dark"] .btn-danger-ghost:hover{color:var(--heat-300);background:rgba(255,112,77,.1)}

/* ════════════════════════════════════════
   TOAST
   ════════════════════════════════════════ */
.toast-container{
  position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:200;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.toast{
  padding:var(--space-3) var(--space-5);
  background:var(--neutral-900);color:#fff;font-size:var(--text-sm);font-weight:500;
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(8px);transition:all .2s ease-out;
}
.toast.show{opacity:1;transform:translateY(0)}
[data-theme="dark"] .toast{background:var(--neutral-700)}

/* ════════════════════════════════���═══════
   TABLE FOOTER & SORTABLE
   ════════════════════════════════════════ */
.table-footer{
  padding:var(--space-3) var(--space-4);font-size:var(--text-xs);
  color:var(--text-m);text-align:right;
}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--text-h)}

/* ════════════════════════════════════════
   TEAM VIEW
   ════════════════════════════════════════ */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4)}
.team-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-fast),transform var(--transition-fast);
}
.team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.team-card h4{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;color:var(--text-h);margin-top:var(--space-3)}
.team-card-title{font-size:var(--text-xs);color:var(--text-m);margin-top:2px}
.team-view-profile{
  display:inline-block;margin-top:var(--space-3);
  font-size:var(--text-xs);font-weight:600;color:var(--primary);
  transition:opacity var(--transition-fast);
}
.team-view-profile:hover{opacity:.85}
.team-stats{display:flex;gap:var(--space-4);margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-m)}
.team-stats strong{color:var(--text-h)}
.team-card .progress-bar{width:100%}

/* ════════════════════════════════════════
   PROFILE VIEW
   ════════════════════════════════════════ */
.profile-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--space-6);align-items:start}

/* Left card */
.profile-card{text-align:center;position:sticky;top:var(--space-6);box-shadow:var(--shadow-md)}
.profile-card-top{padding:var(--space-8) var(--space-6) var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.profile-avatar-lg{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--acid-500),var(--acid-800));
  color:#fff;font-size:26px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}

/* Camera edit button */
.profile-avatar-edit{
  width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-m);
  transition:all var(--transition-fast);
  margin-top:-18px;margin-bottom:var(--space-1);
  z-index:1;
}
.profile-avatar-edit:hover{
  background:var(--primary);color:var(--primary-text);border-color:var(--primary);
}

/* Color picker dots */
.avatar-color-picker{
  display:flex;gap:8px;margin:var(--space-3) 0 var(--space-1);
  padding:12px 20px;
  background:var(--surface-alt);
  border-radius:var(--radius-full);
  border:1px solid var(--border);
}
.avatar-color-dot{
  width:24px;height:24px;border-radius:50%;
  border:3px solid var(--surface-alt);
  cursor:pointer;padding:0;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.avatar-color-dot:hover{
  transform:scale(1.25);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.avatar-color-dot.active{
  transform:scale(1.2);
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--text-h),0 2px 8px rgba(0,0,0,.12);
}
[data-theme="dark"] .avatar-color-dot{
  border-color:var(--neutral-800);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .avatar-color-dot.active{
  border-color:var(--neutral-900);
  box-shadow:0 0 0 2px var(--neutral-400),0 2px 8px rgba(0,0,0,.3);
}
.profile-name{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:700;color:var(--text-h)}
.profile-title-text{font-size:var(--text-xs);color:var(--text-m)}
.profile-role-badge{margin-top:var(--space-1)}

.profile-card-stats{
  display:flex;justify-content:center;gap:var(--space-6);
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.profile-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.profile-stat-value{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:700;color:var(--text-h)}
.profile-stat-label{font-size:var(--text-xs);color:var(--text-m)}

.profile-card-meta{padding:var(--space-4) var(--space-5)}
.profile-meta-row{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--text-m);
  padding:var(--space-1) 0;
}
.profile-meta-row svg{opacity:.65;flex-shrink:0}

/* Right forms */
.profile-forms{display:flex;flex-direction:column;gap:var(--space-4)}
.profile-section-body{padding:var(--space-5)}

/* Notification toggles */
.profile-toggle{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding:var(--space-3) 0;
  border-bottom:1px solid var(--border);cursor:pointer;
}
.profile-toggle:last-child{border-bottom:none}
.profile-toggle input{position:absolute;opacity:0;width:0;height:0}
.profile-toggle-info{flex:1}
.profile-toggle-label{font-size:var(--text-sm);font-weight:600;color:var(--text-h);display:block}
.profile-toggle-desc{font-size:var(--text-xs);color:var(--text-m);margin-top:2px;display:block}

.toggle-track{
  position:relative;width:44px;height:24px;flex-shrink:0;
  background:var(--neutral-300);border-radius:var(--radius-full);
  transition:background var(--transition-fast);
}
.toggle-track::after{
  content:'';position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform var(--transition-fast);
}
.profile-toggle input:checked ~ .toggle-track{background:var(--primary)}
.profile-toggle input:checked ~ .toggle-track::after{transform:translateX(20px)}
[data-theme="dark"] .toggle-track{background:var(--neutral-700)}

/* Danger zone */
.profile-danger .card-header h3{color:var(--heat-500)}
.profile-danger-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.profile-danger-row p{font-size:var(--text-xs);color:var(--text-m);margin-top:2px}
.profile-danger-row strong{font-size:var(--text-sm);color:var(--text-h)}
.btn-danger-outline{
  background:none;border:1px solid var(--heat-400);color:var(--heat-500);
  padding:var(--space-2) var(--space-4);font-size:var(--text-xs);font-weight:600;
  border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);
  white-space:nowrap;
}
.btn-danger-outline:hover{background:var(--heat-50);border-color:var(--heat-500);color:var(--heat-600)}
[data-theme="dark"] .btn-danger-outline:hover{background:rgba(255,112,77,.12);color:var(--heat-300)}

/* Section footer with save button */
.profile-section-footer{
  display:flex;justify-content:flex-end;
  padding-top:var(--space-5);margin-top:var(--space-2);
  border-top:1px solid var(--border);
}

/* Clickable sidebar user */
.sidebar-user{cursor:pointer;transition:opacity var(--transition-fast)}
.sidebar-user:hover{opacity:.88}

/* Clickable topbar avatar */
.topbar-avatar{cursor:pointer;transition:all var(--transition-fast)}
.topbar-avatar:hover{box-shadow:0 0 0 2px var(--primary)}

@media(max-width:768px){
  .profile-layout{grid-template-columns:1fr}
  .profile-card{position:static}
}

/* ════════════════════════════════════════
   AUTH SCREEN
   ════════════════════════════════════════ */
.auth-overlay{
  display:flex;position:fixed;inset:0;z-index:500;
  align-items:center;justify-content:center;
  background:var(--bg);
}
.auth-card{
  width:100%;max-width:440px;padding:var(--space-10) var(--space-8);
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.auth-header{
  text-align:center;margin-bottom:var(--space-8);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
}
.auth-header h1{font-family:'Bricolage Grotesque',var(--font-sans);font-size:var(--text-2xl);font-weight:800;color:var(--text-h);text-transform:uppercase;letter-spacing:.06em}
.auth-header p{font-size:var(--text-sm);color:var(--text-m)}

.auth-form-row{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.auth-form-row label{
  font-size:var(--text-xs);font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.04em;
}
.auth-form-row input{
  padding:10px 14px;font-size:var(--text-sm);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-alt);color:var(--text-h);
  transition:all var(--transition-fast);font-family:var(--font-sans);
}
.auth-form-row input:focus{
  outline:none;border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 3px rgba(87,245,127,.1);
}
.auth-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);min-width:0}
.auth-form-2col .auth-form-row{min-width:0}
.auth-form-row input{width:100%;min-width:0;box-sizing:border-box}

.auth-submit{
  width:100%;justify-content:center;padding:12px;
  font-size:var(--text-sm);margin-top:var(--space-2);
  border-radius:var(--radius-lg);
}
.auth-error{
  padding:var(--space-3);margin-bottom:var(--space-3);
  background:var(--heat-50);color:var(--heat-600);
  border:1px solid var(--heat-200);border-radius:var(--radius-md);
  font-size:var(--text-xs);text-align:center;line-height:1.5;
}
[data-theme="dark"] .auth-error{background:rgba(255,112,77,.1);border-color:rgba(255,112,77,.2);color:var(--heat-300)}

.auth-switch{
  text-align:center;margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-size:var(--text-sm);color:var(--text-m);
}
.auth-switch a{
  color:var(--primary);font-weight:600;text-decoration:none;margin-left:var(--space-1);
}
.auth-switch a:hover{text-decoration:underline}

@media(max-width:480px){
  .auth-card{margin:var(--space-4);padding:var(--space-6)}
  .auth-form-2col{grid-template-columns:1fr}
}

/* Sign out button in sidebar */
.sidebar-signout{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:none;background:none;
  color:rgba(255,255,255,.4);cursor:pointer;border-radius:var(--radius-md);
  transition:all var(--duration-fast);margin-left:auto;flex-shrink:0;
}
.sidebar-signout:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.08)}
.sidebar-footer{display:flex;align-items:center;gap:var(--space-2)}

/* ════════════════════════════════════════
   PROJECT DRIVE
   ════════════════════════════════════════ */

/* Drive nav bar */
.drive-nav-bar{
  display:flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.drive-back-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text-b);cursor:pointer;flex-shrink:0;
  transition:all var(--duration-fast) var(--ease-spring);
}
.drive-back-btn:hover{background:var(--surface-alt);color:var(--text-h);border-color:var(--primary)}
.drive-back-btn:active{transform:scale(.92)}

.drive-breadcrumbs{display:flex;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto}
.drive-breadcrumbs::-webkit-scrollbar{display:none}

.drive-bc{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:var(--text-sm);font-weight:500;color:var(--text-m);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);
  transition:all var(--duration-fast);white-space:nowrap;flex-shrink:0;
}
.drive-bc:hover{color:var(--primary);background:var(--primary-light)}
.drive-bc-active{color:var(--text-h);font-weight:600;pointer-events:none}
.drive-bc-icon{display:flex;align-items:center;opacity:.5;flex-shrink:0}
.drive-bc-active .drive-bc-icon{opacity:.7}
.drive-bc-chevron{color:var(--text-m);opacity:.4;flex-shrink:0}

/* Drive layout */
.drive-layout{display:flex;gap:0;height:calc(100vh - 220px);min-height:400px}

/* Drive sidebar tree */
.drive-sidebar{
  width:220px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-sm);margin-right:var(--space-4);
}
.drive-tree{flex:1;overflow-y:auto;padding:var(--space-2)}

.dt-item{
  display:flex;align-items:center;gap:var(--space-2);
  padding:5px var(--space-2);border-radius:var(--radius-md);
  font-size:var(--text-xs);font-weight:500;color:var(--text-b);
  cursor:pointer;transition:all var(--duration-fast);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dt-item:hover{background:var(--surface-alt);color:var(--text-h)}
.dt-item.dt-active{background:var(--primary-light);color:var(--primary);font-weight:600}
.dt-item svg{flex-shrink:0;opacity:.5}
.dt-item.dt-active svg{opacity:.8}

.dt-depth-1{padding-left:var(--space-5)}
.dt-depth-2{padding-left:var(--space-10)}
.dt-depth-3{padding-left:calc(var(--space-10) + var(--space-5))}
.dt-depth-4{padding-left:calc(var(--space-10) + var(--space-10))}

.dt-file{color:var(--text-m);font-weight:400}
.dt-file:hover{color:var(--text-h)}
.dt-file-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* Back to all projects */
.dt-back{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2);margin-bottom:var(--space-1);
  font-size:var(--text-xs);font-weight:500;color:var(--text-m);
  cursor:pointer;border-radius:var(--radius-md);
  transition:all var(--duration-fast);
  border-bottom:1px solid var(--border);padding-bottom:var(--space-3);margin-bottom:var(--space-2);
}
.dt-back:hover{color:var(--primary);background:var(--primary-light)}
.dt-back svg{opacity:.5}

.dt-root{font-weight:600}

/* Chevron rotation */
.dt-chevron{transition:transform var(--duration-fast) var(--ease-spring)}
.dt-chevron.dt-expanded{transform:rotate(90deg)}

/* In-path highlight */
.dt-in-path{color:var(--text-h);font-weight:600}

/* Child count */
.dt-count{
  margin-left:auto;font-size:9px;color:var(--text-m);
  background:var(--surface-alt);padding:0 5px;border-radius:var(--radius-full);
}

.dt-project-group{margin-bottom:var(--space-2)}
.dt-project-label{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-2);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-m);
}
.dt-project-label .sp-dot{width:6px;height:6px}
.dt-project-clickable{cursor:pointer;border-radius:var(--radius-md);padding:var(--space-2);transition:background var(--duration-fast)}
.dt-project-clickable:hover{background:var(--surface-alt);color:var(--text-h)}
.dt-project-count{
  margin-left:auto;font-size:9px;font-weight:600;
  background:var(--surface-alt);padding:0 5px;border-radius:var(--radius-full);
}

.drive-tree-stats{
  padding:var(--space-3);border-top:1px solid var(--border);
  display:flex;gap:var(--space-3);
  font-size:10px;color:var(--text-m);
}

/* Drive main area */
.drive-main{flex:1;min-width:0;display:flex;flex-direction:column}

/* View toggle */
.drive-view-toggle{display:flex;gap:2px}
.drive-view-toggle .topbar-btn.active{background:var(--primary-light);color:var(--primary);border-color:var(--primary)}

/* Drop zone wrapper */
.drive-dropzone{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  border:2px dashed transparent;border-radius:var(--radius-lg);
  transition:border-color var(--duration-fast);
}
.drive-dropzone.active{border-color:var(--primary)}
.drive-drop-overlay{
  display:none;position:absolute;inset:0;
  background:var(--primary-light);border-radius:var(--radius-lg);
  align-items:center;justify-content:center;flex-direction:column;gap:var(--space-3);
  color:var(--primary);font-size:var(--text-sm);font-weight:600;z-index:5;
}
.drive-dropzone.active .drive-drop-overlay{display:flex}

/* Grid view */
.drive-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--space-3);
}
.drive-card{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--space-5) var(--space-3) var(--space-3);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);cursor:pointer;
  transition:all var(--duration-fast) var(--ease-spring);
  box-shadow:var(--shadow-sm);text-align:center;
}
.drive-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--primary)}
.drive-card:active{transform:scale(.98)}
.drive-card-icon{margin-bottom:var(--space-2)}
.drive-card-icon svg{width:36px;height:36px}
.drive-card-name{
  font-size:var(--text-xs);font-weight:600;color:var(--text-h);
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drive-card-meta{font-size:10px;color:var(--text-m);margin-top:2px}

/* List view */
.drive-list{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;
}
.drive-list-header{
  display:grid;grid-template-columns:1fr 100px 120px;gap:var(--space-3);
  padding:var(--space-2) var(--space-4);background:var(--surface-alt);
  font-size:var(--text-xs);font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border);
}
.drive-list-item{
  display:grid;grid-template-columns:1fr 100px 120px;gap:var(--space-3);
  align-items:center;padding:var(--space-2) var(--space-4);
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background var(--duration-fast);
}
.drive-list-item:last-child{border-bottom:none}
.drive-list-item:hover{background:var(--surface-alt)}
.drive-li-icon{display:flex;align-items:center}
.drive-li-icon svg{width:18px;height:18px}
.drive-li-name{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:500;color:var(--text-h);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drive-li-count{font-size:10px;color:var(--text-m);font-weight:400}
.drive-li-size{font-size:var(--text-xs);color:var(--text-m);font-family:var(--font-mono)}
.drive-li-date{font-size:var(--text-xs);color:var(--text-m)}

/* Empty state */
.drive-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-16);gap:var(--space-2);text-align:center;
}
.drive-empty h4{font-size:var(--text-sm);color:var(--text-m)}
.drive-empty p{font-size:var(--text-xs);color:var(--text-m);opacity:.7}

/* File Viewer Overlay */
.dv-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  display:flex;align-items:stretch;justify-content:center;
  animation:modalIn var(--duration-base) var(--ease-out-expo);
}
.dv-container{
  display:flex;flex-direction:column;width:100%;max-width:1100px;
  margin:var(--space-4);background:var(--surface);
  border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
}
[data-theme="dark"] .dv-container{box-shadow:0 24px 64px rgba(0,0,0,.5)}

.dv-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);
  flex-shrink:0;gap:var(--space-3);
}
.dv-topbar-left{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.dv-file-icon{display:flex;flex-shrink:0}
.dv-file-icon svg{width:20px;height:20px}
.dv-file-info{min-width:0}
.dv-file-name{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;color:var(--text-h);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-file-meta{font-size:10px;color:var(--text-m)}
.dv-topbar-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.dv-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text-m);cursor:pointer;border-radius:var(--radius-md);
  transition:all var(--duration-fast);
}
.dv-close:hover{background:var(--surface-alt);color:var(--text-h)}

.dv-body{
  flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);
}

/* Image viewer */
.dv-image{display:flex;align-items:center;justify-content:center;padding:var(--space-4);width:100%;height:100%}
.dv-image img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md)}

/* PDF / embed viewer */
.dv-embed{width:100%;height:100%}
.dv-embed iframe{width:100%;height:100%;border:none}

/* Video viewer */
.dv-video{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--space-4)}
.dv-video video{max-width:100%;max-height:100%;border-radius:var(--radius-md)}

/* Text viewer */
.dv-text{width:100%;height:100%;overflow:auto;padding:var(--space-6)}
.dv-text pre{
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-h);
  line-height:1.7;white-space:pre-wrap;word-break:break-word;
  background:var(--surface);padding:var(--space-6);border-radius:var(--radius-lg);
  border:1px solid var(--border);
}

/* Table viewer (CSV) */
.dv-table{width:100%;height:100%;overflow:auto;padding:var(--space-4)}
.dv-table table{
  width:100%;border-collapse:collapse;font-size:var(--text-sm);
  background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);
}
.dv-table th{
  background:var(--surface-alt);padding:var(--space-2) var(--space-3);
  text-align:left;font-weight:600;color:var(--text-h);font-size:var(--text-xs);
  border-bottom:1px solid var(--border);
}
.dv-table td{
  padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);
  color:var(--text-b);
}

/* No preview fallback */
.dv-nopreview{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-4);padding:var(--space-10);text-align:center;
}
.dv-nopreview .dv-icon svg{width:64px;height:64px;opacity:.4}
.dv-nopreview p{font-size:var(--text-sm);color:var(--text-m)}

@media(max-width:768px){
  .dv-container{margin:0;border-radius:0;max-width:100%}
  .dv-topbar{flex-wrap:wrap}
  .dv-topbar-actions{flex-wrap:wrap}
  .drive-sidebar{display:none}
  .drive-layout{height:auto}
  .drive-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .drive-list-header,.drive-list-item{grid-template-columns:1fr 80px}
  .drive-lh-date,.drive-li-date{display:none}
}

/* ════════════════════════════════════════
   CHAT VIEW
   ════════════════════════════════════════ */
.chat-layout{
  display:flex;height:calc(100vh - 120px);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);
}

/* Chat sidebar */
.chat-sidebar{
  width:220px;flex-shrink:0;border-right:1px solid var(--border);
  background:var(--surface-alt);display:flex;flex-direction:column;overflow-y:auto;
}
.chat-sidebar-header{
  padding:var(--space-4) var(--space-4) var(--space-2);
}
.chat-sidebar-header h3{font-size:var(--text-xs);font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.06em}

.chat-channel-list{display:flex;flex-direction:column;gap:1px;padding:0 var(--space-2)}
.chat-channel{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;color:var(--text-b);
  cursor:pointer;transition:all var(--transition-fast);
}
.chat-channel:hover{background:var(--surface);color:var(--text-h)}
.chat-channel.active{background:var(--primary-light);color:var(--primary);font-weight:600}
.chat-channel-icon{font-size:var(--text-lg);opacity:.6;width:20px;text-align:center}
.chat-channel.active .chat-channel-icon{opacity:1}

.chat-dm-item{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--text-b);cursor:pointer;
  transition:all var(--transition-fast);
}
.chat-dm-item:hover{background:var(--surface);color:var(--text-h)}
.chat-dm-item.active{background:var(--primary-light);color:var(--primary);font-weight:600}
.chat-dm-count{
  margin-left:auto;font-size:9px;font-weight:700;
  background:var(--neutral-300);color:var(--neutral-600);
  padding:1px 6px;border-radius:var(--radius-full);
}
[data-theme="dark"] .chat-dm-count{background:var(--neutral-700);color:var(--neutral-400)}

.chat-unread-badge{
  background:var(--primary);color:var(--primary-text);
  font-size:9px;font-weight:700;padding:1px 6px;
  border-radius:var(--radius-full);margin-left:auto;
}

/* Chat main */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}

.chat-header{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.chat-header-icon{font-size:var(--text-lg);opacity:.6}
.chat-header h3{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;color:var(--text-h)}
.chat-header-meta{font-size:var(--text-xs);color:var(--text-m);margin-left:auto}

/* Messages */
.chat-messages{
  flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-1);
}

.chat-msg{
  display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-lg);transition:background var(--transition-fast);
}
.chat-msg:hover{background:var(--surface-alt)}

.chat-msg-body{flex:1;min-width:0}
.chat-msg-header{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:2px}
.chat-msg-header strong{font-size:var(--text-sm);color:var(--text-h)}
.chat-msg-time{font-size:10px;color:var(--text-m)}
.chat-msg-text{font-size:var(--text-sm);color:var(--text-b);line-height:1.6;word-break:break-word}

/* Mentions in messages */
.mention{
  display:inline;padding:1px 6px;border-radius:var(--radius-sm);
  font-size:var(--text-xs);font-weight:600;cursor:pointer;
  transition:opacity var(--transition-fast);
}
.mention:hover{opacity:.85}
.mention-member{background:var(--coast-100);color:var(--coast-700)}
.mention-task{background:var(--solar-100);color:var(--solar-700)}
.mention-project{background:var(--acid-100);color:var(--acid-700);display:inline-flex;align-items:center;gap:4px}
.mention-project .at-proj-dot{width:6px;height:6px}
[data-theme="dark"] .mention-member{background:rgba(99,194,255,.15);color:var(--coast-200)}
[data-theme="dark"] .mention-task{background:rgba(255,226,74,.15);color:var(--solar-200)}
[data-theme="dark"] .mention-project{background:rgba(87,245,127,.13);color:var(--acid-200)}

/* Input area */
.chat-input-area{
  padding:var(--space-3) var(--space-5) var(--space-4);
  border-top:1px solid var(--border);flex-shrink:0;
  position:relative;
}
.chat-input-row{display:flex;gap:var(--space-2)}
.chat-input{
  flex:1;padding:10px 14px;font-size:var(--text-sm);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-alt);color:var(--text-h);
  transition:all var(--transition-fast);
  font-family:var(--font-sans);
}
.chat-input:focus{
  outline:none;border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 3px rgba(87,245,127,.1);
}
.chat-input::placeholder{color:var(--text-m)}
.chat-send-btn{
  padding:0 var(--space-4);border-radius:var(--radius-lg);
  flex-shrink:0;
}
.chat-input-hint{
  display:flex;gap:var(--space-4);padding-top:var(--space-2);
  font-size:10px;color:var(--text-m);
}
.chat-input-hint kbd{
  background:var(--surface-alt);border:1px solid var(--border);
  padding:0 4px;border-radius:3px;font-family:var(--font-mono);
  font-size:9px;
}

/* Mention popup */
.chat-mention-popup{
  position:absolute;bottom:100%;left:var(--space-5);right:var(--space-5);
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 -8px 24px rgba(0,0,0,.1);
  padding:6px;max-height:260px;overflow-y:auto;
  margin-bottom:var(--space-2);
}
[data-theme="dark"] .chat-mention-popup{
  box-shadow:0 -8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05);
}

.mention-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:8px 12px;border-radius:var(--radius-md);
  cursor:pointer;transition:background var(--transition-fast);
}
.mention-item:hover,.mention-item.active{background:var(--surface-alt)}
.mention-item-info{display:flex;flex-direction:column;min-width:0}
.mention-item-name{font-size:var(--text-sm);font-weight:500;color:var(--text-h);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mention-item-type{font-size:10px;color:var(--text-m)}
.mention-type-icon{font-size:16px;width:22px;text-align:center}

/* Responsive */
@media(max-width:768px){
  .chat-sidebar{display:none}
  .chat-layout{height:calc(100vh - 140px)}
}

/* ════════════════════════════════════════
   PROCESS MAP VIEW
   ════════════════════════════════════════ */
.process-project-select{
  padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text-h);cursor:pointer;
  appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}

.process-canvas-wrap{
  position:relative;
  height:calc(100vh - 160px);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
  overflow:hidden;cursor:grab;
}
.process-canvas-wrap.panning{cursor:grabbing}

/* Fullscreen mode */
.process-canvas-wrap:fullscreen{
  height:100vh;width:100vw;
  border:none;border-radius:0;
  background:var(--bg);
}
.process-canvas-wrap:fullscreen .process-legend{
  position:fixed;bottom:0;left:0;right:0;
}
.process-canvas-wrap:fullscreen .process-zoom-controls{
  bottom:var(--space-16);
}

.process-fullscreen-btn{gap:var(--space-1)}
.process-fs-label{white-space:nowrap}

/* Dot grid — applied to the viewport, scales with zoom */
.process-viewport{
  position:absolute;inset:0;
  transform-origin:0 0;
  /* transform set by JS */
}

.process-grid{
  position:absolute;
  width:10000px;height:10000px;left:-5000px;top:-5000px;
  background-image:
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size:100% 160px;
  background-position:0 59px;
  opacity:.25;pointer-events:none;z-index:0;
}

.process-canvas{
  position:absolute;left:0;top:0;width:0;height:0;
}

.process-svg{
  position:absolute;left:0;top:0;
  width:10000px;height:10000px;
  pointer-events:none;z-index:1;overflow:visible;
}

/* Zoom controls */
.process-zoom-controls{
  position:absolute;bottom:var(--space-12);right:var(--space-4);z-index:10;
  display:flex;flex-direction:column;gap:var(--space-1);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:var(--space-1);
}
.process-zoom-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text-b);cursor:pointer;
  border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:600;
  transition:all var(--duration-fast) var(--ease-spring);
}
.process-zoom-btn:hover{background:var(--surface-alt);color:var(--text-h)}
.process-zoom-btn:active{transform:scale(.9)}

.process-zoom-level{
  font-size:10px;font-weight:600;color:var(--text-m);
  text-align:center;padding:2px 0;font-family:var(--font-mono);
  user-select:none;
}
.process-zoom-divider{height:1px;background:var(--border);margin:2px var(--space-2)}

/* Nodes */
.process-node{
  position:absolute;width:190px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  cursor:grab;user-select:none;
  transition:box-shadow var(--duration-fast) var(--ease-spring),border-color var(--duration-fast);
  z-index:3;
}
.process-node:hover{
  box-shadow:var(--shadow-lg);border-color:var(--primary);
}
.process-node.dragging{
  cursor:grabbing;box-shadow:0 12px 32px rgba(0,0,0,.15);
  transform:scale(1.03);opacity:.9;z-index:10;
}
.process-node.link-target{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light),var(--shadow-lg);
  animation:pulseGlow 1s ease-in-out infinite alternate;
}
@keyframes pulseGlow{
  from{box-shadow:0 0 0 3px var(--primary-light),var(--shadow-lg)}
  to{box-shadow:0 0 0 6px var(--primary-light),var(--shadow-lg)}
}

.process-node-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-3) 0;
}

.process-node-title{
  padding:var(--space-2) var(--space-3);
  font-size:var(--text-xs);font-weight:600;color:var(--text-h);
  line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* Link handle (bottom-center dot) */
.process-node-handle{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin:-4px auto var(--space-1);
  border-radius:50%;
  background:var(--surface-alt);border:1.5px solid var(--border);
  color:var(--text-m);cursor:crosshair;
  transition:all var(--duration-fast) var(--ease-spring);
}
.process-node-handle:hover{
  background:var(--primary);color:var(--primary-text);border-color:var(--primary);
  transform:scale(1.2);
}

/* Legend */
.process-legend{
  position:sticky;bottom:0;left:0;right:0;z-index:5;
  display:flex;gap:var(--space-5);
  padding:var(--space-3) var(--space-5);
  background:var(--surface-alt);border-top:1px solid var(--border);
  font-size:var(--text-xs);color:var(--text-m);
}
.process-legend-item{display:flex;align-items:center;gap:var(--space-2)}
.process-legend-line{width:20px;height:2px;border-radius:1px}

/* Connection menu */
.connection-menu{
  position:fixed;z-index:300;width:260px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 16px 48px -8px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.08);
  padding:0;overflow:hidden;
  opacity:0;transform:translateY(-6px) scale(.97);
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.connection-menu.open{opacity:1;transform:translateY(0) scale(1)}
[data-theme="dark"] .connection-menu{
  box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.conn-menu-header{
  padding:var(--space-4) var(--space-4) var(--space-3);
  border-bottom:1px solid var(--border);
}
.conn-menu-label{
  display:block;font-size:var(--text-xs);font-weight:700;color:var(--text-h);
  text-transform:uppercase;letter-spacing:.06em;
}
.conn-menu-tasks{
  display:block;font-size:10px;color:var(--text-m);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.conn-menu-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  cursor:pointer;transition:background var(--duration-fast);
}
.conn-menu-item:hover{background:var(--surface-alt)}
.conn-menu-icon{font-size:var(--text-lg);width:24px;text-align:center;flex-shrink:0}
.conn-menu-info{display:flex;flex-direction:column;min-width:0}
.conn-menu-type{font-size:var(--text-sm);font-weight:600;color:var(--text-h)}
.conn-menu-desc{font-size:10px;color:var(--text-m);line-height:1.3}

.conn-menu-cancel{
  justify-content:center;border-top:1px solid var(--border);
  font-size:var(--text-xs);font-weight:500;color:var(--text-m);
}

@media(max-width:768px){
  .process-canvas-wrap{height:calc(100vh - 180px)}
  .process-node{width:150px}
  .process-node-title{font-size:10px}
}

/* Subtask nodes — 1/3 size of parent */
.process-node-subtask{
  width:130px;
  transform-origin:top center;
}
.process-node-subtask .process-node-header{padding:var(--space-1) var(--space-2) 0}
.process-node-subtask .process-node-header .color-chip{font-size:8px;padding:0 5px}
.process-node-subtask .process-node-header .avatar{width:14px !important;height:14px !important;font-size:7px !important}
.process-node-subtask .process-node-title{
  font-size:10px;padding:var(--space-1) var(--space-2);
  -webkit-line-clamp:1;
}
.process-node-subtask .process-node-handle{
  width:18px;height:18px;margin:-2px auto var(--space-1);
}
.process-node-subtask .process-node-handle svg{width:8px;height:8px}

/* ════════════════════════════════════════
   CALENDAR VIEW
   ════════════════════════════════════════ */
.cal-controls{
  display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);
}
.cal-month-title{
  font-family:var(--font-heading);font-size:var(--text-lg);font-weight:700;color:var(--text-h);min-width:200px;text-align:center;
}
.cal-nav-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  color:var(--text-b);cursor:pointer;transition:all var(--transition-fast);
}
.cal-nav-btn:hover{background:var(--surface-alt);color:var(--text-h);border-color:var(--border)}
.cal-today-btn{margin-left:var(--space-2)}

.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--border);gap:1px;
  box-shadow:var(--shadow-sm);
}

.cal-day-header{
  background:var(--surface-alt);padding:var(--space-2) var(--space-3);
  font-size:var(--text-xs);font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.04em;text-align:center;
}
.cal-day-short{display:none}
@media(max-width:480px){
  .cal-day-full{display:none}
  .cal-day-short{display:inline}
}

.cal-cell{
  background:var(--surface);padding:var(--space-2);
  min-height:110px;display:flex;flex-direction:column;
  transition:background var(--transition-fast);
}
.cal-cell:hover{background:var(--surface-alt)}

.cal-outside{opacity:.5}
.cal-outside:hover{opacity:.7}

.cal-today{background:var(--primary-light) !important}
.cal-today .cal-date{
  background:var(--primary);color:var(--primary-text);
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;
}

.cal-date{
  font-size:var(--text-xs);font-weight:500;color:var(--text-h);
  margin-bottom:var(--space-1);
}

.cal-tasks{display:flex;flex-direction:column;gap:2px;flex:1}

.cal-task{
  padding:3px 7px;border-radius:var(--radius-sm);
  font-size:var(--text-xs);font-weight:500;cursor:grab;
  transition:all var(--transition-fast);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.cal-task:hover{opacity:.85;box-shadow:var(--shadow-sm)}
.cal-task.dragging{opacity:.4;transform:scale(.95)}

.cal-task-title{pointer-events:none}

.cal-cell.drag-over{background:var(--primary-light) !important}

.cal-more{
  font-size:10px;color:var(--text-m);font-weight:500;
  padding:1px 6px;
}

@media(max-width:768px){
  .cal-controls{flex-wrap:wrap;gap:var(--space-2)}
  .cal-month-title{font-size:var(--text-base);min-width:auto;flex:1;order:1}
  .cal-nav-btn{width:32px;height:32px;order:2}
  .cal-today-btn{order:3;margin-left:auto}
  .cal-grid{border-radius:var(--radius-md)}
  .cal-cell{min-height:72px;padding:4px}
  .cal-day-header{padding:6px 2px;font-size:9px;letter-spacing:.02em}
  .cal-date{font-size:10px}
  .cal-task{font-size:10px;padding:2px 5px;border-radius:2px}
  .cal-more{font-size:8px;padding:0 4px}
  .cal-today .cal-date{width:20px;height:20px;font-size:10px}
}

@media(max-width:480px){
  .cal-controls{justify-content:center}
  .cal-month-title{text-align:center;width:100%;order:0;min-width:100%;margin-bottom:var(--space-1)}
  .cal-nav-btn{order:1}
  .cal-today-btn{order:2}
  .cal-cell{min-height:48px;padding:3px}
  .cal-date{font-size:11px;font-weight:600}
  .cal-tasks{display:none}
  .cal-today .cal-date{width:22px;height:22px;font-size:11px}
  .cal-day-header{padding:6px 0;font-size:10px}
}

/* ════════════════════════════════════════
   TAG PICKER (modal)
   ════════════════════════════════════════ */
.tag-picker{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;font-size:var(--text-xs);font-weight:500;
  border:1.5px solid var(--border);border-radius:var(--radius-full);
  color:var(--text-m);cursor:pointer;transition:all var(--transition-fast);
  user-select:none;background:var(--surface);
}
.tag-chip input{display:none}
.tag-chip:hover{border-color:var(--border);color:var(--text-h)}
.tag-chip.selected{
  font-weight:600;border-color:currentColor;
  /* colors applied inline via JS chipStyle() */
}

/* ════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-10) var(--space-6);text-align:center;gap:var(--space-2);
}
.empty-state h4{font-size:var(--text-sm);font-weight:600;color:var(--text-m)}
.empty-state p{font-size:var(--text-xs);color:var(--text-m);opacity:.7}

/* ════════════════════════════════════════
   KANBAN EMPTY
   ════════════════════════════════════════ */
.kanban-empty{
  padding:var(--space-6) var(--space-3);
  text-align:center;font-size:var(--text-xs);color:var(--text-m);opacity:.5;
}

/* ════════════════════════════════════════
   TOAST UNDO
   ════════════════════════════════════════ */
.toast{display:flex;align-items:center;gap:var(--space-3)}
.toast-undo{
  background:none;border:1px solid rgba(255,255,255,.25);color:#fff;
  padding:2px 10px;font-size:var(--text-xs);font-weight:600;
  border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;
  transition:all var(--transition-fast);
}
.toast-undo:hover{background:rgba(255,255,255,.15)}

/* ════════════════════════════════════════
   CONNECTION BADGES (compact, inline)
   ════════════════════════════════════════ */
.conn-badges{display:inline-flex;gap:3px;margin-left:var(--space-2);vertical-align:middle;flex-shrink:0}
.conn-badge{
  display:inline-flex;align-items:center;gap:2px;
  font-size:9px;font-weight:700;padding:1px 5px;
  border-radius:var(--radius-full);line-height:1.4;
}
.conn-badge-subtask{background:var(--coast-100);color:var(--coast-700)}
.conn-badge-depends{background:var(--solar-100);color:var(--solar-700)}
.conn-badge-blocks{background:var(--heat-100);color:var(--heat-600)}
.conn-badge-related{background:var(--violet-100);color:var(--violet-700)}
[data-theme="dark"] .conn-badge-subtask{background:rgba(99,194,255,.12);color:var(--coast-300)}
[data-theme="dark"] .conn-badge-depends{background:rgba(255,226,74,.12);color:var(--solar-300)}
[data-theme="dark"] .conn-badge-blocks{background:rgba(255,112,77,.12);color:var(--heat-300)}
[data-theme="dark"] .conn-badge-related{background:rgba(135,132,255,.12);color:var(--indigo-300)}

/* ════════════════════════════════════════
   MODAL CONNECTIONS SECTION
   ════════════════════════════════════════ */
.modal-connections{margin-bottom:var(--space-4)}
.modal-conn-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-3);
}
.modal-conn-title{
  font-size:var(--text-xs);font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:var(--space-1);
}
.modal-conn-title svg{opacity:.65}

.modal-conn-list{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;
}
.modal-conn-item{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:var(--surface-alt);
  transition:background var(--duration-fast);
}
.modal-conn-item:hover{background:var(--surface)}
.modal-conn-icon{font-size:var(--text-sm);width:18px;text-align:center;flex-shrink:0}
.modal-conn-label{font-size:10px;font-weight:600;color:var(--text-m);width:70px;flex-shrink:0}
.modal-conn-task{
  font-size:var(--text-xs);font-weight:500;color:var(--primary);cursor:pointer;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.modal-conn-task:hover{text-decoration:underline}
.modal-conn-remove{
  border:none;background:none;color:var(--text-m);cursor:pointer;
  font-size:var(--text-base);padding:0 var(--space-1);
  transition:color var(--duration-fast);flex-shrink:0;
}
.modal-conn-remove:hover{color:var(--heat-400)}

.modal-conn-empty{
  font-size:var(--text-xs);color:var(--text-m);
  padding:var(--space-2) 0;
}

/* ── Add connection dropdown ── */
.modal-add-conn-dd{
  margin-top:var(--space-3);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-md);
  overflow:hidden;
  opacity:0;transform:translateY(-4px);
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.modal-add-conn-dd.open{opacity:1;transform:translateY(0)}

.macd-search{padding:var(--space-3)}
.macd-search input{
  width:100%;padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);border-radius:var(--radius-md);
  font-size:var(--text-sm);background:var(--surface-alt);color:var(--text-h);
}
.macd-search input:focus{outline:none;border-color:var(--primary)}

.macd-types{
  display:flex;gap:var(--space-1);padding:0 var(--space-3) var(--space-2);
  flex-wrap:wrap;
}
.macd-type-btn{
  padding:3px 10px;font-size:10px;font-weight:600;
  border:1.5px solid var(--border);border-radius:var(--radius-full);
  background:none;color:var(--text-b);cursor:pointer;
  transition:all var(--duration-fast);
}
.macd-type-btn:hover{border-color:var(--ct-color);color:var(--ct-color)}
.macd-type-btn.active{
  background:var(--ct-color);color:#fff;border-color:var(--ct-color);
}

.macd-list{max-height:200px;overflow-y:auto;border-top:1px solid var(--border)}
.macd-task{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);cursor:pointer;
  transition:background var(--duration-fast);
}
.macd-task:hover{background:var(--surface-alt)}
.macd-task-name{font-size:var(--text-xs);font-weight:500;color:var(--text-h);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.macd-connected{opacity:.5;cursor:default}
.macd-linked{font-size:9px;color:var(--text-m);font-weight:500}
.macd-empty{padding:var(--space-4);text-align:center;font-size:var(--text-xs);color:var(--text-m)}
.macd-group-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);padding:var(--space-2) var(--space-3);
  background:var(--surface-alt);border-top:1px solid var(--border);
}
.macd-group-label:first-child{border-top:none}
.macd-group-other{margin-top:0}
.macd-proj{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;font-weight:500;flex-shrink:0;margin-left:auto;
}
.macd-proj .sp-dot{width:6px;height:6px}
.macd-more{font-size:10px;color:var(--text-m);padding:var(--space-1) var(--space-3);text-align:center}

/* Table task name + badges layout */
.at-task{min-width:220px}
.at-task-name{font-weight:500;color:var(--text-h)}
.at-row-done .at-task-name{text-decoration:line-through;color:var(--text-m)}

/* ════════════════════════════════════════
   BUTTON VARIANTS
   ════════════════════════════════════════ */
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}

/* ════════════════════════════════════════
   COLOR CHIPS (universal colored badge)
   ════════════════════════════════════════ */
.color-chip{
  display:inline-flex;align-items:center;
  padding:2px 10px;font-size:var(--text-xs);font-weight:600;
  border-radius:var(--radius-full);white-space:nowrap;
  line-height:1.6;
}
.chip-sm{padding:1px 8px;font-size:10px}
.at-clickable{cursor:pointer;transition:opacity var(--transition-fast)}
.at-clickable:hover{opacity:.88}

/* ════════════════════════════════════════
   THEME COLOR PICKER
   ════════════════════════════════════════ */
.theme-color-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);cursor:pointer;
  transition:all var(--duration-fast) var(--ease-spring);
  box-shadow:0 1px 2px rgba(0,0,0,.04);position:relative;
}
.theme-color-btn:hover{border-color:var(--border);box-shadow:var(--shadow-md)}
.theme-color-btn:active{transform:scale(.92);transition-duration:80ms}

.theme-color-bubble{
  width:22px;height:22px;border-radius:50%;
  display:block;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1);
}

.theme-color-dropdown{
  position:fixed;z-index:250;width:240px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 16px 48px -8px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  padding:var(--space-2);overflow:hidden;
  opacity:0;transform:translateY(-6px) scale(.97);
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.theme-color-dropdown.open{opacity:1;transform:translateY(0) scale(1)}
[data-theme="dark"] .theme-color-dropdown{
  box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.tcd-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);padding:var(--space-2) var(--space-3) var(--space-2);
}

.tcd-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:8px var(--space-3);border-radius:var(--radius-md);
  cursor:pointer;transition:background var(--duration-fast) var(--ease-in-out);
}
.tcd-item:hover{background:var(--surface-alt)}
.tcd-active{background:var(--primary-light)}

.tcd-bubble{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.1);
}
.tcd-name{font-size:var(--text-sm);font-weight:500;color:var(--text-h);flex:1}
.tcd-check{color:var(--primary);flex-shrink:0}

/* ══════════════════════════���═════════════
   NOTIFICATION PANEL
   ════════════════════════════════════════ */
.notif-btn{position:relative}
.notif-badge{
  position:absolute;top:4px;right:4px;
  min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--heat-400);color:#fff;
  font-size:9px;font-weight:700;border-radius:var(--radius-full);
  padding:0 4px;border:2px solid var(--surface);
}

.notif-panel{
  position:absolute;top:56px;right:var(--space-6);width:380px;max-height:520px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 16px 48px -8px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  display:none;flex-direction:column;overflow:hidden;z-index:200;
}
.notif-panel.open{display:flex;animation:modalIn .2s cubic-bezier(.16,1,.3,1)}
[data-theme="dark"] .notif-panel{
  box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.notif-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5) var(--space-2);
}
.notif-panel-header h3{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;color:var(--text-h)}
.notif-mark-all{
  font-size:var(--text-xs);font-weight:600;color:var(--primary);
  background:none;border:none;cursor:pointer;
  transition:opacity var(--transition-fast);
}
.notif-mark-all:hover{opacity:.85}

.notif-panel-tabs{
  display:flex;gap:1px;padding:0 var(--space-4);
  border-bottom:1px solid var(--border);
}
.notif-tab{
  padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:500;
  color:var(--text-m);background:none;border:none;cursor:pointer;
  border-bottom:2px solid transparent;transition:all var(--transition-fast);
}
.notif-tab:hover{color:var(--text-h)}
.notif-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

.notif-list{flex:1;overflow-y:auto}

.notif-item{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background var(--transition-fast);
  position:relative;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--surface-alt)}
.notif-read{opacity:.65}
.notif-read:hover{opacity:.85}

.notif-item-icon{
  width:32px;height:32px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.notif-icon-task{background:var(--coast-100);color:var(--coast-600)}
.notif-icon-mention{background:var(--violet-100);color:var(--violet-600)}
.notif-icon-chat{background:var(--acid-100);color:var(--acid-600)}
.notif-icon-system{background:var(--neutral-200);color:var(--neutral-600)}
[data-theme="dark"] .notif-icon-task{background:rgba(99,194,255,.12);color:var(--coast-300)}
[data-theme="dark"] .notif-icon-mention{background:rgba(135,132,255,.12);color:var(--indigo-300)}
[data-theme="dark"] .notif-icon-chat{background:rgba(87,245,127,.12);color:var(--acid-300)}
[data-theme="dark"] .notif-icon-system{background:rgba(255,255,255,.08);color:var(--neutral-400)}

.notif-item-body{flex:1;min-width:0}
.notif-item-title{font-size:var(--text-xs);font-weight:600;color:var(--text-h)}
.notif-item-text{font-size:var(--text-xs);color:var(--text-m);margin-top:1px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-item-time{font-size:10px;color:var(--text-m);margin-top:2px;display:block}

.notif-unread-dot{
  width:8px;height:8px;border-radius:50%;background:var(--primary);
  flex-shrink:0;margin-top:var(--space-2);
}

.notif-empty{
  padding:var(--space-10) var(--space-5);text-align:center;
  font-size:var(--text-sm);color:var(--text-m);
}

@media(max-width:480px){
  .notif-panel{right:var(--space-2);left:var(--space-2);width:auto}
}

/* ════════════════════════════════════════
   PROFILE POPOVER
   ════════════════════════════════════════ */
.avatar-clickable{cursor:pointer;transition:box-shadow var(--transition-fast)}
.avatar-clickable:hover{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--border)}

.profile-popover{
  position:fixed;z-index:250;width:300px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 16px 48px -8px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  opacity:0;transform:translateY(4px) scale(.97);
  transition:all .18s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.profile-popover.open{opacity:1;transform:translateY(0) scale(1)}
[data-theme="dark"] .profile-popover{
  box-shadow:0 16px 48px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.pp-header{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-5) var(--space-5) var(--space-3);
}
.pp-header-info{display:flex;flex-direction:column;min-width:0}
.pp-header-info strong{font-family:var(--font-heading);font-size:var(--text-sm);color:var(--text-h)}
.pp-you{font-size:10px;color:var(--primary);font-weight:600}
.pp-title{font-size:var(--text-xs);color:var(--text-m);margin-top:1px}

.pp-stats{
  display:flex;gap:var(--space-4);padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border);
}
.pp-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
.pp-stat-val{font-family:var(--font-heading);font-size:var(--text-base);font-weight:700;color:var(--text-h)}
.pp-stat-lbl{font-size:10px;color:var(--text-m)}

.pp-row{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-5);
  font-size:var(--text-xs);color:var(--text-m);
}
.pp-row svg{opacity:.65;flex-shrink:0}

.pp-section-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);padding:var(--space-3) var(--space-5) var(--space-1);
}

.pp-task-list{padding:0 var(--space-4) var(--space-1)}
.pp-task{
  display:flex;align-items:center;gap:var(--space-2);
  padding:5px var(--space-2);border-radius:var(--radius-md);
  cursor:pointer;transition:background var(--transition-fast);
}
.pp-task:hover{background:var(--surface-alt)}
.pp-task-name{
  font-size:var(--text-xs);color:var(--text-h);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pp-more{font-size:10px;color:var(--text-m);padding:2px var(--space-2);display:block}

.pp-chat-list{padding:0 var(--space-5) var(--space-2)}
.pp-chat-msg{
  padding:var(--space-2) 0;border-bottom:1px solid var(--border);
}
.pp-chat-msg:last-child{border-bottom:none}
.pp-chat-channel{font-size:10px;font-weight:600;color:var(--text-m)}
.pp-chat-text{font-size:var(--text-xs);color:var(--text-b);line-height:1.5;margin-top:2px}
.pp-chat-time{font-size:9px;color:var(--text-m)}

.pp-actions{
  display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-4);
  border-top:1px solid var(--border);
}
.pp-action-btn{flex:1;justify-content:center}

/* ════════════════════════════════════════
   CELL PICKER DROPDOWN
   ════════════════════════════════════════ */
.cell-dropdown{
  position:fixed;z-index:200;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 32px -4px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
  padding:6px;min-width:160px;
  opacity:0;transform:translateY(-6px) scale(.97);
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.cell-dropdown.open{opacity:1;transform:translateY(0) scale(1)}
[data-theme="dark"] .cell-dropdown{
  box-shadow:0 12px 32px -4px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
}

.cell-dropdown-item{
  padding:7px 12px;border-radius:var(--radius-md);
  cursor:pointer;transition:all var(--transition-fast);
  display:flex;align-items:center;
}
.cell-dropdown-item:hover{background:var(--surface-alt)}
.cell-dropdown-item .color-chip{pointer-events:none}

/* ════════════════════════════════════════
   COLUMN EDITOR POPOVER
   ════════════════════════════════════════ */
.col-configurable{position:relative}
.col-edit-hint{
  display:inline-flex;opacity:0;font-size:10px;
  cursor:pointer;transition:opacity var(--transition-fast);
  vertical-align:middle;margin-left:2px;
}
.col-configurable:hover .col-edit-hint{opacity:.6}
.col-edit-hint:hover{opacity:1 !important}

.col-editor{
  position:fixed;z-index:200;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 16px 40px -8px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  padding:var(--space-5);min-width:280px;max-width:340px;
  opacity:0;transform:translateY(-6px) scale(.97);
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.col-editor.open{opacity:1;transform:translateY(0) scale(1)}
[data-theme="dark"] .col-editor{
  box-shadow:0 16px 40px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}

.col-editor-title{
  font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-m);
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border);
}

.col-editor-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) 0;
}

.col-editor-label{min-width:90px;flex-shrink:0}

.col-editor-swatches{
  display:flex;gap:5px;flex-wrap:wrap;
}

.color-swatch{
  width:20px;height:20px;border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;transition:all var(--transition-fast);
  padding:0;flex-shrink:0;
}
.color-swatch:hover{transform:scale(1.15);border-color:rgba(0,0,0,.15)}
[data-theme="dark"] .color-swatch:hover{border-color:rgba(255,255,255,.2)}
.color-swatch.active{
  border-color:var(--text-h) !important;
  transform:scale(1.15);
}

/* ════════════════════════════════════════════════════
   iOS-STYLE INTERACTIONS & ANIMATIONS
   Global layer — smooth, spring-based, tactile
   ════════════════════════════════════════════════════ */

/* ── Smooth theme transition (all colors) ── */
body,
.sidebar,.topbar,.content,.card,.stat-card,.kanban-col,.kanban-card,
.airtable-wrap,.airtable th,.airtable td,.team-card,.profile-card,
.chat-layout,.chat-sidebar,.chat-main,.chat-header,.chat-input,
.modal,.modal-overlay,.notif-panel,.btn,.topbar-btn,.filter-btn,
.badge,.color-chip,.at-cell-chip,.form-row input,.form-row select,
.form-row textarea,.toggle-track,.progress-bar,.cal-cell,.cal-grid,
.cell-dropdown,.col-editor,.profile-popover,.font-size-control{
  transition-property:background,background-color,border-color,color,box-shadow,opacity;
  transition-duration:var(--duration-base);
  transition-timing-function:var(--ease-in-out);
}

/* ── View content fade-in on render ── */
/* ── Global Section Entrance Animations ── */
@keyframes sectionRevealUp{
  0%{clip-path:inset(100% 0 0 0);opacity:0;transform:translateY(20px)}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:translateY(0)}
}
@keyframes sectionFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Page header entrance */
.page-header{animation:sectionFadeUp .5s var(--ease-out-expo) both}

/* Stat cards stagger */
.stat-card{animation:sectionRevealUp .5s var(--ease-out-expo) both}
.stat-card:nth-child(1){animation-delay:.1s}
.stat-card:nth-child(2){animation-delay:.15s}
.stat-card:nth-child(3){animation-delay:.2s}
.stat-card:nth-child(4){animation-delay:.25s}
.stat-card:nth-child(5){animation-delay:.3s}

/* Dashboard cards stagger */
.dash-recent{animation:sectionRevealUp .6s var(--ease-out-expo) .2s both}
.dash-activity{animation:sectionRevealUp .6s var(--ease-out-expo) .3s both}
.dash-projects{animation:sectionRevealUp .6s var(--ease-out-expo) .4s both}

/* Kanban columns stagger */
.kanban-col{animation:sectionRevealUp .5s var(--ease-out-expo) both}
.kanban-col:nth-child(1){animation-delay:.1s}
.kanban-col:nth-child(2){animation-delay:.15s}
.kanban-col:nth-child(3){animation-delay:.2s}
.kanban-col:nth-child(4){animation-delay:.25s}
.kanban-col:nth-child(5){animation-delay:.3s}
.kanban-col:nth-child(6){animation-delay:.35s}

/* Table entrance */
.airtable-wrap{animation:sectionRevealUp .6s var(--ease-out-expo) .15s both}
.table-footer{animation:sectionFadeUp .4s var(--ease-out-expo) .3s both}

/* Calendar entrance */
.cal-controls{animation:sectionFadeUp .4s var(--ease-out-expo) .1s both}
.cal-grid{animation:sectionRevealUp .6s var(--ease-out-expo) .2s both}

/* Chat layout entrance */
.chat-layout{animation:sectionRevealUp .5s var(--ease-out-expo) .1s both}

/* Team cards stagger */
.team-card{animation:sectionRevealUp .5s var(--ease-out-expo) both}
.team-card:nth-child(1){animation-delay:.1s}
.team-card:nth-child(2){animation-delay:.15s}
.team-card:nth-child(3){animation-delay:.2s}
.team-card:nth-child(4){animation-delay:.25s}
.team-card:nth-child(5){animation-delay:.3s}
.team-card:nth-child(6){animation-delay:.35s}

/* Profile layout entrance */
.profile-layout{animation:sectionFadeUp .5s var(--ease-out-expo) .1s both}
.profile-card{animation:sectionRevealUp .6s var(--ease-out-expo) .15s both}
.profile-section{animation:sectionRevealUp .5s var(--ease-out-expo) both}
.profile-section:nth-child(1){animation-delay:.2s}
.profile-section:nth-child(2){animation-delay:.3s}
.profile-section:nth-child(3){animation-delay:.4s}

/* Drive layout entrance */
.drive-layout{animation:sectionFadeUp .5s var(--ease-out-expo) .1s both}
.drive-sidebar{animation:sectionRevealUp .5s var(--ease-out-expo) .15s both}
.drive-dropzone{animation:sectionRevealUp .5s var(--ease-out-expo) .2s both}

/* Drive grid cards stagger */
.drive-card{animation:sectionRevealUp .4s var(--ease-out-expo) both}
.drive-card:nth-child(1){animation-delay:.15s}
.drive-card:nth-child(2){animation-delay:.18s}
.drive-card:nth-child(3){animation-delay:.21s}
.drive-card:nth-child(4){animation-delay:.24s}
.drive-card:nth-child(5){animation-delay:.27s}
.drive-card:nth-child(6){animation-delay:.3s}
.drive-card:nth-child(n+7){animation-delay:.33s}

/* Process map entrance */
.process-canvas-wrap{animation:sectionRevealUp .6s var(--ease-out-expo) .15s both}

/* Project banner entrance */
.project-banner{animation:sectionFadeUp .4s var(--ease-out-expo) both}

/* Nav bar entrance */
.drive-nav-bar{animation:sectionFadeUp .4s var(--ease-out-expo) .1s both}

/* ── Sidebar spring slide (mobile) ── */
.sidebar{transition:transform var(--duration-slow) var(--ease-out-expo),box-shadow var(--duration-slow) var(--ease-out-expo)}

/* ── Button press effect (iOS haptic feel) ── */
.btn{transition:all var(--duration-fast) var(--ease-spring)}
.btn:active{transform:scale(.96) !important;transition-duration:80ms}
.btn-primary:hover{transform:translateY(-1px) scale(1.01)}

.topbar-btn{transition:all var(--duration-fast) var(--ease-spring)}
.topbar-btn:active{transform:scale(.92);transition-duration:80ms}

/* ── Sidebar links spring ── */
.sidebar-link{transition:color var(--duration-base) var(--ease-out-expo),border-color var(--duration-base) var(--ease-out-expo),transform 80ms ease}
.sidebar-link:active{transform:scale(.97)}

/* ── Card hover lift (iOS card feel) ── */
.stat-card{transition:all var(--duration-base) var(--ease-spring)}
.stat-card:hover{transform:translateY(-2px) scale(1.005)}
.stat-card:active{transform:scale(.985);transition-duration:100ms}

.team-card{transition:all var(--duration-base) var(--ease-spring)}
.team-card:hover{transform:translateY(-3px) scale(1.008)}
.team-card:active{transform:scale(.985);transition-duration:100ms}

.kanban-card{transition:all var(--duration-fast) var(--ease-spring)}
.kanban-card:hover{transform:translateY(-1px)}
.kanban-card:active{transform:scale(.98);transition-duration:80ms}

/* ── Task item row press ── */
.task-item{transition:all var(--duration-fast) var(--ease-in-out)}
.task-item:active{background:var(--surface-alt);transform:scale(.995);transition-duration:80ms}

/* ── Table row hover glow ── */
.airtable tbody tr{transition:background var(--duration-fast) var(--ease-in-out)}

/* ── Chat message slide-in ── */
.chat-msg{animation:msgSlideIn var(--duration-base) var(--ease-out-expo)}
@keyframes msgSlideIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Notification items stagger ── */
.notif-item{animation:notifSlideIn var(--duration-base) var(--ease-out-expo) both}
.notif-item:nth-child(1){animation-delay:0ms}
.notif-item:nth-child(2){animation-delay:30ms}
.notif-item:nth-child(3){animation-delay:60ms}
.notif-item:nth-child(4){animation-delay:90ms}
.notif-item:nth-child(5){animation-delay:120ms}
.notif-item:nth-child(6){animation-delay:150ms}
.notif-item:nth-child(7){animation-delay:180ms}
@keyframes notifSlideIn{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:translateX(0)}
}

/* ── Activity feed stagger ── */
.activity-item{animation:activityFadeIn var(--duration-base) var(--ease-out-expo) both}
.activity-item:nth-child(1){animation-delay:0ms}
.activity-item:nth-child(2){animation-delay:40ms}
.activity-item:nth-child(3){animation-delay:80ms}
.activity-item:nth-child(4){animation-delay:120ms}
.activity-item:nth-child(5){animation-delay:160ms}
@keyframes activityFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Modal spring (override existing) ── */
@keyframes modalIn{
  0%{opacity:0;transform:translateY(30px) scale(.92)}
  60%{opacity:1;transform:translateY(-4px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.modal{animation:modalIn var(--duration-slow) var(--ease-out-expo)}

/* ── Dropdown/popover spring ── */
.cell-dropdown,.col-editor,.profile-popover,.notif-panel.open,.chat-mention-popup{
  animation:popoverSpring var(--duration-base) var(--ease-spring);
}
@keyframes popoverSpring{
  0%{opacity:0;transform:translateY(-8px) scale(.95)}
  60%{opacity:1;transform:translateY(2px) scale(1.005)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ── Toast slide-up with bounce ── */
.toast{
  animation:toastIn var(--duration-base) var(--ease-spring);
}
.toast.show{opacity:1;transform:translateY(0)}
@keyframes toastIn{
  0%{opacity:0;transform:translateY(20px) scale(.95)}
  70%{transform:translateY(-3px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ── Toggle switch smooth ── */
.toggle-track{transition:background var(--duration-base) var(--ease-spring)}
.toggle-track::after{transition:transform var(--duration-base) var(--ease-spring)}

/* DS toggle in modal */
.ds-toggle-track{transition:background var(--duration-base) var(--ease-spring)}
.ds-toggle-track::after{transition:transform var(--duration-base) var(--ease-spring)}

/* ── Progress bar fill animation ── */
.progress-fill{transition:width var(--duration-slow) var(--ease-out-expo)}

/* ── Badge / chip hover pulse ── */
.color-chip.at-clickable{transition:all var(--duration-fast) var(--ease-spring)}
.color-chip.at-clickable:active{transform:scale(.93);transition-duration:80ms}

.at-cell-chip{transition:all var(--duration-fast) var(--ease-spring)}
.at-cell-chip:active{transform:scale(.95);transition-duration:80ms}

/* ── Checkbox smooth check ── */
input[type="checkbox"]{transition:all var(--duration-fast) var(--ease-spring)}

/* ── Filter tab slide indicator ── */
.filter-btn{transition:all var(--duration-fast) var(--ease-spring)}
.filter-btn:active{transform:scale(.95);transition-duration:80ms}

.notif-tab{transition:all var(--duration-fast) var(--ease-in-out)}

/* ── Chat channel items spring ── */
.chat-channel,.chat-dm-item{transition:all var(--duration-fast) var(--ease-spring)}
.chat-channel:active,.chat-dm-item:active{transform:scale(.97);transition-duration:80ms}

/* ── Calendar cell hover spring ── */
.cal-cell{transition:background var(--duration-fast) var(--ease-in-out)}
.cal-task{transition:all var(--duration-fast) var(--ease-spring)}
.cal-task:active{transform:scale(.95);transition-duration:80ms}

/* ── Calendar nav buttons ── */
.cal-nav-btn{transition:all var(--duration-fast) var(--ease-spring)}
.cal-nav-btn:active{transform:scale(.9);transition-duration:80ms}

/* ── Notification badge bounce on update ── */
.notif-badge{animation:badgeBounce var(--duration-base) var(--ease-spring)}
@keyframes badgeBounce{
  0%{transform:scale(0)}
  50%{transform:scale(1.3)}
  100%{transform:scale(1)}
}

/* ── Avatar hover pop ── */
.avatar-clickable{transition:all var(--duration-fast) var(--ease-spring)}
.avatar-clickable:active{transform:scale(.9);transition-duration:80ms}

/* ── Expand button spin-up ── */
.at-expand-btn{transition:all var(--duration-fast) var(--ease-spring)}
.at-expand-btn:active{transform:scale(.85) rotate(5deg);transition-duration:80ms}

/* ── Profile avatar color dots spring ── */
.avatar-color-dot{transition:all var(--duration-fast) var(--ease-spring)}

/* ── Form input focus grow ── */
.form-row input:focus,.form-row select:focus,.form-row textarea:focus,
.chat-input:focus,.topbar-search input:focus{
  transition:all var(--duration-fast) var(--ease-spring);
}

/* ── Kanban column drop zone pulse ── */
.kanban-cards.drag-over{
  animation:dropPulse 1s ease-in-out infinite alternate;
}
@keyframes dropPulse{
  from{background:rgba(87,245,127,.03)}
  to{background:rgba(87,245,127,.08)}
}

/* ── Calendar drag-over pulse ── */
.cal-cell.drag-over{
  animation:dropPulse 1s ease-in-out infinite alternate;
}

/* ── Sidebar overlay fade ── */
.sidebar-overlay{transition:opacity var(--duration-base) var(--ease-in-out)}

/* ── Smooth scrolling everywhere ── */
.content,.chat-messages,.notif-list,.kanban-cards,.sidebar-nav{
  scroll-behavior:smooth;
}

/* ══════════════════════════════════════════════════
   MOBILE OVERHAUL — Comprehensive responsive fixes
   ══════════════════════════════════════════════════ */

/* ── TABLET (max 1024px) ── */
@media(max-width:1024px){
  .welcome-content{grid-template-columns:1fr 280px}
  .welcome-chat{height:320px}
  .profile-layout{grid-template-columns:240px 1fr}
}

/* ── MOBILE (max 768px) ── */
@media(max-width:768px){
  /* Topbar — simplified for mobile */
  .topbar{padding:0 var(--space-2);gap:var(--space-2);height:48px}
  .topbar-search{max-width:none;flex:1;padding:var(--space-1) var(--space-2)}
  .topbar-search input{font-size:var(--text-xs)}
  .create-menu-wrap{order:10}
  .create-menu-btn{padding:var(--space-2);font-size:var(--text-xs);height:32px;min-width:auto}
  .create-menu-btn svg{width:14px;height:14px}
  .topbar-btn{width:32px;height:32px;min-width:32px;min-height:32px}
  .topbar-btn svg{width:16px;height:16px}
  .topbar-menu-btn{width:32px;height:32px;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;padding:0}
  .topbar-menu-btn svg{width:18px;height:18px}
  .topbar-actions{gap:2px}
  .profile-menu-wrap .topbar-avatar{width:32px !important;height:32px !important;font-size:12px !important}

  /* Hide non-essential header items on mobile */
  .undo-redo-group{display:none}
  .font-size-control{display:none}
  .theme-color-btn{display:none}

  /* Fix dropdown/popup z-indexes for mobile */
  .create-menu{position:fixed;top:48px;left:var(--space-2);right:var(--space-2);width:auto;z-index:300}
  .notif-panel{position:fixed;top:48px;left:var(--space-2);right:var(--space-2);width:auto;z-index:300}
  .profile-menu{position:fixed;top:48px;right:var(--space-2);width:220px;z-index:300}
  .search-results{position:fixed;top:48px;left:var(--space-2);right:var(--space-2);width:auto;z-index:300}
  .profile-popover{position:fixed;z-index:300}

  /* Modal must be above everything */
  .modal-overlay{z-index:500}

  /* Sidebar — fixed slide-in */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:280px;height:100dvh;
    transform:translateX(-100%);
    z-index:100;
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:8px 0 30px rgba(0,0,0,.2);
  }
  .sidebar-overlay{z-index:99}
  .sidebar-brand{padding:var(--space-3) var(--space-4)}

  /* Project banner */
  .project-banner{padding:var(--space-2) var(--space-4)}
  .pb-name{font-size:var(--text-sm)}

  /* Content area */
  .content{padding:var(--space-3);overflow-x:hidden}

  /* Page headers */
  .page-header{flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}
  .page-header-actions{width:100%;flex-wrap:wrap;gap:var(--space-2)}
  .page-title{font-size:var(--text-xl)}
  .page-subtitle{font-size:var(--text-xs)}

  /* Stat grid */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-4)}
  .stat-card{padding:var(--space-3);gap:var(--space-3)}
  .stat-icon{width:36px;height:36px}
  .stat-value{font-size:var(--text-lg)}
  .stat-label{font-size:10px}

  /* Dashboard grid */
  .dash-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:var(--space-3)}
  .dash-recent,.dash-activity,.dash-projects{grid-column:1;grid-row:auto}

  /* Task items */
  .task-item{padding:var(--space-2) var(--space-3);gap:var(--space-2)}
  .task-name{font-size:var(--text-xs)}
  .task-meta{font-size:10px}
  .task-item .avatar{width:20px !important;height:20px !important;font-size:8px !important}

  /* Kanban */
  .kanban-board{height:calc(100dvh - 160px);padding-bottom:var(--space-6)}
  .kanban-col{flex:0 0 240px}
  .kanban-card{padding:var(--space-2)}
  .kanban-card-title{font-size:var(--text-xs)}
  .kanban-card-desc{display:none}
  .filter-group{flex:1}
  .filter-btn{flex:1;text-align:center;font-size:10px;padding:var(--space-2)}

  /* Table */
  .airtable-wrap{border-radius:var(--radius-md);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .airtable{font-size:var(--text-xs);min-width:700px}
  .airtable th,.airtable td{padding:6px var(--space-2)}
  .at-task{min-width:140px}
  .at-expand{width:28px}
  .at-editable{font-size:var(--text-xs)}
  .table-footer{font-size:9px}

  /* Calendar */
  .cal-controls{flex-wrap:wrap;gap:var(--space-2)}
  .cal-month-title{font-size:var(--text-base);min-width:auto;flex:1}
  .cal-nav-btn{width:32px;height:32px}
  .cal-cell{min-height:65px;padding:3px}
  .cal-grid{border-radius:var(--radius-md)}
  .cal-task{font-size:9px;padding:1px 3px}
  .cal-day-header{padding:6px 2px;font-size:9px;letter-spacing:.02em}
  .cal-date{font-size:10px}
  .cal-today .cal-date{width:20px;height:20px;font-size:10px}

  /* Chat */
  .chat-layout{height:calc(100dvh - 120px);border-radius:var(--radius-md)}
  .chat-sidebar{display:none}
  .chat-header{padding:var(--space-2) var(--space-3)}
  .chat-input-area{padding:var(--space-2) var(--space-3)}
  .chat-input{padding:8px 10px;font-size:var(--text-xs)}
  .chat-input-hint{display:none}
  .chat-filters{padding:var(--space-1) var(--space-3)}

  /* Drive */
  .drive-layout{height:auto;flex-direction:column;gap:0}
  .drive-sidebar{display:none}
  .drive-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-2)}
  .drive-card{padding:var(--space-3) var(--space-2)}
  .drive-card-icon svg{width:28px;height:28px}
  .drive-card-name{font-size:10px}
  .drive-card-meta{font-size:9px}
  .drive-nav-bar{padding:var(--space-2);margin-top:var(--space-1)}
  .drive-back-btn{width:28px;height:28px}
  .drive-bc{font-size:var(--text-xs);padding:var(--space-1)}
  .drive-list-header,.drive-list-item{grid-template-columns:1fr 80px}
  .drive-lh-date,.drive-li-date{display:none}

  /* Process map */
  .process-canvas-wrap{height:calc(100dvh - 160px)}
  .process-node{width:140px}
  .process-node-title{font-size:9px}
  .process-node-header .color-chip{font-size:9px;padding:1px 5px}
  .process-zoom-controls{bottom:var(--space-3);right:var(--space-2)}
  .process-legend{font-size:10px;gap:var(--space-3);padding:var(--space-2) var(--space-3)}

  /* Team */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
  .team-card{padding:var(--space-3)}
  .team-card h4{font-size:var(--text-xs)}
  .team-card-title{font-size:10px}
  .team-stats{gap:var(--space-2);font-size:10px}
  .team-view-profile{font-size:10px}

  /* Profile */
  .profile-layout{grid-template-columns:1fr;gap:var(--space-3)}
  .profile-card{position:static}
  .profile-card-top{padding:var(--space-5) var(--space-4)}
  .profile-avatar-lg{width:60px;height:60px}
  .profile-name{font-size:var(--text-base)}
  .profile-card-stats{gap:var(--space-4);padding:var(--space-3)}
  .profile-section-body{padding:var(--space-3)}
  .avatar-color-picker{padding:8px 14px;gap:6px}

  /* Welcome hero */
  .welcome-hero{padding:var(--space-4);margin:calc(-1 * var(--space-3))}
  .welcome-content{grid-template-columns:1fr;gap:var(--space-4)}
  .welcome-greeting{font-size:var(--text-2xl)}
  .welcome-summary{font-size:var(--text-sm)}
  .welcome-briefing{font-size:var(--text-xs);max-width:none}
  .welcome-actions{flex-wrap:wrap;gap:var(--space-2)}
  .welcome-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);flex:1;justify-content:center}
  .welcome-focus{padding:var(--space-3)}
  .welcome-right{max-height:none;flex-direction:column}
  .welcome-chat{height:260px}
  .welcome-quote{padding:var(--space-3)}
  .welcome-quote-text{font-size:var(--text-xs)}
  .welcome-weather{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .weather-details{display:none}

  /* Modal */
  .modal-overlay{padding:var(--space-2);align-items:flex-start;padding-top:env(safe-area-inset-top,8px)}
  .modal{max-width:100%;border-radius:var(--radius-xl);max-height:calc(100dvh - 16px)}
  .modal-header{padding:var(--space-3) var(--space-4)}
  .modal-header h3{font-size:var(--text-base)}
  .modal-body{padding:0 var(--space-4) var(--space-4)}
  .modal-footer{padding-top:var(--space-3);gap:var(--space-2)}
  .form-row{margin-bottom:var(--space-3)}
  .form-row-2col{grid-template-columns:1fr;gap:var(--space-3)}
  .form-row label{font-size:10px}
  .form-row input,.form-row select,.form-row textarea{padding:8px 10px;font-size:var(--text-xs)}
  .chip-picker{gap:var(--space-1)}
  .chip-option{font-size:10px;padding:3px 8px}
  .tag-picker{gap:4px}
  .tag-chip{font-size:10px;padding:3px 8px}
  .modal-conn-item{padding:var(--space-2);gap:var(--space-1);font-size:10px}
  .modal-icon{width:28px;height:28px}

  /* Custom selects */
  .cs-trigger{padding:8px 10px;font-size:var(--text-xs)}
  .cs-option{font-size:var(--text-xs);padding:var(--space-2)}

  /* Notifications */
  .notif-panel{right:4px;left:4px;width:auto;max-height:70dvh;top:50px}
  .notif-item{padding:var(--space-2) var(--space-3)}

  /* Profile avatar + menu */
  .profile-menu{right:0;width:200px}
  .pm-header{padding:var(--space-3)}
  .pm-header .avatar{width:30px !important;height:30px !important;font-size:12px !important}
  .pm-item{font-size:var(--text-xs)}

  /* Create menu */
  .create-menu{width:calc(100vw - 16px);right:-60px}
  .cm-item{padding:var(--space-2)}
  .cm-icon{width:28px;height:28px}
  .cm-name{font-size:var(--text-xs)}
  .cm-desc{font-size:9px}

  /* Search results */
  .search-results{width:calc(100vw - 16px);left:-8px}
  .sr-grid{grid-template-columns:1fr}
  .sr-section{border-right:none;padding:var(--space-3)}
  .sr-recent-grid{grid-template-columns:repeat(4,1fr)}

  /* Connection badges — hide on mobile for cleanliness */
  .conn-badges{display:none}

  /* File viewer — fullscreen on mobile */
  .dv-overlay{padding:0}
  .dv-container{margin:0;border-radius:0;max-width:100%}
  .dv-topbar{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .dv-topbar-actions{flex-wrap:wrap;gap:var(--space-1)}
  .dv-file-name{font-size:var(--text-xs)}

  /* Profile popover — fullscreen on small screens */
  .profile-popover{width:calc(100vw - 16px);max-width:320px}
  .pp-task-list{padding:0 var(--space-3)}
  .pp-chat-list{padding:0 var(--space-3)}

  /* Column editor */
  .col-editor{min-width:240px}

  /* Project picker dropdown */
  .sp-dropdown{max-height:60dvh}
}

/* ── SMALL PHONE (max 480px) ── */
@media(max-width:480px){
  /* Topbar — even more compact */
  .topbar{height:44px}
  .search-shortcut{display:none}
  .create-menu-btn span{display:none}
  .create-menu-btn{padding:6px;min-width:32px;height:32px;border-radius:var(--radius-md)}
  .topbar-btn{width:32px;height:32px;min-width:32px;min-height:32px}
  .topbar-menu-btn{width:32px;height:32px;min-width:32px;min-height:32px}

  /* Hide theme toggle on tiny screens — use profile menu instead */
  #theme-toggle{display:none}

  /* Fixed dropdowns for small screens */
  .create-menu,.notif-panel,.search-results,.profile-menu{top:44px}

  /* Content */
  .content{padding:var(--space-2)}

  /* Stat grid — single column */
  .stat-grid{grid-template-columns:1fr;gap:var(--space-2)}

  /* Team — single column */
  .team-grid{grid-template-columns:1fr}

  /* Calendar */
  .cal-cell{min-height:44px;padding:2px}
  .cal-date{font-size:11px;font-weight:600}
  .cal-tasks{display:none}
  .cal-day-full{display:none}
  .cal-day-short{display:inline}
  .cal-month-title{text-align:center;width:100%;order:0;min-width:100%;margin-bottom:var(--space-1);font-size:var(--text-sm)}
  .cal-nav-btn{order:1;width:28px;height:28px}
  .cal-today-btn{order:2}
  .cal-controls{justify-content:center}

  /* Welcome */
  .welcome-hero{padding:var(--space-3);margin:calc(-1 * var(--space-2))}
  .welcome-greeting{font-size:var(--text-xl)}
  .welcome-date{font-size:var(--text-xs);margin-bottom:var(--space-2)}
  .welcome-summary{font-size:var(--text-xs)}
  .welcome-briefing{font-size:10px}
  .welcome-actions{margin-bottom:var(--space-4)}
  .welcome-actions .welcome-btn{flex:1;justify-content:center;min-height:36px}
  .welcome-chat{height:220px}
  .welcome-quote-text{font-size:10px}

  /* Drive */
  .drive-grid{grid-template-columns:repeat(2,1fr)}

  /* Forms */
  .form-row-2col{grid-template-columns:1fr}
  .auth-form-2col{grid-template-columns:1fr}
  .np-color-grid{grid-template-columns:repeat(2,1fr)}

  /* Auth */
  .auth-overlay{padding:var(--space-2)}
  .auth-card{padding:var(--space-4);border-radius:var(--radius-lg)}
  .auth-header h1{font-size:var(--text-lg)}
  .auth-header .sidebar-logo{width:36px;height:36px}

  /* Kanban */
  .kanban-col{flex:0 0 220px}
  .kanban-col-header h4{font-size:var(--text-xs)}

  /* Search */
  .sr-recent-grid{grid-template-columns:repeat(2,1fr)}
  .search-results{left:0;right:0;width:auto;border-radius:var(--radius-md)}

  /* Create menu — center on screen */
  .create-menu{right:auto;left:50%;transform:translateX(-50%);width:calc(100vw - 16px)}

  /* Profile avatar */
  .profile-menu-wrap .topbar-avatar{width:32px !important;height:32px !important;font-size:12px !important}

  /* Notif panel */
  .notif-panel{top:46px}

  /* Process map */
  .process-node{width:120px}
  .process-node-title{font-size:8px;-webkit-line-clamp:1}
  .process-node-header .avatar{width:12px !important;height:12px !important;font-size:6px !important}
}

/* ── TOUCH DEVICE OPTIMIZATIONS ── */
@media(hover:none){
  /* Larger touch targets */
  .sidebar-link{padding:var(--space-3) var(--space-3);min-height:44px}
  .btn{min-height:44px}
  .topbar-btn{min-width:44px;min-height:44px}
  .filter-btn{min-height:40px}
  .task-item{min-height:48px}
  .kanban-card{padding:var(--space-3)}
  .at-cell-chip{padding:6px 12px}
  .color-chip{padding:4px 12px}
  .chat-channel,.chat-dm-item{padding:var(--space-3)}
  .notif-item{padding:var(--space-3) var(--space-4)}
  .cm-item{padding:var(--space-3)}
  .sp-option{padding:var(--space-3)}
  .pm-item{padding:var(--space-3)}
  .wc-channel-option{padding:var(--space-3)}
  .cs-option{padding:var(--space-3)}
  .sr-item{padding:var(--space-3)}

  /* Remove hover effects on touch */
  .stat-card:hover{transform:none}
  .team-card:hover{transform:none}
  .kanban-card:hover{transform:none;box-shadow:var(--shadow-sm)}
  .drive-card:hover{transform:none}
  .btn:hover{transform:none}
}

/* ══════════════════════════════════════════════════
   COLOR & CONTRAST AUDIT — Comprehensive fixes
   ══════════════════════════════════════════════════ */

/* ── Fix all muted text to pass WCAG AA (4.5:1) ── */

/* Timestamps / metadata — ensure minimum contrast */
.activity-time,.wc-msg-time,.kanban-date,.at-no-tags,
.table-footer,.cal-more,.drive-card-meta,.drive-li-size,
.drive-li-date,.dt-count,.sp-name,.wc-msg-name,
.weather-desc,.pp-chat-time,.sr-time{
  color:var(--text-m);
}

/* Labels / section headers — slightly brighter than muted */
.sidebar-label,.wc-header,.cm-label,.sr-section-header,
.col-editor-title,.notif-panel-tabs .notif-tab,
.macd-group-label,.dp-row span:first-child{
  color:var(--text-m);
}

/* ── Fix dark mode specific contrasts ── */
[data-theme="dark"] .sidebar-link{color:rgba(255,255,255,.65)}
[data-theme="dark"] .sidebar-link:hover{color:#fff}
[data-theme="dark"] .sidebar-label{color:rgba(255,255,255,.45)}
[data-theme="dark"] .task-meta{color:var(--neutral-400)}
[data-theme="dark"] .kanban-date{color:var(--neutral-400)}
[data-theme="dark"] .kanban-card-desc{color:var(--neutral-400)}
[data-theme="dark"] .table-footer{color:var(--neutral-400)}
[data-theme="dark"] .drive-card-meta{color:var(--neutral-400)}
[data-theme="dark"] .cal-more{color:var(--neutral-400)}
[data-theme="dark"] .activity-time{color:var(--neutral-400)}
[data-theme="dark"] .wc-msg-time{color:rgba(255,255,255,.35)}
[data-theme="dark"] .pm-role{color:var(--neutral-400)}
[data-theme="dark"] .sp-name{color:rgba(255,255,255,.8)}

/* ── Fix button states ── */

/* Primary button — ensure text contrast on all theme colors */
.btn-primary{
  position:relative;
}
.btn-primary:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}
.btn-outline:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}

/* Active/pressed states — clear visual feedback */
.btn:active{opacity:.9}
.sidebar-link:active{background:rgba(255,255,255,.12)}
.task-item:active{background:var(--surface-alt)}
.kanban-card:active{box-shadow:var(--shadow-sm);transform:scale(.98)}
.chat-channel:active,.chat-dm-item:active{background:var(--surface-alt)}
.notif-item:active{background:var(--surface-alt)}
.cm-item:active{background:var(--surface-alt)}
.pm-item:active{background:var(--surface-alt)}
.sp-option:active{background:var(--surface-alt)}
.cs-option:active{background:var(--surface-alt)}
.sr-item:active{background:var(--surface-alt)}
.drive-card:active{transform:scale(.97)}
.team-card:active{transform:scale(.98)}
.filter-btn:active{transform:scale(.97)}
.cal-cell:active{background:var(--surface-alt)}
.wc-filter:active{transform:scale(.95)}
.welcome-btn:active{transform:scale(.97)}
.process-node:active{transform:scale(.98)}

/* ── Fix focus states for keyboard navigation ── */
a:focus-visible,.sidebar-link:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-md);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,194,255,.12);
}
button:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}

/* ── Fix disabled states ── */
.btn:disabled,.btn[disabled]{
  opacity:.4;cursor:not-allowed;pointer-events:none;
}
input:disabled,select:disabled,textarea:disabled{
  opacity:.5;cursor:not-allowed;background:var(--surface-alt);
}

/* ── Fix selected/checked states ── */
.filter-btn.active{
  background:var(--surface);color:var(--text-h);
  box-shadow:var(--shadow-sm);
}
.chip-option.active{opacity:1}
.tag-chip.selected{font-weight:600}

/* ── Hero text on gradient — ensure readability ── */
.welcome-greeting{text-shadow:0 2px 20px rgba(0,0,0,.25)}
.welcome-summary{text-shadow:0 1px 8px rgba(0,0,0,.15)}
.welcome-briefing{text-shadow:0 1px 8px rgba(0,0,0,.1)}

/* ── Fix glass panels contrast ── */
.welcome-focus,.welcome-chat,.welcome-weather,.welcome-quote{
  border:1px solid rgba(255,255,255,.15);
}

/* ── Auth screen mobile fixes ── */
@media(max-width:480px){
  .auth-overlay{padding:var(--space-3)}
  .auth-card{padding:var(--space-5);border-radius:var(--radius-xl)}
  .auth-header h1{font-size:var(--text-xl)}
}

/* ── Reduce motion for accessibility ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}