:root{
    --bg:#0e1116; --panel:#161b22; --panel2:#1c232c; --line:#2a323d;
    --fg:#e6edf3; --dim:#8b97a6; --accent:#7dd3fc; --ok:#4ade80; --bad:#f87171; --gold:#facc15;
    --radius:12px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:var(--bg); color:var(--fg);
    font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    display:flex; justify-content:center;
  }
  .kana{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
  #app{width:100%; max-width:880px; padding-top:22px}
  h1{font-size:19px; margin:0; letter-spacing:.2px}
  h1 span{color:var(--accent)}
  header{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
  header .sub{color:var(--dim); font-size:13px}
  h2{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim); margin:24px 0 10px}
  h2:first-child{margin-top:0}
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{
    border:1px solid var(--line); background:var(--panel2); color:var(--fg);
    border-radius:999px; padding:7px 13px; cursor:pointer; font-size:14px;
    display:flex; align-items:center; gap:7px; transition:.12s; font-family:inherit;
  }
  .chip:hover{border-color:#44505f}
  .chip .k{font-size:16px}
  .chip.on{background:rgba(125,211,252,.14); border-color:var(--accent); color:#dff2fd}
  .chip .ct{color:var(--dim); font-size:11px}
  .chip.on .ct{color:var(--accent)}
  .tabs{display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line)}
  .tab{
    background:none; border:none; border-bottom:2px solid transparent; color:var(--dim);
    font:inherit; font-size:15px; padding:9px 14px; cursor:pointer; margin-bottom:-1px;
  }
  .tab:hover{color:var(--fg)}
  .tab.on{color:var(--fg); border-bottom-color:var(--accent)}
  .row-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .btn{
    background:var(--panel2); color:var(--fg); border:1px solid var(--line);
    border-radius:8px; padding:7px 12px; cursor:pointer; font-size:13px; font-family:inherit;
  }
  .btn:hover{border-color:#44505f}
  button.go{
    background:var(--accent); color:#06212e; border:none; font-weight:650; font-size:15px;
    padding:13px 22px; border-radius:10px; cursor:pointer; font-family:inherit;
  }
  button.go:disabled{opacity:.4; cursor:not-allowed}
  .opts{display:flex; flex-wrap:wrap; gap:18px}
  .opt{display:flex; flex-direction:column; gap:6px}
  .opt label{font-size:12px; color:var(--dim)}
  select{background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-family:inherit}
  .check{display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; align-self:end; padding-bottom:7px}
  .start-bar{display:flex; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap}
  .start-bar .count{color:var(--dim); font-size:13px}
  .note{color:var(--dim); font-size:12.5px; margin-top:10px}

  /* batch grid */
  .batches{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px}
  .batch{
    text-align:left; background:var(--panel2); border:1px solid var(--line); color:var(--fg);
    border-radius:10px; padding:9px 11px; cursor:pointer; font-family:inherit; transition:.12s;
  }
  .batch:hover:not(.locked){border-color:#44505f}
  .batch .bn{font-size:11px; color:var(--dim); display:flex; justify-content:space-between; gap:6px}
  .batch .bk{font-size:17px; margin-top:3px; letter-spacing:1px; line-height:1.35}
  .batch.cur{border-color:var(--accent); background:rgba(125,211,252,.1)}
  .batch.cur .bn{color:var(--accent)}
  .batch.done{border-color:rgba(74,222,128,.45)}
  .batch.done .bn{color:var(--ok)}
  .batch.locked{opacity:.34; cursor:not-allowed}
  .batch.locked .bk{filter:blur(2.6px)}

  /* study */
  .study{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
  .scard{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; gap:12px}
  .scard .sg{font-size:42px; line-height:1}
  .scard .sm{font-weight:600}
  .scard .sr{font-size:12px; color:var(--dim); margin-top:3px}
  .scard .sw{font-size:12.5px; margin-top:5px; color:#b9c5d2}
  .scard .sw b{font-weight:600}

  /* play */
  #play{display:flex; flex-direction:column; align-items:center}
  .hud{width:100%; display:flex; justify-content:space-between; align-items:center; color:var(--dim); font-size:13px; margin-bottom:10px; gap:10px}
  .hud b{color:var(--fg); font-variant-numeric:tabular-nums}
  .bar{width:100%; height:4px; background:var(--panel2); border-radius:3px; overflow:hidden}
  .bar>i{display:block; height:100%; background:var(--accent); width:0%; transition:width .12s linear}
  .bar.timer>i{background:var(--gold)}
  .card{
    margin:28px 0 0; width:100%; min-height:250px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px; padding:18px;
    background:var(--panel); border:1px solid var(--line); border-radius:18px;
    transition:border-color .1s, background .1s;
  }
  .card.ok{border-color:var(--ok); background:rgba(74,222,128,.07)}
  .card.bad{border-color:var(--bad); background:rgba(248,113,113,.07)}
  .card.counted{border-color:var(--gold); background:rgba(250,204,21,.07)}
  .ask{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim)}
  .card.bad .ask{color:var(--bad)}
  .glyph{font-size:112px; line-height:1.08}
  .glyph.w2{font-size:84px}
  .glyph.w3{font-size:64px}
  .glyph.w4{font-size:54px}
  .answer{min-height:22px; font-size:16px; color:var(--dim); text-align:center; max-width:560px}
  .answer b{color:var(--bad)}
  .answer.ok b{color:var(--ok)}
  .answer .rd{display:block; font-size:13px; color:var(--dim); margin-top:5px; line-height:1.7}
  .answer .rd em{color:#b9c5d2; font-style:normal}
  .answer .ci{display:block; font-size:12px; color:var(--gold); margin-top:7px}
  #entry{
    margin-top:20px; width:100%; max-width:380px; text-align:center;
    background:var(--panel2); border:1px solid var(--line); border-radius:12px;
    color:var(--fg); font-size:26px; padding:12px; letter-spacing:.08em;
    outline:none; font-family:inherit;
  }
  #entry:focus{border-color:var(--accent)}
  .hint{color:var(--dim); font-size:12px; margin-top:13px; text-align:center}
  kbd{background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px; font-size:11px; font-family:inherit}

  /* results */
  .stats{display:flex; flex-wrap:wrap; gap:12px}
  .stat{flex:1 1 118px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
  .stat .v{font-size:26px; font-weight:650; font-variant-numeric:tabular-nums}
  .stat .l{color:var(--dim); font-size:12px; margin-top:2px}
  .verdict{border-radius:var(--radius); padding:14px 16px; margin-top:12px; border:1px solid var(--line); background:var(--panel)}
  .verdict.pass{border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.08)}
  .verdict .vt{font-weight:650; font-size:16px}
  .verdict.pass .vt{color:var(--ok)}
  .verdict .vs{color:var(--dim); font-size:13px; margin-top:3px}
  table{width:100%; border-collapse:collapse; font-size:14px}
  th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
  th{color:var(--dim); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
  td.g{font-size:24px; width:1%; white-space:nowrap}
  td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--dim)}
  .miss{color:var(--bad)}
  .empty{color:var(--dim); padding:14px 2px}
  footer{margin-top:34px; padding-top:14px; border-top:1px solid var(--line); color:var(--dim); font-size:11.5px; line-height:1.7}
  footer a{color:#6b7a8b}

  /* hidden must win over the display rules above (e.g. #play is display:flex) */
  [hidden]{display:none !important}
  /* notched iPhones: keep content clear of the rounded corners */
  #app{padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); padding-bottom:max(48px, env(safe-area-inset-bottom))}
  /* iOS zooms into any form control with a font size under 16px */
  select{font-size:16px}
  #notice{margin:0 0 14px; padding:10px 12px; border-radius:10px; background:var(--panel2); border:1px solid var(--line); color:var(--fg); font-size:13px}
  #notice.error{border-color:var(--bad)}
  .touch-bar{display:flex; gap:8px; width:100%; max-width:380px; margin-top:14px}
  .touch-bar button{flex:1; padding:14px 6px; font-size:15px; border-radius:10px}
  #data-panel{margin-top:28px}
  #data-panel .row-actions{align-items:center}
  label.btn{display:inline-block; position:relative}   /* the Import button: a label wrapping the file input */
  .file-in{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
  body.touch .card{min-height:200px}

/* utility classes */
.mt-20{margin-top:20px}
.sub-label{text-transform:none; letter-spacing:0}
.narrow{max-width:380px; margin-top:10px}
.btn.btn-wide{padding:13px 18px}
.summary{color:var(--dim); font-size:13px; margin-bottom:10px}
.summary-small{color:var(--dim); font-size:12px}
.dim{color:var(--dim)}

/* site pages (Stage 5) */
.brand{margin:0 0 6px; font-size:14px; color:var(--dim)}
.brand a{color:var(--dim); text-decoration:none}
.page-title{font-size:26px; margin:6px 0 8px; letter-spacing:.2px}
.intro{color:#b9c5d2; margin:0 0 16px; max-width:640px}
.article{margin-top:34px; max-width:680px; color:#b9c5d2}
.article h2{font-size:17px; color:var(--fg); text-transform:none; letter-spacing:0; margin:26px 0 8px}
.article p, .article li{font-size:15px}
.article ul{padding-left:20px}
.article a{color:var(--accent)}
.beta{display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:1px 8px; margin-left:8px; vertical-align:middle}
.card-list{display:grid; gap:12px; margin-top:12px}
.card-link{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-decoration:none; color:var(--fg)}
.card-link:hover{border-color:#44505f}
.card-link b{display:block; font-size:17px; margin-bottom:4px}
.card-link span{color:var(--dim); font-size:14px}
.site-nav{margin-top:34px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; display:flex; flex-wrap:wrap; gap:14px}
.site-nav a{color:var(--dim)}
.legal{max-width:680px; color:#b9c5d2}
.legal h2{font-size:17px; color:var(--fg); margin:24px 0 8px}
.legal p, .legal li{font-size:15px}
.legal ul{padding-left:20px}
.legal a{color:var(--accent)}
/* page headers stack: each line takes the full width (the drill header is a flex row) */
header{flex-wrap:wrap}
.brand, .page-title, .intro{flex:1 1 100%}