/* Peta Kerja Fauzan v3 — archery-target meter + "Hari ini" on top, weekly load chart, four colour-coded lanes. */
:root{
  --bg:#F5F3FC; --surface:#FFFFFF; --ink:#1C1830; --muted:#6B6585; --line:#E4E0F2; --soft:#F0EDF8;
  --wk1:#FF5E5B; --wk2:#FF9F43;   /* Minggu ini */
  --lt1:#7C5CFF; --lt2:#C06BFF;   /* Nanti */
  --rt1:#1C7ED6; --rt2:#4DD4F5;   /* Rutin */
  --dn1:#12B886; --dn2:#63E6BE;   /* Selesai */
  --wk-tint:#FFEDE8; --lt-tint:#EFEAFF; --rt-tint:#E3F2FD; --dn-tint:#E4F8F0;
  --ok:#12B886; --warn:#E8890C; --bad:#E03131; --warn-bg:#FFF3D6; --bad-bg:#FFE3E3;
  --t-white:#FFFFFF; --t-black:#2A2A35; --t-blue:#3BA7F5; --t-red:#F2465B; --t-gold:#FFC93C;
  --blob1:#C9B8FF; --blob2:#FFC2B3; --blob3:#A8EEDB;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(28,24,48,.06),0 8px 24px rgba(60,40,140,.08);
  --shadow-up:0 2px 4px rgba(28,24,48,.08),0 16px 36px rgba(60,40,140,.16);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#12101C; --surface:#1D1A2B; --ink:#ECE9F8; --muted:#A39DBD; --line:#2F2A45; --soft:#262238;
  --wk-tint:#2C1A1C; --lt-tint:#211A3A; --rt-tint:#15243A; --dn-tint:#13271F;
  --warn:#F5A524; --bad:#FF6B6B; --warn-bg:#3A2C10; --bad-bg:#3D1818;
  --t-white:#E9E6F5; --blob1:#3A2A7A; --blob2:#5A2A2A; --blob3:#1A4A3E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-up:0 2px 4px rgba(0,0,0,.5),0 16px 36px rgba(0,0,0,.5);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12101C; --surface:#1D1A2B; --ink:#ECE9F8; --muted:#A39DBD; --line:#2F2A45; --soft:#262238;
  --wk-tint:#2C1A1C; --lt-tint:#211A3A; --rt-tint:#15243A; --dn-tint:#13271F;
  --warn:#F5A524; --bad:#FF6B6B; --warn-bg:#3A2C10; --bad-bg:#3D1818;
  --t-white:#E9E6F5; --blob1:#3A2A7A; --blob2:#5A2A2A; --blob3:#1A4A3E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-up:0 2px 4px rgba(0,0,0,.5),0 16px 36px rgba(0,0,0,.5);
  color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.4;min-height:100vh;overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button:focus-visible,.card:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lt1);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);margin:0}
.muted{color:var(--muted)} .small{font-size:.8rem}

.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs span{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 22s ease-in-out infinite alternate}
.blobs span:nth-child(1){background:var(--blob1);top:-18vmax;left:-12vmax}
.blobs span:nth-child(2){background:var(--blob2);top:10vmax;right:-20vmax;animation-duration:28s}
.blobs span:nth-child(3){background:var(--blob3);bottom:-22vmax;left:20vmax;animation-duration:32s}
@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.12)}}

.wrap{max-width:1240px;margin:0 auto;padding-inline:16px;padding-block:16px 48px;display:grid;gap:16px}

