/* ============================================================
   QVIC — Design System
   ============================================================ */
:root{
  --bg:#060508;
  --surface:#121016;
  --surface-2:#1B1620;
  --glass:rgba(255,246,255,0.055);
  --glass-2:rgba(255,246,255,0.10);
  --hover-bg:var(--glass-2);
  --border:rgba(255,246,255,0.11);
  --border-strong:rgba(255,246,255,0.21);
  /* Akzentfarbe — per JS umschaltbar (Settings). Dark bleibt Standard. */
  --accent:#A45C9E;
  --accent-soft:#D58AC4;
  --accent-rgb:164 92 158;
  --accent-glow:rgb(var(--accent-rgb) / 0.32);
  --accent-aura:rgb(var(--accent-rgb) / 0.12);
  --accent-ink:var(--accent-soft);
  --on-accent:#FFFFFF;
  --accent-button:#8C3E75;
  --accent-button-hover:#A84C83;
  --red:#D94B6A;
  --red-soft:#F07991;
  --red-glow:rgba(217,75,106,0.32);
  --red-aura:rgba(217,75,106,0.12);
  --txt:#FCFAFD;
  --txt-2:#DDD5E1;
  --txt-3:#B9AFBF;
  --stroke-dim:rgba(255,255,255,0.18);
  --ok:#2dd4a7;
  --warn:#D9A85F;
  --info:#5b8def;
  --purple:#C174B8;
  --r-card:14px;
  --r-input:11px;
  --r-chip:8px;
  --shadow:0 0 60px color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow-card:0 16px 42px rgba(0,0,0,0.30);
  --shadow-lift:0 20px 60px rgba(0,0,0,0.58);
  --inset-glow:inset 0 1px 0 rgba(255,255,255,0.09);
  --inset-glow-subtle:inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glass:0 32px 80px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.09), 0 0 60px color-mix(in srgb, var(--accent) 6%, transparent);
  --blur-sm:16px;
  --blur-md:28px;
  --blur-lg:44px;
  --sidebar-w:250px;
  --topbar-h:74px;
  /* Semantic theme surfaces */
  --selection-ring:#FFFFFF;
  --chrome-bg:rgba(8,7,11,0.97);
  --chrome-soft:linear-gradient(145deg,rgba(57,46,61,.98),rgba(28,22,33,.98));
  --chrome-strong:rgba(14,11,17,0.96);
  --card-bg:linear-gradient(160deg,rgba(20,17,24,.99),rgba(9,8,12,.99));
  --panel-bg:linear-gradient(160deg,rgba(27,22,31,.99),rgba(10,8,13,.99));
  --input-bg:rgba(7,6,10,0.84);
  --overlay-bg:rgba(5,3,7,0.76);
  --surface-highlight:rgba(255,255,255,0.09);
  --ambient-one:rgba(113,53,151,0.22);
  --ambient-two:rgba(170,39,84,0.16);
  --ambient-three:rgb(var(--accent-rgb) / 0.08);
  --scroll-thumb:rgba(255,246,255,0.14);
  --scroll-thumb-hover:rgba(255,246,255,0.24);
  /* Type scale */
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:14px;
  --text-base:15px;
  --text-md:15px;
  --text-lg:17px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-3xl:28px;
  --text-display:32px;
  /* Spacing scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

html[data-theme="light"]{
  --bg:#EAE6ED;
  --surface:#F8F5FA;
  --surface-2:#E5DEE9;
  --glass:rgba(255,255,255,0.52);
  --glass-2:rgba(255,255,255,0.80);
  --border:rgba(44,28,49,0.13);
  --border-strong:rgba(44,28,49,0.24);
  --txt:#211A25;
  --txt-2:#4D4352;
  --txt-3:#675C6C;
  --red:#A92F52;
  --ok:#087A5F;
  --warn:#945700;
  --info:#315FAE;
  --red-soft:#C00032;
  --purple:#7131B6;
  --stroke-dim:rgba(44,28,49,0.20);
  --selection-ring:#211A25;
  --chrome-bg:rgba(246,242,248,0.96);
  --chrome-soft:linear-gradient(145deg,#DDD5E0,#EEE9F0);
  --chrome-strong:rgba(250,247,251,0.98);
  --card-bg:linear-gradient(160deg,#FFFFFF,#F1ECF3);
  --panel-bg:linear-gradient(160deg,#FFFFFF,#F3EEF5);
  --input-bg:rgba(255,255,255,0.84);
  --overlay-bg:rgba(44,28,49,0.24);
  --surface-highlight:rgba(255,255,255,0.86);
  --ambient-one:rgba(151,85,160,0.16);
  --ambient-two:rgba(181,65,105,0.13);
  --ambient-three:rgb(var(--accent-rgb) / 0.10);
  --scroll-thumb:rgba(44,28,49,0.18);
  --scroll-thumb-hover:rgba(44,28,49,0.30);
  --accent-glow:rgb(var(--accent-rgb) / 0.22);
  --accent-aura:rgb(var(--accent-rgb) / 0.10);
  --accent-ink:color-mix(in srgb,var(--accent) 50%,#211A25);
  --shadow:0 18px 55px rgba(58,38,63,0.12);
  --shadow-card:0 14px 36px rgba(49,31,54,0.12);
  --shadow-lift:0 24px 65px rgba(49,31,54,0.18);
  --inset-glow:inset 0 1px 0 rgba(255,255,255,0.88);
  --inset-glow-subtle:inset 0 1px 0 rgba(255,255,255,0.72);
  --shadow-glass:0 32px 80px rgba(49,31,54,0.20), inset 0 1px 0 rgba(255,255,255,0.90), 0 0 60px var(--accent-aura);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:var(--text-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* rich ambient backdrop — gives glass surfaces something beautiful to blur */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 1500px 900px at 22% -8%, var(--ambient-one), transparent 55%),
    radial-gradient(ellipse 1100px 750px at 88% 110%, var(--ambient-two), transparent 58%),
    radial-gradient(ellipse 800px 500px at 65% 20%, var(--ambient-three), transparent 60%),
    radial-gradient(ellipse 900px 600px at 50% -12%, rgba(255,255,255,0.04), transparent 65%);
}
button{font-family:inherit;cursor:pointer;color:inherit;}
input,textarea,select{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);}
::selection{background:var(--accent-glow);}
[data-lucide]{width:18px;height:18px;stroke-width:1.8;}

/* ---------- Boot splash ---------- */
#boot{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 38% 40%,rgba(217,74,95,.18),transparent 27%),
    radial-gradient(circle at 63% 41%,rgba(240,122,62,.15),transparent 25%),
    radial-gradient(circle at 40% 67%,rgba(51,112,82,.12),transparent 27%),
    radial-gradient(circle at 64% 67%,rgba(225,184,74,.10),transparent 24%),
    var(--bg);
  transition:opacity .7s var(--ease),filter .7s var(--ease);
}
#boot::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(circle,rgba(255,255,255,.46) 1px,transparent 1px);
  background-size:22px 22px;mask-image:radial-gradient(circle at 50% 46%,#000,transparent 48%);
}
#boot::after{
  content:"";position:absolute;z-index:-1;width:min(680px,72vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 27% 36%,rgba(217,74,95,.26),transparent 27%),
    radial-gradient(circle at 72% 34%,rgba(240,122,62,.22),transparent 26%),
    radial-gradient(circle at 33% 73%,rgba(45,108,78,.18),transparent 28%),
    radial-gradient(circle at 70% 70%,rgba(225,184,74,.15),transparent 25%);
  filter:blur(55px);opacity:.72;animation:boot-aura-breathe 1.35s ease-out both;
}
#boot.hide{opacity:0;filter:blur(8px);pointer-events:none;}
.boot-emblem{
  position:relative;width:180px;height:180px;display:grid;place-items:center;
  transform-origin:50% 52%;animation:boot-emblem-forward 1.55s cubic-bezier(.18,.74,.22,1) both;
}
.boot-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.boot-trace-base path,.boot-trace-line,.boot-runner{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;}
.boot-trace-base path{stroke:rgba(255,255,255,.10);stroke-width:1.05;}
.boot-trace-line{
  stroke:url(#boot-trace-gradient);stroke-width:2;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(240,122,62,.48)) drop-shadow(0 0 13px rgba(217,74,95,.24));
}
.boot-trace-outer{animation:boot-trace-close 720ms cubic-bezier(.22,.72,.24,1) 90ms forwards;}
.boot-trace-inner{animation:boot-trace-close 620ms cubic-bezier(.22,.72,.24,1) 245ms forwards;}
.boot-trace-flare{animation:boot-trace-close 520ms cubic-bezier(.18,.78,.24,1) 430ms forwards;}
.boot-runner{
  stroke:rgba(255,255,255,.94);stroke-width:2.35;stroke-dasharray:.075 .925;stroke-dashoffset:0;opacity:0;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.62)) drop-shadow(0 0 12px rgba(217,74,95,.42));
  animation:boot-trace-run 1.18s linear 660ms infinite;
}
.boot-runner-inner{animation-duration:1.04s;animation-delay:740ms;}
.boot-runner-flare{animation-duration:.92s;animation-delay:830ms;}
.boot-mark{
  position:absolute;inset:13px;display:block;opacity:0;
  transform:scale(.82);animation:boot-logo-reveal 680ms cubic-bezier(.16,.78,.2,1) 420ms forwards;
}
.boot-mark::after{
  content:none;
}
.boot-mark img{
  position:absolute;left:50%;top:50%;width:170px;height:165px;max-width:none;object-fit:contain;
  transform:translate(-50%,-50%);filter:drop-shadow(0 10px 30px rgba(0,0,0,.52)) drop-shadow(0 2px 16px rgba(255,255,255,.13));
}
.boot-word{
  font-weight:650;font-size:24px;letter-spacing:7px;padding-left:7px;color:var(--txt);
  opacity:0;transform:translateY(7px);animation:boot-word-reveal 420ms var(--ease) 760ms forwards;
}
.boot-word span{color:var(--txt-2);font-weight:400;letter-spacing:2px;}
@keyframes boot-trace-close{to{stroke-dashoffset:0;}}
@keyframes boot-trace-run{0%{opacity:0;stroke-dashoffset:0;}12%{opacity:1;}88%{opacity:1;}100%{opacity:0;stroke-dashoffset:-1;}}
@keyframes boot-logo-reveal{to{opacity:1;transform:scale(1.025);}}
@keyframes boot-emblem-forward{from{transform:scale(.92) translateY(4px);}to{transform:scale(1.025) translateY(-2px);}}
@keyframes boot-word-reveal{to{opacity:1;transform:translateY(0);}}
@keyframes boot-sheen{from{transform:rotate(24deg) translateX(-48%);}to{transform:rotate(24deg) translateX(54%);}}
@keyframes boot-aura-breathe{from{opacity:0;transform:scale(.74);}to{opacity:.72;transform:scale(1);}}
@keyframes workspace-reveal{
  from{opacity:0;transform:scale(.992);filter:blur(6px);}
  to{opacity:1;transform:scale(1);filter:blur(0);}
}
.app.app-reveal{transform-origin:50% 52%;animation:workspace-reveal .72s var(--ease) both;}

/* ---------- App shell ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;height:100dvh;}
.main{display:flex;flex-direction:column;min-width:0;height:100vh;height:100dvh;}
.view{flex:1;overflow-y:auto;padding:var(--space-7) var(--space-8) 96px;scroll-behavior:smooth;}

/* ---------- Sidebar ---------- */
.sidebar{
  background:rgba(7,7,7,0.82);
  backdrop-filter:blur(var(--blur-md)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(140%);
  border-right:1px solid var(--border);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.04), 1px 0 0 rgba(0,0,0,0.7);
  display:flex;flex-direction:column;padding:20px 14px;gap:6px;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px;}
.brand-mark{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(130% 130% at 50% 0%, #1a1a1a, #0a0a0a);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.5);}
.brand-mark img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(255,255,255,0.12));
  transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);}
.brand:hover .brand-mark img,.brand-mark:hover img{transform:rotate(360deg);}
.brand-name{font-weight:600;font-size:17px;letter-spacing:1px;}
.brand-name span{color:var(--txt-2);font-weight:400;}
.nav-group-label{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--txt-3);
  padding:14px 12px 6px;font-weight:600;}
.nav-group-label.academy{margin-top:8px;padding-top:16px;border-top:1px solid var(--border);}
.nav-group-label.nav-section-divider{height:17px;font-size:0;line-height:0;padding-bottom:0;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-input);
  color:var(--txt-2);font-size:15px;font-weight:550;min-height:46px;transition:all .15s var(--ease);position:relative;border:1px solid transparent;}
.nav-item:hover{background:var(--glass);color:var(--txt);}
.nav-item.active{background:var(--glass-2);color:var(--txt);border-color:var(--border);}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);}
.nav-item .count{margin-left:auto;font-size:12px;background:var(--glass-2);border:1px solid var(--border);
  padding:1px 7px;border-radius:20px;color:var(--txt-2);}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid var(--border);}

/* Shared Tools & Assets */
.resource-page{max-width:1180px;margin:0 auto;}
.resource-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:26px;padding:4px 2px 20px;border-bottom:1px solid var(--border);}
.resource-hero h2{font-size:clamp(25px,2.4vw,38px);line-height:1.08;letter-spacing:-.035em;margin:8px 0 8px;max-width:700px;}
.resource-hero p{color:var(--txt-2);font-size:15px;line-height:1.65;margin:0;max-width:680px;}
.resource-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.resource-card{min-height:230px;padding:20px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-sm);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.resource-card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow);}
.resource-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.resource-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--accent-ink);background:var(--accent-aura);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));}
.resource-icon svg{width:20px;height:20px;}
.resource-icon.has-logo{overflow:hidden;background:var(--surface-soft);}
.resource-icon.has-logo img{display:block;width:100%;height:100%;object-fit:cover;}
.resource-meta{font-size:11px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:7px;}
.resource-card h3{font-size:18px;letter-spacing:-.02em;margin:0 0 8px;}
.resource-card p{font-size:13px;line-height:1.55;margin:0 0 18px;color:var(--txt-2);}
.resource-open{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;border-top:1px solid var(--border);font-size:13px;font-weight:750;color:var(--txt);}
.resource-open svg{width:16px;height:16px;color:var(--accent-ink);}
.resource-open.disabled{color:var(--txt-3);pointer-events:none;}
.resource-empty{grid-column:1/-1;min-height:300px;border:1px dashed var(--border-strong);border-radius:var(--r-card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:var(--surface-soft);}
.resource-empty>span{width:56px;height:56px;border-radius:16px;background:var(--accent-aura);display:grid;place-items:center;color:var(--accent-ink);margin-bottom:15px;}
.resource-empty strong{font-size:18px;margin-bottom:6px;}
.resource-empty p{color:var(--txt-2);font-size:13px;max-width:440px;margin:0 0 18px;}
.resource-editor{display:flex;flex-direction:column;gap:15px;}
.tool-logo-editor{display:grid;grid-template-columns:88px minmax(0,1fr);gap:15px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);}
.tool-logo-preview{width:88px;height:88px;overflow:hidden;border:1px dashed var(--border-strong);border-radius:18px;background:var(--accent-aura);color:var(--accent-ink);display:grid;place-items:center;}
.tool-logo-preview svg{width:27px;height:27px;}
.tool-logo-preview.has-logo{border-style:solid;background:var(--surface);}
.tool-logo-preview img{display:block;width:100%;height:100%;object-fit:cover;}
.tool-logo-copy{min-width:0;display:flex;flex-direction:column;gap:7px;}
.tool-logo-copy>strong{font-size:13.5px;}
.tool-logo-copy>span{color:var(--txt-2);font-size:11.5px;line-height:1.45;}
@media(max-width:700px){.resource-hero{align-items:stretch;flex-direction:column}.resource-hero .btn{width:100%;justify-content:center}.resource-grid{grid-template-columns:1fr}}
@media(max-width:520px){.tool-logo-editor{grid-template-columns:1fr}.tool-logo-preview{width:76px;height:76px}.tool-logo-copy .btn{flex:1;justify-content:center}}
.sidebar-user-name{font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-role{margin-top:2px;color:var(--txt-2);font-size:12.5px;}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;
  background:linear-gradient(135deg,var(--accent),#6D2447);color:#fff;flex:none;}
.avatar.coworker{background:linear-gradient(135deg,#5b8def,#2a3f8f);}

/* ---------- Topbar ---------- */
.topbar{height:var(--topbar-h);min-height:var(--topbar-h);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 var(--space-8);
  background:rgba(5,5,5,0.78);
  backdrop-filter:blur(var(--blur-md)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(150%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(0,0,0,0.5);
}
.page-title{font-size:var(--text-2xl);font-weight:650;letter-spacing:-.3px;}
.page-sub{font-size:14px;color:var(--txt-2);margin-top:2px;}
.topbar-spacer{flex:1;}
.search-trigger{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:999px;
  background:var(--input-bg);border:1px solid var(--border);color:var(--txt-2);min-width:230px;min-height:44px;font-size:14px;transition:all .15s var(--ease);}
.search-trigger:hover{border-color:var(--border-strong);background:var(--glass-2);}
.search-trigger .kbd{margin-left:auto;}
.kbd{font-size:var(--text-2xs);background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:2px 6px;color:var(--txt-2);font-weight:500;}
.icon-btn{width:42px;height:42px;border-radius:var(--r-input);background:var(--glass);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--txt-2);transition:all .15s var(--ease);position:relative;}
.icon-btn:hover{color:var(--txt);border-color:var(--border-strong);background:var(--glass-2);}
.topbar .icon-btn{border-radius:50%;}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);border:2px solid var(--bg);}

/* ---------- Buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-input);min-height:44px;
  border:1px solid var(--border-strong);background:var(--glass);color:var(--txt);font-weight:650;font-size:14px;transition:all .15s var(--ease);}
.btn:hover{border-color:var(--border-strong);background:var(--glass-2);transform:translateY(-1px);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 22px var(--accent-glow);}
.btn-primary:hover{background:var(--accent-soft);box-shadow:0 0 30px var(--accent-glow);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--txt-2);}
.btn-ghost:hover{color:var(--txt);background:var(--glass);}
.btn-danger{color:var(--red);border-color:rgba(232,0,58,0.3);}
.btn-danger:hover{background:rgba(232,0,58,0.12);}
.btn.sm{padding:8px 13px;min-height:38px;font-size:13px;}
.btn-icon{width:38px;height:38px;padding:0;justify-content:center;}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:default;pointer-events:none;box-shadow:none;transform:none;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;padding:4px 9px;border-radius:var(--r-chip);
  background:var(--glass-2);border:1px solid var(--border);color:var(--txt-2);white-space:nowrap;}
.chip .dot{width:7px;height:7px;border-radius:50%;}
.seg{display:inline-flex;background:var(--glass);border:1px solid var(--border);border-radius:var(--r-input);padding:3px;gap:2px;}
.seg button{padding:7px 13px;min-height:38px;border-radius:8px;border:none;background:transparent;color:var(--txt-2);font-size:13px;font-weight:550;transition:all .15s var(--ease);}
.seg button.active{background:var(--glass-2);color:var(--txt);box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;}
.seg button:hover:not(.active){color:var(--txt);}

/* ---------- Cards ---------- */
.card{background:linear-gradient(180deg,rgba(17,17,17,0.96),rgba(9,9,9,0.98));border:1px solid var(--border);border-radius:var(--r-card);
  padding:20px;position:relative;overflow:hidden;transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
  box-shadow:var(--inset-glow), 0 4px 28px rgba(0,0,0,0.50);}
.card:hover{border-color:var(--border-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 36px rgba(0,0,0,0.60);}
.card.lift:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.13), var(--shadow-lift);border-color:var(--border-strong);}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-head .btn-ghost{background:rgba(255,255,255,.035);border-color:var(--border);}
.card-title{font-weight:650;font-size:16px;letter-spacing:-.1px;display:flex;align-items:center;gap:9px;}
.card-title i{color:var(--txt-2);transition:color .15s var(--ease);}
.card:hover .card-title i{color:var(--txt);}
.muted{color:var(--txt-2);}
.muted-3{color:var(--txt-3);}
.tiny{font-size:13px;}
.divider{height:1px;background:var(--border);margin:14px 0;}

/* ---------- Grid helpers ---------- */
.grid{display:grid;gap:16px;}
.cols-auto{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}
.dash-grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr);}
.span-4{grid-column:span 4;}
.span-6{grid-column:span 6;}
.span-8{grid-column:span 8;}
.span-12{grid-column:span 12;}

/* page header */
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.page-actions .grow{flex:1;}

/* ---------- Progress / bars ---------- */
.progress{height:6px;border-radius:6px;background:var(--glass-2);overflow:hidden;}
.progress span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .4s var(--ease);}
.stat{display:flex;flex-direction:column;gap:3px;}
.stat .num{font-size:24px;font-weight:600;letter-spacing:.5px;}
.stat .lbl{font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.8px;}

