/* CrewKriya app styles — shared by every signed-in page. Same palette as the marketing site. */
:root{
  --bg:#090C11; --bg-raised:#10141C; --bg-panel:#131822; --bg-hover:#171D29;
  --line:#232B38; --line-soft:#1A2029;
  --text:#EAEEF5; --text-dim:#99A2B3; --text-faint:#5C6577;
  --blue:#4E7BFF; --blue-dim:#2A3B66; --green:#17E3A6; --amber:#FFB238; --red:#FF7A6E; --violet:#A98BFF;
  --radius:8px; --radius-s:4px;
  --font:'IBM Plex Sans',system-ui,sans-serif; --display:'Sora',var(--font); --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.25}
h1{font-size:22px}h2{font-size:18px}h3{font-size:15.5px}h4{font-size:14px}
.mono{font-family:var(--mono)}
.dim{color:var(--text-dim)}.faint{color:var(--text-faint)}.small{font-size:12.5px}.tiny{font-size:11.5px}
.right{text-align:right}.nowrap{white-space:nowrap}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- Shell ----------
   ≥1100px  full sidebar
   701–1099 slim icon rail; ☰ opens the full menu over the page
   ≤700px   no sidebar; bottom tab bar + full menu from ☰ or More */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;min-height:100dvh}
.side{background:var(--bg-raised);border-right:1px solid var(--line-soft);padding:18px 12px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px}
.side-top{display:flex;align-items:center;justify-content:space-between}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-close{display:none;padding:6px 10px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--text);padding:4px 10px 18px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo-mark{width:20px;height:20px;position:relative;flex:none}
.logo-mark span{position:absolute;width:6px;height:6px;background:var(--blue);border-radius:1px}
.logo-mark span:nth-child(1){top:0;left:7px;background:var(--green)}
.logo-mark span:nth-child(2){top:7px;left:0}
.logo-mark span:nth-child(3){top:7px;left:14px}
.logo-mark span:nth-child(4){top:14px;left:7px;background:var(--amber)}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:14px 10px 6px}
.side a.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--text-dim);font-size:14px;text-decoration:none;position:relative}
.side a.nav .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side a.nav:hover{background:var(--bg-hover);color:var(--text)}
.side a.nav.on{background:var(--blue-dim);color:#fff}
.count{font-family:var(--mono);font-size:11px;background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;padding:0 7px;color:var(--text-dim)}
.count.hot{background:rgba(255,178,56,.14);border-color:rgba(255,178,56,.4);color:var(--amber)}
.side-foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text-dim)}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 28px;border-bottom:1px solid var(--line-soft);background:rgba(9,12,17,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.top-left{display:flex;align-items:center;gap:10px;min-width:0}
.top h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:10px}
.content{padding:24px 28px 60px;max-width:1240px;width:100%}
.top .menu-btn{display:none;padding:6px 8px}
.scrim{display:none}
.tabbar{display:none}