/* Top bar */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
h1{font-size:clamp(1.3rem,3.6vw,1.9rem);font-weight:800;letter-spacing:-.02em}
.grad{background:linear-gradient(90deg,var(--wk1),var(--lt1) 55%,var(--dn1));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sync{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--muted);background:var(--surface);padding:6px 11px;border-radius:999px;box-shadow:var(--shadow)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.sync[data-s="ok"] i{background:var(--ok);animation:pulse 2.4s ease-out infinite}
.sync[data-s="saving"] i{background:var(--warn)}
.sync[data-s="err"]{color:var(--bad)} .sync[data-s="err"] i{background:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.pill{border:none;cursor:pointer;background:var(--surface);box-shadow:var(--shadow);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:600}
.pill.icon{width:32px;height:32px;padding:0;font-size:1rem}
.pill.on{background:linear-gradient(90deg,var(--lt1),var(--lt2));color:#fff}
.pill.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* Hero: meter + Hari ini */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.meter,.today,.chart-card{background:var(--surface);border-radius:22px;padding:18px;box-shadow:var(--shadow);min-width:0}
.meter{display:flex;align-items:center;gap:22px}
.target{position:relative;width:150px;flex:none;aspect-ratio:1}
.target>svg{width:100%;height:100%;display:block}
.track{stroke:var(--line)}
#ring{transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1),stroke .4s}
.f-white{fill:var(--t-white);stroke:var(--line);stroke-width:1}
.f-black{fill:var(--t-black)} .f-blue{fill:var(--t-blue)} .f-red{fill:var(--t-red)} .f-gold{fill:var(--t-gold)}
.f-x{fill:none;stroke:rgba(0,0,0,.25);stroke-width:1}
.arrow{position:absolute;left:50%;top:50%;width:0;height:0;transition:transform .9s cubic-bezier(.25,1.4,.4,1)}
.arrow svg{position:absolute;left:0;top:0;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.arrow .shaft{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.arrow .fletch{fill:var(--wk1)} .arrow .f2{fill:var(--lt1)}
.arrow.hit svg{animation:thunk .5s ease-out}
@keyframes thunk{0%{transform:translate(6px,-6px)}40%{transform:translate(-2px,2px)}70%{transform:translate(1px,-1px)}100%{transform:none}}
.m-text{min-width:0;display:grid;gap:6px}
.pctline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pct{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;transition:color .4s}
.pct-sub{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.verdict{font-family:var(--display);font-size:1.1rem;font-weight:700;margin:0;text-wrap:balance}

.today h2{font-size:1rem;margin-bottom:10px}
.today ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.today li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:var(--wk-tint);transition:opacity .35s,transform .35s}
.today li.ticked{opacity:0;transform:translateX(24px)}
.today li.t-empty{display:block;background:var(--soft);color:var(--muted);font-size:.85rem}
.tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--wk1);background:var(--surface);cursor:pointer;position:relative;transition:background .2s}
.tick:hover:not(:disabled){background:color-mix(in srgb,var(--wk1) 18%,var(--surface))}
.tick:hover:not(:disabled)::after{content:"✓";position:absolute;inset:0;display:grid;place-content:center;color:var(--wk1);font-weight:800;font-size:.8rem}
.tick:disabled{opacity:.4;cursor:default}
.t-title{font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.t-meta{display:flex;align-items:center;gap:6px;font-size:.72rem;white-space:nowrap}

/* Due states (B6) */
.due{color:var(--muted)}
.due.soon{color:var(--warn);background:var(--warn-bg);padding:1px 7px;border-radius:999px;font-weight:700}
.due.overdue{color:var(--bad);background:var(--bad-bg);padding:1px 7px;border-radius:999px;font-weight:700}

/* Chart (R7) */
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.chart-head h2{font-size:1rem}
.filter-chip{border:none;background:var(--lt-tint);color:var(--lt1);font-weight:700;font-size:.78rem;padding:5px 11px;border-radius:999px;cursor:pointer}
.chart-scroll{overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.ch-grid{--bar-h:120px;display:grid;grid-template-columns:repeat(var(--n),minmax(30px,1fr));grid-template-rows:34px var(--bar-h) auto;column-gap:6px;row-gap:4px;min-width:calc(var(--n) * 36px)}
.ch-mark{display:flex;justify-content:center;align-items:flex-end;gap:2px;min-width:0}
.mk{position:relative;display:inline-grid;place-items:center}
.mk i{width:10px;height:10px;border-radius:50%;background:var(--mc);box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 25%,transparent);animation:ping 2.6s ease-out infinite;color:var(--mc)}
.mk em{position:absolute;bottom:13px;line-height:1.2;left:50%;transform:translateX(-50%);font-style:normal;font-size:.62rem;font-weight:700;color:var(--mc);white-space:nowrap}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.ch-col{position:relative;border:none;background:none;padding:0;cursor:pointer;border-radius:8px}
.ch-col:hover{background:var(--soft)}
.ch-col.fade{opacity:.35}
.ch-col.sel{background:var(--lt-tint)}
.ch-bar{position:absolute;left:12%;right:12%;bottom:0;display:flex;flex-direction:column;border-radius:7px 7px 3px 3px;transform-origin:bottom;animation:rise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 40ms)}
@keyframes rise{from{transform:scaleY(.15)}}
.ch-solid{background:linear-gradient(180deg,var(--wk2),var(--wk1));border-radius:inherit}
.ch-light{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--lt1) 35%,transparent) 0 4px,color-mix(in srgb,var(--lt1) 18%,transparent) 4px 8px);border-radius:7px 7px 0 0}
.ch-light+.ch-solid{border-radius:0 0 3px 3px}
.ch-col.over .ch-solid{background:linear-gradient(180deg,#FF8787,var(--bad))}
.ch-val{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:.66rem;font-weight:700;color:var(--muted);padding-bottom:2px;font-variant-numeric:tabular-nums}
.ch-col.over .ch-val{color:var(--bad)}
.ch-capl{position:absolute;left:-3px;right:-3px;border-top:2px dashed color-mix(in srgb,var(--ink) 45%,transparent);z-index:1;pointer-events:none}
.ch-capl em{position:absolute;right:0;bottom:2px;font-style:normal;font-size:.6rem;font-weight:700;color:var(--muted);white-space:nowrap}
.ch-lbl{text-align:center;font-size:.68rem;color:var(--muted);line-height:1.2;font-variant-numeric:tabular-nums}
.ch-lbl b{color:var(--ink);font-weight:700}
.ch-range{height:20px;border-radius:999px;background:color-mix(in srgb,var(--rc) 22%,transparent);border:1.5px solid color-mix(in srgb,var(--rc) 60%,transparent);display:flex;align-items:center;padding-inline:8px;min-width:0;overflow:hidden}
.ch-range span{font-size:.66rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Legend */
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend>span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;padding:4px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}

/* Board */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.lane{border-radius:22px;padding:10px;display:grid;gap:10px;min-width:0;transition:transform .2s}
.lane[data-lane="week"]{--c1:var(--wk1);--c2:var(--wk2);background:var(--wk-tint)}
.lane[data-lane="later"]{--c1:var(--lt1);--c2:var(--lt2);background:var(--lt-tint)}
.lane[data-lane="routine"]{--c1:var(--rt1);--c2:var(--rt2);background:var(--rt-tint)}
.lane[data-lane="done"]{--c1:var(--dn1);--c2:var(--dn2);background:var(--dn-tint)}
.lane-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-radius:16px;background:linear-gradient(120deg,var(--c1),var(--c2));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--c1) 35%,transparent)}
.lane-head h2{font-size:1rem;font-weight:800;flex:1}
.lane-head .sum{font-family:var(--display);font-weight:700;font-size:.82rem;background:rgba(255,255,255,.25);padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.add{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--c1);font-size:1.15rem;font-weight:700;cursor:pointer;line-height:1;transition:transform .2s;flex:none}
.add:hover{transform:rotate(90deg) scale(1.1)}
.view .add,.view .grip,.view .kbd-hint{visibility:hidden}
.view .add{display:none}
.lane-body{display:grid;gap:8px;min-height:72px;align-content:start;border-radius:14px;padding:2px;transition:background .2s,box-shadow .2s}
.lane.over{transform:translateY(-3px)}
.lane.over .lane-body{background:color-mix(in srgb,var(--c1) 12%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c1) 50%,transparent)}
.empty{font-size:.8rem;color:var(--muted);text-align:center;padding:18px 8px;border:2px dashed color-mix(in srgb,var(--c1) 35%,transparent);border-radius:14px}

