/* =====================================================================
   ClientManager — Design System
   Glassmorphism, colorful accents, dark (default) + light theme
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --bg-0:#0b0e17;
  --bg-1:#10121f;
  --bg-2:#161a2b;
  --surface:rgba(255,255,255,0.055);
  --surface-strong:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.18);
  --text-0:#f4f5fb;
  --text-1:#c7cbe0;
  --text-2:#8b90ac;
  --text-3:#5c6182;

  --accent-1:#7c5cff;   /* violet   */
  --accent-2:#22d3ee;   /* cyan     */
  --accent-3:#ff5da2;   /* pink     */
  --accent-4:#ffb020;   /* amber    */
  --accent-5:#34e6a8;   /* mint     */
  --accent-6:#ff6b5e;   /* coral    */

  --grad-1:linear-gradient(135deg,#7c5cff 0%, #22d3ee 100%);
  --grad-2:linear-gradient(135deg,#ff5da2 0%, #ff9966 100%);
  --grad-3:linear-gradient(135deg,#34e6a8 0%, #22d3ee 100%);
  --grad-4:linear-gradient(135deg,#ffb020 0%, #ff5da2 100%);
  --grad-bg:radial-gradient(circle at 15% 0%, rgba(124,92,255,0.28), transparent 45%),
            radial-gradient(circle at 85% 15%, rgba(34,211,238,0.22), transparent 40%),
            radial-gradient(circle at 50% 100%, rgba(255,93,162,0.16), transparent 45%);

  --success:#34e6a8; --success-bg:rgba(52,230,168,0.14);
  --warning:#ffb020; --warning-bg:rgba(255,176,32,0.14);
  --danger:#ff6b5e;  --danger-bg:rgba(255,107,94,0.14);
  --info:#22d3ee;    --info-bg:rgba(34,211,238,0.14);
  --purple:#a78bfa;  --purple-bg:rgba(167,139,250,0.14);
  --muted:#8b90ac;   --muted-bg:rgba(139,144,172,0.14);

  --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:28px;
  --shadow-glass:0 8px 32px rgba(0,0,0,0.35);
  --shadow-pop:0 16px 48px rgba(0,0,0,0.45);
  --blur:blur(18px);
  --sidebar-w:272px;
  --topbar-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}

[data-theme="light"]{
  --bg-0:#eef0f8; --bg-1:#f5f6fb; --bg-2:#ffffff;
  --surface:rgba(255,255,255,0.65);
  --surface-strong:rgba(255,255,255,0.9);
  --border:rgba(20,20,50,0.08);
  --border-strong:rgba(20,20,50,0.14);
  --text-0:#171a2b; --text-1:#3c4160; --text-2:#6a7096; --text-3:#9297b5;
  --shadow-glass:0 8px 32px rgba(30,30,70,0.10);
  --shadow-pop:0 16px 48px rgba(30,30,70,0.16);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
:root{ color-scheme:dark; }
[data-theme="light"]{ color-scheme:light; }
body{
  margin:0;
  font-family:'Plus Jakarta Sans', 'Hind Siliguri', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg-0);
  background-image:var(--grad-bg);
  background-attachment:fixed;
  color:var(--text-0);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent-1); color:#fff; }
code, .mono{ font-family:'JetBrains Mono', monospace; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-1); }

/* ---------- Glass primitives ---------- */
.glass{
  background:var(--surface);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass);
}
.glass-strong{
  background:var(--surface-strong);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);
}

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  position:fixed; inset:0 auto 0 0;
  padding:22px 16px;
  display:flex; flex-direction:column; gap:18px;
  background:var(--surface);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-right:1px solid var(--border);
  z-index:40;
  overflow-y:auto;
  transition:transform .3s var(--ease);
}
.brand{ display:flex; align-items:center; gap:12px; padding:6px 10px 14px; }
.brand-mark{
  width:40px; height:40px; border-radius:12px;
  background:var(--grad-1);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:16px;
  box-shadow:0 6px 18px rgba(124,92,255,0.45);
}
.brand-name{ font-weight:800; font-size:16px; letter-spacing:.2px; }
.brand-sub{ font-size:11px; color:var(--text-2); }

