:root{
  --blue:#294dff; --blue-deep:#021fa9; --blue-tint:#ccd5ff; --blue-wash:#ebf1ff; --blue-pale:#f8fbff;
  --navy:#253053; --grey:#636b83; --grey2:#52527a; --line:#c6c6dd; --line2:#e4e6ea; --ph:#9e9ebf;
  --teal:#08ba98; --green:#0cdfa3; --green-bg:#cffcf0;
  --info:#1f97ff; --info-bg:#e9f5ff;
  --amber:#ffca5a; --amber-bg:#ffedb8; --amber-ink:#8a5a09;
  --red:#ff3737; --red-bg:#ffb8b8; --red-ink:#a31212;
  --page:#f8fbff; --card:#ffffff; --ink:var(--navy);
  --f:"Poppins",system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(37,48,83,.06),0 6px 20px -12px rgba(37,48,83,.28);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#e8ebf5; --grey:#9aa1b8; --grey2:#aab0c6; --line:#2e3654; --line2:#252c45; --ph:#6f7694;
  --blue-wash:#1a2142; --blue-pale:#141a33; --blue-tint:#2a3564;
  --page:#0f1428; --card:#171d36; --ink:var(--navy);
  --green-bg:#0f3329; --info-bg:#12263d; --amber-bg:#3a2d12; --amber-ink:#ffca5a;
  --red-bg:#3d1a1a; --red-ink:#ff8080;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 26px -14px rgba(0,0,0,.85);
}}
:root[data-theme="dark"]{
  --navy:#e8ebf5; --grey:#9aa1b8; --grey2:#aab0c6; --line:#2e3654; --line2:#252c45; --ph:#6f7694;
  --blue-wash:#1a2142; --blue-pale:#141a33; --blue-tint:#2a3564;
  --page:#0f1428; --card:#171d36; --ink:var(--navy);
  --green-bg:#0f3329; --info-bg:#12263d; --amber-bg:#3a2d12; --amber-ink:#ffca5a;
  --red-bg:#3d1a1a; --red-ink:#ff8080;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 26px -14px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.5}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit}
[hidden]{display:none!important}

/* ── shell ─────────────────────────────── */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.side{background:var(--card);border-right:1px solid var(--line2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;padding-top:env(safe-area-inset-top,0px)}
.logo{display:flex;align-items:center;gap:.55rem;padding:1.05rem 1.15rem;font-weight:700;font-size:1.02rem}
.logo i{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#4698f1,#4d46f1);display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:700}
.nav{flex:1;overflow-y:auto;padding:.25rem .6rem 1rem}
.nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:8px;color:var(--grey);
  text-decoration:none;font-weight:500;font-size:.875rem;cursor:pointer}
.nav a:hover{background:var(--blue-wash);color:var(--navy)}
.nav a.on{background:var(--blue);color:#fff}
.nav a svg{flex:0 0 17px}
.nav .grp{font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ph);padding:1rem .65rem .35rem}
.me{border-top:1px solid var(--line2);padding:.8rem 1.15rem;display:flex;align-items:center;gap:.6rem;
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px))}
.av{width:30px;height:30px;border-radius:50%;background:var(--blue-tint);color:var(--blue-deep);
  display:grid;place-items:center;font-weight:600;font-size:.76rem;flex:0 0 30px}
.me b{font-size:.83rem;font-weight:600;display:block;line-height:1.25}
.me span{font-size:.72rem;color:var(--grey)}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line2);
  display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;padding-top:calc(.6rem + env(safe-area-inset-top,0px));flex-wrap:wrap}

/* ── web timer widget ──────────────────── */
.timer{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:10px;
  padding:.4rem .5rem .4rem .7rem;background:var(--card);cursor:pointer;min-width:250px}