.card{background:var(--surface);border-radius:14px;padding:10px 10px 10px 6px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;box-shadow:var(--shadow);cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow .2s,transform .2s,opacity .25s;animation:cardIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes cardIn{from{opacity:.3;transform:translateY(10px) scale(.98)}}
.card:hover{box-shadow:var(--shadow-up);transform:translateY(-2px)}
.card.is-overdue{box-shadow:var(--shadow),inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 55%,transparent)}
.card.dim{opacity:.32}
.card.lifted{opacity:.25;transform:scale(.97)}
.card.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.9)}100%{transform:scale(1)}}
.view .card{cursor:default}
.grip{width:18px;height:30px;display:grid;place-content:center;color:var(--muted);touch-action:none;cursor:grab;font-size:12px;letter-spacing:-2px;opacity:.6}
.c-main{min-width:0;display:grid;gap:4px}
.c-title{font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.deleg{margin-right:4px}
.c-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.72rem;color:var(--muted)}
.per{font-variant-numeric:tabular-nums}
.c-warn{font-size:.72rem;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:3px 8px;border-radius:8px}
.hrs{font-family:var(--display);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;padding:5px 9px;border-radius:10px;color:var(--c1);background:color-mix(in srgb,var(--c1) 13%,transparent);white-space:nowrap}
.hrs small{font-size:.62rem;font-weight:700;opacity:.8}
.lane[data-lane="done"] .c-title{text-decoration:line-through;text-decoration-color:var(--dn1);color:var(--muted)}
.drag-ghost{position:fixed;z-index:50;pointer-events:none;transform:rotate(3deg) scale(1.04);box-shadow:0 20px 40px rgba(40,20,100,.3);animation:none;transition:none}
.kbd-hint{margin:0;font-size:.75rem;color:var(--muted);text-align:center}
@media (hover:none){.kbd-hint{display:none}}

