:root{
  color-scheme: dark;
  --app-max-width:760px;
  --page-gutter:10px;
  --layout-gap:10px;
  --bottom-panel-space:152px;
  --board-max-size:660px;
  --viewport-reserved-height:286px;
  --scrollbar-size:10px;
  --bg:#07101d;
  --bg2:#0a1324;
  --text:#f5f7fb;
  --muted:#92a1b6;
  --border:rgba(255,255,255,.09);
  --border2:rgba(255,255,255,.16);
  --accent:#60a5fa;
  --accentbg:rgba(59,130,246,.16);
  --danger:#ef4444;
  --dangerbg:rgba(239,68,68,.18);
  --shadow:0 14px 30px rgba(0,0,0,.34);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.42) rgba(255,255,255,.025);
}
html::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}
html::-webkit-scrollbar-track{background:rgba(255,255,255,.025)}
html::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.36);
  border:3px solid #07101d;
  border-radius:999px;
}
html::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.56)}
html,body{
  margin:0;min-height:100%;
  background:
    radial-gradient(900px 420px at 50% -8%,rgba(59,130,246,.08),transparent 58%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
button{font:inherit}
main{
  width:100%;
  max-width:var(--app-max-width);
  min-height:100dvh;
  margin:0 auto;
  padding:var(--page-gutter) var(--page-gutter) var(--bottom-panel-space);
  display:flex;
  flex-direction:column;
}
.app{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:var(--layout-gap);
}
.topbar{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
}
.title{
  font-size:22px;
  font-weight:850;
  letter-spacing:-.02em;
  margin-right:auto;
}
.pill,.iconbtn{
  height:42px;
  min-width:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.035);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  font-weight:800;
}
.iconbtn{padding:0;width:42px}
.pill svg,.iconbtn svg,.dockbtn svg,.status svg,.sheet svg,.statpill svg,.record-card svg{
  width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.level-btn{
  min-width:104px;
  justify-content:space-between;
  padding:0 10px 0 12px;
}
.center-zone{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--layout-gap);
}
.board-wrap{
  position:relative;
  inline-size:min(
    100%,
    var(--board-max-size),
    max(320px, calc(100dvh - var(--viewport-reserved-height)))
  );
  block-size:auto;
  margin:0 auto;
}
.board{
  width:100%;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  grid-template-rows:repeat(9,minmax(0,1fr));
  aspect-ratio:1/1;
  border:2px solid rgba(255,255,255,.84);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.cell{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-right:1px solid rgba(255,255,255,.085);
  border-bottom:1px solid rgba(255,255,255,.085);
  border-radius:0;
  background:rgba(255,255,255,.02);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(19px,6.4vw,32px);
  font-weight:540;
  touch-action:manipulation;
  cursor:pointer;
}
.cell.given{font-weight:820;background:rgba(255,255,255,.03)}
.cell.peer{background:rgba(96,165,250,.08)}
.cell.same{background:rgba(96,165,250,.14)}
.cell.selected{
  outline:3px solid var(--accent);
  outline-offset:-3px;
  z-index:2;
  background:rgba(37,99,235,.23);
}
.cell.wrong{background:var(--dangerbg);color:#fff}
.box-r{border-right:2px solid rgba(255,255,255,.78)}
.box-b{border-bottom:2px solid rgba(255,255,255,.78)}
.no-r{border-right:0}
.no-b{border-bottom:0}
.notes{
  width:100%;height:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  color:var(--muted);
  font-size:clamp(7px,2.1vw,11px);
}
.note{display:flex;align-items:center;justify-content:center}
.pad{
  position:absolute;
  z-index:25;
  width:154px;
  padding:7px;
  display:grid;
  grid-template-columns:repeat(3,44px);
  gap:4px;
  border-radius:18px;
  background:rgba(8,13,23,.985);
  border:1px solid var(--border2);
  box-shadow:0 18px 36px rgba(0,0,0,.48);
}
.pad[hidden]{display:none}
.num{
  width:44px;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:18px;
  font-weight:800;
}
.num.allowed{
  border-color:rgba(96,165,250,.56);
  background:var(--accentbg);
}
.num:disabled{opacity:.22}
.status{
  min-height:24px;
  padding:0 2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
  display:flex;
  align-items:center;
  gap:7px;
}
.status strong{color:var(--text);font-weight:760}
.pause{
  position:absolute;
  inset:0;
  z-index:30;
  border-radius:18px;
  background:rgba(7,11,20,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  text-align:center;
  padding:20px;
}
.pause[hidden]{display:none}
.pause .big{font-size:22px;font-weight:850}
.pause .small{font-size:13px;color:var(--muted)}
.resume{
  min-width:120px;
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(96,165,250,.42);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(59,130,246,.28),rgba(37,99,235,.20));
  color:var(--text);
  font-weight:800;
}
.bottom-panel{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(7,16,29,0),rgba(7,16,29,.86) 16%,rgba(7,16,29,.97) 42%);
}
.bottom-inner{
  max-width:var(--app-max-width);
  margin:0 auto;
  display:grid;
  gap:8px;
}
.statsbar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.statpill{
  min-width:0;
  min-height:54px;
  padding:7px 8px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.statpill .top{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:700}
.statpill .val{font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}
.dock{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.dockbtn{
  position:relative;
  min-width:0;
  height:62px;
  padding:6px 4px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.dockbtn.active{
  background:var(--accentbg);
  border-color:rgba(96,165,250,.45);
}
.dockbtn .label{font-size:12px;font-weight:700;color:var(--muted);line-height:1}
.dockbtn.active .label{color:var(--text)}
.badge{
  position:absolute;
  top:6px;
  right:7px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:99px;
  background:rgba(255,255,255,.09);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  display:grid;
  place-items:center;
  font-variant-numeric:tabular-nums;
}
.overlay{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(2,6,13,.55);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
}
.overlay[hidden]{display:none}
.sheet{
  width:min(100%,700px);
  padding:10px;
  border:1px solid var(--border2);
  border-radius:22px 22px 18px 18px;
  background:linear-gradient(180deg,#111827,#0b1321);
  box-shadow:0 24px 52px rgba(0,0,0,.55);
}
.handle{width:42px;height:5px;border-radius:99px;background:rgba(255,255,255,.18);margin:0 auto 10px}
.sheet-title{font-size:18px;font-weight:850;padding:0 6px 8px}
.sheet-note{padding:0 6px 8px;color:var(--muted);font-size:12px}
.section-title{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:10px 8px 6px;
}
.segment{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.segment.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg{
  min-height:48px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:800;
  font-size:13px;
}
.seg.active{
  background:var(--accentbg);
  border-color:rgba(96,165,250,.5);
}
.records-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.record-card{
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.record-card .row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.record-card .lvl{font-weight:800}
.record-card .best{font-size:13px;font-weight:800}
.record-card .meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.summary-card{
  padding:12px 8px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  text-align:center;
}
.summary-card .n{font-size:18px;font-weight:850;font-variant-numeric:tabular-nums}
.summary-card .k{font-size:11px;color:var(--muted);margin-top:3px}
.flash{animation:flash .3s ease}
@keyframes flash{50%{background:rgba(239,68,68,.22)}}
@media(prefers-reduced-motion:reduce){.flash{animation:none}}
@media(max-width:450px){
  .records-grid{grid-template-columns:1fr}
}
@media(max-width:390px){
  :root{--page-gutter:8px}
  .bottom-panel{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .statsbar,.dock{gap:6px}
  .statpill{min-height:52px}
  .dockbtn{height:60px}
  .dockbtn .label{font-size:11px}
}
@media(min-width:900px){
  :root{
    --board-max-size:650px;
    --viewport-reserved-height:276px;
  }
}
@media(max-height:700px) and (min-width:700px){
  :root{
    --board-max-size:560px;
    --viewport-reserved-height:248px;
  }
}


.history-list{
  display:grid;
  gap:7px;
}
.history-row{
  min-height:52px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.history-row .history-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
}
.history-row .history-meta{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}
.history-row .history-time{
  font-weight:850;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.history-dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--muted);
  flex:0 0 auto;
}
.history-dot.perfect{background:#22c55e}
.install-row{
  width:100%;
  min-height:52px;
  padding:0 12px;
  border:1px solid rgba(96,165,250,.35);
  border-radius:14px;
  background:var(--accentbg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}
.install-row .main{font-weight:850}
.install-row .sub{margin-top:2px;color:var(--muted);font-size:12px}

.stat-action{
  appearance:none;
  font:inherit;
  cursor:pointer;
}
.stat-action:focus-visible,
.dockbtn:focus-visible,
.pill:focus-visible,
.iconbtn:focus-visible,
.seg:focus-visible,
.export-btn:focus-visible,
.install-row:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.sheet-loading,
.empty-state,
.data-note{
  padding:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.stats-six{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.trend-card{
  margin-top:8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.trend-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.trend-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.trend-line{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.4;
  vector-effect:non-scaling-stroke;
}
.trend-dot{
  fill:var(--accent);
}
.history-dot.solved{background:var(--accent)}
.history-dot.abandoned{background:var(--muted)}
.export-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.export-btn{
  min-height:46px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:800;
}
@media(max-width:420px){
  .stats-six{grid-template-columns:repeat(2,minmax(0,1fr))}
}