/* ---------- Status colors ---------- */
.s-briefing{--c:#5b8def;} .s-inprogress{--c:#f5a524;} .s-review{--c:#a855f7;}
.s-live{--c:#2dd4a7;} .s-done{--c:#888;} .s-blocked{--c:#E8003A;}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:4px 10px;border-radius:20px;
  color:var(--c,var(--txt-2));background:color-mix(in srgb,var(--c,#888) 14%, transparent);
  border:1px solid color-mix(in srgb,var(--c,#888) 30%, transparent);}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--c,#888);}
.prio{font-size:11.5px;font-weight:700;letter-spacing:.5px;padding:3px 7px;border-radius:6px;text-transform:uppercase;}
.prio.high{color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);}
.prio.medium{color:var(--warn);background:rgba(245,165,36,0.14);}
.prio.low{color:var(--txt-2);background:var(--glass-2);}

/* ---------- Forms / Modal ---------- */
.overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0.74);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s var(--ease);}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(20,20,20,0.94),rgba(9,9,9,0.97));
  backdrop-filter:blur(var(--blur-lg)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(160%);
  border:1px solid var(--border-strong);border-radius:16px;
  box-shadow:var(--shadow-glass);
  animation:pop .22s var(--ease);}
.modal.wide{width:min(820px,100%);}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(18,18,18,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:2;}
.modal-head h3{margin:0;font-size:18px;font-weight:650;}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:14px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.confirm-dialog-body{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:13px;padding:3px 0;}
.confirm-dialog-body p{margin:0;color:var(--txt-2);font-size:14px;line-height:1.55;}
.confirm-dialog-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--red) 11%,transparent);border:1px solid color-mix(in srgb,var(--red) 22%,var(--border));color:var(--red-soft);}
.confirm-dialog-icon i{width:18px;height:18px;}
.confirm-dialog-body.signout .confirm-dialog-icon{background:var(--accent-aura);border-color:color-mix(in srgb,var(--accent) 30%,var(--border));color:var(--accent-ink);}
.confirm-dialog-actions{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:9px;}
.confirm-dialog-actions .btn{min-width:108px;justify-content:center;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;color:var(--txt-2);font-weight:600;}
.field .row{display:flex;gap:10px;}
.input,select.input,textarea.input{width:100%;min-height:44px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-input);
  padding:11px 13px;color:var(--txt);font-size:15px;transition:border-color .15s var(--ease);}
.input:focus,textarea.input:focus,select.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-aura);}
textarea.input{resize:vertical;min-height:78px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-row.three{grid-template-columns:1fr 1fr 1fr;}
.checkline{display:flex;align-items:center;gap:10px;font-size:13px;}
.seg.full{display:flex;}.seg.full button{flex:1;}
.colorpick{display:flex;gap:8px;flex-wrap:wrap;}
.colorpick button{width:26px;height:26px;border-radius:7px;border:2px solid transparent;}
.colorpick button.sel{border-color:#fff;transform:scale(1.1);}

/* ---------- Toast ---------- */
.toast-root{position:fixed;bottom:calc(20px + var(--safe-b));left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:10px;padding:11px 16px;font-size:13px;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lift);animation:toastin .25s var(--ease);min-width:200px;}
.toast i{color:var(--accent);}
.toast.ok i{color:var(--ok);}
@keyframes toastin{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- FAB ---------- */
.fab{position:fixed;right:26px;bottom:calc(26px + var(--safe-b));z-index:120;width:56px;height:56px;border-radius:50%;
  background:var(--accent);border:none;color:var(--on-accent);display:grid;place-items:center;box-shadow:0 8px 30px var(--accent-glow);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
.fab:hover{transform:scale(1.06) rotate(90deg);box-shadow:0 10px 40px var(--accent-glow);}
.fab i{width:24px;height:24px;}
.fab-menu{position:fixed;right:26px;bottom:calc(94px + var(--safe-b));z-index:120;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.fab-menu button{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border-strong);
  padding:9px 14px;border-radius:30px;font-size:13px;font-weight:500;box-shadow:var(--shadow-lift);animation:fabin .2s var(--ease) backwards;}
.fab-menu button:hover{border-color:var(--accent);color:#fff;}
.fab-menu button i{color:var(--accent);}
@keyframes fabin{from{opacity:0;transform:translateY(8px) scale(.9);}to{opacity:1;transform:none;}}

/* ---------- Command palette ---------- */
.palette-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.72);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
  display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;animation:fade .15s var(--ease);}
.palette{width:min(620px,100%);
  background:linear-gradient(180deg,rgba(20,20,20,0.95),rgba(9,9,9,0.97));
  backdrop-filter:blur(var(--blur-lg)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(160%);
  border:1px solid var(--border-strong);
  border-radius:14px;
  box-shadow:var(--shadow-glass);
  overflow:hidden;animation:pop .2s var(--ease);}
.palette-input{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);}
.palette-input i{color:var(--txt-2);}
.palette-input input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:16px;}
.palette-list{max-height:48vh;overflow-y:auto;padding:8px;}
.palette-section{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:1.2px;color:var(--txt-3);padding:10px 12px 5px;font-weight:600;}
.palette-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--txt-2);cursor:pointer;}
.palette-item .meta{margin-left:auto;font-size:12px;color:var(--txt-2);}
.palette-item i{color:var(--txt-2);}
.palette-item.active,.palette-item:hover{background:var(--glass-2);color:var(--txt);}
.palette-item.active i,.palette-item:hover i{color:var(--accent);}
.palette-empty{padding:30px;text-align:center;color:var(--txt-3);}

/* ---------- Notification panel ---------- */
.notif-panel{position:fixed;top:0;right:0;z-index:260;height:100vh;height:100dvh;width:min(380px,100%);
  background:linear-gradient(180deg,rgba(16,16,16,0.90),rgba(7,7,7,0.95));
  backdrop-filter:blur(var(--blur-md)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(140%);
  border-left:1px solid var(--border-strong);
  box-shadow:inset 1px 0 0 rgba(255,255,255,0.05), -28px 0 80px rgba(0,0,0,0.75);
  display:flex;flex-direction:column;animation:slidein .25s var(--ease);}
@keyframes slidein{from{transform:translateX(100%);}to{transform:none;}}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.notif-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;}
.notif-item{display:flex;gap:12px;padding:12px;border-radius:10px;background:var(--glass);border:1px solid var(--border);}
.notif-item.unread{border-color:color-mix(in srgb, var(--accent) 25%, transparent);background:color-mix(in srgb, var(--accent) 5%, transparent);}
.notif-icn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--glass-2);flex:none;color:var(--accent);}
.notif-item .t{font-weight:500;font-size:13px;}
.notif-item .d{font-size:12.5px;color:var(--txt-2);margin-top:2px;}
.notif-item .when{font-size:12px;color:var(--txt-2);margin-top:5px;}

/* ---------- Calendar ---------- */
.cal-wrap{display:grid;grid-template-columns:1fr;gap:18px;}
.cal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.cal-nav{display:flex;align-items:center;gap:6px;}
.cal-month-label{font-size:18px;font-weight:600;min-width:180px;}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px;}
.weekdays span{font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.8px;text-align:center;font-weight:650;}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.day-cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;min-height:104px;padding:8px;
  display:flex;flex-direction:column;gap:5px;transition:all .15s var(--ease);cursor:pointer;position:relative;overflow:hidden;}
.day-cell:hover{border-color:var(--border-strong);background:var(--surface-2);}
.day-cell.dim{opacity:.4;}
.day-cell.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset, 0 0 22px var(--accent-aura);}
.day-num{font-size:13px;font-weight:650;color:var(--txt-2);align-self:flex-start;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;}
.day-cell.today .day-num{background:var(--accent);color:var(--on-accent);}
.ev{font-size:12px;padding:4px 7px;border-radius:5px;display:flex;align-items:center;gap:6px;color:#fff;
  background:color-mix(in srgb,var(--ec,#5b8def) 30%, #111);border-left:3px solid var(--ec,#5b8def);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:transform .12s var(--ease);}
.ev:hover{transform:translateX(2px);}
.ev.urgent{animation:pulse 1.6s var(--ease) infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow);}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 0%, transparent);background:color-mix(in srgb,var(--ec,#E8003A) 50%,#111);}}
.ev-more{font-size:12px;color:var(--txt-2);padding-left:4px;}
.cal-dragover{outline:2px dashed var(--accent);outline-offset:-3px;}

/* week / day grid */
.time-grid{display:grid;grid-template-columns:56px 1fr;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.tg-head{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--border);}
.tg-head .cols{display:grid;}
.tg-head .col{padding:8px;text-align:center;font-size:12px;color:var(--txt-2);border-left:1px solid var(--border);}
.tg-head .col b{display:block;font-size:15px;color:var(--txt);font-weight:600;}
.tg-head .col.today b{color:var(--accent);}
.tg-body{position:relative;max-height:62vh;overflow-y:auto;display:grid;grid-template-columns:56px 1fr;}
.tg-hours{display:flex;flex-direction:column;}
.tg-hour{height:52px;font-size:11.5px;color:var(--txt-2);text-align:right;padding:2px 8px;border-top:1px solid var(--border);}
.tg-cols{position:relative;display:grid;}
.tg-col{border-left:1px solid var(--border);position:relative;}
.tg-col .hourline{height:52px;border-top:1px solid var(--border);}
.tg-event{position:absolute;left:3px;right:3px;min-height:24px;border-radius:6px;padding:5px 7px;font-size:12px;color:#fff;overflow:hidden;
  background:color-mix(in srgb,var(--ec,#5b8def) 35%,#111);border-left:3px solid var(--ec,#5b8def);cursor:pointer;}

/* agenda */
.agenda-day{margin-bottom:18px;}
.agenda-date{font-size:13px;font-weight:600;color:var(--txt-2);margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.agenda-date .pill{font-size:12px;color:var(--accent);}
.agenda-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-bottom:8px;border-left:3px solid var(--ec,#5b8def);cursor:pointer;transition:all .15s var(--ease);}
.agenda-row:hover{border-color:var(--border-strong);transform:translateX(3px);}
.agenda-time{font-size:13px;color:var(--txt-2);min-width:88px;font-weight:550;}

/* minical */
.minical{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;}
.minical-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:600;}
.minical-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.minical-grid span{text-align:center;font-size:11.5px;color:var(--txt-2);padding:3px 0;}
.minical-grid button{aspect-ratio:1;border:none;background:transparent;color:var(--txt-2);font-size:12.5px;border-radius:6px;}
.minical-grid button:hover{background:var(--glass-2);color:var(--txt);}
.minical-grid button.today{background:var(--accent);color:var(--on-accent);}
.minical-grid button.has{position:relative;}
.minical-grid button.has::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent);}
.minical-grid button.dim{opacity:.3;}

/* ---------- Kanban ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;padding-bottom:10px;align-items:start;}
.kcol{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;min-height:120px;display:flex;flex-direction:column;gap:10px;}
.kcol.dragover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 4%, transparent);}
.kcol-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:650;color:var(--txt-2);text-transform:uppercase;letter-spacing:.6px;}
.kcol-head .dot{width:8px;height:8px;border-radius:50%;}
.kcard{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px;cursor:grab;transition:all .15s var(--ease);}
.kcard:hover{border-color:var(--border-strong);transform:translateY(-2px);}
.kcard.dragging{opacity:.4;}
.kcard .ttl{font-weight:650;font-size:15px;margin-bottom:8px;}
.kcard .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}

/* ---------- Project / lead / campaign card bits ---------- */
.list-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);transition:all .15s var(--ease);}
.list-row:hover{border-color:var(--border-strong);background:var(--surface-2);}
.checkbox{position:relative;width:20px;height:20px;border-radius:6px;border:1.6px solid var(--border-strong);display:grid;place-items:center;flex:none;transition:all .15s var(--ease);}
.checkbox::after{content:"";position:absolute;inset:-11px;}
.checkbox.on{background:var(--accent);border-color:var(--accent);}
.checkbox i{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .15s;}
.checkbox.on i{opacity:1;}
.task-done .task-title{text-decoration:line-through;color:var(--txt-3);}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.kpi{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:13px 14px;}
.kpi .v{font-size:20px;font-weight:650;}
.kpi .k{font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.6px;}
.sparkline{display:flex;align-items:flex-end;gap:2px;height:30px;}
.sparkline span{flex:1;background:var(--accent);border-radius:2px 2px 0 0;opacity:.7;min-height:2px;}
.platform-badge{font-size:11.5px;font-weight:650;padding:3px 8px;border-radius:6px;letter-spacing:.4px;}
.p-meta{color:#5b8def;background:rgba(91,141,239,.14);}
.p-tiktok{color:#fff;background:rgba(255,255,255,.12);}
.p-youtube{color:#ff4d4d;background:rgba(255,77,77,.14);}
.p-google{color:#34a853;background:rgba(52,168,83,.14);}
.p-linkedin{color:#5b8def;background:rgba(91,141,239,.14);}

/* pipeline stats bar */
.pipe-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px;}
@media(max-width:780px){.pipe-stats{grid-template-columns:repeat(3,1fr);}}

/* drawer */
.drawer-overlay{position:fixed;inset:0;z-index:220;background:rgba(0,0,0,0.6);backdrop-filter:blur(5px);animation:fade .18s var(--ease);}
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(560px,100%);z-index:221;
  background:linear-gradient(180deg,rgba(16,16,16,0.90),rgba(7,7,7,0.95));
  backdrop-filter:blur(var(--blur-md)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(140%);
  border-left:1px solid var(--border-strong);
  box-shadow:inset 1px 0 0 rgba(255,255,255,0.05), -28px 0 80px rgba(0,0,0,0.75);
  display:flex;flex-direction:column;animation:slidein .25s var(--ease);}
.drawer-head{padding:20px;border-bottom:1px solid var(--border);}
.drawer-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:18px;}

/* empty state */
.empty{text-align:center;padding:60px 20px;color:var(--txt-3);}
.empty i{width:42px;height:42px;margin-bottom:14px;opacity:.5;}
.empty h4{color:var(--txt-2);font-weight:500;margin:0 0 6px;}
/* compact empty state for inside cards */
.card-empty{display:flex;align-items:center;gap:10px;padding:14px 2px;color:var(--txt-2);font-size:var(--text-base);}
.card-empty i{width:18px;height:18px;color:var(--txt-3);flex:none;}

/* timer */
.timer-pill{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-weight:600;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);padding:4px 10px;border-radius:20px;font-size:12px;}

/* skeleton */
.skel{background:linear-gradient(90deg,#141414 25%,#1c1c1c 37%,#141414 63%);background-size:400% 100%;
  animation:shimmer 1.3s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* page transition */
.view-anim{animation:viewin .22s var(--ease);}
@keyframes viewin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* segment / filter row */
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}

/* ---------- Responsive ---------- */
.bottomnav{display:none;}
@media(max-width:920px){
  :root{--sidebar-w:0px;}
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .span-4,.span-6,.span-8{grid-column:span 12;}
  .view{padding:20px 20px 110px;}
  .topbar{padding:0 16px;gap:10px;}
  .search-trigger{min-width:44px;width:44px;flex:0 0 44px;padding:0;justify-content:center;}
  .search-trigger .label,.search-trigger .kbd{display:none;}
  .pipe-stats{grid-template-columns:repeat(2,1fr);}
  .bottomnav{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:120;height:calc(76px + var(--safe-b));
    grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 10px var(--safe-b);
    background:rgba(5,5,5,0.90);
    backdrop-filter:blur(var(--blur-lg)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(160%);
    border-top:1px solid var(--border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 -16px 48px rgba(0,0,0,0.55);
    align-items:center;}
  .bn-item{min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--txt-3);font-size:11.5px;font-weight:600;padding:6px 2px;border:0;border-radius:14px;background:transparent;}
  .bn-item.active{color:var(--accent);}
  .bn-item i{width:23px;height:23px;}
  .bottomnav .bn-menu-trigger{
    width:60px;min-height:60px;height:60px;justify-self:center;align-self:start;transform:translateY(-16px);
    border-radius:50%;color:var(--on-accent);background:linear-gradient(145deg,var(--accent-button-hover),var(--accent-button));
    border:1px solid color-mix(in srgb,#fff 26%,var(--accent));
    box-shadow:0 0 0 6px var(--chrome-strong),0 13px 32px var(--accent-glow),inset 0 1px 1px rgba(255,255,255,.28);
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  }
  .bottomnav .bn-menu-trigger i{width:27px;height:27px;}
  .bottomnav .bn-menu-trigger.open{transform:translateY(-16px) rotate(90deg) scale(.96);box-shadow:0 0 0 6px var(--chrome-strong),0 9px 24px var(--accent-glow);}
  .bottomnav .bn-menu-trigger:active{transform:translateY(-16px) scale(.91);}
  .dash-grid{gap:12px;}
  .field-row,.field-row.three{grid-template-columns:1fr;}
  .day-cell{min-height:72px;padding:5px;}
  .day-cell .ev{font-size:9px;padding:2px 4px;}
  .kanban{grid-auto-columns:82%;}
  .modal{border-radius:16px 16px 0 0;align-self:flex-end;max-height:92vh;}
  .overlay{align-items:flex-end;padding:0;}
}
@media(max-width:480px){
  .page-title{font-size:17px;}
  .weekdays span{font-size:9px;}
  .cal-month-label{font-size:15px;min-width:120px;}
  .stat .num{font-size:20px;}
}

/* ---------- Dashboard ---------- */
.dash-greeting{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.greeting-text{font-size:32px;font-weight:650;line-height:1.15;letter-spacing:-.5px;}
.dash-greeting-sub{margin-top:7px;color:var(--txt-2);font-size:14px;line-height:1.5;}
.greeting-text .name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.18em;letter-spacing:0;color:var(--txt);}
/* elegant serif accent — echoes the brand display type */
.serif-accent{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:4px;}
.week-cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:default;transition:all .15s var(--ease);}
.week-cell[role="button"]{cursor:pointer;}
.week-cell[role="button"]:hover{border-color:var(--border-strong);background:var(--surface-2);}
.week-cell.today{border-color:var(--accent);box-shadow:0 0 18px var(--accent-aura);}
.wc-dow{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt-2);font-weight:650;margin-bottom:6px;}
.wc-day{font-size:18px;font-weight:700;line-height:1;margin-bottom:6px;}
.week-cell.today .wc-day{color:var(--accent);}
.wc-dots{display:flex;justify-content:center;gap:3px;min-height:6px;}
.wc-dot{width:5px;height:5px;border-radius:50%;}
.dash-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.dash-card{flex:none;}
.dash-section-label{font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--txt-2);font-weight:650;padding:12px 0 7px;}
.dash-event-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:transform .12s var(--ease);}
.dash-event-row:last-child{border-bottom:none;}
.dash-event-row:hover{transform:translateX(3px);}
.dash-event-dot{width:9px;height:9px;border-radius:50%;background:var(--ec,#5b8def);flex:none;}
.dash-row-title{font-size:15px;font-weight:600;color:var(--txt);line-height:1.4;}
.dash-row-meta{margin-top:2px;color:var(--txt-2);font-size:13px;}
.dash-task-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);}
.dash-task-row:last-child{border-bottom:none;}
.overdue-banner{background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--warn);}
.overdue-banner i{color:var(--red);width:15px;height:15px;}
.live-camp-list{display:flex;flex-direction:column;gap:6px;}
.live-camp-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .15s var(--ease);}
.live-camp-row:hover{border-color:var(--border-strong);transform:translateX(3px);}
.dash-campaign-metrics{display:flex;align-items:center;gap:10px;margin-top:6px;}
.activity-feed{display:flex;flex-direction:column;gap:8px;}
.activity-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);}
.activity-row:last-child{border-bottom:none;}
.activity-copy{font-size:13.5px;line-height:1.45;}
.activity-time{font-size:12.5px;color:var(--txt-2);white-space:nowrap;}
.quick-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.qs-item{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:17px 18px;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end;}
.qs-num{font-size:30px;font-weight:700;line-height:1;margin-bottom:8px;}
.qs-lbl{font-size:13px;color:var(--txt-2);font-weight:550;}
.dash-overview-card{margin-top:18px;}
.pipe-mini{display:flex;flex-direction:column;gap:6px;}
.pipe-mini-row{display:flex;align-items:center;gap:8px;padding:4px 0;}
.pipe-value-label{font-size:13px;color:var(--txt-2);}
.pipe-value{margin-top:2px;font-size:18px;font-weight:650;}
.health-list{display:flex;flex-direction:column;gap:8px;}
.health-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border);cursor:pointer;transition:all .15s var(--ease);}
.health-row:hover{border-color:var(--border-strong);}
.health-name{font-size:13.5px;font-weight:550;}
.health-due{font-size:12.5px;}
.health-ok{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ok);}
.health-ok i{width:16px;height:16px;}

/* ---------- Settings ---------- */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);}
.setting-row:last-child{border-bottom:none;}
.toggle{width:44px;height:24px;border-radius:12px;background:var(--glass-2);border:1px solid var(--border);position:relative;cursor:pointer;flex:none;transition:all .2s var(--ease);}
.toggle.on{background:var(--accent);border-color:var(--accent);}
.toggle span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.4);}
.toggle.on span{transform:translateX(20px);}

[hidden]{display:none !important;}
.flex{display:flex;}.items-center{align-items:center;}.gap-8{gap:8px;}.gap-12{gap:12px;}.wrap{flex-wrap:wrap;}
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mb-0{margin-bottom:0;}.grow{flex:1;}.right{margin-left:auto;}
.text-red{color:var(--red-soft);}.text-ok{color:var(--ok);}.text-warn{color:var(--warn);}

/* ============================================================
   Phase 5 — Polish, Accessibility & Performance
   ============================================================ */

