/* Relay v5 – Main Stylesheet */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  height:100%;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  color:#111827;
  display:flex;flex-direction:column;
  /* ── Light gray background ── */
  background-color:#F1F2F4;
}
@media(min-width:601px){
  html,body{overflow:hidden}
}
@media(max-width:600px){
  html,body{overflow-x:hidden;overflow-y:auto;height:auto;min-height:100vh}
  body{padding-top:52px} /* exact --nav-h value on mobile; keep content below fixed nav */
}

/* ── Glass token variables ── */
:root{
  --glass-bg       : rgba(255,255,255,0.62);
  --glass-bg-light : rgba(255,255,255,0.88);
  --glass-bg-strong: rgba(255,255,255,0.88);
  --glass-blur     : blur(14px);
  --glass-blur-sm  : blur(8px);
  --glass-blur-lg  : blur(22px);
  --glass-border   : rgba(255,255,255,0.55);
  --glass-border-sm: rgba(255,255,255,0.40);
  --glass-shadow   : 0 4px 24px rgba(99,102,241,.10), 0 1px 2px rgba(0,0,0,.06);
  --glass-shadow-lg: 0 8px 40px rgba(99,102,241,.16), 0 2px 8px rgba(0,0,0,.08);
}
:root{
  --primary:#4F46E5;--primary-lt:#EEF2FF;--primary-bd:#C7D2FE;--primary-dk:#3730A3;
  --green:#16A34A;--green-lt:#DCFCE7;--green-bd:#86EFAC;
  --amber:#D97706;--amber-lt:#FEF3C7;--red:#DC2626;--red-lt:#FEE2E2;
  --violet:#7C3AED;--violet-lt:#EDE9FE;
  --pink:#DB2777;--pink-lt:#FDF2F8;--pink-bd:#FBCFE8;
  --t1:#111827;--t2:#374151;--t3:#6B7280;--t4:#9CA3AF;--t5:#D1D5DB;
  --bg:#F5F6FA;--white:#FFFFFF;--border:#E5E7EB;--border2:#F3F4F6;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.1);--shadow-lg:0 12px 32px rgba(0,0,0,.14);
  --r:10px;--r-sm:7px;--r-lg:14px;--nav-h:58px;--sb-w:228px;
  /* Layout tokens — single source of truth */
  --page-px:28px;
  --page-pt:26px;
  --page-pb:60px;
  --page-max:1280px;
  --page-hd-h:52px;   /* height of every page's title+button row */
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:10px}
/* Skip link for keyboard accessibility */
.skip-link{position:absolute;top:-100px;left:8px;z-index:9999;background:var(--primary);color:#fff;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:8px}
/* Disable all transitions when user opts out */
body.no-transitions *{transition:none!important;animation:none!important}

/* ── TOP NAV ── */
/* ── TOP NAV ── (defined below in layout foundation) */
.nav-logo{display:flex;align-items:center;gap:9px;margin-right:20px;flex-shrink:0;cursor:pointer;text-decoration:none}
.logo-mark{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:#4F46E5;flex-shrink:0}
.logo-mark svg{width:16px;height:16px}
.logo-name{font-size:15.5px;font-weight:800;color:var(--t1);letter-spacing:-.4px}
.logo-name span{color:var(--primary)}

/* ── NAV LINKS STRIP ── */
.nav-links{display:flex;align-items:stretch;height:100%;overflow-x:auto;scrollbar-width:none;flex:1}
.nav-links::-webkit-scrollbar{display:none}
/* Proj-chips wrapper must be flex + full height so chips align with other nav items */
#proj-chips{display:flex;align-items:stretch;height:100%;overflow:hidden;max-width:420px}
/* Single shared style for ALL top-nav interactive items */
.nav-link,
.nav-proj-chip{
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  font-size:13.5px;
  font-weight:500;
  color:var(--t3);
  cursor:pointer;
  border:none;
  background:none;
  font-family:inherit;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  box-sizing:border-box;
  transition:color .15s,border-color .15s;
  flex-shrink:0;
  height:100%;
  line-height:1;
}
.nav-proj-chip{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-block;
  line-height:var(--nav-h, 52px);
  padding:0 13px;
  border-bottom:2px solid transparent;
}
.nav-link:hover,.nav-proj-chip:hover{color:var(--t1);}
.nav-link.active,.nav-proj-chip.active-chip{color:var(--t1);font-weight:600;border-bottom-color:var(--primary);}

.nav-right{display:flex;align-items:center;gap:8px;margin-left:10px;flex-shrink:0}
.search-wrap{display:flex;align-items:center;gap:7px;background:var(--border2);border:1.5px solid var(--border);border-radius:8px;padding:0 10px;height:32px;width:190px;transition:all .2s;position:relative}
.search-wrap:focus-within{background:var(--white);border-color:#D0D5E8;box-shadow:none;width:220px}
.search-wrap svg{width:13px;height:13px;stroke:var(--t4);fill:none;stroke-width:2;flex-shrink:0}
.search-wrap input{border:none;background:none;outline:none;font-size:13px;color:var(--t1);width:100%;font-family:inherit}
.search-wrap input::placeholder{color:var(--t4)}
/* User chip — no border, circular avatar */
.user-chip{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:8px;border:none;background:var(--white);cursor:pointer;transition:all .15s}
.user-chip:hover{background:var(--border2)}
/* .user-avt → canonical .avt.avt-sm with gradient bg */
.user-avt{width:28px;height:28px;border-radius:50%;background:#4F46E5;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.user-name{font-size:13px;font-weight:600;color:var(--t1)}

/* ── LAYOUT FOUNDATION ── */
/* Nav: fixed at top */
.top-nav{position:fixed;top:0;left:0;right:0;z-index:300;height:var(--nav-h);background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);box-shadow:0 1px 20px rgba(99,102,241,.08);display:flex;align-items:center;padding:0 var(--page-px);gap:0}
/* Screen wrapper: sits below nav, fills rest of viewport, scrolls independently */
#screen-root{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;overflow:hidden}
/* Screen wrapper: sits below nav, fills rest of viewport, scrolls independently */
.screen{display:none;width:100%;height:100%;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.screen.show{display:block}
@keyframes screen-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* Animate only inner content wrappers — never the fixed sidebar */
.screen.show > .dash-scroll,
.screen.show > .page-body,
.screen.show .proj-content,
.screen.show > .settings-shell{animation:screen-in .2s ease both}
/* Sidebar is position:fixed — must never slide or fade on screen switch */
.sidebar{animation:none!important;transform:none!important}
body.no-transitions .screen.show > .dash-scroll,
body.no-transitions .screen.show > .page-body,
body.no-transitions .screen.show .proj-content,
body.no-transitions .screen.show > .settings-shell{animation:none}

/* ── BUTTONS — single clean system, no conflicts ── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:36px;
  padding:0 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:all .17s;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1;
  box-sizing:border-box;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;flex-shrink:0}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.25)}
.btn-primary:hover{background:var(--primary-dk)}
.btn-secondary{background:var(--white);color:var(--t2);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--border2)}
.btn-danger{background:var(--red-lt);color:var(--red);border:1.5px solid #FECACA}
.btn-danger:hover{background:#FECACA}
.btn-ghost{background:none;color:var(--t3);border:none}
.btn-ghost:hover{background:var(--border2);color:var(--t1)}
/* btn-sm — exact same height as filter-tabs and view-toggle inner items */
.btn-sm{height:36px;padding:0 18px;font-size:13px}
.btn-sm svg{width:14px;height:14px}
.btn-icon{width:36px;height:36px;padding:0;border-radius:8px}

/* ── DASHBOARD layout ── */

/* ── Header ── */
.db-date{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--t3);background:var(--white);border:1px solid var(--border);border-radius:8px;padding:6px 12px;white-space:nowrap}
.db-date svg{width:13px;height:13px;stroke:var(--t4);fill:none;stroke-width:2;flex-shrink:0}

/* ── Stat row ── */
.db-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.db-stat{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow-xs);
}
.db-stat-top{display:flex;align-items:center;justify-content:space-between}
.db-stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-stat-icon svg{width:17px;height:17px;fill:none;stroke-width:2}
.db-stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--t4)}
.db-stat-num{font-size:30px;font-weight:800;color:var(--t1);letter-spacing:-.7px;line-height:1}
.db-stat-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.db-pill{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap}
.db-pill-green{background:#DCFCE7;color:var(--green)}
.db-pill-red  {background:var(--red-lt);color:var(--red)}
.db-pill-blue {background:var(--primary-lt);color:var(--primary-dk)}
.db-pill-gray {background:var(--border2);color:var(--t3)}
.db-pill-amber{background:var(--amber-lt);color:var(--amber)}

/* ── Body two-col ── */
.db-body{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}

/* ── Project list ── */
.db-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow)}
.db-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border2)}
.db-card-title{font-size:13.5px;font-weight:700;color:var(--t1)}
.db-card-link{font-size:12.5px;font-weight:600;color:var(--primary);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.db-card-link:hover{text-decoration:underline}
.db-proj-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background .13s}
.db-proj-row:last-child{border-bottom:none}
.db-proj-row:hover{background:var(--border2)}
/* .db-proj-avt → .avt.avt-md.avt-sq */
.db-proj-avt{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.db-proj-name{font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.db-proj-meta{font-size:11.5px;color:var(--t4);margin-top:2px}
.db-proj-inf{flex:1;min-width:0}

/* ── Feedback list ── */
.db-fb-row{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background .13s}
.db-fb-row:last-child{border-bottom:none}
.db-fb-row:hover{background:var(--border2)}
.db-fb-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:5px}
.db-fb-inf{flex:1;min-width:0}
.db-fb-title{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.db-fb-meta{font-size:11.5px;color:var(--t4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Quick actions ── */
.db-qa{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow)}
.db-qa-head{padding:16px 18px;border-bottom:1px solid var(--border2)}
.db-qa-title{font-size:13.5px;font-weight:700;color:var(--t1)}
.db-qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.db-qa-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:14px 16px;border:none;background:none;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .13s;
  border-bottom:1px solid var(--border2);border-right:1px solid var(--border2);
}
.db-qa-btn:nth-child(2n){border-right:none}
.db-qa-btn:nth-last-child(-n+2){border-bottom:none}
.db-qa-btn:hover{background:var(--primary-lt)}
.db-qa-btn:hover .db-qa-ico{background:var(--primary);border-color:var(--primary)}
.db-qa-btn:hover .db-qa-ico svg{stroke:#fff}
.db-qa-btn:hover .db-qa-lbl{color:var(--primary)}
.db-qa-ico{width:30px;height:30px;border-radius:8px;background:var(--border2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .13s;flex-shrink:0}
.db-qa-ico svg{width:14px;height:14px;fill:none;stroke-width:2;stroke:var(--t3);transition:stroke .13s}
.db-qa-lbl{font-size:12.5px;font-weight:600;color:var(--t1);transition:color .13s}
.db-qa-sub{font-size:11px;color:var(--t4)}

/* ══ COMPONENT: Badge / Status Chip — single canonical system ══
   Usage:  <span class="badge b-blue">In Progress</span>
   Dot variant: <span class="badge badge-dot b-blue">In Progress</span>
   JS helpers:  sBadge(status) → colour class | sLabel(status) → text | statusBadge(s) → full HTML
================================================================ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-blue  {background:var(--primary-lt);color:var(--primary)}
.b-green {background:var(--green-lt);color:var(--green)}
.b-amber {background:var(--amber-lt);color:var(--amber)}
.b-red   {background:var(--red-lt);color:var(--red)}
.b-violet{background:var(--violet-lt);color:var(--violet)}
.b-gray  {background:var(--border2);color:var(--t3)}
/* ══ COMPONENT: Card — canonical system ══
   .card               standard padded card
   .card-flush         no padding — use .card-hd + .card-body inside
   .card-hd            flex header row (title + optional action)
   .card-title         primary label inside .card-hd
   .card-sub           secondary subtitle below title
   .card-hd-action     right-aligned link/button inside .card-hd
================================================================ */
.card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--glass-shadow)}
.card-flush{padding:0;overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-flush .card-hd{padding:14px 18px;border-bottom:1px solid var(--border2);margin-bottom:0}
.card-body{padding:16px 18px}
.card-title{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:-.2px}
.card-sub{font-size:12px;color:var(--t3);margin-top:2px}
.card-hd-action{font-size:12.5px;font-weight:600;color:var(--primary);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit;display:inline-flex;align-items:center;gap:4px;transition:background .15s,gap .15s}
.card-hd-action:hover{background:var(--primary-lt)}
.empty-box{display:flex;flex-direction:column;align-items:center;padding:30px 20px;text-align:center}
.empty-ico{width:48px;height:48px;border-radius:12px;background:var(--border2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.empty-ico svg{width:20px;height:20px;stroke:var(--t4);fill:none;stroke-width:1.8}
.empty-ttl{font-size:14px;font-weight:600;color:var(--t2);margin-bottom:4px}
.empty-desc{font-size:12.5px;color:var(--t4);max-width:220px;line-height:1.5;margin-bottom:14px}
.page-hd-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--page-hd-h);margin-bottom:22px}
.page-hd-left{display:flex;flex-direction:column;justify-content:center;gap:3px}
.page-hd-title{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1.2}
.page-hd-sub{font-size:13px;color:var(--t3);margin-top:5px}
.page-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.task-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--border2)}
.task-row:last-child{border-bottom:none}
.chk{width:16px;height:16px;border:2px solid var(--border);border-radius:4px;cursor:pointer;flex-shrink:0;margin-top:1px;transition:all .15s;display:flex;align-items:center;justify-content:center}
.chk:hover{border-color:var(--primary)}
.chk.done-chk{background:var(--primary);border-color:var(--primary)}
.chk.done-chk::after{content:'✓';color:#fff;font-size:9px;font-weight:800;line-height:1}
.task-inf{flex:1;min-width:0}
.task-nm{font-size:13px;font-weight:500;color:var(--t1)}
.task-nm.struck{text-decoration:line-through;color:var(--t4)}
.task-pj{font-size:11.5px;color:var(--t4);margin-top:1px}
.pri{padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700;flex-shrink:0}
.pri-h{background:var(--red-lt);color:var(--red)}
.pri-m{background:var(--amber-lt);color:var(--amber)}
.pri-l{background:var(--green-lt);color:var(--green)}

/* ══ COMPONENT: Avatar — canonical system ══
   Sizes:  .avt-xs(20) .avt-sm(28) .avt-md(36) .avt-lg(48) .avt-xl(64)
   Shape:  default=circle | .avt-sq=rounded square
   JS helper: avatarHtml(initials, bg, size='sm')
================================================================ */
.avt{display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;border-radius:50%}
.avt-xs{width:20px;height:20px;font-size:8px}
.avt-sm{width:28px;height:28px;font-size:11px}
.avt-md{width:36px;height:36px;font-size:13px}
.avt-lg{width:48px;height:48px;font-size:17px}
.avt-xl{width:64px;height:64px;font-size:24px}
.avt-sq{border-radius:10px}
.avt-sq.avt-xs{border-radius:5px}
.avt-sq.avt-sm{border-radius:7px}
.avt-sq.avt-md{border-radius:9px}
.avt-sq.avt-lg{border-radius:12px}
.avt-sq.avt-xl{border-radius:16px}
.more-btn{width:28px;height:28px;border-radius:6px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t4);transition:all .15s;flex-shrink:0}
.more-btn:hover{background:var(--border);color:var(--t2)}
.more-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.g-legend{display:flex;gap:14px;margin-bottom:12px}
.leg-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t3)}
.leg-dot{width:8px;height:8px;border-radius:50%}

