:root{
  --bg:#0A0A0A;
  --surface:#141414;
  --border:#222;
  --text:#EAEAEA;
  --dim:#777;
  --dim2:#555;
  --green:#4ADE80;
  --red:#EF4444;
  --yellow:#FBBF24;
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-weight:400;min-height:100dvh;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
body{font-size:14px;line-height:1.5}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit}

#app{max-width:480px;margin:0 auto;min-height:100dvh;padding-top:var(--sa-t);padding-bottom:calc(56px + var(--sa-b));position:relative}
#view{padding:20px 20px 16px}

.dim{color:var(--dim)}
.dim2{color:var(--dim2)}
.mono{font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;align-items:center}
.hdr{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin:20px 0 10px}
.hdr:first-child{margin-top:0}
h2{font-size:18px;margin:0;font-weight:500;letter-spacing:.3px}

/* tabs */
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;max-width:480px;margin:0 auto;border-top:1px solid var(--border);background:var(--bg);z-index:20;padding-bottom:var(--sa-b)}
#tabs .tab{flex:1;padding:18px 8px;color:var(--dim);font-size:12px;letter-spacing:1px;text-transform:lowercase;border-right:1px solid var(--border)}
#tabs .tab:last-child{border-right:0}
#tabs .tab.active{color:var(--text);background:var(--surface)}

/* streak screen */
.top-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px}
.top-row .l{font-size:12px;color:var(--dim)}
.top-row .r{font-size:12px;color:var(--dim)}
.gear{color:var(--dim);font-size:14px;padding:4px 8px;border:1px solid var(--border)}

.streak-num{text-align:center;margin:28px 0 8px}
.streak-num .big{font-size:96px;font-weight:500;line-height:1;letter-spacing:-3px;font-variant-numeric:tabular-nums}
.streak-num .unit{color:var(--dim);font-size:14px;margin-top:6px;letter-spacing:1.5px;text-transform:lowercase}
.streak-tick{text-align:center;color:var(--dim);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:2px;margin-bottom:24px}

.streak-msg{border:1px solid var(--border);padding:14px;margin-bottom:16px;font-size:13px;line-height:1.55}
.streak-msg.hard{border-color:var(--red);color:var(--text)}
.streak-msg .k{color:var(--dim);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;display:block}

.money-card{border:1px solid var(--border);padding:16px;margin-bottom:24px}
.money-card .amt{font-size:22px;font-weight:500;color:var(--yellow);font-variant-numeric:tabular-nums}
.money-card .eq{color:var(--dim);font-size:12px;margin-top:4px}
.money-card .eq strong{color:var(--text);font-weight:400}

/* hold button */
.hold-group{display:grid;grid-template-columns:1fr;gap:10px;margin:30px 0 10px}
.hold-btn{position:relative;border:1px solid var(--red);color:var(--red);padding:22px 16px;font-size:15px;font-weight:500;letter-spacing:2px;text-transform:uppercase;text-align:center;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;background:transparent}
.hold-btn.small{padding:12px 12px;font-size:12px;letter-spacing:1.5px;border-color:var(--border);color:var(--dim)}
.hold-btn .hold-fill{position:absolute;inset:0;background:var(--red);opacity:.18;transform-origin:left center;transform:scaleX(0);transition:none;z-index:0}
.hold-btn.small .hold-fill{background:var(--dim);opacity:.2}
.hold-btn .hold-label{position:relative;z-index:1;display:block}
.hold-btn .hold-hint{position:relative;z-index:1;display:block;font-size:10px;color:var(--dim);letter-spacing:1px;margin-top:4px;text-transform:none;font-weight:400}
.hold-btn.armed{background:rgba(239,68,68,.05)}
.win-btn{border:1px solid var(--green);color:var(--green);padding:14px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-top:10px;width:100%;background:transparent}
.win-btn:active{background:rgba(74,222,128,.08)}

/* data screen */
.sys-list{border:1px solid var(--border);padding:14px}
.sys-row{padding:10px 0;border-bottom:1px solid var(--border)}
.sys-row:last-child{border-bottom:0}
.sys-row .rr{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:6px}
.sys-row .nm{color:var(--text)}
.sys-row .pc{color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:1px}
.sys-row.full .pc{color:var(--green)}
.bar{height:4px;background:var(--border);position:relative;overflow:hidden}
.bar .fill{position:absolute;inset:0;background:var(--dim);transform-origin:left;transform:scaleX(0);transition:transform .6s ease}
.sys-row.full .bar .fill{background:var(--green)}