/* ---------- Touch & interaction ---------- */
button,a,.checkbox,.toggle,.nav-item,.bn-item,.card.lift,.kcard,.day-cell,
.agenda-row,.list-row,.live-camp-row,.health-row,.week-cell,.activity-row,
.palette-item,.notif-item,.dash-event-row,.dash-task-row{
  touch-action:manipulation;
}

/* ---------- Focus-visible keyboard ring ---------- */
*:focus{outline:none;}
*:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.nav-item:focus-visible{outline-offset:-2px;}
.modal:focus-visible,.drawer:focus-visible{outline:none;}

/* ---------- Reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .view-anim{animation:none;}
  .boot-trace-line{stroke-dashoffset:0;}
  .boot-mark,.boot-word{opacity:1;transform:none;}
}

/* ---------- Card stagger entrance ---------- */
.grid > .card,.grid > .list-row,.cols-auto > .card{
  animation:cardin .28s var(--ease) backwards;
}
.grid > *:nth-child(1),.cols-auto > *:nth-child(1){animation-delay:0ms;}
.grid > *:nth-child(2),.cols-auto > *:nth-child(2){animation-delay:40ms;}
.grid > *:nth-child(3),.cols-auto > *:nth-child(3){animation-delay:80ms;}
.grid > *:nth-child(4),.cols-auto > *:nth-child(4){animation-delay:120ms;}
.grid > *:nth-child(5),.cols-auto > *:nth-child(5){animation-delay:160ms;}
.grid > *:nth-child(6),.cols-auto > *:nth-child(6){animation-delay:200ms;}
.grid > *:nth-child(n+7),.cols-auto > *:nth-child(n+7){animation-delay:240ms;}
@keyframes cardin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- Card top-border accent on hover ---------- */
.card.lift{overflow:visible;}
.card.lift::after{
  content:"";position:absolute;top:-1px;left:12px;right:12px;height:1px;
  border-radius:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);
  opacity:0;transition:opacity .2s var(--ease);
}
.card.lift:hover::after{opacity:1;}

/* ---------- Nav active indicator pulse ---------- */
.nav-item.active::before{
  animation:navpulse 2.4s var(--ease) infinite;
}
@keyframes navpulse{
  0%,100%{box-shadow:0 0 12px var(--accent-glow);}
  50%{box-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);}
}

/* ---------- Bottom nav active animated dot ---------- */
.bn-item.active i{filter:drop-shadow(0 0 6px var(--accent));}

/* ---------- Progress bar shimmer on hover ---------- */
.card:hover .progress span{
  background:linear-gradient(90deg,var(--accent),var(--accent-soft),var(--accent));
  background-size:200% 100%;
  animation:progressShimmer 1.6s linear infinite;
}
@keyframes progressShimmer{0%{background-position:0% 0;}100%{background-position:200% 0;}}

/* ---------- Improved toggle spring ---------- */
.toggle span{transition:transform .22s cubic-bezier(.34,1.56,.64,1);}

/* ---------- Checkbox spring ---------- */
.checkbox{transition:background .15s var(--ease),border-color .15s var(--ease),transform .12s cubic-bezier(.34,1.56,.64,1);}
.checkbox:active{transform:scale(.88);}
.checkbox.on{animation:checkpop .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes checkpop{0%{transform:scale(.8);}100%{transform:scale(1);}}

/* ---------- FAB visible only on mobile ---------- */
@media(min-width:921px){
  .fab,.fab-menu{display:none !important;}
}

/* ---------- Button press feedback ---------- */
.btn:active{transform:scale(.97) translateY(0) !important;}
.btn-primary:active{box-shadow:0 0 16px var(--accent-glow);}

/* ---------- Search trigger wider on desktop ---------- */
@media(min-width:1200px){
  .search-trigger{min-width:280px;}
}

/* ---------- Improved scrollbar for sidebar ---------- */
.sidebar::-webkit-scrollbar,.palette-list::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,.notif-list::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-track,.palette-list::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.07);border-radius:4px;}

/* ---------- KPI card value scale ---------- */
.kpi .v{
  font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}

/* ---------- Pipeline stats grid mobile fix ---------- */
@media(max-width:580px){
  .pipe-stats{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Week strip Today glow ---------- */
.week-cell.today{
  box-shadow:0 0 0 1px var(--accent) inset, 0 0 24px var(--accent-aura), 0 4px 16px rgba(0,0,0,.4);
}

/* ---------- Overdue banner icon pulse ---------- */
.overdue-banner i{animation:alertpulse 1.8s ease-in-out infinite;}
@keyframes alertpulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ---------- Sparkline hover highlight ---------- */
.sparkline span:hover{opacity:1;background:var(--accent-soft);}


/* ---------- Notification panel slide animation fix ---------- */
@keyframes slidein{from{transform:translateX(100%);}to{transform:translateX(0);}}

/* ---------- Agenda row left accent ---------- */
.agenda-row{
  border-left-width:3px;
  transition:transform .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.agenda-row:hover{
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  border-color:var(--ec, var(--border-strong));
}

/* ---------- Chip hover ---------- */
.chip{transition:border-color .14s var(--ease),background .14s var(--ease);}

/* ---------- Topbar blur fix for scroll ---------- */
.topbar{
  -webkit-backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:50;
}

/* ---------- Input smooth focus glow ---------- */
.input:focus,textarea.input:focus,select.input:focus{
  box-shadow:0 0 0 3px var(--accent-aura), 0 0 0 1px var(--accent);
  border-color:var(--accent);
}

/* ---------- Dashboard greeting no-emoji wave ---------- */
.greeting-wave{
  display:inline-block;
  animation:wave 2.2s ease-in-out 0.6s 1;
  transform-origin:70% 70%;
}
@keyframes wave{
  0%,60%,100%{transform:rotate(0deg);}
  10%,30%{transform:rotate(20deg);}
  20%{transform:rotate(-8deg);}
  40%{transform:rotate(12deg);}
  50%{transform:rotate(-4deg);}
}

/* ---------- Kanban card drag lift ---------- */
.kcard:active{cursor:grabbing;transform:scale(1.02) rotate(.5deg);box-shadow:0 16px 40px rgba(0,0,0,.6);}

/* ---------- Modal pop animation refine ---------- */
@keyframes pop{
  from{opacity:0;transform:translateY(18px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* ---------- Minimap calendar day dot glow ---------- */
.minical-grid button.today{box-shadow:0 0 12px var(--accent-glow);}
.minical-grid button.has::after{box-shadow:0 0 4px var(--accent-glow);}

/* ---------- Empty state icon subtle float ---------- */
.empty i{animation:float 3.2s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* ---------- Cursor polish ---------- */
.checkbox{cursor:pointer;}
a{cursor:pointer;}

/* ---------- Scroll behaviour ---------- */
.view{scroll-behavior:smooth;}
html{scroll-behavior:smooth;}

/* ---------- Selection colour matches brand ---------- */
::selection{background:var(--accent-glow);color:var(--txt);}

/* ---------- Skeleton loader improvements ---------- */
.skel{
  background:linear-gradient(90deg,#131313 25%,#1e1e1e 50%,#131313 75%);
  background-size:300% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
}

/* ---------- No-tap highlight on Android ---------- */
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* ============================================================
   Auth overlay — glassmorphic shared-workspace sign-in
   ============================================================ */
#auth-root{display:none;}
#auth-root.show{display:block;}
.auth-overlay{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(ellipse 1400px 800px at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 56%),
    radial-gradient(ellipse 900px 700px at 85% 110%, rgba(90,20,170,0.06), transparent 58%),
    rgba(4,4,4,0.82);
  backdrop-filter:blur(36px) saturate(160%);
  -webkit-backdrop-filter:blur(36px) saturate(160%);
  animation:authFade .4s var(--ease) both;
}
@keyframes authFade{from{opacity:0;}to{opacity:1;}}
.auth-card{
  position:relative;width:100%;max-width:380px;padding:34px 30px 26px;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg, rgba(22,22,22,0.90), rgba(9,9,9,0.95));
  backdrop-filter:blur(52px) saturate(170%);-webkit-backdrop-filter:blur(52px) saturate(170%);
  border:1px solid var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), inset 1px 0 0 rgba(255,255,255,0.04), 0 48px 100px rgba(0,0,0,0.85), 0 0 90px color-mix(in srgb, var(--accent) 14%, transparent);
  animation:authRise .5s var(--ease) both;
}
@keyframes authRise{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.auth-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 50% -20%, rgba(255,255,255,0.05), transparent 70%);
}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
.auth-mark{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(130% 130% at 50% 0%, #1a1a1a, #0a0a0a);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.5);
}
.auth-mark img{width:26px;height:26px;object-fit:contain;}
.auth-word{font-weight:600;font-size:18px;letter-spacing:3px;}
.auth-word span{color:var(--txt-2);font-weight:400;letter-spacing:1px;}
.auth-title{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;margin:0 0 4px;}
.auth-sub{color:var(--txt-2);font-size:13px;margin:0 0 22px;}
.auth-form{display:flex;flex-direction:column;}
.auth-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--txt-2);margin:0 0 8px;}
.auth-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:18px;
  padding:4px;border-radius:12px;background:var(--glass);border:1px solid var(--border);
}
.auth-seg-btn{
  padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--txt-2);
  font-size:13px;font-weight:500;transition:all .2s var(--ease);
}
.auth-seg-btn:hover{color:var(--txt);}
.auth-seg-btn.active{
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  color:var(--txt);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 10px rgba(0,0,0,0.4);
}
.auth-input{
  width:100%;padding:13px 14px;border-radius:var(--r-input);
  background:var(--surface-2);border:1px solid var(--border);color:var(--txt);
  font-size:15px;letter-spacing:2px;outline:none;transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-input::placeholder{letter-spacing:4px;color:var(--txt-3);}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-aura);}
.auth-error{margin-top:10px;color:var(--red-soft);font-size:12.5px;font-weight:500;}
.auth-btn{
  margin-top:18px;width:100%;padding:13px;border:0;border-radius:var(--r-input);
  background:linear-gradient(180deg, var(--accent-soft), var(--accent));color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.3px;
  box-shadow:0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  transition:transform .15s var(--ease), filter .2s var(--ease), opacity .2s var(--ease);
}
.auth-btn:hover{filter:brightness(1.06);}
.auth-btn:active{transform:translateY(1px);}
.auth-btn:disabled{opacity:.6;cursor:default;filter:none;}
.auth-foot{margin-top:20px;text-align:center;font-size:11.5px;color:var(--txt-3);line-height:1.5;}
.auth-card.shake{animation:authShake .42s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes authShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-5px);}
  40%,60%{transform:translateX(5px);}
}
@media (max-width:480px){
  .auth-card{max-width:none;border-radius:18px;padding:30px 22px 22px;}
}

/* ============================================================
   Calendar — private event styles
   ============================================================ */
.ev.ev-private{opacity:.75;font-style:italic;}
.ev-visibility-group{display:flex;flex-direction:column;gap:8px;padding:4px 0;}

/* ============================================================
   Canvas — list page
   ============================================================ */
.canvas-page{padding-bottom:40px;}
.canvas-tab-bar{display:flex;gap:4px;margin:16px 0 20px;border-bottom:1px solid var(--border);padding-bottom:0;}
.canvas-tab{padding:8px 18px;font-size:13px;font-weight:500;color:var(--txt-3);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);border-radius:0;}
.canvas-tab:hover{color:var(--txt-2);}
.canvas-tab.active{color:var(--txt);border-bottom-color:var(--accent);}
.chip-team{background:rgba(91,141,239,0.15);color:#6eb5ff;border-color:rgba(91,141,239,0.3);}
.canvas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:4px;}
.canvas-card{cursor:pointer;padding:0;overflow:hidden;display:flex;flex-direction:column;}
.canvas-card-thumb{width:100%;height:160px;background:var(--surface-2);border-bottom:1px solid var(--border);overflow:hidden;flex:none;position:relative;}
.canvas-card-thumb img{width:100%;height:100%;object-fit:cover;}
.canvas-card-thumb-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--txt-3);}
.canvas-card-thumb-empty [data-lucide]{width:40px;height:40px;}
.canvas-card-info{padding:14px 16px 12px;flex:1;}
.canvas-card-title{font-weight:600;font-size:14px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.canvas-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.canvas-card-menu{position:absolute;top:10px;right:10px;background:var(--surface);border-color:var(--border-strong);}
.canvas-card{position:relative;}
.canvas-ctx-menu{min-width:150px;padding:6px;display:flex;flex-direction:column;gap:2px;}
.canvas-ctx-menu button{text-align:left;padding:8px 12px;border:none;background:transparent;border-radius:7px;color:var(--txt-2);font-size:13px;font-weight:500;transition:all .12s var(--ease);}
.canvas-ctx-menu button:hover{background:var(--glass-2);color:var(--txt);}

/* ============================================================
   Canvas — editor layout
   ============================================================ */
.canvas-editor{
  display:flex;flex-direction:column;height:100%;
  padding:0;overflow:hidden;
}
/* Override view padding for editor */
.view:has(.canvas-editor){padding:0;}
.canvas-body{display:flex;flex:1;min-height:0;position:relative;}

/* ---- Top bar ---- */
.canvas-top-bar{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--border);background:var(--surface);
  flex:none;flex-wrap:wrap;
}
.canvas-top-title{
  font-weight:600;font-size:15px;padding:4px 8px;border-radius:6px;
  outline:none;min-width:80px;max-width:280px;
  transition:background .15s var(--ease);
}
.canvas-top-title:hover,[contenteditable="true"].canvas-top-title:focus{background:var(--glass-2);}

/* ---- Left toolbar ---- */
.canvas-toolbar{
  width:56px;flex:none;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:12px 8px;border-right:1px solid var(--border);
  background:var(--surface);z-index:10;overflow-y:auto;
}
.canvas-tool-btn{width:38px;height:38px;}
.canvas-tool-btn.active{background:var(--glass-2);border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px var(--accent-aura);}
.canvas-draw-opts{flex-direction:column;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border);}

/* ---- Right props panel ---- */
.canvas-props{
  width:240px;flex:none;border-left:1px solid var(--border);
  background:var(--surface);overflow-y:auto;z-index:10;
  display:flex;flex-direction:column;
}
.canvas-props-inner{padding:16px;display:flex;flex-direction:column;gap:12px;}
.canvas-props-title{font-weight:600;font-size:13px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;}

/* ---- Viewport & world ---- */
.canvas-viewport{
  flex:1;overflow:hidden;position:relative;background:#ffffff;
  background-image:radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size:24px 24px;cursor:default;
  outline:none;
}
.canvas-world{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  width:1px;height:1px;overflow:visible;
}

/* ---- Elements ---- */
.canvas-element{
  position:absolute;
  user-select:none;
  box-sizing:border-box;
  transition:box-shadow .1s var(--ease);
}
.canvas-element.selected{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-aura);
}
.canvas-element-locked{cursor:not-allowed;opacity:.8;}
.canvas-frame{border:1px dashed rgba(255,255,255,0.2);border-radius:12px;}
.canvas-frame-label{
  position:absolute;top:-24px;left:0;font-size:12px;
  font-weight:600;color:var(--txt-2);white-space:nowrap;
}

/* ---- Resize handles ---- */
.canvas-resize-handles{position:absolute;inset:0;pointer-events:none;}
.canvas-handle{
  position:absolute;width:10px;height:10px;
  background:var(--accent);border:2px solid #fff;
  border-radius:3px;pointer-events:all;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  z-index:100;
}
.canvas-handle-nw{top:-5px;left:-5px;cursor:nw-resize;}
.canvas-handle-n{top:-5px;left:50%;transform:translateX(-50%);cursor:n-resize;}
.canvas-handle-ne{top:-5px;right:-5px;cursor:ne-resize;}
.canvas-handle-e{top:50%;right:-5px;transform:translateY(-50%);cursor:e-resize;}
.canvas-handle-se{bottom:-5px;right:-5px;cursor:se-resize;}
.canvas-handle-s{bottom:-5px;left:50%;transform:translateX(-50%);cursor:s-resize;}
.canvas-handle-sw{bottom:-5px;left:-5px;cursor:sw-resize;}
.canvas-handle-w{top:50%;left:-5px;transform:translateY(-50%);cursor:w-resize;}

/* ---- Sticky note ---- */
.canvas-sticky{
  min-width:180px;max-width:280px;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.35), inset 0 -4px 0 rgba(0,0,0,0.15);
}
.canvas-sticky .canvas-el-text{min-height:100px;}

/* ---- Draw overlay ---- */
.canvas-draw-overlay{
  position:absolute;inset:0;pointer-events:all;
  cursor:crosshair;z-index:20;
}

/* ---- Arrows SVG ---- */
.canvas-arrows-svg{position:absolute;inset:0;overflow:visible;pointer-events:none;}

/* ---- Minimap ---- */
.canvas-minimap{
  position:absolute;bottom:16px;right:16px;z-index:50;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:8px;box-shadow:var(--shadow-lift);
}
.canvas-minimap canvas{display:block;border-radius:4px;}

/* ---- Flex helpers used in editor ---- */
.flex{display:flex;}
.items-center{align-items:center;}
.gap-10{gap:10px;}
.grow{flex:1;}

/* ============================================================
   Responsive — canvas collapses toolbar on mobile
   ============================================================ */
@media (max-width:768px){
  .canvas-toolbar{width:46px;}
  .canvas-props{width:200px;}
  .canvas-top-title{max-width:140px;}
}

/* ============================================================
   MOBILE POLISH — phone-ready fixes (≤920px)
   ============================================================ */

/* --- Step 1: Prevent iOS auto-zoom on focused inputs (requires ≥16px) --- */
@media(max-width:920px){
  .input,select.input,textarea.input,.auth-input{font-size:16px !important;}
}

/* --- Step 2: Bottom nav "More" slide-up sheet --- */
.bn-more-overlay{position:fixed;inset:0;z-index:114;display:none;background:rgba(0,0,0,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.bn-more-overlay.visible{display:block;animation:bnOverlayIn .18s var(--ease);}
@keyframes bnOverlayIn{from{opacity:0;}to{opacity:1;}}
.bn-more-sheet{
  position:fixed;bottom:calc(92px + var(--safe-b));left:50%;right:auto;z-index:125;
  width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 124px);overflow:auto;
  background:rgba(12,12,12,0.94);
  backdrop-filter:blur(var(--blur-md)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(150%);
  border:1px solid var(--border-strong);border-radius:22px;padding:12px;
  box-shadow:var(--inset-glow),0 24px 72px rgba(0,0,0,.72);
  transform:translate(-50%,22px) scale(.96);opacity:0;
  transition:transform .26s var(--ease),opacity .2s var(--ease);
  display:none;
}
.bn-more-sheet.visible{display:block;}
.bn-more-sheet.open{transform:translate(-50%,0) scale(1);opacity:1;}
.bn-more-head{display:flex;align-items:center;justify-content:space-between;padding:4px 5px 11px;color:var(--txt);font-size:13px;font-weight:750;letter-spacing:.02em;}
.bn-more-head span:last-child{color:var(--txt-3);font-size:11px;font-weight:600;}
.bn-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.bn-more-item{
  position:relative;display:flex;min-width:0;min-height:78px;align-items:center;justify-content:center;flex-direction:column;gap:7px;
  padding:11px 7px;color:var(--txt-2);font-size:12.5px;font-weight:650;text-align:center;
  cursor:pointer;border:1px solid var(--border);border-radius:15px;background:var(--glass);transition:all .14s var(--ease);text-decoration:none;
}
.bn-more-item:active{background:var(--glass-2);transform:scale(.96);}
.bn-more-item.active{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 46%,var(--border));background:var(--accent-aura);}
.bn-more-item i{width:24px;height:24px;flex:none;}
.bn-more-badge{
  position:absolute;top:7px;right:7px;background:var(--accent);color:var(--on-accent);
  font-size:10px;font-weight:750;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;
}

/* --- Step 4: Canvas — move toolbar to top row, props panel slides in --- */
@media(max-width:920px){
  .canvas-toolbar{
    width:100% !important;flex-direction:row !important;
    height:52px !important;padding:0 6px !important;
    border-right:none !important;border-bottom:1px solid var(--border) !important;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    gap:2px !important;align-items:center;
  }
  .canvas-toolbar::-webkit-scrollbar{display:none;}
  .canvas-draw-opts{
    flex-direction:row !important;border-top:none !important;
    border-left:1px solid var(--border);padding:0 0 0 6px !important;
    gap:2px !important;align-items:center;
  }
  .canvas-body{position:relative;}
  .canvas-props{
    position:absolute !important;right:0 !important;top:0 !important;bottom:0 !important;
    width:260px !important;
    transform:translateX(100%);
    transition:transform .25s var(--ease);
    box-shadow:-8px 0 32px rgba(0,0,0,.5) !important;
    display:flex !important;
  }
  .canvas-props.mobile-open{transform:translateX(0);}
  .canvas-props-toggle{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:28px;height:52px;background:var(--surface);
    border:1px solid var(--border);border-right:none;
    border-radius:8px 0 0 8px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:21;
    transition:right .25s var(--ease);
  }
  .canvas-props-toggle.panel-open{right:260px;}
  .canvas-props-toggle i{width:16px;height:16px;color:var(--txt-2);}
}
@media(min-width:921px){.canvas-props-toggle{display:none;}}

/* --- Step 5: Touch targets ≥ 44px --- */
@media(max-width:920px){
  .btn.sm{min-height:44px;padding:0 14px;font-size:13px;}
  .chip{min-height:36px;padding:5px 12px;font-size:12px;}
  .ev{min-height:30px;padding:4px 8px;font-size:10px !important;}
  .ev-more{font-size:11px;padding:2px 4px;min-height:28px;display:flex;align-items:center;}
  .day-num{width:32px;height:32px;font-size:13px;}
  .icon-btn{width:44px;height:44px;}
}

/* --- Step 6: Dashboard week strip — horizontal scroll so cells stay ≥44px --- */
@media(max-width:920px){
  .week-strip{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;gap:6px;
    padding:0 2px 6px;scrollbar-width:none;margin-bottom:8px;
  }
  .week-strip::-webkit-scrollbar{display:none;}
  .week-cell{flex:none;width:52px;scroll-snap-align:center;padding:8px 4px;}
  .wc-dow{letter-spacing:.4px;}
}

/* --- Step 8: Modal keyboard avoidance & swipe handle --- */
@media(max-width:920px){
  .overlay{height:100dvh;}
  .modal{max-height:min(92dvh,92vh);}
  .modal-body{overscroll-behavior:contain;}
  /* Swipe-down handle on modals */
  .modal::before{
    content:"";display:block;width:36px;height:4px;
    background:var(--border-strong);border-radius:2px;
    margin:4px auto 8px;flex:none;
  }
  /* Swipe handle on notification panel */
  .notif-panel::before{
    content:"";display:block;width:36px;height:4px;
    background:var(--border-strong);border-radius:2px;
    margin:10px auto 2px;cursor:grab;flex:none;
  }
}

/* ============================================================
   Micro-interactions & Animation Polish
   ============================================================ */

/* --- Primary button — shimmer sweep on hover --- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(108deg,transparent 28%,rgba(255,255,255,0.18) 50%,transparent 72%);
  transform:translateX(-130%);pointer-events:none;
}
.btn-primary:hover::after{
  transform:translateX(140%);
  transition:transform .52s ease;
}
.btn-primary:not(:hover)::after{transition:none;}

/* --- All buttons — spring press --- */
.btn{transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .14s cubic-bezier(.34,1.56,.64,1);}
.btn:active{transform:scale(.94) translateY(1px) !important;transition-duration:.07s !important;}

/* --- Ghost button — subtle glow on hover --- */
.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07),0 2px 12px rgba(0,0,0,.3);}