.timer.run{background:var(--blue);border-color:var(--blue);color:#fff}
.timer .t-el{font-weight:600;font-variant-numeric:tabular-nums;font-size:1.02rem;letter-spacing:-.01em}
.timer .t-meta{font-size:.7rem;opacity:.78;line-height:1.3}
.timer .t-meta b{font-weight:600}
.play{margin-left:auto;width:32px;height:32px;border-radius:50%;border:0;background:var(--blue);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:0 0 32px}
.timer.run .play{background:#fff;color:var(--blue)}
.tpanel{position:absolute;top:100%;left:1.25rem;margin-top:.4rem;width:min(330px,calc(100vw - 2.5rem));
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.9rem;z-index:40}
.tpanel label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ph);display:block;margin:.6rem 0 .25rem}
.tpanel select,.tpanel input{width:100%;padding:.5rem .55rem;border:1px solid var(--line);border-radius:8px;
  background:var(--page);color:var(--ink);font-family:inherit;font-size:.86rem}
.lim{margin-top:.75rem;font-size:.74rem;color:var(--grey)}
.limbar{height:5px;border-radius:3px;background:var(--line2);overflow:hidden;margin-top:.3rem}
.limbar i{display:block;height:100%;background:var(--blue)}

.spacer{margin-left:auto}
.chip{font-size:.72rem;font-weight:600;padding:.3rem .55rem;border-radius:6px;background:var(--amber-bg);color:var(--amber-ink)}
.tabs{display:flex;gap:.2rem;background:var(--blue-wash);padding:.2rem;border-radius:8px}
.tabs button{border:0;background:none;color:var(--grey);font-weight:600;font-size:.8rem;padding:.35rem .75rem;border-radius:6px;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--card);color:var(--blue);box-shadow:0 1px 2px rgba(37,48,83,.1)}

.body{padding:1.4rem 1.25rem 4rem;flex:1}
.head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.head h1{font-size:1.32rem}
.head p{margin:.2rem 0 0;color:var(--grey);font-size:.86rem}

/* ── cards / tiles ─────────────────────── */
.grid{display:grid;gap:.85rem}
.kpis{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.tile{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:.95rem 1rem}
.tile span{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ph);display:block}
.tile b{font-size:1.65rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block;margin-top:.3rem}
.delta{font-size:.74rem;font-weight:600}
.delta.up{color:var(--teal)} .delta.dn{color:var(--red-ink)}
.card{background:var(--card);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.card>h3{font-size:.92rem;padding:.85rem 1rem;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:.5rem}
.card>h3 .spacer{font-size:.75rem;font-weight:500;color:var(--grey)}
.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}

/* ── tables ────────────────────────────── */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px}
th{font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ph);
  text-align:left;padding:.6rem 1rem;border-bottom:1px solid var(--line2);white-space:nowrap;background:var(--blue-pale)}
td{padding:.65rem 1rem;border-bottom:1px solid var(--line2);font-size:.86rem;vertical-align:middle}
tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
.who{display:flex;align-items:center;gap:.55rem;font-weight:500;white-space:nowrap}
.who em{font-style:normal;font-size:.74rem;color:var(--grey);display:block;font-weight:400}

.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.25rem .5rem;border-radius:5px;white-space:nowrap}
.b-green{background:var(--green-bg);color:var(--teal)}
.b-blue{background:var(--info-bg);color:var(--info)}
.b-amber{background:var(--amber-bg);color:var(--amber-ink)}
.b-red{background:var(--red-bg);color:var(--red-ink)}
.b-grey{background:var(--blue-wash);color:var(--grey)}
.live{width:6px;height:6px;border-radius:50%;background:var(--green);animation:p 1.6s infinite}
@keyframes p{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.live{animation:none}}

/* activity bar */
.abar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden;min-width:56px}
.abar i{display:block;height:100%}
.a-hi{background:var(--green)} .a-mid{background:var(--amber)} .a-lo{background:var(--red)}
.apct{font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:2.6rem;display:inline-block}