/* ══════════════════════════════════════
   DASHBOARD — refined design system
══════════════════════════════════════ */
.dash-scroll{min-height:100%;padding:var(--page-pt) var(--page-px) var(--page-pb);background:transparent}
.dash-body{display:flex;flex-direction:column;gap:24px}

/* ── Header — shared standard across all pages ── */
.db-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.db-header-left{display:flex;flex-direction:column;gap:5px}
.db-greeting{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1.2}
.db-sub{font-size:13px;color:var(--t3);font-weight:400}
.db-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* New Project button — inherits height/font-size from .btn */
.db-new-proj-btn{
  background:#4F46E5;
  color:#fff;
  padding:0 18px;
  font-weight:600;
  border-radius:9px;
  box-shadow:0 4px 12px rgba(79,70,229,.3);
  transition:all .2s;
}
.db-new-proj-btn:hover{box-shadow:0 6px 18px rgba(79,70,229,.42);transform:translateY(-1px)}
.db-new-proj-btn svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.5}

/* ── STAT CARDS ROW ── */
.db-stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;
  align-items:stretch;
}
.db-stat2{
  border-radius:16px;
  padding:22px 24px;
  display:flex;flex-direction:column;gap:0;
  box-shadow:0 2px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04);
  transition:box-shadow .2s,transform .2s;
  cursor:default;
  position:relative;overflow:hidden;
  min-height:110px;
}
.db-stat2:hover{box-shadow:0 8px 24px rgba(0,0,0,.13);transform:translateY(-2px)}
/* Coloured card themes */
.db-stat2:nth-child(1){background:#4F46E5}
.db-stat2:nth-child(2){background:#16A34A}
.db-stat2:nth-child(3){background:#EA580C}
.db-stat2:nth-child(4){background:#7C3AED}
/* Decorative circle overlay */
.db-stat2::after{
  content:'';position:absolute;
  right:-20px;bottom:-20px;
  width:90px;height:90px;border-radius:50%;
  background:rgba(255,255,255,.1);
  pointer-events:none;
}
.db-stat2-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-bottom:14px;
}
.db-stat2-icon svg{width:18px;height:18px;fill:none;stroke-width:2;stroke:#fff}
.db-stat2-body{display:flex;flex-direction:column;gap:0;margin-top:auto}
.db-stat2-num{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.7px;line-height:1}
.db-stat2-label{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.75);margin-top:5px}

/* ── PROJECT CARDS SECTION ── */
.db-proj-section{display:flex;flex-direction:column;gap:14px}
/* db-section-* / db-card-* → all use canonical .card-hd / .card-title / .card-hd-action */
.db-section-hd{display:flex;align-items:center;justify-content:space-between}
.db-section-title{font-size:15px;font-weight:700;color:var(--t1);letter-spacing:-.2px}
.db-section-link{font-size:13px;font-weight:600;color:var(--primary);background:none;border:none;cursor:pointer;font-family:inherit;padding:4px 0;display:flex;align-items:center;gap:4px;transition:gap .15s}
.db-section-link:hover{gap:7px}

.db-proj-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}

/* single project card — clean with left accent bar */
.db-pcard{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:0;
  position:relative;cursor:pointer;
  transition:box-shadow .2s,transform .2s;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:var(--glass-shadow);
}
.db-pcard:hover{box-shadow:var(--glass-shadow-lg);transform:translateY(-2px)}

/* Coloured top bar */
.db-pcard-blue   .db-pcard-bar{background:#4F46E5}
.db-pcard-pink   .db-pcard-bar{background:var(--pink)}
.db-pcard-green  .db-pcard-bar{background:#16A34A}
.db-pcard-amber  .db-pcard-bar{background:#D97706}
.db-pcard-violet .db-pcard-bar{background:#7C3AED}
/* Dynamic project color via CSS custom property (set inline) */
.db-pcard .db-pcard-bar{background:var(--pcard-accent,#4F46E5)}

.db-pcard-inner{padding:18px 20px 18px;display:flex;flex-direction:column;gap:0;flex:1}

/* Status badge — now uses unified .badge.badge-dot system */

/* Card title */
.db-pcard-title{font-size:20px;font-weight:700;color:var(--t1);letter-spacing:-.2px;line-height:1.3;margin-bottom:16px}

/* Stat chips */
.db-pcard-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.db-pcard-stat{
  display:flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:500;color:var(--t2);
  background:var(--border2);border:1px solid var(--border);
  border-radius:6px;padding:3px 8px;
}
.db-pcard-stat svg{width:11px;height:11px;stroke:var(--t4);fill:none;stroke-width:2}

/* Footer */
.db-pcard-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #F1F5F9;margin-top:auto}
.db-avatar-stack{display:flex;align-items:center}
.db-avatar-stack .avt{
  width:26px;height:26px;border-radius:50%;
  border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;
  margin-left:-6px;flex-shrink:0;
}
.db-avatar-stack .avt:first-child{margin-left:0}
.db-pcard-cta{
  font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  transition:gap .15s;
  white-space:nowrap;
}
.db-pcard-blue   .db-pcard-cta{color:var(--primary)}
.db-pcard-pink   .db-pcard-cta{color:var(--pink)}
.db-pcard-green  .db-pcard-cta{color:var(--green)}
.db-pcard-amber  .db-pcard-cta{color:var(--amber)}
.db-pcard-violet .db-pcard-cta{color:var(--violet)}
.db-pcard-cta:hover{gap:7px}

/* ── BOTTOM TWO-COL ── */
.db-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.db-bottom-card{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--glass-shadow);
  display:flex;flex-direction:column;
  min-height:280px;
}
.db-bottom-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 14px;
  border-bottom:1px solid var(--border2);
}
.db-bottom-title{font-size:14px;font-weight:700;color:var(--t1)}
.db-view-all{
  font-size:12.5px;font-weight:600;color:var(--primary);
  background:none;border:none;cursor:pointer;font-family:inherit;padding:4px 0;
  display:flex;align-items:center;gap:3px;transition:gap .15s;
}
.db-view-all:hover{gap:6px}

/* ── ACTIVITY LIST ── */
.db-act-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--border2);
}
.db-act-row:last-child{border-bottom:none}
/* .db-act-avt → .avt.avt-md.avt-sq */
.db-act-avt{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.db-act-body{flex:1;min-width:0}
.db-act-name{font-size:13px;font-weight:600;color:var(--t1);display:inline}
.db-act-action{font-size:13px;color:#374151;display:inline}
.db-act-action a{color:var(--primary);font-weight:500;text-decoration:none}
.db-act-action a:hover{text-decoration:underline}
.db-act-meta{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11.5px;color:var(--t4)}
.db-act-meta svg{width:10px;height:10px;stroke:var(--t4);fill:none;stroke-width:2;flex-shrink:0}
.db-act-time{font-size:11.5px;color:var(--t4);white-space:nowrap;flex-shrink:0;margin-top:2px}

/* ── TASKS LIST ── */
.db-task-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--border2);
}
.db-task-row:last-child{border-bottom:none}
.db-task-chk{
  width:17px;height:17px;border-radius:50%;border:2px solid #CBD5E1;
  flex-shrink:0;margin-top:2px;cursor:pointer;
  transition:all .15s;
}
.db-task-chk:hover{border-color:var(--primary)}
.db-task-body{flex:1;min-width:0}
.db-task-name{font-size:13px;font-weight:600;color:var(--t1);line-height:1.35}
.db-task-proj{font-size:11.5px;color:var(--t4);margin-top:2px}
.db-task-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
/* db-task-pri merged into canonical .pri system above */
.db-task-date{font-size:11.5px;color:var(--t4)}

/* db-empty-state merged into canonical .empty-box system above */



/* ══ ONBOARDING GUIDE ══ */
/* ══ REUSABLE COLOR PICKER COMPONENT ══ */
.color-opts{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.color-opt{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;
  outline:2px solid transparent;outline-offset:3px;
  transition:outline .15s,transform .15s;flex-shrink:0;
}
.color-opt.sel{outline:2px solid var(--t1);outline-offset:3px;}
.color-opt-custom{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:1.5px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s;flex-shrink:0;position:relative;overflow:hidden;
}
.color-opt-custom:hover{border-color:var(--t3)}
.color-opt-custom.sel{outline:2px solid var(--t1);outline-offset:3px;border-style:solid}
.color-opt-custom svg{width:12px;height:12px;stroke:var(--t3);fill:none;stroke-width:2;position:relative;z-index:1}
#color-custom-inp{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* Color picker POPUP (floating, fixed) */
.cp-popup{
  position:fixed;z-index:2000;
  background:var(--glass-bg-light);
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow-lg);
  padding:0;
  width:300px;
  display:none;
  flex-direction:column;
  animation:cp-pop-in .18s cubic-bezier(.4,0,.2,1);
}
.cp-popup.open{display:flex}
@keyframes cp-pop-in{from{opacity:0;transform:scale(.96) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cp-popup-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px 11px;
  border-bottom:1px solid var(--border2);
}
.cp-popup-title{font-size:13.5px;font-weight:700;color:var(--t1);letter-spacing:-.1px}
.cp-popup-close{
  width:26px;height:26px;border-radius:6px;border:none;
  background:var(--border2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0;
}
.cp-popup-close:hover{background:var(--border)}
.cp-popup-close svg{width:12px;height:12px;stroke:var(--t2);fill:none;stroke-width:2.5}
.cp-popup-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}

/* Gradient canvas */
.cp-canvas-wrap{position:relative;border-radius:8px;overflow:hidden;cursor:crosshair;touch-action:none;flex-shrink:0}
.cp-canvas{width:100%;height:160px;display:block;border-radius:8px}
.cp-thumb{
  position:absolute;width:16px;height:16px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.3);
  pointer-events:none;transform:translate(-50%,-50%);
}

/* Sliders + preview row */
.cp-sliders-row{display:flex;align-items:center;gap:10px}
.cp-sliders{flex:1;display:flex;flex-direction:column;gap:8px}
.cp-slider-wrap{position:relative;height:13px;border-radius:7px;cursor:pointer;touch-action:none}
.cp-slider-thumb{
  position:absolute;top:50%;width:17px;height:17px;border-radius:50%;
  transform:translate(-50%,-50%);
  border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 1px 3px rgba(0,0,0,.3);
  pointer-events:none;background:var(--white);
}
.cp-hue-track{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border-radius:7px}
/* Note: hue track gradient is functional, not decorative */
.cp-alpha-track{border-radius:7px;position:relative;overflow:hidden}
.cp-alpha-track::before{
  content:'';position:absolute;inset:0;border-radius:7px;
  background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0/10px 10px;
}
.cp-alpha-fill{position:absolute;inset:0;border-radius:7px}

/* Preview circle */
.cp-preview{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  position:relative;overflow:hidden;
}
.cp-preview::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/8px 8px;
  z-index:0;
}
.cp-preview-fill{position:absolute;inset:0;border-radius:50%;z-index:1}

/* Input fields */
.cp-inputs{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:5px}
.cp-input-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.cp-input{
  width:100%;font-size:11.5px;font-weight:500;color:var(--t1);
  border:1px solid var(--border);border-radius:7px;
  padding:5px 3px;text-align:center;background:var(--white);
  font-family:var(--font-mono,monospace);
  transition:border-color .15s;
}
.cp-input:focus{outline:none;border-color:#D0D5E8;box-shadow:none}
.cp-input-label{font-size:10px;font-weight:600;color:var(--t4);letter-spacing:.4px;text-transform:uppercase}

/* ── Status radio pills ── */
.status-radio-group{display:flex;gap:7px;flex-wrap:wrap}
.status-radio-label{
  display:flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:20px;
  font-size:12.5px;font-weight:500;color:var(--t2);
  border:1px solid var(--border);background:var(--white);
  cursor:pointer;transition:all .15s;user-select:none;
}
.status-radio-label:hover{border-color:var(--t3);color:var(--t1)}
.status-radio-label input{display:none}
.status-radio-label.checked-inprogress{background:var(--primary-lt);border-color:#C7D2FE;color:var(--primary-dk)}
.status-radio-label.checked-review{background:var(--pink-lt);border-color:var(--pink-bd);color:var(--pink)}
.status-radio-label.checked-completed{background:var(--green-lt);border-color:#BBF7D0;color:var(--green)}
.status-radio-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── Subtle info note ── */
.form-info-subtle{
  font-size:11.5px;color:var(--t4);
  display:flex;align-items:center;gap:5px;
  padding:0;background:none;border:none;
  line-height:1.5;
}
.form-info-subtle svg{width:12px;height:12px;stroke:var(--t4);fill:none;stroke-width:2;flex-shrink:0}
/* ── ALL PROJECTS page wrapper ── */
.page-body{min-height:100%;padding:var(--page-pt) var(--page-px) var(--page-pb);background:transparent}
.page-inner{}
/* Toolbar mirrors greeting-row exactly */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--page-hd-h);
  margin-bottom:22px;
}
.toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* File type tabs in add-file modal */
.file-type-tab{transition:all .18s!important;border-color:var(--border)!important;color:var(--t3)!important;background:var(--white)!important}
.file-type-tab.active-file-tab{background:var(--primary-lt)!important;border-color:var(--primary)!important;color:var(--primary)!important;box-shadow:0 0 0 2px rgba(79,70,229,.08)!important}
.file-type-tab svg{transition:stroke .18s}
.file-type-tab.active-file-tab svg{stroke:var(--primary)}

/* Scale-in animation for modal content sections */
@keyframes scaleIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.file-ctx-animate{animation:scaleIn .22s cubic-bezier(.34,1.36,.64,1) both}


/* ══ COMPONENT: Tab Group — canonical system ══
   Variants via data-variant:
     [data-variant="pill"]    — segmented pill tabs (filter bars)
     [data-variant="icon"]    — icon-only view-toggle
     [data-variant="sidebar"] — sidebar nav items (handled by .sb-item)
   Active state always: .tab.on
================================================================ */
.tab-group{display:flex;align-items:center;gap:3px;background:var(--border2);border-radius:8px;padding:4px;height:36px;box-sizing:border-box}
.tab{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;height:28px;border-radius:5px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border:none;background:none;transition:all .15s;font-family:inherit;white-space:nowrap;box-sizing:border-box}
.tab.on{background:var(--white);color:var(--t1);font-weight:600;box-shadow:var(--shadow-xs)}
.tab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
/* icon variant — square fixed-size tabs */
.tab-group[data-variant="icon"] .tab{width:28px;height:28px;padding:0}
/* pill variant — no background on container */
.tab-group[data-variant="pill"]{background:none;padding:0;gap:4px;height:auto}
.tab-group[data-variant="pill"] .tab{height:32px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);padding:0 14px}
.tab-group[data-variant="pill"] .tab.on{background:var(--primary-lt);color:var(--primary);border-color:var(--primary-bd);font-weight:600}

/* Legacy aliases — keep working during transition */
.filter-tabs{display:flex;align-items:center;gap:3px;background:var(--border2);border-radius:8px;padding:4px;height:36px;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-tabs::-webkit-scrollbar{display:none}
.ftab{display:inline-flex;align-items:center;padding:0 12px;height:28px;border-radius:5px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border:none;background:none;transition:all .15s;font-family:inherit;white-space:nowrap;box-sizing:border-box}
.ftab.on{background:var(--white);color:var(--t1);font-weight:600;box-shadow:var(--shadow-xs)}
.view-toggle{display:flex;gap:2px;background:var(--border2);border-radius:8px;padding:4px;height:36px;box-sizing:border-box}
.vtab{width:28px;height:28px;border-radius:5px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t4);transition:all .15s;box-sizing:border-box}
.vtab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.vtab.on{background:var(--white);color:var(--t1);box-shadow:var(--shadow-xs)}

/* Board view (cards) */
.proj-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pcard{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:all .2s;position:relative}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pcard.dragging{opacity:.5;cursor:grabbing}
.pcard.drag-over{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-lt)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pcard-avt{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}
.pcard-nm{font-size:14px;font-weight:700;color:var(--t1)}
.pcard-mt{font-size:12px;color:var(--t4)}
.pcard-desc{font-size:12.5px;color:var(--t3);margin-bottom:12px;line-height:1.4;min-height:18px}
.pcard-stats{display:flex;gap:14px;padding-top:12px;border-top:1px solid var(--border2)}
.pstat{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--t4)}
.pstat svg{width:13px;height:13px;stroke:var(--t4);fill:none;stroke-width:2}
/* Drag handle */
.drag-handle{
  display:flex;align-items:center;justify-content:center;
  width:auto;flex-shrink:0;padding:5px 0 2px;
  color:var(--t5);cursor:grab;
  opacity:0;transition:opacity .15s;
}
/* Board card drag handle: full-width footer strip */
.pcard .drag-handle{
  width:100%;border-top:1px solid var(--border2);margin-top:12px;
}
.pcard:hover .drag-handle{opacity:1}
/* List row drag handle: small inline icon, always visible */
.plv-row .drag-handle{
  width:20px;height:20px;padding:0;opacity:1;border:none;margin:0;flex-shrink:0;
}
.drag-handle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* List view */
.proj-list-view{display:flex;flex-direction:column;gap:0;border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm)}
.plv-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 80px;gap:12px;padding:10px 16px;background:var(--border2);border-bottom:1px solid var(--border)}
.plv-th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t4)}
.plv-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 80px;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border2);align-items:center;cursor:pointer;transition:background .15s;position:relative}
.plv-row:last-child{border-bottom:none}
.plv-row:hover{background:var(--bg)}
.plv-row.dragging{opacity:.4;cursor:grabbing}
.plv-row.drag-over{border-top:2px solid var(--primary)}
.plv-nm-wrap{display:flex;align-items:center;gap:10px}
.plv-avt{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.plv-nm{font-size:13.5px;font-weight:600;color:var(--t1)}
.plv-desc{font-size:11.5px;color:var(--t4);margin-top:1px}
.plv-td{font-size:13px;color:var(--t2)}
.plv-td-meta{font-size:12px;color:var(--t4)}

/* ── PROJECT VIEW ── */
.proj-shell{display:block;min-height:calc(100vh - var(--nav-h))}

/* Sidebar — position:fixed so it never participates in document flow shifts */
.sidebar{
  position:fixed;
  top:var(--nav-h);
  left:0;
  width:var(--sb-w);
  height:calc(100vh - var(--nav-h));
  background:var(--glass-bg-strong);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);
  padding:14px 10px 24px;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:200;
}
/* Project info — clean */
.sb-proj-info{padding:4px 10px 10px;margin-bottom:4px}
.sb-proj-row{display:flex;align-items:center;gap:8px}
.sb-proj-avt{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.sb-proj-nm{font-size:13px;font-weight:700;color:var(--t1);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-divider{height:1px;background:var(--border2);margin:6px 2px}
/* Back to All Projects button in sidebar */
.sb-back{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left;transition:all .12s;margin-bottom:4px}
.sb-back:hover{color:var(--primary);background:var(--primary-lt)}
.sb-back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}
.sb-sec-lbl{display:none}
/* Sidebar items — unified pill style matching settings sidebar */
.sb-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  color:var(--t3);
  cursor:pointer;
  border:none;
  background:none;
  transition:all .12s;
  width:100%;
  text-align:left;
  font-family:inherit;
  margin-bottom:8px;
}
.sb-item:hover{color:var(--t1);background:var(--border2)}
.sb-item.sb-on{color:var(--primary);font-weight:600;background:var(--primary-lt)}
.sb-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0}
.sb-cnt{margin-left:auto;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--border2);color:var(--t4)}
.sb-item.sb-on .sb-cnt{background:var(--primary-lt);color:var(--primary)}
/* Version box in sidebar — reduced prominence, no border */
.sb-ver-box{background:var(--border2);border-radius:8px;padding:9px 10px;margin-top:auto}
.sb-ver-lbl{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--t4);margin-bottom:4px}
.sb-ver-lbl svg{width:10px;height:10px;stroke:var(--t4);fill:none;stroke-width:2}
.sb-ver-num{font-size:15px;font-weight:700;color:var(--t2);letter-spacing:-.2px}
.sb-ver-tag{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:4px;background:var(--border);color:var(--t3);font-size:9.5px;font-weight:600;vertical-align:middle}
.sb-ver-note{font-size:11px;color:var(--t4);margin-top:3px;line-height:1.4}
.sb-ver-link{font-size:11px;color:var(--t3);font-weight:600;cursor:pointer;border:none;background:none;font-family:inherit;padding:0;margin-top:6px;display:flex;align-items:center;gap:3px;transition:color .15s}
.sb-ver-link:hover{color:var(--primary)}
.sb-ver-link svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5}