/* Tablet: icon rail */
@media (max-width:1099px) and (min-width:701px){
  .shell{grid-template-columns:68px 1fr}
  .side{padding:14px 8px;align-items:stretch}
  .side .logo{justify-content:center;padding:4px 0 16px}
  .side .logo .lbl,.side .side-label,.side .side-foot,.side a.nav .lbl{display:none}
  .side a.nav{justify-content:center;padding:10px 0}
  .side a.nav .ico{width:20px;height:20px}
  .side a.nav .count{position:absolute;top:2px;right:4px;font-size:9.5px;padding:0 4px;line-height:14px}
  .side a.nav .count:not(.hot){display:none}
  .top .menu-btn{display:inline-flex}
  .content,.top{padding-left:20px;padding-right:20px}
  /* ☰ expands the rail into the full menu over the page */
  .side.open{position:fixed;inset:0 auto 0 0;width:260px;z-index:60;padding:18px 12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .side.open .logo{justify-content:flex-start;padding:4px 10px 18px}
  .side.open .logo .lbl,.side.open .side-label,.side.open a.nav .lbl{display:block}
  .side.open .side-foot{display:block}
  .side.open a.nav{justify-content:flex-start;padding:8px 10px}
  .side.open a.nav .count{position:static;font-size:11px;padding:0 7px;line-height:inherit}
  .side.open a.nav .count:not(.hidden){display:inline}
  .side.open .side-close{display:inline-flex}
  .main{grid-column:2}
}

/* Phone: drawer + bottom tab bar */
@media (max-width:700px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;transform:translateX(-102%);transition:transform .22s ease;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .side.open{transform:none;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .side.open .side-close{display:inline-flex}
  .side a.nav{padding:11px 10px;font-size:15px}
  .top .menu-btn{display:inline-flex}
  .content{padding:14px 12px calc(84px + env(safe-area-inset-bottom,0px))}
  .top{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .top h1{font-size:17px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(16,20,28,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .tabbar .tb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;background:none;border:0;color:var(--text-faint);font-size:10.5px;font-family:var(--font);text-decoration:none;position:relative;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
  .tabbar .tb .ico{width:22px;height:22px}
  .tabbar .tb .lbl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabbar .tb.on{color:var(--text)}
  .tabbar .tb.on .ico{color:var(--blue)}
  .tabbar .tb:active{background:var(--bg-hover)}
  .tabbar .tb .count{position:absolute;top:1px;left:calc(50% + 6px);font-size:9.5px;line-height:14px;padding:0 4px}
  .tabbar .tb .count:not(.hot){display:none}
}
@media (max-width:1099px){
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  body.menu-open .scrim{display:block;opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.side,.scrim{transition:none}}

/* ---------- Building blocks ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg-panel);color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:#3a4356;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#3d69ef}
.btn.good{background:rgba(23,227,166,.12);border-color:rgba(23,227,166,.45);color:var(--green)}
.btn.warn{background:rgba(255,178,56,.1);border-color:rgba(255,178,56,.4);color:var(--amber)}
.btn.danger{background:rgba(255,122,110,.1);border-color:rgba(255,122,110,.4);color:var(--red)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.card-body{padding:16px 18px}
.card-body.tight{padding:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .k{font-size:12px;color:var(--text-dim)}
.stat .v{font-family:var(--display);font-size:22px;font-weight:700;margin-top:4px}
.stat .s{font-size:12px;color:var(--text-faint);margin-top:2px}
.stat.link{cursor:pointer}.stat.link:hover{border-color:#3a4356}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:13.5px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:500;background:var(--bg-raised)}
tr.click{cursor:pointer}tr.click:hover td{background:var(--bg-hover)}
.empty{padding:28px 18px;text-align:center;color:var(--text-faint);font-size:13.5px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 9px;border-radius:12px;border:1px solid var(--line);color:var(--text-dim);white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.blue{color:#9DB4FF;border-color:#2A3B66;background:rgba(78,123,255,.08)}
.pill.green{color:var(--green);border-color:rgba(23,227,166,.35);background:rgba(23,227,166,.07)}
.pill.amber{color:var(--amber);border-color:rgba(255,178,56,.35);background:rgba(255,178,56,.07)}
.pill.red{color:var(--red);border-color:rgba(255,122,110,.35);background:rgba(255,122,110,.07)}
.pill.violet{color:var(--violet);border-color:rgba(169,139,255,.35);background:rgba(169,139,255,.07)}
.tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:10px;background:var(--bg-raised);border:1px solid var(--line-soft);color:var(--text-dim);margin:2px 4px 2px 0}
.tag.ok{color:var(--green);border-color:rgba(23,227,166,.3)}
.notice{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--bg-raised);border-radius:6px;padding:12px 14px;font-size:13.5px;margin-bottom:14px}
.notice.warn{border-left-color:var(--amber)}.notice.bad{border-left-color:var(--red)}.notice.good{border-left-color:var(--green)}
.list-row{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.list-row:last-child{border-bottom:none}
.list-row .grow{flex:1;min-width:0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 16px;font-size:13.5px}
.kv dt{color:var(--text-dim)}
@media (max-width:700px){.kv{grid-template-columns:1fr}}
.progress{height:6px;background:var(--line-soft);border-radius:4px;overflow:hidden;min-width:80px}
.progress span{display:block;height:100%;background:var(--blue)}
.stepper{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
.step{flex:1;min-width:96px;border-top:3px solid var(--line);padding-top:6px;font-size:11.5px;color:var(--text-faint)}
.step.done{border-color:var(--green);color:var(--text-dim)}
.step.now{border-color:var(--blue);color:var(--text);font-weight:600}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:none;padding:10px 14px;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;font-size:13.5px}
.tabs button.on{color:var(--text);border-bottom-color:var(--blue)}
.tabs button .count{margin-left:6px}

/* ---------- Forms ---------- */
.form{display:grid;gap:14px}
.form.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.form.cols{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;color:var(--text-dim);font-weight:500}
.field .hint{font-size:12px;color:var(--text-faint)}
.field .err{font-size:12px;color:var(--red)}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],input[type=url],input[type=search],select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);padding:9px 11px;font-size:14px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none}
textarea{min-height:90px;resize:vertical}
select[multiple]{min-height:150px;padding:4px}
select[multiple] option{padding:4px 8px;border-radius:3px}
select[multiple] option:checked{background:var(--blue-dim);color:#fff}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--blue)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.seg button{background:transparent;border:none;padding:7px 14px;cursor:pointer;color:var(--text-dim);font-size:13px}
.seg button.on{background:var(--blue-dim);color:#fff}

/* ---------- Chat ---------- */
.chat{display:flex;flex-direction:column;height:520px}
.chat-log{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%}
.msg .b{background:var(--bg-raised);border:1px solid var(--line-soft);border-radius:10px;padding:8px 12px;white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-end}
.msg.me .b{background:var(--blue-dim);border-color:#34487c}
.msg .meta{font-size:11.5px;color:var(--text-faint);margin-top:3px}
.msg.me .meta{text-align:right}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-soft)}
.chat-input textarea{min-height:42px;height:42px}

/* ---------- Overlays ---------- */
.toasts{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px;max-width:380px}
.toast{background:var(--bg-panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:6px;padding:11px 14px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:in .2s ease}
.toast.error{border-left-color:var(--red)}.toast.info{border-left-color:var(--blue)}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.modal{background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;width:100%;max-width:560px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal.wide{max-width:900px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.modal-body{padding:18px 20px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line-soft)}
.x{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;line-height:1}
.bell{position:relative}
.bell .dot{position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.panel{position:absolute;right:0;top:calc(100% + 8px);width:360px;max-height:440px;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:40}
.panel .list-row{padding:10px 14px;font-size:13px}
.panel .unread{border-left:2px solid var(--blue)}

/* ---------- Auth pages ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(78,123,255,.10),transparent 70%)}
.auth-card{width:100%;max-width:440px;background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:28px}
.auth-card h1{font-size:22px;margin:6px 0 4px}
.auth-card .sub{color:var(--text-dim);margin-bottom:20px;font-size:14px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.divider-or{display:flex;align-items:center;gap:10px;color:var(--text-faint);font-size:12px;margin:16px 0}
.divider-or::before,.divider-or::after{content:'';flex:1;border-top:1px solid var(--line)}

/* ---------- Review report ---------- */
.crit{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.crit:last-child{border-bottom:none}
.agent{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--violet)}
.agent::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--violet)}
.checklist .check{padding:7px 0;border-bottom:1px solid var(--line-soft)}
.checklist .check:last-child{border-bottom:none}
.reveal{font-family:var(--mono);background:var(--bg);border:1px dashed var(--amber);padding:10px;border-radius:6px;word-break:break-all}
/* Dashboards: bar lists, utilisation heatmap, health dots */
.bar-row{display:grid;grid-template-columns:minmax(90px,1.2fr) 2fr auto;gap:10px;align-items:center;padding:5px 0}
.bar{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--blue)}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.heat > div{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px}
.heat > div b{display:block;font-family:var(--mono);font-size:15px}
.heat > .h0{background:rgba(78,123,255,.06)}.heat .h1{background:rgba(23,227,166,.10)}.heat .h2{background:rgba(255,178,56,.14)}.heat .h3{background:rgba(255,122,110,.16)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}
/* Talent work dashboard and workspace */
.hero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:linear-gradient(135deg,rgba(78,123,255,.10),rgba(23,227,166,.05));border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px}
.hero h2{font-family:var(--display);font-size:22px;margin:0 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ring{--p:0;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring span{width:76px;height:76px;border-radius:50%;background:var(--bg-panel);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px;text-align:center;line-height:1.1}
.ring span small{display:block;font-family:var(--font);font-weight:400;font-size:10.5px;color:var(--text-dim)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpis .stat .v.warn{color:var(--amber)}.kpis .stat .v.bad{color:var(--red)}
.workgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:16px}
.wcard{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.wcard.risk{border-color:rgba(255,178,56,.45)}.wcard.late{border-color:rgba(255,122,110,.55)}
.wcard h3{margin:0;font-size:15.5px}
.meter{height:7px;background:var(--line-soft);border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;background:var(--blue)}
.meter.green i{background:var(--green)}.meter.amber i{background:var(--amber)}.meter.red i{background:var(--red)}
.mrow{display:grid;grid-template-columns:86px 1fr auto;gap:8px;align-items:center;font-size:12px;color:var(--text-dim)}
.vbars{display:flex;align-items:flex-end;gap:5px;height:120px;padding-top:8px}
.vbars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.vbars i{display:block;width:100%;max-width:26px;background:var(--blue);border-radius:3px 3px 0 0;min-height:2px}
.vbars span{font-size:10px;color:var(--text-faint);white-space:nowrap}
.feed .list-row{padding:9px 18px}.feed .ico{width:22px;text-align:center}
.ws{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.ws-list .item{display:block;padding:12px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer;color:inherit;text-decoration:none}
.ws-list .item:hover{background:var(--bg-hover)}.ws-list .item.on{background:var(--bg-hover);border-left:3px solid var(--blue)}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);padding:0 12px;overflow-x:auto}
.subtabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--text-dim);padding:11px 12px;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.subtabs button.on{color:var(--text);border-bottom-color:var(--blue)}
.timeline .ev{border-left:2px solid var(--line);margin-left:8px;padding:0 0 14px 16px;position:relative}
.timeline .ev::before{content:'';position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.timeline .ev.block::before{background:var(--red)}
.erow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.erow .field{margin:0}
@media (max-width:900px){.ws{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr}.workgrid{grid-template-columns:1fr}}
input[type=month],input[type=date]{color-scheme:dark}
.ws > *,.workgrid > *{min-width:0}
#wsDetail .card-body.tight,.profile-grid .card-body{overflow-x:auto}
.profile-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.profile-grid{grid-template-columns:1fr}}
@media (max-width:900px){.ws-list .item{padding:10px 12px}.ws-list{max-height:260px;overflow-y:auto}}
.mention{color:var(--blue)}.msg.mentioned .b{border-color:var(--blue)}
#threadBar{border-bottom:1px solid var(--line-soft)}
#tmBody .card-body.tight{overflow-x:auto}

/* ---------- Responsive: tablets and phones ---------- */
/* Grids: four stat tiles stay in a row on tablets, become 2×2 on phones */
@media (max-width:1099px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g2{grid-template-columns:1fr}}
@media (max-width:760px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}.grid{gap:10px}}
@media (max-width:340px){.g4{grid-template-columns:1fr}}
/* Wide tables scroll sideways inside their card instead of stretching the page */
.card-body.tight,.modal-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card-head{flex-wrap:wrap}
.card-head > h2,.card-head > h3{min-width:0}
.fold-btn{display:none}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero{grid-template-columns:1fr auto;padding:16px;gap:12px}
  .hero h2{font-size:19px}
  .ring{width:72px;height:72px}.ring span{width:58px;height:58px;font-size:16px}
  .workgrid{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:14px}
  h2{font-size:16.5px}
  .card{margin-bottom:12px}
  .card-head{padding:12px 14px;gap:8px}
  .card-body{padding:14px}
  .stat{padding:11px 12px}
  .stat .v{font-size:19px}
  .stat .k{font-size:11.5px}
  .stat .s{font-size:11px}
  th,td{padding:9px 10px;font-size:13px}
  td{white-space:normal}
  .list-row{padding:11px 14px}
  .notice{padding:10px 12px;font-size:13px}
  .tabs{margin-left:-12px;margin-right:-12px;padding:0 6px;position:sticky;top:calc(50px + env(safe-area-inset-top,0px));background:var(--bg);z-index:15;scrollbar-width:none}
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}
  .tabs button{padding:11px 12px}
  .btn{padding:9px 14px}
  .btn.sm{padding:6px 10px}
  /* 16px inputs stop iPhones zooming in on focus */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  .kv{gap:2px 0}.kv dd{margin-bottom:8px}
  .chat{height:calc(100dvh - 260px);min-height:340px}
  .msg{max-width:88%}
  .ws-list{max-height:220px}
  .bar-row{grid-template-columns:minmax(70px,1fr) 1.4fr auto}
  /* Fold long pages: tap a card heading to show or hide it */
  .card[data-fold] > .card-head{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .card[data-fold] > .card-head .fold-btn{display:inline-flex;margin-left:auto;background:none;border:0;color:var(--text-dim);padding:4px;cursor:pointer;order:99}
  .card[data-fold] > .card-head .fold-btn .ico{transition:transform .2s}
  .card.folded > .card-head{border-bottom:0}
  .card.folded > .card-head .fold-btn .ico{transform:rotate(-90deg)}
  .card.folded > :not(.card-head){display:none!important}
  /* Overlays become bottom sheets, toasts sit above the tab bar, the bell panel fits the screen */
  .overlay{padding:0;align-items:flex-end}
  .modal,.modal.wide{max-width:none;border-radius:14px 14px 0 0;max-height:92dvh;display:flex;flex-direction:column}
  .modal .modal-wrap{display:flex;flex-direction:column;min-height:0;max-height:92dvh}
  .modal-body{overflow-y:auto;padding:14px 16px}
  .modal-head{padding:14px 16px}
  .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .modal-foot .btn{flex:1}
  .toasts{top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));left:12px;right:12px;max-width:none}
  .panel{position:fixed;left:8px;right:8px;top:calc(56px + env(safe-area-inset-top,0px));width:auto;max-height:70dvh}
  .auth-card{padding:22px 18px}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.card[data-fold] > .card-head .fold-btn .ico{transition:none}}

