/* ---------- Theme tokens (light is the default, dark follows the device or the toggle) ---------- */
:root{
  --bg:#f3f1ff; --bg2:#ffe9f1; --card:#ffffff; --card2:#f8f7ff; --ink:#1d1b3a; --muted:#6a6788; --line:#e4e1f5;
  --brand:#5b4bff; --brand2:#8a3ffc; --brand3:#ff4f9a; --on-brand:#fff;
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; --info:#3b82f6;
  --ok-bg:#d9f7ea; --ok-ink:#065f46; --warn-bg:#fff0c9; --warn-ink:#8a4b05; --bad-bg:#ffe0e0; --bad-ink:#9b1c1c;
  --info-bg:#dfeaff; --info-ink:#1e3a8a; --gray-bg:#ebe9f7; --gray-ink:#4a4768;
  --field:#fff; --th:#f4f2ff; --hover:#f6f4ff; --shadow:0 6px 22px rgba(91,75,255,.10); --dot:rgba(91,75,255,.10);
  --nav1:#4a3bf0; --nav2:#7b3ff2; --nav3:#e8438f;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0f1024; --bg2:#1d1030; --card:#1a1b36; --card2:#202244; --ink:#ecebff; --muted:#a09fc4; --line:#2e3060;
    --brand:#8b7dff; --brand2:#b57cff; --brand3:#ff7ab8; --on-brand:#12102b;
    --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
    --ok-bg:#0f3a2e; --ok-ink:#7ff0c3; --warn-bg:#44320a; --warn-ink:#ffd36b; --bad-bg:#4a1a22; --bad-ink:#ffadad;
    --info-bg:#172b57; --info-ink:#a9c8ff; --gray-bg:#2a2c52; --gray-ink:#c4c3e6;
    --field:#14152e; --th:#202244; --hover:#22244a; --shadow:0 6px 24px rgba(0,0,0,.35); --dot:rgba(139,125,255,.13);
    --nav1:#23245a; --nav2:#3a2a7a; --nav3:#7a2c66;
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --bg:#0f1024; --bg2:#1d1030; --card:#1a1b36; --card2:#202244; --ink:#ecebff; --muted:#a09fc4; --line:#2e3060;
  --brand:#8b7dff; --brand2:#b57cff; --brand3:#ff7ab8; --on-brand:#12102b;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
  --ok-bg:#0f3a2e; --ok-ink:#7ff0c3; --warn-bg:#44320a; --warn-ink:#ffd36b; --bad-bg:#4a1a22; --bad-ink:#ffadad;
  --info-bg:#172b57; --info-ink:#a9c8ff; --gray-bg:#2a2c52; --gray-ink:#c4c3e6;
  --field:#14152e; --th:#202244; --hover:#22244a; --shadow:0 6px 24px rgba(0,0,0,.35); --dot:rgba(139,125,255,.13);
  --nav1:#23245a; --nav2:#3a2a7a; --nav3:#7a2c66;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:var(--ink);min-height:100vh;
  background:
    radial-gradient(circle at 1px 1px,var(--dot) 1.2px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(900px 420px at 100% -5%,var(--bg2),transparent 70%),
    var(--bg);
  background-attachment:fixed}
a{color:var(--brand);font-weight:500}
:focus-visible{outline:3px solid var(--brand3);outline-offset:2px;border-radius:6px}

/* ---------- Top bar ---------- */
nav.top{background:linear-gradient(100deg,var(--nav1),var(--nav2) 55%,var(--nav3));color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:8px 12px;position:sticky;top:0;z-index:20;box-shadow:0 4px 18px rgba(60,30,160,.28)}
nav.top a{color:rgba(255,255,255,.85);text-decoration:none;padding:7px 12px;border-radius:99px;font-size:14px;font-weight:500;transition:background .15s}
nav.top a:hover{background:rgba(255,255,255,.16);color:#fff}
nav.top a.active{background:#fff;color:#4a3bf0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
nav.top .brand{font-weight:800;font-size:17px;margin-right:10px;padding:0 6px;letter-spacing:.01em;display:flex;align-items:center;gap:8px}
nav.top .brand::before{content:"";width:22px;height:22px;border-radius:7px;background:conic-gradient(from 200deg,#ffd166,#ff4f9a,#8a3ffc,#27c6ff,#ffd166);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
nav.top .sp{flex:1}
nav.top .who{font-size:13px;color:rgba(255,255,255,.8);padding:0 8px}
#themeBtn{background:rgba(255,255,255,.18);border:0;color:#fff;width:34px;height:34px;padding:0;border-radius:50%;font-size:17px;line-height:1;margin-left:2px;display:inline-flex;align-items:center;justify-content:center}
#themeBtn:hover{background:rgba(255,255,255,.3)}

.wrap{max-width:1100px;margin:0 auto;padding:20px 14px 70px}
h1{font-size:25px;margin:6px 0 16px;font-weight:800;letter-spacing:-.01em}
h1 small{font-weight:500}
h2{font-size:17px;margin:0 0 10px;font-weight:700}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3))}
.card>h2:first-child,.card>.clock{margin-top:4px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Each stat tile gets its own colour; the cycle repeats so any row looks lively */
.stat{--c:91 75 255;background:linear-gradient(150deg,rgb(var(--c)/.16),rgb(var(--c)/.04) 70%),var(--card);border:1px solid rgb(var(--c)/.28);border-radius:16px;padding:14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:rgb(var(--c)/.18)}
.grid>.stat:nth-child(6n+2){--c:236 72 153}
.grid>.stat:nth-child(6n+3){--c:16 185 129}
.grid>.stat:nth-child(6n+4){--c:245 158 11}
.grid>.stat:nth-child(6n+5){--c:14 165 233}
.grid>.stat:nth-child(6n+6){--c:139 92 246}
.stat b{display:block;font-size:27px;line-height:1.2;font-weight:800;position:relative;z-index:1}
.stat span{color:var(--muted);font-size:13px;position:relative;z-index:1}
.stat small{display:block;margin-top:3px;line-height:1.35;position:relative;z-index:1}
.stat.ok,.grid>.stat.ok{--c:16 185 129}
.stat.warn,.grid>.stat.warn{--c:245 158 11}
a.stat:hover{transform:translateY(-2px)}
.grid.hours{margin-bottom:14px}

.muted{color:var(--muted)}
small{font-size:12px}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 3px;font-weight:500}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:var(--field);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgb(139 125 255/.25)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
textarea{min-height:70px}
input[type=checkbox]{width:auto;accent-color:var(--brand)}
.row2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- Buttons ---------- */
button,.btn{display:inline-block;background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;border:0;border-radius:12px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;box-shadow:0 4px 12px rgb(91 75 255/.28);transition:transform .12s,box-shadow .12s,filter .12s}
:root[data-theme=dark] button,:root[data-theme=dark] .btn{color:#12102b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) button,:root:not([data-theme=light]) .btn{color:#12102b}}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
button:active{transform:none}
button:disabled{opacity:.5;cursor:wait;transform:none}
.btn-ok{background:linear-gradient(120deg,#10b981,#06b6d4);box-shadow:0 4px 12px rgb(16 185 129/.3)}
.btn-bad{background:linear-gradient(120deg,#ef4444,#ec4899);box-shadow:0 4px 12px rgb(239 68 68/.3)}
.btn-gray{background:var(--gray-bg);color:var(--gray-ink);box-shadow:none}
:root[data-theme=dark] .btn-gray{color:var(--gray-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn-gray{color:var(--gray-ink)}}
.btn-sm{padding:5px 12px;font-size:13px;border-radius:10px}
#themeBtn,#themeBtn:hover{transform:none;filter:none;box-shadow:none}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card);margin-bottom:16px;box-shadow:var(--shadow)}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--th);font-size:12px;letter-spacing:.03em;color:var(--brand);white-space:nowrap;font-weight:700}
tbody tr:hover td,table tr:hover td{background:var(--hover)}
tr:last-child td{border-bottom:0}

/* ---------- Messages and badges ---------- */
.flash{padding:11px 15px;border-radius:14px;margin-bottom:14px;border:1px solid transparent;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok)}
.flash.err{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad)}
.flash.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok-ink)}.b-warn{background:var(--warn-bg);color:var(--warn-ink)}.b-bad{background:var(--bad-bg);color:var(--bad-ink)}
.b-info{background:var(--info-bg);color:var(--info-ink)}.b-gray{background:var(--gray-bg);color:var(--gray-ink)}
form.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
form.inline input,form.inline select{width:auto;padding:6px 9px}

/* ---------- Login ---------- */
.login{max-width:380px;margin:9vh auto 40px;padding:0 14px}
.login h1{text-align:center;font-size:30px;margin-bottom:18px;background:linear-gradient(100deg,var(--brand),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}
.login .card{padding:22px}
.theme-corner{position:fixed;right:14px;top:14px}
.theme-corner #themeBtn{background:var(--card);color:var(--brand);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---------- Camera and punches ---------- */
.cam{position:relative;background:#000;border-radius:18px;overflow:hidden;max-width:420px;margin:0 auto;border:3px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(120deg,var(--brand),var(--brand3)) border-box}
.cam video{width:100%;display:block;transform:scaleX(-1)}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.actions button{flex:1;min-width:150px;padding:14px;font-size:16px}
.punch{display:flex;gap:8px;align-items:flex-start;padding:6px;border:1px solid var(--line);border-radius:12px;margin:3px 0;background:var(--card2)}
.punch.rej{opacity:.5;text-decoration:line-through}
.punch img{width:54px;height:54px;object-fit:cover;border-radius:9px}
.clock{font-size:32px;font-weight:800;letter-spacing:-.01em;background:linear-gradient(100deg,var(--brand),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* ---------- Hours progress bar ---------- */
.bar{position:relative;height:16px;background:var(--gray-bg);border-radius:99px;overflow:visible;margin:6px 0 10px}
.bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#10b981,#06b6d4)}
.bar .fill.warn{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.bar .mark{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;background:var(--ink);border-radius:2px}

code,pre{background:var(--card2);border-radius:6px;padding:1px 5px}


/* ---------- Performance dashboard ---------- */
.perf-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 12px}
.perf-head h2{margin:0;font-size:20px}
.seg{display:inline-flex;background:var(--gray-bg);border-radius:99px;padding:3px}
.seg a{padding:6px 14px;border-radius:99px;text-decoration:none;color:var(--gray-ink);font-size:13px;font-weight:600}
.seg a.on{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 2px 8px rgb(91 75 255/.3)}
:root[data-theme=dark] .seg a.on{color:#12102b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .seg a.on{color:#12102b}}
.hl-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:16px}
.hl{--c:91 75 255;position:relative;overflow:hidden;border-radius:20px;padding:16px;color:var(--ink);border:1px solid rgb(var(--c)/.35);background:linear-gradient(145deg,rgb(var(--c)/.22),rgb(var(--c)/.05) 65%),var(--card);box-shadow:var(--shadow)}
.hl::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:rgb(var(--c)/.16)}
.hl-gold{--c:245 158 11}.hl-red{--c:239 68 68}.hl-blue{--c:59 130 246}.hl-green{--c:16 185 129}.hl-violet{--c:139 92 246}.hl-teal{--c:20 184 166}
.hl-ico{position:absolute;right:14px;top:10px;font-size:26px;z-index:1}
.hl-t{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px;position:relative;z-index:1}
.hl-who{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.hl-who b{font-size:16px}
.hl-big{font-size:34px;font-weight:800;line-height:1.15;margin-top:8px;position:relative;z-index:1}
.hl-big small{font-size:15px;color:var(--muted);font-weight:600}
.hl-s{font-size:12.5px;color:var(--muted);position:relative;z-index:1}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:none;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 80% 55%),hsl(calc(var(--h) + 40) 85% 45%))}
.chart-grid{display:grid;gap:14px;grid-template-columns:2fr 1fr;margin-bottom:6px}
.chart-card.wide{grid-column:1/-1}
@media (max-width:760px){.chart-grid{grid-template-columns:1fr}}
.chart{width:100%;height:auto;display:block}
.chart .ct{fill:var(--muted);font:12px system-ui,sans-serif}
.chart .cv{fill:var(--ink);font-weight:700}
.chart .track{fill:var(--gray-bg)}
.chart .track-ring{stroke:var(--gray-bg)}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .dbig{fill:var(--ink);font:800 34px system-ui,sans-serif}
.donut-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.donut{max-width:190px}
.legend{list-style:none;margin:0;padding:0;font-size:14px}
.legend li{display:flex;align-items:center;gap:8px;margin:5px 0}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.legend b{margin-left:auto;padding-left:14px}
td.who{white-space:nowrap}
td.who .avatar{vertical-align:middle;margin-right:6px}
td.who span:not(.avatar){display:inline-block;vertical-align:middle;line-height:1.25}
.scorebar{height:7px;width:110px;background:var(--gray-bg);border-radius:99px;overflow:hidden;margin-bottom:4px}
.scorebar span{display:block;height:100%;border-radius:99px}
details summary{cursor:pointer;font-weight:600}

/* ---------- Demo mode ---------- */
.demo-banner{background:linear-gradient(100deg,rgb(245 158 11/.22),rgb(236 72 153/.18));border:1px solid rgb(245 158 11/.5);color:var(--ink);border-radius:14px;padding:9px 14px;margin-bottom:14px;font-size:14px}
fieldset.demo-lock{border:0;padding:0;margin:0;min-width:0;opacity:.8}
fieldset.demo-lock input,fieldset.demo-lock select,fieldset.demo-lock textarea{cursor:not-allowed}
fieldset.demo-lock button{opacity:.45;cursor:not-allowed;transform:none}
.demo-box{margin-top:6px}
.demo-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;border-radius:14px;background:var(--card2);color:var(--ink);border:2px solid var(--line);box-shadow:none;font-weight:400}
:root[data-theme=dark] .demo-pick{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .demo-pick{color:var(--ink)}}
.demo-pick b{font-size:16px}
.demo-pick small{color:var(--muted);line-height:1.3}
.demo-pick:first-child{border-color:rgb(91 75 255/.45)}
.demo-pick:nth-child(2){border-color:rgb(16 185 129/.5)}
.demo-pick.on{background:linear-gradient(135deg,rgb(91 75 255/.18),rgb(236 72 153/.14));border-color:var(--brand)}
.demo-creds{margin-top:10px;font-size:13px}
@media (max-width:520px){h1{font-size:22px}.stat b{font-size:24px}nav.top a{padding:6px 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{nav.top,.noprint,.theme-corner{display:none}body{background:#fff;color:#000}.card,.stat{box-shadow:none;border:1px solid #ccc}.card::before,.stat::after{display:none}table,.tbl{background:#fff}}

.pill-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.card h3{margin:18px 0 8px;font-size:16px}
html{scroll-behavior:smooth}