/* activity grid (screenshot-grid analogue) */
.hourrow{border-bottom:1px solid var(--line2);padding:.75rem 1rem}
.hourrow:last-child{border-bottom:0}
.hourrow>b{font-size:.78rem;font-weight:600;color:var(--grey);display:block;margin-bottom:.55rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.55rem}
.slot{border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--blue-pale)}
.slot .face{height:64px;display:grid;place-content:center;gap:.15rem;text-align:center;padding:.4rem;border-bottom:1px solid var(--line2)}
.slot .face b{font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.slot .face em{font-style:normal;font-size:.66rem;color:var(--grey)}
.slot .face.none{color:var(--ph);font-size:.68rem;line-height:1.35}
.slot .foot{padding:.4rem .5rem}
.slot .foot small{display:block;font-size:.66rem;color:var(--grey);margin-bottom:.3rem;font-variant-numeric:tabular-nums}
.slot .foot .row{display:flex;align-items:center;gap:.4rem}

/* weekly grid */
.wk{min-width:640px}
.wk td.cell{text-align:center;font-variant-numeric:tabular-nums}
.wk td.cell.zero{color:var(--ph)}
.wk tfoot td{font-weight:600;background:var(--blue-pale)}

/* forms/buttons */
.btn{border:0;border-radius:8px;padding:.5rem .85rem;font-weight:600;font-size:.82rem;cursor:pointer;background:var(--blue);color:#fff}
.btn:hover{background:var(--blue-deep)}
.btn.ghost{background:var(--blue-wash);color:var(--blue)}
.btn.quiet{background:none;color:var(--grey);padding:.35rem .5rem}
.btn.sm{padding:.35rem .6rem;font-size:.76rem}
.btn:focus-visible,.nav a:focus-visible,.tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.row{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.9rem}
.filters select,.filters input{padding:.42rem .55rem;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:.82rem}

.note{color:var(--grey);font-size:.82rem;max-width:66ch;margin-top:.9rem}
.banner{display:flex;gap:.7rem;padding:.8rem 1rem;border-radius:10px;font-size:.85rem;margin-bottom:1rem;align-items:flex-start}
.banner.warn{background:var(--amber-bg);color:var(--amber-ink)}
.banner.info{background:var(--info-bg);color:var(--info)}
.banner b{font-weight:600}

/* bar chart */
.chart{display:flex;align-items:flex-end;gap:.5rem;height:124px;padding:1rem}
.chart div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.35rem;height:100%}
.chart i{display:block;width:100%;background:var(--blue);border-radius:5px 5px 0 0;min-height:2px}
.chart span{font-size:.68rem;color:var(--grey)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(37,48,83,.45);display:grid;place-items:center;z-index:60;padding:1rem}
.modal{background:var(--card);border-radius:14px;box-shadow:var(--shadow);width:min(420px,100%);padding:1.25rem;max-height:90vh;overflow:auto}
.modal h3{font-size:1.02rem;margin-bottom:.2rem}
.modal p{color:var(--grey);font-size:.82rem;margin:.2rem 0 .9rem}
.modal label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ph);display:block;margin:.65rem 0 .25rem}
.modal input,.modal select,.modal textarea{width:100%;padding:.5rem .55rem;border:1px solid var(--line);
  border-radius:8px;background:var(--page);color:var(--ink);font-family:inherit;font-size:.86rem}
.modal .row{margin-top:1.1rem;justify-content:flex-end}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:2rem 1rem;background:var(--page)}
.loginbox{width:min(370px,100%);background:var(--card);border:1px solid var(--line2);border-radius:16px;
  box-shadow:var(--shadow);padding:1.8rem}
.loginbox .logo{padding:0 0 1.2rem}
.loginbox label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ph);display:block;margin:.8rem 0 .3rem}
.loginbox input{width:100%;padding:.65rem .7rem;border:1px solid var(--line);border-radius:9px;background:var(--page);color:var(--ink);font-family:inherit;font-size:.9rem}
.loginbox .btn{width:100%;margin-top:1.2rem;padding:.72rem}
.pick{margin-top:1.3rem;border-top:1px solid var(--line2);padding-top:1rem}
.pick span{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ph)}
.pick button{display:flex;width:100%;gap:.6rem;align-items:center;text-align:left;margin-top:.5rem;
  background:var(--blue-pale);border:1px solid var(--line2);border-radius:9px;padding:.55rem .6rem;cursor:pointer;color:var(--ink)}
.pick button:hover{border-color:var(--blue)}
.pick b{font-size:.84rem;display:block}
.pick em{font-style:normal;font-size:.72rem;color:var(--grey)}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:232px;transform:translateX(-100%);transition:transform .18s;z-index:50}
  .side.open{transform:none;box-shadow:var(--shadow)}
  .burger{display:grid!important}
  .timer{min-width:0;flex:1}
  .timer .t-meta{display:none}
}
.burger{display:none;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}