/* Project content — offset for fixed sidebar */
.proj-content{margin-left:var(--sb-w);padding:var(--page-pt) var(--page-px) var(--page-pb);background:transparent;min-height:100%;min-width:0}
.proj-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--page-hd-h);margin-bottom:22px;position:relative;z-index:10}
.proj-hd h2{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.4px;line-height:1.15}
.proj-hd p{font-size:13px;color:var(--t3)}
.proj-hd-right{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative}

/* Project stat grid */
.ps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.ps-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--glass-shadow);transition:all .2s}
.ps-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.ps-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.ps-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.ps-ico svg{width:16px;height:16px;fill:none;stroke-width:1.9}
.ps-num{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1;margin-bottom:2px}
.ps-lbl{font-size:12px;color:var(--t3)}
.ps-foot{display:flex;gap:7px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--border2);margin-top:8px}
.ps-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:5px;font-weight:600}

/* Mid 2 col */
.mid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
/* Progress */
.prog-body{display:flex;gap:18px;margin-top:12px;align-items:flex-start}
.circ-wrap{flex-shrink:0}
.bars-col{flex:1;display:flex;flex-direction:column;gap:11px;padding-top:2px}
.bar-top{display:flex;justify-content:space-between;margin-bottom:4px}
.bar-nm{font-size:12.5px;font-weight:500;color:var(--t2)}
.bar-fr{font-size:12px;color:var(--t4)}
.bar-track{height:6px;background:var(--border2);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}