.burst{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:90;animation:fly .9s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* Sheets */
.scrim{position:fixed;inset:0;background:rgba(18,12,40,.45);backdrop-filter:blur(3px);z-index:60;display:grid;place-items:end center;animation:fade .2s;overflow-y:auto}
@keyframes fade{from{opacity:0}}
.sheet{width:min(540px,100%);max-height:100%;overflow-y:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;animation:up .35s cubic-bezier(.2,.9,.3,1.1)}
.sheet.small{width:min(400px,100%)}
.sheet.wide{width:min(640px,100%)}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@media (min-width:700px){.scrim{place-items:center;padding:24px}.sheet{border-radius:24px;max-height:calc(100vh - 48px)}}
.sheet h3{font-size:1.2rem}
.field{display:grid;gap:6px;font-size:.8rem;color:var(--muted);min-width:0}
.field input,.field select,.set-row input:not([type=color]){font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%;min-width:0}
.proj-pick{display:flex;flex-wrap:wrap;gap:6px}
.proj-pick button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 10px;font-size:.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.proj-pick button[aria-pressed="true"]{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);font-weight:700}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--soft);padding:4px;border-radius:14px}
.seg button{border:none;background:none;border-radius:10px;padding:7px 4px;font-size:.78rem;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button[aria-checked="true"]{color:#fff}
.seg .seg-week[aria-checked="true"]{background:linear-gradient(120deg,var(--wk1),var(--wk2))}
.seg .seg-later[aria-checked="true"]{background:linear-gradient(120deg,var(--lt1),var(--lt2))}
.seg .seg-routine[aria-checked="true"]{background:linear-gradient(120deg,var(--rt1),var(--rt2))}
.seg .seg-done[aria-checked="true"]{background:linear-gradient(120deg,var(--dn1),var(--dn2))}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1 1 160px}
.row.tight{gap:8px}
.hstep{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hstep b{font-family:var(--display);font-size:1.5rem;min-width:2.5ch;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.hstep input{width:5.5ch!important;text-align:center;font-family:var(--display);font-weight:800;font-size:1.2rem!important;padding:6px!important}
.step{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.05rem;cursor:pointer;line-height:1;flex:none;transition:transform .15s,background .15s}
.step:hover{background:var(--lt-tint)} .step:active{transform:scale(.88)}
.hint{margin:0;font-size:.8rem;color:var(--muted)}
.warn-line{margin:0;font-size:.8rem;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:6px 10px;border-radius:10px}
.more summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--lt1);padding:4px 0}
.more[open]{display:grid;gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--lt1)}
.actions{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.actions.end{justify-content:flex-end}
.btn{font-weight:700;border:none;border-radius:999px;padding:10px 18px;cursor:pointer;transition:transform .15s}
.btn.sm{padding:7px 13px;font-size:.82rem}
.btn:active{transform:scale(.95)} .btn:disabled{opacity:.5}
.btn.primary{background:linear-gradient(90deg,var(--lt1),var(--lt2));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--lt1) 35%,transparent)}
.btn.danger{background:none;color:var(--bad)}
.btn.plain{background:var(--soft)}
.btn.plain.danger{background:var(--bad-bg)}
.err{margin:0;color:var(--bad);font-size:.85rem;font-weight:600}

