/* Teacher workspace, served at /teacher. Built from the retired index.html: its imports,
   its inline design system verbatim, then one class per former style attribute. fonts.css
   is linked by the page itself. */
@import "tokens.css";
@import "teacher-entry.css";
@import "teacher-features.css";

/* Design system, from index.html's inline <style> */
    /* ─── Apple Pro Design Tokens ─────────────────────────────────── */
    /* The tokens come from the tokens.css import above; this sheet declares none. */
    

    html.dark { color-scheme: dark; }
    

    /* ─── Global Reset & Typography ──────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: var(--font-ui);
      font-size: var(--type-label);
      line-height: 1.4;
      background: var(--app-bg);
      color: var(--text-main);
      height: 100vh;
      overflow: hidden; /* App-like, no body scrolling */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color-scheme: light;
    }

    /* ─── Custom macOS Scrollbars ────────────────────────────────── */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { 
      background: var(--border); 
      border-radius: 10px; 
      border: 3px solid transparent; 
      background-clip: content-box; 
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

    /* ─── Application Layout ─────────────────────────────────────── */
    #app-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    /* Top Toolbar */
    .toolbar {
      min-height: var(--toolbar-height);
      background: rgba(var(--panel-rgb), 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 var(--shell-gutter);
      gap: var(--shell-gap);
      flex-shrink: 0;
      z-index: 100;
    }

    .spacer { flex: 1; }

    .toolbar-title {
      font-family: var(--font-brand);
      font-weight: 700;
      font-size: var(--type-reading);
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .badge-pro {
      font-size: var(--type-micro);
      font-weight: 800;
      background: linear-gradient(135deg, var(--accent), #818cf8);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.05em;
    }

    /* 3-Pane Workspace */
    .workspace {
      display: flex;
      flex: 1;
      overflow: hidden;
      gap: var(--shell-gap);
      padding: var(--shell-gutter);
    }

    /* Left Sidebar (Inspector/Builder) */
    .panel-left {
      width: var(--rail-width);
      min-width: var(--rail-min-width);
      max-width: 450px;
      background: var(--panel-bg);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      resize: horizontal;
      overflow: hidden; /* hide resize handle overflow */
      z-index: 10;
    }

    .panel-content {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-5) var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    /* Center Canvas (The Output) */
    .panel-center {
      flex: 1;
      min-width: 0;
      background: var(--app-bg); /* darker/textured background behind canvas */
      overflow-y: auto;
      padding: var(--canvas-padding);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Right Sidebar (Settings) */
    .panel-right {
      width: var(--inspector-width);
      background: var(--panel-bg);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      z-index: 10;
    }

    /* ─── Pro Form Controls ──────────────────────────────────────── */
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .field-group-title {
      font-size: var(--type-caption);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    /* Section rail — one-line draggable rows (cross-track toggles, D7-D9) */
    .rail-list { display: flex; flex-direction: column; gap: 4px; }
    .rail-row {
      display: flex; align-items: center; gap: 8px;
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--input-bg);
      cursor: grab;
    }
    .rail-row:active { cursor: grabbing; }
    .rail-pinned, .rail-pinned:active { cursor: default; }
    .rail-pinned .rail-name { color: var(--text-muted); }
    .rail-dragging { opacity: 0.45; border-style: dashed; }
    .rail-handle { color: var(--text-muted); font-size: var(--type-caption); line-height: 1; user-select: none; }
    .rail-move { display: inline-flex; flex-direction: column; line-height: 0.6; flex: none; }
    .rail-move-btn {
      border: none; background: none; cursor: pointer;
      color: var(--text-muted); font-size: var(--type-micro); padding: 0 1px;
    }
    .rail-move-btn:hover { color: var(--accent); }
    .rail-move-off { opacity: 0.25; pointer-events: none; }
    .rail-name {
      flex: 1; min-width: 0;
      font-size: var(--type-caption); font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rail-badge {
      font-size: var(--type-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 999px;
      padding: 1px 6px; white-space: nowrap;
    }
    .rail-badge-extra { color: var(--accent); border-color: var(--accent); }
    .rail-select { width: 110px; flex: none; font-size: var(--type-caption); padding: 2px 4px; }
    .rail-remove {
      flex: none; border: none; background: none;
      color: var(--text-muted); font-size: var(--type-label); line-height: 1;
      cursor: pointer; padding: 0 2px;
    }
    .rail-remove:hover { color: var(--error); }
    .rail-add-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .rail-add-chip {
      font-size: var(--type-caption); font-weight: 600;
      border: 1px dashed var(--border); border-radius: 999px;
      background: none; color: var(--text-muted);
      padding: 3px 10px; cursor: pointer;
    }
    .rail-add-chip:hover { color: var(--accent); border-color: var(--accent); }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .field label {
      font-size: var(--type-caption);
      font-weight: 500;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .tip {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--control-bg);
      border: 1px solid var(--border);
      color: var(--text-muted);
      font-size: var(--type-micro);
      font-weight: 700;
      font-style: normal;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: default;
      flex-shrink: 0;
      user-select: none;
    }

    /* Native-feeling inputs */
    input[type="text"], input[type="number"], select, textarea {
      width: 100%;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      color: var(--text-main);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: var(--type-label);
      font-family: inherit;
      transition: all 0.15s ease;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
      appearance: none;
    }
    
    /* Custom select arrow */
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2340ECC0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
    }

    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px rgba(0,0,0,0.02);
    }
    
    textarea { resize: vertical; min-height: 64px; }
    .mono { font-family: var(--font-mono), Menlo, Monaco, monospace; font-size: var(--type-caption); }

    /* Layout Grids */
    .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* macOS Segmented Control */
    .segmented-control {
      display: flex;
      background: var(--control-bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    }
    /* .segment is a <button> so it is reachable and operable by keyboard. It was a div
       with a click handler, which no keyboard or screen-reader user could work. The
       reset below is what makes a button look like the div did.
       This sentence was written when TWO of the nine were converted and the other seven
       were still divs, including the Sign In / Request Access switch (round 15 [3]). All
       nine are buttons now, and tests/test_frontend_contracts.py enforces it, because a
       selector-wide claim in a comment is checked by nobody. */
    .segment {
      flex: 1;
      text-align: center;
      padding: 4px 8px;
      font-size: var(--type-caption);
      font-weight: 500;
      color: var(--text-muted);
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
      background: none;
      border: none;
      font-family: inherit;
    }
    .segment:focus-visible,
    .section-revision-close:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .segment.active {
      background: var(--canvas-bg);
      color: var(--text-main);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.05);
      font-weight: 600;
    }

    /* macOS Toggle Switch */
    .toggle-container {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 0;
    }
    .toggle-text { font-size: var(--type-caption); font-weight: 500; }
    .toggle-desc { font-size: var(--type-caption); color: var(--text-muted); margin-top: 2px; }
    
    .switch {
      position: relative; display: inline-block; width: 36px; height: 20px;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background-color: var(--border); transition: .3s; border-radius: 20px;
    }
    .slider:before {
      position: absolute; content: ""; height: 16px; width: 16px;
      left: 2px; bottom: 2px; background-color: white; transition: .3s;
      border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    input:checked + .slider { background-color: var(--success); }
    input:checked + .slider:before { transform: translateX(16px); }

    /* ─── Buttons ────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--space-2); min-height: var(--control-height); padding: 6px 14px;
      font-size: var(--type-label); font-weight: 500;
      border-radius: var(--radius-control); cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.15s ease;
      user-select: none;
      font-family: inherit;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    
    .btn-primary {
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
      color: var(--accent-text);
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), var(--shadow-btn);
      font-weight: 600;
      transition: all 0.15s ease;
    }
    .btn-primary:hover:not(:disabled) {
      filter: brightness(1.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 3px var(--accent-glow), var(--shadow-btn);
    }
    .btn-primary:active:not(:disabled) {
      filter: brightness(0.95);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }
    .homework-generate-btn {
      font-size: var(--type-micro);
      padding: 2px 10px;
      margin-top: 6px;
    }
    /* The bare `.is-busy` is for non-button hosts (the Tweak dialog blocks itself while it
       rebuilds). Kept as a selector LIST rather than widening `.btn.is-busy` to `.is-busy`,
       so buttons keep their original specificity and nothing they already win against can
       start beating them. Replaces the banned :style="…'opacity:.6;pointer-events:none'"
       ternaries — state styling is a class here, per public/CLAUDE.md. */
    .btn.is-busy,
    .is-busy {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    .homework-generate-note {
      font-size: var(--type-micro);
      color: var(--text-muted);
      margin-top: 4px;
    }

    .btn-secondary {
      background: var(--canvas-bg);
      color: var(--text-main);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-btn);
      transition: all 0.15s ease;
    }
    .btn-secondary:hover:not(:disabled) {
      background: var(--control-bg);
      border-color: var(--input-border);
    }
    .btn-secondary:active:not(:disabled) { background: var(--border); }

    .btn-danger {
      background: var(--canvas-bg);
      color: var(--error);
      border: 1px solid var(--border);
    }
    .btn-danger:hover:not(:disabled) {
      border-color: var(--error);
      background: rgba(255, 59, 48, 0.05);
    }

    .icon-btn {
      background: transparent; border: none; color: var(--text-muted);
      cursor: pointer; padding: 4px 8px; border-radius: 5px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      transition: background 0.12s, color 0.12s;
    }
    .icon-btn:hover { background: var(--control-bg); color: var(--text-main); }
    .icon-btn.active {
      color: var(--accent); background: var(--accent-glow);
      box-shadow: inset 0 0 0 1px rgba(64,236,192,0.25);
    }
    .icon-btn .btn-label { font-size: var(--type-micro); line-height: 1; letter-spacing: 0.02em; }

    /* ─── Canvas & Document UI ───────────────────────────────────── */
    .document-canvas {
      background: var(--canvas-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-canvas);
      width: 100%;
      max-width: 960px;
      min-height: 600px;
      display: flex;
      flex-direction: column;
    }

    .doc-header {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--canvas-bg);
      position: sticky;
      top: 0;
      z-index: 5;
    }
    
    .doc-title { font-size: var(--type-ui); font-weight: 600; }
    
    .doc-body {
      padding: 0;
      flex: 1;
      overflow-y: auto;
    }

    /* ─── Empty State ────────────────────────────────────────────── */
    .empty-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      flex: 1; color: var(--text-muted); text-align: center; gap: 16px;
      height: 100%; min-height: 400px;
    }
    .empty-icon {
      width: 64px; height: 64px; opacity: 0.5;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    }
    .empty-title { font-size: var(--type-lead); font-weight: 600; color: var(--text-main); }

    /* ─── Generating State (Pro Glowing Track) ───────────────────── */
    .gen-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      flex: 1; gap: 24px;
    }
    .loader-track {
      width: 200px; height: 4px; background: var(--border);
      border-radius: 4px; overflow: hidden; position: relative;
    }
    .loader-bar {
      position: absolute; top: 0; left: 0; height: 100%; width: 0%;
      background: var(--accent); border-radius: 4px;
      box-shadow: 0 0 10px var(--accent);
      transition: width 0.25s ease-out;
    }
    @keyframes scan {
      0% { left: -40%; }
      100% { left: 100%; }
    }

    /* ─── Data Tables ────────────────────────────────────────────── */
    .data-table {
      width: 100%; border-collapse: collapse; font-size: var(--type-label);
    }
    .data-table th {
      text-align: left; padding: 8px 16px;
      border-bottom: 1px solid var(--border-light);
      color: var(--text-muted); font-size: var(--type-caption);
      text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
      position: sticky; top: 0; background: var(--canvas-bg); z-index: 2;
    }
    .data-table td {
      padding: 10px 16px; border-bottom: 1px solid var(--border-light);
      vertical-align: top;
    }
    .data-table tr:hover td { background: var(--app-bg); }
    .data-table td:nth-child(1) { color: var(--text-muted); font-weight: 500; width: 140px; }
    .data-table td:nth-child(2) { font-weight: 600; width: 180px; }
    .data-table td:nth-child(3) { color: var(--text-main); }

    /* ─── Tabs ───────────────────────────────────────────────────── */
    .tab-bar {
      display: flex; gap: 20px; padding: 0 24px;
      border-bottom: 1px solid var(--border-light); background: var(--canvas-bg);
    }
    .tab {
      padding: 10px 0; font-size: var(--type-label); font-weight: 500;
      color: var(--text-muted); cursor: pointer;
      border-bottom: 2px solid transparent; transition: all 0.2s;
    }
    .tab:hover { color: var(--text-main); }
    .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

    /* ─── Toasts ─────────────────────────────────────────────────── */
    .toast-layer {
      position: fixed; top: 60px; right: 20px; z-index: 9999;
      display: flex; flex-direction: column; gap: 10px; pointer-events: none;
    }
    .toast {
      background: rgba(var(--panel-rgb), 0.95);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border); box-shadow: var(--shadow-pop);
      border-radius: 8px; padding: 12px 16px;
      display: flex; align-items: center; gap: 12px; font-weight: 500;
      color: var(--text-main); transform: translateX(120%);
      animation: slideIn 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes slideIn { to { transform: translateX(0); } }

    /* ─── Bottom Action Bar (Panel Left) ─────────────────────────── */
    .action-bar {
      padding: 16px;
      background: var(--panel-bg);
      border-top: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 8px;
    }
    .action-bar .btn-primary:hover:not(:disabled) {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 4px var(--accent-glow), var(--shadow-btn);
    }

    /* ─── Section Revision Slide-in Sheet ───────────────────────── */
    .section-revision-sheet {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 320px; z-index: 301;
      background: var(--panel-bg);
      border-left: 1px solid var(--border);
      box-shadow: var(--shadow-pop);
      display: flex; flex-direction: column;
      overflow-y: auto;
      padding: 24px 20px;
      gap: 16px;
      transform: translateX(0);
      transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .section-revision-sheet-enter { transform: translateX(100%); }
    .section-revision-sheet-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 4px;
    }
    .section-revision-sheet-title { font-size: var(--type-label); font-weight: 600; }
    /* Also a <button> now, for the same reason as .segment. padding/font-family are the
       button defaults that would otherwise shift it off the old div's geometry. */
    .section-revision-close {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--control-bg); border: 1px solid var(--border);
      color: var(--text-muted); font-size: var(--type-label); line-height: 1;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      padding: 0; font-family: inherit; flex-shrink: 0;
    }
    .section-revision-close:hover { background: var(--border); color: var(--text-main); }
    @media (max-width: 768px) {
      .section-revision-sheet { width: 100%; }
    }

    /* ─── Recruiter Review Modal ─────────────────────────────────── */
    .review-backdrop {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,0.45);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .review-modal {
      background: var(--canvas-bg);
      border-radius: 10px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.22);
      width: 100%; max-width: 880px; max-height: 90vh;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .review-modal-header {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 20px 14px 24px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .review-modal-title {
      font-size: var(--type-label); font-weight: 700; flex: 1;
      text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink);
    }
    .review-modal-label {
      font-size: var(--type-caption); color: var(--text-muted); font-weight: 400;
    }
    .review-modal-body {
      flex: 1; overflow-y: auto; padding: 24px 28px;
    }
    .review-section { margin-bottom: 26px; }
    .review-section-heading {
      font-size: var(--type-micro); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--accent-ink);
      border-bottom: 2px solid var(--accent);
      padding-bottom: 6px; margin-bottom: 10px;
    }
    .review-para {
      font-size: var(--type-label); line-height: 1.65; color: var(--text-main);
      margin-bottom: 6px;
    }
    .review-item {
      display: flex; gap: 8px; align-items: flex-start;
      font-size: var(--type-label); line-height: 1.6; color: var(--text-main);
      padding: 4px 0; border-bottom: 1px solid var(--border-light);
    }
    .review-item:last-child { border-bottom: none; }
    .review-item-bullet {
      flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); margin-top: 7px;
    }
    .review-no-review {
      font-size: var(--type-caption); color: var(--text-muted); text-align: center;
      padding: 40px 0;
    }
    .review-modal-footer {
      border-top: 1px solid var(--border); padding: 12px 20px;
      flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
      background: var(--panel-bg);
    }
    .review-section-revision-label {
      font-size: var(--type-micro); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.07em; color: var(--text-muted);
    }
    .review-section-revision-row {
      display: flex; gap: 8px; align-items: flex-end;
    }
    .review-section-revision-row textarea {
      flex: 1; font-size: var(--type-caption); padding: 7px 10px;
      border: 1px solid var(--border); border-radius: 6px;
      background: var(--input-bg); color: var(--text-main);
      resize: none; min-height: 52px; font-family: inherit;
    }
    .review-section-revision-row textarea:focus { outline: none; border-color: var(--accent); }

    /* ─── Utilities ──────────────────────────────────────────────── */
    [x-cloak] { display: none !important; }
    .raw-json {
      background: var(--control-bg); padding: 16px; border-radius: 0;
      font-family: var(--font-mono); font-size: var(--type-caption);
      overflow: auto; border: none; margin: 0; color: var(--text-main);
    }

    /* ─── Mobile Responsive ──────────────────────────────────────── */
    @media (max-width: 768px) {
      body { overflow: auto; }
      #app-container { height: auto; min-height: 100vh; }
      .workspace { flex-direction: column; overflow: visible; gap: var(--shell-gap); padding: var(--shell-gutter); }
      .panel-left {
        width: 100% !important; min-width: unset; max-width: none;
        resize: none; border-right: none;
        border-bottom: 1px solid var(--border);
      }
      .panel-right { width: 100%; border-left: none; border-top: 1px solid var(--border); }
      .panel-center { padding: var(--canvas-padding); }
      .document-canvas { border-radius: var(--radius-control); }
      .toolbar { padding: 0 var(--shell-gutter); gap: var(--shell-gap); }
      .toolbar-title span:not(.badge-pro) { display: none; }
    }

    /* ─── Track Selector ────────────────────────────────────────── */
    .track-selector-wrap {
      padding: 16px 16px 0;
      border-bottom: 1px solid var(--border);
      background: var(--panel-bg);
      flex-shrink: 0;
    }
    .track-selector-wrap select {
      font-size: var(--type-label);
      font-weight: 600;
    }

    /* ─── Lesson Renderer ────────────────────────────────────────── */
    .lesson-renderer { padding: 24px; }
    .lesson-section { margin-bottom: 28px; }
    .lesson-section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--type-caption);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-ink);
      border-bottom: 2px solid var(--accent);
      padding-bottom: 7px;
      margin-bottom: 12px;
    }
    .lesson-section-edit-btn {
      font-size: var(--type-micro);
      font-weight: 600;
      color: var(--text-muted);
      background: none;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 8px;
      cursor: pointer;
      letter-spacing: 0;
      text-transform: none;
      font-family: inherit;
      transition: color 0.12s, border-color 0.12s;
    }
    .lesson-section-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
    .lesson-row {
      display: flex;
      gap: 16px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-light);
      align-items: flex-start;
    }
    .lesson-row:last-child { border-bottom: none; }
    .lesson-row-label {
      font-size: var(--type-caption);
      font-weight: 600;
      color: var(--text-muted);
      min-width: 140px;
      flex-shrink: 0;
      line-height: 1.5;
      padding-top: 1px;
    }
    .lesson-row-content {
      font-size: var(--type-label);
      color: var(--text-main);
      flex: 1;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* ─── History Drawer ──────────────────────────────────────────── */
    .history-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 340px; max-width: 90vw;
      background: var(--panel-bg);
      border-left: 1px solid var(--border);
      box-shadow: var(--shadow-pop);
      z-index: 200;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .history-drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      font-size: var(--type-label); font-weight: 600;
      flex-shrink: 0;
    }
    .history-list { overflow-y: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .history-item {
      background: var(--canvas-bg);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      padding: 10px 12px;
      display: flex; flex-direction: column; gap: 4px;
      cursor: default;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .history-item:hover {
      border-color: var(--border);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .history-item-top { display: flex; align-items: center; gap: 6px; }
    .history-item-topic { font-size: var(--type-caption); font-weight: 500; color: var(--text-main); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .history-item-meta { font-size: var(--type-caption); color: var(--text-muted); }
    .history-badge { font-size: var(--type-micro); font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--control-bg); color: var(--text-muted); white-space: nowrap; }

    /* ─── Track Picker ───────────────────────────────────────────── */
    .track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .track-grid .track-card:last-child:nth-child(3n+1) { grid-column: 2; }
    .track-card {
      background: var(--canvas-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 18px;
      text-align: left;
      cursor: pointer;
      transition: box-shadow 0.15s, border-color 0.15s;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .track-card:hover { box-shadow: var(--shadow-pop); border-color: var(--accent); }
    .track-back-btn {
      font-size: var(--type-caption);
      color: var(--text-muted);
      cursor: pointer;
      padding: 3px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      white-space: nowrap;
      background: none;
      transition: color 0.15s, border-color 0.15s;
    }
    .track-back-btn:hover { color: var(--accent); border-color: var(--accent); }

    /* ─── Shared utility classes extracted from repeated inline styles ─── */
    .auth-error {
      font-size: var(--type-caption); color: var(--error);
      padding: 8px 10px; background: rgba(255,59,48,0.08); border-radius: 6px;
    }
    .accordion-panel { border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
    .accordion-btn {
      width: 100%; text-align: left; padding: 5px 9px; font-size: var(--type-micro); font-weight: 600;
      background: var(--app-bg); border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; color: var(--text-main);
    }
    .accordion-body { padding: 8px; background: var(--canvas-bg); display: flex; flex-direction: column; gap: 6px; }
    .link-display-input {
      font-size: var(--type-micro); font-family: var(--font-mono), Menlo, Consolas, monospace; flex: 1;
      background: var(--app-bg); color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px;
    }
  

/* Body-level style, from index.html */
@keyframes spin { to { transform: rotate(360deg); } }

/* index.html's style attributes, one class each */
body.teacher-copy .teacher-style-001 { position:fixed;inset:0;background:var(--app-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;gap:14px; }
body.teacher-copy .teacher-style-002 { height:52px;width:auto; }
body.teacher-copy .teacher-style-003 { font-family:var(--font-brand);font-size: var(--type-section);font-weight:700;letter-spacing:-0.01em;color:var(--text-main); }
body.teacher-copy .teacher-style-004 { height:100vh; }
body.teacher-copy .teacher-style-005 { position:fixed;inset:0;background:var(--app-bg);display:flex;align-items:center;justify-content:center;z-index:9999; }
body.teacher-copy .teacher-style-006 { background:var(--canvas-bg);border:1px solid var(--border);border-radius:20px;padding:40px 36px;width:360px;max-width:90vw;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:28px; }
body.teacher-copy .teacher-style-007 { display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center; }
body.teacher-copy .teacher-style-008 { height:clamp(80px,22vw,110px);width:auto; }
body.teacher-copy .teacher-style-009 { font-family:var(--font-brand);font-size: var(--type-title);font-weight:700;letter-spacing:-0.01em;line-height:1.1; }
body.teacher-copy .teacher-style-010 { font-size: var(--type-caption);color:var(--text-muted);margin-top:4px;letter-spacing:0.01em; }
body.teacher-copy .teacher-style-011 { display:flex;flex-direction:column;gap:12px;margin-top:-8px; }
body.teacher-copy .teacher-style-012 { font-size: var(--type-label); }
body.teacher-copy .teacher-style-013 { height:38px;font-size: var(--type-label);margin-top:4px; }
body.teacher-copy .teacher-style-014 { text-align:center;margin-top:2px; }
body.teacher-copy .teacher-style-015 { font-size: var(--type-caption);color:var(--text-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px; }
body.teacher-copy .teacher-style-016 { font-size: var(--type-caption);color:var(--text-muted);line-height:1.6; }
body.teacher-copy .teacher-style-017 { height:38px;font-size: var(--type-label); }
body.teacher-copy .teacher-style-018 { text-align:center; }
body.teacher-copy .teacher-style-019 { text-align:center;padding:8px 0 4px; }
body.teacher-copy .teacher-style-020 { font-size: var(--type-section);margin-bottom:10px; }
body.teacher-copy .teacher-style-021 { font-size: var(--type-label);font-weight:600;margin-bottom:8px; }
body.teacher-copy .teacher-style-022 { font-size: var(--type-caption);color:var(--text-muted);line-height:1.7; }
body.teacher-copy .teacher-style-023 { margin-top:18px;font-size: var(--type-label); }
body.teacher-copy .teacher-style-024 { display:flex;flex-direction:column;gap:12px; }
body.teacher-copy .teacher-style-025 { font-size: var(--type-label);width:100%; }
body.teacher-copy .teacher-style-026 { font-size: var(--type-caption);color:var(--text-muted);margin-top:4px;padding-left:2px; }
body.teacher-copy .teacher-style-027 { position:fixed;inset:0;background:var(--app-bg);z-index:9998;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px; }
body.teacher-copy .teacher-style-028 { width:100%;max-width:700px;display:flex;flex-direction:column;gap:40px; }
body.teacher-copy .teacher-style-029 { display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; }
body.teacher-copy .teacher-style-030 { height:44px;width:auto; }
body.teacher-copy .teacher-style-031 { font-family:var(--font-brand);font-size: var(--type-title);font-weight:700;letter-spacing:-0.01em; }
body.teacher-copy .teacher-style-032 { font-size: var(--type-label);color:var(--text-muted); }
body.teacher-copy .teacher-style-033 { font-size: var(--type-micro);font-weight:700;letter-spacing:0.07em;color:var(--accent);background:var(--accent-glow);padding:2px 8px;border-radius:4px;align-self:flex-start; }
body.teacher-copy .teacher-style-034 { font-size: var(--type-label);font-weight:600;margin-bottom:4px; }
body.teacher-copy .teacher-style-035 { font-size: var(--type-caption);color:var(--text-muted);line-height:1.6; }
body.teacher-copy .teacher-style-036 { font-size: var(--type-micro);font-weight:600;color:var(--accent);opacity:0.8;border:1px solid currentColor;padding:0 4px;border-radius:3px;margin-left:4px; }
body.teacher-copy .teacher-style-037 { text-align:center;font-size: var(--type-caption);color:var(--text-muted); }
body.teacher-copy .teacher-style-038 { cursor:pointer;text-decoration:underline; }
body.teacher-copy .teacher-style-039 { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9997;display:flex;align-items:center;justify-content:center;padding:24px; }
body.teacher-copy .teacher-style-040 { background:var(--canvas-bg);border:1px solid var(--border);border-radius:16px;padding:24px;width:400px;max-width:92vw;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:18px; }
body.teacher-copy .teacher-style-041 { display:flex;flex-direction:column;gap:4px; }
body.teacher-copy .teacher-style-042 { font-size: var(--type-ui);font-weight:600; }
body.teacher-copy .teacher-style-043 { font-size: var(--type-caption);color:var(--text-muted);line-height:1.5; }
body.teacher-copy .teacher-style-044 { display:flex;flex-direction:column;gap:6px; }
body.teacher-copy .teacher-style-045 { font-size: var(--type-caption);font-weight:600;color:var(--text-muted); }
body.teacher-copy .teacher-style-046 { font-size: var(--type-caption);padding:5px 7px;border:1px solid var(--border);border-radius:6px;background:var(--canvas-bg);color:var(--text-main); }
body.teacher-copy .teacher-style-047 { font-size: var(--type-caption);line-height:1.5;color:var(--text-muted);border-left:2px solid var(--accent);padding-left:9px; }
body.teacher-copy .teacher-style-048 { display:flex;align-items:center;justify-content:flex-end;gap:8px; }
body.teacher-copy .teacher-style-049 { font-size: var(--type-caption);padding:4px 12px; }
body.teacher-copy .teacher-style-050 { display:flex;align-items:center;flex-shrink:0;line-height:0; }
body.teacher-copy .teacher-style-051 { display:flex;align-items:center;gap:12px; }
body.teacher-copy .teacher-style-052 { height:28px; width:auto; display:block; }
body.teacher-copy .teacher-style-053 { padding-bottom:12px; }
body.teacher-copy .teacher-style-054 { font-size: var(--type-caption);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted); }
body.teacher-copy .teacher-style-055 { font-size: var(--type-caption);color:var(--accent);line-height:1.5; }
body.teacher-copy .teacher-style-056 { padding-bottom:14px; }
body.teacher-copy .teacher-style-057 { display:flex;justify-content:space-between;align-items:center; }
body.teacher-copy .teacher-style-058 { display:flex;flex-wrap:wrap;gap:6px;margin-top:4px; }
body.teacher-copy .teacher-style-059 { display:flex;flex-direction:column;gap:12px; }
body.teacher-copy .teacher-style-060 { font-size: var(--type-caption);color:#b45309;background:#fef9c3;border:1px solid #fde68a;border-radius:6px;padding:8px 10px;line-height:1.5; }
body.teacher-copy .teacher-style-061 { display:flex;flex-wrap:wrap;gap:6px;margin-top:4px; }
body.teacher-copy .teacher-style-062 { display:none; }
body.teacher-copy .teacher-style-066 { width:100%;font-size: var(--type-caption);padding:4px 6px;border:1px solid var(--border);border-radius:4px; }
body.teacher-copy .teacher-style-067 { font-size: var(--type-caption);color:var(--text-muted); }
body.teacher-copy .teacher-style-068 { display:flex; justify-content:space-between; align-items:baseline; }
body.teacher-copy .teacher-style-069 { font-size: var(--type-caption); color:var(--text-muted); }
body.teacher-copy .teacher-style-071 { font-size: var(--type-caption);padding:2px 8px; }
body.teacher-copy .teacher-style-072 { padding:5px 10px; background:var(--control-bg); border:1px solid var(--border); border-radius:4px; font-size: var(--type-caption); color:var(--text-muted); overflow-x:auto; white-space:nowrap; line-height:22px; }
body.teacher-copy .teacher-style-073 { width:100%;font-size: var(--type-caption); }
body.teacher-copy .teacher-style-074 { margin-right:5px;vertical-align:-1px; }
body.teacher-copy .teacher-style-075 { width: 100%; height: 40px; font-size: var(--type-label); position:relative; }
body.teacher-copy .teacher-style-076 { margin-right:6px;vertical-align:-2px; }
body.teacher-copy .teacher-style-077 { display:flex;align-items:center;justify-content:center;gap:8px; }
body.teacher-copy .teacher-style-078 { animation:spin 1s linear infinite; }
body.teacher-copy .teacher-style-079 { font-size: var(--type-caption); color:var(--text-muted); text-align:center; padding-top:2px; }
body.teacher-copy .teacher-style-080 { min-height:unset; }
body.teacher-copy .teacher-style-081 { font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; font-size: var(--type-caption); color: var(--text-muted); }
body.teacher-copy .teacher-style-082 { font-size: var(--type-caption); color: var(--text-muted); opacity: 0.6; margin-top: 6px; }
body.teacher-copy .teacher-style-083 { color: var(--error); font-size: var(--type-label); font-weight: 500; margin-bottom: 8px; }
body.teacher-copy .teacher-style-084 { font-size: var(--type-caption); color: var(--text-muted); max-width: 380px; text-align: center; line-height: 1.6; }
body.teacher-copy .teacher-style-085 { margin-top: 16px; font-size: var(--type-caption); }
body.teacher-copy .teacher-style-086 { background: color-mix(in srgb, var(--error) 10%, var(--canvas-bg)); border: 1px solid var(--error); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
body.teacher-copy .teacher-style-087 { color: var(--error); font-size: var(--type-caption); font-weight: 600; white-space: nowrap; }
body.teacher-copy .teacher-style-088 { font-size: var(--type-caption); color: var(--text-muted); flex: 1; line-height: 1.5; }
body.teacher-copy .teacher-style-089 { color: var(--text-muted); font-size: var(--type-label); background: none; border: none; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
body.teacher-copy .teacher-style-090 { color:var(--warning); margin-right:6px; }
body.teacher-copy .teacher-style-091 { color:var(--success); margin-right:6px; }
body.teacher-copy .teacher-style-093 { opacity:0.6;font-size: var(--type-caption);font-weight:400;margin-left:2px; }
body.teacher-copy .teacher-style-094 { margin-right:4px; }
body.teacher-copy .teacher-style-095 { display:flex;gap:6px;align-items:center; }
body.teacher-copy .teacher-style-096 { padding: 20px 16px; }
body.teacher-copy .teacher-style-097 { display:flex;align-items:center;gap:8px;margin:24px 0 16px; }
body.teacher-copy .teacher-style-098 { flex:1;height:1px;background:var(--border); }
body.teacher-copy .teacher-style-099 { font-size: var(--type-micro);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);white-space:nowrap; }
body.teacher-copy .teacher-style-100 { display:flex;align-items:center;gap:8px;margin:16px 0 12px; }
body.teacher-copy .teacher-style-101 { padding:24px 16px;text-align:center;font-size: var(--type-caption);color:var(--text-muted); }
body.teacher-copy .teacher-style-102 { display:flex;align-items:center;justify-content:space-between;gap:8px; }
body.teacher-copy .teacher-style-103 { color:var(--accent); }
body.teacher-copy .teacher-style-104 { font-size: var(--type-caption);padding:2px 10px;flex-shrink:0; }
body.teacher-copy .teacher-style-105 { font-size: var(--type-caption);padding:3px 10px;text-decoration:none; }
body.teacher-copy .teacher-style-106 { padding:12px 12px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px; }
body.teacher-copy .teacher-style-107 { font-size: var(--type-caption);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
body.teacher-copy .teacher-style-108 { font-size: var(--type-caption); }
body.teacher-copy .teacher-style-109 { font-size: var(--type-caption);min-height:48px;resize:vertical; }
body.teacher-copy .teacher-style-110 { display:flex;gap:6px;padding-bottom:12px; }
body.teacher-copy .teacher-style-111 { font-size: var(--type-caption);flex:1; }
body.teacher-copy .teacher-style-112 { padding:8px 16px;border-bottom:1px solid var(--border-light); }
body.teacher-copy .teacher-style-113 { font-size: var(--type-caption);padding:2px 10px; }
body.teacher-copy .teacher-style-114 { display:flex;align-items:center;gap:6px;cursor:pointer; }
body.teacher-copy .teacher-style-115 { flex-shrink:0;color:var(--text-muted);transition:transform .15s; }
body.teacher-copy .teacher-style-116 { font-weight:600;flex:1; }
body.teacher-copy .teacher-style-117 { font-size: var(--type-micro);font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;background:var(--text-muted);color:#fff;flex-shrink:0; }
body.teacher-copy .teacher-style-118 { font-size: var(--type-caption);color:var(--text-muted);margin-top:2px;padding-left:16px; }
body.teacher-copy .teacher-style-119 { margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light); }
body.teacher-copy .teacher-style-120 { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-light); }
body.teacher-copy .teacher-style-121 { min-width:0; }
body.teacher-copy .teacher-style-122 { font-size: var(--type-caption);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
body.teacher-copy .teacher-style-123 { font-size: var(--type-micro);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em; }
body.teacher-copy .teacher-style-124 { font-size: var(--type-micro);padding:2px 8px;flex-shrink:0; }
body.teacher-copy .teacher-style-125 { font-size: var(--type-micro);font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;color:#fff;flex-shrink:0; }
body.teacher-copy .teacher-style-126 { font-size: var(--type-micro);font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;background:var(--success);color:#fff;flex-shrink:0; }
body.teacher-copy .teacher-style-127 { font-size: var(--type-micro);font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;background:#2980b9;color:#fff;flex-shrink:0; }
body.teacher-copy .teacher-style-128 { font-size: var(--type-micro);font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;background:#e67e22;color:#fff;flex-shrink:0; }
body.teacher-copy .teacher-style-129 { font-size: var(--type-micro);font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;background:var(--accent);color:var(--accent-text);flex-shrink:0; }
body.teacher-copy .teacher-style-130 { font-size: var(--type-caption);color:var(--text-muted);margin-bottom:6px; }
body.teacher-copy .teacher-style-131 { display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px; }
body.teacher-copy .teacher-style-132 { font-size: var(--type-micro);padding:2px 8px; }
body.teacher-copy .teacher-style-133 { font-size: var(--type-micro);padding:2px 8px;display:inline-flex;align-items:center;text-decoration:none; }
body.teacher-copy .teacher-style-134 { display:flex;gap:4px;align-items:center;margin-bottom:6px; }
body.teacher-copy .teacher-style-135 { margin-bottom:6px; }
body.teacher-copy .teacher-style-136 { font-size: var(--type-micro);color:var(--text-muted); }
body.teacher-copy .teacher-style-137 { margin-top:6px; }
body.teacher-copy .teacher-style-138 { font-size: var(--type-micro);color:var(--text-muted); }
body.teacher-copy .teacher-style-139 { border:1px solid var(--border-light);border-radius:4px;overflow:hidden;margin-bottom:4px; }
body.teacher-copy .teacher-style-140 { display:flex;align-items:center;gap:6px;padding:4px 6px;font-size: var(--type-caption); }
body.teacher-copy .teacher-style-141 { flex:1;min-width:0; }
body.teacher-copy .teacher-style-142 { font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
body.teacher-copy .teacher-style-143 { font-size: var(--type-micro);padding:1px 8px;flex-shrink:0; }
body.teacher-copy .teacher-style-144 { display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 6px 5px; }
body.teacher-copy .teacher-style-145 { display:flex;align-items:center;gap:6px;padding:0 6px 5px; }
body.teacher-copy .teacher-style-146 { font-size: var(--type-micro);padding:1px 8px;flex-shrink:0;margin-left:auto; }
body.teacher-copy .teacher-style-147 { padding:0 6px 5px; }
body.teacher-copy .teacher-style-148 { font-size: var(--type-micro);color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0; }
body.teacher-copy .teacher-style-149 { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
body.teacher-copy .teacher-style-150 { font-size: var(--type-micro);color:var(--error);font-weight:600; }
body.teacher-copy .teacher-style-151 { font-size: var(--type-micro);padding:1px 8px;color:var(--error);border-color:var(--error); }
body.teacher-copy .teacher-style-152 { font-size: var(--type-micro);padding:1px 8px; }
body.teacher-copy .teacher-style-153 { border:1px solid var(--border-light);border-radius:4px;overflow:hidden; }
body.teacher-copy .teacher-style-154 { display:flex;align-items:center;gap:4px;padding:4px 6px;font-size: var(--type-caption); }
body.teacher-copy .teacher-style-155 { cursor:pointer;flex-shrink:0; }
body.teacher-copy .teacher-style-156 { flex:1;font-weight:500; }
body.teacher-copy .teacher-style-157 { margin-top:2px; }
body.teacher-copy .teacher-style-158 { display:flex;gap:6px;margin-bottom:4px; }
body.teacher-copy .teacher-style-159 { flex:1;min-width:0;font-size: var(--type-caption);padding:4px 6px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main); }
body.teacher-copy .teacher-style-160 { display:flex;align-items:center;gap:6px;font-size: var(--type-micro);color:var(--text-muted);margin-top:4px;line-height:1.4; }
body.teacher-copy .teacher-style-161 { animation:spin 1s linear infinite;flex-shrink:0; }
body.teacher-copy .teacher-style-162 { display:block;font-size: var(--type-micro);color:var(--error);margin-top:4px;line-height:1.4; }
body.teacher-copy .teacher-style-163 { font-size: var(--type-micro);padding:2px 8px;margin-top:4px; }
body.teacher-copy .teacher-style-164 { display:block;font-size: var(--type-micro);color:var(--text-muted);margin-top:3px;line-height:1.4; }
body.teacher-copy .teacher-style-165 { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
body.teacher-copy .teacher-style-166 { font-size: var(--type-micro);color:var(--text-muted);margin-bottom:2px; }
body.teacher-copy .teacher-style-167 { width:100%;font-size: var(--type-caption);padding:3px 5px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main); }
body.teacher-copy .teacher-style-168 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px; }
body.teacher-copy .teacher-style-169 { width:100%;font-size: var(--type-caption);padding:3px 4px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main); }
body.teacher-copy .teacher-style-170 { width:100%;font-size: var(--type-caption);padding:3px 5px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main);resize:vertical; }
body.teacher-copy .teacher-style-171 { display:flex;gap:6px;align-items:center;padding-top:2px; }
body.teacher-copy .teacher-style-172 { font-size: var(--type-micro);padding:3px 10px; }
body.teacher-copy .teacher-style-175 { padding:6px;display:flex;flex-direction:column;gap:4px; }
body.teacher-copy .teacher-style-176 { font-size: var(--type-caption);padding:2px 5px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main); }
body.teacher-copy .teacher-style-177 { font-size: var(--type-micro);padding:3px 5px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main);resize:vertical;font-family: var(--font-mono); }
body.teacher-copy .teacher-style-178 { display:flex;gap:4px; }
body.teacher-copy .teacher-style-179 { margin-top:2px;display:flex;flex-direction:column;gap:4px; }
body.teacher-copy .teacher-style-180 { font-size: var(--type-micro);padding:3px 5px;border:1px solid var(--border);border-radius:4px;background:var(--app-bg);color:var(--text-main);resize:vertical; }
body.teacher-copy .teacher-style-181 { font-size: var(--type-micro);padding:2px 8px;align-self:flex-start; }
body.teacher-copy .teacher-style-182 { display:flex;gap:4px;align-items:center;margin-top:4px;flex-wrap:wrap; }
body.teacher-copy .teacher-style-183 { font-size: var(--type-caption);padding:2px 5px;border:1px solid var(--border);border-radius:4px; }
body.teacher-copy .teacher-style-184 { display:flex;gap:4px;align-items:center;margin-top:4px; }
body.teacher-copy .teacher-style-185 { display:flex;gap:2px;margin-bottom:8px; }
body.teacher-copy .teacher-style-186 { display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:6px; }
body.teacher-copy .teacher-style-187 { font-size: var(--type-micro);font-weight:600;margin-bottom:4px;color:var(--text-muted); }
body.teacher-copy .teacher-style-188 { display:flex;align-items:center;gap:6px;margin-bottom:3px; }
body.teacher-copy .teacher-style-189 { cursor:pointer; }
body.teacher-copy .teacher-style-190 { font-size: var(--type-micro);cursor:pointer;flex:1;font-weight:600; }
body.teacher-copy .teacher-style-191 { font-size: var(--type-micro);padding:1px 4px;border:1px solid var(--border);border-radius:3px; }
body.teacher-copy .teacher-style-192 { display:flex;align-items:center;gap:6px;margin-bottom:6px; }
body.teacher-copy .teacher-style-193 { font-weight:400;color:var(--text-muted); }
body.teacher-copy .teacher-style-194 { font-size: var(--type-micro);cursor:pointer;flex:1; }
body.teacher-copy .teacher-style-195 { font-size: var(--type-micro);color:var(--text-muted);margin-bottom:3px; }
body.teacher-copy .teacher-style-196 { font-size: var(--type-caption);padding:2px 5px;border:1px solid var(--border);border-radius:4px;width:100%; }
body.teacher-copy .teacher-style-197 { font-size: var(--type-micro);color:var(--text-muted);margin-top:3px; }
body.teacher-copy .teacher-style-198 { font-size: var(--type-micro);cursor:pointer; }
body.teacher-copy .teacher-style-199 { font-size: var(--type-micro);padding:2px 10px; }
body.teacher-copy .teacher-style-200 { font-size: var(--type-micro);color:var(--error);margin-top:4px; }
body.teacher-copy .teacher-style-201 { margin-top:6px;background:var(--app-bg);border:1px solid var(--border);border-radius:4px;padding:8px; }
body.teacher-copy .teacher-style-202 { font-size: var(--type-micro);font-weight:600;margin-bottom:6px; }
body.teacher-copy .teacher-style-203 { font-size: var(--type-micro);padding:3px 0;border-bottom:1px solid var(--border-light); }
body.teacher-copy .teacher-style-204 { font-weight:600;color:var(--accent); }
body.teacher-copy .teacher-style-205 { color:var(--text-muted);margin-left:6px; }
body.teacher-copy .teacher-style-206 { font-size: var(--type-micro);padding:2px 10px;margin-top:8px; }
body.teacher-copy .teacher-style-207 { margin-bottom:4px; }
body.teacher-copy .teacher-style-208 { font-size: var(--type-caption);color:var(--text-muted);padding:4px 0; }
body.teacher-copy .teacher-style-209 { display:flex;align-items:center;justify-content:space-between;margin-bottom:4px; }
body.teacher-copy .teacher-style-210 { font-size: var(--type-micro);padding:1px 8px; }
body.teacher-copy .teacher-style-211 { display:flex;align-items:center;gap:4px;padding:4px 0;border-bottom:1px solid var(--border-light);font-size: var(--type-caption); }
body.teacher-copy .teacher-style-212 { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
body.teacher-copy .teacher-style-213 { color:var(--text-muted);flex-shrink:0;font-size: var(--type-micro); }
body.teacher-copy .teacher-style-214 { font-size: var(--type-micro);padding:1px 5px;flex-shrink:0; }
body.teacher-copy .teacher-style-215 { font-size: var(--type-micro);padding:1px 5px;flex-shrink:0;color:var(--text-muted); }
body.teacher-copy .teacher-style-216 { font-size: var(--type-micro);padding:1px 5px;flex-shrink:0;color:var(--error);border-color:var(--error); }
body.teacher-copy .teacher-style-217 { padding:4px 8px;margin-bottom:2px;font-size: var(--type-micro);background:var(--control-bg);border:1px solid var(--border);border-radius:3px; }
body.teacher-copy .teacher-style-218 { color:var(--success);font-weight:600; }
body.teacher-copy .teacher-style-219 { color:var(--error);font-weight:600; }
body.teacher-copy .teacher-style-220 { color:var(--error);margin-bottom:2px; }
body.teacher-copy .teacher-style-221 { display:flex;gap:6px;margin-top:4px; }
body.teacher-copy .teacher-style-222 { font-size: var(--type-micro);padding:1px 8px;background:var(--accent);color:#fff;border-color:var(--accent); }
body.teacher-copy .teacher-style-223 { display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 0;border-bottom:1px solid var(--border-light);font-size: var(--type-caption);flex-wrap:wrap; }
body.teacher-copy .teacher-style-224 { font-size: var(--type-micro);padding:1px 6px; }
body.teacher-copy .teacher-style-225 { font-size: var(--type-micro);color:var(--accent);background:none;border:none;cursor:pointer;padding:0;font-weight:600; }
body.teacher-copy .teacher-style-226 { margin-top:6px;font-size: var(--type-micro);font-family: var(--font-mono);white-space:pre-wrap;line-height:1.6;color:var(--text-muted);background:var(--app-bg);border:1px solid var(--border);border-radius:4px;padding:8px;max-height:200px;overflow-y:auto; }
body.teacher-copy .teacher-style-227 { font-size: var(--type-micro);color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0; }
body.teacher-copy .teacher-style-228 { display:flex;align-items:center;gap:8px; }
body.teacher-copy .teacher-style-229 { font-size: var(--type-micro);color:var(--error);font-weight:600; }
body.teacher-copy .teacher-style-230 { font-size: var(--type-micro);padding:2px 8px;color:var(--error);border-color:var(--error); }
body.teacher-copy .teacher-style-231 { gap:12px; }
body.teacher-copy .teacher-style-232 { max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; padding:6px 10px; background:var(--input-bg); display:flex; flex-direction:column; gap:6px; }
body.teacher-copy .teacher-style-233 { display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:400; }
body.teacher-copy .teacher-style-234 { width:auto; }
body.teacher-copy .teacher-style-235 { min-height:100px; }
body.teacher-copy .teacher-style-236 { width:100%; }
body.teacher-copy .teacher-style-237 { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 16px;padding:4px 0; }
body.teacher-copy .teacher-style-238 { font-weight:600;color:var(--text-muted); }
body.teacher-copy .teacher-style-239 { font-size: var(--type-label);padding-top:2px; }
body.teacher-copy .teacher-style-240 { display:flex;flex-direction:column;gap:12px;padding-top:4px; }
body.teacher-copy .teacher-style-241 { font-size: var(--type-caption);font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em;margin-bottom:5px; }
body.teacher-copy .teacher-style-242 { padding:7px 9px;border-radius:5px;background:var(--app-bg); }
body.teacher-copy .teacher-style-243 { display:flex;gap:8px;align-items:baseline;flex-wrap:wrap; }
body.teacher-copy .teacher-style-244 { font-size: var(--type-label);font-weight:600; }
body.teacher-copy .teacher-style-245 { font-size: var(--type-micro);font-weight:700;text-transform:uppercase; }
body.teacher-copy .teacher-style-246 { font-size: var(--type-micro);padding:1px 6px;background:var(--border-light);color:var(--text-muted);border-radius:10px;text-transform:uppercase;font-weight:600;letter-spacing:.03em; }
body.teacher-copy .teacher-style-247 { font-size: var(--type-micro);color:var(--text-muted);margin-left:auto; }
body.teacher-copy .teacher-style-248 { font-size: var(--type-caption);font-style:italic;color:var(--text-muted);margin-top:3px; }
body.teacher-copy .teacher-style-249 { align-items:flex-start;padding:8px 0; }
body.teacher-copy .teacher-style-250 { margin-top:5px;background:#E67E22; }
body.teacher-copy .teacher-style-251 { flex:1; }
body.teacher-copy .teacher-style-252 { font-size: var(--type-caption);font-weight:600; }
body.teacher-copy .teacher-style-253 { font-size: var(--type-caption);color:var(--text-muted);margin-top:2px; }
body.teacher-copy .teacher-style-254 { margin-top:5px; }
body.teacher-copy .teacher-style-255 { font-size: var(--type-caption);font-weight:600;display:flex;gap:8px;align-items:center; }
body.teacher-copy .teacher-style-256 { font-size: var(--type-caption);color:var(--text-muted);margin-top:2px; }
body.teacher-copy .teacher-style-257 { display:flex;flex-direction:column;gap:8px;padding-top:4px; }
body.teacher-copy .teacher-style-258 { border:1px solid var(--border-light);border-radius:6px;padding:8px 11px; }
body.teacher-copy .teacher-style-259 { font-size: var(--type-caption);color:var(--text-muted);margin-top:3px; }
body.teacher-copy .teacher-style-260 { font-weight:600; }
body.teacher-copy .teacher-style-261 { font-size: var(--type-caption);color:var(--text-muted);margin-top:2px; }
body.teacher-copy .teacher-style-262 { font-size: var(--type-caption);padding:6px 14px;white-space:nowrap; }
body.teacher-copy .teacher-style-263 { margin-top:6px;font-size: var(--type-caption);color:var(--text-muted); }
body.teacher-copy .teacher-style-264 { padding:4px 0;font-size: var(--type-caption); }
body.teacher-copy .teacher-style-265 { font-weight:600;color:var(--text-main); }
body.teacher-copy .teacher-style-266 { white-space:pre-wrap;color:var(--text-muted);margin-top:2px; }

/* State-driven presentation replaces the original Alpine style expressions. */
body.teacher-copy .teacher-toast-tone { color:var(--accent-ink); }
body.teacher-copy .teacher-toast-tone.is-success { color:var(--success-ink); }
body.teacher-copy .teacher-toast-tone.is-error { color:var(--error); }
body.teacher-copy .teacher-choice-chip { padding:5px 12px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text-main); font-size:var(--type-caption); font-weight:var(--weight-medium); cursor:pointer; user-select:none; transition:background .15s,border-color .15s,color .15s; }
body.teacher-copy .teacher-choice-chip.is-selected { border-color:var(--accent); background:var(--accent); color:var(--accent-text); }
body.teacher-copy .teacher-upload-result.is-success { background:var(--success-pale); color:var(--success-ink); }
body.teacher-copy .teacher-upload-result.is-error { background:var(--error-pale); color:var(--error); }
body.teacher-copy .teacher-progress { width:var(--teacher-progress, 0%); }
body.teacher-copy .is-busy { opacity:.55; pointer-events:none; cursor:default; }
body.teacher-copy .teacher-chevron { transition:transform .15s; }
body.teacher-copy .teacher-chevron.is-open { transform:rotate(90deg); }
body.teacher-copy .history-item.is-selected { border-color:var(--accent); }
body.teacher-copy .btn.is-selected { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
body.teacher-copy .teacher-day-badge { background:var(--accent); color:var(--accent-text); }
body.teacher-copy .teacher-day-badge.is-urgent { background:var(--error-pale); color:var(--text-main); border:1px solid var(--error); }
body.teacher-copy .teacher-day-badge.is-warning { background:var(--control-bg); color:var(--warn-ink); }
body.teacher-copy .teacher-exam-status { color:var(--text-muted); }
body.teacher-copy .teacher-exam-status.is-complete { color:var(--success-ink); font-weight:var(--weight-semibold); }
body.teacher-copy .teacher-strength { color:var(--text-muted); }
body.teacher-copy .teacher-strength.is-strong { color:var(--success-ink); }
body.teacher-copy .teacher-strength.is-moderate { color:var(--warn-ink); }
body.teacher-copy .teacher-strength.is-emerging { color:var(--text-muted); }
body.teacher-copy .teacher-severity-fill { background:var(--text-muted); }
body.teacher-copy .teacher-severity-fill.is-high { background:var(--error); }
body.teacher-copy .teacher-severity-fill.is-medium { background:var(--warn-ink); }
body.teacher-copy .teacher-severity-fill.is-low { background:var(--success-ink); }
body.teacher-copy .teacher-severity-text { color:var(--text-muted); }
body.teacher-copy .teacher-severity-text.is-high { color:var(--error); }
body.teacher-copy .teacher-severity-text.is-medium { color:var(--warn-ink); }
body.teacher-copy .teacher-severity-text.is-low { color:var(--success-ink); }