/* Timeline */
.tl-wrap{display:flex;flex-direction:column}
.tl-item{display:flex;gap:10px;padding-bottom:14px}
.tl-item:last-child{padding-bottom:0}
.tl-left{display:flex;flex-direction:column;align-items:center;width:26px;flex-shrink:0}
.tl-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);flex-shrink:0}
.tl-ico svg{width:12px;height:12px;fill:none;stroke-width:2}
.tl-line{width:1.5px;background:var(--border2);flex:1;margin-top:4px;min-height:6px}
.tl-item:last-child .tl-line{display:none}
.tl-body{flex:1;min-width:0;padding-top:3px}
.tl-title{font-size:12.5px;font-weight:500;color:var(--t1);line-height:1.4}
.tl-who{font-size:11.5px;color:var(--t4);margin-top:1px}
.tl-when{font-size:11.5px;color:var(--t4);flex-shrink:0;padding-top:3px;white-space:nowrap}

/* Bot 3 col */
.bot3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ══════════════════════════════════════
   UNIFIED TABLE SYSTEM — nx-tbl
   Single source of truth for all app tables.
   Usage: <table class="nx-tbl"> on any data table.
   Variant: add class "nx-tbl-ruled" for a fully bordered table.
══════════════════════════════════════ */
.nx-tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm)}
.nx-tbl{width:100%;border-collapse:collapse;table-layout:auto}
/* Header */
.nx-tbl thead tr{background:var(--border2)}
.nx-tbl th{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.55px;color:var(--t4);text-align:left;
  padding:11px 16px;
  border-bottom:1.5px solid var(--border);
  white-space:nowrap;
  user-select:none;
}
.nx-tbl th:last-child{text-align:right}
/* Body rows */
.nx-tbl td{
  padding:13px 16px;
  border-bottom:1px solid var(--border2);
  font-size:13px;color:var(--t2);
  vertical-align:middle;
  line-height:1.4;
}
.nx-tbl td:last-child{text-align:right;white-space:nowrap}
.nx-tbl tbody tr:last-child td{border-bottom:none}
.nx-tbl tbody tr:hover td{background:var(--bg)}
/* Compact mode (toggled via settings) */
.compact-tables .nx-tbl th{padding:8px 14px;font-size:10px}
.compact-tables .nx-tbl td{padding:9px 14px;font-size:12px}

/* ── Legacy table aliases — keeps old class names working ── */
/* Pages table (overview mini-table inside card) */
.pg-tbl{width:100%;border-collapse:collapse}
.pg-tbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t4);text-align:left;padding:10px 14px;background:var(--border2);border-bottom:1px solid var(--border)}
.pg-tbl td{padding:13px 14px;border-bottom:1px solid var(--border2);font-size:13px;color:var(--t2);vertical-align:middle}
.pg-tbl tr:last-child td{border-bottom:none}
.pg-nm{display:flex;align-items:center;gap:6px}
.pg-nm svg{width:13px;height:13px;stroke:var(--t4);fill:none;stroke-width:1.8;flex-shrink:0}

/* Feedback table — now delegates to nx-tbl, keeping .fb-tbl for generated HTML */
.fb-tbl-wrap{overflow-x:auto}
.fb-tbl{width:100%;border-collapse:collapse}
.fb-tbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;color:var(--t4);text-align:left;padding:11px 16px;background:var(--border2);border-bottom:1.5px solid var(--border);white-space:nowrap}
.fb-tbl th:last-child{text-align:right}
.fb-tbl td{padding:13px 16px;border-bottom:1px solid var(--border2);font-size:13px;color:var(--t2);vertical-align:middle}
.fb-tbl td:last-child{text-align:right;white-space:nowrap}
.fb-tbl tr:last-child td{border-bottom:none}
.fb-tbl tbody tr:hover td{background:var(--bg)}
.compact-tables .fb-tbl th{padding:8px 14px;font-size:10px}
.compact-tables .fb-tbl td{padding:9px 14px;font-size:12px}
.fb-title{font-weight:500;color:var(--t1)}
/* Inline "Mark Done" / "Reopen" buttons in feedback table */
.fb-done-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--green);background:var(--green-lt);border:1px solid var(--green-bd);cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;flex-shrink:0}
.fb-done-btn:hover{background:#bbf7d0;border-color:#4ade80}
.fb-done-btn svg,.fb-reopen-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}
.fb-reopen-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-lt);border:1px solid #FDE68A;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;flex-shrink:0}
.fb-reopen-btn:hover{background:#fde68a;border-color:#fbbf24}
.fb-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
/* Clickable inline-edit cells — Priority, Status, Source */
.fb-cell-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border-radius:6px;padding:2px 6px 2px 2px;transition:background .13s;border:none;background:transparent;font-family:inherit;font-size:inherit}
.fb-cell-btn:hover{background:var(--border2)}
.fb-cell-btn .caret{width:10px;height:10px;stroke:var(--t4);fill:none;stroke-width:2.5;opacity:.45;transition:opacity .13s,transform .2s;flex-shrink:0}
.fb-cell-btn:hover .caret{opacity:1}
.fb-cell-btn.dd-trigger-active .caret{opacity:1;transform:rotate(180deg)}

/* Version detail modal */
.ver-detail-fb-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border2)}
.ver-detail-fb-item:last-child{border-bottom:none}
.ver-detail-fb-check{width:20px;height:20px;border-radius:50%;background:var(--green-lt);border:1.5px solid var(--green-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ver-detail-fb-check svg{width:11px;height:11px;stroke:var(--green);fill:none;stroke-width:2.5}
.ver-detail-fb-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.4}
.ver-detail-fb-meta{font-size:11.5px;color:var(--t4);margin-top:2px}
/* Feedback pills inside version table rows */
.ver-fb-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ver-fb-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--t2);background:var(--border2);border:1px solid var(--border);border-radius:5px;padding:2px 7px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-fb-pill svg{width:10px;height:10px;stroke:var(--green);fill:none;stroke-width:2.5;flex-shrink:0}
.ver-fb-more{font-size:11px;color:var(--t3);font-weight:500;padding:2px 4px;flex-shrink:0}
/* View detail link in version table */
.ver-detail-link{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--primary);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:opacity .15s}
.ver-detail-link:hover{opacity:.7}
.ver-detail-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* Action buttons in tables */
/* Legacy tbl-btn kept for any remaining text-button usage */
.tbl-btn{font-size:12px;font-weight:600;background:none;border:none;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:5px;transition:background .15s}
.tbl-btn-resolve{color:var(--green)}.tbl-btn-resolve:hover{background:var(--green-lt)}
.tbl-btn-reopen{color:var(--amber)}.tbl-btn-reopen:hover{background:var(--amber-lt)}
.tbl-btn-edit{color:var(--primary)}.tbl-btn-edit:hover{background:var(--primary-lt)}
.tbl-btn-del{color:var(--red)}.tbl-btn-del:hover{background:var(--red-lt)}
   Used in: overview hero, pages table, feedback table.
   Show icon at rest; tooltip label appears on hover via [data-tip].
══════════════════════════════════════ */
.iab{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:7px;
  border:none;background:none;cursor:pointer;font-family:inherit;
  color:var(--t3);transition:background .14s,color .14s;flex-shrink:0;
}
.iab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;display:block}
.iab:hover{background:var(--border2);color:var(--t1)}
.iab-green:hover{background:var(--green-lt);color:var(--green)}
.iab-blue:hover{background:var(--primary-lt);color:var(--primary)}
.iab-red:hover{background:var(--red-lt);color:var(--red)}
.iab-amber:hover{background:var(--amber-lt);color:var(--amber)}

/* Tooltip */
.iab::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  background:#111827;color:#fff;
  font-size:11px;font-weight:600;white-space:nowrap;
  padding:4px 8px;border-radius:5px;letter-spacing:.01em;
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:500;
}
.iab::before{
  content:'';position:absolute;bottom:calc(100% + 2px);left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;border-top-color:#111827;
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:500;
}
.iab:hover::after,.iab:hover::before{opacity:1}
/* When there isn't room above, flip below */
.iab-tip-down::after{bottom:auto;top:calc(100% + 6px)}
.iab-tip-down::before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:#111827}