/* ---------- Agreements: reading and signing ---------- */
.doc-block{border:1px solid var(--line);border-radius:var(--radius);margin-top:12px;overflow:hidden}
.doc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--bg-raised);border-bottom:1px solid var(--line-soft)}
.doc-text{max-height:42vh;overflow-y:auto;padding:14px 18px;background:#f8fafc;color:#111827;font-size:14px;line-height:1.6;overscroll-behavior:contain}
.doc-text h3,.doc-text h4,.doc-text h5{font-family:var(--font);color:#111827;margin:14px 0 6px;font-size:14.5px}
.doc-text h3{font-size:16px}
.doc-text p{margin:0 0 9px}
.doc-text ul,.doc-text ol{margin:0 0 10px 22px}
.doc-text li{margin-bottom:4px}
.doc-text table{margin:4px 0 12px;background:#fff}
.doc-text th{background:#eef2f7;color:#374151}
.doc-text th,.doc-text td{border-bottom:1px solid #e5e7eb;font-size:13px;color:#111827}
.doc-text .tbl{overflow-x:auto}
.sigpad{position:relative;border:1px dashed var(--line);border-radius:var(--radius);background:#f8fafc;height:150px}
.sigpad canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;border-radius:var(--radius)}
.sigpad .btn{position:absolute;right:8px;top:8px;background:#fff;color:#111827;border-color:#d1d5db}
.legal-page{max-width:820px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left,0px)) 60px}
.legal-page .doc-text{max-height:none;border-radius:var(--radius)}
.legal-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.legal-tabs a{padding:6px 12px;border:1px solid var(--line);border-radius:16px;color:var(--text-dim);font-size:13px;text-decoration:none}
.legal-tabs a.on{background:var(--blue-dim);color:#fff;border-color:var(--blue-dim)}
@media (max-width:700px){.doc-text{padding:12px;font-size:13.5px}.sigpad{height:130px}}