/* --- Icon buttons — springy scale --- */
.icon-btn{transition:all .2s cubic-bezier(.34,1.56,.64,1);}
.icon-btn:hover{transform:scale(1.1);}
.icon-btn:active{transform:scale(.88) !important;transition-duration:.06s !important;}

/* --- FAB — ring pulse on hover --- */
.fab{overflow:visible;}
.fab::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  opacity:0;transform:scale(.82);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.fab:hover::after{opacity:1;transform:scale(1);}
.fab:active{transform:scale(.91) rotate(90deg) !important;}

/* --- Nav item press --- */
.nav-item:active{transform:scale(.97) !important;transition-duration:.07s !important;}

/* --- Bottom nav active indicator pill --- */
.bn-item{position:relative;transition:color .2s cubic-bezier(.34,1.56,.64,1);}
.bn-item:not(.bn-menu-trigger).active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2.5px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
  animation:bnpill .26s var(--ease);
}
@keyframes bnpill{from{width:0;opacity:0;}to{width:22px;opacity:1;}}
.bn-item.active i{transform:scale(1.14);transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.bn-menu-trigger.active i,.bn-menu-trigger.open i{transform:none;}

/* --- Mobile list row / card touch press --- */
@media(max-width:920px){
  .list-row:active,.agenda-row:active,.health-row:active,.live-camp-row:active{
    transform:scale(.985) !important;background:var(--glass-2) !important;
    transition:transform .06s var(--ease) !important;
  }
  .kcard:not(.dragging):active{transform:scale(.96) !important;}
  .day-cell:active{transform:scale(.96) !important;background:var(--surface-2) !important;}
  .week-cell:active{transform:scale(.94) !important;}
}

/* --- Seg button spring --- */
.seg button{transition:all .15s cubic-bezier(.34,1.56,.64,1);}
.seg button:active{transform:scale(.92) !important;transition-duration:.07s !important;}

/* --- Chip press --- */
.chip{transition:border-color .14s var(--ease),background .14s var(--ease),transform .12s cubic-bezier(.34,1.56,.64,1);}
.chip:active{transform:scale(.92) !important;}

/* --- Checkbox click pop (reinforce with spring) --- */
.checkbox:active{transform:scale(.82) !important;}

/* --- Plus Jakarta Sans ligature & feature settings --- */
body{font-feature-settings:'ss01','cv01';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* ============================================================
   Black Glassmorphism — Content Surface Layer
   Luminous 1px top-edge on all surface elements.
   ============================================================ */

/* Kanban columns + cards */
.kcol{
  background:rgba(11,11,11,0.90);
  box-shadow:var(--inset-glow-subtle), 0 4px 24px rgba(0,0,0,0.50);
}
.kcard{
  background:rgba(17,17,17,0.95);
  box-shadow:var(--inset-glow-subtle), 0 2px 14px rgba(0,0,0,0.45);
}

/* List rows */
.list-row{
  background:rgba(13,13,13,0.90);
  box-shadow:var(--inset-glow-subtle);
}

/* Dashboard KPI + quick-stat cells */
.kpi{
  background:rgba(5,5,5,0.92);
  box-shadow:var(--inset-glow-subtle), 0 2px 16px rgba(0,0,0,0.45);
}
.qs-item{
  background:rgba(5,5,5,0.92);
  box-shadow:var(--inset-glow-subtle);
}

/* Calendar day cells */
.day-cell{
  background:rgba(11,11,11,0.90);
  box-shadow:var(--inset-glow-subtle), 0 2px 10px rgba(0,0,0,0.38);
}
.day-cell.today{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px var(--accent) inset, 0 0 32px var(--accent-aura);
}

/* Week strip cells */
.week-cell{
  background:rgba(11,11,11,0.90);
  box-shadow:var(--inset-glow-subtle);
}
.week-cell.today{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px var(--accent) inset, 0 0 28px var(--accent-aura), 0 4px 20px rgba(0,0,0,0.5);
}

/* Minical */
.minical{
  background:rgba(11,11,11,0.92);
  box-shadow:var(--inset-glow-subtle), 0 4px 28px rgba(0,0,0,0.50);
}

/* Agenda rows */
.agenda-row{
  background:rgba(13,13,13,0.90);
  box-shadow:var(--inset-glow-subtle);
}

/* Live campaign rows + health rows */
.live-camp-row,.health-row{
  background:rgba(11,11,11,0.90);
  box-shadow:var(--inset-glow-subtle);
}

/* Input fields — deeper black for contrast against glass surfaces */
.input,select.input,textarea.input{
  background:rgba(3,3,3,0.90);
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.50);
}

/* Canvas props panel */
.canvas-props{
  background:rgba(11,11,11,0.92);
  box-shadow:inset 1px 0 0 rgba(255,255,255,0.04);
}
.canvas-toolbar{
  background:rgba(11,11,11,0.92);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.04);
}
.canvas-top-bar{
  background:rgba(10,10,10,0.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}

/* Drawer overlay stronger blur */
.drawer-overlay{backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);}

/* Navigation active item — sharper glow */
.nav-item.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Toast — glass treatment */
.toast{
  background:rgba(20,20,20,0.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--inset-glow-subtle), var(--shadow-lift);
}

/* Notif items */
.notif-item{
  background:rgba(13,13,13,0.88);
  box-shadow:var(--inset-glow-subtle);
}
.notif-item.unread{
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Skeleton — darker base for glass context */
.skel{
  background:linear-gradient(90deg,rgba(14,14,14,0.95) 25%,rgba(24,24,24,0.95) 50%,rgba(14,14,14,0.95) 75%);
  background-size:300% 100%;
}

/* FAB — stronger glow punch */
.fab{box-shadow:0 10px 40px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.6);}
.fab:hover{box-shadow:0 14px 50px var(--accent-glow), 0 6px 20px rgba(0,0,0,0.7);}

/* Primary button — deeper glow */
.btn-primary{box-shadow:0 0 28px var(--accent-glow);}
.btn-primary:hover{box-shadow:0 0 40px var(--accent-glow);}

/* Isolation context for compositing */
.sidebar,.topbar,.modal,.palette,.drawer,.notif-panel,.auth-card{isolation:isolate;}


/* ============================================================
   Board (Trello-Stil) — Firmen-Boards mit Listen & Karten
   ============================================================ */
.board-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.board-tile{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--border);cursor:pointer;min-height:110px;
  transition:border-color .15s var(--ease), transform .15s var(--ease);}
.board-tile:hover{border-color:var(--accent-glow);transform:translateY(-2px);}
.board-tile .bt-name{font-weight:600;font-size:var(--text-lg);}
.board-tile.new{align-items:center;justify-content:center;color:var(--txt-2);border-style:dashed;}
.board-wrap{display:flex;gap:14px;overflow-x:auto;align-items:flex-start;padding-bottom:20px;min-height:60vh;}
.board-list{flex:0 0 280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  display:flex;flex-direction:column;max-height:calc(100dvh - 220px);}
.board-list-head{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:600;font-size:var(--text-base);}
.board-list-head .count{margin-left:auto;color:var(--txt-3);font-size:var(--text-xs);}
.board-cards{display:flex;flex-direction:column;gap:8px;padding:4px 10px 10px;overflow-y:auto;min-height:24px;}
.board-card{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  cursor:pointer;font-size:var(--text-base);transition:border-color .12s var(--ease);}
.board-card:hover{border-color:var(--border-strong);}
.board-card .bc-meta{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;align-items:center;color:var(--txt-2);font-size:var(--text-xs);}
.board-card.dragging{opacity:0.4;}
.board-list.dragover{border-color:var(--accent);}
.board-add{padding:8px 10px 12px;}
@media(max-width:920px){.board-list{flex-basis:82%;}}

/* ============================================================
   Chat — Team- & Kunden-Kanäle
   ============================================================ */
.chat-layout{display:grid;grid-template-columns:230px 1fr;gap:16px;height:calc(100dvh - 190px);min-height:380px;}
.chat-channels{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;}
.chat-ch{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;cursor:pointer;
  color:var(--txt-2);font-size:var(--text-base);font-weight:500;}
.chat-ch:hover{background:var(--glass);color:var(--txt);}
.chat-ch.active{background:var(--accent-aura);color:var(--accent-soft);}
.chat-main{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:78%;padding:9px 13px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--border);font-size:var(--text-base);line-height:1.45;}
.chat-msg .cm-head{display:flex;gap:8px;align-items:baseline;margin-bottom:2px;}
.chat-msg .cm-name{font-size:var(--text-xs);font-weight:600;color:var(--accent-soft);}
.chat-msg .cm-time{font-size:var(--text-2xs);color:var(--txt-3);}
.chat-msg.mine{align-self:flex-end;background:var(--accent-aura);border-color:var(--accent-glow);}
.chat-msg.mine .cm-name{color:var(--txt-2);}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);}
.chat-input input{flex:1;}
@media(max-width:920px){
  .chat-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100dvh - 240px);}
  .chat-channels{flex-direction:row;overflow-x:auto;overflow-y:hidden;}
  .chat-ch{white-space:nowrap;}
}

/* ============================================================
   Akquise — Stage-Board
   ============================================================ */
.acq-board{display:flex;gap:14px;overflow-x:auto;align-items:flex-start;padding-bottom:20px;}
.acq-col{flex:0 0 265px;display:flex;flex-direction:column;gap:8px;}
.acq-col-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:var(--text-sm);
  text-transform:uppercase;letter-spacing:0.06em;}
.acq-col-head .dot{width:8px;height:8px;border-radius:50%;background:var(--c);}
.acq-col-head .sum{margin-left:auto;color:var(--txt-3);font-weight:500;font-size:var(--text-xs);text-transform:none;letter-spacing:0;}
.acq-col.dragover .acq-col-head{border-color:var(--accent);}
.acq-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;
  transition:border-color .12s var(--ease), transform .12s var(--ease);}
.acq-card:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.acq-card .ac-company{font-weight:600;font-size:var(--text-md);}
.acq-card .ac-contact{color:var(--txt-2);font-size:var(--text-sm);margin-top:2px;}
.acq-card .ac-foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--text-xs);color:var(--txt-2);}
.acq-card .ac-value{font-weight:650;color:var(--txt);}
.acq-card .ac-next{margin-top:8px;font-size:var(--text-xs);color:var(--warn);display:flex;gap:6px;align-items:center;}
.acq-card.dragging{opacity:0.4;}
@media(max-width:920px){.acq-col{flex-basis:78%;}}

/* ============================================================
   QVIC Theme System — Plum Noir + cool Light Mode
   This final layer intentionally wins over the legacy black-only
   surface rules above while keeping every existing layout module.
   ============================================================ */
html[data-theme="dark"]{color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}

/* Theme controls */
.theme-toggle{flex:none;}
.theme-toggle .theme-moon{display:none;}
html[data-theme="light"] .theme-toggle .theme-sun{display:none;}
html[data-theme="light"] .theme-toggle .theme-moon{display:block;}

/* Unified desktop frame: black navigation, plum workspace, inset dark tiles. */
@media(min-width:921px){
  .app{
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
    width:calc(100vw - 32px);height:calc(100dvh - 32px);
    margin:16px auto;padding:0;gap:0;
    border:1px solid var(--border-strong);border-radius:24px;overflow:hidden;
    background:var(--chrome-soft);box-shadow:0 28px 90px rgba(0,0,0,.55);
  }
  .sidebar{
    background:var(--chrome-bg);padding:24px 16px;
    border:0;border-right:1px solid var(--border);border-radius:0;box-shadow:none;
  }
  .main{
    height:100%;min-height:0;background:var(--chrome-soft);
    border:0;border-radius:0;overflow:hidden;box-shadow:none;
  }
  .topbar{height:74px;min-height:74px;padding-inline:28px;}
  .view{padding:26px 28px 72px;}
}

.sidebar{
  background:var(--chrome-bg);
  box-shadow:var(--inset-glow),0 22px 64px rgba(0,0,0,.26);
}
.topbar{
  background:color-mix(in srgb,var(--chrome-strong) 42%,transparent);
  box-shadow:inset 0 -1px 0 var(--border);
}
.brand-mark,.auth-mark{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
  border-color:var(--border-strong);
}
.nav-item.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 48%,transparent),color-mix(in srgb,var(--accent) 16%,transparent));
  border-color:color-mix(in srgb,var(--accent-soft) 26%,var(--border));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.nav-item.active::before{display:none;}

/* Shared surfaces */
.card{
  background:var(--card-bg);border-color:var(--border);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 26px rgba(0,0,0,.20);
}
.card:hover{
  border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 32px rgba(0,0,0,.26);
}
html[data-theme="light"] .card:hover{box-shadow:var(--inset-glow),0 16px 36px rgba(49,31,54,.12);}

.kcol,.kcard,.list-row,.kpi,.qs-item,.day-cell,.week-cell,.minical,
.agenda-row,.live-camp-row,.health-row,.notif-item,.toast,.board-tile,
.board-list,.board-card,.chat-channels,.chat-main,.chat-msg,
.acq-col-head,.acq-card{
  background:var(--card-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.14);
}
.kcol,.board-tile,.board-list,.chat-channels,.chat-main{border-radius:14px;}
.kcard,.board-card,.acq-card,.live-camp-row,.health-row,.week-cell,.qs-item,.kpi{border-radius:11px;}
.kcard,.board-card,.chat-msg{background:var(--surface-2);}
.kpi,.qs-item{background:var(--input-bg);}

.input,select.input,textarea.input,
.settings-theme-card input,.settings-theme-card select{
  background:var(--input-bg);color:var(--txt);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12);
}
.input::placeholder,textarea.input::placeholder{color:var(--txt-3);}

.overlay,.palette-overlay,.drawer-overlay{background:var(--overlay-bg);}
.modal,.palette,.drawer,.notif-panel{
  background:var(--panel-bg);border-color:var(--border-strong);
  box-shadow:var(--shadow-glass);
}
.modal-head,.modal-foot,.bn-more-sheet,.bottomnav,
.canvas-props,.canvas-toolbar,.canvas-top-bar{
  background:var(--chrome-strong);
}
.drawer,.notif-panel{box-shadow:-28px 0 80px rgba(0,0,0,.30),var(--inset-glow-subtle);}
.skel{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:300% 100%;
}
.fab,.btn-primary,.auth-btn{color:var(--on-accent);}
.checkbox.on i,.bn-more-badge{color:var(--on-accent);}
.colorpick button.sel{border-color:var(--selection-ring);}
.btn-primary{
  background:var(--accent-button);
  border-color:var(--accent-button);
}
.btn-primary:hover{background:var(--accent-button-hover);border-color:var(--accent-button-hover);}
.auth-btn{
  background:linear-gradient(180deg,var(--accent-button-hover),var(--accent-button));
}
.fab-menu button:hover{color:var(--txt);}
.avatar{background:var(--accent);color:var(--on-accent);}
.avatar.coworker{color:#FFFFFF;}
.sidebar::-webkit-scrollbar-thumb{background:var(--scroll-thumb);}

html[data-theme="light"] .prio.high,
html[data-theme="light"] .toast i,
html[data-theme="light"] .fab-menu button i,
html[data-theme="light"] .palette-item.active i,
html[data-theme="light"] .palette-item:hover i,
html[data-theme="light"] .notif-icn,
html[data-theme="light"] .tg-head .col.today b,
html[data-theme="light"] .agenda-date .pill,
html[data-theme="light"] .timer-pill,
html[data-theme="light"] .bn-item.active,
html[data-theme="light"] .week-cell.today .wc-day,
html[data-theme="light"] .bn-more-item.active,
html[data-theme="light"] .canvas-tool-btn.active,
html[data-theme="light"] .chat-ch.active,
html[data-theme="light"] .chat-msg .cm-name,
html[data-theme="light"] .auth-eyebrow{color:var(--accent-ink);}
html[data-theme="light"] .p-tiktok{color:var(--txt);background:rgba(44,28,49,.08);}
html[data-theme="light"] .p-meta,
html[data-theme="light"] .p-linkedin{color:#27538E;}
html[data-theme="light"] .p-youtube{color:#B92929;}
html[data-theme="light"] .p-google{color:#25743B;}

/* Settings: explicit Dark / Light choice */
.theme-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.theme-choice{
  display:flex;align-items:center;gap:13px;width:100%;padding:12px;
  border:1px solid var(--border);border-radius:14px;background:var(--input-bg);
  color:var(--txt);text-align:left;transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.theme-choice:hover{transform:translateY(-1px);border-color:var(--border-strong);}
.theme-choice.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-aura);}
.theme-choice > span:last-child{display:flex;flex-direction:column;min-width:0;}
.theme-choice strong{font-size:14px;font-weight:650;}
.theme-choice small{font-size:12.5px;color:var(--txt-2);margin-top:2px;}
.theme-choice-preview{
  width:54px;height:42px;border-radius:10px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.theme-choice-preview-dark{background:linear-gradient(145deg,#34273A,#08060A);color:#D58AC4;}
.theme-choice-preview-light{background:linear-gradient(145deg,#FFFFFF,#E5DEE9);color:#8C3E75;border-color:rgba(44,28,49,.13);}

/* Login: editorial agency panel + translucent operational UI */
.auth-overlay{
  padding:clamp(18px,3vw,42px);overflow:auto;
  background:
    radial-gradient(ellipse 920px 680px at 4% -8%,rgba(179,42,67,.19),transparent 60%),
    radial-gradient(ellipse 760px 620px at 101% 4%,rgba(224,100,44,.13),transparent 58%),
    radial-gradient(ellipse 780px 650px at 0% 108%,rgba(40,91,69,.12),transparent 60%),
    radial-gradient(ellipse 700px 560px at 100% 108%,rgba(194,151,41,.10),transparent 58%),
    var(--bg);
}
.auth-theme-toggle{position:fixed;z-index:4;top:22px;right:22px;background:var(--chrome-bg);backdrop-filter:blur(18px);}
.auth-shell{
  position:relative;width:min(1080px,100%);min-height:min(660px,calc(100dvh - 84px));
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  border:1px solid var(--border-strong);border-radius:30px;overflow:hidden;
  background:var(--chrome-bg);box-shadow:var(--shadow-glass);
  animation:authRise .5s var(--ease) both;
}
.auth-story{
  position:relative;isolation:isolate;overflow:hidden;padding:46px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  color:#FCF7FD;
  background:
    radial-gradient(circle at 78% 18%,rgba(240,122,62,.25),transparent 29%),
    radial-gradient(circle at 20% 88%,rgba(48,105,77,.19),transparent 32%),
    radial-gradient(circle at 88% 82%,rgba(225,184,74,.14),transparent 29%),
    linear-gradient(145deg,rgba(7,5,7,.99) 4%,rgba(52,22,28,.97) 52%,rgba(129,32,51,.94) 116%);
}
.auth-story::before{
  content:"";position:absolute;z-index:-1;inset:auto -16% -34% 18%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(221,90,55,.35),rgba(119,37,49,.13) 42%,transparent 68%);
  filter:blur(2px);
}
.auth-story-grid{
  position:absolute;z-index:-1;inset:0;opacity:.20;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.65) 1px,transparent 1px);
  background-size:17px 17px;
  mask-image:linear-gradient(135deg,#000,transparent 60%);
}
.auth-story-top{display:flex;align-items:center;gap:11px;position:relative;z-index:1;}
.auth-story-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.08);}
.auth-story-mark img{width:26px;height:26px;object-fit:contain;}
.auth-story-word{font-weight:700;letter-spacing:2.4px;font-size:16px;}
.auth-story-word span{font-weight:400;opacity:.72;letter-spacing:1px;}
.auth-story-status{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:1.2px;color:rgba(255,255,255,.76);}
.auth-story-status > span{width:7px;height:7px;border-radius:50%;background:#63E7BD;box-shadow:0 0 14px rgba(99,231,189,.72);}
.auth-story-copy{position:relative;z-index:1;max-width:520px;}
.auth-kicker,.auth-eyebrow{font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--accent-soft);margin-bottom:12px;}
.auth-story .auth-kicker{color:#F1C873;}
.auth-story-copy h2{font-family:var(--serif);font-size:clamp(42px,5vw,66px);font-weight:400;line-height:.96;letter-spacing:-1.1px;margin:0 0 22px;max-width:520px;}
.auth-story-copy p{font-size:15px;line-height:1.65;color:rgba(252,247,253,.76);max-width:455px;margin:0;}
.auth-story-features{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1;}
.auth-story-features span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(10,5,12,.28);font-size:12px;font-weight:600;letter-spacing:.25px;backdrop-filter:blur(10px);}
.auth-story-features i{width:14px;height:14px;}

.auth-card{
  position:relative;width:100%;max-width:none;padding:clamp(38px,5vw,64px);
  display:flex;flex-direction:column;justify-content:center;overflow:visible;
  border:0;border-left:1px solid var(--border);border-radius:0;
  background:var(--chrome-soft);box-shadow:none;backdrop-filter:blur(34px);
  animation:none;
}
.auth-card::before{background:radial-gradient(520px 270px at 100% 0,var(--ambient-three),transparent 72%);}
.auth-brand{position:relative;margin:0 0 32px;}
.auth-brand-text{gap:0;}
.auth-brand-copy{display:flex;flex-direction:column;line-height:1.2;}
.auth-brand-copy strong{font-size:15px;letter-spacing:1.6px;}
.auth-brand-copy small{font-size:12px;color:var(--txt-2);margin-top:3px;}
.auth-title{position:relative;font-size:clamp(35px,4vw,48px);letter-spacing:-.6px;margin:0 0 8px;}
.auth-sub{position:relative;font-size:14px;margin:0 0 28px;}
.auth-form{position:relative;gap:0;}
.auth-label{margin:0 0 7px;font-size:12px;letter-spacing:1px;}
.auth-input-wrap{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 17px;padding:0 13px;
  border:1px solid var(--border);border-radius:13px;background:var(--input-bg);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12);transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.auth-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-aura);}
.auth-input-wrap > i{width:17px;height:17px;color:var(--txt-3);flex:none;}
.auth-input{
  min-width:0;padding:13px 0;background:transparent;border:0;border-radius:0;
  font-size:15px;letter-spacing:0;box-shadow:none;
}
.auth-input::placeholder{letter-spacing:0;color:var(--txt-3);}
.auth-input:focus{box-shadow:none;border-color:transparent;}
.auth-pass-toggle{width:34px;height:34px;flex:none;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--txt-3);}
.auth-pass-toggle:hover{background:var(--glass);color:var(--txt);}
.auth-pass-toggle i{width:17px;height:17px;grid-area:1/1;}
.auth-eye-off{display:none;}
.auth-pass-toggle[aria-pressed="true"] .auth-eye{display:none;}
.auth-pass-toggle[aria-pressed="true"] .auth-eye-off{display:block;}
.auth-error{margin:-6px 0 4px;padding:9px 11px;border:1px solid rgba(232,0,58,.24);border-radius:10px;background:rgba(232,0,58,.08);}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin-top:10px;padding:13px 16px;border-radius:12px;font-size:15px;font-weight:700;}
.auth-btn i{width:17px;height:17px;transition:transform .18s var(--ease);}
.auth-btn:hover i{transform:translateX(3px);}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:19px;text-align:left;}
.auth-foot i{width:14px;height:14px;color:var(--ok);}