/* Icon-only hero btn — larger, same tooltip system */
.hero-iab{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--white);cursor:pointer;font-family:inherit;
  color:var(--t2);transition:background .14s,border-color .14s,color .14s;
  flex-shrink:0;
}
.hero-iab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.hero-iab:hover{background:var(--border2);border-color:var(--t5);color:var(--t1)}
.hero-iab::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%);
  background:#111827;color:#fff;
  font-size:11px;font-weight:600;white-space:nowrap;
  padding:4px 9px;border-radius:5px;
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:500;
}
.hero-iab::before{
  content:'';position:absolute;bottom:calc(100% + 3px);left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;border-top-color:#111827;
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:500;
}
.hero-iab:hover::after,.hero-iab:hover::before{opacity:1}

/* Inline action group — keeps icon buttons together with a slight separator */
.iab-group{display:inline-flex;align-items:center;gap:2px}

/* Fb proj list (overview open feedback card) */
.fb-proj-item{display:flex;gap:8px;padding:8px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;transition:all .15s;margin-bottom:6px}
.fb-proj-item:last-child{margin-bottom:0}
.fb-proj-item:hover{background:var(--border2);border-color:var(--border)}
.fb-proj-avt{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:#fff;flex-shrink:0}
.fb-proj-body{flex:1;min-width:0}
.fb-proj-txt{font-size:12.5px;font-weight:500;color:var(--t1);line-height:1.3}
.fb-proj-loc{font-size:11.5px;color:var(--t4);margin-top:1px}

/* Pages board/card view */
.pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.page-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r);padding:15px;cursor:pointer;transition:all .2s;position:relative}
.page-card:hover{box-shadow:var(--shadow-sm);border-color:var(--primary-bd);transform:translateY(-2px)}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.pc-icon{width:35px;height:35px;border-radius:8px;background:var(--border2);display:flex;align-items:center;justify-content:center}
.pc-icon svg{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:1.9}
.pc-nm{font-size:13.5px;font-weight:600;color:var(--t1);margin-bottom:3px}
.pc-notes{font-size:11.5px;color:var(--t4);line-height:1.4}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border2)}
.pc-fb-btn{font-size:11px;font-weight:600;color:var(--primary);background:var(--primary-lt);border:none;border-radius:5px;padding:8px 8px;cursor:pointer;font-family:inherit;transition:all .15s;margin-top:6px;display:inline-flex;align-items:center;gap:4px}
.pc-fb-btn:hover{background:var(--primary-bd)}
.pc-fb-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5}

/* Files grid */
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:12px}
.file-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r);padding:14px;transition:all .2s;display:flex;flex-direction:column;gap:9px;position:relative;min-height:120px}
.file-card:hover{box-shadow:var(--shadow-sm);border-color:var(--primary-bd);transform:translateY(-2px)}
.file-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.file-ico svg{width:20px;height:20px;fill:none;stroke-width:1.8}
.file-del-btn{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:5px;border:none;background:none;cursor:pointer;color:var(--t4);display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .15s}
.file-card:hover .file-del-btn{opacity:1}
.file-del-btn:hover{background:var(--red-lt);color:var(--red)}
.file-action-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t4);transition:all .15s}
.file-action-btn:hover{background:var(--primary-lt);border-color:var(--primary-bd);color:var(--primary)}
.file-action-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* Versions */
.ver-list{display:flex;flex-direction:column;gap:10px}
.ver-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r);padding:16px;display:flex;align-items:flex-start;gap:14px;transition:box-shadow .2s;position:relative}
.ver-card:hover{box-shadow:var(--shadow-sm)}
.ver-card.ver-active{border-color:var(--primary-bd);background:var(--primary-lt)}
.ver-num{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.3px;min-width:56px;flex-shrink:0}
.ver-card.ver-active .ver-num{color:var(--primary)}
.ver-body{flex:1}
.ver-title{font-size:13.5px;font-weight:600;color:var(--t1);margin-bottom:2px}
.ver-meta{font-size:12px;color:var(--t4)}
.ver-changes{font-size:12px;color:var(--t3);margin-top:4px;line-height:1.5}
.ver-actions{display:flex;gap:4px;flex-shrink:0}

/* ── VERSIONS PAGE v2 ── */
.ver2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow);margin-bottom:20px}
.ver2-stat{padding:18px 22px;display:flex;align-items:center;gap:14px;border-right:1px solid var(--border)}
.ver2-stat:last-child{border-right:none}
.ver2-stat-ico{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ver2-stat-ico svg{width:20px;height:20px;fill:none;stroke-width:1.9}
.ver2-stat-num{font-size:26px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1}
.ver2-stat-lbl{font-size:12px;color:var(--t3);margin-top:3px;font-weight:500}

/* Page section accordion */
.ver2-page-section{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow)}
.ver2-page-hd{display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;user-select:none;transition:background .15s}
.ver2-page-hd:hover{background:var(--bg)}
.ver2-page-icon{width:30px;height:30px;border-radius:8px;background:var(--primary-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ver2-page-icon svg{width:14px;height:14px;stroke:var(--primary);fill:none;stroke-width:2}
.ver2-page-nm{font-size:14px;font-weight:500;color:var(--t1)}
.ver2-page-cnt{font-size:12px;color:var(--t4);margin-left:4px;font-weight:400}
.ver2-active-badge{margin-left:auto;font-size:10px;font-weight:700;color:var(--green);background:var(--green-lt);padding:3px 10px;border-radius:20px}
.ver2-chevron{width:16px;height:16px;stroke:var(--t4);fill:none;stroke-width:2;transition:transform .25s;flex-shrink:0;margin-left:6px}
.ver2-chevron.open{transform:rotate(180deg)}
.ver2-publish-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:7px;font-size:10.5px;font-weight:600;border:1.5px solid var(--border);background:var(--white);color:var(--t2);cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0;margin-left:10px;height:28px}
.ver2-publish-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.ver2-publish-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}

/* Version table inside accordion */
.ver2-tbl-wrap{border-top:1px solid var(--border)}
.ver2-tbl{width:100%;border-collapse:collapse}
.ver2-tbl th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;color:var(--t4);text-align:left;padding:11px 16px;background:var(--border2);border-bottom:1.5px solid var(--border)}
.ver2-tbl td{padding:13px 16px;border-bottom:1px solid var(--border2);font-size:13px;color:var(--t2);vertical-align:middle}
.ver2-tbl tbody tr:last-child td{border-bottom:none}
.ver2-tbl tbody tr:hover td{background:var(--bg)}
/* ══ COMPONENT: Version Chip — single canonical class ══ */
.ver-chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;background:var(--primary-lt);color:var(--primary);flex-shrink:0}
.ver-chip.archived{background:var(--border2);color:var(--t3)}
.ver2-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0}
.ver2-dot.active{background:var(--green)}
.ver2-dot.archived{background:var(--t5)}
.ver2-author-avt{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:#4F46E5;flex-shrink:0;margin-right:7px}
.ver2-author-cell{display:flex;align-items:center}
.ver2-status-active{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--green-lt);color:var(--green);border:1px solid var(--green-bd)}
.ver2-status-published{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--primary-lt);color:var(--primary);border:1px solid var(--primary-bd)}
.ver2-status-initial{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--border2);color:var(--t3);border:1px solid var(--border)}
.ver2-status-archived{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--amber-lt);color:var(--amber);border:1px solid #FDE68A}
.ver2-action-btn{width:30px;height:30px;border-radius:7px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t4);transition:all .15s}
.ver2-action-btn:hover{background:var(--border2);color:var(--t2)}
.ver2-action-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.ver2-legend{display:flex;gap:18px;flex-wrap:wrap}
.ver2-legend-item{display:flex;align-items:flex-start;gap:7px}
.ver2-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:2px}
.ver2-legend-lbl{font-size:12.5px;font-weight:600;color:var(--t1)}
.ver2-legend-desc{font-size:11.5px;color:var(--t4)}
.ver2-legend-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow-xs);margin-top:14px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ver2-actions-legend{display:flex;align-items:center;gap:12px;margin-left:auto}
.ver2-actions-legend-lbl{font-size:12.5px;font-weight:600;color:var(--t2)}
.ver2-preview-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--t3);background:none;border:none;cursor:pointer;font-family:inherit;transition:color .15s}
.ver2-preview-btn:hover{color:var(--primary)}
.ver2-preview-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--glass-bg-light);backdrop-filter:var(--glass-blur-lg);-webkit-backdrop-filter:var(--glass-blur-lg);border:1px solid var(--glass-border);border-radius:18px;padding:26px;width:100%;max-width:520px;box-shadow:var(--glass-shadow-lg);-webkit-transform:translateY(14px) scale(.98);transform:translateY(14px) scale(.98);transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s;will-change:transform;overflow:hidden}
.modal-overlay.open .modal-box{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}
/* Size modifiers */
.modal-box.modal-sm{max-width:400px}
.modal-box.modal-md{max-width:520px}
.modal-box.modal-lg{max-width:680px}
.modal-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.modal-title{font-size:17px;font-weight:800;color:var(--t1);letter-spacing:-.3px}
.modal-sub{font-size:13px;color:var(--t3);margin-top:3px}
.modal-close{width:30px;height:30px;border-radius:7px;border:none;background:var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}
.modal-close:hover{background:var(--border)}
.modal-close svg{width:14px;height:14px;stroke:var(--t2);fill:none;stroke-width:2.5}
.modal-body{display:flex;flex-direction:column;gap:14px;max-height:65vh;overflow-y:auto;overflow-x:hidden;padding:2px 4px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border2)}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:12.5px;font-weight:600;color:var(--t2)}
.form-hint{font-size:11.5px;color:var(--t4);font-weight:400;margin-left:4px}
.form-input{padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;color:var(--t1);background:var(--white);font-family:inherit;outline:none;transition:all .15s;width:100%}
.form-input:focus{border-color:#D0D5E8;box-shadow:none}
.form-input::placeholder{color:var(--t4)}
textarea.form-input{resize:vertical;min-height:75px;line-height:1.5}
.form-select{padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;color:var(--t1);background:var(--white);font-family:inherit;outline:none;transition:all .15s;width:100%;cursor:pointer}
.form-select:focus{border-color:#D0D5E8;box-shadow:none}

/* ── Custom Select ─────────────────────────────────────────────
   A styled replacement for native <select>. The native element
   stays hidden in the DOM (same id) so all .value reads work.
   ─────────────────────────────────────────────────────────────*/
.csel-wrap{position:relative;width:100%}
.csel-wrap.csel-inline{width:auto;display:inline-flex}
.csel-btn{
  display:flex;align-items:center;gap:6px;
  width:100%;padding:9px 10px 9px 12px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:13.5px;font-weight:400;color:var(--t1);
  background:var(--white);font-family:inherit;
  cursor:pointer;text-align:left;
  transition:border-color .15s, box-shadow .15s;
  outline:none;
}
.csel-btn:hover{border-color:#D0D5E8}
.csel-btn:focus,.csel-btn.open{border-color:#D0D5E8;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.csel-btn-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-btn-icon{flex-shrink:0;width:14px;height:14px;stroke:var(--t4);fill:none;stroke-width:2.5;transition:transform .2s}
.csel-btn.open .csel-btn-icon{transform:rotate(180deg);stroke:var(--primary)}
/* Compact variant for settings rows */
.csel-compact .csel-btn{padding:6px 8px 6px 10px;font-size:13px;height:34px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Info hint box */
/* .form-info replaced by .form-info-subtle (lighter, less visual weight) */
/* .btn-loading — shows spinner, disables interaction during async submit */
.btn-loading{opacity:.7;pointer-events:none;position:relative}
.btn-loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ── DROPDOWN ── */
/* ── Dropdown panel ───────────────────────────────────────────── */
.dropdown{
  position:fixed;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.07),0 10px 30px -5px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.03);
  min-width:185px;
  z-index:9000;
  overflow:hidden;
  padding:5px;
  transform-origin:top center;
  animation:ddOpen .15s cubic-bezier(.16,1,.3,1) both;
}
.dropdown.closing{
  animation:ddClose .12s cubic-bezier(.4,0,1,1) both;
  pointer-events:none;
}
@keyframes ddOpen{
  from{opacity:0;transform:scale(.95) translateY(-6px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
@keyframes ddClose{
  from{opacity:1;transform:scale(1)   translateY(0)}
  to  {opacity:0;transform:scale(.95) translateY(-6px)}
}
/* ── Dropdown items ───────────────────────────────────────────── */
.dd-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  font-size:13px;font-weight:500;color:var(--t2);
  cursor:pointer;
  transition:background .1s,color .1s;
  border:none;background:none;
  width:100%;text-align:left;
  font-family:inherit;
  border-radius:7px;
}
.dd-item:hover{background:var(--border2);color:var(--t1)}
.dd-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;opacity:.7}
.dd-item:hover svg{opacity:1}
.dd-item.dd-danger{color:var(--red)}
.dd-item.dd-danger svg{opacity:.8}
.dd-item.dd-danger:hover{background:var(--red-lt);color:var(--red)}
.dd-item.dd-item--danger{color:var(--red)}
.dd-item.dd-item--danger svg{opacity:.8;stroke-width:1.5}
.dd-item.dd-item--danger:hover{background:var(--red-lt);color:var(--red)}
.dd-item.dd-back{font-size:12px;font-weight:500;color:var(--t3);padding:6px 10px}
.dd-item.dd-back:hover{color:var(--t1);background:var(--border2)}
.dd-item.dd-back svg{width:12px;height:12px}
.dd-item.dd-item-selected{color:var(--primary);font-weight:500;background:var(--primary-lt)}
/* ── Dropdown section header ──────────────────────────────────── */
.dd-hd{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t4);
  padding:8px 10px 4px;
  line-height:1;
}
/* ── Separator ────────────────────────────────────────────────── */
.dd-sep{height:1px;background:var(--border);margin:4px 0}
/* ── Chevron on trigger buttons — rotates when dropdown open ──── */
.dd-chevron{
  width:13px;height:13px;
  stroke:currentColor;fill:none;stroke-width:2.5;
  flex-shrink:0;
  transition:transform .2s cubic-bezier(.4,0,.2,1), opacity .2s;
  opacity:.6;
}
.dd-trigger-active .dd-chevron{transform:rotate(180deg);opacity:1}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1.5px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);z-index:550;overflow:hidden;max-height:340px;overflow-y:auto}
@media(max-width:600px){
  .search-results{max-height:52vh;left:-8px;right:-8px;border-radius:10px}
}
.search-res-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;color:var(--t2);cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;transition:background .12s}
.search-res-item:hover,.search-res-item:focus{background:var(--primary-lt);outline:none}
.search-res-meta{font-size:11px;color:var(--t4)}
.search-empty{padding:12px 14px;font-size:13px;color:var(--t4)}

