@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

  :root{
    --bg:#ffffff;
    --surface: rgba(255,255,255,0.72);
    --surface-solid:#ffffff;
    --surface-soft:#f8f8fc;
    --border: rgba(30,30,45,0.08);
    --border-soft: rgba(30,30,45,0.05);
    --ink:#1f2333;
    --ink-dim:#8388a0;
    --lavender:#a78bfa;
    --lavender-deep:#8b5cf6;
    --mint:#6ee7c9;
    --peach:#ffc4a3;
    --sky:#8ecbff;
    --pink:#ffb3d1;
    --ok:#34c98f;
    --warn:#ff8a8a;
    --danger:#e0576b;
    --danger-soft:#fff0f0;
    --mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;
    --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-lg:22px;
    --radius:14px;
    --radius-sm:10px;
    --radius-btn:10px;
    --radius-pill:999px;
    --btn-pad-y:9px;
    --btn-pad-x:16px;
    --btn-font:13px;
    --text-xs:11px;
    --text-sm:12px;
    --text-md:13px;
    --text-lg:15px;
    --text-xl:18px;
    --control-h:38px;
    --label-weight:700;
    --btn-grad: linear-gradient(120deg, var(--lavender-deep), var(--sky));
    --btn-shadow: 0 4px 14px rgba(139,92,246,.22);
    --btn-shadow-hover: 0 8px 20px rgba(139,92,246,.30);
    --shadow-sm: 0 2px 10px rgba(30,30,60,0.05);
    --shadow-md: 0 10px 34px rgba(30,30,60,0.08);
    --shadow-lg: 0 18px 50px rgba(30,30,60,0.10);
  }
  *{box-sizing:border-box;}
  html, body{ min-height:100%; }
  body.is-searching{ cursor:progress; }
  body.is-searching .page-frame{ cursor:progress; }
  body.is-searching .tabs,
  body.is-searching header,
  body.is-searching main button,
  body.is-searching main select,
  body.is-searching main input,
  body.is-searching main textarea,
  body.is-searching main a,
  body.is-searching .cal-wrap{
    pointer-events:none;
  }
  body.is-searching .tab-btn,
  body.is-searching main button,
  body.is-searching main select,
  body.is-searching main input,
  body.is-searching main textarea{
    opacity:.48;
  }
  body.is-searching .generate-progress,
  body.is-searching .generate-progress *{
    pointer-events:none;
    opacity:1 !important;
  }
  body.is-searching .search-live-overlay,
  body.is-searching .search-live-overlay *{
    pointer-events:auto;
    opacity:1 !important;
    cursor:progress;
  }
  body.is-searching .search-live-overlay #searchLiveCancelBtn{
    cursor:pointer;
  }
  body{
    margin:0; color:var(--ink);
    font-family:var(--serif);
    min-height:100vh;
    background:
      radial-gradient(circle at 8% 8%, rgba(167,139,250,.20), transparent 32%),
      radial-gradient(circle at 92% 12%, rgba(110,231,201,.20), transparent 34%),
      radial-gradient(circle at 85% 88%, rgba(255,196,163,.18), transparent 32%),
      radial-gradient(circle at 12% 90%, rgba(142,203,255,.18), transparent 34%),
      #ffffff;
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .page-frame{ max-width:1240px; margin:0 auto; }

  header{
    padding:36px 32px 20px 32px; text-align:left;
    display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px;
  }
  .viewer-gate-bar{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    max-width:420px; margin-left:auto;
  }
  body.is-editor-unlocked .viewer-gate-bar #viewerGateStatus{ color:var(--ink-dim); }
  .tab-btn.is-viewer-locked{
    opacity:.42; cursor:not-allowed;
  }
  header h1.brand,
  header .brand{
    display:flex; align-items:center; gap:14px;
    margin:0 0 8px 0; font-family:var(--serif);
  }
  .brand-mark{
    display:block; width:48px; height:48px; flex:0 0 48px;
    filter: drop-shadow(0 6px 14px rgba(139,92,246,.28))
            drop-shadow(0 4px 10px rgba(20,184,166,.18));
  }
  .brand-word{
    display:flex; flex-direction:column; line-height:1;
    gap:5px;
  }
  .brand-name{
    font-weight:800; font-size:30px; letter-spacing:-.7px;
    background: linear-gradient(110deg,
      #8b5cf6 0%,
      #c084fc 22%,
      #eab308 48%,
      #22c55e 74%,
      #14b8a6 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .brand-sub{
    font-weight:700; font-size:13px; letter-spacing:.28em; text-transform:uppercase;
    background: linear-gradient(90deg, #8b5cf6 0%, #ca8a04 40%, #15803d 70%, #0f766e 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  header h1 .accent{
    background:linear-gradient(120deg, var(--lavender-deep), var(--sky));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  header h1 .smear{
    background: linear-gradient(90deg, #8b5cf6 0%, #eab308 40%, #22c55e 70%, #14b8a6 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  header p{ margin:0; color:var(--ink-dim); font-size:14px; font-weight:500; max-width:640px; line-height:1.5;}
  header p.sub2{ display:none; }

  nav.tabs{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin:0 32px 18px 32px; flex-wrap:wrap;
  }
  .tabs-left,
  .tabs-right{
    display:flex; gap:6px; padding:6px; flex-wrap:wrap; align-items:center;
    background:var(--surface); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:var(--radius-pill); box-shadow:var(--shadow-sm);
  }
  .tabs-left button,
  .tabs-right .tab-btn{
    background:transparent; border:none; color:var(--ink-dim);
    padding:10px 16px; font-size:13px; letter-spacing:.1px; cursor:pointer;
    font-family:var(--serif); font-weight:600; border-radius:var(--radius-pill);
    transition:color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
    box-shadow:none;
  }
  .tabs-left button:hover,
  .tabs-right .tab-btn:hover{
    color:var(--ink); background:rgba(30,30,60,0.04); transform:none;
  }
  .tabs-left button.active,
  .tabs-right .tab-btn.active{
    color:#fff;
    background:var(--btn-grad);
    box-shadow:var(--btn-shadow);
  }
  .tabs-right .tab-btn.is-locked,
  .tabs-right .tab-btn.is-viewer-locked,
  .tab-btn-timetable.is-locked,
  .tab-btn-oneone.is-locked,
  .tab-btn-rpiano.is-locked,
  .tab-btn-reports.is-locked{
    opacity:.42; cursor:not-allowed; transform:none; box-shadow:none;
  }
  .tabs-right .tab-btn.is-locked:hover,
  .tabs-right .tab-btn.is-viewer-locked:hover,
  .tab-btn-timetable.is-locked:hover,
  .tab-btn-oneone.is-locked:hover,
  .tab-btn-rpiano.is-locked:hover,
  .tab-btn-reports.is-locked:hover{
    transform:none; color:var(--ink-dim); background:transparent;
  }

  .variant-picker{ width:100%; }
  .variant-picker select{
    flex:1 1 220px; min-width:180px; max-width:360px;
  }
  .variant-preview{
    display:flex; flex-wrap:wrap; gap:8px;
    margin:0 0 12px 0;
  }
  .variant-preview-stat{
    display:flex; align-items:baseline; gap:8px;
    padding:6px 12px; border-radius:12px;
    background:var(--surface-soft); border:1px solid var(--border);
    font-size:12.5px; white-space:nowrap;
  }
  .variant-preview-k{ color:var(--ink-dim); font-weight:600; }
  .variant-preview-v{ font-weight:800; font-variant-numeric:tabular-nums; }
  .variant-preview-left{ color:var(--ink-dim); }
  .variant-preview-stat.is-ok .variant-preview-left{ color:#15803d; }
  .variant-preview-stat.is-warn .variant-preview-left{ color:#b45309; }
  .teacher-swap-suggest{
    margin:0 0 12px 0; padding:10px 14px; border-radius:12px;
    background:var(--surface-soft); border:1px solid var(--border);
    font-size:13px; line-height:1.45;
  }
  .teacher-swap-suggest-title{
    margin:0 0 6px 0; font-size:12px; font-weight:800; color:var(--ink-dim);
    letter-spacing:.02em; text-transform:uppercase;
  }
  .teacher-swap-suggest ul{ margin:0; padding-left:18px; }
  .teacher-swap-suggest li{ margin:0 0 4px 0; }

  .attempts-field{
    display:flex; align-items:center; gap:8px;
    font-size:var(--text-sm); font-weight:var(--label-weight); color:var(--ink-dim); white-space:nowrap;
    font-family:var(--serif);
  }
  .attempts-field input,
  .attempts-field select{
    width:72px; min-height:var(--control-h); padding:0 10px; border-radius:var(--radius-btn); border:1px solid var(--border);
    background:var(--surface-solid); font-family:var(--serif); font-size:var(--text-md); font-weight:600;
    color:var(--ink); box-sizing:border-box;
  }
  .attempts-field select{
    width:auto; min-width:160px; max-width:240px; padding-right:28px;
  }
  .attempts-field input:disabled,
  .attempts-field select:disabled{ opacity:.5; }
  .synth-switch{
    position:relative; display:inline-flex; align-items:center; cursor:pointer;
    user-select:none; -webkit-user-select:none; margin:0;
    font-family:var(--serif);
  }
  .synth-switch-input{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .synth-switch-face{
    display:inline-flex; align-items:center; gap:8px;
    height:var(--control-h); padding:0 12px;
    border-radius:var(--radius-btn);
    background:var(--surface-solid);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
  }
  .synth-switch-end{
    font-size:var(--text-sm); font-weight:600; letter-spacing:.02em;
    font-family:var(--serif); color:var(--ink-dim); line-height:1;
  }
  .synth-switch-input:not(:checked) + .synth-switch-face .synth-switch-end.is-off{
    color:#0f9f7c;
  }
  .synth-switch-input:checked + .synth-switch-face .synth-switch-end.is-on{
    color:var(--lavender-deep);
  }
  .synth-switch-well{
    position:relative; width:34px; height:18px; border-radius:999px; flex:0 0 34px;
    background:
      linear-gradient(180deg, #efeafc 0%, #f7f8fc 100%);
    box-shadow:inset 0 1px 3px rgba(31,35,51,.12);
    border:1px solid rgba(139,92,246,.2);
  }
  .synth-switch-knob{
    position:absolute; top:1px; left:1px;
    width:14px; height:14px; border-radius:50%;
    background:
      radial-gradient(circle at 32% 28%, #ffffff 0%, #d8fff3 40%, #6ee7c9 100%);
    box-shadow:0 1px 3px rgba(45,212,191,.28), inset 0 1px 0 #fff;
    transition:left .16s ease, background .16s ease, box-shadow .16s ease;
  }
  .synth-switch-input:checked + .synth-switch-face .synth-switch-knob{
    left:17px;
    background:
      radial-gradient(circle at 32% 28%, #ffffff 0%, #ece8ff 40%, #a78bfa 100%);
    box-shadow:0 1px 3px rgba(139,92,246,.3), inset 0 1px 0 #fff;
  }
  .synth-switch-input:focus-visible + .synth-switch-face{
    outline:2px solid var(--lavender);
    outline-offset:2px;
  }
  .synth-switch:has(.synth-switch-input:disabled){
    opacity:.45; cursor:not-allowed;
  }
  @media (prefers-reduced-motion: reduce){
    .synth-switch-knob{ transition:none; }
  }
  .generate-progress{
    display:flex; align-items:center; gap:12px; margin:0 0 12px 0; width:100%;
  }
  .generate-progress[hidden]{ display:none !important; }
  .generate-progress-track{
    flex:1; min-width:120px; height:8px; border-radius:999px;
    background:var(--surface-soft);
    overflow:hidden;
    border:1px solid var(--border);
  }
  .generate-progress-fill{
    height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg, #eab308, #14b8a6, #22c55e, #eab308);
    background-size:200% 100%;
    animation: generate-progress-flow 2.4s linear infinite;
    transition:width .12s ease-out;
  }
  .generate-progress-label{
    font-size:12px; font-weight:600; white-space:nowrap;
    font-variant-numeric:tabular-nums; min-width:9em;
    color:var(--ink-dim);
  }
  @keyframes generate-progress-flow{
    0%{ background-position:0% 50%; }
    100%{ background-position:100% 50%; }
  }
  @media (prefers-reduced-motion: reduce){
    .generate-progress-fill{ animation:none; background-position:0% 50%; }
  }

  .dataio-bar{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .oneone-matrix-wrap{
    max-height:min(70vh, 640px); overflow:auto;
  }
  .matrix-fold{
    width:100%; margin:10px 0 0 0;
  }
  .matrix-fold-toggle{
    display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
    list-style:none; cursor:pointer;
    background:var(--surface-soft); border:1px solid var(--border); border-radius:12px;
    color:var(--ink-dim); font-family:var(--serif); font-size:12.5px; font-weight:700;
    padding:8px 12px; margin:0;
  }
  .matrix-fold-toggle::-webkit-details-marker{ display:none; }
  .matrix-fold-toggle::before{
    content:"▸"; font-size:11px; transition:transform .15s ease;
  }
  .matrix-fold[open] > .matrix-fold-toggle::before{ transform:rotate(90deg); }
  .matrix-fold[open] > .matrix-fold-toggle{
    border-radius:12px 12px 0 0; margin-bottom:0;
  }
  .matrix-fold[open] .oneone-matrix-wrap{
    border-top-left-radius:0; border-top-right-radius:0;
  }
  table.oneone-matrix{
    border-collapse:separate; border-spacing:0; font-size:12px;
    width:max-content; min-width:100%;
  }
  table.oneone-matrix th, table.oneone-matrix td{
    padding:5px 6px; border-bottom:1px solid var(--border); white-space:nowrap;
    background:var(--surface-solid); vertical-align:middle;
  }
  table.oneone-matrix thead th{
    position:sticky; top:0; z-index:2; font-size:11px; font-weight:700;
    background:var(--surface-soft); box-shadow:0 1px 0 var(--border);
  }
  table.oneone-matrix th.is-sticky, table.oneone-matrix td.is-sticky{
    position:sticky; left:0; z-index:1; min-width:168px; max-width:168px;
    background:var(--surface-solid); box-shadow:2px 0 0 var(--border);
  }
  table.oneone-matrix thead th.is-sticky{
    z-index:4; background:var(--surface-soft);
  }
  table.oneone-matrix th.oneone-roomcol, table.oneone-matrix td.oneone-roomcol{
    position:sticky; left:168px; z-index:1; min-width:92px; width:92px; max-width:100px;
    text-align:center; padding:4px 4px;
    background:var(--surface-solid); box-shadow:2px 0 0 var(--border);
  }
  table.oneone-matrix thead th.oneone-roomcol{
    z-index:4; background:var(--surface-soft);
  }
  table.oneone-matrix td.is-sticky .oneone-sid{
    font-family:var(--mono); font-size:10px; color:var(--ink-dim);
  }
  table.oneone-matrix td.is-sticky .oneone-sname{
    font-weight:600; overflow:hidden; text-overflow:ellipsis;
  }
  table.oneone-matrix tr.is-orphan td.is-sticky{
    background:rgba(220, 80, 60, .06);
  }
  table.oneone-matrix .oneone-missing{
    color:#a11; font-size:10px; margin-top:4px; line-height:1.25;
  }
  table.oneone-matrix .oneone-orphan-remove{
    margin-top:6px;
  }
  table.oneone-matrix thead th.oneone-tcol,
  table.oneone-matrix td.oneone-tcol{
    min-width:96px; width:96px; text-align:center; padding:4px 4px;
  }
  table.oneone-matrix thead th.oneone-tcol{
    white-space:normal; vertical-align:bottom;
  }
  table.oneone-matrix .oneone-tname{
    font-size:11px; font-weight:700; margin:0 0 4px 0;
    overflow:hidden; text-overflow:ellipsis;
  }
  table.oneone-matrix select.oneone-col-room{
    display:block; width:100%; max-width:88px; margin:0 auto;
    padding:2px 2px; font-size:10px; font-family:var(--sans);
    color:var(--ink-dim); background:var(--surface-solid);
    border:1px solid var(--border); border-radius:6px;
  }
  table.oneone-matrix input.oneone-cell{
    width:50px; padding:5px 2px; text-align:center; font-weight:700;
    font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:13px;
    color:var(--ink); background:var(--surface-soft);
    border:1px solid var(--border); border-radius:8px;
    appearance:textfield; -moz-appearance:textfield;
  }
  table.oneone-matrix input.oneone-cell::-webkit-outer-spin-button,
  table.oneone-matrix input.oneone-cell::-webkit-inner-spin-button{
    appearance:none; -webkit-appearance:none; margin:0;
  }
  table.oneone-matrix td.is-filled input.oneone-cell{
    background:#fef3c7; border-color:#eab308; color:#3b2a00;
  }
  table.oneone-matrix.is-rpiano td.is-filled input.oneone-cell{
    background:#ccfbf1; border-color:#14b8a6; color:#042f2e;
  }
  table.oneone-matrix tr.is-hidden{ display:none; }
  .oneone-student-list{
    max-height:320px; overflow:auto; border:1px solid var(--border); border-radius:12px;
    background:var(--surface-soft); padding:6px 0;
  }
  .oneone-student-row{
    display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:13px;
  }
  .oneone-student-row:hover{ background:rgba(234,179,8,.12); }
  .oneone-student-row .meta{ color:var(--ink-dim); font-size:11px; white-space:nowrap; }
  .notice-banner{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    margin:10px 0 12px 0; padding:10px 12px;
    border:1px solid var(--border); border-radius:12px; background:var(--surface-soft);
  }
  .notice-banner .fixed-pins-count{
    margin:0; flex:1; min-width:220px; font-size:12px; color:var(--ink); line-height:1.4;
  }
  .cloud-form{ display:flex; flex-direction:column; gap:14px; max-width:640px; }
  .cloud-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--serif); }
  .cloud-field span,
  .cloud-field > span{
    font-size:var(--text-sm); font-weight:var(--label-weight); letter-spacing:.02em;
    text-transform:none; color:var(--ink-dim);
  }
  .cloud-input{
    width:100%; min-height:var(--control-h); padding:0 12px; border-radius:var(--radius-btn);
    border:1px solid var(--border); box-sizing:border-box;
    background:var(--surface-solid); font-family:var(--serif); font-size:var(--text-md); color:var(--ink);
  }
  .cloud-input:focus{ outline:none; border-color:var(--lavender); box-shadow:0 0 0 2px rgba(167,139,250,.2); }
  #cloudStatus, #sheetsStatus, #autosaveStatus, #publishedStateStatus, #autosaveRestoreNote{
    margin:0; min-height:1.4em; font-size:var(--text-sm); font-family:var(--serif); color:var(--ink-dim); line-height:1.45;
  }
  .dataio-hint{
    color:var(--ink-dim); font-size:var(--text-sm); margin:0 0 12px 0; line-height:1.55;
    font-weight:500; font-family:var(--serif);
  }
  .modal-overlay{
    position:fixed; inset:0; background:rgba(20,20,35,.45); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:10000; padding:24px;
  }
  .modal-overlay.is-open{ display:flex; }
  .modal-box{
    background:var(--surface-solid); border-radius:var(--radius-lg); box-shadow:0 24px 60px rgba(20,20,40,.35);
    padding:24px; width:100%; max-width:560px; max-height:85vh; overflow:auto;
    font-family:var(--serif); font-size:var(--text-md); color:var(--ink);
  }
  .modal-box.search-log-box{ max-width:720px; }
  .modal-box.search-live-box{ max-width:560px; }
  .modal-box h3{
    font-family:var(--serif); font-weight:700; font-size:var(--text-lg);
    color:var(--ink); margin:0 0 10px 0; line-height:1.3;
  }
  .modal-box .dataio-hint,
  .modal-box p{
    font-size:var(--text-sm); line-height:1.55; color:var(--ink-dim);
  }
  .modal-box label,
  .modal-box .cloud-field span{
    font-size:var(--text-sm); font-weight:var(--label-weight); color:var(--ink-dim);
  }
  .modal-box .cloud-input,
  .modal-box input[type="password"],
  .modal-box input[type="text"],
  .modal-box select{
    min-height:var(--control-h); font-size:var(--text-md); font-family:var(--serif);
    border-radius:var(--radius-btn);
  }
  .modal-box .btn{ font-size:var(--text-md); }
  button.btn:disabled,
  .btn:disabled{
    opacity:.45; cursor:not-allowed; box-shadow:none; transform:none;
  }

  .search-live-phases{
    display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px 0;
  }
  .search-live-phase{
    flex:1 1 auto; min-width:72px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:8px 6px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface-soft);
    color:var(--muted); font-size:11px; font-weight:700; text-align:center;
    transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
  }
  .search-live-phase-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:999px;
    background:var(--surface); border:1px solid var(--border);
    font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
  }
  .search-live-phase-label{ line-height:1.2; }
  .search-live-phase.is-active{
    color:var(--ink); border-color:var(--lavender-deep);
    background:rgba(167,139,250,.12); box-shadow:0 0 0 1px rgba(167,139,250,.25);
  }
  .search-live-phase.is-active .search-live-phase-num{
    background:var(--lavender-deep); border-color:var(--lavender-deep); color:#fff;
  }
  .search-live-phase.is-done{
    color:var(--ok); border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.08);
  }
  .search-live-phase.is-done .search-live-phase-num{
    background:var(--ok); border-color:var(--ok); color:#fff;
  }
  .search-live-phase.is-skipped{
    opacity:.45;
  }
  .search-live-status{
    display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;
    margin:0 0 12px 0; padding:10px 12px; border-radius:12px;
    border:1px solid var(--border); background:var(--surface-soft);
  }
  .search-live-status-item{ min-width:0; }
  .search-live-status-label{
    display:block; font-size:var(--text-xs); font-weight:var(--label-weight); letter-spacing:.02em;
    text-transform:none; color:var(--ink-dim); margin:0 0 2px 0;
  }
  .search-live-status-value{
    display:block; font-size:var(--text-md); font-weight:700; line-height:1.35;
    color:var(--ink); font-variant-numeric:tabular-nums;
  }
  .search-live-status-value.search-live-status-best{
    color:var(--lavender-deep); font-family:var(--serif);
  }
  .search-live-headline{
    margin:0 0 12px 0; font-size:var(--text-lg); font-weight:700; line-height:1.35;
    color:var(--ink); font-family:var(--serif);
  }
  .search-live-progress{ margin:0 0 6px 0; }
  body.is-searching .search-live-progress .generate-progress-fill{
    background:linear-gradient(90deg, var(--lavender-deep), var(--sky), var(--lavender-deep));
    background-size:200% 100%;
    animation:search-progress-flow 1.4s linear infinite;
  }
  @keyframes search-progress-flow{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }
  body.is-searching .search-live-phase.is-active{
    animation:search-phase-pulse 1.2s ease-in-out infinite;
  }
  @keyframes search-phase-pulse{
    0%, 100%{ box-shadow:0 0 0 1px rgba(167,139,250,.25); }
    50%{ box-shadow:0 0 0 2px rgba(167,139,250,.55); }
  }
  .search-live-eta{
    margin:0 0 12px 0; font-size:var(--text-md); font-weight:700;
    color:var(--lavender-deep); font-variant-numeric:tabular-nums;
  }
  .search-live-body{
    max-height:42vh; overflow:auto; padding-right:4px;
    font-size:var(--text-md); line-height:1.45;
  }
  .search-live-line{
    padding:6px 10px 6px 12px; margin:0 0 4px 0;
    border-left:3px solid var(--border); border-radius:0 8px 8px 0;
    background:var(--surface-soft); color:var(--ink);
  }
  .search-live-line.search-live-ok{ border-left-color:var(--ok); }
  .search-live-line.search-live-warn{ border-left-color:var(--warn); background:rgba(255,138,138,.08); }
  .search-live-line.search-live-info{ border-left-color:var(--sky); }
  .modal-box.teacher-order-box{ max-width:440px; }
  .teacher-order-list{
    list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
  }
  .teacher-order-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:12px;
    border:1px solid var(--border); background:var(--surface-soft);
    cursor:grab; user-select:none; -webkit-user-select:none;
  }
  .teacher-order-item:active{ cursor:grabbing; }
  .teacher-order-item.is-dragging{ opacity:.45; }
  .teacher-order-item.is-over{ border-color:var(--lavender); box-shadow:0 0 0 2px rgba(167,139,250,.22); }
  .teacher-order-handle{
    color:var(--ink-dim); letter-spacing:-2px; font-size:14px; line-height:1; flex:0 0 auto;
  }
  .teacher-order-n{
    flex:0 0 1.6em; font-variant-numeric:tabular-nums; font-weight:700; color:var(--lavender-deep); font-size:13px;
  }
  .teacher-order-name{ flex:1; font-weight:600; color:var(--ink); }
  .teacher-order-empty{ margin:0; color:var(--ink-dim); font-size:13px; }
  #phase1TeacherOrderBtn.is-manual-order{
    border-color:var(--lavender); color:var(--lavender-deep);
  }
  .search-log{
    font-size:var(--text-md); line-height:1.5; max-height:58vh; overflow:auto;
    padding:4px 4px 8px 0; font-family:var(--serif);
  }
  .search-log .log-section{
    margin:16px 0 8px 0; font-weight:700; font-size:var(--text-md); color:var(--lavender-deep);
    letter-spacing:.01em;
  }
  .search-log .log-section:first-child{ margin-top:0; }
  .search-log .log-line{
    padding:5px 10px 5px 12px; margin:0 0 4px 0;
    border-left:3px solid var(--border); border-radius:0 8px 8px 0;
    background:var(--surface-soft); color:var(--ink);
    font-size:var(--text-sm);
  }
  .search-log .log-ok{ border-left-color:var(--ok); }
  .search-log .log-warn{ border-left-color:var(--warn); background:rgba(255,138,138,.08); }
  .search-log .log-info{ border-left-color:var(--sky); }
  label.btn{ display:inline-flex; align-items:center; }
  #importDbInput, #sheetsXlsxInput{ display:none; }

  /* Shared checkbox look across Reports, modals, tables, and lists */
  input[type="checkbox"]{
    width:16px; height:16px; margin:0;
    accent-color:var(--lavender-deep);
    cursor:pointer; flex-shrink:0;
    vertical-align:middle;
  }

  main{ padding:8px 32px 60px 32px; max-width:1500px; margin:0 auto; }
  .panel{
    background:var(--surface); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; margin-bottom:20px; box-shadow:var(--shadow-md);
  }
  .panel h2{
    font-family:var(--serif); font-weight:700; font-size:var(--text-xl); margin:0 0 14px 0; color:var(--ink);
    display:flex; align-items:center; gap:8px;
  }
  .panel h2::before{
    content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
    background:linear-gradient(120deg, var(--lavender-deep), var(--mint));
  }
  .panel h3{ font-family:var(--serif); font-weight:700; font-size:var(--text-lg); margin:18px 0 8px 0; color:var(--ink);}
  .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--btn-grad); color:#fff; border:1px solid transparent;
    padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-btn);
    font-family:var(--serif); font-size:var(--btn-font); font-weight:600;
    cursor:pointer; letter-spacing:.1px; line-height:1.2;
    box-shadow:var(--btn-shadow);
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  }
  .btn:hover{ transform:translateY(-1px); box-shadow:var(--btn-shadow-hover); }
  .btn:active{ transform:translateY(0) scale(.98); }
  .btn.secondary,
  .btn.btn-log{
    background:var(--surface-solid); color:var(--ink);
    border:1px solid var(--border); box-shadow:var(--shadow-sm);
  }
  .btn.secondary:hover,
  .btn.btn-log:hover{
    border-color:var(--lavender); color:var(--lavender-deep);
    background:rgba(139,92,246,.06); box-shadow:var(--shadow-sm); transform:translateY(-1px);
  }
  .btn.small{
    padding:6px 12px; font-size:12px; border-radius:var(--radius-btn);
  }
  .btn.danger{
    background:var(--danger-soft); color:var(--danger);
    border:1px solid rgba(224,87,107,.28); box-shadow:none;
  }
  .btn.danger:hover{
    background:#ffe6e6; color:#c43b50; border-color:rgba(224,87,107,.4);
  }
  .btn.btn-accept{
    background:var(--btn-grad); color:#fff;
    border:1px solid transparent; box-shadow:var(--btn-shadow);
  }
  .btn.btn-accept:hover{
    box-shadow:var(--btn-shadow-hover); color:#fff;
  }
  .dataio-bar .btn.small{ padding:6px 12px; font-size:12px; border-radius:var(--radius-btn); }

  table.data{
    border-collapse:collapse; width:100%; font-size:12.5px; font-family:var(--mono);
    background:transparent;
  }
  table.data th{
    background:var(--surface-soft); color:var(--ink); text-align:left; padding:9px 10px;
    border:none; border-bottom:1px solid var(--border); position:sticky; top:0; white-space:nowrap; z-index:2;
    font-family:var(--serif); font-weight:700; font-size:11px; letter-spacing:.2px; text-transform:uppercase; color:var(--ink-dim);
  }
  table.data td.cell-wrap{
    white-space:normal; max-width:280px; line-height:1.35; padding:7px 10px;
    font-size:12px; color:var(--ink);
  }
  table.data.accepted-schedule{
    width:max-content; min-width:100%;
  }
  table.data.accepted-schedule td{
    white-space:nowrap;
  }
  table.data tr.is-unresolved td{ background:rgba(255,138,138,.08); }
  table.data tr:hover td{ background:rgba(139,92,246,0.04); }
  table.data td input{
    width:100%; background:transparent; border:none; color:var(--ink);
    padding:7px 8px; font-family:var(--mono); font-size:12.5px; border-radius:8px;
  }

  /* Every dropdown in the app: a soft blue-glass rounded pill with its own
     chevron baked into the right-hand padding, so the arrow never sits on top
     of the selected text. */
  select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-color: rgba(142,203,255,.16);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7db8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>");
    background-repeat:no-repeat;
    background-position: right 9px center;
    background-size:11px;
    border:1px solid rgba(142,203,255,.45);
    border-radius:var(--radius-btn);
    color:var(--ink);
    font-family:var(--serif);
    cursor:pointer;
    transition: background-color .12s ease, border-color .12s ease;
  }
  select:hover{ background-color: rgba(142,203,255,.26); border-color: rgba(142,203,255,.65); }
  select:focus{ outline:none; border-color: var(--lavender); box-shadow:0 0 0 2px rgba(167,139,250,.25); }
  select::-ms-expand{ display:none; }

  table.data td select{
    width:100%; padding:7px 26px 7px 8px; font-family:var(--mono); font-size:12.5px;
    border-radius:8px; background-position: right 6px center; background-size:10px;
  }
  table.data td select option{ background:#fff; color:var(--ink); }
  table.data td input:focus, table.data td select:focus{
    background-color:rgba(139,92,246,0.08);
  }
  table.data td input[disabled]{
    color:var(--ink-dim); font-style:normal; cursor:default;
  }
  table.data td.day-inferred{ position:relative; }
  table.data td.day-inferred::after{
    content:"•"; color:var(--peach); position:absolute; right:6px; top:6px; font-size:14px;
  }
  .table-wrap{ max-height:480px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:transparent;}
  .hint{ color:var(--ink-dim); font-size:var(--text-sm); margin:0 0 12px 0; line-height:1.55; font-weight:500; font-family:var(--serif);}
  .hint-collapsed{ display:none; }
  .hint-toggle{
    display:inline-flex; align-items:center; gap:6px; background:var(--surface-solid);
    border:1px solid var(--border); border-radius:var(--radius-btn); color:var(--ink-dim);
    font-family:var(--serif); font-size:var(--text-sm); font-weight:600; letter-spacing:.1px;
    padding:6px 12px; margin:0 0 10px 0; cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:color .12s ease, border-color .12s ease, background .12s ease;
  }
  .hint-toggle:hover{ color:var(--lavender-deep); border-color:var(--lavender); background:rgba(139,92,246,.06); }
  .hint-toggle-icon{ font-size:12px; }
  .hint-toggle-arrow{ transition:transform .15s ease; font-size:10px; }
  .hint-toggle.open .hint-toggle-arrow{ transform:rotate(90deg); }
  .tag{
    display:inline-block; padding:4px 10px; border-radius:999px; font-size:10.5px;
    font-family:var(--serif); font-weight:700; letter-spacing:.2px; margin-left:6px;
  }
  .tag.ok{ background:rgba(52,201,143,.14); color:#1f9d72; }
  .tag.warn{ background:rgba(255,138,138,.16); color:#e0576b; }

  .legend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:14px; background:var(--surface-soft); padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border);}
  .legend-chip{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-dim); font-family:var(--serif); font-weight:600;}
  .legend .swatch{ width:11px; height:11px; border-radius:4px; border:1px solid; display:inline-block; }

  .ref-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:18px; }

  .small-groups-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
  }
  @media (max-width: 980px){
    .small-groups-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px){
    .small-groups-grid{ grid-template-columns:1fr; }
  }
  .small-group-card{
    background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px; box-shadow:var(--shadow-sm); min-width:0;
  }
  .small-group-card h4{ margin:0 0 12px 0; font-family:var(--serif); font-size:15px; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center;}
  .small-group-card .small-group-jmix{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); font-weight:500; }
  .small-group-teacher-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; min-width:0; }
  .small-group-teacher-row label{ font-size:11px; color:var(--ink-dim); font-weight:600; white-space:nowrap; }
  .small-group-teacher-row select{ flex:1; min-width:0; width:100%; padding:7px 28px 7px 10px; font-size:12.5px; }
  .small-group-scheduled-row span{
    font-family:var(--mono); font-size:11.5px; color:var(--ink); font-weight:600;
  }
  .small-group-teacher-assign{ flex-direction:column; align-items:stretch; gap:6px; }
  .small-group-teacher-assign label{ white-space:normal; }
  .small-group-member{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border-soft); font-size:12px; border-radius:6px; }
  .small-group-member:last-child{ border-bottom:none; }
  .small-group-member.double-booked{ background:rgba(250,204,21,.22); box-shadow:0 0 0 1px rgba(217,160,10,.35) inset; padding-left:5px; }
  .small-group-member .role{
    font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.3px; color:#fff;
    background:linear-gradient(120deg, var(--lavender-deep), var(--sky)); padding:2px 7px; border-radius:999px; flex-shrink:0;
  }
  .small-group-member.double-booked .role{ background:linear-gradient(120deg, #d9a00a, #f5c518); }
  .small-group-member .who{ flex:1; color:var(--ink); }
  .small-group-member .cls{ color:var(--ink-dim); font-family:var(--mono); font-size:10.5px; }
  .small-group-member-remove{
    flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,138,138,.4);
    background:#fff0f0; color:#e0576b; font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .small-group-member-remove:hover{ background:#ffe0e0; }
  .small-group-edit-row{ margin-top:12px; }
  .small-group-edit-row .btn{ width:100%; display:flex; justify-content:center; }
  .modal-box.small-group-students-box{ max-width:760px; }
  .small-group-students-table td{ padding:7px 10px; font-size:12.5px; color:var(--ink); }
  .small-group-students-table tbody tr{ cursor:pointer; }
  .small-group-students-table tr.is-member td{ background:rgba(167,139,250,.10); }
  .small-group-students-table tr.is-orphan td{ background:rgba(220, 80, 60, .06); }
  .small-group-students-table .small-group-orphan-note{
    color:#a11; font-size:10px; margin-top:3px; line-height:1.25;
  }
  .small-group-member.is-orphan{
    border-color:rgba(220,80,60,.35);
    background:rgba(220,80,60,.06);
  }
  .small-group-orphan-tag{
    font-family:var(--mono); font-size:9px; color:#a11; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em;
  }
  .small-group-students-table td input[type="checkbox"]{
    width:16px; height:16px; padding:0; margin:0; cursor:pointer; accent-color:var(--lavender-deep);
  }
  .small-group-room-toggle{
    display:flex; align-items:center; gap:8px;
    font-size:var(--text-sm); color:var(--ink-dim); font-weight:600; margin-left:auto;
    font-family:var(--serif);
  }
  .small-group-room-toggle select{
    min-width:110px; min-height:var(--control-h); padding:0 28px 0 10px;
    font-size:var(--text-md); font-family:var(--serif); border-radius:var(--radius-btn);
  }

  /* Timetable grid */
  .grid-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); padding:6px; background:transparent;}
  table.tt{ border-collapse:collapse; width:100%; min-width:900px; background:transparent;}
  table.tt th{
    font-family:var(--serif); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2px;
    color:var(--ink-dim); background:var(--surface-soft);
    padding:10px 6px; border:none; border-bottom:1px solid var(--border); text-align:center; border-radius:10px 10px 0 0;
  }
  table.tt td{
    border:none; border-bottom:1px solid var(--border-soft); vertical-align:top; padding:6px; height:30px; width:19%;
  }
  .tt-time{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); text-align:right; padding-right:8px; white-space:nowrap; font-weight:600;}

  /* Calendar-style timetable (block height matches lesson duration) */
  .cal-wrap{
    display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    background:var(--surface-solid); min-width:820px;
  }
  .cal-timeaxis{ width:52px; flex:0 0 52px; position:relative; border-right:1px solid var(--border); background:var(--surface-soft);}
  .cal-timeaxis .cal-headerpad{ height:36px; border-bottom:1px solid var(--border); }
  .cal-timeaxis .tick{
    position:absolute; right:8px; transform:translateY(-50%);
    font-family:var(--mono); font-size:10px; color:var(--ink-dim); font-weight:600;
  }
  .cal-days{ display:flex; flex:1; }
  .cal-day{ flex:1; border-right:1px solid var(--border-soft); position:relative; min-width:150px; }
  .cal-day:last-child{ border-right:none; }
  .cal-day-header{
    height:36px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-size:11.5px; color:var(--ink); background:var(--surface-soft);
    border-bottom:1px solid var(--border); font-weight:700;
  }
  .cal-day-body{ position:relative; background:repeating-linear-gradient(to bottom, transparent, transparent 68px, var(--border-soft) 68px, var(--border-soft) 69px);}
  .cal-block{
    position:absolute; background:linear-gradient(135deg, rgba(167,139,250,.16), rgba(142,203,255,.16));
    border:1px solid var(--border); border-left:4px solid var(--lavender-deep); border-radius:10px;
    padding:5px 8px; font-size:11px; overflow:hidden; box-sizing:border-box; line-height:1.35;
    box-shadow:var(--shadow-sm); backdrop-filter:blur(6px); cursor:grab; user-select:none;
  }
  .cal-block.has-teacher-bg{
    backdrop-filter:none;
    border-color:rgba(20,24,36,.12);
  }
  .cal-block b{ display:block; font-weight:700; color:var(--ink); font-size:11px; font-family:var(--serif);}
  .cal-block .meta{ display:block; color:var(--ink-dim); font-family:var(--mono); font-size:9.5px; margin-top:1px;}
  .cal-block.has-teacher-bg b{
    color:var(--cal-ink, var(--ink));
    text-shadow:0 1px 0 #fff, 0 0 2px rgba(255,255,255,.85);
  }
  .cal-block.has-teacher-bg .meta{
    color:var(--cal-ink-dim, #434963);
    text-shadow:0 1px 0 rgba(255,255,255,.92);
  }
  .cal-block.is-dragging{ opacity:.32; cursor:grabbing; }
  .cal-context-menu{
    position:fixed; z-index:10050; min-width:168px; padding:6px;
    background:var(--surface-solid); border:1px solid var(--border);
    border-radius:var(--radius-btn); box-shadow:var(--shadow-md);
  }
  .cal-context-item{
    display:block; width:100%; text-align:left; border:1px solid transparent;
    background:transparent; padding:8px 12px; border-radius:var(--radius-btn);
    font-family:var(--serif); font-size:13px; font-weight:600; color:var(--danger);
    cursor:pointer;
  }
  .cal-context-item:hover{
    background:var(--danger-soft); border-color:rgba(224,87,107,.28); color:#c43b50;
  }
  .cal-context-item.cal-context-split{
    color:var(--ink);
  }
  .cal-context-item.cal-context-split:hover{
    background:rgba(45,212,191,.12); border-color:rgba(15,118,110,.28); color:var(--ink);
  }
  .modal-box.individual-split-box{ max-width:440px; }
  .individual-split-presets{
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  }
  .individual-split-parts{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px;
  }
  .individual-split-part{
    position:relative; margin:0;
  }
  .individual-split-part .individual-split-input{
    padding-right:28px;
  }
  .individual-split-unit{
    position:absolute; right:12px; bottom:10px; color:var(--ink-dim);
    font-family:var(--mono); font-size:12px; font-weight:700; pointer-events:none;
  }
  #individualSplitSum.is-ok{ color:var(--ok); }
  #individualSplitSum.is-bad{ color:var(--danger); }
  .cal-block.is-accepted-bg{
    background:rgba(30,30,45,.06); border-left-color:#9aa0b5; cursor:default; opacity:.78;
  }
  .cal-block.is-oneone{
    background:linear-gradient(135deg, rgba(253,224,71,.55), rgba(234,179,8,.28));
    border-left-color:#ca8a04; cursor:default;
  }
  .cal-block.is-rpiano{
    background:linear-gradient(135deg, rgba(45,212,191,.5), rgba(13,148,136,.28));
    border-left-color:#0f766e; cursor:default;
  }
  .cal-block.is-oneone.has-teacher-bg,
  .cal-block.is-rpiano.has-teacher-bg{ backdrop-filter:none; }
  .cal-block.is-oneone b,
  .cal-block.is-rpiano b,
  .cal-block.is-oneone .meta,
  .cal-block.is-rpiano .meta{
    color:inherit;
    text-shadow:0 1px 0 rgba(255,255,255,.85);
  }
  .cal-block.is-oneone.is-draggable,
  .cal-block.is-rpiano.is-draggable{ cursor:grab; }
  .individual-teachers-btn{ min-width:148px; justify-content:center; }
  .modal-box.individual-teachers-box{ max-width:480px; }
  .individual-teachers-list{
    display:flex; flex-direction:column; gap:6px;
    max-height:min(52vh, 420px); overflow:auto; padding-right:4px;
  }
  .individual-teachers-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:var(--radius-btn); min-height:var(--control-h);
    border:1px solid var(--border); background:var(--surface-soft);
    cursor:pointer; user-select:none; transition:border-color .12s ease, box-shadow .12s ease;
    font-family:var(--serif);
  }
  .individual-teachers-item:hover{ border-color:var(--lavender); }
  .individual-teachers-item.is-checked{
    border-color:var(--lavender); box-shadow:0 0 0 2px rgba(167,139,250,.18);
    background:linear-gradient(120deg, rgba(167,139,250,.08), rgba(125,211,252,.06));
  }
  .individual-teachers-item input{ margin:0; flex:0 0 auto; }
  .individual-teachers-swatch{
    width:14px; height:14px; border-radius:50%; flex:0 0 auto;
    border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(20,20,35,.08);
  }
  .individual-teachers-name{ flex:1; font-weight:600; color:var(--ink); font-size:var(--text-md); }
  .individual-teachers-meta{ flex:0 0 auto; font-size:var(--text-sm); color:var(--ink-dim); font-variant-numeric:tabular-nums; }
  .individual-teachers-empty{ margin:0; padding:12px 4px; color:var(--ink-dim); font-size:var(--text-md); font-family:var(--serif); }
  .individual-teachers-toolbar{ width:100%; }
  .cal-block.is-class{
    background:rgba(120,124,140,.22); border-color:rgba(120,124,140,.40);
    border-left-color:#8b90a0; cursor:default; z-index:0; box-shadow:none;
  }
  .cal-block.is-class b, .cal-block.is-class .meta{ color:#4a4e5c; }
  .cal-block.has-conflict, .lesson-block.has-conflict{
    border-color:rgba(224,87,107,.55); box-shadow:0 0 0 2px rgba(224,87,107,.22);
  }
  .cal-drop-preview{
    position:absolute; left:4px; right:4px; pointer-events:none; box-sizing:border-box;
    border:2px dashed var(--lavender-deep); background:rgba(139,92,246,.12); border-radius:10px;
  }
  body.cal-drag-active{ cursor:grabbing !important; user-select:none; }
  body.cal-drag-active .hover-tooltip{ display:none !important; }

  .tt-audit-wrap{ margin-top:16px; }
  .tt-audit-wrap h3{
    font-family:var(--serif); font-size:15px; font-weight:700; margin:0 0 10px 0; color:var(--ink);
  }
  .tt-audit-ok{
    background:rgba(52,201,143,.08); border:1px solid rgba(52,201,143,.25); border-radius:var(--radius);
    padding:12px 14px; font-size:12.5px; color:var(--ink); margin:0;
  }
  .tt-audit-wrap .unresolved-list{
    background:transparent; border:none; border-radius:0; padding:0; list-style:none;
  }
  .tt-audit-wrap .unresolved-list li{
    margin:0 0 8px 0; padding:10px 12px; border-radius:var(--radius); font-size:12.5px;
  }
  .tt-audit-wrap .unresolved-list li.is-error{
    background:rgba(255,138,138,.08); border:1px solid rgba(255,138,138,.25);
  }
  .tt-audit-wrap .unresolved-list li.is-error b{ color:#e0576b; }
  .tt-audit-wrap .unresolved-list li.is-warning{
    background:rgba(217,160,10,.10); border:1px solid rgba(217,160,10,.35);
  }
  .tt-audit-wrap .unresolved-list li.is-warning b{ color:#c49200; }
  .tt-audit-wrap .tt-audit-level{
    font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.04em;
    color:#c49200; margin-right:6px;
  }
  .tt-audit-warnings{
    display:block; margin-top:8px;
  }
  .tt-audit-warnings[hidden]{ display:none !important; }
  .tt-audit-warnings-label{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
    color:#c49200; background:rgba(217,160,10,.12);
    border:1px solid rgba(217,160,10,.35); border-radius:999px;
    padding:6px 12px; cursor:default; user-select:none;
  }
  .tt-audit-warnings-label:focus{ outline:2px solid rgba(217,160,10,.55); outline-offset:2px; }
  .tt-audit-warnings-list{
    display:none; width:100%; box-sizing:border-box;
    min-height:280px; max-height:min(75vh, 640px); overflow:auto;
    margin:8px 0 0 0; padding:12px 14px;
    background:var(--surface-solid); border:1px solid rgba(217,160,10,.35);
    border-radius:var(--radius); box-shadow:var(--shadow-md);
    white-space:normal;
  }
  .tt-audit-warnings-list li{
    white-space:normal; overflow-wrap:anywhere; word-break:break-word;
    line-height:1.5; margin-bottom:10px;
  }
  .tt-audit-warnings:hover .tt-audit-warnings-list,
  .tt-audit-warnings:focus-within .tt-audit-warnings-list{
    display:block;
  }

  .lesson-block{
    background:linear-gradient(135deg, rgba(167,139,250,.14), rgba(142,203,255,.14));
    border:1px solid var(--border); border-left:4px solid var(--lavender-deep); border-radius:10px;
    padding:6px 9px; margin-bottom:4px; font-size:11.5px; line-height:1.4; cursor:default;
  }
  .lesson-block.is-class{
    background:rgba(120,124,140,.16); border-left-color:#8b90a0;
  }
  .lesson-block b{ color:var(--ink); font-weight:700; display:block; font-family:var(--serif);}
  .lesson-block .meta{ color:var(--ink-dim); font-family:var(--mono); font-size:10.5px;}

  /* Custom hover tooltip listing the students in a lesson. A single element is
     positioned with the mouse (position:fixed, appended to <body>) rather than tied
     to any lesson block's own box, so it always renders on top and is never clipped
     by the scrolling/rounded-corner containers the calendar sits inside. */
  .hover-tooltip{
    position:fixed; z-index:9999; display:none;
    background:#20233a; color:#f4f4fa; padding:10px 12px; border-radius:10px;
    font-family:var(--serif); font-size:11.5px; font-weight:500; line-height:1.55;
    white-space:pre-line; max-width:260px;
    box-shadow:0 12px 30px rgba(20,20,40,.35); pointer-events:none;
  }

  .unresolved-list{ background:rgba(255,138,138,.08); border:1px solid rgba(255,138,138,.25); border-radius:var(--radius); padding:12px 12px 12px 30px; }
  .unresolved-list li{ margin-bottom:7px; font-size:12.5px; color:var(--ink);}
  .unresolved-list b{ color:#e0576b; }

  .stat-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
  .stat{
    background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius); padding:12px 18px; min-width:120px;
    box-shadow:var(--shadow-sm);
  }
  .stat .num{ font-family:var(--serif); font-weight:800; font-size:26px; background:linear-gradient(120deg, var(--lavender-deep), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat .lbl{ font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.4px; font-weight:600;}

  select#teacherFilter, select#dayFilter, select#viewMode{
    min-height:var(--control-h); padding:0 30px 0 12px; font-size:var(--text-md);
    font-family:var(--serif); border-radius:var(--radius-btn); box-sizing:border-box;
  }

  .report-toolbar{
    display:flex; flex-direction:column; gap:12px;
    margin:4px 0 14px 0; padding:14px;
    background:var(--surface-soft); border:1px solid var(--border);
    border-radius:var(--radius);
  }
  .report-filters{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:10px;
  }
  @media (max-width: 1100px){
    .report-filters{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 640px){
    .report-filters{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  .report-field{
    display:flex; flex-direction:column; gap:5px; min-width:0;
    margin:0; font-family:var(--serif);
  }
  .report-field-label{
    font-size:var(--text-sm); font-weight:600; color:var(--ink-dim);
    letter-spacing:.01em; line-height:1.2;
  }
  .report-field select,
  .report-filters select{
    width:100%; max-width:none; min-height:var(--control-h);
    padding:0 28px 0 10px; box-sizing:border-box;
    font-size:var(--text-md); font-family:var(--serif);
    border-radius:var(--radius-btn);
    background-color:var(--surface-solid);
  }
  .report-toggles{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding-top:2px; border-top:1px solid var(--border-soft);
  }
  .report-toggle{
    display:inline-flex; align-items:center; gap:8px;
    margin:0; min-height:34px; padding:0 12px;
    border:1px solid var(--border); border-radius:var(--radius-pill);
    background:var(--surface-solid); cursor:pointer;
    font-family:var(--serif); font-size:var(--text-sm); font-weight:600; color:var(--ink);
    user-select:none; transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .report-toggle:hover{
    border-color:var(--lavender); background:rgba(139,92,246,.05);
  }
  .report-toggle:has(input:checked){
    border-color:rgba(139,92,246,.45);
    background:rgba(139,92,246,.08);
    box-shadow:0 0 0 1px rgba(139,92,246,.12);
  }
  .report-toggle input[type="checkbox"]{
    width:15px; height:15px; margin:0; accent-color:var(--lavender-deep);
  }
  .report-toggle-swatch{
    width:10px; height:10px; border-radius:3px; flex-shrink:0;
    border:1px solid transparent;
  }
  .report-toggle-swatch.is-class{
    background:rgba(224,87,107,.35); border-color:#c43b50;
  }
  .report-toggle-swatch.is-rpiano{
    background:rgba(45,212,191,.45); border-color:#0f766e;
  }
  .report-toggle-text{ line-height:1.2; white-space:nowrap; }
  .report-actions{ gap:8px; }
  .report-actions .tag,
  #reportCount{
    font-size:var(--text-sm); font-family:var(--serif);
  }
  #reportEmpty{
    font-size:var(--text-sm); font-family:var(--serif); color:var(--ink-dim);
  }

  .report-batch-modal{ max-width:520px; width:min(96vw, 520px); }
  .report-batch-toolbar{
    display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;
    margin-bottom:10px;
  }
  .report-batch-toolbar label{
    font-size:var(--text-sm); color:var(--ink-dim); font-weight:var(--label-weight);
    font-family:var(--serif); display:flex; flex-direction:column; gap:6px;
  }
  .report-batch-toolbar select{
    min-width:140px; min-height:var(--control-h); font-size:var(--text-md); font-family:var(--serif);
  }
  .report-batch-skip-empty{
    display:flex; align-items:center; gap:8px; margin:0;
    font-size:var(--text-md); color:var(--ink); font-weight:600; font-family:var(--serif);
  }
  .report-batch-pick-actions{ display:flex; gap:6px; margin-left:auto; }
  .report-batch-pick-list{
    max-height:min(42vh, 360px); overflow:auto;
    border:1px solid var(--border); border-radius:var(--radius-btn);
    padding:8px 10px; margin-bottom:14px;
    background:var(--surface-soft);
  }
  .report-batch-pick{
    display:flex; align-items:center; gap:8px;
    padding:6px 4px; font-size:var(--text-md); cursor:pointer;
    font-family:var(--serif); color:var(--ink);
  }
  .report-batch-pick input{ flex-shrink:0; }
  .report-batch-pick .meta{ color:var(--ink-dim); font-size:var(--text-sm); }
  .report-batch-print-host{ display:none; padding:16px 20px; }
  .report-print-page{ margin:0 0 24px 0; }
  .report-print-title{ margin:0 0 4px 0; font-size:var(--text-xl); font-family:var(--serif); }
  .report-print-meta{ margin:0 0 10px 0; font-size:var(--text-sm); color:var(--ink-dim); }
  .report-print-grid-wrap{ overflow:hidden; }
  .report-print-unplaced{
    margin-top:10px;
    padding-top:8px;
    border-top:1px solid var(--border-soft);
  }
  .report-print-unplaced h3{
    margin:0 0 6px 0;
    font-size:var(--text-md);
    font-family:var(--serif);
    color:var(--danger);
  }
  .report-print-unplaced ul{
    margin:0;
    padding:0 0 0 18px;
    font-size:var(--text-sm);
    line-height:1.35;
  }
  .report-print-unplaced li{ margin:0 0 3px 0; }
  .report-print-unplaced .meta{ color:var(--ink-dim); font-size:var(--text-xs); }

  footer.retro-footer{ display:none; }

  /* —— Mobile only (desktop layout unchanged above 768px) —— */
  @media (max-width: 768px){
    html, body{ overflow-x:clip; }

    header{
      padding:16px 14px 10px 14px; gap:12px;
    }
    .brand-mark{
      width:36px; height:36px; flex-basis:36px;
      filter:drop-shadow(0 4px 10px rgba(139,92,246,.22));
    }
    .brand-name{ font-size:22px; letter-spacing:-.4px; }
    .brand-sub{ font-size:10px; letter-spacing:.18em; }
    .viewer-gate-bar{
      max-width:none; width:100%; margin-left:0;
      gap:8px;
    }
    .viewer-gate-bar #viewerGateStatus{
      flex:1 1 100%; font-size:12.5px; line-height:1.4;
    }
    .viewer-gate-bar .btn{
      min-height:42px; flex:1 1 auto;
    }

    nav.tabs{
      margin:0 12px 12px 12px; gap:8px;
      flex-direction:column; align-items:stretch;
      min-width:0; max-width:100%;
      box-sizing:border-box;
    }
    .tabs-left,
    .tabs-right{
      width:100%; max-width:100%; min-width:0;
      box-sizing:border-box;
      flex-wrap:wrap;
      overflow:hidden;
      gap:4px; padding:6px;
      border-radius:16px; /* rounded rect — pill radius clips wrapped labels oddly */
      scrollbar-width:thin;
    }
    .tabs-left button,
    .tabs-right .tab-btn{
      flex:0 1 auto;
      white-space:normal;
      text-align:center;
      line-height:1.2;
      max-width:100%;
      padding:10px 12px; font-size:12.5px; min-height:40px;
      box-sizing:border-box;
    }

    /* Public locked view: only Reports (+ unlock) — hide locked editing tabs */
    body.is-viewer-gated .tabs-left{ display:none; }
    body.is-viewer-gated .tabs-right{
      justify-content:flex-start;
      width:auto; max-width:100%;
      align-self:flex-start;
    }
    body.is-viewer-gated .tab-btn.is-viewer-locked{ display:none; }

    main{ padding:4px 12px 48px 12px; }
    .panel{
      padding:14px; margin-bottom:14px;
      border-radius:16px;
    }
    .panel h2{ font-size:18px; margin-bottom:10px; }
    .row{ gap:8px; margin-bottom:10px; }

    .btn,
    .btn.small{
      min-height:42px; padding:10px 14px; font-size:13.5px;
    }
    .btn.small{ padding:10px 14px; font-size:13.5px; }

    .report-toolbar{
      padding:12px; gap:10px; margin-bottom:12px;
      overflow:hidden; min-width:0; box-sizing:border-box;
    }
    .report-filters{
      grid-template-columns:1fr;
      gap:8px;
      min-width:0;
    }
    .report-field{ min-width:0; max-width:100%; }
    .report-field select,
    .report-filters select{
      min-height:44px; font-size:16px; /* iOS: avoid zoom-on-focus */
      max-width:100%;
    }
    .report-toggles{ gap:8px; min-width:0; }
    .report-toggle{
      flex:1 1 100%; min-height:44px; min-width:0;
      max-width:100%;
      padding:8px 12px; align-items:flex-start;
      box-sizing:border-box;
      overflow:hidden;
    }
    .report-toggle-text{
      white-space:normal; line-height:1.25;
      overflow-wrap:anywhere; word-break:break-word;
    }
    .report-actions{
      flex-direction:column; align-items:stretch; gap:8px;
    }
    .report-actions .btn{
      width:100%; justify-content:center;
    }
    .report-actions .tag,
    #reportCount{
      align-self:flex-start;
    }

    /* Reports week grid: keep 5-day row, swipe horizontally */
    #tab-reports .grid-wrap{
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      padding:4px;
      border-radius:14px;
      overscroll-behavior-x:contain;
    }
    #tab-reports .cal-wrap{
      min-width:720px;
      width:max-content;
      display:flex;
    }
    #tab-reports .cal-timeaxis{
      width:40px; flex:0 0 40px;
      position:sticky; left:0; z-index:3;
      background:var(--surface-soft);
    }
    #tab-reports .cal-timeaxis .tick{ right:4px; font-size:9px; }
    #tab-reports .cal-days{
      display:flex; flex:1; min-width:0;
    }
    #tab-reports .cal-day{
      flex:0 0 min(70vw, 160px);
      min-width:min(70vw, 160px);
      width:auto;
      border-right:1px solid var(--border-soft);
      border-bottom:none;
      scroll-snap-align:start;
    }
    #tab-reports .cal-day:last-child{ border-right:none; }
    #tab-reports .cal-day-header{
      position:sticky; top:0; z-index:2;
      font-size:12.5px; height:36px;
    }
    #tab-reports .cal-block{
      font-size:12px; padding:6px 8px; border-radius:8px;
      cursor:default;
    }
    #tab-reports .cal-block b{ font-size:12.5px; }
    #tab-reports .cal-block .meta{ font-size:10.5px; }

    #reportResultsPanel .table-wrap{
      max-height:none;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    #reportList table.tt,
    #reportList table.data.tt{
      min-width:640px;
      font-size:11.5px;
    }

    .legend{ gap:6px; }
    .legend-chip{ font-size:11px; padding:6px 10px; }

    .hint-toggle{ font-size:13px; padding:8px 0; }
    .modal-box{
      width:calc(100vw - 24px); max-width:calc(100vw - 24px);
      margin:12px auto; padding:16px; max-height:90vh;
    }
    .report-batch-modal{ width:calc(100vw - 24px); max-width:calc(100vw - 24px); }
    .report-batch-toolbar{ flex-direction:column; align-items:stretch; }
    .report-batch-toolbar select{ min-width:0; width:100%; min-height:44px; font-size:16px; }

    /* Other calendars (editor): swipe horizontally, don't force desktop min-width */
    #tab-timetable .cal-wrap,
    #tab-oneone .cal-wrap,
    #tab-rpiano .cal-wrap{
      min-width:0;
    }
    #tab-timetable .grid-wrap,
    #tab-oneone .grid-wrap,
    #tab-rpiano .grid-wrap{
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
    }
    #tab-timetable .cal-day,
    #tab-oneone .cal-day,
    #tab-rpiano .cal-day{
      min-width:min(72vw, 220px);
      flex:0 0 min(72vw, 220px);
      scroll-snap-align:start;
    }
    .table-wrap{
      -webkit-overflow-scrolling:touch;
    }
  }

  @media (max-width: 480px){
    .report-toggle{ flex:1 1 100%; }
  }

  @media print{
    @page{
      size:A4 landscape;
      margin:7mm;
    }
    header, nav.tabs, .modal-overlay, .report-actions, .hint-toggle, .hint{
      display:none !important;
    }
    .page-frame{ margin:0; }
    .tab-panel{ display:none !important; }
    body.is-print-report #tab-reports{ display:block !important; }
    body.is-print-report-batch{
      background:#fff !important;
      margin:0 !important;
      padding:0 !important;
    }
    body.is-print-report-batch .page-frame,
    body.is-print-report-batch .modal-overlay,
    body.is-print-report-batch > :not(.report-batch-print-host){
      display:none !important;
    }
    body.is-print-report-batch .report-batch-print-host{
      display:block !important;
      padding:0;
      margin:0;
    }
    .report-print-page{
      page-break-after:always;
      break-after:page;
      break-inside:avoid;
      margin:0;
      padding:0;
    }
    .report-print-page:last-child{
      page-break-after:auto;
      break-after:auto;
    }
    .report-print-title{ font-size:15px; margin:0 0 2px 0; line-height:1.2; }
    .report-print-meta{ font-size:10px; margin:0 0 6px 0; color:#444; }
    .report-batch-print-host .report-print-grid-wrap{
      border:none;
      padding:0;
      overflow:hidden;
      max-height:none;
    }
    .report-batch-print-host .cal-wrap{
      min-width:0 !important;
      width:100%;
      font-size:9px;
      border-radius:4px;
      -webkit-print-color-adjust:exact;
      print-color-adjust:exact;
    }
    .report-batch-print-host .cal-timeaxis{ width:44px; flex:0 0 44px; }
    .report-batch-print-host .cal-timeaxis .cal-headerpad{ height:28px; }
    .report-batch-print-host .cal-timeaxis .tick{ font-size:8px; right:4px; }
    .report-batch-print-host .cal-day{ min-width:0 !important; }
    .report-batch-print-host .cal-day-header{
      height:28px;
      font-size:9px;
      padding:2px;
    }
    .report-batch-print-host .cal-day-body{
      background:repeating-linear-gradient(to bottom, transparent, transparent 54px, var(--border-soft) 54px, var(--border-soft) 55px);
    }
    .report-batch-print-host .cal-block{
      font-size:8px;
      line-height:1.15;
      padding:2px 3px;
      border-radius:3px;
      cursor:default;
      box-shadow:none;
      backdrop-filter:none;
    }
    .report-batch-print-host .cal-block b{ font-size:8px; line-height:1.15; }
    .report-batch-print-host .cal-block.is-class{
      overflow:visible;
      white-space:normal;
      line-height:1.2;
    }
    .report-batch-print-host .cal-block.is-class b{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
    }
    .report-batch-print-host .report-print-unplaced{
      margin-top:6px;
      padding-top:4px;
      break-inside:avoid;
    }
    .report-batch-print-host .report-print-unplaced h3{
      font-size:10px;
      margin:0 0 3px 0;
      color:#900;
    }
    .report-batch-print-host .report-print-unplaced ul{
      font-size:8px;
      line-height:1.25;
      padding-left:14px;
    }
    .report-batch-print-host .report-print-unplaced li{ margin-bottom:2px; }
    .report-batch-print-host .report-print-unplaced .meta{ font-size:7px; }
    .grid-wrap, .table-wrap{ max-height:none !important; overflow:visible !important; }
    .cal-wrap{ break-inside:avoid; }
  }

  ::-webkit-scrollbar{ width:10px; height:10px;}
  ::-webkit-scrollbar-thumb{ background:rgba(30,30,60,.15); border-radius:8px;}
  ::-webkit-scrollbar-thumb:hover{ background:rgba(30,30,60,.25); }
  ::-webkit-scrollbar-track{ background:transparent; }