@media(max-width:920px){
  .auth-overlay{padding:16px;}
  .auth-theme-toggle{top:18px;right:18px;}
  .auth-shell{display:block;width:min(430px,100%);min-height:0;border-radius:24px;}
  .auth-story{display:none;}
  .auth-card{padding:38px 26px 28px;border-left:0;min-height:min(600px,calc(100dvh - 32px));}
  .auth-brand{margin-bottom:28px;}
  .auth-title{font-size:38px;}
}

@media(max-width:920px){
  .app{padding:0;gap:0;}
  .main{border:0;border-radius:0;background:transparent;}
  .bottomnav{background:var(--chrome-strong);box-shadow:var(--inset-glow-subtle),0 -16px 48px rgba(0,0,0,.22);}
  .bn-more-sheet{box-shadow:var(--inset-glow),0 -24px 64px rgba(0,0,0,.28);}
}

@media(max-width:560px){
  .theme-choice-row{grid-template-columns:1fr;}
}

/* ============================================================
   Collaboration polish — clearer type, modern controls, denser boards
   ============================================================ */
.page-kicker{
  margin-bottom:7px;color:var(--accent-ink);font-size:12px;font-weight:750;
  letter-spacing:1.55px;text-transform:uppercase;
}
.page-lead{color:var(--txt);font-size:clamp(18px,2vw,23px);font-weight:650;letter-spacing:-.35px;}
.page-lead-sub{margin-top:5px;color:var(--txt-2);font-size:14px;line-height:1.55;}
.field-help{color:var(--txt-2);font-size:13px;line-height:1.5;}
.page-actions > .grow > .tiny.muted{font-size:14px;line-height:1.5;color:var(--txt-2);}

/* Buttons use a soft glass bevel and pill geometry throughout the app. */
.btn{
  min-height:44px;padding:10px 18px;border-radius:12px;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border-color:var(--border-strong);font-size:14px;font-weight:650;letter-spacing:-.08px;
  box-shadow:inset 0 1px 0 var(--surface-highlight),0 7px 18px rgba(0,0,0,.12);
}
.btn:hover{
  background:linear-gradient(180deg,color-mix(in srgb,var(--glass-2) 82%,white),var(--glass-2));
  box-shadow:inset 0 1px 0 var(--surface-highlight),0 11px 24px rgba(0,0,0,.18);
}
.btn.sm{min-height:38px;padding:8px 13px;font-size:13px;}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-button-hover),var(--accent-button));
  border-color:color-mix(in srgb,var(--accent-button) 78%,white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 28px var(--accent-glow);
}
.btn-primary:hover{
  background:linear-gradient(180deg,var(--accent-button-hover),var(--accent-button));
  border-color:color-mix(in srgb,var(--accent-button-hover) 74%,white);
  filter:brightness(1.05);transform:translateY(-2px);
}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;}
.btn-ghost:hover{background:var(--glass-2);box-shadow:inset 0 1px 0 var(--surface-highlight);}
.btn-danger{color:var(--red-soft);}
.icon-btn{
  border-radius:13px;background:linear-gradient(180deg,var(--glass-2),var(--glass));
  box-shadow:inset 0 1px 0 var(--surface-highlight),0 7px 18px rgba(0,0,0,.10);
}
html[data-theme="light"] .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 18px rgba(49,31,54,.10);}

/* Board picker + list states */
.board-picker-intro{margin:0 0 22px;padding:4px 2px;max-width:720px;}
.board-picker{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.board-tile{
  min-height:150px;padding:21px;border-radius:14px;justify-content:flex-end;
  background:var(--card-bg);box-shadow:var(--inset-glow),0 14px 34px rgba(0,0,0,.16);
}
.board-tile:hover{transform:translateY(-4px);box-shadow:var(--inset-glow),0 20px 44px rgba(0,0,0,.22);}
.board-tile .bt-name{font-size:18px;font-weight:700;letter-spacing:-.22px;}
.board-tile-meta{color:var(--txt-2);font-size:14px;font-weight:550;}
.board-tile.new{justify-content:center;gap:10px;font-size:14px;font-weight:650;}
.board-tile.new i{width:26px;height:26px;color:var(--accent-ink);}
.board-wrap{gap:12px;}
.board-list{flex-basis:276px;border-radius:14px;max-height:calc(100dvh - 205px);}
.board-list-head{padding:13px 13px 10px;font-size:14px;}
.board-list-head .count{color:var(--txt-2);font-size:12px;}
.board-list-head .icon-btn{width:36px;height:36px;border-radius:10px;}
.board-cards{gap:7px;padding:4px 8px 8px;min-height:108px;}
.board-card{
  padding:12px 12px 11px;border-radius:11px;background:color-mix(in srgb,var(--surface-2) 97%,white);
  box-shadow:var(--inset-glow-subtle),0 6px 16px rgba(0,0,0,.13);
}
.board-card:hover{transform:translateY(-2px);box-shadow:var(--inset-glow),0 12px 24px rgba(0,0,0,.18);}
.bc-title{font-size:15px;font-weight:650;line-height:1.4;color:var(--txt);}
.bc-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;color:var(--txt-2);font-size:13px;line-height:1.45;}
.board-card .bc-meta{gap:5px;margin-top:9px;color:var(--txt-2);font-size:12.5px;}
.board-card .bc-meta .chip{padding:2px 7px;}
.board-card-labels{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
.board-card-labels span,.board-label-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--label) 19%,transparent);border:1px solid color-mix(in srgb,var(--label) 42%,transparent);
  color:var(--txt);font-size:11.5px;font-weight:700;line-height:1.2;
}
.board-card-people{display:flex;align-items:center;margin-top:9px;padding-top:8px;border-top:1px solid var(--border);}
.board-mini-avatar,.board-member-avatar,.board-comment-avatar{
  display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--accent-button-hover),var(--accent-button));
  color:var(--on-accent);font-weight:750;box-shadow:0 4px 12px var(--accent-aura);
}
.board-mini-avatar img,.board-member-avatar img,.board-comment-avatar img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;}
.board-mini-avatar{width:25px;height:25px;margin-right:-5px;border:2px solid var(--surface);font-size:9px;}
.board-legacy-assignee{display:inline-flex;align-items:center;gap:6px;color:var(--txt-2);font-size:11.5px;}
.board-legacy-assignee i{width:13px;height:13px;}
.board-empty,.board-zero-lists{
  min-height:100px;border:1px dashed var(--border-strong);border-radius:14px;background:var(--glass);
  color:var(--txt-2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;text-align:center;
  font-size:13px;padding:14px;
}
.board-empty i,.board-zero-lists i{width:20px;height:20px;margin-bottom:3px;color:var(--accent-ink);}
.board-empty strong,.board-zero-lists strong{color:var(--txt);font-size:13px;}
.board-zero-lists{width:min(420px,100%);min-height:180px;margin:auto;}
.board-add{display:flex;justify-content:center;padding:8px 8px 11px;}
.board-add-project{
  width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--txt-2);transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);
}
.board-add-project:hover{border-color:var(--border-strong);background:var(--accent-aura);color:var(--accent-ink);transform:translateY(-1px);}
.board-add-project:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.board-add-project svg{width:21px;height:21px;}

/* Board card editor: real team assignments, labels and card discussion */
.board-card-editor{display:flex;flex-direction:column;gap:17px;}
.board-member-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.board-member-option{
  min-height:54px;padding:8px 10px;border:1px solid var(--border);border-radius:14px;background:var(--input-bg);
  display:flex;align-items:center;gap:10px;text-align:left;color:var(--txt);transition:all .16s var(--ease);
}
.board-member-option:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.board-member-option.active{border-color:var(--accent);background:var(--accent-aura);box-shadow:0 0 0 3px var(--accent-aura);}
.board-member-option.locked{opacity:.66;cursor:not-allowed;}
.board-member-option.locked:hover{border-color:var(--border);transform:none;}
.board-member-avatar{width:32px;height:32px;flex:none;font-size:10px;}
.board-member-option > span:nth-child(2){display:flex;flex-direction:column;min-width:0;}
.board-member-option strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-member-option small{color:var(--txt-2);font-size:12px;}
.board-member-option > i,.board-member-option > svg{width:16px;height:16px;margin-left:auto;color:var(--accent-ink);opacity:0;}
.board-member-option.active > i,.board-member-option.active > svg{opacity:1;}
.board-field-empty{color:var(--txt-2);font-size:12px;}
.board-label-draft{min-height:32px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.board-label-chip{font-size:11.5px;}
.board-label-chip button{position:relative;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--txt-2);display:grid;place-items:center;}
.board-label-chip button::after{content:"";position:absolute;inset:-8px;}
.board-label-chip button i{width:12px;height:12px;}
.board-label-create{display:grid;grid-template-columns:minmax(120px,1fr) auto auto;gap:8px;align-items:center;}
.board-label-colors{display:flex;gap:7px;flex-wrap:wrap;}
.board-label-colors button{width:36px;height:36px;padding:0;border-radius:50%;border:2px solid transparent;background:var(--label);box-shadow:0 0 0 1px var(--border);}
.board-label-colors button[aria-pressed="true"]{border-color:var(--selection-ring);transform:scale(1.08);}
.board-comments-section{padding-top:16px;border-top:1px solid var(--border);}
.board-comments-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.board-comments-head > span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;}
.board-comments-head i{width:17px;height:17px;color:var(--accent-ink);}
.board-comments-head small{font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.8px;}
.board-comment-list{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.board-comment{display:grid;grid-template-columns:32px 1fr;gap:9px;padding:10px;border-radius:14px;background:var(--glass-2);border:1px solid var(--border);}
.board-comment-avatar{width:32px;height:32px;font-size:9px;}
.board-comment-meta{display:flex;align-items:baseline;gap:8px;}
.board-comment-meta strong{font-size:13.5px;}
.board-comment-meta time{color:var(--txt-2);font-size:12px;}
.board-comment p{margin:3px 0 0;color:var(--txt);font-size:14px;line-height:1.55;overflow-wrap:anywhere;}
.board-comment-empty{min-height:70px;border:1px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--txt-2);font-size:13px;}
.board-comment-empty i{width:16px;height:16px;}
.board-mention{display:inline-block;padding:1px 5px;border-radius:6px;background:var(--accent-aura);color:var(--accent-ink);font-weight:700;}
.board-mention-strip{display:flex;align-items:center;gap:6px;overflow-x:auto;margin-bottom:8px;color:var(--txt-2);font-size:12.5px;}
.board-mention-strip > span{white-space:nowrap;}
.board-mention-strip button{min-height:36px;padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:var(--glass);color:var(--accent-ink);font-size:12px;white-space:nowrap;}
.board-comment-compose{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;}
.board-comment-compose textarea{min-height:62px;}