/* heatmap */
.heat-wrap{border:1px solid var(--border);padding:12px}
.heat{display:grid;grid-template-columns:22px repeat(24, 1fr);gap:2px;margin-bottom:8px}
.heat .hcell{aspect-ratio:1;background:var(--surface);border:1px solid transparent}
.heat .hlbl{font-size:10px;color:var(--dim);display:flex;align-items:center;justify-content:center}
.heat-axis{display:grid;grid-template-columns:22px repeat(24, 1fr);gap:2px;margin-bottom:4px}
.heat-axis div{font-size:9px;color:var(--dim2);text-align:center}
.heat-cap{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.5}
.heat-cap strong{color:var(--text);font-weight:500}
.heat-legend{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--dim);margin-top:8px}
.heat-legend .lg-cell{width:10px;height:10px;border:1px solid var(--border)}

/* attempts chart */
.att-chart{border:1px solid var(--border);padding:14px}
.att-bars{display:grid;grid-template-columns:repeat(11, 1fr);gap:4px;align-items:end;height:120px}
.att-bar{background:var(--border);position:relative;min-height:2px}
.att-bar.current{background:var(--green)}
.att-bar .lbl{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--dim2)}
.att-chart .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:20px}

/* top hours */
.hour-row{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--border);border-bottom:0;font-size:13px}
.hour-row:last-child{border-bottom:1px solid var(--border)}
.hour-row .hh{font-weight:500;font-variant-numeric:tabular-nums}
.hour-row .cc{color:var(--dim)}

/* month money */
.mn-row{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--border);border-bottom:0;font-size:13px}
.mn-row:last-child{border-bottom:1px solid var(--border)}
.mn-row .amt{color:var(--yellow);font-variant-numeric:tabular-nums}

/* awards screen */
.aw-count{border:1px solid var(--border);padding:14px;margin-bottom:20px;text-align:center;font-size:13px;color:var(--dim);letter-spacing:1px}
.aw-count .n{color:var(--yellow);font-size:22px;font-weight:500;display:block;margin-bottom:4px;font-variant-numeric:tabular-nums}
.aw-group{margin-bottom:20px}
.aw-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aw{border:1px solid var(--border);padding:12px;position:relative}
.aw.locked{color:var(--dim2)}
.aw.unlocked{border-color:var(--yellow);color:var(--text)}
.aw .id{font-size:10px;color:var(--dim2);letter-spacing:1px;margin-bottom:6px}
.aw.unlocked .id{color:var(--yellow)}
.aw .nm{font-size:15px;font-weight:500;margin-bottom:2px}
.aw.unlocked .nm{color:var(--yellow)}
.aw .dc{font-size:11px;color:var(--dim);line-height:1.4;margin-bottom:4px}
.aw .dt{font-size:10px;color:var(--dim2);letter-spacing:.5px}

/* modals */
#modal-root{position:fixed;inset:0;pointer-events:none;z-index:50}
.modal{position:fixed;inset:0;background:rgba(10,10,10,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fadein .15s ease;pointer-events:auto;padding:24px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:420px;border:1px solid var(--border);background:var(--bg);padding:24px}
.sheet h2{font-size:16px;font-weight:500;margin:0 0 8px;letter-spacing:.5px}
.sheet .sub{font-size:13px;color:var(--dim);margin-bottom:18px;line-height:1.5}
.sheet .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.btn{padding:14px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--border);color:var(--text);background:transparent;text-align:center}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.ghost{color:var(--dim)}
.btn:active{opacity:.7}

/* settings */
.set-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);font-size:13px;gap:12px}
.set-row input{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 10px;width:120px;text-align:right;font-size:13px}

/* toast */
#toast{position:fixed;bottom:calc(70px + var(--sa-b));left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);padding:10px 16px;font-size:12px;letter-spacing:.5px;z-index:100;opacity:0;transition:opacity .2s;pointer-events:none;max-width:380px;text-align:center}