/* Layout: navy band with tabs → page views; phones get a bottom tab bar + floating add button */
:root{
  --bg:#f3f5fa; --surface:#ffffff; --surface-2:#eef1f7; --line:#e1e6ef; --ink:#172033; --muted:#667085;
  --band:#1d2f4f; --band-ink:#ffffff; --band-muted:#b7c3d9; --band-pill:rgba(255,255,255,.12);
  --brand:#1d2f4f; --brand-ink:#ffffff; --accent:#f3a33c; --accent-ink:#2a1a03;
  --loss:#dc4c3b; --loss-soft:#fdecea; --new:#2f6fd0; --new-soft:#e7effc; --ok:#178a69; --ok-soft:#e1f5ee;
  --warn-soft:#fff4df; --warn:#9a5b00;
  --av-bg:88%; --av-fg:28%; --shadow:0 1px 2px rgba(23,32,51,.06),0 4px 14px rgba(23,32,51,.05);
  --f-body:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --f-num:"Outfit","Hind Siliguri",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1320; --surface:#151d2c; --surface-2:#1c2638; --line:#28344a; --ink:#e7ecf4; --muted:#98a3b7;
  --band:#151d2c; --band-ink:#e7ecf4; --band-muted:#98a3b7; --band-pill:rgba(255,255,255,.08);
  --brand:#9db8e8; --brand-ink:#0d1320; --accent:#f3a33c; --accent-ink:#2a1a03;
  --loss:#ff7d6c; --loss-soft:#3a1f1d; --new:#80aaf2; --new-soft:#1a2944; --ok:#4fd0a6; --ok-soft:#11322a;
  --warn-soft:#3a2e14; --warn:#f3c26b;
  --av-bg:24%; --av-fg:84%; --shadow:none; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
svg.i{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.boot{min-height:60vh;display:grid;place-items:center}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(1turn)}}

