:root{
  --bg:#0e1117; --card:#161b26; --card2:#1b2130; --border:#252c3d;
  --text:#e6e9f0; --muted:#8b93a7; --green:#4ade80; --red:#f87171;
  --violet:#8b5cf6; --violet2:#a78bfa; --gold:#fbbf24; --ringbg:#242b3d;
  --display:'Space Grotesk',sans-serif; --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.5}
.wrap{max-width:560px;margin:0 auto;padding:18px 18px 60px}
a{color:var(--violet2);text-decoration:none}

nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
nav .back{font-size:13px;color:var(--muted)}
nav .back:hover{color:var(--text)}
nav h1{font-family:var(--display);font-size:18px}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;
      padding:18px;margin-bottom:14px}

/* wallet */
.wallet{text-align:center}
.wallet .label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
               color:var(--muted);text-transform:uppercase}
.wallet .amount{font-family:var(--display);font-size:42px;font-weight:700;
                color:var(--green);line-height:1.15}
.wallet .amount.neg{color:var(--red)}
.wallet .stats{font-size:12.5px;color:var(--muted)}

/* timer */
.timer{text-align:center}
.setup{display:flex;justify-content:center;align-items:center;gap:8px;
       font-size:14px;color:var(--muted);margin-bottom:6px}
input[type=number]{width:64px;text-align:center;background:var(--card2);
      color:var(--text);border:1px solid var(--border);border-radius:8px;
      padding:7px 4px;font:600 14px var(--body)}
input[type=number]:focus{outline:none;border-color:var(--violet)}
.ringbox{position:relative;width:230px;height:230px;margin:6px auto}
.ringbox svg{transform:rotate(-90deg)}
#ringProg{stroke:var(--violet);stroke-linecap:round}
.ringbox .center{position:absolute;inset:0;display:flex;flex-direction:column;
                 align-items:center;justify-content:center}
#timeText{font-family:var(--mono);font-size:34px;font-weight:700}
#stateText{font-size:12px;color:var(--muted);margin-top:2px}
#sessionValue{font-size:13px;color:var(--muted);margin-bottom:12px}

button{border:0;border-radius:9px;padding:11px 18px;font:600 14px var(--body);
       cursor:pointer;color:#fff;transition:filter .12s,transform .05s}
button:hover{filter:brightness(1.15)}
button:active{transform:scale(.98)}
button:disabled{opacity:.4;cursor:default;filter:none}
.btn-primary{background:var(--violet)}
.btn-neutral{background:#2f3a52}
.btn-danger{background:#3d1f27;color:var(--red)}
.btn-green{background:#1f3d2b;color:var(--green)}
.btnrow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.btnrow + .btnrow{margin-top:10px}

/* settings */
.settings{display:flex;justify-content:center;align-items:center;gap:8px;
          flex-wrap:wrap;font-size:13px;color:var(--muted)}

/* shop + history */
h2{font-family:var(--display);font-size:16px;margin-bottom:10px;
   display:flex;justify-content:space-between;align-items:center}
h2 .actions{display:flex;gap:6px}
h2 .actions button{padding:6px 12px;font-size:12.5px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);
   text-transform:uppercase;text-align:left;padding:6px 8px;
   border-bottom:1px solid var(--border)}
td{padding:8px;border-bottom:1px solid var(--card2)}
tr:last-child td{border-bottom:0}
/* The 6-column history table is wider than a phone-width card: scroll it inside the card, not the page. */
.table-scroll{overflow-x:auto}
@media(max-width:420px){th{padding:6px 4px;letter-spacing:.05em}td{padding:8px 4px}}
tbody tr.sel{background:var(--card2);outline:1px solid var(--violet)}
#shopBody tr{cursor:pointer}
.num{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.pos{color:var(--green)} .negc{color:var(--red)}
.aff{color:var(--gold);font-weight:600} .dim{color:var(--muted)}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 0}

/* toasts + modal */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
        display:flex;flex-direction:column;gap:8px;z-index:50;width:min(420px,92vw)}
.toast{background:var(--card2);border:1px solid var(--violet);border-radius:11px;
       padding:12px 16px;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.5);
       animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
dialog{background:var(--card);color:var(--text);border:1px solid var(--border);
       border-radius:14px;padding:22px;max-width:340px;width:90vw}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h3{font-family:var(--display);margin-bottom:12px;font-size:17px}
dialog label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
dialog input{width:100%;background:var(--card2);color:var(--text);
      border:1px solid var(--border);border-radius:8px;padding:9px;font:14px var(--body)}
dialog .btnrow{justify-content:flex-end;margin-top:16px}

/* sync card */
.sync-status{font:500 12px var(--body);color:var(--muted)}
.sync-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sync-hint{font-size:12.5px;color:var(--muted)}

.foot{font-size:12px;color:var(--muted);text-align:center;margin-top:6px}
.foot button{background:none;color:var(--violet2);padding:0;font-size:12px}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}