/* ── OVERVIEW QUICK ACTIONS (legacy, kept for compatibility) ── */
.qa-section{margin-bottom:18px}
.qa-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--t4);margin-bottom:10px}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qa-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-xs)}
.qa-card:hover{border-color:var(--primary-bd);background:var(--primary-lt);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.qa-card:hover .qa-ico{background:var(--primary);border-color:var(--primary)}
.qa-card:hover .qa-ico svg{stroke:#fff}
.qa-card:hover .qa-lbl{color:var(--primary)}
.qa-ico{width:36px;height:36px;border-radius:9px;background:var(--border2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s}
.qa-ico svg{width:16px;height:16px;fill:none;stroke:var(--t3);stroke-width:2;transition:stroke .18s}
.qa-text{min-width:0}
.qa-lbl{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s}
.qa-desc{font-size:11px;color:var(--t4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── OVERVIEW v2 ── */
/* Single hero+stats card */
.ov2-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--glass-shadow);margin-bottom:16px;overflow:hidden}
/* Hero section with decorative circular bg element */
.ov2-hero{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:26px 30px 24px;
  position:relative;overflow:hidden;
  background: linear-gradient(135deg, #f6f5fe 0%, #f5f3ff 100%);
  border-bottom:1px solid var(--glass-border);
}
/* Large decorative circle behind avatar */
.ov2-hero::before{
  content: '';
    position: absolute;
    right: -60px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, .10) 0%, rgba(124, 58, 237, .06) 55%, transparent 75%);
    pointer-events: none;
}
.ov2-hero::after{
  content: '';
    position: absolute;
    right: 60px;
    bottom: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, .07) 0%, transparent 70%);
    pointer-events: none;
}
.ov2-hero-left{display:flex;align-items:center;gap:18px;min-width:0;position:relative;z-index:1}
.ov2-avatar{
  width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -.5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.ov2-title-block{min-width:0}
.ov2-name{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov2-desc{font-size:13px;color:var(--t3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov2-hero-right{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;z-index:1}
/* ov2-status-pill replaced by unified .badge.badge-dot system */
/* Stats row — inside the same card, divided by top border */
.ov2-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--glass-border);background:rgba(255,255,255,0.35)}
.ov2-stat{padding:18px 26px 16px;border-right:1px solid var(--border2);display:flex;flex-direction:column}
.ov2-stat:last-child{border-right:none}
.ov2-stat-num{font-size:32px;font-weight:800;color:var(--t1);letter-spacing:-.8px;line-height:1;margin-bottom:3px}
.ov2-stat-lbl{font-size:13px;font-weight:600;color:var(--t2);margin-bottom:4px}
.ov2-stat-sub{font-size:11.5px;color:var(--t4);margin-bottom:10px;line-height:1.4;height:32px;overflow:hidden}
.ov2-stat-bar{height:3px;background:var(--border2);border-radius:2px;overflow:hidden;width:64px;margin-top:auto}
.ov2-stat-bar-fill{height:100%;border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1)}

/* Action strip — pill-shaped buttons */
.ov2-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ov2-act-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:50px;font-size:12px;font-weight:500;color:var(--t2);background:var(--white);border:1.5px solid var(--border);cursor:pointer;font-family:inherit;transition:all .17s}
.ov2-act-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-lt)}
.ov2-act-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}

/* Three-column body — equal split for Pages, Feedback, Activity */
.ov2-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch}
.ov2-body>.card{min-height:260px;display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border)}
.ov2-body>.card .empty-box{flex:1;justify-content:center}

/* Pages list rows — each row is its own bordered item */
.ov2-pages-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ov2-page-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:all .15s}
.ov2-page-row:hover{border-color:var(--primary-bd);background:var(--primary-lt);box-shadow:var(--shadow-xs)}
.ov2-page-ico{width:30px;height:30px;border-radius:7px;background:var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ov2-page-ico svg{width:14px;height:14px;stroke:var(--t3);fill:none;stroke-width:1.9}
.ov2-page-name{flex:1;font-size:13.5px;font-weight:500;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .ov2-ver-chip merged into canonical .ver-chip above */

/* Activity list — dot + text style, no icon bubbles */
.ov2-act-list{display:flex;flex-direction:column;gap:0;margin-top:4px}
.ov2-act-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border2)}
.ov2-act-item:last-child{border-bottom:none}
.ov2-act-dot{width:8px;height:8px;border-radius:50%;background:#4F46E5;flex-shrink:0;margin-top:4px}
.ov2-act-dot.c-green{background:#16A34A}
.ov2-act-dot.c-amber{background:#D97706}
.ov2-act-dot.c-teal{background:#0D9488}
.ov2-act-body{flex:1;min-width:0}
.ov2-act-title{font-size:13px;font-weight:500;color:var(--t1);line-height:1.4}
.ov2-act-who{font-size:12px;color:var(--t4);margin-top:1px}
.ov2-act-time{font-size:12px;color:var(--t4);flex-shrink:0;white-space:nowrap;padding-top:2px}

/* ── GLOBAL SETTINGS SCREEN ── */
.settings-shell{display:flex;min-height:100%;background:transparent}
.settings-sidebar{width:210px;flex-shrink:0;background:var(--white);border-right:1px solid var(--border);padding:16px 10px 40px;display:flex;flex-direction:column;gap:0;position:sticky;top:0;height:calc(100vh - var(--nav-h));overflow-y:auto}
.settings-sb-head{padding:4px 8px 14px;border-bottom:1px solid var(--border2);margin-bottom:8px}
.settings-sb-title{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.3px}
.settings-sb-sub{font-size:12px;color:var(--t4);margin-top:2px}
/* settings-sb-item → identical to .sb-item, uses .on for active (alias .active for compat) */
.settings-sb-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left;transition:all .12s;margin-bottom:8px}
.settings-sb-item:hover{color:var(--t1);background:var(--border2)}
.settings-sb-item.active,.settings-sb-item.on{color:var(--primary);font-weight:600;background:var(--primary-lt)}
.settings-sb-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0}
.settings-content{flex:1;min-width:0;padding:32px 36px 60px;max-width:780px}
.settings-section{display:none}
.settings-section.active{display:block}
.settings-section-title{font-size:20px;font-weight:800;color:var(--t1);letter-spacing:-.35px;margin-bottom:4px}
.settings-section-sub{font-size:13px;color:var(--t3);margin-bottom:24px}
/* settings-card → canonical .card.card-flush alias */
.settings-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow);margin-bottom:14px}
.settings-card-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2)}
.settings-card-title{font-size:13.5px;font-weight:700;color:var(--t1)}
.settings-card-sub{font-size:12px;color:var(--t4);margin-top:2px}
.settings-card-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border2)}
.settings-row:last-child{border-bottom:none;padding-bottom:0}
.settings-row-info{flex:1}
.settings-row-label{font-size:13.5px;font-weight:600;color:var(--t1)}
.settings-row-desc{font-size:12px;color:var(--t4);margin-top:2px}
.settings-row-ctrl{flex-shrink:0}
.settings-avatar-block{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg);border-radius:10px;margin-bottom:14px}
.settings-avatar-big{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;flex-shrink:0;background:#4F46E5}
.settings-avatar-info{flex:1}
.settings-avatar-name{font-size:16px;font-weight:700;color:var(--t1)}
.settings-avatar-role{font-size:12.5px;color:var(--t4);margin-top:2px}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0;display:inline-block}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--t5);border-radius:20px;cursor:pointer;transition:background .2s}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;background:var(--white);border-radius:50%;left:3px;top:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked+.toggle-slider{background:var(--primary)}
.toggle input:checked+.toggle-slider:before{transform:translateX(16px)}

/* Platform toggle pill */
/* Platform toggle pill — equal-width tabs, full container width */


/* ── SOURCE BADGES ── */
.src-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.src-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;flex-shrink:0}
.src-email{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}
.src-whatsapp{background:#DCFCE7;color:var(--green);border:1px solid #BBF7D0}
.src-call{background:var(--amber-lt);color:var(--amber);border:1px solid #FDE68A}
.src-other{background:var(--border2);color:var(--t3);border:1px solid #E5E7EB}

/* ── SOURCE FILTER TABS (feedback view) ── */
.src-filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.src-ftab{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:500;border:1.5px solid var(--border);background:var(--white);color:var(--t3);cursor:pointer;transition:all .15s;font-family:inherit}
.src-ftab:hover{color:var(--t1);border-color:var(--t3)}
.src-ftab.on{color:var(--t1);font-weight:600;background:var(--border2);border-color:var(--t2)}
.src-ftab svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;flex-shrink:0}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:rgba(15,23,42,.82);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border:1px solid rgba(255,255,255,.12);color:#fff;padding:11px 16px;border-radius:10px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:var(--glass-shadow-lg);animation:fadeUp .25s ease;max-width:300px}
.toast.t-success{background:rgba(22,101,52,.85)}
.toast.t-error{background:rgba(153,27,27,.85)}
.toast.t-info{background:rgba(67,56,202,.85)}
.toast svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;flex-shrink:0}
.toast-close{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;font-size:16px;line-height:1;opacity:.85}
.toast-close:hover{opacity:1}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp .3s ease both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}
body.no-transitions .fu{animation:none}


