:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#142034;background:#f3f5f7}*{box-sizing:border-box}body{margin:0}.app{max-width:860px;margin:auto;min-height:100vh;background:#fff;padding:8px 8px 76px}.top{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px}.brand{font-size:22px;font-weight:900}.muted{color:#667287}.small{font-size:11px}.btn{border:1px solid #d5dce6;background:#fff;border-radius:10px;min-height:40px;padding:8px 11px;font-size:14px;font-weight:700;color:#172338}.btn.primary{background:#1769e0;color:#fff;border-color:#1769e0}.btn.danger{color:#a52b2b}.btn:disabled{opacity:.35}.mini{min-height:36px}.hidden{display:none!important}.weeknav{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:4px;margin:2px 0 7px}.navbtn{font-size:24px;padding:0}.weektitle{text-align:center}.weektitle strong{display:block;font-size:17px;font-weight:900}.weektitle span{display:block;font-size:12px;color:#59667a;font-weight:700;margin-top:1px}
.matrix-wrap{overflow-x:auto;border:1px solid #ccd5e0;border-radius:7px;-webkit-overflow-scrolling:touch;background:#fff}.study-matrix{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:690px;width:max-content;font-size:13px}.study-matrix th,.study-matrix td{border-right:1px solid #d6dde6;border-bottom:1px solid #d6dde6;padding:0}.study-matrix tr:last-child>*{border-bottom:0}.study-matrix tr>*:last-child{border-right:0}.sticky{position:sticky;z-index:4}.slot-col{left:0;width:112px;min-width:112px;max-width:112px;background:#f8fafc;text-align:left}.avail-col{left:112px;width:47px;min-width:47px;max-width:47px;background:#f8fafc;text-align:center;z-index:5}.corner,.corner2{z-index:9!important;background:#f4f7fb!important;color:#123b86;text-align:center;font-weight:900;height:43px}.day-head{width:62px;min-width:62px;height:43px;text-align:center;background:#f8fafc;font-weight:900;vertical-align:top;padding-top:3px!important}.day-head>div:first-child{font-size:12px}.date-num{font-size:11px}.avg-head{width:50px;min-width:50px;text-align:center;background:#f8fafc;font-weight:900}.today-col{background:#eaf3ff!important}.today-tag{display:block;font-size:8px;color:#0e59c5;font-weight:900;line-height:11px}.col-edit{border:0;background:transparent;color:#155ebd;font-size:9px;font-weight:900;padding:0 2px;line-height:11px}.col-edit.done{color:#15783b}.slot-name{font-weight:900;font-size:12px;line-height:14px}.slot-time{font-size:9px;line-height:12px;color:#536176;font-weight:700;white-space:normal}.study-matrix tbody .slot-col{padding:5px 5px}.study-matrix tbody .avail-col{font-size:12px}.data-cell{width:62px;min-width:62px;height:45px;text-align:center;background:#fff}.row-alt .slot-col,.row-alt .avail-col,.row-alt .data-cell,.row-alt .avg-cell{background:#fff8ea}.matrix-input{width:54px;height:32px;border:1px solid #b9c5d4;border-radius:6px;text-align:center;font-size:14px;font-weight:900;color:#0d52b6;padding:2px;background:#fff;outline:none}.matrix-input:focus{border:2px solid #1769e0}.matrix-input.over,.matrix-input.bad{border-color:#c13434;background:#fff0f0}.cell-value{font-size:13px;font-weight:850;color:#172338}.avg-cell{width:50px;min-width:50px;text-align:center;background:#fff;color:#147a2e;font-size:13px}.total-label{height:32px;padding:4px!important;font-size:11px;font-weight:900;color:#123b86;background:#f6f8fb!important}.total-cell{height:32px;width:62px;min-width:62px;text-align:center;background:#f6f8fb;font-size:11px}.entry-foot{display:flex;justify-content:space-between;gap:8px;padding:7px 2px 2px;font-size:12px}.entry-foot b{font-size:14px}.entry-foot span{color:#627087}.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.manage-card{border:1px solid #dbe2ea;border-radius:10px;padding:9px;margin-top:7px}.manage-title{font-weight:900;margin-bottom:3px}.editor-head{display:grid;grid-template-columns:1fr 88px 88px 34px;gap:4px;margin-top:7px;font-size:10px;font-weight:800;color:#647185}.slot-editor{display:grid;grid-template-columns:1fr 88px 88px 34px;gap:4px;align-items:center;margin-top:5px}.slot-editor .input{min-width:0}.slot-preview{grid-column:1/-1;font-size:10px;color:#637085}.input{width:100%;border:1px solid #cfd7e2;border-radius:7px;padding:7px;font-size:13px;font-weight:700}.notice{padding:10px;background:#fff4d8;border-radius:8px;color:#6f5200}.bottom{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);border-top:1px solid #dce2e9;z-index:30}.tabs{max-width:860px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:5px}.tab{border:0;background:transparent;padding:9px;font-size:13px;font-weight:800;color:#667287}.tab.active{color:#1769e0}.section-title{font-weight:900;font-size:17px;margin:10px 0 7px}.weekly-table,.chart-card{border:1px solid #dbe2ea;border-radius:10px;padding:8px;margin-bottom:9px}.weekly-row{display:grid;grid-template-columns:1.3fr .9fr .9fr .7fr;gap:5px;align-items:center;padding:8px 2px;border-bottom:1px solid #e8ecf1;font-size:12px}.weekly-row:last-child{border-bottom:0}.weekly-row small{display:block;color:#687589}.weekly-head{font-size:10px;color:#647185;font-weight:900}.chartbox{height:235px;margin-top:5px}.login{max-width:400px;margin:60px auto}.login .input,.login .btn{margin-top:8px}.login .btn{width:100%}
@media(max-width:480px){.app{padding-left:3px;padding-right:3px}.study-matrix{min-width:661px}.slot-col{left:0;width:104px;min-width:104px;max-width:104px}.avail-col{left:104px;width:44px;min-width:44px;max-width:44px}.day-head,.data-cell,.total-cell{width:59px;min-width:59px}.matrix-input{width:51px}.avg-head,.avg-cell{width:47px;min-width:47px}.slot-name{font-size:11px}.slot-time{font-size:8.5px}.weektitle strong{font-size:16px}.editor-head,.slot-editor{grid-template-columns:1fr 76px 76px 34px}.slot-editor .input{font-size:12px;padding:6px 4px}}
.readonly-badge{display:inline-block;margin-top:2px;padding:2px 6px;border:1px solid #b9c8da;border-radius:999px;font-size:9px;font-weight:900;color:#43546b;background:#f7f9fc}.more-trigger{display:block;margin:7px auto 0;border:0;background:transparent;color:#667287;font-size:11px;font-weight:850;padding:5px 8px}.more-trigger span{font-size:9px;font-weight:700;color:#8a95a6}.more-trigger.armed{color:#1769e0}.more-card{border-top:1px dashed #dce2e9;margin-top:5px;padding-top:7px}.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.more-grid .btn{font-size:11px;padding:7px 4px}.share-card{margin-top:7px;border:1px solid #dbe2ea;border-radius:9px;padding:8px}.share-result{margin-top:7px}.share-result .input{font-size:10px;font-weight:650;margin:5px 0}.success-note{margin-top:7px;padding:7px;border-radius:7px;background:#edf8f0;color:#246139;font-size:11px;font-weight:750}
@media(max-width:480px){.more-grid{grid-template-columns:1fr 1fr}.more-grid #mentorBtn{grid-column:1/-1}}
.target-bar{display:flex;justify-content:center;margin:0 0 5px}.target-control,.target-readonly{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:900;color:#536176}.target-control input{width:55px;height:28px;border:1px solid #b9c5d4;border-radius:6px;text-align:center;font-size:13px;font-weight:900;color:#0d52b6;padding:2px}.target-control input:focus{outline:2px solid #1769e0;outline-offset:0}.target-control input.bad{border-color:#c13434;background:#fff0f0}.target-readonly b{font-size:13px;color:#0d52b6}.today-metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dbe2ea;border-radius:7px;margin-top:5px;overflow:hidden}.today-metrics>div{text-align:center;padding:5px 2px;border-right:1px solid #e1e6ed}.today-metrics>div:last-child{border-right:0}.today-metrics span{display:block;font-size:9px;font-weight:800;color:#667287}.today-metrics b{display:block;font-size:14px;font-weight:950;color:#172338;margin-top:1px}.weekly-row{grid-template-columns:1.25fr .78fr .72fr .82fr .62fr}
@media(max-width:480px){.target-bar{margin-bottom:4px}.today-metrics b{font-size:13px}.today-metrics span{font-size:8.5px}.weekly-row{font-size:11px;grid-template-columns:1.15fr .78fr .7fr .78fr .6fr;gap:3px}}


/* =========================================================
   V2.6 mobile matrix polish
   Functional zones: Reference | Working | Analytics | Summary
   ========================================================= */
.study-matrix{
  font-variant-numeric:tabular-nums;
}
.matrix-wrap{
  overscroll-behavior:contain;
  touch-action:pan-x pan-y pinch-zoom;
}
.study-matrix thead th{
  position:sticky;
  top:0;
  z-index:8;
  box-shadow:0 1px 0 #bcc8d6;
}
.study-matrix thead .corner,
.study-matrix thead .corner2{
  z-index:12!important;
}

/* Reference area */
.study-matrix .slot-col,
.study-matrix .avail-col{
  background:#eef3f8;
}
.study-matrix tbody .slot-col,
.study-matrix tbody .avail-col{
  color:#24364d;
}

/* Working area */
.work-head{
  background:#f8fafc;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
.work-cell{
  background:#ffffff;
}
.row-alt .work-cell{
  background:#f7f9fb;
}
.row-alt .slot-col,
.row-alt .avail-col{
  background:#e9eff5;
}

/* Analytics area */
.analytics-head,
.analytics-cell{
  background:#edf5f0!important;
  color:#215b3b;
}

/* Today is the strongest working-column cue */
.today-col{
  background:#e2efff!important;
}
.study-matrix thead .today-col{
  box-shadow:inset 0 -2px 0 #3374bf,0 1px 0 #bcc8d6;
}

/* Future days remain visible but clearly inactive */
.future-col{
  color:#8b96a5!important;
  background:#f4f6f8!important;
}

/* Summary area */
.study-matrix tfoot th,
.study-matrix tfoot td{
  background:#e7edf4!important;
  color:#1d334d;
  font-weight:900;
}
.study-matrix tfoot tr:first-child>*{
  border-top:2px solid #9aabbe;
}
.study-matrix tfoot .today-col{
  background:#d8e9fb!important;
}
.study-matrix tfoot .summary-avg{
  background:#dfece4!important;
  color:#184c32;
}

.col-edit{
  display:block;
  margin:0 auto;
  border:1px solid #b8c7d8;
  border-radius:999px;
  background:#fff;
  color:#155ebd;
  font-size:8px;
  font-weight:900;
  padding:0 4px;
  line-height:13px;
  min-height:13px;
}
.col-edit.done{
  color:#156739;
  border-color:#a8c8b2;
  background:#f4fbf6;
}
.cell-value,
.matrix-input,
.total-cell,
.avg-cell,
.avail-col{
  font-variant-numeric:tabular-nums;
}

@media(max-width:520px){
  .app{padding-left:2px;padding-right:2px}
  .matrix-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:5px;
  }
  .study-matrix{
    width:100%;
    min-width:340px;
    table-layout:fixed;
    font-size:10px;
  }
  .slot-col{
    left:0;
    width:72px;
    min-width:72px;
    max-width:72px;
  }
  .avail-col{
    left:72px;
    width:34px;
    min-width:34px;
    max-width:34px;
  }
  .day-head,
  .data-cell,
  .total-cell{
    width:auto;
    min-width:29px;
  }
  .avg-head,
  .avg-cell{
    width:31px;
    min-width:31px;
  }
  .corner,.corner2,.day-head{
    height:38px;
  }
  .day-head{
    padding-top:2px!important;
  }
  .day-head>div:first-child{
    font-size:9px;
    line-height:11px;
  }
  .date-num{
    font-size:8px;
    line-height:10px;
  }
  .today-tag{
    font-size:6.5px;
    line-height:9px;
  }
  .slot-name{
    font-size:9.5px;
    line-height:11px;
  }
  .slot-time{
    font-size:7px;
    line-height:9px;
  }
  .study-matrix tbody .slot-col{
    padding:3px 3px;
  }
  .study-matrix tbody .avail-col{
    font-size:9px;
  }
  .data-cell{
    height:39px;
  }
  .matrix-input{
    width:27px;
    height:29px;
    border-radius:4px;
    font-size:9px;
    padding:1px 0;
  }
  .cell-value{
    font-size:9.5px;
  }
  .avg-cell{
    font-size:9px;
  }
  .total-label,
  .total-cell{
    height:29px;
    font-size:8.5px;
  }
  .col-edit{
    font-size:6.5px;
    padding:0 3px;
    line-height:10px;
    min-height:10px;
  }
}

/* On very narrow phones keep fit-to-width as the priority. */
@media(max-width:370px){
  .study-matrix{min-width:328px}
  .slot-col{width:68px;min-width:68px;max-width:68px}
  .avail-col{left:68px;width:32px;min-width:32px;max-width:32px}
  .avg-head,.avg-cell{width:29px;min-width:29px}
  .matrix-input{width:25px;font-size:8.5px}
}


/* V2.7 FINAL — horizontal reading guides in working area.
   Structural zones retain their own colours. */
.study-matrix tbody tr:nth-child(odd) .work-cell:not(.today-col):not(.future-col){
  background:#ffffff!important;
}
.study-matrix tbody tr:nth-child(even) .work-cell:not(.today-col):not(.future-col){
  background:#edf3f8!important;
}
.study-matrix tbody tr:nth-child(odd) .slot-col,
.study-matrix tbody tr:nth-child(odd) .avail-col{
  background:#eef3f8!important;
}
.study-matrix tbody tr:nth-child(even) .slot-col,
.study-matrix tbody tr:nth-child(even) .avail-col{
  background:#e2eaf2!important;
}
/* Preserve the semantic Today / future / analytics cues over zebra striping. */
.study-matrix tbody .today-col{
  background:#e2efff!important;
}
.study-matrix tbody .future-col{
  background:#f4f6f8!important;
}
.study-matrix tbody .analytics-cell{
  background:#edf5f0!important;
}


/* =========================================================
   V2.8 RESEARCHED FINAL
   Based on accessible dense-table principles:
   restrained striping, strong functional zones, high contrast,
   tabular numerals, and color never used as the sole signal.
   ========================================================= */

:root{
  --sl-ink:#10243e;
  --sl-muted:#5b6b7d;
  --sl-grid:#cbd5e1;

  --sl-header:#dbe5ef;
  --sl-reference-odd:#edf2f7;
  --sl-reference-even:#e3eaf2;

  --sl-work-odd:#ffffff;
  --sl-work-even:#f1f5f9;

  --sl-today:#dbeafe;
  --sl-today-strong:#bfdbfe;

  --sl-future:#f5f7f9;

  --sl-analytics:#e8f3ec;
  --sl-analytics-ink:#184d32;

  --sl-summary:#dce6f0;
  --sl-summary-strong:#cfddea;
}

/* Keep the table quiet: data is primary, borders secondary. */
.study-matrix{
  color:var(--sl-ink);
  font-variant-numeric:tabular-nums;
  border-color:var(--sl-grid)!important;
}
.study-matrix th,
.study-matrix td{
  border-color:var(--sl-grid)!important;
}

/* Header band */
.study-matrix thead th{
  background:var(--sl-header)!important;
  color:var(--sl-ink)!important;
  font-weight:900;
}

/* Reference zone: Slot + Available */
.study-matrix tbody tr:nth-child(odd) .slot-col,
.study-matrix tbody tr:nth-child(odd) .avail-col{
  background:var(--sl-reference-odd)!important;
}
.study-matrix tbody tr:nth-child(even) .slot-col,
.study-matrix tbody tr:nth-child(even) .avail-col{
  background:var(--sl-reference-even)!important;
}
.study-matrix tbody .slot-col,
.study-matrix tbody .avail-col{
  color:var(--sl-ink)!important;
}

/* Working zone: restrained zebra striping */
.study-matrix tbody tr:nth-child(odd) .work-cell:not(.today-col):not(.future-col){
  background:var(--sl-work-odd)!important;
}
.study-matrix tbody tr:nth-child(even) .work-cell:not(.today-col):not(.future-col){
  background:var(--sl-work-even)!important;
}

/* Today is identified by background + header underline + Today text,
   so color is not the only cue. */
.study-matrix tbody .today-col{
  background:var(--sl-today)!important;
}
.study-matrix thead .today-col{
  background:var(--sl-today-strong)!important;
  box-shadow:inset 0 -3px 0 #2563a6,0 1px 0 var(--sl-grid)!important;
}

/* Future zone: muted, but still legible */
.study-matrix tbody .future-col,
.study-matrix thead .future-col{
  background:var(--sl-future)!important;
  color:#66758a!important;
}

/* Analytics zone: visually calculated, not editable */
.study-matrix .analytics-head,
.study-matrix tbody .analytics-cell{
  background:var(--sl-analytics)!important;
  color:var(--sl-analytics-ink)!important;
}

/* Do not imply that every percentage is "good" merely by making it bright green. */
.study-matrix tbody .avg-cell b{
  color:inherit!important;
}

/* Summary band */
.study-matrix tfoot th,
.study-matrix tfoot td{
  background:var(--sl-summary)!important;
  color:var(--sl-ink)!important;
  font-weight:900!important;
}
.study-matrix tfoot tr:first-child > *{
  border-top:2px solid #8fa3b8!important;
}
.study-matrix tfoot tr:last-child > *{
  background:var(--sl-summary-strong)!important;
}
.study-matrix tfoot .today-col{
  background:var(--sl-today-strong)!important;
}
.study-matrix tfoot .summary-avg{
  background:#d7e8dd!important;
  color:var(--sl-analytics-ink)!important;
}

/* Numeric comparison */
.matrix-input,.cell-value,.avail-col,.total-cell,.avg-cell,
.target-input,.metric-value{
  font-variant-numeric:tabular-nums;
}

/* Blank state is visibly quieter than an explicit 0:00. */
.cell-value{
  color:var(--sl-ink);
}
.matrix-input::placeholder{
  color:#8794a5;
  opacity:1;
}

/* Keep edit affordance compact and textual; double tap reveals it. */
.col-edit{
  color:#174f91!important;
  background:#fff!important;
  border-color:#9fb3c8!important;
}
.col-edit.done{
  color:#155c38!important;
  background:#f4faf6!important;
  border-color:#8fb39b!important;
}

/* Dense numerical tables benefit from smaller mobile text,
   but preserve legibility and zoom. */
@media(max-width:520px){
  .study-matrix{
    line-height:1.12;
  }
  .slot-name,.matrix-input,.cell-value,.total-cell,.avg-cell,.avail-col{
    font-weight:800;
  }
}