:root{
  --paper: #F7F6F2;
  --card: #FFFFFF;
  --ink: #16324F;
  --ink-soft: #5A6980;
  --rule: #E3E1DB;
  --ochre: #4FA79B;
  --brick: #D6432E;
  --brick-soft: #E8877A;
  --green-band: #3F9E82;
  --amber-band: #C99A3E;
  --red-band: #D6432E;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  min-height:100vh;
  background:
    repeating-linear-gradient(180deg, transparent, transparent 37px, var(--rule) 38px),
    var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  -webkit-font-smoothing: antialiased;
}
.wrap{max-width:520px; margin:0 auto; padding:24px 16px 60px;}

/* header / breadcrumb */
.top{margin-bottom:18px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ochre);
  margin:0 0 6px;
}
h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:26px;
  line-height:1.1;
  margin:0 0 4px;
  color:var(--ink);
}
h1 em{font-style:italic; font-weight:400; color:var(--ochre);}

.crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:10px;
}
.crumbs button{
  background:none; border:none; padding:2px 4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ink-soft);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crumbs .current{color:var(--ink); font-weight:600;}
.crumbs .sep{color:var(--rule);}

/* card */
.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:2px;
  box-shadow: 0 1px 0 var(--rule), 0 12px 24px -18px rgba(22,50,79,0.30);
  padding:18px 18px 16px;
  margin-bottom:16px;
}

.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.section-label::after{content:""; flex:1; height:1px; background:var(--rule);}

/* picker list */
.picker-list{list-style:none; margin:0; padding:0;}
.picker-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 4px;
  border-bottom:1px solid var(--rule);
  cursor:pointer;
}
.picker-row:last-child{border-bottom:none;}
.picker-row:active{background:var(--paper);}
.picker-row .name{font-size:16px; color:var(--ink);}
.picker-row .arrow{color:var(--ink-soft); font-family:'IBM Plex Mono', monospace;}
.picker-empty{
  padding:18px 4px;
  color:var(--ink-soft);
  font-size:14px;
  font-style:italic;
}

/* student list: drag handle + delete */
.list-toolbar{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:-4px 0 4px;
}
.list-toolbar .btn{padding:6px 12px; font-size:12.5px;}
.student-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 2px;
  border-bottom:1px solid var(--rule);
  background:var(--card);
  touch-action:pan-y;
}
.student-row:last-child{border-bottom:none;}
.student-row.dragging{
  opacity:0.5;
}
.student-row .handle{
  color:var(--ink-soft);
  font-size:18px;
  line-height:1;
  padding:6px 8px;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.student-row .handle:active{cursor:grabbing;}
.student-row .name{
  flex:1;
  font-size:16px;
  color:var(--ink);
  cursor:pointer;
  padding:4px 0;
}
.student-row .arrow{color:var(--ink-soft); font-family:'IBM Plex Mono', monospace;}
.student-row .sdel{
  background:none; border:none; color:var(--ink-soft);
  font-size:12px; cursor:pointer; padding:6px 4px;
  text-decoration:underline; white-space:nowrap;
}

/* add-new row */
.add-row{
  display:flex;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--rule);
}
.add-row input{
  flex:1;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:15px;
  padding:10px 12px;
  border:1px solid var(--rule);
  border-radius:3px;
  background:#fff;
  color:var(--ink);
}
.add-row input:focus{outline:2px solid var(--ochre); outline-offset:1px;}