/* Chat messages sit clearly above the dark canvas. */
.chat-main{background:var(--chrome-soft);}
.chat-msg{
  max-width:76%;padding:11px 14px;border-radius:17px;
  background:rgba(252,247,253,.13);border-color:rgba(252,247,253,.17);
  color:var(--txt);font-size:15px;line-height:1.55;box-shadow:var(--inset-glow-subtle),0 8px 22px rgba(0,0,0,.14);
}
.chat-msg.mine{background:color-mix(in srgb,var(--accent) 22%,#19131D);border-color:color-mix(in srgb,var(--accent) 55%,var(--border));}
.chat-msg .cm-head{margin-bottom:3px;}
.chat-msg .cm-name,.chat-msg.mine .cm-name{font-size:13px;color:var(--txt);}
.chat-msg .cm-time{font-size:12px;color:var(--txt-2);}
.cm-body{white-space:pre-wrap;overflow-wrap:anywhere;}
html[data-theme="light"] .chat-msg{background:rgba(255,255,255,.92);border-color:rgba(44,28,49,.14);}
html[data-theme="light"] .chat-msg.mine{background:color-mix(in srgb,var(--accent) 14%,white);}

/* Acquisition: compact, stackable cards with an add affordance per lane. */
.acq-board{gap:11px;}
.acq-col{flex-basis:232px;gap:6px;}
.acq-col-head{padding:10px 11px;border-radius:11px;font-size:13px;}
.acq-cards{gap:6px !important;}
.acq-card{padding:9px 10px;border-radius:12px;}
.acq-card .ac-company{font-size:15px;font-weight:700;}
.acq-card .ac-contact{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acq-card .ac-foot{margin-top:8px;font-size:12.5px;}
.acq-card .ac-next{margin-top:7px;font-size:13px;line-height:1.45;}
.acq-add-card{
  width:100%;min-height:40px;border:1px dashed var(--border-strong);border-radius:11px;background:var(--glass);
  color:var(--txt-2);display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:650;
  transition:all .16s var(--ease);
}
.acq-add-card:hover{border-color:var(--accent);background:var(--accent-aura);color:var(--txt);transform:translateY(-1px);}
.acq-add-card i{width:15px;height:15px;color:var(--accent-ink);}
.bulk-lead-editor{display:flex;flex-direction:column;gap:12px;}
.bulk-lead-editor > p{margin:0;color:var(--txt-2);font-size:13px;line-height:1.5;}
.bulk-lead-example{padding:9px 11px;border-radius:10px;background:var(--glass);border:1px solid var(--border);color:var(--txt-2);font-size:12px;}

/* Today makes every overdue item immediately actionable. */
.overdue-banner{padding:11px 13px;border-radius:11px;font-size:14px;flex-wrap:wrap;}
.overdue-banner a{margin-left:auto;}
.dash-overdue-label{color:var(--red-soft);font-size:12.5px;}
.dash-task-row{min-height:43px;padding:9px 2px;}
.dash-task-row.is-overdue{padding-inline:9px;border:1px solid color-mix(in srgb,var(--red) 18%,transparent);border-radius:11px;background:color-mix(in srgb,var(--red) 5%,transparent);margin-bottom:6px;}
.dash-task-title{font-size:15px;font-weight:600;}
.overdue-date{color:var(--red-soft);border-color:color-mix(in srgb,var(--red) 24%,transparent);}
.overdue-date i{width:12px;height:12px;}
.checkbox.readonly{opacity:.55;cursor:default;}

@media(max-width:920px){
  .app{width:100%;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;}
  .main{height:100dvh;background:var(--chrome-soft);}
  .topbar{height:68px;min-height:68px;}
  .view{padding:18px 16px 112px;}
  .page-title{font-size:20px;}
  .btn{min-height:44px;font-size:14px;}
  .btn.sm{min-height:44px;padding:0 14px;font-size:13px;}
  .btn-icon{min-width:44px;padding:0;}
  .search-trigger{min-width:44px;width:44px;flex:0 0 44px;padding:0;justify-content:center;}
  .seg button{min-height:44px;}
  .board-list-head .icon-btn{width:44px;height:44px;}
  .board-mention-strip button{min-height:44px;}
  .board-label-colors button{width:44px;height:44px;}
  .minical-head .icon-btn{width:44px !important;height:44px !important;}
  .minical-grid button{min-width:36px;min-height:36px;}
  .health-row{min-height:44px;}
  .cal-month-label{font-size:18px;}
  .overdue-banner{flex-wrap:wrap;padding:10px 12px;font-size:13px;}
  .overdue-banner strong{min-width:0;flex:1;}
  .overdue-banner a{flex-basis:100%;margin-left:23px;}
  .board-card,.chat-ch{min-height:44px;}
  .board-list{flex-basis:78%;}
  .chat-msg{max-width:90%;font-size:15px;padding:11px 14px;}
  .chat-ch{font-size:15px;}
  .acq-col{flex-basis:72%;}
  .acq-add-card{min-height:44px;font-size:13px;}
  .bn-item{min-height:64px;font-size:11.5px;}
  .greeting-text{font-size:28px;}
  .quick-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ev{min-height:32px;font-size:12px !important;}
  .ev-more{font-size:12px;}
  .weekdays span{font-size:12px;}
}

@media(max-width:640px){
  .board-member-picker{grid-template-columns:1fr;}
  .board-label-due-row{grid-template-columns:1fr;}
  .board-label-create{grid-template-columns:1fr;}
  .board-label-colors{padding:2px 0;}
  .board-label-colors button{width:44px;height:44px;}
  .board-comment-compose{grid-template-columns:1fr;}
  .board-comment-compose .btn{justify-content:center;}
  .page-actions{align-items:stretch;}
  .page-actions > .btn{flex:1;justify-content:center;}
}

@media(min-width:921px) and (max-width:1120px){
  .search-trigger{min-width:44px;width:44px;padding:0;justify-content:center;}
  .search-trigger .label,.search-trigger .kbd{display:none;}
}

/* ============================================================
   QVIC Design packs — one selection changes the whole atmosphere
   ============================================================ */
html[data-design="purple"]{
  --accent:#A45C9E;--accent-soft:#D58AC4;--accent-rgb:164 92 158;
  --accent-button:#8C3E75;--accent-button-hover:#A84C83;--on-accent:#FFFFFF;
  --accent-ink:#DFA0D2;--focus-ring:#E3A7D7;
  --chrome-soft:linear-gradient(145deg,rgba(55,43,59,.98),rgba(25,20,30,.98));
  --ambient-one:rgba(119,60,147,.23);--ambient-two:rgba(163,45,92,.15);
}
html[data-design="orange"]{
  --accent:#F07A3E;--accent-soft:#FFAD7C;--accent-rgb:240 122 62;
  --accent-button:#DF6630;--accent-button-hover:#F1844A;--on-accent:#241108;
  --accent-ink:#FFB58A;--focus-ring:#FFAD7C;
  --chrome-soft:linear-gradient(145deg,rgba(61,40,30,.98),rgba(27,20,18,.98));
  --card-bg:linear-gradient(160deg,rgba(26,19,17,.99),rgba(10,8,8,.99));
  --panel-bg:linear-gradient(160deg,rgba(34,24,20,.99),rgba(11,8,8,.99));
  --ambient-one:rgba(194,78,28,.23);--ambient-two:rgba(149,45,28,.14);
}
html[data-design="red"]{
  --accent:#D94A5F;--accent-soft:#F17C8D;--accent-rgb:217 74 95;
  --accent-button:#B9324B;--accent-button-hover:#D74760;--on-accent:#FFFFFF;
  --accent-ink:#FF9EAB;--focus-ring:#F98B9B;
  --chrome-soft:linear-gradient(145deg,rgba(59,35,42,.98),rgba(27,18,22,.98));
  --card-bg:linear-gradient(160deg,rgba(26,17,21,.99),rgba(10,7,9,.99));
  --panel-bg:linear-gradient(160deg,rgba(35,21,26,.99),rgba(11,7,9,.99));
  --ambient-one:rgba(183,43,72,.23);--ambient-two:rgba(111,29,52,.16);
}
html[data-design="forest"]{
  --accent:#5E9E7D;--accent-soft:#8BC6A8;--accent-rgb:94 158 125;
  --accent-button:#376F55;--accent-button-hover:#498566;--on-accent:#FFFFFF;
  --accent-ink:#98D2B5;--focus-ring:#91CCAE;
  --chrome-soft:linear-gradient(145deg,rgba(35,52,44,.98),rgba(17,25,22,.98));
  --card-bg:linear-gradient(160deg,rgba(18,25,22,.99),rgba(7,10,9,.99));
  --panel-bg:linear-gradient(160deg,rgba(23,34,29,.99),rgba(7,11,9,.99));
  --ambient-one:rgba(50,125,91,.22);--ambient-two:rgba(30,79,62,.16);
}
html[data-design="white"]{
  --accent:#F2EEF4;--accent-soft:#FFFFFF;--accent-rgb:242 238 244;
  --accent-button:#DED8E1;--accent-button-hover:#F7F4F8;--on-accent:#1A161C;
  --accent-ink:#FFFFFF;--focus-ring:#FFFFFF;
  --chrome-soft:linear-gradient(145deg,rgba(54,51,57,.98),rgba(25,23,27,.98));
  --card-bg:linear-gradient(160deg,rgba(25,23,27,.99),rgba(9,8,10,.99));
  --panel-bg:linear-gradient(160deg,rgba(32,29,34,.99),rgba(10,9,11,.99));
  --ambient-one:rgba(255,255,255,.13);--ambient-two:rgba(191,177,197,.09);
}
html[data-design="yellow"]{
  --accent:#E1B84A;--accent-soft:#F4D77F;--accent-rgb:225 184 74;
  --accent-button:#CDA32E;--accent-button-hover:#E0B844;--on-accent:#211A08;
  --accent-ink:#F5D97D;--focus-ring:#F2D477;
  --chrome-soft:linear-gradient(145deg,rgba(57,50,32,.98),rgba(26,23,17,.98));
  --card-bg:linear-gradient(160deg,rgba(26,23,16,.99),rgba(10,9,7,.99));
  --panel-bg:linear-gradient(160deg,rgba(34,29,18,.99),rgba(11,9,7,.99));
  --ambient-one:rgba(180,137,31,.20);--ambient-two:rgba(116,82,20,.13);
}

html[data-theme="light"][data-design]{
  --chrome-soft:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,#E7E3E9),#F2EFF3);
  --card-bg:linear-gradient(160deg,#FFFFFF,color-mix(in srgb,var(--accent) 5%,#F3F0F4));
  --panel-bg:linear-gradient(160deg,#FFFFFF,color-mix(in srgb,var(--accent) 7%,#F1EDF3));
  --ambient-one:rgb(var(--accent-rgb) / .13);--ambient-two:rgb(var(--accent-rgb) / .08);
}
html[data-theme="light"][data-design="purple"]{--accent:#8D467F;--accent-soft:#A95B96;--accent-rgb:141 70 127;--accent-button:#843B73;--accent-button-hover:#9A4A84;--on-accent:#FFFFFF;--accent-ink:#733766;--focus-ring:#91467F;}
html[data-theme="light"][data-design="orange"]{--accent:#B64D17;--accent-soft:#D3642D;--accent-rgb:182 77 23;--accent-button:#C9551D;--accent-button-hover:#DD682E;--on-accent:#FFFFFF;--accent-ink:#9E3E0F;--focus-ring:#B94E18;}
html[data-theme="light"][data-design="red"]{--accent:#B62F49;--accent-soft:#CF4960;--accent-rgb:182 47 73;--accent-button:#AF2942;--accent-button-hover:#C83B54;--on-accent:#FFFFFF;--accent-ink:#9E263D;--focus-ring:#B92E49;}
html[data-theme="light"][data-design="forest"]{--accent:#347458;--accent-soft:#4C8D6D;--accent-rgb:52 116 88;--accent-button:#2F6B50;--accent-button-hover:#3D8060;--on-accent:#FFFFFF;--accent-ink:#2C684E;--focus-ring:#347458;}
html[data-theme="light"][data-design="white"]{
  --accent:#2D2830;--accent-soft:#514956;--accent-rgb:45 40 48;
  --accent-button:#272329;--accent-button-hover:#403A43;--on-accent:#FFFFFF;
  --accent-ink:#2D2830;--focus-ring:#2D2830;
  --bg:#ECEBED;--surface:#FFFFFF;--surface-2:#F1EFF2;--chrome-soft:linear-gradient(145deg,#F3F1F4,#FFFFFF);
  --card-bg:linear-gradient(160deg,#FFFFFF,#F7F6F8);--panel-bg:linear-gradient(160deg,#FFFFFF,#F4F3F5);
  --ambient-one:rgba(255,255,255,.78);--ambient-two:rgba(46,39,50,.06);
}
html[data-theme="light"][data-design="yellow"]{--accent:#8B6905;--accent-soft:#AA8211;--accent-rgb:139 105 5;--accent-button:#D4AA31;--accent-button-hover:#E2BA48;--on-accent:#211A08;--accent-ink:#785A00;--focus-ring:#896700;}

:focus-visible{outline-color:var(--focus-ring,var(--accent));}
.input:focus,textarea.input:focus,select.input:focus{border-color:var(--focus-ring,var(--accent));}
.btn-primary,.auth-btn,.fab,.checkbox.on,.bn-more-badge{color:var(--on-accent);}

/* Round metallic QVIC mark. Oversizing intentionally crops the transparent
   source canvas so its former black square becomes a circular badge. */
.brand-mark{
  position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;isolation:isolate;
  background:#080708;border:1px solid color-mix(in srgb,var(--accent) 36%,rgba(255,255,255,.18));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 0 0 3px var(--accent-aura),0 10px 28px rgba(0,0,0,.42);
}
.brand-mark img{
  position:absolute;left:calc(50% + .4px);top:calc(50% - 1.2px);width:47px;height:46px;max-width:none;
  object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 8px rgba(255,255,255,.18));
}
.brand:hover .brand-mark img,.brand-mark:hover img{transform:translate(-50%,-50%) scale(1.04) rotate(-2deg);}

/* The same cropped transparent mark is used throughout auth, not the old
   square logo asset. */
.auth-mark,.auth-story-mark{position:relative;overflow:hidden;border-radius:50%;background:#080708;}
.auth-mark img,.auth-story-mark img{
  position:absolute;left:calc(50% + .3px);top:calc(50% - 1px);width:47px;height:46px;max-width:none;
  object-fit:contain;transform:translate(-50%,-50%);
}
.page-sub:empty{display:none;}

/* Compact color menu next to Dark/Light. */
.design-picker-wrap{position:relative;flex:none;}
.design-picker-toggle{position:relative;gap:0;overflow:visible;}
.design-picker-toggle > svg{width:16px;height:16px;opacity:.75;}
.design-picker-indicator{position:absolute;right:6px;bottom:6px;width:10px;height:10px;border:2px solid var(--chrome-bg);border-radius:50%;box-shadow:0 0 0 1px var(--border-strong);}
.design-picker-popover{
  position:absolute;z-index:90;right:0;top:calc(100% + 10px);width:264px;padding:13px 14px 15px;
  border:1px solid var(--border-strong);border-radius:16px;background:var(--chrome-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.48),var(--inset-glow);backdrop-filter:blur(28px);
}
.design-picker-title{padding:2px 1px 12px;color:var(--txt-2);font-size:12px;font-weight:750;letter-spacing:.45px;}
.design-picker-colors{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.design-choice{
  width:34px;height:34px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--txt);transition:transform .16s var(--ease);
}
.design-choice:hover{transform:translateY(-2px) scale(1.06);}
.design-choice:focus-visible{outline-offset:3px;}
.design-swatch{
  width:28px;height:28px;border-radius:50%;background:var(--design-swatch);
  border:1px solid rgba(255,255,255,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 5px 14px rgba(0,0,0,.24);
}
.design-choice.active .design-swatch{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 0 3px var(--chrome-strong),0 0 0 5px var(--accent),0 7px 18px rgba(0,0,0,.28);}

/* Shared appearance/settings controls. */
.design-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.design-setting-choice{display:flex;align-items:center;gap:11px;min-height:62px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:var(--input-bg);text-align:left;}
.design-setting-choice:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.design-setting-choice.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-aura);}
.design-setting-choice > span:last-child{display:flex;flex-direction:column;min-width:0;}.design-setting-choice strong{font-size:13.5px;}.design-setting-choice small{font-size:11.5px;color:var(--txt-2);}
.design-setting-choice > span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1;}
.design-setting-choice > svg{width:16px;height:16px;color:var(--accent-ink);opacity:0;flex:none;}.design-setting-choice.active > svg{opacity:1;}
.design-setting-preview{width:52px;height:42px;position:relative;}.design-setting-preview .design-swatch{width:22px;height:22px;box-shadow:0 0 0 3px rgba(255,255,255,.20);}
.profile-color-row,.company-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.profile-color-row input[type="color"],.company-color-row input[type="color"]{width:46px;height:42px;padding:3px;border:1px solid var(--border);border-radius:11px;background:var(--input-bg);}
.tag-color-picker{gap:9px;}.tag-color-picker .tag-color-choice{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px var(--border),inset 0 1px 0 rgba(255,255,255,.25);}.tag-color-picker .tag-color-choice.sel{border-color:var(--selection-ring);box-shadow:0 0 0 3px var(--accent-aura),inset 0 1px 0 rgba(255,255,255,.25);}
.settings-directory-list{display:flex;flex-direction:column;gap:2px;}.settings-directory-row{min-height:52px;border-bottom:1px solid var(--border);}.settings-directory-row:last-child{border-bottom:0;}
.company-color-input{width:44px;height:40px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);cursor:pointer;}

/* ---------- Drive-backed client reviews ---------- */
.reviews-page,.review-detail-page{width:min(100%,1380px);margin-inline:auto;}
.reviews-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;gap:28px;justify-content:space-between;margin-bottom:18px;padding:28px 30px;border:1px solid var(--border-strong);border-radius:22px;background:linear-gradient(125deg,var(--panel-bg),color-mix(in srgb,var(--accent) 12%,var(--panel-bg)));box-shadow:var(--shadow-card),var(--inset-glow);}
.reviews-hero::after{content:"";position:absolute;right:-70px;top:-120px;width:310px;height:310px;border-radius:50%;background:var(--accent-glow);filter:blur(18px);pointer-events:none;}
.reviews-hero > *{position:relative;z-index:1;}.reviews-hero h2{max-width:720px;margin:5px 0 8px;font-size:clamp(26px,3vw,42px);line-height:1.12;letter-spacing:-1.2px;}.reviews-hero p{max-width:680px;color:var(--txt-2);font-size:15px;line-height:1.65;}
.review-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.review-stat{display:flex;align-items:center;gap:13px;min-height:82px;padding:15px 17px;border:1px solid var(--border);border-radius:16px;background:var(--panel-bg);box-shadow:var(--shadow-card),var(--inset-glow);}.review-stat > svg{width:22px;height:22px;padding:10px;box-sizing:content-box;border-radius:12px;background:var(--accent-aura);color:var(--accent-ink);}.review-stat div{display:flex;flex-direction:column;gap:3px;}.review-stat strong{font-size:22px;line-height:1;}.review-stat span{font-size:12px;color:var(--txt-2);}
.reviews-library-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start;}.review-project-filter,.review-library{border:1px solid var(--border-strong);border-radius:18px;background:var(--panel-bg);box-shadow:var(--shadow-card),var(--inset-glow);}.review-project-filter{position:sticky;top:10px;padding:13px;}.review-filter-title{padding:8px 8px 11px;font-size:11px;font-weight:800;letter-spacing:1.3px;color:var(--txt-3);text-transform:uppercase;}.review-filter{width:100%;display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:0;border-radius:11px;background:transparent;text-align:left;color:var(--txt-2);}.review-filter:hover{background:var(--hover-bg);color:var(--txt);}.review-filter.active{background:var(--accent-aura);color:var(--txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);}.review-filter > span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:650;}.review-filter strong{font-size:11px;color:var(--txt-3);}.review-filter-dot{width:8px;height:8px;border-radius:50%;background:var(--project-color,var(--accent));box-shadow:0 0 10px color-mix(in srgb,var(--project-color,var(--accent)) 50%,transparent);}
.review-library{min-width:0;padding:16px;}.review-library-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;padding:0 2px;}.review-library-head > div{font-size:16px;}.review-search{width:min(320px,45%);display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--input-bg);}.review-search > svg{width:17px;color:var(--txt-3);}.review-search input{width:100%;height:40px;border:0;outline:0;background:transparent;color:var(--txt);font-size:12.5px;}
.review-card-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;}.review-card{overflow:hidden;display:block;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--card-bg);color:var(--txt);text-align:left;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}.review-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 44%,var(--border));box-shadow:0 18px 38px rgba(0,0,0,.20),var(--inset-glow);}.review-card-preview{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 72% 24%,var(--accent-glow),transparent 34%),linear-gradient(145deg,#151116,#070608 64%);}.review-card-preview::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .035) 1px,transparent 1px);background-size:28px 28px;}.review-card-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgb(255 255 255 / .18);border-radius:50%;background:rgb(7 6 8 / .72);color:#fff;transform:translate(-50%,-50%);box-shadow:0 12px 30px rgb(0 0 0 / .45);}.review-card-play svg{width:18px;fill:currentColor;}.review-version-pill{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:8px;background:rgb(5 5 6 / .72);color:#fff;font-size:10px;font-weight:800;letter-spacing:.5px;backdrop-filter:blur(10px);}.review-status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--review-status) 50%,transparent);border-radius:999px;background:color-mix(in srgb,var(--review-status) 14%,rgb(8 7 9 / .72));color:color-mix(in srgb,var(--review-status) 78%,white);font-size:10.5px;font-weight:780;white-space:nowrap;}.review-status > svg{width:13px;height:13px;}.review-card-preview > .review-status{position:absolute;right:10px;top:10px;backdrop-filter:blur(10px);}.review-card-body{padding:14px 15px 15px;}.review-card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:750;}.review-card-project{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--txt-2);font-size:12px;}.review-card-project > span{width:8px;height:8px;border-radius:3px;background:var(--project-color,var(--accent));}.review-card-meta{display:flex;align-items:center;gap:11px;margin-top:14px;color:var(--txt-3);font-size:10.5px;}.review-card-meta span{display:flex;align-items:center;gap:4px;}.review-card-meta svg{width:12px;height:12px;}.review-card-meta span:last-child{margin-left:auto;}.review-empty{min-height:310px;}
.review-detail-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding:4px 2px;}.review-detail-head h2{margin:2px 0;font-size:clamp(22px,2.4vw,32px);line-height:1.15;}.review-detail-head p{color:var(--txt-2);font-size:12px;}.review-decision-bar{display:flex;align-items:center;gap:9px;min-height:62px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:16px;background:var(--panel-bg);box-shadow:var(--shadow-card),var(--inset-glow);}.review-current-status{display:flex;align-items:center;gap:9px;}.review-status.large{padding:8px 11px;font-size:11.5px;}.review-decision.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-aura);}
.review-workbench{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;min-height:620px;}.review-stage-column{min-width:0;display:flex;flex-direction:column;gap:10px;}.review-stage{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid rgb(255 255 255 / .10);border-radius:18px;background:#030304;box-shadow:0 24px 70px rgb(0 0 0 / .38);}.review-stage iframe{width:100%;height:100%;border:0;background:#030304;}.review-drive-link{position:absolute;right:12px;bottom:12px;background:rgb(8 7 9 / .76);color:#fff;border-color:rgb(255 255 255 / .16);backdrop-filter:blur(14px);}.review-stage-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#fff;text-align:center;}.review-stage-empty > svg{width:36px;height:36px;color:var(--accent-soft);}.review-stage-empty span{color:rgb(255 255 255 / .58);font-size:12px;}.review-version-strip{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:10px;border:1px solid var(--border);border-radius:15px;background:var(--panel-bg);}.review-version-label{display:grid;place-items:center;padding:0 8px;color:var(--txt-3);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}.review-version{min-width:112px;display:flex;flex-direction:column;gap:3px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);text-align:left;}.review-version:hover,.review-version.active{border-color:var(--accent);background:var(--accent-aura);}.review-version span{font-size:12px;font-weight:750;}.review-version small{color:var(--txt-3);font-size:9.5px;}
.review-comments-panel{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border-strong);border-radius:18px;background:var(--panel-bg);box-shadow:var(--shadow-card),var(--inset-glow);}.review-comments-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid var(--border);}.review-comments-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px;max-height:510px;}.review-comments-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--txt-3);font-size:11.5px;}.review-comments-empty svg{width:28px;height:28px;}.review-comment{padding:15px 16px;border-bottom:1px solid var(--border);}.review-comment.resolved{opacity:.58;}.review-comment-head{display:flex;align-items:center;gap:9px;}.review-comment-head .avatar{background:var(--avatar-color,var(--accent));}.review-comment-head .grow{display:flex;flex-direction:column;min-width:0;}.review-comment-head strong{font-size:12px;}.review-comment-head .grow span{color:var(--txt-3);font-size:9.5px;}.review-comment p{margin:10px 0 0;padding-left:41px;color:var(--txt-2);font-size:12px;line-height:1.65;white-space:pre-wrap;}.review-timecode{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--accent-ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:750;}.review-timecode svg{width:11px;height:11px;fill:currentColor;}.review-comment-form{display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--chrome-bg);}.review-comment-form textarea{resize:vertical;min-height:72px;}.review-comment-form .btn{align-self:flex-end;}.review-comment-time{display:flex;align-items:center;gap:7px;}.review-comment-time svg{width:16px;color:var(--txt-3);}.review-comment-time .input{width:94px;height:34px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
.review-editor-fields{display:flex;flex-direction:column;gap:14px;}.review-storage-note{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:12px;background:var(--accent-aura);}.review-storage-note > svg{width:19px;color:var(--accent-ink);}.review-storage-note > div{display:flex;flex-direction:column;gap:3px;}.review-storage-note strong{font-size:12.5px;}.review-storage-note span{color:var(--txt-2);font-size:11px;line-height:1.5;}.project-review-card{background:linear-gradient(145deg,var(--card-bg),color-mix(in srgb,var(--accent) 9%,var(--card-bg)));}

@media(max-width:1120px){.review-card-grid{grid-template-columns:repeat(2,minmax(220px,1fr));}.review-workbench{grid-template-columns:1fr;}.review-comments-panel{min-height:520px}.review-comments-list{max-height:430px;}}
@media(max-width:780px){.reviews-hero{align-items:flex-start;flex-direction:column;padding:22px;}.review-summary{grid-template-columns:repeat(2,minmax(0,1fr));}.reviews-library-layout{grid-template-columns:1fr;}.review-project-filter{position:static;}.review-project-filter [data-review-folders]{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;}.review-project-filter .review-folder-tree-row{width:auto;min-width:max-content;grid-template-columns:17px auto auto;padding-left:8px;}.review-library-head{align-items:stretch;flex-direction:column;}.review-search{width:100%;}.review-detail-head{align-items:flex-start;flex-wrap:wrap;}.review-detail-head > .grow{min-width:calc(100% - 62px);}.review-decision-bar{align-items:stretch;flex-wrap:wrap;}.review-decision-bar .grow{display:none;}.review-current-status{width:100%;}.review-decision{flex:1;}.review-card-grid{grid-template-columns:1fr;}.review-workbench{min-height:0;}.review-comments-panel{min-height:500px}.review-stage{border-radius:14px}.review-comment p{padding-left:0;}}

/* Content alignment and clearer, denser operational pages. */
.campaigns-page,.board-picker-page,.tasks-page,.learning-page{width:min(100%,1240px);margin-inline:auto;}
.campaigns-toolbar{align-items:center;margin-bottom:18px;}
.campaigns-toolbar .grow{display:none;}
.campaigns-toolbar .btn{margin-left:0;}
.board-picker-page{padding-inline:clamp(0px,1.3vw,18px);}
.board-picker-intro{max-width:850px;}
.board-picker-intro .page-lead{font-size:clamp(30px,3.4vw,44px);line-height:1.14;font-weight:720;letter-spacing:-1px;}
.board-picker-intro .page-lead-sub{margin-top:13px;font-size:16px;line-height:1.65;color:var(--txt-2);}

/* Companies, personal tags and due dates are operational signals. */
.company-tag{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 9px;border:1px solid color-mix(in srgb,var(--company-color,var(--accent)) 45%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--company-color,var(--accent)) 13%,transparent);font-size:12px;font-weight:700;color:var(--txt);}
.company-tag::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--company-color,var(--accent));box-shadow:0 0 10px color-mix(in srgb,var(--company-color,var(--accent)) 55%,transparent);}
.due-badge,.project-due-badge,.task-due-badge,.board-due-badge{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 10px;border:1px solid var(--border-strong);border-radius:9px;background:var(--glass-2);font-size:12.5px;font-weight:750;white-space:nowrap;}
.due-badge i,.project-due-badge i,.task-due-badge i,.board-due-badge i{width:15px;height:15px;}
.due-overdue,[data-due-tone="overdue"]{color:var(--red-soft);border-color:color-mix(in srgb,var(--red) 42%,var(--border));background:color-mix(in srgb,var(--red) 12%,transparent);}
.due-today,[data-due-tone="today"]{color:var(--red-soft);border-color:color-mix(in srgb,var(--red) 34%,var(--border));background:color-mix(in srgb,var(--red) 9%,transparent);}
.due-soon,[data-due-tone="soon"]{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 36%,var(--border));background:color-mix(in srgb,var(--warn) 10%,transparent);}
.due-future,[data-due-tone="future"]{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 34%,var(--border));background:var(--accent-aura);}

