.spt-root{
  --spt-paper:#EDE3CC;
  --spt-paper-dark:#E2D5B4;
  --spt-ink:#22303F;
  --spt-ink-soft:#5B6875;
  --spt-card:#FFFCF4;
  --spt-amber:#E7B23E;
  --spt-amber-deep:#B5842A;
  --spt-coral:#D9634B;
  --spt-coral-deep:#A8402C;
  --spt-sage:#6B8F63;
  --spt-sage-deep:#48633F;
  --spt-steel:#8B96A1;
  --spt-line:#C9BB98;
  --spt-shadow: 0 6px 18px rgba(34,48,63,0.12);

  all:initial;
  *,*::before,*::after{box-sizing:border-box;}
  display:block;
  background:
    radial-gradient(circle at 1px 1px, rgba(34,48,63,0.06) 1px, transparent 0) 0 0/16px 16px,
    var(--spt-paper);
  color:var(--spt-ink);
  font-family:'Inter',system-ui,sans-serif;
  border-radius:12px;
  overflow:hidden;
  padding-bottom:30px;
}
.spt-root *{box-sizing:border-box; font-family:inherit;}
.spt-root p, .spt-root h1, .spt-root h2, .spt-root span, .spt-root div, .spt-root table, .spt-root th, .spt-root td{margin:0; padding:0;}

.spt-wrap{max-width:520px;margin:0 auto;padding:0 16px;}

.spt-topbar{
  position:sticky; top:0; z-index:20;
  background:var(--spt-paper);
  padding:14px 0 10px;
  border-bottom:2px solid var(--spt-ink);
}
.spt-brand{
  font-family:'Special Elite',monospace;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--spt-ink-soft);
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px !important;
}
.spt-brand .spt-clock{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  color:var(--spt-ink);
  font-size:14px;
}
.spt-ruler{
  position:relative;
  height:34px;
  background:var(--spt-card);
  border:2px solid var(--spt-ink);
  border-radius:6px;
  overflow:hidden;
}
.spt-ruler .spt-zone{position:absolute; top:0; bottom:0; opacity:0.28;}
.spt-ruler .spt-zone.spt-first30{left:0; width:50%; background:var(--spt-amber);}
.spt-ruler .spt-zone.spt-last30{left:50%; width:50%; background:var(--spt-coral);}
.spt-ruler .spt-pin{
  position:absolute; top:0; bottom:0; width:2px; background:var(--spt-ink);
}
.spt-ruler .spt-pin::after{
  content:attr(data-label);
  position:absolute; top:-2px; left:4px;
  font-family:'IBM Plex Mono',monospace;
  font-size:8.5px; white-space:nowrap; color:var(--spt-ink-soft);
}
.spt-ruler .spt-block{
  position:absolute; top:2px; bottom:2px;
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff;
  overflow:hidden; white-space:nowrap;
  border:1px solid rgba(0,0,0,0.25);
  transition:width .35s ease, left .35s ease;
}
.spt-ruler .spt-cursor{
  position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--spt-ink); box-shadow:0 0 0 3px rgba(34,48,63,0.15);
  transition:left .35s ease;
}
.spt-ticklabels{
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; color:var(--spt-ink-soft); margin-top:4px !important;
}

.spt-stage{padding-top:18px;}
.spt-card{
  background:var(--spt-card);
  border:2px solid var(--spt-ink);
  border-radius:10px;
  padding:18px 18px 20px;
  box-shadow:var(--spt-shadow);
  margin-bottom:16px !important;
}
.spt-eyebrow{
  font-family:'Special Elite',monospace;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--spt-amber-deep); margin-bottom:6px !important;
}
.spt-root h1{font-size:21px; margin:0 0 8px !important; line-height:1.25;}
.spt-root h2{font-size:17px; margin:0 0 10px !important; line-height:1.3;}
.spt-root p{font-size:14.5px; line-height:1.55; color:var(--spt-ink); margin:0 0 10px !important;}
.spt-muted{color:var(--spt-ink-soft); font-size:13.5px;}

.spt-btn{
  display:block; width:100%;
  font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px;
  padding:13px 16px; border-radius:8px;
  border:2px solid var(--spt-ink); background:var(--spt-ink); color:var(--spt-paper);
  cursor:pointer; text-align:center; margin-top:10px !important;
  transition:transform .1s ease;
}
.spt-btn:active{transform:scale(0.98);}
.spt-btn.spt-secondary{background:var(--spt-card); color:var(--spt-ink);}

.spt-task-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--spt-card); border:2px solid var(--spt-line);
  border-radius:8px; padding:10px 12px; margin-bottom:8px !important;
  cursor:pointer; text-align:left; width:100%;
}
.spt-task-chip:active{transform:scale(0.99);}
.spt-task-chip .spt-dur{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12.5px;
  background:var(--spt-paper-dark); border:1px solid var(--spt-line);
  border-radius:5px; padding:3px 7px; flex-shrink:0;
}
.spt-task-chip .spt-name{font-size:13.5px; font-weight:600; flex:1;}
.spt-task-chip .spt-badge{
  font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:4px;
  letter-spacing:0.5px; flex-shrink:0;
}
.spt-badge.spt-first30{background:var(--spt-amber); color:#3a2a05;}
.spt-badge.spt-last30{background:var(--spt-coral); color:#fff;}
.spt-badge.spt-fixed{background:var(--spt-steel); color:#fff;}
.spt-badge.spt-dep{background:var(--spt-sage); color:#fff;}

.spt-task-chip.spt-done{opacity:0.4;}
.spt-task-chip.spt-correct{border-color:var(--spt-sage); background:#F1F7EE;}
.spt-task-chip.spt-wrong{border-color:var(--spt-coral); background:#FBEEEA;}
.spt-task-chip.spt-locked{opacity:0.45; cursor:not-allowed;}

.spt-total-banner{
  font-family:'IBM Plex Mono',monospace; font-weight:700;
  text-align:center; font-size:26px; margin:8px 0 2px !important;
}
.spt-total-sub{text-align:center; font-size:12.5px; color:var(--spt-ink-soft); margin-bottom:6px !important;}

.spt-feedback{
  margin-top:10px !important; padding:10px 12px; border-radius:7px;
  font-size:13.5px; line-height:1.5; border:1.5px solid;
}
.spt-feedback.spt-good{background:#F1F7EE; border-color:var(--spt-sage); color:var(--spt-sage-deep);}
.spt-feedback.spt-bad{background:#FBEEEA; border-color:var(--spt-coral); color:var(--spt-coral-deep);}
.spt-feedback.spt-info{background:#F0EFE8; border-color:var(--spt-steel); color:var(--spt-ink-soft);}

.spt-rule-key{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px !important;}
.spt-rule-key span{
  font-size:10.5px; font-family:'IBM Plex Mono',monospace;
  padding:3px 7px; border-radius:5px; border:1px solid var(--spt-line);
}

.spt-progress-dots{display:flex; gap:5px; justify-content:center; margin:14px 0 4px !important;}
.spt-progress-dots i{width:6px; height:6px; border-radius:50%; background:var(--spt-line); display:block;}
.spt-progress-dots i.spt-on{background:var(--spt-ink);}

.spt-root table.spt-final{width:100%; border-collapse:collapse; font-size:12px; margin-top:8px !important;}
.spt-root table.spt-final th, .spt-root table.spt-final td{border:1px solid var(--spt-line); padding:6px 7px; text-align:left;}
.spt-root table.spt-final th{background:var(--spt-paper-dark); font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;}
.spt-root table.spt-final tr.spt-cut td{opacity:0.5; text-decoration:line-through;}

.spt-hidden{display:none !important;}