button{font-family:'IBM Plex Sans', sans-serif;}
.btn{
  font-size:14px;
  font-weight:500;
  padding:10px 16px;
  border-radius:20px;
  border:1px solid var(--ochre);
  background:var(--ochre);
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{opacity:.92;}
.btn.secondary{
  background:transparent;
  color:var(--ink-soft);
  border-color:var(--rule);
}
.btn.danger{
  background:transparent;
  color:var(--brick);
  border-color:var(--brick-soft);
}
.btn.block{width:100%; text-align:center;}

/* record history */
.record-row{
  padding:12px 4px;
  border-bottom:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.record-row:last-child{border-bottom:none;}
.record-row .rdate{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:3px;
}
.record-row .rmeta{font-size:14px; color:var(--ink);}
.record-row .rlevel{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:3px 9px;
  border-radius:20px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.record-row .rdel{
  background:none; border:none; color:var(--ink-soft);
  font-size:12px; cursor:pointer; padding:2px 4px;
  text-decoration:underline;
}

/* forms shared with calculator */
.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 2px;
  border-bottom:1px dashed var(--rule);
}
.field-row:last-child{border-bottom:none;}
.field-row label{font-size:14.5px; color:var(--ink); flex:1;}
.field-row .hint{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
.field-row input[type=text],
.field-row input[type=number],
.field-row input[type=date]{
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  font-weight:500;
  text-align:right;
  width:110px;
  padding:7px 9px;
  border:1px solid var(--rule);
  border-radius:3px;
  background:#fff;
  color:var(--ink);
}
.field-row input[type=text]{width:150px; text-align:left;}
.field-row input[type=date]{width:150px; text-align:left;}
input[readonly]{background:var(--rule); color:var(--ink-soft); cursor:not-allowed;}

.time-inputs{display:flex; align-items:center; gap:4px;}
.time-inputs input{width:52px !important;}
.time-inputs span{font-family:'IBM Plex Mono', monospace; color:var(--ink-soft); font-size:14px;}

input:focus{outline:2px solid var(--ochre); outline-offset:1px;}

textarea{
  width:100%;
  min-height:80px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  line-height:1.6;
  padding:10px 11px;
  border:1px solid var(--rule);
  border-radius:3px;
  background:#fff;
  color:var(--ink);
  resize:vertical;
  margin-top:8px;
}
textarea::placeholder{color:#a9a190; font-style:italic;}
textarea:focus{outline:2px solid var(--ochre); outline-offset:1px;}

.stopwatch{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 2px 4px; margin-top:4px;
  border-top:1px dashed var(--rule);
}
.sw-display{
  font-family:'IBM Plex Mono', monospace;
  font-size:26px; font-weight:600; letter-spacing:.02em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.sw-btns{display:flex; gap:8px;}
.sw-btn{
  font-size:13px; font-weight:500; padding:9px 16px;
  border-radius:20px; border:1px solid var(--rule);
  background:transparent; color:var(--ink-soft); cursor:pointer;
}
.sw-btn:hover{border-color:var(--ink-soft);}
.sw-btn.primary{background:var(--ochre); border-color:var(--ochre); color:#fff; min-width:72px;}
.sw-btn.primary.running{background:var(--brick); border-color:var(--brick);}

.headline{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px;}
.accuracy-num{font-family:'Fraunces', serif; font-weight:700; font-size:52px; line-height:1; color:var(--ink);}
.accuracy-num sup{font-size:20px; font-weight:600; color:var(--ink-soft);}
.level-tag{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 10px; border-radius:20px;
  border:1px solid currentColor; white-space:nowrap; margin-bottom:6px;
}

.gauge{
  position:relative; height:14px; border-radius:8px; display:flex;
  margin-bottom:6px; box-shadow: inset 0 0 0 1px var(--rule);
}
.gauge .band{height:100%;}
.band-frustration{width:40%; background:var(--red-band); border-radius:8px 0 0 8px;}
.band-instructional{width:15%; background:var(--amber-band);}
.band-independent{width:45%; background:var(--green-band); border-radius:0 8px 8px 0;}
.gauge-marker{position:absolute; top:-5px; width:2px; height:24px; background:var(--ink); transition:left .25s ease;}
.gauge-marker::after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--ink);
}
.gauge-labels{
  display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px;
}

.stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden;
}
.stat{background:var(--card); padding:12px 13px;}
.stat .k{font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 4px;}
.stat .v{font-family:'IBM Plex Mono', monospace; font-size:19px; font-weight:600; color:var(--ink);}
.stat .v.dim{color:#a9a190; font-weight:400; font-size:15px;}

.actions-row{display:flex; gap:10px; margin-top:14px;}
.actions-row .btn{flex:1;}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:13px; padding:10px 18px;
  border-radius:20px; opacity:0; pointer-events:none; transition:opacity .2s ease;
  font-family:'IBM Plex Sans', sans-serif; z-index:10;
}
.toast.show{opacity:1;}

.loading{padding:18px 4px; color:var(--ink-soft); font-size:14px;}