.board-tile{position:relative;border-top:3px solid var(--client-color,var(--company-color,var(--accent)));}
.board-tile-company{display:flex;align-items:center;gap:7px;color:var(--txt-2);font-size:12.5px;font-weight:650;}
.board-tile-company::before{content:none;}
.board-header-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.board-card-title{font-size:14px;font-weight:700;line-height:1.45;}
.board-card .board-due-badge{margin-top:8px;}
.board-mini-avatar,.board-member-avatar,.board-comment-avatar{background:var(--member-color,var(--accent));}
.board-due-overdue{color:var(--red-soft);border-color:color-mix(in srgb,var(--red) 42%,var(--border));background:color-mix(in srgb,var(--red) 12%,transparent);}
.board-due-today{color:var(--red-soft);border-color:color-mix(in srgb,var(--red) 34%,var(--border));background:color-mix(in srgb,var(--red) 9%,transparent);}
.board-due-soon{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 36%,var(--border));background:color-mix(in srgb,var(--warn) 10%,transparent);}
.board-due-future{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 34%,var(--border));background:var(--accent-aura);}
.board-card-deadline{display:flex;align-items:center;margin-bottom:9px;}
.board-page-context{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.board-page-context > strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-company-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--client-color,var(--accent)) 43%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--client-color,var(--accent)) 12%,transparent);font-size:12px;font-weight:700;}
.board-company-dot{display:inline-block;width:9px;height:9px;border-radius:3px;flex:none;}
.board-create-form{display:flex;flex-direction:column;gap:18px;}
.board-start-lists{display:flex;flex-direction:column;gap:8px;margin-top:9px;}
.board-start-list-row{display:grid;grid-template-columns:22px minmax(0,1fr) 42px;align-items:center;gap:8px;}
.board-start-list-row > svg{color:var(--txt-3);width:18px;height:18px;}
.board-company-color-input{min-height:48px;padding:5px;cursor:pointer;}
.board-task-sync-note{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:12px;background:var(--accent-aura);color:var(--txt-2);font-size:13px;line-height:1.5;}
.board-task-sync-note i{width:17px;height:17px;color:var(--accent-ink);flex:none;margin-top:1px;}
.board-due-preview{margin-top:9px;min-height:34px;}

/* Learning is intentionally a calm catalogue, not another dense admin table. */
.learning-page{max-width:1180px;}
[data-learning-catalog] > .grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
[data-learning-catalog] .card{min-height:230px;display:flex;flex-direction:column;}
[data-learning-catalog] .card > .flex:last-child{margin-top:auto !important;}
[data-learning-options] .list-row{min-height:50px;background:var(--input-bg);}
[data-learning-options] input[type="radio"],input[name="learning-correct-option"]{accent-color:var(--accent);width:18px;height:18px;}
[data-progress-rows] .list-row{padding:11px 12px;}

/* Task rows stay comfortably centered instead of stretching edge to edge. */
.tasks-page{max-width:1040px;}
.tasks-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.task-page-list{display:flex;flex-direction:column;gap:9px;}
.task-page-row{min-height:86px;padding:15px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card-bg);box-shadow:var(--inset-glow-subtle);}
.task-page-row:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.task-page-row .task-title{font-size:15px;font-weight:700;line-height:1.4;}
.task-row-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;}
.task-group-label{margin:22px 0 9px;color:var(--txt-3);font-size:11.5px;font-weight:750;letter-spacing:1.2px;text-transform:uppercase;}
[data-task-list] > .list-row{min-height:86px;border-radius:14px;background:var(--card-bg);box-shadow:var(--inset-glow-subtle);}
[data-task-list] > .list-row:last-child{margin-bottom:0 !important;}

/* Project detail: reserve room for text and surface the due date. */
.project-card{position:relative;border-top:3px solid var(--company-color,var(--accent));}
.project-card-head,.project-meta-footer,.project-drawer-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.project-card-head .card-title,.project-drawer-title{min-width:0;flex:1;overflow-wrap:anywhere;}
.project-meta-footer{align-items:center;margin-top:14px;}
.project-member-stack{display:flex;align-items:center;}.project-member-stack .avatar{margin-left:-5px;border:2px solid var(--surface);}.project-member-stack .avatar:first-child{margin-left:0;}
.project-links{display:flex;gap:8px;flex-wrap:wrap;}
.drawer-head > .flex{width:100%;min-width:0;}.drawer-head > .flex > div:nth-child(2){min-width:0;flex:1;}.drawer-head > .flex > .grow{display:none;}
.drawer-body > *{flex-shrink:0;}

/* Firmenboard workspace: the horizontal lane owns its scrolling and never
   pushes the whole app underneath the sidebar. Project reviews live inside
   the same editor instead of opening a separate project module. */
.board-page{width:100%;min-width:0;max-width:100%;overflow:hidden;}
.board-page .page-actions{min-width:0;}
.board-wrap{
  width:100%;max-width:100%;min-width:0;padding:2px 2px 22px;
  overscroll-behavior-x:contain;scroll-padding-inline:2px;scroll-snap-type:x proximity;
}
.board-list{scroll-snap-align:start;}
.board-review-section,.board-comments-section{
  padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--panel-bg);
}
.board-review-list{display:flex;flex-direction:column;gap:7px;}
.board-review-link{
  display:flex;align-items:center;gap:12px;min-height:62px;padding:11px 12px;
  border:1px solid var(--border);border-radius:11px;background:var(--input-bg);color:var(--txt);
  transition:border-color .16s var(--ease),transform .16s var(--ease),background .16s var(--ease);
}
.board-review-link:hover{border-color:color-mix(in srgb,var(--accent) 44%,var(--border));background:var(--accent-aura);transform:translateY(-1px);}
.board-review-link > span{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px;}
.board-review-link strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;}
.board-review-link small{color:var(--txt-2);font-size:11.5px;line-height:1.4;}
.board-review-link > svg{width:17px;height:17px;color:var(--accent-ink);flex:none;}
.board-card-modal{width:min(1120px,calc(100% - 32px));}
.board-card-modal .modal-body{padding:0;}
.board-card-editor{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:0;align-items:stretch;}
.board-card-details{min-width:0;display:flex;flex-direction:column;gap:17px;padding:22px 24px 25px;}
.board-card-activity{
  min-width:0;display:flex;flex-direction:column;gap:14px;padding:22px 20px 25px;
  border-left:1px solid var(--border);background:color-mix(in srgb,var(--panel-bg) 84%,var(--accent) 4%);
}
.board-card-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.board-card-section-title > span{display:flex;align-items:center;gap:8px;color:var(--txt);font-size:14px;font-weight:780;}
.board-card-section-title svg{width:17px;height:17px;color:var(--accent-ink);}
.board-card-section-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-3);font-size:10.5px;font-weight:750;letter-spacing:.8px;text-transform:uppercase;}
.board-card-status-row{grid-template-columns:repeat(3,minmax(0,1fr));}
.board-post-review{width:100%;justify-content:center;min-height:46px;}
.board-card-activity .board-review-section,.board-card-activity .board-comments-section{padding:0;border:0;border-radius:0;background:transparent;}
.board-card-activity .board-comments-section{padding-top:14px;border-top:1px solid var(--border);}
.board-card-activity .board-comment-list{max-height:290px;}
.board-card-activity .board-comment-empty{min-height:78px;padding:12px;text-align:center;}
.board-card-activity .board-comment-compose{grid-template-columns:minmax(0,1fr) 44px;}
.board-card-activity .board-comment-compose .btn{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center;}
.board-card-activity .board-comment-compose .btn svg{width:17px;height:17px;}
.board-activity-link{color:var(--accent-ink);font-size:12px;font-weight:700;}
.board-activity-link:hover{text-decoration:underline;}
.board-activity-empty{min-height:270px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:25px;text-align:center;color:var(--txt-2);}
.board-activity-empty svg{width:30px;height:30px;margin-bottom:3px;color:var(--accent-ink);}
.board-activity-empty strong{color:var(--txt);font-size:14px;}
.board-activity-empty span{max-width:260px;font-size:12.5px;line-height:1.55;}
.review-file-hint{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--txt-2);font-size:11.5px;line-height:1.4;}
.review-file-hint svg{width:15px;height:15px;flex:none;color:var(--accent-ink);}
.board-readonly-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:var(--glass);color:var(--txt-2);font-size:12px;font-weight:700;}
.board-readonly-badge svg{width:15px;height:15px;color:var(--accent-ink);}
.board-client-empty{min-height:420px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:34px;text-align:center;border:1px dashed var(--border-strong);border-radius:20px;background:var(--panel-bg);}
.board-client-empty > svg{width:38px;height:38px;color:var(--accent-ink);}
.board-client-empty h3{margin:4px 0 0;font-size:20px;}
.board-client-empty p{max-width:430px;margin:0;color:var(--txt-2);font-size:14px;line-height:1.6;}
.client-project-card{cursor:pointer;}
.client-project-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 7%,var(--card-bg));}
.client-project-modal{width:min(760px,calc(100% - 32px));}
.client-project-view{display:flex;flex-direction:column;gap:15px;}
.client-project-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.client-project-summary .chip svg{width:12px;height:12px;}
.client-project-list{margin-left:auto;color:var(--txt-3);font-size:11px;font-weight:750;letter-spacing:.7px;text-transform:uppercase;}
.client-project-section{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--panel-bg);}
.client-project-section > p{margin:12px 0 0;color:var(--txt-2);font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;}
.client-project-progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.client-project-progress-head strong{font-size:13px;}
.client-project-progress-head span{color:var(--accent-ink);font-size:13px;font-weight:750;}
.client-project-drive{width:100%;justify-content:center;min-height:46px;}
.client-project-reviews .board-comment-empty{min-height:90px;}
a.chip{text-decoration:none;}

/* Customer cockpit: reviews and the scoped company board stay above analytics. */
.customer-dashboard{width:min(1220px,100%);margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.customer-welcome{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);
  gap:22px;align-items:end;min-height:210px;padding:30px;border:1px solid var(--border-strong);
  border-radius:22px;background:linear-gradient(132deg,color-mix(in srgb,var(--accent) 17%,var(--surface)) 0%,var(--surface) 52%,color-mix(in srgb,var(--red) 10%,var(--surface)) 100%);
  box-shadow:var(--shadow-card);
}
.customer-welcome::after{content:"";position:absolute;right:-60px;bottom:-130px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 25%,transparent),transparent 68%);pointer-events:none;}
.customer-welcome > div:first-child{position:relative;z-index:1;}
.customer-welcome h2{max-width:720px;margin:7px 0 10px;color:var(--txt);font-size:clamp(28px,4vw,45px);line-height:1.05;letter-spacing:-1.35px;}
.customer-welcome p{max-width:620px;margin:0;color:var(--txt-2);font-size:14px;line-height:1.65;}
.customer-welcome > .btn{position:relative;z-index:1;justify-self:end;min-height:48px;}
.customer-company-pill{position:relative;z-index:1;justify-self:end;display:flex;align-items:center;gap:11px;max-width:100%;padding:12px 15px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(14px);}
.customer-company-pill > span:first-child{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:11px;background:var(--accent);color:var(--on-accent);}
.customer-company-pill svg{width:18px;height:18px;}
.customer-company-pill div{min-width:0;display:flex;flex-direction:column;gap:2px;}
.customer-company-pill strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);font-size:13px;}
.customer-company-pill small{color:var(--txt-3);font-size:10px;font-weight:750;letter-spacing:.7px;text-transform:uppercase;}
.customer-review-focus{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--card-bg)),var(--card-bg));box-shadow:var(--shadow-card);}
.customer-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;}
.customer-section-head > div{min-width:0;}
.customer-section-head > div > span{display:block;margin-bottom:5px;color:var(--accent-ink);font-size:9.5px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase;}
.customer-section-head h3{margin:0;color:var(--txt);font-size:18px;letter-spacing:-.25px;}
.customer-section-head p{margin:5px 0 0;color:var(--txt-2);font-size:12px;line-height:1.5;}
.customer-section-head > a{display:inline-flex;align-items:center;gap:7px;flex:none;color:var(--accent-ink);font-size:12px;font-weight:750;}
.customer-section-head > a svg{width:15px;height:15px;}
.customer-review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.customer-review-list > a,.customer-review-clear{min-width:0;display:flex;align-items:center;gap:11px;min-height:76px;padding:12px 13px;border:1px solid var(--border);border-radius:13px;background:var(--input-bg);color:var(--txt);transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);}
.customer-review-list > a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 46%,var(--border));background:var(--accent-aura);}
.customer-review-list > a > span:nth-child(2),.customer-review-clear > span{min-width:0;display:flex;flex:1;flex-direction:column;gap:4px;}
.customer-review-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.customer-review-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-2);font-size:11px;}
.customer-review-list > a > svg{width:16px;height:16px;flex:none;color:var(--txt-3);}
.customer-review-status{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:11px;background:var(--accent-aura);color:var(--accent-ink);}
.customer-review-status svg,.customer-review-clear > svg{width:18px;height:18px;}
.customer-review-clear{grid-column:1 / -1;justify-content:center;background:color-mix(in srgb,var(--ok) 6%,var(--input-bg));}
.customer-review-clear > svg{flex:none;color:var(--ok);}
.customer-board-mini{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-card);}
.customer-board-lanes{display:grid;grid-template-columns:repeat(4,minmax(175px,1fr));gap:10px;overflow-x:auto;padding-bottom:3px;}
.customer-board-lane{min-width:0;padding:10px;border:1px solid var(--border);border-radius:13px;background:var(--panel-bg);}
.customer-lane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 3px 10px;color:var(--txt-2);font-size:11px;font-weight:750;letter-spacing:.35px;text-transform:uppercase;}
.customer-lane-head b{min-width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:var(--glass);color:var(--txt);font-size:10px;}
.customer-board-lane [data-cards]{display:flex;flex-direction:column;gap:7px;}
.customer-project-card{display:flex;flex-direction:column;gap:9px;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--card-bg);color:var(--txt);transition:border-color .16s var(--ease),transform .16s var(--ease);}
.customer-project-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 42%,var(--border));}
.customer-project-card strong{font-size:12px;line-height:1.4;}
.customer-project-card > div{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--txt-3);font-size:9.5px;}
.customer-project-card > div > span{padding:4px 6px;border-radius:6px;background:var(--glass);}
.customer-lane-empty{padding:16px 8px;text-align:center;color:var(--txt-3);font-size:10.5px;}
.customer-board-empty{min-height:180px;display:flex;align-items:center;justify-content:center;gap:14px;padding:25px;}
.customer-board-empty > svg{width:30px;height:30px;color:var(--accent-ink);}
.customer-board-empty strong{display:block;margin-bottom:5px;color:var(--txt);font-size:14px;}
.customer-board-empty p{margin:0;color:var(--txt-2);font-size:12px;}
.customer-bottom-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px;align-items:stretch;}
.customer-bottom-grid > *{min-width:0;}
.customer-mcp-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;}
.customer-mcp-card::after{content:"";position:absolute;right:-75px;bottom:-110px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%);pointer-events:none;}
.customer-mcp-icon{position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--accent-aura);color:var(--accent-ink);}
.customer-mcp-icon svg{width:20px;height:20px;}
.customer-mcp-card h3,.customer-mcp-card p,.customer-mcp-card .btn{position:relative;z-index:1;}
.customer-mcp-card h3{margin:0;color:var(--txt);font-size:17px;}
.customer-mcp-card p{margin:0 0 auto;color:var(--txt-2);font-size:12px;line-height:1.6;}
.customer-mcp-card .btn{width:100%;justify-content:center;}

/* Profile pictures + role-scoped MCP export. */
.avatar{overflow:hidden;isolation:isolate;}
.avatar>img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;object-position:center;}
.settings-profile-avatar{width:58px;height:58px;flex:0 0 58px;font-size:17px;border:2px solid color-mix(in srgb,var(--accent) 44%,var(--border));box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 17%,transparent);}
.mcp-export-card{position:relative;overflow:hidden;}
.mcp-export-card::after{content:"";position:absolute;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);pointer-events:none;}
.mcp-export-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:17px;}
.mcp-export-head .card-title{margin-bottom:7px;}
.mcp-export-head p{max-width:620px;margin:0;font-size:12.5px;line-height:1.55;}
.mcp-readonly-badge{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:999px;background:var(--accent-aura);color:var(--accent-ink);font-size:10px;font-weight:750;letter-spacing:.25px;}
.mcp-readonly-badge svg{width:14px;height:14px;}
.mcp-endpoint-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:7px;}
.mcp-endpoint-row .input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
.mcp-scope-note{display:flex;align-items:flex-start;gap:7px;margin:13px 0 0;line-height:1.55;}
.mcp-scope-note svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--accent-ink);}

/* Dashboard-only technical preview.
   Opt in with ?dashboard-ui=pro. All selectors stay below the rendered
   Dashboard root so every other workspace surface keeps its current design. */