.nav-group{ margin-bottom:6px; }
.nav-label{
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-3); padding:10px 12px 6px; font-weight:700;
}
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  color:var(--text-1); font-size:14px; font-weight:600;
  transition:all .18s var(--ease); position:relative;
}
.nav-link .ic{ width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; opacity:.85; }
.nav-link:hover{ background:var(--surface-strong); color:var(--text-0); transform:translateX(2px); }
.nav-link.active{
  background:var(--grad-1); color:#fff;
  box-shadow:0 8px 20px rgba(124,92,255,.35);
}
.nav-link.active .ic{ opacity:1; }
.nav-badge{
  margin-left:auto; font-size:11px; font-weight:700;
  background:var(--surface-strong); border:1px solid var(--border);
  padding:1px 8px; border-radius:20px; color:var(--text-2);
}
.nav-link.active .nav-badge{ background:rgba(255,255,255,.25); color:#fff; border-color:transparent; }
.nav-badge-hot{ background:var(--grad-1); color:#fff; border-color:transparent; }
.nav-link-dim{ opacity:.55; }
.nav-link-dim:hover{ opacity:1; }
.cat-rail-label{
  display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text-2); padding:14px 12px 6px;
}
.cat-rail-label:first-child{ padding-top:4px; }
.cat-rail-label.muted{ color:var(--text-3, var(--text-2)); opacity:.7; }

.sidebar-scroll{ overflow-y:auto; flex:1; padding-right:2px; }
.sidebar-foot{ padding-top:12px; border-top:1px solid var(--border); }

/* ---------- Main / topbar ---------- */
.main{ flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:var(--topbar-h); position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px; padding:0 26px;
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
}
.page-title{ font-size:19px; font-weight:800; }
.page-sub{ font-size:12.5px; color:var(--text-2); margin-top:1px; }
.topbar-search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:10px;
  background:var(--surface-strong); border:1px solid var(--border);
  border-radius:12px; padding:9px 14px; color:var(--text-2);
}
.topbar-search input{ background:transparent; border:0; outline:0; color:var(--text-0); font-size:13.5px; width:100%; }
.icon-btn{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-strong); border:1px solid var(--border); color:var(--text-1); cursor:pointer;
  transition:all .18s var(--ease); position:relative;
}
.icon-btn:hover{ color:var(--text-0); border-color:var(--border-strong); transform:translateY(-1px); }
.dot-ping{ position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--accent-3); box-shadow:0 0 0 2px var(--bg-1); }