/* top band */
.band{background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.band-in{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:18px 0;display:grid;gap:14px}
.brandrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;text-decoration:none}
.logo svg{width:24px;height:24px}
.brandrow h1{margin:0;font-size:1.35rem;font-weight:700;line-height:1.2}
.brandrow p{margin:0;color:var(--band-muted);font-size:.86rem}
.who-box{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.role{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--band-pill);color:var(--band-ink);text-decoration:none;border:0}
.role .dot{width:8px;height:8px;border-radius:50%;background:var(--band-muted)}
.role.r-owner .dot,.role.r-admin .dot{background:var(--ok)}
.role.r-pending .dot{background:var(--accent)}
.bandbtn{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.tabs{display:flex;gap:4px;overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:8px;color:var(--band-muted);padding:10px 14px;border-radius:10px 10px 0 0;font-weight:600;text-decoration:none;white-space:nowrap}
.tab:hover{color:var(--band-ink)}
.tab.on{background:var(--bg);color:var(--ink)}

main{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:22px 110px;display:grid;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 0;flex-wrap:wrap}
.card-h h2{margin:0;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
.card-b{padding:14px 16px 16px}
.link{color:var(--brand);font-weight:600;font-size:.88rem;padding:4px;text-decoration:none}
.muted{color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{padding:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.stat .ic{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.stat .ic svg{width:22px;height:22px}
.stat b{font-family:var(--f-num);font-size:1.75rem;font-weight:600;line-height:1}
.stat span{color:var(--muted);font-size:.84rem}
.t-brand .ic{background:var(--surface-2);color:var(--brand)}
.t-new .ic{background:var(--new-soft);color:var(--new)}
.t-loss .ic{background:var(--loss-soft);color:var(--loss)} .t-loss b{color:var(--loss)}
.t-ok .ic{background:var(--ok-soft);color:var(--ok)} .t-ok b{color:var(--ok)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:start}

/* avatars & bars */
.av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;background:hsl(var(--h) 65% var(--av-bg));color:hsl(var(--h) 55% var(--av-fg))}
.av.lg{width:64px;height:64px;font-size:1.6rem}
.av.sm{width:32px;height:32px;font-size:.85rem}
.bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .b-ok{background:var(--ok)} .bar .b-loss{background:var(--loss)}

.rank{list-style:none;margin:0;padding:8px 8px 10px}
.rank a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px;border-radius:10px;color:inherit;text-decoration:none}
.rank a:hover{background:var(--surface-2)}
.rank .nm{font-weight:600}
.rank .bar{grid-column:2/4}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;padding:2px 9px;border-radius:999px;font-family:var(--f-num);white-space:nowrap}
.p-loss{background:var(--loss-soft);color:var(--loss)} .p-new{background:var(--new-soft);color:var(--new)} .p-ok{background:var(--ok-soft);color:var(--ok)} .p-mut{background:var(--surface-2);color:var(--muted)}

/* activity list */
.acts{list-style:none;margin:0;padding:6px 0}
.act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;padding:10px 16px;align-items:start}
.act + .act{border-top:1px solid var(--line)}
.act .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-top:2px}
.act .ico.loss{background:var(--loss-soft);color:var(--loss)} .act .ico.new{background:var(--new-soft);color:var(--new)}
.act .top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.act .who{font-weight:700;color:inherit;text-decoration:none}
.act .who:hover{text-decoration:underline}
.act .note{overflow-wrap:anywhere}
.act .note.none{color:var(--muted);font-size:.88rem}
.act .meta{color:var(--muted);font-size:.8rem;display:flex;gap:10px;flex-wrap:wrap}
.act .meta span{display:inline-flex;align-items:center;gap:4px}
.iconbtn{border:0;background:none;color:var(--muted);padding:6px;border-radius:8px;display:grid;place-items:center}
.iconbtn:hover{background:var(--surface-2);color:var(--loss)}
.iconbtn.arm{background:var(--loss);color:#fff}
.day{padding:10px 16px 6px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line)}
.day:first-child{border-top:0}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{flex:1 1 220px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px;color:var(--muted)}
.search input{border:0;background:none;outline:0;padding:10px 0;width:100%;color:var(--ink)}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--brand);color:var(--brand-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:9px 14px;font-weight:600;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.05)}
.btn.sm{padding:5px 10px;font-size:.85rem;border-radius:9px}
.btn.dang{color:var(--loss)}
.btn.dang.arm{background:var(--loss);border-color:var(--loss);color:#fff}
.btn:disabled{opacity:.6;cursor:wait}

/* worker cards */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wc{padding:14px;display:grid;gap:12px;color:inherit;text-decoration:none}
.wc:hover{border-color:var(--brand)}
.wc .hd{display:flex;align-items:center;gap:12px;min-width:0}
.wc .nm{font-weight:700;overflow-wrap:anywhere;line-height:1.3}
.wc .sub{color:var(--muted);font-size:.8rem}
.wc .big{margin-left:auto;text-align:right}
.wc .big b{font-family:var(--f-num);font-size:1.5rem;font-weight:600;color:var(--ok);line-height:1}
.wc .big small{display:block;color:var(--muted);font-size:.72rem}
.wc .ft{display:flex;gap:6px;flex-wrap:wrap}
.wc.hid{opacity:.6}
.tag{font-size:.72rem;font-weight:600;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:0 8px}

/* detail */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;padding:4px 0;justify-self:start;text-decoration:none}
.hero{padding:18px;display:grid;gap:16px}
.hero .hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero h2{margin:0;font-size:1.4rem;line-height:1.2}
.hero .acts-row{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.nums div{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.nums b{display:block;font-family:var(--f-num);font-size:1.45rem;font-weight:600;line-height:1.1}
.nums span{font-size:.78rem;color:var(--muted)}
.nums .c-new b{color:var(--new)} .nums .c-loss b{color:var(--loss)} .nums .c-ok b{color:var(--ok)}

.empty{padding:30px 16px;text-align:center;color:var(--muted);display:grid;gap:6px;justify-items:center}
.empty svg{width:30px;height:30px;opacity:.6}
.notice{padding:16px;display:flex;gap:12px;align-items:flex-start}
.notice>svg{width:24px;height:24px;color:var(--accent);margin-top:2px}
.notice.warn{background:var(--warn-soft);border-color:transparent}
.notice b{display:block}

/* auth */
.auth{max-width:420px;width:100%;margin:12px auto 0;padding:24px;display:grid;gap:16px}
.auth h2{margin:0;font-size:1.35rem}
.auth form{display:grid;gap:14px}
.auth .alt{text-align:center;color:var(--muted);font-size:.9rem}
.err{background:var(--loss-soft);color:var(--loss);padding:9px 12px;border-radius:10px;font-weight:600;font-size:.9rem}
label.f{display:grid;gap:5px;font-size:.84rem;font-weight:600;color:var(--muted)}
.f input,.f select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-width:0}

/* admin */
.ulist{list-style:none;margin:0;padding:0}
.ulist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.ulist .nm{font-weight:700;overflow-wrap:anywhere}
.ulist .em{color:var(--muted);font-size:.84rem;overflow-wrap:anywhere}
.ulist .ctl{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.ulist select{padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.switch + .switch{border-top:1px solid var(--line)}
.switch b{display:block}
.tgl{position:relative;width:48px;height:28px;flex:none;border-radius:99px;border:0;background:var(--line);transition:background .15s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl[aria-checked="true"]{background:var(--ok)}
.tgl[aria-checked="true"]::after{transform:translateX(20px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}

/* fab + bottom nav */
.fab{position:fixed;right:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:14px 20px;background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:20}
.fab svg{width:20px;height:20px}
.bnav{display:none}

/* modal */
.ov{position:fixed;inset:0;background:rgba(10,15,25,.5);display:grid;place-items:center;padding:16px;z-index:50}
.sheet{width:100%;max-width:460px;max-height:calc(100% - 16px);overflow:auto;background:var(--surface);border-radius:18px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet-h h3{margin:0;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.sheet form{padding:16px 18px 18px;display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.step{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.step button{border:0;background:var(--surface-2);width:42px;font-size:1.2rem;font-weight:700;color:var(--ink)}
.step input{border:0;border-radius:0;text-align:center;font-family:var(--f-num);font-weight:600;font-size:1.1rem;width:100%;min-width:0;padding:10px 4px;background:var(--surface);color:var(--ink)}
.f.loss .step{border-color:var(--loss)} .f.loss{color:var(--loss)}
.f.new .step{border-color:var(--new)} .f.new{color:var(--new)}
.row-end{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-weight:600;font-size:.9rem;z-index:60;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px)}

@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.grid2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .tabs{display:none}
  .band-in{padding-block:14px}
  .brandrow p{display:none}
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:19}
  .bnav a{display:grid;justify-items:center;gap:2px;padding:9px 0 8px;font-size:.75rem;font-weight:600;color:var(--muted);text-decoration:none}
  .bnav a svg{width:22px;height:22px}
  .bnav a.on{color:var(--brand)}
  .fab{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:16px;padding:14px}
  .fab span{display:none}
  .stat{padding:12px;grid-template-columns:1fr}
  .stat .ic{grid-row:auto;width:36px;height:36px}
  .stat b{font-size:1.5rem}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .acts-row{margin-left:0;width:100%}
  .sheet{border-radius:18px 18px 0 0}
  .ov{padding:0;place-items:end stretch}
  .ulist li{grid-template-columns:auto minmax(0,1fr)}
  .ulist .ctl{grid-column:1/-1;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.addu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
@media (max-width:600px){.addu{grid-template-columns:minmax(0,1fr)}}