/* ==========================================================================
   Shotwise Work — internal management system
   Dark cinematic theme · Outfit (display) + Inter (UI)
   ========================================================================== */
:root{
  --bg:#060606; --bg-2:#0b0b0b; --panel:#111; --panel-2:#171717; --panel-3:#1d1d1d;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.22);
  --text:#f4f1ec; --muted:#a19b93; --dim:#6d675f;
  --orange:#F2762E; --orange-2:#ff9a52; --orange-soft:rgba(242,118,46,.12);
  --grad:linear-gradient(135deg,#F7963F 0%,#F2762E 45%,#D9481A 100%);
  --green:#5fd39a; --red:#ff7063; --blue:#7cb4ff; --yellow:#f5c65b; --amber:#ffa94d; --violet:#b99bff; --cyan:#5fd0e0; --grey:#8a857e;
  --radius:14px; --side:252px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:14px/1.55 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:5px}
::selection{background:var(--orange);color:#000}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}

/* text helpers */
.dim{color:var(--muted)} .small{font-size:12.5px} .block{display:block} .strong{font-weight:600}
.r{text-align:right} .wrap{white-space:normal;word-break:break-word}
.c-red{color:var(--red)} .c-green{color:var(--green)} .c-orange{color:var(--orange)} .c-violet{color:var(--violet)} .c-yellow{color:var(--yellow)}
small{font-size:12px}
.link{color:var(--orange);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.link:hover{color:var(--orange-2)}
.link .ic{width:14px;height:14px}

/* wordmark */
.wordmark{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.045em;display:inline-flex;align-items:center;line-height:1;font-size:26px;color:var(--text)}
.wordmark .o{display:inline-grid;place-items:center;width:.62em;height:.62em;border-radius:50%;background:var(--grad);margin:0 .015em;position:relative;top:.06em}
.wordmark .o svg{width:42%;height:42%;margin-left:8%}

/* ==========================================================================
   Shell
   ========================================================================== */
.shell{display:flex;min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40;transition:transform .35s var(--ease)}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 18px 16px}
.side-tag{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(242,118,46,.35);padding:3px 8px;border-radius:999px;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.menu{flex:1;overflow-y:auto;padding:6px 10px 16px;scrollbar-width:thin}
.menu a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:500;transition:background .15s,color .15s;margin-bottom:1px}
.menu a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.menu a.on{background:var(--orange-soft);color:var(--text)}
.menu a.on .ic{color:var(--orange)}
.menu a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .count{background:var(--orange);color:#000;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px}
.menu-sep{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);padding:16px 12px 6px}
.side-foot{border-top:1px solid var(--line);padding:12px;display:flex;align-items:center;gap:8px}
.me{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px}
.me:hover,.me.on{background:rgba(255,255,255,.04)}
.me span{min-width:0}
.me b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me small{color:var(--dim)}
.scrim{display:none}

.main{flex:1;min-width:0;margin-left:var(--side);display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:14px;padding:0 28px;background:rgba(6,6,6,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .menu-btn{display:none}
.gsearch{flex:1;max-width:520px;position:relative}
.gsearch .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);width:16px;height:16px}
.top .gsearch input{width:100%;height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);padding:0 14px 0 38px;font-size:13.5px;transition:border-color .2s}
.top .gsearch input:focus{outline:none;border-color:var(--orange)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.bell{position:relative}
.bell .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--orange);color:#000;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bg)}

.content{padding:26px 28px 70px;max-width:1480px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.1}
.page-head .sub{color:var(--muted);margin-top:6px;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);font-size:13px;font-weight:500;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,transform .15s;cursor:pointer}
.btn .ic{width:16px;height:16px}
.btn:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}
.btn-primary{background:var(--grad);border-color:transparent;color:#0a0a0a;font-weight:600}
.btn-primary:hover{background:var(--grad);filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 24px -10px rgba(242,118,46,.6)}
.btn-ghost{background:none;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn-danger{color:var(--red);border-color:rgba(255,112,99,.3);background:none}
.btn-danger:hover{background:rgba(255,112,99,.1);border-color:var(--red)}
.btn-wa{color:#8ee6b3;border-color:rgba(95,211,154,.3);background:rgba(95,211,154,.06)}
.btn-wa:hover{border-color:var(--green);background:rgba(95,211,154,.12)}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%}
.btn-icon{width:38px;padding:0}
.btn.on{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.ib{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:9px;border:1px solid var(--line-2);color:var(--muted);transition:all .15s;flex:none}
.ib .ic{width:16px;height:16px}
.ib:hover{color:var(--text);border-color:var(--line-3)}
.ib.wa:hover{color:var(--green);border-color:var(--green)}
.ib.danger:hover{color:var(--red);border-color:var(--red)}
form.inline{display:inline-flex}
.acts{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}

/* ==========================================================================
   Cards, stats, pills
   ========================================================================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-h.pad{padding:18px 20px 0;margin-bottom:10px}
.card-h h2{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-h h2 small{font-family:'Inter';font-weight:400}
.card-t{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-t .pill{letter-spacing:0;text-transform:none;font-family:'Inter'}
.card-alert{border-color:rgba(242,118,46,.35);background:#130c08}
.subhead{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:18px 0 10px}
.eyebrow{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--orange)}

.stats{display:grid;gap:12px;margin-bottom:16px}
.stats-3{grid-template-columns:repeat(3,1fr)}
.stats-4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;transition:border-color .15s;display:block}
a.stat:hover{border-color:var(--line-3)}
.stat-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat-v{font-family:'Outfit',sans-serif;font-size:28px;font-weight:700;line-height:1.2;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-v small{font-size:14px;color:var(--muted);font-weight:500}
.stat-s{font-size:12px;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.tone-orange::before{background:var(--orange)} .tone-orange .stat-v{color:var(--orange)}
.tone-red::before{background:var(--red)} .tone-red .stat-v{color:var(--red)}
.tone-green::before{background:var(--green)} .tone-green .stat-v{color:var(--green)}
.tone-violet::before{background:var(--violet)} .tone-violet .stat-v{color:var(--violet)}
.tone-yellow::before{background:var(--yellow)} .tone-yellow .stat-v{color:var(--yellow)}

.pill{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap;border:1px solid var(--line-2);color:var(--muted);background:rgba(255,255,255,.03);vertical-align:middle;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.orange{color:var(--orange);border-color:rgba(242,118,46,.3);background:var(--orange-soft)}
.pill.blue{color:var(--blue);border-color:rgba(124,180,255,.25);background:rgba(124,180,255,.08)}
.pill.violet{color:var(--violet);border-color:rgba(185,155,255,.25);background:rgba(185,155,255,.08)}
.pill.cyan{color:var(--cyan);border-color:rgba(95,208,224,.25);background:rgba(95,208,224,.08)}
.pill.yellow{color:var(--yellow);border-color:rgba(245,198,91,.25);background:rgba(245,198,91,.08)}
.pill.amber{color:var(--amber);border-color:rgba(255,169,77,.28);background:rgba(255,169,77,.08)}
.pill.green{color:var(--green);border-color:rgba(95,211,154,.25);background:rgba(95,211,154,.08)}
.pill.red{color:var(--red);border-color:rgba(255,112,99,.3);background:rgba(255,112,99,.08)}
.pill.grey{color:var(--grey)}

/* SLA timer chip */
.timer{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;border:1px solid transparent}
.timer i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.t-ok{color:var(--green);background:rgba(95,211,154,.08);border-color:rgba(95,211,154,.2)}
.t-warn{color:var(--yellow);background:rgba(245,198,91,.08);border-color:rgba(245,198,91,.22)}
.t-risk{color:var(--amber);background:rgba(255,169,77,.1);border-color:rgba(255,169,77,.3)}
.t-urgent{color:var(--red);background:rgba(255,112,99,.1);border-color:rgba(255,112,99,.35)}
.t-urgent i{animation:pulse 1.2s infinite}
.t-over{color:#fff;background:#2a0d0a;border-color:var(--red)}
.t-over i{background:var(--red);animation:pulse .9s infinite}
.t-done{color:var(--muted);background:rgba(255,255,255,.03);border-color:var(--line-2)}
.timer-big{font-size:15px;padding:7px 14px}
@keyframes pulse{50%{opacity:.25}}

.progress{height:8px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden;flex:1;min-width:60px}
.progress i{display:block;height:100%;border-radius:8px;background:var(--grad);transition:width .8s var(--ease)}
.progress.done i{background:linear-gradient(90deg,#3fbf80,#5fd39a)}

.flash{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:13.5px;border:1px solid}
.flash .ic{width:17px;height:17px}
.flash span{flex:1}
.flash-ok{background:rgba(95,211,154,.08);border-color:rgba(95,211,154,.25);color:#b6f0d1}
.flash-error{background:rgba(255,112,99,.08);border-color:rgba(255,112,99,.3);color:#ffc2bb}
.flash-info{background:rgba(124,180,255,.08);border-color:rgba(124,180,255,.25);color:#cfe2ff}
.flash-x{color:inherit;opacity:.6;display:grid;place-items:center}
.flash-x:hover{opacity:1}
.flash-x .ic{width:15px;height:15px}

.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.empty-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin:0 auto 14px;background:var(--orange-soft);color:var(--orange)}
.empty-ic .ic{width:24px;height:24px}
.empty h3{font-family:'Outfit',sans-serif;font-size:18px;color:var(--text);margin-bottom:4px}
.empty-a{margin-top:16px;display:flex;justify-content:center;gap:8px}

.av{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:var(--panel-3);border:1px solid var(--line-2);color:var(--orange);font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;object-fit:cover}
.who{display:flex;align-items:center;gap:10px;min-width:0}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],input[type=time],input[type=month],input[type=datetime-local],select,textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:0 12px;height:40px;font-size:14px;color:var(--text);transition:border-color .15s,background .15s}
textarea{height:auto;padding:10px 12px;line-height:1.5;resize:vertical;min-height:44px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);background:#0e0e0e}
input::placeholder,textarea::placeholder{color:#4f4a44}
input[readonly]{opacity:.7}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a19b93' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
select option{background:#151515}
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{color-scheme:dark}
input[type=file]{font-size:13px;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-size:12.5px;color:var(--text);background:var(--panel-3);border:1px solid var(--line-2);border-radius:8px;padding:7px 12px;margin-right:10px;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--orange);width:16px;height:16px}

.form .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
.form.narrow{max-width:760px}
.form.narrow .fgrid{grid-template-columns:repeat(2,1fr)}
.form-h{font-family:'Outfit',sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:22px 0 12px;display:flex;align-items:center;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.form > .form-h:first-of-type,.form-h:first-child{margin-top:0;padding-top:0;border-top:0}
.step-n{width:22px;height:22px;border-radius:50%;background:var(--orange);color:#000;display:inline-grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:0}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide,.fgrid .wide{grid-column:1 / -1}
.field label{font-size:12.5px;color:var(--muted);font-weight:500}
.req{color:var(--orange);font-weight:600}
.hint{color:var(--dim);font-size:11.5px}
.static{height:40px;display:flex;align-items:center;padding:0 12px;border-radius:10px;border:1px dashed var(--line-2);color:var(--text);font-weight:600}
.static.big{font-family:'Outfit',sans-serif;font-size:20px;color:var(--orange)}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text);cursor:pointer;align-self:end;min-height:40px}
.form-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.input-group{display:flex;gap:6px}
.input-group select{width:76px;flex:none}
.stack{display:flex;flex-direction:column;gap:10px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form input,.inline-form select{flex:1;min-width:120px;width:auto}
.inline-l{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.inline-l input{width:auto}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.filters select,.filters input[type=date],.filters input[type=month]{width:auto;height:36px;font-size:13px;min-width:130px;background-color:var(--panel)}
.filters .btn{height:36px}
.search-in{position:relative;flex:1;min-width:200px;max-width:320px}
.search-in .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim)}
.search-in input{padding-left:34px;height:36px;font-size:13px;background:var(--panel)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:all .15s;white-space:nowrap}
.tab b{font-size:11px;font-weight:600;min-width:20px;height:19px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.07);display:inline-grid;place-items:center;color:var(--text)}
.tab:hover{color:var(--text);border-color:var(--line-3)}
.tab.on{background:var(--text);border-color:var(--text);color:#000}
.tab.on b{background:rgba(0,0,0,.12);color:#000}
.tab.tab-red b{background:var(--red);color:#000}

/* ==========================================================================
   Tables
   ========================================================================== */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:12px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr[data-href]{cursor:pointer;transition:background .12s}
.tbl tbody tr[data-href]:hover{background:rgba(255,255,255,.025)}
.tbl-compact td{padding:9px 12px}
.tbl-compact th{padding:9px 12px}
.card:not(.flush) .tbl th{background:none;padding-left:0}
.card:not(.flush) .tbl td{padding-left:0}
.tbl .acts{white-space:nowrap}
.tbl tr.sla-over td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tbl tr.sla-urgent td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.tbl tr.sla-risk td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.tbl-inputs input{height:36px}
.prog-cell{min-width:120px}
.prog-cell .progress{display:inline-block;width:80px;vertical-align:middle;margin-right:8px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap;font-size:12.5px}
.pager-btns{display:flex;gap:6px}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.kv dt{color:var(--dim)}
.kv dd{min-width:0;word-break:break-word}
.kv-2{grid-template-columns:auto 1fr auto 1fr}
.kv-3{grid-template-columns:auto 1fr auto 1fr auto 1fr}
.prose{font-size:14px;line-height:1.65;color:#e5e1db;white-space:normal;word-break:break-word}
.row-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);transition:color .12s}
.row-link:last-child{border-bottom:0}
.row-link:hover b{color:var(--orange)}
.row-link > span:first-child{min-width:0;overflow:hidden}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.lr-main{display:flex;flex-direction:column;min-width:0}
.lr-main b{font-size:13.5px}
.lr-act{display:flex;gap:6px}
.linkrow{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;word-break:break-all}
.linkrow .ic{width:15px;height:15px}
.big-date{font-family:'Outfit',sans-serif;font-size:20px;font-weight:600}

.nudge{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid rgba(185,155,255,.25);background:rgba(185,155,255,.06);margin-bottom:16px;font-size:13.5px;color:#ddd3ff}
.nudge span{flex:1}
.nudge .ic:first-child{color:var(--violet)}
.nudge:hover{border-color:var(--violet)}
.alert-strip{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,112,99,.35);background:rgba(255,112,99,.08);margin-bottom:16px;color:#ffc9c2}
.alert-strip .ic{color:var(--red)}

/* ==========================================================================
   Sales dashboard
   ========================================================================== */
.hero-target{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}
.ht-main{position:relative;overflow:hidden;border-radius:18px;padding:24px 26px;background:#120b07;border:1px solid rgba(242,118,46,.3)}
.ht-main::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(242,118,46,.28),transparent 65%);pointer-events:none}
.ht-nums{display:flex;gap:34px;flex-wrap:wrap;margin:16px 0 18px;position:relative}
.ht-nums small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ht-nums b{font-family:'Outfit',sans-serif;font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.1}
.ht-bar{display:flex;align-items:center;gap:14px;position:relative}
.ht-bar .progress{height:12px}
.ht-bar span{font-family:'Outfit',sans-serif;font-weight:700;font-size:20px;color:var(--orange);min-width:56px;text-align:right}
.ht-main p{margin-top:10px;position:relative;font-size:13px}
.ht-side{display:grid;gap:12px}
.mini-target{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.mt-h{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mt-h b{color:var(--orange);letter-spacing:0}
.mt-v{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700}
.mt-v small{font-size:14px;color:var(--muted);font-weight:500}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.qa-btn{flex:1;min-width:140px;display:flex;align-items:center;justify-content:center;gap:9px;height:48px;border-radius:12px;border:1px dashed var(--line-3);color:var(--text);font-weight:500;font-size:13.5px;transition:all .15s}
.qa-btn .ic{color:var(--orange)}
.qa-btn:hover{border-style:solid;border-color:var(--orange);background:var(--orange-soft)}

/* project cards */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pcard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);transition:border-color .15s,transform .15s;position:relative;overflow:hidden}
.pcard:hover{border-color:var(--line-3);transform:translateY(-1px)}
.pcard::before,.ecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.s-ok::before{background:var(--green)} .s-warn::before{background:var(--yellow)} .s-risk::before{background:var(--amber)} .s-urgent::before{background:var(--red)} .s-over::before{background:var(--red)} .s-done::before{background:var(--grey)}
.pcard-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.code{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--dim);letter-spacing:.02em}
.pcard h4{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;line-height:1.25}
.pcard-sub{font-size:12.5px;color:var(--muted);line-height:1.4}
.pcard-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin:2px 0 4px}
.pcard-meta span{display:inline-flex;align-items:center;gap:5px}
.pcard-meta .ic{width:13px;height:13px}
.pcard .timer{align-self:flex-start}
.ecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.ecard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2)}
.ecard h3{font-family:'Outfit',sans-serif;font-size:19px;font-weight:600}
.timer-row{margin:4px 0}
.req-snip{font-size:13px;color:var(--muted);border-left:2px solid var(--line-2);padding-left:10px}
.ecard .kv{font-size:12.5px;gap:4px 12px}
.ecard .btn{margin-top:auto}

/* admin dashboard */
.revenue-card .rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rev-grid small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rev-grid b{font-family:'Outfit',sans-serif;font-size:24px;font-weight:700;display:block}
.rev-grid b small{display:inline;font-size:13px;letter-spacing:0;text-transform:none}
.rev-grid em{font-style:normal;font-size:11.5px}
.rev-target .progress{margin-top:8px}
.rev-sep{height:1px;background:var(--line);margin:16px 0}
.leader{padding:10px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.leader:last-child{border-bottom:0}
.leader-h{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.leader-h span{color:var(--muted);white-space:nowrap}
.tbl.tbl-compact .r{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Leads, timeline, notes
   ========================================================================== */
.pipeline-steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;align-items:center}
.step-f{display:inline-flex}
.step{height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line-2);font-size:12.5px;color:var(--muted);transition:all .15s;display:inline-flex;align-items:center;cursor:pointer;list-style:none}
.step:hover{color:var(--text);border-color:var(--line-3)}
.step.past{color:var(--text);border-color:rgba(242,118,46,.3)}
.step.on{background:var(--grad);border-color:transparent;color:#000;font-weight:600}
.step.lost{color:var(--red);border-style:dashed}
.lost-d{position:relative}
.lost-d summary::-webkit-details-marker{display:none}
.pop{position:absolute;top:40px;left:0;z-index:20;width:280px;padding:14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.note-form{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.note-form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.note-form-row select{width:auto}
.note-form-row .check{margin-right:auto;min-height:0;font-size:12.5px;color:var(--muted)}
.timeline{position:relative;padding-left:4px}
.tl-item{display:flex;gap:12px;padding:8px 0;position:relative}
.tl-item::before{content:"";position:absolute;left:5px;top:22px;bottom:-8px;width:1px;background:var(--line-2)}
.tl-item:last-child::before{display:none}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--panel-3);border:2px solid var(--line-3);flex:none;margin-top:5px}
.tl-call .tl-dot,.tl-whatsapp .tl-dot{border-color:var(--green)}
.tl-meeting .tl-dot{border-color:var(--violet)}
.tl-status .tl-dot{border-color:var(--orange)}
.tl-h{font-size:12.5px;color:var(--muted)}
.tl-h b{color:var(--text)}
.tl-b{font-size:13.5px;margin-top:2px;word-break:break-word}

/* ==========================================================================
   Kanban pipeline
   ========================================================================== */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(262px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start;scroll-snap-type:x proximity}
.kcol{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;max-height:calc(100vh - 230px);min-height:200px;scroll-snap-align:start}
.kcol.k-pipe{border-color:rgba(185,155,255,.18)}
.kcol-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.kcount{font-size:12px;color:var(--muted);margin-left:4px}
.ksum{font-weight:600;color:var(--muted)}
.kcol-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px;transition:background .15s;border-radius:0 0 14px 14px}
.kcol-body.over{background:rgba(242,118,46,.06);outline:1px dashed var(--orange);outline-offset:-6px}
.kcard{background:var(--panel);border:1px solid var(--line-2);border-radius:11px;padding:12px;cursor:grab;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,opacity .15s,transform .15s}
.kcard:hover{border-color:var(--line-3)}
.kcard.dragging{opacity:.4;transform:rotate(1.5deg)}
.kcard.saving{opacity:.6}
.kcard-t{font-weight:600;font-size:14px;line-height:1.3}
.kcard-t:hover{color:var(--orange)}
.kcard-s{font-size:12px;color:var(--muted);line-height:1.35}
.kcard-m{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.kcard-m span{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.kcard-m .ic{width:13px;height:13px}
.kcard-f{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding-top:6px;border-top:1px solid var(--line)}
.kmove{display:none}
.kmove select{height:32px;font-size:12.5px}

/* ==========================================================================
   Packages & quotations
   ========================================================================== */
.pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.pkg{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.pkg.off{opacity:.6}
.pkg-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pkg-h h3{font-family:'Outfit',sans-serif;font-size:19px}
.pkg-price{font-family:'Outfit',sans-serif;font-size:32px;font-weight:700;color:var(--orange)}
.pkg-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.pkg-meta span{display:inline-flex;align-items:center;gap:5px}
.pkg-meta .ic{width:14px;height:14px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px}
.ticks li{display:flex;gap:8px;align-items:flex-start}
.ticks .ic{width:15px;height:15px;color:var(--green);margin-top:2px}
.pkg-f{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.pkg-f > span{display:flex;gap:6px}

.quote-to{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--orange-soft);border:1px solid rgba(242,118,46,.25);margin-bottom:18px;font-size:14px}
.quote-to .ic{color:var(--orange)}
.extras{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.extra-row{display:grid;grid-template-columns:1fr 160px 36px;gap:8px;align-items:center}
.totals{margin:22px 0 0 auto;max-width:380px;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.totals > div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.totals b{color:var(--text);font-variant-numeric:tabular-nums}
.totals .grand{padding-top:10px;border-top:1px solid var(--line-2);font-size:16px}
.totals .grand b{font-family:'Outfit',sans-serif;font-size:24px;color:var(--orange)}
.status-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px}

.quote-doc{background:#fbfaf7;color:#1a1714;border-radius:16px;padding:44px 48px;max-width:860px;box-shadow:var(--shadow)}
.quote-doc .wordmark{color:#111}
.quote-doc .dim{color:#7a736b}
.qd-h{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:2px solid #111}
.qd-sub{font-family:'Outfit',sans-serif;letter-spacing:.5em;font-size:11px;margin:8px 0 10px}
.qd-meta h2{font-family:'Outfit',sans-serif;font-size:28px;letter-spacing:.12em;color:#F2762E;text-align:right}
.qd-meta dl{display:grid;grid-template-columns:auto auto;gap:4px 14px;margin-top:10px;font-size:13px;justify-content:end}
.qd-meta dt{color:#7a736b;text-align:right}
.qd-to{margin:26px 0;display:flex;flex-direction:column;gap:2px}
.qd-to small,.qd-block small{font-family:'Outfit',sans-serif;letter-spacing:.24em;font-size:10.5px;color:#7a736b;margin-bottom:4px}
.qd-to b{font-family:'Outfit',sans-serif;font-size:22px}
.qd-items{width:100%;border-collapse:collapse;font-size:14px}
.qd-items th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7a736b;padding:10px 0;border-bottom:1px solid #d9d4cc}
.qd-items td{padding:14px 0;border-bottom:1px solid #ebe7e0;vertical-align:top}
.qd-items .r{text-align:right;white-space:nowrap;padding-left:20px}
.qd-items tfoot td{border-bottom:0;padding:6px 0}
.qd-items tfoot .grand td{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;border-top:2px solid #111;padding-top:12px}
.qd-items tfoot .grand td:last-child{color:#D9481A}
.qd-deliv{margin:6px 0 0 18px;font-size:12.5px;color:#5a534b}
.qd-block{margin-top:22px;display:flex;flex-direction:column}
.qd-block p{font-size:13.5px}
.qd-f{margin-top:34px;padding-top:16px;border-top:1px solid #d9d4cc;font-size:12px;color:#7a736b}

/* ==========================================================================
   Project page
   ========================================================================== */
.timer-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;padding:24px 28px;border-radius:18px;margin-bottom:16px;background:var(--panel);border:1px solid var(--line-2)}
.timer-card::after{content:"";position:absolute;width:420px;height:420px;left:-160px;top:-240px;border-radius:50%;pointer-events:none;opacity:.5}
.timer-card.s-ok::after{background:radial-gradient(circle,rgba(95,211,154,.35),transparent 65%)}
.timer-card.s-warn::after{background:radial-gradient(circle,rgba(245,198,91,.35),transparent 65%)}
.timer-card.s-risk::after{background:radial-gradient(circle,rgba(255,169,77,.4),transparent 65%)}
.timer-card.s-urgent,.timer-card.s-over{border-color:rgba(255,112,99,.45)}
.timer-card.s-urgent::after,.timer-card.s-over::after{background:radial-gradient(circle,rgba(255,112,99,.45),transparent 65%)}
.tc-main{position:relative;z-index:1}
.tc-clock{font-family:'Outfit',sans-serif;font-size:clamp(40px,6vw,64px);font-weight:700;letter-spacing:.02em;line-height:1.05;font-variant-numeric:tabular-nums;margin:6px 0 10px}
.tc-clock.done{font-size:clamp(22px,3vw,30px);color:var(--muted)}
.s-ok .tc-clock{color:var(--green)} .s-warn .tc-clock{color:var(--yellow)} .s-risk .tc-clock{color:var(--amber)} .s-urgent .tc-clock,.s-over .tc-clock{color:var(--red)}
.tc-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-label{font-family:'Outfit',sans-serif;letter-spacing:.24em;text-transform:uppercase;font-size:12px}
.tc-msg{margin-top:10px;color:#ffc2bb;font-size:13px}
.tc-meta{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px;justify-self:stretch}
.tc-meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.tc-meta dd{font-size:14px}

.workflow{list-style:none;display:grid;grid-template-columns:repeat(9,minmax(96px,1fr));gap:0;overflow-x:auto;padding-bottom:4px}
.wf{position:relative;min-width:96px}
.wf::before{content:"";position:absolute;top:15px;left:50%;right:-50%;height:2px;background:var(--line-2)}
.wf:last-child::before{display:none}
.wf.past::before{background:var(--orange)}
.wf form{display:block}
.wf-btn{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0 4px;position:relative;cursor:default;color:var(--muted)}
button.wf-btn{cursor:pointer}
button.wf-btn:hover .wf-dot{border-color:var(--orange)}
button.wf-btn:hover b{color:var(--text)}
.wf-dot{width:30px;height:30px;border-radius:50%;background:var(--bg-2);border:2px solid var(--line-3);display:grid;place-items:center;position:relative;z-index:1;transition:border-color .15s}
.wf-dot .ic{width:14px;height:14px}
.wf b{font-size:11.5px;font-weight:600;line-height:1.25}
.wf small{font-size:10.5px;color:var(--dim)}
.wf.past .wf-dot{background:var(--orange);border-color:var(--orange);color:#000}
.wf.past b{color:var(--text)}
.wf.now .wf-dot{border-color:var(--orange);box-shadow:0 0 0 5px rgba(242,118,46,.18)}
.wf.now .wf-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange)}
.wf.now b{color:var(--orange)}
.wf-next{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

.file-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.file-cols .subhead{margin-top:0}
.files{display:flex;flex-direction:column;gap:6px}
.file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2)}
.file:hover{border-color:var(--line-3)}
.fi{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--orange-soft);color:var(--orange);font:700 10px 'Outfit',sans-serif;letter-spacing:.04em;flex:none}
.fn{flex:1;min-width:0}
.fn b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn small{color:var(--dim);font-size:11px}
.ver{display:inline-block;padding:0 6px;border-radius:5px;background:var(--orange);color:#000;font-weight:700;font-size:10px;letter-spacing:.04em}
.upl{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px;border-radius:10px;border:1px dashed var(--line-2)}
.upl select,.upl input{height:36px;font-size:13px}
.upl input[type=file]{height:auto}
.upl .btn{align-self:flex-end}
.file-picked{font-size:11.5px;color:var(--muted)}

.rev{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.rev:first-of-type{padding-top:0}
.rev-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rev-a{display:flex;gap:6px;flex-wrap:wrap}
.add-block{margin-top:14px}
.add-block > summary{list-style:none;display:inline-flex}
.add-block > summary::-webkit-details-marker{display:none}
.add-block[open] > summary{margin-bottom:12px}
.add-block .form .fgrid{grid-template-columns:repeat(2,1fr)}

.thread{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.msg{padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);max-width:92%}
.msg.mine{align-self:flex-end;background:#15100c;border-color:rgba(242,118,46,.22)}
.msg.clarify{border-color:rgba(255,169,77,.4)}
.msg-h{font-size:12.5px;margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.msg-b{font-size:13.5px;word-break:break-word}
.msg .files{margin-top:10px}

.pay-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.pay-sum div{padding:10px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.pay-sum small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pay-sum b{font-family:'Outfit',sans-serif;font-size:16px}
.pay-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.stage-times{list-style:none;display:flex;flex-direction:column}
.stage-times li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.stage-times li:last-child{border-bottom:0}
.stage-times b{font-variant-numeric:tabular-nums;white-space:nowrap}
.assign-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.assign-row:last-child{border-bottom:0}
.assign-row .lr-main{flex:1;min-width:180px}
.assign-row .inline-form select{min-width:220px}

/* ==========================================================================
   Targets & reports
   ========================================================================== */
.target-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.tcard-h{display:flex;justify-content:space-between;font-family:'Outfit',sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tcard-h b{color:var(--orange);font-size:20px;letter-spacing:0}
.tcard dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcard dt{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.tcard dd{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600}
.bars{position:relative;display:flex;align-items:flex-end;gap:3px;height:200px;padding-bottom:22px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.bar i{display:block;width:100%;max-width:26px;background:rgba(242,118,46,.45);border-radius:4px 4px 0 0;min-height:2px;transition:height .6s var(--ease)}
.bar i.hit{background:var(--grad)}
.bar span{position:absolute;bottom:-20px;font-size:10px;color:var(--dim)}
.bar.today span{color:var(--orange);font-weight:700}
.bar.future i{background:rgba(255,255,255,.05)}
.bars-target{position:absolute;left:0;right:0;border-top:1px dashed rgba(95,211,154,.6);pointer-events:none}
.bars-target span{position:absolute;right:0;top:-18px;font-size:10.5px;color:var(--green)}
.pipe-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pipe-row.total{border-bottom:0;font-family:'Outfit',sans-serif;font-size:16px}
.hbars{display:flex;flex-direction:column;gap:8px}
.hbar{display:grid;grid-template-columns:minmax(80px,160px) 1fr auto;gap:12px;align-items:center;font-size:12.5px}
.hb-l{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t{height:10px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.hb-t i{display:block;height:100%;background:var(--grad);border-radius:6px}
.hbar b{font-variant-numeric:tabular-nums;min-width:56px;text-align:right}

/* ==========================================================================
   Leave, tickets, wellbeing
   ========================================================================== */
.leave-card{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.lc-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.lc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.lc-dates{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px;flex-wrap:wrap}
.lc-dates .ic{color:var(--orange);width:16px;height:16px}
.lc-act{display:flex;flex-direction:column;gap:8px}
.cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend i{width:12px;height:12px;border-radius:3px}
.lg-sales{background:rgba(242,118,46,.5)} .lg-editor{background:rgba(124,180,255,.5)} .lg-other{background:rgba(185,155,255,.5)} .lg-hol{background:rgba(255,255,255,.08)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dn{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center;padding:4px 0}
.cal-d{min-height:112px;border-radius:10px;background:var(--panel);border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-d.empty{background:none;border:0}
.cal-d.off{background:rgba(255,255,255,.015)}
.cal-d.today{border-color:var(--orange)}
.cal-d.thin{border-color:rgba(255,112,99,.5)}
.cal-n{font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:4px}
.cal-d.off .cal-n{color:var(--dim)}
.thin-tag{font-family:'Inter';font-size:9.5px;font-weight:600;color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.cal-hol{font-size:11px;color:var(--yellow)}
.cal-p{font-size:11px;padding:2px 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent}
.cal-p.r-sales{background:rgba(242,118,46,.18);color:#ffc9a6}
.cal-p.r-editor{background:rgba(124,180,255,.16);color:#cfe2ff}
.cal-p.r-admin,.cal-p.r-manager{background:rgba(185,155,255,.16);color:#e3d8ff}
.cal-p.pending{background:none;border-style:dashed;border-color:currentColor}

.flow{list-style:none;display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.flow li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.flow li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--panel-3);font-size:11px;font-weight:700}
.flow li span .ic{width:12px;height:12px}
.flow li.past{color:var(--text)} .flow li.past span{background:var(--orange);color:#000}
.flow li.now{border-color:var(--orange);color:var(--orange)} .flow li.now span{background:var(--orange);color:#000}

.checkin h2{font-family:'Outfit',sans-serif;font-size:22px;margin-bottom:16px}
.checkin{display:flex;flex-direction:column;gap:14px}
.checkin .btn{align-self:flex-start}
.moods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mood{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:14px;border:1px solid var(--line-2);cursor:pointer;transition:all .15s;text-align:center;font-size:13px;color:var(--muted)}
.mood input{position:absolute;opacity:0;pointer-events:none}
.mood .ic{width:34px;height:34px}
.mood:hover{border-color:var(--line-3);color:var(--text)}
.mood:has(input:checked){color:var(--text);transform:translateY(-2px)}
.mood:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.m-good .ic{color:var(--green)} .m-okay .ic{color:var(--yellow)} .m-low .ic{color:var(--amber)} .m-support .ic{color:var(--red)}
.mood.m-good:has(input:checked){border-color:var(--green);background:rgba(95,211,154,.08)}
.mood.m-okay:has(input:checked){border-color:var(--yellow);background:rgba(245,198,91,.08)}
.mood.m-low:has(input:checked){border-color:var(--amber);background:rgba(255,169,77,.08)}
.mood.m-support:has(input:checked){border-color:var(--red);background:rgba(255,112,99,.08)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line-2);font-size:13px;color:var(--muted);transition:all .15s}
.seg input:checked + span{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.seg input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.mood-strip{display:flex;gap:6px;flex-wrap:wrap}
.ms{display:flex;flex-direction:column;align-items:center;gap:2px;width:38px;padding:6px 0;border-radius:9px;background:var(--bg-2);border:1px solid var(--line)}
.ms .ic{width:20px;height:20px}
.ms small{font-size:10px;color:var(--dim)}
.mood-agg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.ma{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);text-align:center}
.ma .ic{width:26px;height:26px}
.ma b{font-family:'Outfit',sans-serif;font-size:22px}
.ma span{font-size:12px;color:var(--muted)}
.ma .progress{width:100%;height:5px}

/* notifications */
.notif{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .12s}
.notif:last-child{border-bottom:0}
.notif:hover{background:rgba(255,255,255,.025)}
.notif.unread{background:rgba(242,118,46,.04)}
.notif.unread .n-body b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-left:8px;vertical-align:middle}
.n-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel-3);color:var(--muted);flex:none}
.n-ic .ic{width:16px;height:16px}
.n-sla_over .n-ic,.n-sla_2h .n-ic{background:rgba(255,112,99,.12);color:var(--red)}
.n-sla_4h .n-ic{background:rgba(255,169,77,.12);color:var(--amber)}
.n-payment .n-ic,.n-target .n-ic{background:rgba(95,211,154,.1);color:var(--green)}
.n-lead .n-ic,.n-project .n-ic{background:var(--orange-soft);color:var(--orange)}
.n-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.n-body b{font-size:13.5px;font-weight:600}
.n-body span{font-size:13px;color:var(--muted)}
.notif small{white-space:nowrap}

/* live toast for urgent alerts */
.toast{position:fixed;right:20px;bottom:20px;z-index:90;width:min(360px,calc(100vw - 32px));padding:14px 16px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-2);box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start;animation:rise .4s var(--ease)}
.toast.t-red{border-color:rgba(255,112,99,.5)}
.toast b{display:block;font-size:13.5px}
.toast p{font-size:12.5px;color:var(--muted)}
.toast .ic{color:var(--orange);margin-top:2px}
.toast.t-red .ic{color:var(--red)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* profile, settings, search */
.profile-card{display:flex;align-items:center;gap:18px}
.profile-card .av{font-size:28px}
.profile-card h2{font-family:'Outfit',sans-serif;font-size:24px}
.office-row{border-bottom:1px solid var(--line);padding:10px 0}
.office-row summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer}
.office-row summary::-webkit-details-marker{display:none}
.office-row summary .ic{width:15px;height:15px;color:var(--dim)}
.office-row[open] summary{margin-bottom:10px}
.office-row .inline{margin-top:8px}
.seg-days span{min-width:52px;justify-content:center}
.search-big{position:relative;padding:0}
.search-big .ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--dim)}
.search-big input{height:58px;border:0;background:none;padding-left:50px;font-size:17px}
.search-hit{justify-content:flex-start}
.search-hit > .ic{margin-left:auto;color:var(--dim)}
.sh-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel-3);color:var(--orange);flex:none}
.sh-ic .ic{width:16px;height:16px}

/* water reminder */
.water{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;width:min(520px,calc(100vw - 32px));display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#0b1418;border:1px solid rgba(95,208,224,.35);box-shadow:var(--shadow);animation:rise .5s var(--ease)}
.water-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(95,208,224,.12);color:var(--cyan);flex:none}
.water-ic .ic{width:22px;height:22px}
.water b{font-family:'Outfit',sans-serif;font-size:16px}
.water p{font-size:12.5px;color:var(--muted)}
.water > div:nth-child(2){flex:1;min-width:0}
.water-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* auth pages */
body.bare{min-height:100vh}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.auth::before{content:"";position:absolute;width:80vmax;height:80vmax;border-radius:50%;top:-40vmax;right:-30vmax;filter:blur(70px);background:radial-gradient(circle,rgba(242,118,46,.35),transparent 62%);pointer-events:none}
.auth-box{position:relative;width:100%;max-width:420px;background:rgba(17,17,17,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:22px;padding:34px;display:flex;flex-direction:column;gap:14px}
.auth-brand{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.auth-brand span{font-family:'Outfit',sans-serif;letter-spacing:.55em;font-size:11px;color:var(--muted)}
.auth-box h1{font-family:'Outfit',sans-serif;font-size:24px}
.auth-box .btn-primary{height:46px;font-size:14px;margin-top:4px}
.auth-foot{font-size:12px;color:var(--dim);text-align:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1280px){
  .detail{grid-template-columns:minmax(0,1fr) 300px}
  .form .fgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .grid-2,.detail{grid-template-columns:1fr}
  .hero-target{grid-template-columns:1fr}
  .ht-side{grid-template-columns:1fr 1fr}
  .revenue-card .rev-grid{grid-template-columns:repeat(2,1fr)}
  .stats-4{grid-template-columns:repeat(2,1fr)}
  .timer-card{grid-template-columns:1fr}
  .kv-3{grid-template-columns:auto 1fr auto 1fr}
  .leave-card{grid-template-columns:1fr}
}
@media (max-width:900px){
  .side{transform:translateX(-100%);box-shadow:var(--shadow)}
  body.side-open .side{transform:none}
  body.side-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}
  .main{margin-left:0}
  .top .menu-btn{display:inline-grid}
  .top{padding:0 16px}
  .content{padding:20px 16px 90px}
  .file-cols{grid-template-columns:1fr}
  .target-cards{grid-template-columns:1fr}

  /* tables collapse into cards */
  .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody,.tbl-cards tr,.tbl-cards td{display:block;width:100%}
  .tbl-cards tr{padding:12px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .tbl-cards tbody tr:last-child{border-bottom:0}
  .tbl-cards td{padding:0!important;border:0;text-align:left!important;font-size:13px;min-width:0}
  .tbl-cards td:first-child{grid-column:1 / -1;font-size:14px}
  .tbl-cards td[data-l]:not(:first-child)::before{content:attr(data-l);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
  .tbl-cards td.acts{grid-column:1 / -1;justify-content:flex-start;display:flex}
  .tbl-cards td[colspan]{grid-column:1 / -1}
  .tbl-cards tr.sla-over,.tbl-cards tr.sla-urgent{box-shadow:inset 3px 0 0 var(--red)}
  .tbl-cards tr.sla-risk{box-shadow:inset 3px 0 0 var(--amber)}
  .tbl tr td:first-child{box-shadow:none!important}
  .kanban{grid-auto-columns:minmax(250px,82vw)}
  .kmove{display:block}
  .kcard{cursor:default}
}
@media (max-width:640px){
  .stats-3,.stats-4{grid-template-columns:1fr 1fr}
  .stat-v{font-size:22px}
  .form .fgrid,.form.narrow .fgrid,.add-block .form .fgrid{grid-template-columns:1fr}
  .page-head h1{font-size:24px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .hide-sm{display:none!important}
  .ht-nums{gap:18px}
  .ht-side{grid-template-columns:1fr}
  .kv-2,.kv-3{grid-template-columns:auto 1fr}
  .quick .qa-btn{min-width:calc(50% - 5px)}
  .filters .search-in{max-width:none;flex-basis:100%}
  .filters select,.filters input[type=date],.filters input[type=month]{flex:1;min-width:calc(50% - 4px)}
  .extra-row{grid-template-columns:1fr 100px 36px}
  .moods,.mood-agg{grid-template-columns:1fr 1fr}
  .cal{gap:3px}
  .cal-d{min-height:70px;padding:4px}
  .cal-p{font-size:9.5px;padding:1px 3px}
  .cal-dn{font-size:9px;letter-spacing:.04em}
  .thin-tag{display:none}
  .quote-doc{padding:26px 20px}
  .qd-meta h2{text-align:left}
  .qd-meta dl{justify-content:start}
  .timer-card{padding:20px}
  .water{flex-wrap:wrap}
  .water-a{width:100%;justify-content:stretch}
  .water-a .btn{flex:1}
  .pay-sum{grid-template-columns:1fr 1fr 1fr}
  .top .gsearch input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ==========================================================================
   Print (quotations)
   ========================================================================== */
@media print{
  body{background:#fff}
  .side,.top,.page-head,.status-bar,.no-print,.flash,.water,.toast,.scrim{display:none!important}
  .main{margin:0}
  .content{padding:0;max-width:none}
  .quote-doc{box-shadow:none;border-radius:0;max-width:none;padding:0}
}