/* ── SOURCE FILTER — mobile wrap fix ── */
.src-filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.src-ftab{flex-shrink:0}

/* ── EMPTY-STATE CLEAR FILTERS CTA ── */
/* .empty-clear-btn replaced by canonical .btn.btn-ghost.btn-sm */

/* ── SETTINGS SIDEBAR — responsive collapse ── */
.settings-sb-toggle{display:none;align-items:center;gap:8px;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--t2);background:var(--white);border:none;border-bottom:1px solid var(--border);cursor:pointer;font-family:inherit;width:100%}
.settings-sb-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.settings-sb-toggle .toggle-chevron{margin-left:auto;transition:transform .2s}
.settings-sb-toggle .toggle-chevron.open{transform:rotate(180deg)}

/* ── COMPLETED PROJECT STYLES ── */
/* Completed banner shown in project overview hero */
.proj-complete-banner{
  display:flex;align-items:center;gap:10px;
  background:var(--green-lt);border:1.5px solid var(--green-bd);
  border-radius:var(--r);padding:10px 16px;margin-bottom:16px;
  font-size:13px;color:var(--green);font-weight:600;
}
.proj-complete-banner svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.5;flex-shrink:0}
.proj-complete-banner-actions{margin-left:auto;display:flex;gap:8px}

/* Mark Complete button — green outline variant */
.btn-complete{
  display:inline-flex;align-items:center;gap:6px;height:32px;
  padding:0 14px;border-radius:8px;font-size:13px;font-weight:600;
  border:1.5px solid var(--green-bd);background:var(--green-lt);
  color:var(--green);cursor:pointer;font-family:inherit;
  transition:all .15s;flex-shrink:0;
}
.btn-complete:hover{background:#bbf7d4;border-color:var(--green)}
.btn-complete svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}

/* Completed project card — muted appearance in board view */
.pcard.pcard-done{opacity:.7}
.pcard.pcard-done .pcard-nm{text-decoration:line-through;color:var(--t4)}

/* Dashboard completed section */
.db-completed-section{margin-top:28px}
.db-completed-hd{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.db-completed-title{
  font-size:14px;font-weight:700;color:var(--t3);
  display:flex;align-items:center;gap:7px;
}
.db-completed-title svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2}
.db-completed-cnt{
  font-size:11px;font-weight:700;padding:2px 8px;
  border-radius:20px;background:var(--green-lt);color:var(--green);
}
.db-completed-list{display:flex;flex-direction:column;gap:8px}
.db-compl-row{
  display:flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 16px;
  cursor:pointer;transition:background .15s;
}
.db-compl-row:hover{background:var(--bg)}
.db-compl-avt{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex-shrink:0;
  opacity:.65;
}
.db-compl-name{font-size:13.5px;font-weight:600;color:var(--t2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-compl-meta{font-size:12px;color:var(--t4);flex-shrink:0}
.db-compl-badge{flex-shrink:0}
.db-compl-reopen{
  flex-shrink:0;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--t3);cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.db-compl-reopen:hover{background:var(--border2);color:var(--t1)}
/* ════════════════════════════════════════════════════════════
   CROSS-BROWSER / SAFARI FIXES — applied everywhere
════════════════════════════════════════════════════════════ */
input,textarea,select,button{-webkit-appearance:none;appearance:none}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px!important
}
*{-webkit-tap-highlight-color:transparent}
body{text-size-adjust:100%;-webkit-text-size-adjust:100%}
.screen,.sidebar,.modal-body,.nx-tbl-wrap,.ver2-tbl-wrap{-webkit-overflow-scrolling:touch}
.btn,.dd-item,.sb-item,.nav-link,.nav-proj-chip,.pcard,.plv-row{-webkit-user-select:none;user-select:none}

/* ── Persistent mobile bottom nav ── */
.mob-nav{
  display:none; /* hidden on desktop */
  position:fixed;bottom:0;left:0;right:0;
  height:60px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid #E5E7EB;
  z-index:400;
  flex-direction:row;
  align-items:stretch;
  padding:0;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(0,0,0,.07);
}
.mob-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px 4px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  color:#9CA3AF;font-size:10px;font-weight:500;
  transition:color .15s;min-width:0;
}
.mob-nav-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.mob-nav-item.active{color:#4F46E5}
.mob-nav-item.active svg{stroke:#4F46E5}
.mob-nav-center{flex:1.2}
.mob-nav-plus{
  width:40px;height:40px;border-radius:12px;
  background:#4F46E5;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(79,70,229,.35);
  margin-bottom:2px;
}
.mob-nav-plus svg{width:18px;height:18px;stroke:#fff;stroke-width:2.5}
.mob-nav-center span{margin-top:-2px}

/* ════════════════════════════════════════════════════════════
   TABLET — ≤1100px
════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  :root{--page-px:20px}
  .db-stats{grid-template-columns:1fr 1fr}
  .db-body{grid-template-columns:1fr}
  .db-stats-row{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr 1fr}
  .ps-grid{grid-template-columns:1fr 1fr}
  .mid2{grid-template-columns:1fr}
  .bot3{grid-template-columns:1fr 1fr}
  .plv-header,.plv-row{grid-template-columns:2fr 1fr 1fr 80px}
  .qa-grid{grid-template-columns:1fr 1fr}
  .toolbar,.greeting-row{flex-wrap:wrap;min-height:unset}
  .toolbar-right,.page-hd-right{flex-wrap:wrap}
  .ov2-stats{grid-template-columns:1fr 1fr}
  .ov2-body{grid-template-columns:1fr}
  .ov2-hero{flex-wrap:wrap;gap:12px}
  .ov2-hero-right{flex-wrap:wrap}
  .ver2-stats{grid-template-columns:1fr 1fr}
  .ver2-stat{border-right:none;border-bottom:1px solid var(--border)}
  .ver2-stat:nth-last-child(-n+2){border-bottom:none}
  /* Settings sidebar collapses */
  .settings-shell{flex-direction:column}
  .settings-sidebar{width:100%;height:auto;position:static;flex-direction:column;border-right:none;border-bottom:1px solid var(--border);padding:0}
  .settings-sb-head{display:none}
  .settings-sb-toggle{display:flex}
  .settings-sb-nav{display:none;flex-direction:column}
  .settings-sb-nav.open{display:flex}
  .settings-sb-item{border-radius:0;border-bottom:2px solid transparent;padding:10px 14px;margin-bottom:0}
  .settings-sb-item.active{background:var(--primary-lt);border-bottom-color:var(--primary)}
  .settings-content{max-width:100%;padding:24px 20px 60px}
}

/* ════════════════════════════════════════════════════════════
   SMALL TABLET — ≤768px
════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--page-px:16px;--sb-w:56px}
  .sidebar{width:56px}
  .proj-content{margin-left:56px;padding:var(--page-pt) 16px var(--page-pb)}
  .dash-scroll{padding:var(--page-pt) 16px var(--page-pb)}
  .page-body{padding:var(--page-pt) 16px var(--page-pb)}
  .sb-item span,.sb-cnt,.sb-proj-info,.sb-back,.sb-divider,.sb-ver-box{display:none!important}
  .sb-item{justify-content:center;padding:10px 0;margin-bottom:4px}
  .bot3{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .plv-header,.plv-row{grid-template-columns:2fr 1fr 80px}
  .db-stats-row{grid-template-columns:1fr 1fr}
  .db-bottom{grid-template-columns:1fr}
  .ov2-hero{flex-direction:column;align-items:flex-start}
  .src-filter-row{gap:5px}
  .src-ftab{font-size:11.5px;padding:4px 9px}
  .toolbar,.greeting-row{gap:12px}
}

/* ════════════════════════════════════════════════════════════
   MOBILE — ≤600px
   Body scrolls. Fixed nav stays. Permanent bottom nav bar.
   Sidebar hidden (bottom nav replaces it on project screen).
════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  :root{
    --nav-h:52px;
    --page-px:14px;
    --page-pt:16px;
    --page-pb:80px;
    --sb-w:0px;
  }

  /* Body scrolls natively; screen-root is in-flow */
  html,body{overflow-x:hidden;overflow-y:auto;height:auto;min-height:100vh}
  #screen-root{position:static;overflow:visible;height:auto}
  .screen{height:auto;overflow:visible;display:none}
  .screen.show{display:block}

  /* Show mobile bottom nav */
  .mob-nav{display:flex}

  /* ── Top nav ── */
  .top-nav{padding:0 14px}
  .logo-name{display:none}
  .nav-links{display:none}
  .search-wrap{width:36px;padding:0 10px;overflow:hidden;transition:width .2s,padding .2s}
  .search-wrap:focus-within{width:160px;padding:0 10px}
  .search-wrap input{min-width:0}
  .user-name{display:none}

  /* ── Project sidebar — hidden on mobile (bottom nav replaces it) ── */
  .sidebar{display:none!important}
  .proj-shell{min-height:unset}
  .proj-content{
    margin-left:0!important;
    padding:16px 14px calc(74px + env(safe-area-inset-bottom,0px));
  }

  /* ── Dashboard ── */
  .dash-scroll{padding:16px 14px calc(76px + env(safe-area-inset-bottom,0px))}
  .db-header{flex-direction:column;align-items:flex-start;gap:10px}
  .db-greeting{font-size:20px}
  .db-actions{width:100%}
  .db-new-proj-btn{width:100%;justify-content:center}
  .db-stats-row{grid-template-columns:1fr 1fr;gap:10px}
  .db-stat2{padding:14px 16px;min-height:auto}
  .db-proj-cards{grid-template-columns:1fr!important}
  /* db-bottom is a grid — override to single col */
  .db-bottom{grid-template-columns:1fr!important;gap:12px}

  /* ── All Projects ── */
  .page-body{padding:16px 14px calc(76px + env(safe-area-inset-bottom,0px))}
  .toolbar{flex-direction:column;align-items:flex-start;gap:10px}
  .toolbar-right{flex-wrap:wrap;gap:6px;width:100%}
  .proj-cards-grid{grid-template-columns:1fr!important}
  .plv-header{grid-template-columns:1fr auto}
  .plv-row{grid-template-columns:1fr auto}
  /* Hide all columns except name and actions in list view */
  .plv-header .plv-th:not(:first-child):not(:last-child),
  .plv-row>*:not(:first-child):not(:last-child){display:none}

  /* ── Project content header ── */
  .proj-hd{flex-direction:column;align-items:flex-start;gap:10px;min-height:unset}
  .proj-hd-right{flex-wrap:wrap;width:100%}
  .proj-hd-right .btn{flex:1;justify-content:center;min-width:0}
  .page-hd-row{flex-direction:column;align-items:flex-start;gap:10px;min-height:unset;margin-bottom:14px}
  .page-hd-right{flex-wrap:wrap;width:100%}
  .page-hd-title{font-size:20px}

  /* ── Grids — ALL single column on mobile ── */
  .ps-grid{grid-template-columns:1fr!important}
  .ov2-stats{grid-template-columns:1fr!important}
  .mid2{grid-template-columns:1fr!important}
  .bot3{grid-template-columns:1fr!important}
  .three-col{grid-template-columns:1fr!important}
  .ver2-stats{grid-template-columns:1fr!important}
  .ver2-stat{border-right:none;border-bottom:1px solid var(--border)}
  .ver2-stat:last-child{border-bottom:none}
  .qa-grid{grid-template-columns:1fr 1fr}

  /* ── Overview hero ── */
  .ov2-hero{flex-direction:column;align-items:flex-start;padding:18px 18px 14px;gap:10px}
  .ov2-hero h2{font-size:18px}
  .ov2-hero-right{flex-wrap:wrap;gap:6px}

  /* ── Filter tabs — horizontal scroll ── */
  .src-filter-row,.filter-tabs{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .src-filter-row::-webkit-scrollbar,.filter-tabs::-webkit-scrollbar{display:none}

  /* ── Modal → bottom sheet ── */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-box{
    width:100%;max-width:100%;
    max-height:90vh;
    border-radius:20px 20px 0 0;
    position:relative;
    margin:0;
    padding:8px 18px 20px;
    padding-bottom:max(20px,env(safe-area-inset-bottom,20px));
    transform:none!important;-webkit-transform:none!important;
  }
  /* Drag handle pill */
  .modal-box::before{
    content:'';display:block;
    width:36px;height:4px;border-radius:2px;
    background:var(--border);
    margin:0 auto 14px;
  }
  .modal-footer{flex-direction:column-reverse;gap:8px}
  .modal-footer .btn{width:100%;justify-content:center}
  .modal-body{max-height:55vh}
  .form-row{grid-template-columns:1fr}

  /* ── Toolbar ── */
  .toolbar .filter-tabs,.toolbar .view-toggle{height:32px}

  /* ── Settings ── */
  .settings-content{padding:16px 14px calc(80px + env(safe-area-inset-bottom,0px))}
  .settings-grid{grid-template-columns:1fr!important}

  /* ── Toast — above bottom nav ── */
  .toast-wrap{
    bottom:calc(68px + env(safe-area-inset-bottom,0px));
    left:12px;right:12px;align-items:stretch;
  }
  .toast{width:100%;justify-content:center;font-size:13px}

  /* ── Color picker — bottom sheet on mobile ── */
  .cp-popup{
    position:fixed!important;top:auto!important;
    bottom:0!important;left:0!important;right:0!important;
    width:100%!important;max-width:100%!important;
    border-radius:20px 20px 0 0;
    padding-bottom:max(0px,env(safe-area-inset-bottom,0px));
  }

  /* ── Mobile project section tab bar ── */
  .mob-proj-tabs{
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    gap:4px;padding:0 0 12px;margin-bottom:4px;
    border-bottom:1px solid var(--border2);
  }
  .mob-proj-tabs::-webkit-scrollbar{display:none}
  .mob-proj-tab{
    flex-shrink:0;display:flex;align-items:center;gap:5px;
    padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);
    background:var(--white);font-size:12px;font-weight:600;
    color:var(--t3);cursor:pointer;font-family:inherit;
    transition:all .15s;white-space:nowrap;
  }
  .mob-proj-tab svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
  .mob-proj-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
  .mob-proj-tab .tab-cnt{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.08)}
  .mob-proj-tab.active .tab-cnt{background:rgba(255,255,255,.25)}

  /* ── Version table — hide overflow columns ── */
  .ver2-tbl th:nth-child(n+4),.ver2-tbl td:nth-child(n+4){display:none}

  /* ── Drop pills strip ── */
  .src-filter-row{gap:6px}
}