.dashboard-tech-preview{
  width:min(1440px,100%);margin-inline:auto;color:var(--txt);
  --dash-tech-line:rgba(255,255,255,.16);
  --dash-tech-line-soft:rgba(255,255,255,.085);
  --dash-tech-panel:#0b0a0d;
  --dash-tech-cell:#0f0e12;
}
.dashboard-tech-preview .dash-greeting{
  min-height:72px;margin:0 0 15px;padding:0 2px 17px;border-bottom:1px solid var(--dash-tech-line);
}
.dashboard-tech-preview .greeting-text{
  font-size:29px;font-weight:590;letter-spacing:-.72px;
}
.dashboard-tech-preview .greeting-text .name{
  font-family:inherit;font-style:normal;font-size:1em;font-weight:590;letter-spacing:-.72px;color:var(--txt);
}
.dashboard-tech-preview .dash-greeting-sub{
  margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.32px;text-transform:uppercase;color:var(--txt-3);
}
.dashboard-preview-label{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--dash-tech-line);border-radius:5px;
  background:transparent;color:var(--txt-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:700;letter-spacing:.9px;
}
.dashboard-preview-label span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);}
.dashboard-tech-preview .week-strip{gap:7px;margin-bottom:0;}
.dashboard-tech-preview .week-cell{
  min-height:78px;padding:10px 7px;border:1px solid var(--dash-tech-line-soft);border-radius:6px;background:var(--dash-tech-panel);box-shadow:none;
}
.dashboard-tech-preview .week-cell[role="button"]:hover{border-color:var(--dash-tech-line);background:var(--dash-tech-cell);}
.dashboard-tech-preview .week-cell.today{
  border-color:color-mix(in srgb,var(--accent) 72%,white 18%);background:color-mix(in srgb,var(--accent) 8%,var(--dash-tech-panel));box-shadow:inset 0 -2px 0 var(--accent);
}
.dashboard-tech-preview .wc-dow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:1.15px;color:var(--txt-3);}
.dashboard-tech-preview .wc-day{font-variant-numeric:tabular-nums;font-size:17px;font-weight:620;}
.dashboard-tech-preview .card,
.dashboard-tech-preview .customer-review-focus,
.dashboard-tech-preview .customer-board-mini,
.dashboard-tech-preview .customer-welcome{
  border:1px solid var(--dash-tech-line);border-radius:8px;background:var(--dash-tech-panel);box-shadow:none;backdrop-filter:none;
}
.dashboard-tech-preview .card:hover{border-color:rgba(255,255,255,.23);box-shadow:none;}
.dashboard-tech-preview .dash-overview-card{margin-top:14px;}
.dashboard-tech-preview .dash-grid{gap:12px!important;margin-top:12px!important;}
.dashboard-tech-preview .dash-col{gap:12px;}
.dashboard-tech-preview .card-head{
  margin:-2px -2px 12px;padding:0 2px 12px;border-bottom:1px solid var(--dash-tech-line-soft);
}
.dashboard-tech-preview .card-title{
  font-size:12px;font-weight:720;letter-spacing:.32px;text-transform:uppercase;
}
.dashboard-tech-preview .card-title svg{width:15px;height:15px;color:var(--txt-2);}
.dashboard-tech-preview .btn{
  border-radius:5px;box-shadow:none;text-transform:none;
}
.dashboard-tech-preview .btn-ghost{border-color:var(--dash-tech-line-soft);background:transparent;}
.dashboard-tech-preview .btn-ghost:hover{border-color:var(--dash-tech-line);background:rgba(255,255,255,.045);transform:none;}
.dashboard-tech-preview .quick-stats-grid{gap:7px;}
.dashboard-tech-preview .qs-item{
  min-height:104px;padding:15px 16px;border:1px solid var(--dash-tech-line-soft);border-radius:6px;background:var(--dash-tech-cell);box-shadow:none;
}
.dashboard-tech-preview .qs-num{font-size:28px;font-weight:610;font-variant-numeric:tabular-nums;letter-spacing:-.9px;}
.dashboard-tech-preview .qs-lbl{font-size:11px;letter-spacing:.15px;color:var(--txt-2);}
.dashboard-tech-preview .dash-section-label,
.dashboard-tech-preview .review-section-head > span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:1.05px;color:var(--txt-3);
}
.dashboard-tech-preview .dash-event-row,
.dashboard-tech-preview .dash-task-row,
.dashboard-tech-preview .activity-row{border-color:var(--dash-tech-line-soft);}
.dashboard-tech-preview .dash-event-row:hover{transform:none;background:rgba(255,255,255,.025);}
.dashboard-tech-preview .dash-row-title,
.dashboard-tech-preview .dash-task-title{font-size:13.5px;font-weight:570;}
.dashboard-tech-preview .dash-row-meta,
.dashboard-tech-preview .activity-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;}
.dashboard-tech-preview .live-camp-row,
.dashboard-tech-preview .health-row{
  border-color:var(--dash-tech-line-soft);border-radius:5px;background:var(--dash-tech-cell);box-shadow:none;
}
.dashboard-tech-preview .live-camp-row:hover,
.dashboard-tech-preview .health-row:hover{border-color:var(--dash-tech-line);transform:none;}
.dashboard-tech-preview .pipe-mini-row{min-height:28px;border-bottom:1px solid var(--dash-tech-line-soft);}
.dashboard-tech-preview .pipe-mini-row:last-child{border-bottom:0;}
.dashboard-tech-preview .overdue-banner{
  border-color:color-mix(in srgb,var(--red) 32%,var(--dash-tech-line-soft));border-radius:5px;background:color-mix(in srgb,var(--red) 6%,var(--dash-tech-cell));
}
.dashboard-tech-preview .dash-task-row.is-overdue{border-radius:5px;background:color-mix(in srgb,var(--red) 4%,var(--dash-tech-cell));}
.dashboard-tech-preview.customer-dashboard{gap:12px;}
.dashboard-tech-preview .customer-welcome::after,
.dashboard-tech-preview .customer-mcp-card::after{display:none;}
.dashboard-tech-preview .customer-review-list>a,
.dashboard-tech-preview .customer-review-clear,
.dashboard-tech-preview .customer-board-lane,
.dashboard-tech-preview .customer-project-card{
  border-color:var(--dash-tech-line-soft);border-radius:5px;background:var(--dash-tech-cell);box-shadow:none;
}
.dashboard-tech-preview .customer-review-status,
.dashboard-tech-preview .customer-mcp-icon{border-radius:5px;}
html[data-theme="light"] .dashboard-tech-preview{
  --dash-tech-line:rgba(28,21,31,.22);
  --dash-tech-line-soft:rgba(28,21,31,.12);
  --dash-tech-panel:#fbfafc;
  --dash-tech-cell:#f4f2f5;
}
html[data-theme="light"] .dashboard-tech-preview .card:hover{border-color:rgba(28,21,31,.32);}
html[data-theme="light"] .dashboard-tech-preview .btn-ghost:hover,
html[data-theme="light"] .dashboard-tech-preview .dash-event-row:hover{background:rgba(28,21,31,.045);}

/* Frame-style review folder library + manual timecode rail. */
.review-folder-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 7px;}
.review-folder-panel-head .review-filter-title{padding-bottom:4px;}
.review-folder-panel-head .icon-btn{width:32px;height:32px;border-radius:8px;}
.review-folder-tree-row{
  width:100%;display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:8px;
  min-height:36px;padding:7px 8px 7px calc(8px + var(--folder-depth,0) * 13px);border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--txt-2);text-align:left;
}
.review-folder-tree-row:hover{border-color:var(--border);background:var(--hover-bg);color:var(--txt);}
.review-folder-tree-row.active{border-color:color-mix(in srgb,var(--accent) 34%,var(--border));background:var(--accent-aura);color:var(--txt);}
.review-folder-tree-row svg{width:15px;height:15px;color:var(--accent-ink);}
.review-folder-tree-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:650;}
.review-folder-tree-row strong{color:var(--txt-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;}
.review-breadcrumbs{display:flex;align-items:center;gap:4px;min-width:0;}
.review-breadcrumbs button{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 4px;border:0;background:transparent;color:var(--txt);font-size:13px;font-weight:700;}
.review-breadcrumbs button:hover{color:var(--accent-ink);}
.review-breadcrumbs svg{width:13px;height:13px;flex:none;color:var(--txt-3);}
.review-folder-grid{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:9px;margin-bottom:18px;}
.review-folder-tile{
  min-width:0;display:flex;align-items:center;gap:10px;min-height:72px;padding:11px 10px;border:1px solid var(--border);border-radius:11px;
  background:var(--input-bg);color:var(--txt);cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease);
}
.review-folder-tile:hover{transform:translateY(-1px);border-color:var(--border-strong);background:var(--hover-bg);}
.review-folder-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:9px;background:var(--accent-aura);color:var(--accent-ink);}
.review-folder-icon svg{width:18px;height:18px;}
.review-folder-tile>.grow{min-width:0;display:flex;flex-direction:column;gap:5px;}
.review-folder-tile strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;}
.review-folder-tile small{color:var(--txt-3);font-size:9.5px;}
.review-folder-tile>.icon-btn{width:30px;height:30px;flex:none;border-radius:7px;}
.review-library-section-label{margin:0 0 9px;color:var(--txt-3);font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;}
.review-folder-client-note{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--txt-2);font-size:12px;}
.review-folder-client-note svg{width:16px;height:16px;color:var(--accent-ink);}
.review-timeline{padding:11px 13px 9px;border:1px solid var(--border);border-radius:12px;background:var(--panel-bg);}
.review-timeline-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;}
.review-timeline-head>span{display:flex;align-items:center;gap:7px;color:var(--txt-2);font-size:10.5px;font-weight:750;letter-spacing:.3px;text-transform:uppercase;}
.review-timeline-head svg{width:14px;height:14px;color:var(--accent-ink);}
.review-timeline-head small{color:var(--txt-3);font-size:9.5px;}
.review-timeline-rail{position:relative;width:100%;height:24px;padding:0;border:0;background:transparent;cursor:crosshair;}
.review-timeline-track{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 64%,#fff),color-mix(in srgb,var(--accent) 18%,var(--glass-2)));box-shadow:0 0 0 1px var(--border);}
.review-timeline-marker{position:absolute;z-index:2;left:var(--marker-position);top:5px;width:3px;height:15px;border-radius:1px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 64%,transparent),0 0 10px var(--accent-glow);cursor:pointer;}
.review-timeline-marker.resolved{opacity:.42;}
.review-timeline-scale{display:flex;justify-content:space-between;color:var(--txt-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;}

@media(max-width:920px){
  .campaigns-page,.board-picker-page,.tasks-page,.learning-page{width:100%;padding-inline:0;}
  .design-picker-popover{position:fixed;right:14px;top:74px;width:min(310px,calc(100vw - 28px));}
  .board-card-modal{width:min(760px,calc(100% - 24px));}
  .board-card-editor{grid-template-columns:1fr;}
  .board-card-activity{border-left:0;border-top:1px solid var(--border);}
  .customer-welcome{grid-template-columns:1fr;align-items:start;}
  .customer-welcome > .btn{justify-self:start;}
  .customer-review-list{grid-template-columns:1fr;}
  .customer-bottom-grid{grid-template-columns:1fr;}
  .dashboard-preview-label{display:none;}
  .review-folder-grid{grid-template-columns:repeat(2,minmax(180px,1fr));}
}
@media(max-width:620px){
  .topbar{gap:9px;padding-inline:14px;}
  .topbar .search-trigger{display:none;}
  .design-choice-grid,.theme-choice-row{grid-template-columns:1fr;}
  .board-picker-intro .page-lead{font-size:29px;}
  .task-page-row{padding:13px;}
  .tasks-page .page-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;}
  .tasks-page .page-actions > .grow{grid-column:1 / -1;width:100%;}
  .tasks-page .page-actions > [data-task-scope]{grid-column:1;display:flex;width:100%;}
  .tasks-page .page-actions > [data-task-scope] button{flex:1;justify-content:center;}
  .tasks-page .page-actions > [data-add]{grid-column:2;min-width:104px;flex:none;justify-content:center;}
  [data-task-list] > .list-row{display:grid !important;grid-template-columns:24px minmax(0,1fr) 44px 44px;align-items:start !important;gap:10px;padding:13px !important;}
  [data-task-list] > .list-row > .checkbox{grid-column:1;grid-row:1;margin-top:3px;}
  [data-task-list] > .list-row > .grow{grid-column:2 / -1;grid-row:1;}
  [data-task-list] > .list-row > div[style*="align-items:flex-end"]{grid-column:2;grid-row:2;width:auto;align-items:flex-start !important;margin:0 !important;}
  [data-task-list] > .list-row > [data-edit]{grid-column:3;grid-row:2;}
  [data-task-list] > .list-row > [data-del]{grid-column:4;grid-row:2;}
  .campaigns-toolbar .btn{width:100%;justify-content:center;}
  .board-card-status-row{grid-template-columns:1fr;}
  .board-card-modal{width:100%;}
  .client-project-modal{width:100%;}
  .client-project-list{width:100%;margin-left:0;}
  .board-card-details,.board-card-activity{padding:18px 16px 21px;}
  .board-page .page-actions{display:flex;align-items:stretch;}
  .board-page-context{order:4;width:100%;}
  .board-wrap{margin-inline:0;padding-inline:0;scroll-padding-inline:0;}
  .board-list{flex-basis:min(86vw,320px);}
  .mcp-export-head{flex-direction:column;}
  .mcp-endpoint-row{grid-template-columns:1fr;}
  .mcp-endpoint-row .btn{width:100%;justify-content:center;}
  .customer-welcome{min-height:0;padding:23px 19px;}
  .customer-welcome h2{font-size:31px;}
  .customer-section-head{align-items:flex-start;}
  .customer-board-mini,.customer-review-focus{padding:15px;}
  .customer-board-lanes{grid-template-columns:repeat(4,minmax(210px,1fr));}
  .review-folder-grid{grid-template-columns:1fr;}
  .review-timeline-head{align-items:flex-start;flex-direction:column;gap:4px;}
}

/* ============================================================
   Readability pass — original QVIC design, calmer spacing
   ============================================================ */

/* Confirmation dialogs use one continuous surface instead of three
   differently tinted horizontal bands. */
.confirm-modal,
.confirm-modal .modal-head,
.confirm-modal .modal-body,
.confirm-modal .modal-foot{
  background:var(--chrome-strong);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.confirm-modal .modal-body{padding-block:22px;}
.confirm-modal .modal-head{border-bottom-color:color-mix(in srgb,var(--border) 72%,transparent);}
.confirm-modal .modal-foot{border-top-color:color-mix(in srgb,var(--border) 72%,transparent);}

/* Dashboard KPI artwork: deliberately oversized and very quiet. The supplied
   PNGs are black on transparency, so dark mode inverts them to soft white. */
.qs-item{position:relative;overflow:hidden;min-height:112px;padding:18px 19px;}
.qs-item > div{position:relative;z-index:1;}
.qs-image-icon{
  position:absolute;right:8px;bottom:4px;z-index:0;
  width:72px!important;height:72px!important;
  opacity:.052!important;filter:invert(1);
}
html[data-theme="light"] .qs-image-icon{filter:none;opacity:.038!important;}
[data-dashboard-tasks] .dash-task-row{min-height:48px;padding-block:10px;}
[data-dashboard-tasks] .dash-task-title{line-height:1.35;}

/* The label composer stays visually closed until + Label is requested. */
[data-toggle-label-create]{align-self:flex-start;}
[data-label-create]{
  margin-top:9px;padding:12px;border:1px solid var(--border);border-radius:13px;
  background:var(--input-bg);box-shadow:inset 0 1px 0 var(--surface-highlight);
}
[data-known-labels]{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);}
.board-label-chip[data-use-label]{cursor:pointer;min-height:32px;}
.board-label-chip[data-use-label]:hover{border-color:var(--label);transform:translateY(-1px);}
.board-label-field [data-label-create] .board-label-create{grid-template-columns:1fr;}
.board-label-field [data-label-create] [data-add-label]{justify-self:start;}

/* Akquise remains horizontally scrollable, but cards and controls are easier
   to scan and the footer action is now a clear, icon-only affordance. */
.acq-board{
  gap:13px;padding:2px 2px 24px;scroll-padding-inline:2px;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
}
.acq-col{flex-basis:250px;gap:8px;scroll-snap-align:start;}
.acq-col-head{min-height:45px;padding:11px 12px;font-size:13.5px;}
.acq-card{padding:11px 12px;}
.acq-card .ac-company{font-size:16px;line-height:1.35;}
.acq-card .ac-contact{font-size:13.5px;line-height:1.45;}
.acq-card .ac-foot{font-size:13px;}
.acq-card .ac-next{font-size:13.5px;}
.acq-add-card{min-height:46px;font-size:0;}
.acq-add-card svg{width:20px;height:20px;}

/* All regular views receive a reliable inner gutter and a sensible reading
   width. Horizontal workspaces keep their own internal scrolling. */
.view > .view-anim{width:min(100%,1600px);margin-inline:auto;}
.canvas-page,.tasks-page,.campaigns-page,.learning-page,.resource-page,.reviews-page{
  max-width:1600px;margin-inline:auto;
}
.view > .board-page{width:min(100%,1680px);max-width:1680px;margin-inline:auto;}

/* Fractional browser zoom must not let list backgrounds or transformed cards
   paint across the rounded column corners. */
.board-list{
  overflow:hidden;isolation:isolate;background-clip:padding-box;
  transform:translateZ(0);
}
.board-list-head{
  position:relative;z-index:2;flex:none;
  background:var(--card-bg);background-clip:padding-box;
}

/* Infinite canvas: the board itself follows the active theme. Grid position
   and scale are supplied by the editor while panning and zooming. */
html[data-theme="dark"] .canvas-viewport{
  --canvas-board-bg:#08070a;
  --canvas-grid-dot:rgba(255,255,255,.32);
  background-color:var(--canvas-board-bg);
  background-image:radial-gradient(circle,var(--canvas-grid-dot) 1px,transparent 1.2px);
  background-size:var(--canvas-grid-size,24px) var(--canvas-grid-size,24px);
  background-position:var(--canvas-grid-x,0px) var(--canvas-grid-y,0px);
}
html[data-theme="light"] .canvas-viewport{
  --canvas-board-bg:#fff;
  --canvas-grid-dot:rgba(12,10,14,.28);
  background-color:var(--canvas-board-bg);
  background-image:radial-gradient(circle,var(--canvas-grid-dot) 1px,transparent 1.2px);
  background-size:var(--canvas-grid-size,24px) var(--canvas-grid-size,24px);
  background-position:var(--canvas-grid-x,0px) var(--canvas-grid-y,0px);
}
.canvas-frame{border-color:var(--border-strong);}
.canvas-handle{border-color:var(--canvas-board-bg,#fff);}

@media(min-width:1400px){
  .view{padding-left:32px;padding-right:32px;}
}

/* The in-app browser often lands just above the mobile breakpoint. At that
   width the former 8/4 mosaic made text and cards unnecessarily cramped. */
@media(min-width:921px) and (max-width:1120px){
  :root{--sidebar-w:224px;}
  .sidebar{padding-inline:12px;}
  .topbar{padding-inline:24px;}
  .view{padding-inline:24px;}
  .dash-grid{grid-template-columns:1fr;}
  .dash-grid > .span-4,.dash-grid > .span-8{grid-column:1;}
  .quick-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:620px){
  .confirm-modal .modal-body{padding-block:18px;}
  [data-label-create]{padding:10px;}
  .qs-image-icon{width:62px!important;height:62px!important;right:6px;bottom:4px;}
  .acq-col{flex-basis:min(82vw,286px);}
}

/* Calendar focus: today is a touch larger in every calendar scale without
   changing the grid geometry around it. */
.day-cell.today .day-num{font-size:14px;font-weight:780;transform:scale(1.07);}
.tg-head .col.today b{display:inline-block;font-size:16.5px;font-weight:780;transform:scale(1.06);}
.minical-grid button.today{font-size:13.5px;font-weight:780;transform:scale(1.06);}

@media(max-width:920px){
  /* Personal/team and type filters are desktop tools. The phone keeps date
     navigation, view selection and the primary Event action. */
  .cal-toolbar [data-cal-filter],
  .cal-toolbar select[data-filter]{display:none;}

  /* The four mobile overview cells should scan as KPIs, not dominate the
     first screen. */
  .dash-overview-card{padding:15px;}
  .dash-overview-card .card-title{margin-bottom:10px!important;}
  .dash-overview-card .quick-stats-grid{gap:8px;}
  .dash-overview-card .qs-item{min-height:84px;padding:11px 12px;}
  .dash-overview-card .qs-num{margin-bottom:5px;font-size:24px;}
  .dash-overview-card .qs-lbl{font-size:12px;line-height:1.3;}
  .dash-overview-card .qs-image-icon{right:4px;bottom:2px;width:50px!important;height:50px!important;}
}

/* Board completion stays independent from the percentage slider: a card can
   be delivered at 100% without silently changing workflow state. */
.board-card{position:relative;padding-right:54px;}
.board-card-complete{
  position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;
  width:34px;height:34px;padding:0;border:1.5px solid var(--border-strong);border-radius:50%;
  background:color-mix(in srgb,var(--input-bg) 90%,transparent);color:transparent;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--surface-highlight);
  transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.board-card-complete svg{width:17px;height:17px;opacity:0;stroke-width:3;transition:opacity .16s var(--ease),transform .16s var(--ease);transform:scale(.72);}
.board-card-complete:hover{transform:scale(1.05);border-color:color-mix(in srgb,var(--ok) 60%,var(--border-strong));}
.board-card-complete:focus-visible{outline:3px solid color-mix(in srgb,var(--ok) 34%,transparent);outline-offset:2px;}
.board-card-complete.is-done{
  border-color:color-mix(in srgb,var(--ok) 76%,white);background:var(--ok);color:#06150F;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 15%,transparent),0 7px 16px color-mix(in srgb,var(--ok) 20%,transparent);
}
.board-card-complete.is-done svg{opacity:1;transform:scale(1);}
.board-card.is-complete{border-color:color-mix(in srgb,var(--ok) 28%,var(--border));}

.board-progress-field{
  padding:13px 14px 11px;border:1px solid var(--border);border-radius:13px;
  background:color-mix(in srgb,var(--input-bg) 88%,var(--surface-2));
}
.board-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.board-progress-head label{margin:0;color:var(--txt);font-size:13px;font-weight:700;}
.board-progress-head output{min-width:46px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:8px;background:var(--accent-aura);color:var(--accent-ink);font-size:12px;font-weight:800;text-align:center;}
.board-progress-range{display:block;width:100%;height:30px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;}
.board-progress-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent-button) 0 var(--board-progress),var(--border-strong) var(--board-progress) 100%);}
.board-progress-range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;-webkit-appearance:none;border:3px solid var(--surface);border-radius:50%;background:var(--accent-soft);box-shadow:0 3px 10px var(--accent-glow);}
.board-progress-range::-moz-range-track{height:6px;border-radius:999px;background:var(--border-strong);}
.board-progress-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent-button);}
.board-progress-range::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--surface);border-radius:50%;background:var(--accent-soft);box-shadow:0 3px 10px var(--accent-glow);}
.board-progress-range:focus-visible{outline:3px solid var(--accent-aura);outline-offset:2px;border-radius:999px;}
.board-progress-scale{display:flex;justify-content:space-between;margin-top:-1px;color:var(--txt-3);font-size:10px;font-weight:650;}

@media(max-width:920px){
  .board-card{padding-right:58px;}
  .board-card-complete{width:38px;height:38px;top:9px;right:9px;}
  .board-progress-field{padding:12px;}
}