.set-sec{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.set-sec h4{font-size:.95rem}
.set-list{display:grid;gap:6px}
.set-row{display:grid;grid-template-columns:36px minmax(0,1fr) 32px;gap:6px;align-items:center}
#sMiles .set-row{grid-template-columns:36px 9.5em minmax(0,1fr) 32px}
.set-row.range{grid-template-columns:36px 9.5em 9.5em minmax(0,1fr) 32px}
.set-row input[type=color]{width:36px;height:36px;border:none;padding:0;background:none;border-radius:10px;cursor:pointer}
.set-row input{font-size:.88rem!important;padding:7px 9px!important}
.x{width:32px;height:32px;border:none;border-radius:50%;background:var(--soft);cursor:pointer;color:var(--muted)}
.x:hover{background:var(--bad-bg);color:var(--bad)}
.file-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;background:var(--warn-bg);padding:8px 12px;border-radius:12px}
.backups{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:200px;overflow-y:auto}
.backups li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.82rem;padding:4px 0;font-variant-numeric:tabular-nums}

.rev-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.rev-nums div{background:var(--soft);border-radius:14px;padding:10px 4px;display:grid}
.rev-nums b{font-family:var(--display);font-size:1.6rem}
.rev-nums span{font-size:.72rem;color:var(--muted)}
.rev-nums div:nth-child(2) b{color:var(--dn1)}
.rev-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.85rem;font-weight:600;z-index:100;animation:up .3s;max-width:calc(100% - 32px);text-align:center}

@media (max-width:980px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .wrap{gap:12px;padding-block:12px 40px}
  .board{grid-template-columns:minmax(0,1fr)}
  .meter{gap:14px;padding:14px}
  .today,.chart-card{padding:14px}
  .verdict{font-size:.95rem}
  .set-row,#sMiles .set-row,.set-row.range{display:flex;flex-wrap:wrap}
  .set-row input:not([type=color]){flex:1 1 130px;width:auto}
}
@media (max-width:480px){
  .target{width:84px}
  .pct{font-size:2.2rem}
  .ch-grid{--bar-h:96px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}