.lang-switch{
  display:flex; align-items:center; background:var(--surface-strong); border:1px solid var(--border);
  border-radius:12px; padding:3px; gap:2px; height:40px; box-sizing:border-box;
}
.lang-switch a{
  padding:0 11px; height:100%; display:flex; align-items:center; border-radius:9px; font-size:12px; font-weight:700;
  color:var(--text-2); text-decoration:none; transition:all .18s var(--ease);
}
.lang-switch a.active{ background:var(--grad-1); color:#fff; box-shadow:0 4px 12px rgba(124,92,255,.35); }
.lang-switch a:not(.active):hover{ color:var(--text-0); }

.avatar{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff; background:var(--grad-2); flex-shrink:0;
}
.avatar.sm{ width:28px; height:28px; font-size:11px; border-radius:8px; }
.avatar.lg{ width:64px; height:64px; font-size:20px; border-radius:16px; }

.content{ padding:26px; max-width:1500px; width:100%; margin:0 auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:12px; font-size:13.5px; font-weight:700;
  border:1px solid transparent; cursor:pointer; transition:all .18s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-1); color:#fff; box-shadow:0 8px 20px rgba(124,92,255,.35); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(124,92,255,.45); }
.btn-ghost{ background:var(--surface-strong); color:var(--text-0); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--text-1); border-color:var(--border-strong); }
.btn-danger{ background:linear-gradient(135deg,#ff6b5e,#ff3d5a); color:#fff; }
.btn-sm{ padding:7px 12px; font-size:12.5px; border-radius:9px; }
.btn-icon{ width:38px; height:38px; padding:0; border-radius:11px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Cards ---------- */
.card{ padding:22px; }
.card-flat{ padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; }
.card-title{ font-size:15px; font-weight:800; }
.card-title .muted{ font-weight:500; color:var(--text-2); font-size:12px; }

/* KPI flash cards */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:22px; }
.kpi-card{
  padding:20px; position:relative; overflow:hidden; border-radius:var(--radius-lg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.kpi-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.kpi-card::after{
  content:''; position:absolute; width:120px; height:120px; border-radius:50%;
  right:-40px; top:-40px; opacity:.35; filter:blur(10px);
  background:var(--kpi-glow, var(--grad-1));
}
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; position:relative; z-index:1; }
.kpi-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--kpi-glow, var(--grad-1)); }
.kpi-trend{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:20px; }
.kpi-trend.up{ color:var(--success); background:var(--success-bg); }
.kpi-trend.down{ color:var(--danger); background:var(--danger-bg); }
.kpi-value{ font-size:28px; font-weight:800; letter-spacing:-.5px; position:relative; z-index:1; }
.kpi-label{ font-size:12.5px; color:var(--text-2); margin-top:2px; position:relative; z-index:1; }

/* ---------- Badges / tags ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:20px; text-transform:capitalize; white-space:nowrap;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-success{ color:var(--success); background:var(--success-bg); }
.badge-warning{ color:var(--warning); background:var(--warning-bg); }
.badge-danger{ color:var(--danger); background:var(--danger-bg); }
.badge-info{ color:var(--info); background:var(--info-bg); }
.badge-purple{ color:var(--purple); background:var(--purple-bg); }
.badge-muted{ color:var(--text-2); background:var(--muted-bg); }

.priority-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.priority-low{ background:var(--info); } .priority-medium{ background:var(--warning); }
.priority-high{ background:var(--accent-6); } .priority-urgent{ background:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); }
table.dtable{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.dtable th{
  text-align:left; padding:12px 16px; color:var(--text-2); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.dtable td{ padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.dtable tbody tr{ transition:background .15s var(--ease); }
table.dtable tbody tr:hover{ background:var(--surface-strong); }
table.dtable tbody tr:last-child td{ border-bottom:none; }
.row-title{ font-weight:700; }
.row-sub{ font-size:12px; color:var(--text-2); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-grid.single{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.span-2{ grid-column:span 2; }
.field label{ font-size:12.5px; font-weight:700; color:var(--text-1); }
.field .hint{ font-size:11px; color:var(--text-3); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=url], input[type=search], input[type=tel],
select, textarea{
  background:var(--surface-strong); border:1px solid var(--border); color:var(--text-0);
  padding:11px 14px; border-radius:11px; font-size:13.5px; font-family:inherit; outline:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease); width:100%;
}
textarea{ resize:vertical; min-height:90px; }
input:focus, select:focus, textarea:focus{ border-color:var(--accent-1); box-shadow:0 0 0 3px rgba(124,92,255,.18); }
select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b90ac'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
/* The options popup is drawn by the OS/browser, not by our CSS box model —
   color-scheme (above) makes most browsers render it in the right theme,
   but we also set explicit colors so it never falls back to unreadable
   light-text-on-white. */
select option{ background-color:var(--bg-1); color:var(--text-0); }
select optgroup{ background-color:var(--bg-1); color:var(--text-2); }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-1); }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,7,14,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  padding:24px; animation:pop .25s var(--ease);
}
.modal.wide{ max-width:760px; }
@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; margin-bottom:18px; }
.modal-title{ font-size:17px; font-weight:800; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---------- Toast ---------- */
.toast-stack{ position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  padding:13px 18px; border-radius:12px; font-size:13.5px; font-weight:600; color:#fff;
  min-width:240px; box-shadow:var(--shadow-pop); animation:slidein .3s var(--ease);
  display:flex; align-items:center; gap:10px;
}
.toast.success{ background:linear-gradient(135deg,#22c88f,#1ea883); }
.toast.error{ background:linear-gradient(135deg,#ff6b5e,#e0435a); }
.toast.info{ background:linear-gradient(135deg,#7c5cff,#5a3fe0); }
@keyframes slidein{ from{ opacity:0; transform:translateX(30px);} to{ opacity:1; transform:none;} }

/* ---------- Marketplace desks (desktop doors) ---------- */
.desktop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; }
.desk{
  padding:22px 16px; text-align:center; cursor:pointer; position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.desk:hover{ transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-pop); }
.desk-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.desk-name{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
.desk-meta{ font-size:11px; color:var(--text-2); }
.desk-door{
  position:absolute; inset:0; border-radius:var(--radius-lg); opacity:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25));
  transition:opacity .25s var(--ease);
}
.desk:hover .desk-door{ opacity:1; }

/* ---------- Calendar ---------- */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-dow{ text-align:center; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; padding-bottom:6px; }
.cal-cell{
  min-height:92px; border-radius:12px; padding:8px; border:1px solid var(--border);
  background:var(--surface); font-size:12px; cursor:pointer; transition:all .15s var(--ease); overflow:hidden;
}
.cal-cell:hover{ border-color:var(--border-strong); }
.cal-cell.other-month{ opacity:.35; }
.cal-cell.today{ border-color:var(--accent-1); box-shadow:0 0 0 2px rgba(124,92,255,.25) inset; }
.cal-daynum{ font-weight:700; margin-bottom:5px; }
.cal-event{ font-size:10.5px; padding:2px 6px; border-radius:6px; margin-bottom:3px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Kanban ---------- */
.kanban{ display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:16px; overflow-x:auto; }
.kanban-col{ padding:14px; min-height:200px; }
.kanban-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 4px; }
.kanban-col-title{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.kanban-card{
  padding:14px; border-radius:14px; margin-bottom:10px; background:var(--surface-strong);
  border:1px solid var(--border); cursor:grab; transition:all .18s var(--ease);
}
.kanban-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.kanban-card-title{ font-weight:700; font-size:13px; margin-bottom:8px; }
.kanban-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }

/* ---------- Notebooks (sticky) ---------- */
.sticky-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.sticky{
  border-radius:18px; padding:18px; min-height:170px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-glass); position:relative; transition:transform .2s var(--ease);
}
.sticky:hover{ transform:translateY(-3px) rotate(-.3deg); }
.sticky-title{ font-weight:800; font-size:14px; margin-bottom:8px; }
.sticky-body{ font-size:12.5px; opacity:.85; flex:1; white-space:pre-wrap; overflow:hidden; }
.sticky-pin{ position:absolute; top:12px; right:12px; opacity:.6; }

/* ---------- Vault ---------- */
.vault-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:var(--surface); margin-bottom:10px; }
.vault-pass{ font-family:'JetBrains Mono',monospace; letter-spacing:2px; }
.vault-copy-ok{ color:var(--success); }

/* ---------- Progress ---------- */
.progress{ height:8px; border-radius:20px; background:var(--surface-strong); overflow:hidden; }
.progress-bar{ height:100%; border-radius:20px; background:var(--grad-1); transition:width .4s var(--ease); }

/* ---------- Utility ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.grid{ display:grid; } .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr); }
.mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mb-3{margin-bottom:12px;}
.text-muted{ color:var(--text-2); } .text-sm{ font-size:12.5px; } .text-xs{ font-size:11px; }
.fw-700{ font-weight:700; } .fw-800{ font-weight:800; }
.w-full{ width:100%; }
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-2); }
.empty-state .ic{ width:56px; height:56px; margin:0 auto 14px; opacity:.5; }
.divider{ height:1px; background:var(--border); margin:16px 0; }
.scroll-x{ overflow-x:auto; }
.pill-tabs{ display:flex; gap:6px; background:var(--surface-strong); padding:5px; border-radius:12px; border:1px solid var(--border); width:fit-content; }
.pill-tab{ padding:8px 16px; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--text-2); cursor:pointer; transition:all .18s var(--ease); }
.pill-tab.active{ background:var(--grad-1); color:#fff; box-shadow:0 6px 14px rgba(124,92,255,.35); }

/* ---------- Contributor guide ---------- */
.guide-block{ padding:16px 0; border-bottom:1px solid var(--border); }
.guide-block:last-child{ border-bottom:none; padding-bottom:0; }
.guide-block:first-child{ padding-top:0; }
.guide-block-label{ font-size:12.5px; font-weight:800; color:var(--text-1); margin-bottom:8px; display:flex; align-items:center; }
.guide-block-text{ font-size:13.5px; line-height:1.75; color:var(--text-1); white-space:pre-wrap; }

/* ---------- Video guides ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.video-card{ display:block; text-decoration:none; color:inherit; border-radius:var(--radius-lg); overflow:hidden; position:relative; transition:transform .25s var(--ease); }
.video-card:hover{ transform:translateY(-4px); }
.video-thumb{
  height:120px; background:var(--grad-4); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.video-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(6,7,14,.85) 100%); }
.video-play{ position:absolute; bottom:10px; right:10px; z-index:1; font-size:11px; font-weight:700; color:#fff; display:flex; align-items:center; gap:5px; }
.video-body{ padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.video-title{ font-size:12.5px; font-weight:700; line-height:1.4; }
.video-delete{ position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; background:rgba(6,7,14,.6); color:#fff; border:none; }

/* ---------- Project brief criteria ---------- */
.criteria-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.criteria-chip{
  position:relative; padding:14px 16px; border-radius:var(--radius); background:var(--surface-strong); border:1px solid var(--border);
}
.criteria-chip .icon-btn{ position:absolute; top:8px; right:8px; width:26px; height:26px; }
.criteria-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); margin-bottom:4px; }
.criteria-value{ font-size:13.5px; font-weight:600; color:var(--text-0); padding-right:20px; }

/* ---------- Auth (login) page ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden; }
.auth-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; }
.auth-card{ width:100%; max-width:400px; padding:36px 32px; position:relative; z-index:1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .form-grid{ grid-template-columns:1fr; }
  .field.span-2{ grid-column:span 1; }
  .kanban{ grid-template-columns:repeat(2,minmax(220px,1fr)); }
}
@media (max-width: 860px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-left:0; }
  .topbar-search{ display:none; }
  .kanban{ grid-template-columns:1fr; }
  .cal-grid{ grid-template-columns:repeat(7,minmax(40px,1fr)); font-size:10px; }
  .cal-cell{ min-height:60px; padding:4px; }
}
.sidebar-toggle{ display:none; }
@media (max-width:860px){ .sidebar-toggle{ display:flex; } }