/* ════════════════════════════════════════════════════════════
   TINY PHONES — ≤375px
════════════════════════════════════════════════════════════ */
@media(max-width:375px){
  :root{--page-px:12px}
  .db-stats-row{grid-template-columns:1fr!important}
  .db-greeting{font-size:18px}
  .page-hd-title{font-size:18px}
  .modal-box{padding-left:14px;padding-right:14px}
  .btn-sm{font-size:12px;padding:0 10px}
}
/* ══ ONBOARDING MODAL ══ */
/* ── ONBOARDING — full-page, matches Relay brand system ── */
.onboard-overlay{
  position:fixed;inset:0;z-index:9000;
  background:#F1F2F4;
  display:flex;flex-direction:column;
}
@keyframes ob-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Top bar — identical to .top-nav but standalone */
.onboard-topbar{
  height:var(--nav-h);flex-shrink:0;
  background:var(--glass-bg-strong);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 20px rgba(99,102,241,.08);
  display:flex;align-items:center;padding:0 var(--page-px);
}

/* Centre column */
.onboard-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:32px var(--page-px) 48px;overflow-y:auto;
}
.onboard-card{
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  width:100%;max-width:468px;
  padding:40px 40px 36px;
  animation:ob-in .28s cubic-bezier(.34,1.2,.64,1);
}

.onboard-title{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.4px;margin-bottom:6px;line-height:1.2}
.onboard-sub{font-size:13.5px;color:var(--t3);line-height:1.6;margin-bottom:28px}

.onboard-fields{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}

/* Field labels — matches .form-label */
.onboard-field label{
  display:flex;align-items:center;gap:4px;
  font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:6px
}
.onboard-req{color:var(--red);font-size:12px}
.onboard-opt{font-size:11.5px;font-weight:400;color:var(--t4)}

/* Inputs — matches .onboard-field pattern but uses product's exact form-select DNA */
.onboard-field input,.onboard-field select{
  width:100%;height:42px;
  border:1.5px solid var(--border);border-radius:9px;
  padding:0 14px;font-size:13.5px;font-family:inherit;color:var(--t1);
  background:var(--white);outline:none;
  transition:border-color .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
.onboard-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
  padding-right:36px;cursor:pointer;
}
.onboard-field input:focus,.onboard-field select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
.onboard-field input::placeholder{color:var(--t4)}
.onboard-field input.ob-error{border-color:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.onboard-err{font-size:12px;color:var(--red);margin-top:4px;display:none}

/* CTA — matches .btn-primary at full width */
.onboard-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:44px;
  background:var(--primary);color:#fff;
  border:none;border-radius:10px;
  font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;
  box-shadow:0 2px 8px rgba(79,70,229,.25);
  transition:all .18s;letter-spacing:-.1px;
}
.onboard-btn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5}
.onboard-btn:hover:not(:disabled){background:var(--primary-dk);box-shadow:0 4px 16px rgba(79,70,229,.4);transform:translateY(-1px)}
.onboard-btn:active:not(:disabled){transform:translateY(0)}
.onboard-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

.onboard-note{
  font-size:11.5px;color:var(--t4);text-align:center;
  margin-top:16px;line-height:1.5;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.onboard-note svg{width:12px;height:12px;stroke:var(--t5);fill:none;stroke-width:2;flex-shrink:0}

@media(max-width:520px){
  .onboard-card{padding:28px 20px 24px;border-radius:var(--r)}
  .onboard-topbar{padding:0 16px}
  .onboard-body{padding:24px 16px 40px}
  .onboard-title{font-size:19px}
}

/* ═══════════════════════════════════════════
   DETAILS MODAL — dtl-* components
   Used by showDetailsModal() for pages,
   feedback, and projects.
═══════════════════════════════════════════ */

/* Modal body override for details: no gap, scrollable */
.dtl-modal-body{gap:0!important;padding:0 2px!important}

/* ── Meta grid ── */
.dtl-meta{display:flex;flex-direction:column;gap:0;padding:4px 0 8px}
.dtl-meta-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--border2);
  gap:12px;
}
.dtl-meta-row:last-child{border-bottom:none}
.dtl-meta-label{
  font-size:12.5px;font-weight:500;color:var(--t3);
  flex-shrink:0;min-width:110px;
}
.dtl-meta-value{
  font-size:13px;font-weight:500;color:var(--t1);
  text-align:right;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;
}
.dtl-meta-green{color:var(--green)!important;font-weight:600!important}
.dtl-meta-primary{color:var(--primary)!important;font-weight:700!important}
.dtl-meta-muted{color:var(--t4)!important}

/* ── Notes inside feedback details ── */
.dtl-notes{margin-top:10px;padding:10px 12px;background:var(--border2);border-radius:8px}
.dtl-notes-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t4);margin-bottom:4px}
.dtl-notes-text{font-size:13px;color:var(--t2);line-height:1.6;white-space:pre-wrap}

/* ── Section divider & title ── */
.dtl-divider{height:1px;background:var(--border);margin:16px 0 14px}
.dtl-section-title{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--t4);margin-bottom:10px;
}

/* ── Empty state ── */
.dtl-empty{
  font-size:13px;color:var(--t4);text-align:center;
  padding:18px 0;font-style:italic;
}

/* ── Version list ── */
.dtl-ver-list{display:flex;flex-direction:column;gap:6px}
.dtl-ver-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 12px;border-radius:8px;
  background:var(--border2);transition:background .12s;
}
.dtl-ver-row:hover{background:var(--border)}
.dtl-ver-num{
  font-size:12px;font-weight:800;
  min-width:30px;padding-top:1px;flex-shrink:0;
}
.dtl-ver-info{flex:1;min-width:0}
.dtl-ver-title{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtl-ver-meta{font-size:11.5px;color:var(--t4);margin-top:2px}
.dtl-ver-badge{flex-shrink:0;display:flex;align-items:center}

/* ── Mini activity timeline ── */
.dtl-tl{display:flex;flex-direction:column}
.dtl-tl-item{display:flex;gap:10px;align-items:flex-start;min-height:36px}
.dtl-tl-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:26px}
.dtl-tl-ico{
  width:26px;height:26px;border-radius:7px;border:1.5px solid;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dtl-tl-ico svg{width:12px;height:12px;stroke-width:2.5}
.dtl-tl-line{width:1.5px;flex:1;background:var(--border);margin:3px 0;min-height:10px}
.dtl-tl-body{flex:1;min-width:0;padding-bottom:14px}
.dtl-tl-action{font-size:13px;font-weight:500;color:var(--t1);line-height:1.4}
.dtl-tl-who{font-size:11.5px;color:var(--t4);margin-top:2px}

/* ── Feedback table: Resolved column ── */
.fb-tbl th:nth-child(8),
.fb-tbl td:nth-child(8){min-width:90px}

/* ═══════════════════════════════════════════
   CUSTOM SOURCE MANAGER (Settings)
═══════════════════════════════════════════ */

/* Custom source badge style */
.src-custom{background:#F0F4FF;color:#4F46E5;border:1px solid #C7D2FE}

/* Source manager rows */
.src-mgr-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border2);
}
.src-mgr-row:last-child{border-bottom:none}
.src-mgr-built{
  font-size:11px;font-weight:600;color:var(--t4);
  background:var(--border2);padding:2px 8px;border-radius:10px;
}
.src-mgr-del{
  width:26px;height:26px;border-radius:6px;border:none;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--t4);transition:all .15s;
}
.src-mgr-del:hover{background:var(--red-lt);color:var(--red)}
.src-mgr-del svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}

/* Source filter tab count badge */
.src-ftab-cnt{
  background:rgba(0,0,0,.08);border-radius:10px;
  padding:0 5px;font-size:10.5px;font-weight:700;
}
.src-ftab.on .src-ftab-cnt{background:rgba(0,0,0,.12)}

/* Settings card desc text */
.settings-card-desc{font-size:12.5px;color:var(--t3);margin-top:2px}