/* ═══════════════════════════════════════════════════════════════════════
   Sketch Solve V3 — student canvas + shared components
   Namespaced `ss3-`. Nothing here touches V2 (`ssv2-`) or the page's own CSS.

   Design goals
   - The canvas IS the screen: full-bleed paper, chrome floats above it and
     fades while writing, so the working area is 100% of the display.
   - Real pixel sizes: the root is mounted outside <body> (see JS), so the page's
     proportional `zoom` can never shrink the toolbars or skew pointer maths.
   - One DOM, two layouts: left rail (tablet/desktop) ↔ bottom dock (phones).
   ═══════════════════════════════════════════════════════════════════════ */

.ss3-root, .ss3-t, .ss3-rescue {
    --ss3-accent: #6d5efc;
    --ss3-accent-2: #8b5cf6;
    --ss3-accent-soft: rgba(109, 94, 252, 0.12);
    --ss3-ink: #0f172a;
    --ss3-ink-2: #475569;
    --ss3-ink-3: #94a3b8;
    --ss3-line: rgba(15, 23, 42, 0.10);
    --ss3-surface: rgba(255, 255, 255, 0.92);
    --ss3-solid: #ffffff;
    --ss3-ok: #10b981;
    --ss3-warn: #f59e0b;
    --ss3-danger: #ef4444;
    --ss3-shadow: 0 10px 30px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.08);
    --ss3-shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.10);
    --ss3-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ss3-safe-t: env(safe-area-inset-top, 0px);
    --ss3-safe-r: env(safe-area-inset-right, 0px);
    --ss3-safe-b: env(safe-area-inset-bottom, 0px);
    --ss3-safe-l: env(safe-area-inset-left, 0px);
    font-family: 'Outfit', 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
}

/* While the student canvas is up, the page behind it must not scroll, bounce or zoom. */
html.ss3-on, html.ss3-on body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

.ss3-root, .ss3-root *, .ss3-root *::before, .ss3-root *::after { box-sizing: border-box; }
.ss3-root [hidden], .ss3-t [hidden] { display: none !important; }

.ss3-root {
    position: fixed;
    inset: 0;
    z-index: 24000;            /* above the app's toolbars (20000) in board mode, below the teacher monitor (25000) */
    background: #eceef5;
    color: var(--ss3-ink);
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    font-size: 15px;
    line-height: 1.35;
}
.ss3-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.ss3-root svg { display: block; }

/* ── canvas stage ──────────────────────────────────────────────────── */
.ss3-stage { position: absolute; inset: 0; }
.ss3-engine { overflow: hidden; }
.ss3-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ss3-cv-top { touch-action: none; }
.ss3-text-editor {
    position: absolute; z-index: 3; margin: 0; padding: 0; border: 1.5px dashed var(--ss3-accent);
    border-radius: 4px; background: rgba(255, 255, 255, 0.78); outline: none; resize: none; overflow: hidden;
    white-space: pre; font-family: 'Outfit', 'Segoe UI', Tahoma, Arial, sans-serif; caret-color: var(--ss3-accent);
    -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.ss3-stage.ss3-locked .ss3-cv-top { cursor: grab; }

/* Formulas are always read left-to-right, even inside Arabic (RTL) text — otherwise "A = l × w" renders reversed. */
.ss3-root .katex, .ss3-t .katex, .ss3t-overlay .katex, .ss3t-review .katex { direction: ltr; unicode-bidi: isolate; }
.ss3-task-txt { text-align: start; }

/* ── chrome ────────────────────────────────────────────────────────── */
.ss3-chrome > * { transition: opacity 0.28s ease, transform 0.28s var(--ss3-ease); }
.ss3-drawing .ss3-chrome > * { opacity: 0.22; }
.ss3-drawing .ss3-chrome > *:hover { opacity: 1; }

.ss3-cap {
    display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 6px;
    background: var(--ss3-surface); border: 1px solid var(--ss3-line); border-radius: 18px;
    box-shadow: var(--ss3-shadow); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.ss3-ib {
    position: relative; flex: none; width: 44px; height: 44px; border-radius: 13px; border: 0; background: transparent;
    color: var(--ss3-ink-2); font-size: 17px; display: grid; place-items: center; cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ss3-ib:hover { background: rgba(15, 23, 42, 0.06); color: var(--ss3-ink); }
.ss3-ib:active { transform: scale(0.92); }
.ss3-ib:disabled { opacity: 0.3; pointer-events: none; }
.ss3-ib:focus-visible, .ss3-tool:focus-visible, .ss3-btn:focus-visible, .ss3-task-pill:focus-visible { outline: 2.5px solid var(--ss3-accent); outline-offset: 2px; }
.ss3-danger:hover { background: #fee2e2; color: #dc2626; }

/* top bar */
.ss3-top {
    position: absolute; z-index: 10; left: calc(10px + var(--ss3-safe-l)); right: calc(10px + var(--ss3-safe-r)); top: calc(10px + var(--ss3-safe-t));
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none;
}
.ss3-top > * { pointer-events: auto; }
.ss3-cap-left { flex: 0 1 auto; min-width: 0; max-width: min(560px, calc(100% - 170px)); }
.ss3-cap-right { flex: none; }
.ss3-sep { width: 1px; height: 24px; background: var(--ss3-line); margin: 0 4px; flex: none; }

.ss3-task-pill {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 10px;
    border: 0; border-radius: 13px; background: var(--ss3-accent-soft); color: var(--ss3-accent); font-size: 15.5px; font-weight: 600; cursor: pointer; text-align: start;
    transition: background 0.15s;
}
.ss3-task-pill:hover { background: rgba(109, 94, 252, 0.18); }
.ss3-task-pill .ss3-task-ic { flex: none; font-size: 15px; }
.ss3-task-pill .ss3-task-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss3-ink); }
.ss3-task-pill .ss3-task-cv { flex: none; font-size: 11px; transition: transform 0.2s; }
.ss3-task-pill[aria-expanded="true"] .ss3-task-cv { transform: rotate(180deg); }
.ss3-task-pill.ss3-pulse { animation: ss3-pulse 1.2s ease 2; }
@keyframes ss3-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 94, 252, 0); } 50% { box-shadow: 0 0 0 7px rgba(109, 94, 252, 0.22); } }

.ss3-ai-btn { width: auto; padding: 0 13px 0 11px; gap: 7px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); }
.ss3-ai-btn:hover { background: linear-gradient(135deg, #9a6dff, #7377ff); color: #fff; }
.ss3-ai-btn.ss3-off { opacity: 0.45; box-shadow: none; filter: grayscale(0.6); }
.ss3-ai-btn .ss3-ai-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ss3-accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.ss3-done {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 13px;
    background: linear-gradient(135deg, #10c98f, #059669); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 5px 16px rgba(5, 150, 105, 0.35); transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.ss3-done:hover { filter: brightness(1.05); }
.ss3-done:active { transform: scale(0.95); }
.ss3-done.ss3-is-done { background: #e2e8f0; color: #475569; box-shadow: none; cursor: default; }
.ss3-done:disabled { opacity: 0.85; }

/* tool rail / dock */
.ss3-rail {
    position: absolute; z-index: 10; left: calc(10px + var(--ss3-safe-l)); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; max-height: calc(100% - 150px);
    background: var(--ss3-surface); border: 1px solid var(--ss3-line); border-radius: 20px; box-shadow: var(--ss3-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.ss3-rail.ss3-disabled { opacity: 0.45; pointer-events: none; }
.ss3-tool {
    position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--ss3-ink-2);
    font-size: 17px; display: grid; place-items: center; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.ss3-tool:hover { background: rgba(15, 23, 42, 0.06); color: var(--ss3-ink); }
.ss3-tool:active { transform: scale(0.92); }
.ss3-tool.active { background: linear-gradient(135deg, #7c6cff, #5f4dff); color: #fff; box-shadow: 0 6px 16px rgba(109, 94, 252, 0.40); }
.ss3-tool .ss3-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss3-caret { position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: 0.55; }
.ss3-rail-sep { flex: none; width: 24px; height: 1px; background: var(--ss3-line); margin: 3px 0; }
.ss3-dot {
    display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--c, #111827);
    box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.92), 0 0 0 1.5px rgba(15, 23, 42, 0.22);
}
.ss3-colorbtn.ss3-off .ss3-dot { opacity: 0.3; }

@media (hover: hover) and (pointer: fine) {
    [data-tip] { position: relative; }
    .ss3-rail:not(.ss3-scroll) [data-tip]:hover::after, .ss3-selbar [data-tip]:hover::after {
        content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
        background: #0f172a; color: #fff; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 60;
    }
    .ss3-selbar [data-tip]:hover::after { left: 50%; top: auto; bottom: calc(100% + 8px); transform: translateX(-50%); }
    .ss3-top [data-tip]:hover::after, .ss3-zoom [data-tip]:hover::after {
        content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
        background: #0f172a; color: #fff; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 60;
    }
    .ss3-zoom [data-tip]:hover::after { top: auto; bottom: calc(100% + 8px); }
}

/* zoom cluster */
.ss3-zoom {
    position: absolute; z-index: 9; right: calc(10px + var(--ss3-safe-r)); bottom: calc(10px + var(--ss3-safe-b)); min-height: 44px; padding: 0 4px;
}
.ss3-zoom .ss3-ib { width: 36px; height: 36px; font-size: 13px; }
.ss3-zoom-val { min-width: 54px; height: 36px; border: 0; background: transparent; font-size: 13px; font-weight: 700; color: var(--ss3-ink); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 10px; }
.ss3-zoom-val:hover { background: rgba(15, 23, 42, 0.06); }

.ss3-home {
    position: absolute; z-index: 11; left: 50%; bottom: calc(20px + var(--ss3-safe-b)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 21px;
    background: var(--ss3-ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--ss3-shadow-lg);
    animation: ss3-rise 0.25s var(--ss3-ease);
}
@keyframes ss3-rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── popover (tool options) ─────────────────────────────────────────── */
.ss3-pop {
    position: absolute; z-index: 30; width: 276px; max-height: calc(100% - 16px); overflow: auto; padding: 14px 14px 6px;
    background: var(--ss3-solid); border-radius: 20px; box-shadow: var(--ss3-shadow-lg), 0 0 0 1px var(--ss3-line);
    animation: ss3-pop-in 0.16s var(--ss3-ease); touch-action: pan-y;
}
@keyframes ss3-pop-in { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: none; } }
.ss3-pop-sec { margin-bottom: 14px; }
.ss3-pop-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ss3-ink-3); }
.ss3-pop-h b { color: var(--ss3-ink); font-size: 12px; letter-spacing: 0; }
.ss3-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.ss3-sw {
    position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--c); cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14); transition: transform 0.12s;
}
.ss3-sw:hover { transform: scale(1.1); }
.ss3-sw.on::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2.5px solid var(--ss3-accent); }
.ss3-sw-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); display: grid; place-items: center; overflow: visible; }
.ss3-sw-custom i { width: 44%; height: 44%; border-radius: 50%; background: #fff; color: #475569; font-size: 8px; display: grid; place-items: center; }
.ss3-sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ss3-presets { display: flex; gap: 6px; margin-bottom: 10px; }
.ss3-preset { flex: 1; height: 44px; border: 0; border-radius: 11px; background: #f1f5f9; display: grid; place-items: center; cursor: pointer; }
.ss3-preset i { display: block; border-radius: 50%; background: var(--ss3-ink-2); }
.ss3-preset.on { background: var(--ss3-accent-soft); box-shadow: inset 0 0 0 2px var(--ss3-accent); }
.ss3-preset.on i { background: var(--ss3-accent); }
.ss3-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.ss3-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ss3-accent) var(--pct, 50%), #e2e8f0 var(--pct, 50%)); }
.ss3-range::-moz-range-track { height: 6px; border-radius: 3px; background: #e2e8f0; }
.ss3-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ss3-accent); }
.ss3-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--ss3-accent); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25); }
.ss3-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ss3-accent); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25); }
.ss3-preview { height: 54px; margin-top: 4px; border-radius: 12px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--ss3-line); display: grid; place-items: center; overflow: hidden; }
.ss3-prev-line { display: block; width: 70%; border-radius: 99px; min-height: 1px; }
.ss3-prev-dot { display: block; border-radius: 50%; border: 2px solid; background: rgba(148, 163, 184, 0.15); }
.ss3-shape-row { display: flex; gap: 6px; }
.ss3-shape { flex: 1; height: 44px; border: 0; border-radius: 12px; background: #f1f5f9; color: var(--ss3-ink-2); display: grid; place-items: center; cursor: pointer; }
.ss3-shape.on { background: var(--ss3-accent-soft); color: var(--ss3-accent); box-shadow: inset 0 0 0 2px var(--ss3-accent); }
.ss3-shape .ss3-ic svg, .ss3-menu-item .ss3-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss3-seg { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: #f1f5f9; }
.ss3-seg button { flex: 1; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ss3-ink-2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 6px; }
.ss3-seg button.on { background: #fff; color: var(--ss3-accent); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16); }
.ss3-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--ss3-ink-3); }
.ss3-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 500; color: var(--ss3-ink); cursor: pointer; }
.ss3-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ss3-switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: #cbd5e1; transition: background 0.18s; }
.ss3-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3); transition: transform 0.18s var(--ss3-ease); }
.ss3-toggle input:checked + .ss3-switch { background: var(--ss3-accent); }
.ss3-toggle input:checked + .ss3-switch::after { transform: translateX(18px); }
.ss3-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 13px; background: #f8fafc; color: var(--ss3-ink); font-size: 14.5px; font-weight: 600; text-align: start; cursor: pointer; }
.ss3-menu-item:hover { background: var(--ss3-accent-soft); color: var(--ss3-accent); }
.ss3-menu-item i, .ss3-menu-item .ss3-ic { flex: none; width: 22px; text-align: center; color: var(--ss3-ink-2); }
.ss3-menu-item:hover i, .ss3-menu-item:hover .ss3-ic { color: var(--ss3-accent); }
.ss3-menu-item small { display: block; font-weight: 500; font-size: 12px; color: var(--ss3-ink-3); }
.ss3-menu-item .ss3-grow { flex: 1; min-width: 0; }

/* selection bar */
.ss3-selbar {
    position: absolute; z-index: 25; display: flex; align-items: center; gap: 1px; padding: 4px; border-radius: 16px;
    background: var(--ss3-solid); box-shadow: var(--ss3-shadow-lg), 0 0 0 1px var(--ss3-line); transition: opacity 0.15s; animation: ss3-pop-in 0.14s var(--ss3-ease);
}
.ss3-selbar.ss3-away { opacity: 0; pointer-events: none; }
.ss3-selbar .ss3-dot { width: 22px; height: 22px; }

/* ── task card ─────────────────────────────────────────────────────── */
/* Big, direct, readable: most students are ESL learners, so the task must be readable at arm's length on a tablet. */
.ss3-card {
    position: absolute; z-index: 20; background: var(--ss3-solid); border-radius: 24px; box-shadow: var(--ss3-shadow-lg), 0 0 0 1px var(--ss3-line);
    overflow: hidden; display: flex; flex-direction: column; touch-action: pan-y; -webkit-user-select: text; user-select: text;
}
.ss3-task {
    left: calc(82px + var(--ss3-safe-l)); top: calc(66px + var(--ss3-safe-t)); width: min(680px, calc(100% - 94px)); max-height: calc(100% - 82px);
    transform-origin: top left; animation: ss3-card-in 0.24s var(--ss3-ease);
}
@keyframes ss3-card-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.ss3-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--ss3-line); }
.ss3-badge { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--ss3-accent); }
.ss3-badge-ic { font-size: 22px; line-height: 1; }
.ss3-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss3-badge.hot { color: #7c3aed; } .ss3-badge.guided { color: #b45309; } .ss3-badge.practice { color: #c2410c; }
.ss3-card-x { width: 48px; height: 48px; font-size: 20px; }
.ss3-listen {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 0; border-radius: 23px; cursor: pointer;
    background: #e0f2fe; color: #0369a1; font-size: 16px; font-weight: 800; transition: background 0.15s, transform 0.1s;
}
.ss3-listen i { font-size: 18px; }
.ss3-listen:active { transform: scale(0.95); }
.ss3-listen.on { background: #0369a1; color: #fff; }
.ss3-listen.on i { animation: ss3-bounce 1s infinite ease-in-out; }
.ss3-listen-c { margin: -4px auto 16px; }
.ss3-card-body { padding: 18px 18px; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.ss3-task-text {
    font-size: 24px; line-height: 1.55; font-weight: 600; color: var(--ss3-ink); overflow-wrap: anywhere;
    padding: 16px 18px; border-radius: 18px; background: #f5f3ff; border-inline-start: 6px solid var(--ss3-accent);
}
.ss3-task-text.hot { background: #faf5ff; border-color: #7c3aed; }
.ss3-task-text.guided { background: #fffbeb; border-color: #f59e0b; }
.ss3-task-text.practice { background: #fff7ed; border-color: #ea580c; }
.ss3-task-text strong { color: #4c1d95; font-weight: 800; }
.ss3-task-text .katex { font-size: 1.1em; }
.ss3-task-img { position: relative; margin: 0 0 14px; border-radius: 16px; overflow: hidden; background: #f1f5f9; cursor: zoom-in; box-shadow: inset 0 0 0 1px var(--ss3-line); }
.ss3-task-img img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.ss3-task-img span { position: absolute; right: 8px; bottom: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.ss3-support { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.ss3-support-b { padding: 14px 16px; border-radius: 16px; background: #fff7ed; box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.35); color: #7c2d12; font-size: 19px; line-height: 1.6; }
.ss3-support-b.ex { background: #f5f3ff; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.3); color: #4c1d95; }
.ss3-support-b h5 { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; display: flex; gap: 7px; align-items: center; }
.ss3-card-foot { padding: 4px 18px 18px; }
.ss3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border: 0; border-radius: 16px;
    font-size: 18px; font-weight: 700; cursor: pointer; transition: transform 0.1s, filter 0.15s;
}
.ss3-btn:active { transform: scale(0.97); }
.ss3-btn-block { width: 100%; }
.ss3-btn-primary { background: linear-gradient(135deg, #7c6cff, #5b4dff); color: #fff; box-shadow: 0 8px 20px rgba(109, 94, 252, 0.38); }
.ss3-btn-ok { background: linear-gradient(135deg, #10c98f, #059669); color: #fff; box-shadow: 0 8px 20px rgba(5, 150, 105, 0.36); }
.ss3-btn-ghost { background: #eef1f6; color: #334155; }
.ss3-btn-warn { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.36); }
.ss3-btn:hover { filter: brightness(1.04); }

/* ── AI helper drawer ──────────────────────────────────────────────── */
.ss3-drawer {
    position: absolute; z-index: 40; top: calc(10px + var(--ss3-safe-t)); right: calc(10px + var(--ss3-safe-r)); bottom: calc(10px + var(--ss3-safe-b));
    width: min(390px, calc(100% - 20px)); display: flex; flex-direction: column; background: var(--ss3-solid); border-radius: 24px;
    box-shadow: var(--ss3-shadow-lg), 0 0 0 1px var(--ss3-line); transform: translateX(calc(100% + 30px)); transition: transform 0.3s var(--ss3-ease); overflow: hidden; touch-action: pan-y;
}
.ss3-drawer { visibility: hidden; transition: transform 0.3s var(--ss3-ease), visibility 0s linear 0.3s; }   /* closed: no shadow bleed, no stray taps */
.ss3-drawer.open { transform: none; visibility: visible; transition: transform 0.3s var(--ss3-ease), visibility 0s; }
.ss3-drawer-head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 12px 16px; border-bottom: 1px solid var(--ss3-line); }
.ss3-ai-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1); font-size: 16px; }
.ss3-drawer-title { flex: 1; min-width: 0; }
.ss3-drawer-title b { display: block; font-size: 16px; }
.ss3-drawer-title small { color: var(--ss3-ink-3); font-size: 12.5px; }
.ss3-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; -webkit-user-select: text; user-select: text; touch-action: pan-y; }
.ss3-msg { max-width: 92%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; animation: ss3-rise2 0.2s var(--ss3-ease); }
@keyframes ss3-rise2 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ss3-msg.ai { align-self: flex-start; background: #f3f0ff; color: #2e1065; border-bottom-left-radius: 6px; }
.ss3-msg.me { align-self: flex-end; background: var(--ss3-accent); color: #fff; border-bottom-right-radius: 6px; font-size: 14px; }
.ss3-msg.sys { align-self: center; background: transparent; color: var(--ss3-ink-3); font-size: 13px; text-align: center; padding: 4px 8px; max-width: 100%; }
.ss3-msg.ai strong { color: #4c1d95; }
.ss3-msg.think { display: flex; gap: 5px; padding: 14px 16px; }
.ss3-msg.think i { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: ss3-bounce 1s infinite ease-in-out; }
.ss3-msg.think i:nth-child(2) { animation-delay: 0.15s; } .ss3-msg.think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ss3-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
.ss3-drawer-actions { display: flex; gap: 8px; padding: 12px 14px calc(14px + var(--ss3-safe-b)); border-top: 1px solid var(--ss3-line); }
.ss3-drawer-actions .ss3-btn { flex: 1; height: 46px; padding: 0 10px; font-size: 14.5px; }
.ss3-drawer-actions .ss3-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ── modals / sheets ───────────────────────────────────────────────── */
.ss3-modal {
    position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, 0.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ss3-fade 0.18s ease; touch-action: pan-y;
}
@keyframes ss3-fade { from { opacity: 0; } to { opacity: 1; } }
.ss3-sheet {
    position: relative; width: min(460px, 100%); max-height: calc(100% - 8px); overflow: auto; padding: 26px 24px 22px; border-radius: 28px; background: var(--ss3-solid);
    box-shadow: var(--ss3-shadow-lg); animation: ss3-sheet-in 0.26s var(--ss3-ease); text-align: center; -webkit-user-select: text; user-select: text; touch-action: pan-y;
}
@keyframes ss3-sheet-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.ss3-sheet h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.ss3-sheet p { margin: 0 0 16px; color: var(--ss3-ink-2); font-size: 15px; }
.ss3-sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.ss3-sheet-actions .ss3-btn { flex: 1; }
.ss3-sheet-x { position: absolute; top: 12px; right: 12px; }
.ss3-menu-sheet { text-align: start; padding: 20px 18px 16px; }
.ss3-menu-sheet h2 { font-size: 18px; padding: 0 6px; }
.ss3-menu-list { display: flex; flex-direction: column; gap: 6px; }
.ss3-menu-sub { margin: 14px 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ss3-ink-3); }
.ss3-submit-preview { margin: 0 auto 6px; width: 100%; aspect-ratio: 4 / 3; max-height: 230px; border-radius: 16px; overflow: hidden; background: #f1f5f9 center / contain no-repeat; box-shadow: inset 0 0 0 1px var(--ss3-line); }
.ss3-emoji { font-size: 54px; line-height: 1; margin-bottom: 8px; }
.ss3-tips { text-align: start; display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.ss3-tip { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ss3-ink-2); }
.ss3-tip i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--ss3-accent-soft); color: var(--ss3-accent); font-size: 15px; }
.ss3-tip b { display: block; color: var(--ss3-ink); font-size: 15px; }

/* grade card */
.ss3-ring { position: relative; width: 138px; height: 138px; margin: 0 auto 12px; }
.ss3-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ss3-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ss3-ring .bg { stroke: #eef1f6; }
.ss3-ring .fg { stroke: var(--rc); stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1s var(--ss3-ease) 0.15s; }
.ss3-ring-val { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.ss3-ring-val b { font-size: 40px; font-weight: 800; color: var(--rc); line-height: 1; }
.ss3-ring-val small { font-size: 13px; font-weight: 600; color: var(--ss3-ink-3); }
.ss3-src { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; background: #f1f5f9; color: var(--ss3-ink-2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.ss3-grade { width: min(580px, 100%); }
.ss3-feedback { font-size: 21px; line-height: 1.55; font-weight: 500; color: var(--ss3-ink); margin: 0 0 14px; overflow-wrap: anywhere; }
.ss3-nextnote { font-size: 18px; line-height: 1.5; font-weight: 700; color: #6d28d9; margin: 0 0 16px; }
.ss3-grade .ss3-sheet-actions .ss3-btn { height: 58px; font-size: 19px; }

/* banners, toasts */
.ss3-banner {
    position: absolute; z-index: 12; left: 50%; top: calc(66px + var(--ss3-safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 16px; background: var(--ss3-ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--ss3-shadow-lg); max-width: calc(100% - 24px);
}
.ss3-banner.ok { background: #065f46; } .ss3-banner.think { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.ss3-toasts { position: absolute; z-index: 80; left: 50%; bottom: calc(76px + var(--ss3-safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100% - 24px); }
.ss3-toast { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; background: var(--ss3-ink); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--ss3-shadow-lg); animation: ss3-rise2 0.22s var(--ss3-ease); pointer-events: auto; }
.ss3-toast button { border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; padding: 5px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ss3-toast.leaving { opacity: 0; transform: translateY(6px); transition: all 0.25s; }

/* ── pause overlay (teacher froze this student's canvas) ─────────────── */
.ss3-pause-overlay {
    position: absolute; inset: 0; z-index: 92; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px;
    background: rgba(15, 23, 42, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: ss3-fade 0.25s ease;
}
.ss3-paused .ss3-pause-overlay { display: flex; }
.ss3-pause-card { max-width: 320px; }
.ss3-pause-ic { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 26px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 34px; display: grid; place-items: center; animation: ss3-breathe 2.2s ease-in-out infinite; }
@keyframes ss3-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
.ss3-pause-card h2 { color: #fff; margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.ss3-pause-card p { color: rgba(255, 255, 255, 0.75); margin: 0 0 16px; font-size: 14.5px; }
.ss3-pause-dots { display: flex; gap: 6px; justify-content: center; }
.ss3-pause-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); animation: ss3-bounce 1s infinite ease-in-out; }
.ss3-pause-dots i:nth-child(2) { animation-delay: 0.15s; } .ss3-pause-dots i:nth-child(3) { animation-delay: 0.3s; }

/* ── attention: a new question is about to replace the canvas ────────── */
.ss3-newq-flag {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 16px; border-radius: 99px;
    background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; font-size: 16px; font-weight: 800; animation: ss3-attn-pulse 1.1s ease-in-out infinite;
}
@keyframes ss3-attn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); } }
.ss3-sheet-attn { animation: ss3-sheet-glow 1.1s ease-in-out infinite; }
@keyframes ss3-sheet-glow { 0%, 100% { box-shadow: var(--ss3-shadow-lg); } 50% { box-shadow: var(--ss3-shadow-lg), 0 0 0 5px rgba(245, 158, 11, 0.28); } }

/* Re-triggerable "look here" pulse — task card + pill on a follow-up swap. */
.ss3-flash { animation: ss3-flashpulse 0.55s ease-in-out 2; }
@keyframes ss3-flashpulse { 0%, 100% { box-shadow: var(--ss3-shadow-lg); transform: scale(1); } 50% { box-shadow: var(--ss3-shadow-lg), 0 0 0 8px rgba(109, 94, 252, 0.35); transform: scale(1.015); } }

/* image lightbox */
.ss3-lightbox { position: absolute; inset: 0; z-index: 70; background: rgba(2, 6, 23, 0.94); display: flex; align-items: center; justify-content: center; overflow: auto; touch-action: pan-x pan-y; animation: ss3-fade 0.18s; }
.ss3-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.ss3-lightbox.zoomed img { max-width: none; max-height: none; width: 210%; cursor: zoom-out; }
.ss3-lightbox .ss3-ib { position: fixed; top: calc(14px + var(--ss3-safe-t)); right: calc(14px + var(--ss3-safe-r)); background: rgba(255, 255, 255, 0.16); color: #fff; z-index: 2; }

/* page-zoom rescue (pinned to the VISUAL viewport by JS so it stays reachable when pinch-zoomed) */
.ss3-rescue {
    position: fixed; left: 0; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 10px 14px; transform-origin: 0 0;
    background: #b91c1c; color: #fff; border-radius: 0 0 16px 0; font-size: 14px; font-weight: 700; box-shadow: var(--ss3-shadow-lg);
}
.ss3-rescue button { border: 0; padding: 8px 14px; border-radius: 10px; background: #fff; color: #b91c1c; font-weight: 800; font-size: 14px; cursor: pointer; }

/* mode chips */
.ss3-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 700; flex: none; }

/* ── focus mode: only the work + Done ─────────────────────────────── */
.ss3-focus .ss3-sep, .ss3-focus .ss3-rail, .ss3-focus .ss3-zoom, .ss3-focus .ss3-cap-left, .ss3-focus .ss3-hist, .ss3-focus .ss3-ai-btn, .ss3-focus .ss3-selbar { opacity: 0; pointer-events: none; transform: scale(0.96); }
.ss3-focus .ss3-rail { transform: translate(-16px, -50%); }
.ss3-focus-exit { display: none; }
.ss3-focus .ss3-focus-exit { display: grid; }

/* ── read-only (submitted) ─────────────────────────────────────────── */
.ss3-readonly .ss3-rail .ss3-tool:not([data-tool="hand"]) { opacity: 0.35; pointer-events: none; }
.ss3-readonly .ss3-hist { opacity: 0.35; pointer-events: none; }

/* ── responsive: phones / small tablets → bottom dock ─────────────── */
.ss3-narrow .ss3-rail {
    left: 50%; top: auto; bottom: calc(8px + var(--ss3-safe-b)); transform: translateX(-50%); flex-direction: row; width: max-content;
    max-width: calc(100% - 16px); max-height: none; padding: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-radius: 22px;
}
.ss3-narrow .ss3-rail::-webkit-scrollbar { display: none; }
.ss3-narrow .ss3-rail-sep { width: 1px; height: 24px; margin: 0 3px; }
.ss3-narrow .ss3-rail .ss3-tool { width: 46px; height: 46px; }
.ss3-narrow.ss3-focus .ss3-rail { transform: translate(-50%, 16px); }
.ss3-narrow .ss3-zoom { bottom: calc(74px + var(--ss3-safe-b)); }
.ss3-narrow .ss3-zoom .ss3-zoom-fit { display: none; }
.ss3-narrow .ss3-toasts { bottom: calc(126px + var(--ss3-safe-b)); }
.ss3-narrow .ss3-home { bottom: calc(126px + var(--ss3-safe-b)); }
.ss3-narrow .ss3-ai-btn span.ss3-lbl { display: none; }
.ss3-narrow .ss3-ai-btn { width: 40px; padding: 0; justify-content: center; }
.ss3-narrow .ss3-ai-btn .ss3-ai-badge { position: absolute; top: -3px; right: -3px; }
.ss3-narrow .ss3-cap-left { max-width: calc(100% - 156px); }
.ss3-narrow .ss3-task { left: 8px; right: 8px; width: auto; top: calc(64px + var(--ss3-safe-t)); max-height: calc(100% - 200px); }
.ss3-narrow .ss3-drawer { top: auto; left: 8px; right: 8px; bottom: calc(8px + var(--ss3-safe-b)); width: auto; height: min(74%, 560px); transform: translateY(calc(100% + 30px)); }
.ss3-narrow .ss3-drawer.open { transform: none; }
.ss3-narrow .ss3-pop { width: min(300px, calc(100% - 16px)); }
.ss3-narrow .ss3-cap { min-height: 46px; }
.ss3-task-lbl { display: none; }
.ss3-tiny .ss3-task-txt { display: none; }
.ss3-tiny .ss3-task-lbl { display: inline; flex: 1 1 auto; min-width: 0; white-space: nowrap; color: var(--ss3-ink); }
.ss3-tiny .ss3-rail { gap: 2px; padding: 4px; }
.ss3-tiny .ss3-rail .ss3-tool { width: 40px; height: 40px; }
.ss3-tiny .ss3-task-pill { padding: 0 9px 0 8px; gap: 6px; }
.ss3-tiny .ss3-task-cv { display: none; }
.ss3-tiny .ss3-rail .ss3-tool[data-tool="hand"] { display: none; }      /* two fingers already move the page; the dock has no room to spare */
.ss3-tiny .ss3-done span.ss3-lbl { display: none; }
.ss3-tiny .ss3-done { padding: 0 13px; }
.ss3-short .ss3-rail { max-height: calc(100% - 110px); overflow-y: auto; scrollbar-width: none; }
.ss3-short .ss3-rail::-webkit-scrollbar { display: none; }
.ss3-short .ss3-rail .ss3-tool { width: 40px; height: 40px; }
.ss3-short .ss3-task { max-height: calc(100% - 86px); }
.ss3-narrow .ss3-task { max-height: calc(100% - 150px); }
.ss3-narrow .ss3-task-text { font-size: 21px; padding: 14px 14px; }
.ss3-narrow .ss3-support-b { font-size: 17.5px; }
.ss3-narrow .ss3-feedback { font-size: 19px; }
.ss3-tiny .ss3-listen span { display: none; }
.ss3-tiny .ss3-listen { width: 46px; padding: 0; justify-content: center; }
.ss3-tiny .ss3-cap-right .ss3-ib { width: 40px; height: 40px; }
.ss3-tiny .ss3-task-pill, .ss3-tiny .ss3-done { height: 40px; }

@media (prefers-reduced-motion: reduce) {
    .ss3-root *, .ss3-root *::before, .ss3-root *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TEACHER SIDE — dashboard, creator, live monitor, review, end summary
   Dark navy to match the other activity monitors. Tokens are `--t-*`; the
   shared tool palette inside the review keeps its own (light) `--ss3-*`.
   ═══════════════════════════════════════════════════════════════════════ */
.ss3t-overlay, .ss3t-monitor, .ss3t-review, .ss3t-menu {
    --t-bg: #0a0f1f; --t-bg2: #0f1629; --t-panel: #131b33; --t-card: #19233f; --t-card2: #212d50;
    --t-line: rgba(255, 255, 255, 0.08); --t-line2: rgba(255, 255, 255, 0.14);
    --t-ink: #eef1fb; --t-dim: #98a2c3; --t-dim2: #6d7898;
    --t-accent: #8b7bff; --t-accent2: #6d5efc;
    color: var(--t-ink); font-family: 'Outfit', 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 15px; line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
.ss3t-overlay *, .ss3t-monitor *, .ss3t-review *, .ss3t-menu * { box-sizing: border-box; }
.ss3t-overlay button, .ss3t-monitor button, .ss3t-review button, .ss3t-menu button, .ss3t-overlay input, .ss3t-overlay select, .ss3t-overlay textarea, .ss3t-review input, .ss3t-review textarea, .ss3t-monitor input { font-family: inherit; }
.ss3t-grow { flex: 1; }
.dim { color: var(--t-dim); }

/* shared controls */
.ss3t-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px;
    font-size: 14.5px; font-weight: 700; cursor: pointer; color: var(--t-ink); background: var(--t-card2); white-space: nowrap; transition: filter 0.15s, transform 0.1s, background 0.15s;
}
.ss3t-btn:hover { filter: brightness(1.12); }
.ss3t-btn:active { transform: scale(0.97); }
.ss3t-btn:disabled { opacity: 0.55; pointer-events: none; }
.ss3t-btn-primary { background: linear-gradient(135deg, #7c6cff, #5b4dff); color: #fff; box-shadow: 0 8px 22px rgba(109, 94, 252, 0.4); }
.ss3t-btn-ok { background: linear-gradient(135deg, #10c98f, #059669); color: #fff; }
.ss3t-btn-accent { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f1300; }
.ss3t-btn-ghost { background: rgba(255, 255, 255, 0.07); color: var(--t-ink); }
.ss3t-btn-block { width: 100%; }
.ss3t-ib { flex: none; width: 38px; height: 38px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.06); color: var(--t-dim); font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: background 0.15s, color 0.15s; }
.ss3t-ib:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ss3t-ib.danger:hover { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.ss3t-ib.lg { width: 44px; height: 44px; font-size: 16px; }
.ss3t-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: var(--t-dim); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.ss3t-x:hover { background: rgba(239, 68, 68, 0.22); color: #fff; }
.ss3t-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--t-dim); box-shadow: inset 0 0 0 1px var(--t-line); }
.ss3t-search input { width: 190px; border: 0; outline: 0; background: transparent; color: var(--t-ink); font-size: 14.5px; }
.ss3t-search:focus-within { box-shadow: inset 0 0 0 2px var(--t-accent); }
.ss3t-search.sm { height: 36px; } .ss3t-search.sm input { width: 150px; }
.ss3t-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, 0.06); }
.ss3t-seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--t-dim); font-size: 13px; font-weight: 700; cursor: pointer; }
.ss3t-seg button.on { background: var(--t-accent2); color: #fff; box-shadow: 0 3px 10px rgba(109, 94, 252, 0.4); }
.ss3t-logo { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 18px; background: linear-gradient(135deg, #8b7bff, #5b4dff); box-shadow: 0 6px 18px rgba(109, 94, 252, 0.4); }
.ss3t-check { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: var(--t-dim); cursor: pointer; }
.ss3t-check input { position: absolute; opacity: 0; pointer-events: none; }
.ss3t-check i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px var(--t-line2); display: grid; place-items: center; transition: background 0.15s; }
.ss3t-check input:checked + i { background: var(--t-accent2); box-shadow: none; }
.ss3t-check input:checked + i::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; color: #fff; }
.ss3t-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--t-dim); }
.ss3t-empty > i { font-size: 28px; margin-bottom: 12px; display: block; }
.ss3t-empty.big { padding: 90px 20px; }
.ss3t-empty h3 { margin: 0 0 6px; color: var(--t-ink); font-size: 22px; }
.ss3t-empty p { margin: 0 auto 20px; max-width: 420px; }
.ss3t-empty-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; font-size: 30px; color: var(--t-accent); background: rgba(139, 123, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(139, 123, 255, 0.25); }

/* overlay + panels */
.ss3t-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(4, 7, 18, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.ss3t-overlay.show { opacity: 1; pointer-events: auto; }
.ss3t-panel { width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--t-panel); border: 1px solid var(--t-line2); border-radius: 24px; box-shadow: 0 34px 100px rgba(0, 0, 0, 0.65); transform: translateY(12px) scale(0.985); transition: transform 0.26s var(--ss3-ease); overflow: hidden; }
.ss3t-overlay.show .ss3t-panel { transform: none; }
.ss3t-panel-lg { width: min(1100px, 100%); height: min(86vh, 860px); }
.ss3t-panel-xl { width: min(1120px, 100%); height: min(90vh, 840px); }
.ss3t-panel-md { width: min(700px, 100%); }
.ss3t-panel-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--t-line); }
.ss3t-h-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ss3t-h-left h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.ss3t-h-left p { margin: 2px 0 0; font-size: 13px; color: var(--t-dim); }
.ss3t-ver { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 8px; background: linear-gradient(135deg, #8b7bff, #5b4dff); color: #fff; font-size: 12px; vertical-align: 3px; }
.ss3t-h-right { display: flex; align-items: center; gap: 10px; }
.ss3t-panel-b { flex: 1; min-height: 0; overflow: auto; padding: 22px; }
.ss3t-panel-f { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--t-line); background: rgba(0, 0, 0, 0.14); }

/* dashboard */
.ss3t-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.ss3t-task { display: flex; flex-direction: column; background: var(--t-card); border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--t-line); transition: transform 0.2s var(--ss3-ease), box-shadow 0.2s; }
.ss3t-task:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--t-line2), 0 18px 40px rgba(0, 0, 0, 0.4); }
.ss3t-task-thumb { position: relative; height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, #2a2f63, #1c2246) center / cover no-repeat; color: rgba(255, 255, 255, 0.35); font-size: 40px; }
.ss3t-task-thumb.has-img { background-color: #fff; background-size: contain; }
.ss3t-lang { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 8px; background: rgba(10, 15, 31, 0.78); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.ss3t-task-body { flex: 1; padding: 14px 16px 6px; }
.ss3t-task-body h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss3t-task-body p { margin: 0 0 10px; color: var(--t-dim); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.ss3t-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ss3t-chip { padding: 3px 10px; border-radius: 99px; background: rgba(139, 123, 255, 0.16); color: #c4bcff; font-size: 12px; font-weight: 700; }
.ss3t-chip.dim { background: rgba(255, 255, 255, 0.06); color: var(--t-dim); }
.ss3t-task-acts { display: flex; gap: 6px; align-items: center; padding: 12px 14px 14px; }
.ss3t-task-acts .ss3t-btn { flex: 1; height: 40px; }

/* creator */
.ss3t-creator { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 390px; }
.ss3t-form { padding: 22px; overflow: auto; display: flex; flex-direction: column; gap: 18px; }
.ss3t-f { display: flex; flex-direction: column; gap: 7px; }
.ss3t-f > span { font-size: 12.5px; font-weight: 700; color: var(--t-dim); letter-spacing: 0.02em; }
.ss3t-f > span em { font-style: normal; font-weight: 500; color: var(--t-dim2); margin-left: 6px; }
.ss3t-f small { color: var(--t-dim2); font-size: 12.5px; }
.ss3t-f code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #c4bcff; font-size: 12px; }
.ss3t-f input[type="text"], .ss3t-f textarea, .ss3t-f select {
    width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--t-ink); font-size: 15px; outline: none; box-shadow: inset 0 0 0 1px var(--t-line); transition: box-shadow 0.15s;
}
.ss3t-f textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.ss3t-f input:focus, .ss3t-f textarea:focus, .ss3t-f select:focus { box-shadow: inset 0 0 0 2px var(--t-accent); }
.ss3t-f select option { background: #19233f; }
.ss3t-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss3t-drop { position: relative; height: 128px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1.5px var(--t-line2); display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: box-shadow 0.15s, background 0.15s; }
.ss3t-drop:hover, .ss3t-drop.drag { background: rgba(139, 123, 255, 0.1); box-shadow: inset 0 0 0 2px var(--t-accent); }
.ss3t-drop-empty { text-align: center; color: var(--t-dim); display: grid; gap: 2px; }
.ss3t-drop-empty i { font-size: 22px; color: var(--t-accent); margin-bottom: 4px; }
.ss3t-drop-empty small { color: var(--t-dim2); font-size: 12px; }
.ss3t-drop-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ss3t-drop.has .ss3t-drop-img { display: block; } .ss3t-drop.has .ss3t-drop-empty { display: none; }
.ss3t-drop-x { display: none; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(10, 15, 31, 0.85); color: #fca5a5; cursor: pointer; place-items: center; font-size: 12px; z-index: 2; }
.ss3t-drop.has .ss3t-drop-x { display: grid; }
.ss3t-c-side { padding: 22px; background: var(--t-bg2); border-left: 1px solid var(--t-line); display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.ss3t-c-side-h { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-dim); }
.ss3t-c-note { margin: 0; color: var(--t-dim2); font-size: 13px; }
.ss3t-mock { border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--t-line2); }
.ss3t-mock-paper { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; background-color: #fff; background-image: radial-gradient(#cfd4e3 1.1px, transparent 1.1px); background-size: 16px 16px; color: #0f172a; }
.ss3t-mock-bg { position: absolute; inset: 14% 12% 8% 16%; background: var(--bg) center / contain no-repeat; opacity: 0.95; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1); }
.ss3t-mock-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; align-items: center; }
.ss3t-mock-menu { width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15); }
.ss3t-mock-pill { flex: 1; min-width: 0; padding: 5px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15); font-size: 10.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss3t-mock-done { width: 26px; height: 24px; border-radius: 8px; background: #10b981; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.ss3t-mock-rail { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); }
.ss3t-mock-rail i { width: 16px; height: 16px; border-radius: 5px; background: #e2e8f0; } .ss3t-mock-rail i.on { background: #6d5efc; }
.ss3t-mock-card { position: absolute; left: 44px; right: 10px; top: 42px; max-height: 70%; overflow: hidden; padding: 11px 12px 10px; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.08); }
.ss3t-mock-badge { font-size: 10px; font-weight: 800; color: #6d5efc; margin-bottom: 6px; }
.ss3t-mock-card img { display: block; width: 100%; max-height: 90px; object-fit: contain; border-radius: 8px; margin-bottom: 6px; background: #f1f5f9; }
.ss3t-mock-q { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.ss3t-ph { color: #94a3b8; }
.ss3t-mock-btn { margin-top: 9px; padding: 6px; border-radius: 8px; background: linear-gradient(135deg, #7c6cff, #5b4dff); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.ss3t-qbox { padding: 18px 20px; border-radius: 16px; background: rgba(139, 123, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(139, 123, 255, 0.25); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.ss3t-qimgs { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.ss3t-qimgs figure { flex: 1; min-width: 220px; margin: 0; } .ss3t-qimgs img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; background: #fff; }
.ss3t-qimgs figcaption { margin-top: 6px; font-size: 12px; color: var(--t-dim); text-align: center; }

/* live monitor */
.ss3t-monitor { position: fixed; inset: 0; z-index: 25000; display: flex; flex-direction: column; background: radial-gradient(1200px 500px at 15% -10%, #16204a 0%, transparent 60%), var(--t-bg); overflow: hidden; }
.ss3t-bar { flex: none; display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--t-line); }
.ss3t-title { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.ss3t-title-txt { min-width: 0; } .ss3t-title-txt h2 { margin: 0; font-size: 19px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss3t-title-txt p { margin: 2px 0 0; font-size: 13px; color: var(--t-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.ss3t-bar-right { display: flex; align-items: center; gap: 12px; }
.ss3t-code { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(139, 123, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(139, 123, 255, 0.35); color: #cfc8ff; cursor: pointer; }
.ss3t-code span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.75; } .ss3t-code b { font-size: 19px; letter-spacing: 0.16em; color: #fff; } .ss3t-code i { opacity: 0.7; }
.ss3t-code:hover { background: rgba(139, 123, 255, 0.24); }
.ss3t-timer { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--t-dim); }
.ss3t-toolbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 24px; flex-wrap: wrap; }
.ss3t-group { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--t-line); }
.ss3t-tb { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--t-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.ss3t-tb:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.ss3t-tb.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ss3t-tb.ok.on { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.ss3t-tb.magic.on { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45); }
.ss3t-tb.magic:not(.on) { color: #b9a9ff; }
.ss3t-tb.accent { background: rgba(245, 158, 11, 0.18); color: #fcd34d; } .ss3t-tb.accent:hover { background: rgba(245, 158, 11, 0.3); }
.ss3t-tb.danger { background: rgba(239, 68, 68, 0.14); color: #fca5a5; } .ss3t-tb.danger:hover { background: rgba(239, 68, 68, 0.28); color: #fff; }
.ss3t-tb:disabled { opacity: 0.6; pointer-events: none; }
.ss3t-stats { flex: none; display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)) minmax(240px, 1.5fr); gap: 12px; padding: 4px 24px 8px; }
.ss3t-stat { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px var(--t-line); display: flex; flex-direction: column; justify-content: center; }
.ss3t-stat b { font-size: 30px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ss3t-stat span { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-dim); }
.ss3t-stat b.c-draw { color: #a5b4fc; } .ss3t-stat b.c-done { color: #6ee7b7; } .ss3t-stat b.c-avg { color: #fcd34d; }
.ss3t-stat-lvl { gap: 8px; align-items: flex-start; } .ss3t-stat-lvl > span { margin: 0; }
.ss3t-lvl-note { margin-top: -4px; font-size: 11.5px; color: var(--t-dim2); line-height: 1.3; }
.ss3t-filters { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 24px 10px; flex-wrap: wrap; }
.ss3t-chipbar { display: flex; align-items: center; gap: 4px; }
.ss3t-lbl { margin-right: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-dim2); }
.ss3t-chipbar button { height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.05); color: var(--t-dim); font-size: 13px; font-weight: 700; cursor: pointer; }
.ss3t-chipbar button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ss3t-chipbar button.on { background: var(--t-accent2); color: #fff; }
.ss3t-size { display: flex; align-items: center; gap: 8px; color: var(--t-dim2); font-size: 12px; } .ss3t-size .big { font-size: 16px; }
.ss3t-size input { width: 110px; accent-color: var(--t-accent); }
.ss3t-main { position: relative; flex: 1; min-height: 0; }
.ss3t-grid { position: absolute; inset: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 270px), 1fr)); gap: 16px; align-content: start; padding: 8px 24px 28px; }
.ss3t-waiting { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--t-dim); padding: 24px; pointer-events: none; }
.ss3t-waiting h3 { margin: 0 0 6px; color: var(--t-ink); font-size: 22px; } .ss3t-waiting p { margin: 0 auto; max-width: 420px; } .ss3t-waiting b { color: #fff; letter-spacing: 0.1em; }
.ss3t-waiting[hidden] { display: none; }

/* student card */
.ss3t-card { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; border-radius: 20px; background: var(--t-card); box-shadow: inset 0 0 0 1px var(--t-line); transition: box-shadow 0.2s, transform 0.2s var(--ss3-ease); }
.ss3t-card:hover { box-shadow: inset 0 0 0 1px var(--t-line2), 0 14px 34px rgba(0, 0, 0, 0.35); transform: translateY(-2px); }
.ss3t-card[data-status="drawing"] { box-shadow: inset 0 0 0 1.5px rgba(129, 140, 248, 0.55); }
.ss3t-card[data-status="done"] { box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, 0.6); }
.ss3t-thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 13px; background: #fff; overflow: hidden; cursor: pointer; }
.ss3t-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ss3t-thumb-ph { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f1f4fa 0 12px, #e9edf6 12px 24px); color: #b3bbd0; font-size: 26px; }
.ss3t-pill { position: absolute; left: 8px; top: 8px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(6px); }
.ss3t-pill.drawing { background: rgba(79, 70, 229, 0.92); } .ss3t-pill.done { background: rgba(5, 150, 105, 0.94); }
.ss3t-gchip { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(15, 23, 42, 0.86); color: var(--gc, #fff); font-size: 14px; font-weight: 800; }
.ss3t-gchip small { color: #94a3b8; font-size: 10.5px; font-weight: 700; } .ss3t-gchip i { font-size: 11px; opacity: 0.85; }
.ss3t-pause-chip { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(245, 158, 11, 0.95); color: #1f1300; font-size: 11px; font-weight: 800; animation: ss3t-pausechip-pulse 1.6s ease-in-out infinite; }
@keyframes ss3t-pausechip-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } }
.ss3t-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(79, 70, 229, 0.72); color: #fff; font-weight: 800; font-size: 14px; opacity: 0; transition: opacity 0.18s; }
.ss3t-thumb:hover .ss3t-hover, .ss3t-thumb:focus-visible .ss3t-hover { opacity: 1; }
.ss3t-meta { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.ss3t-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #8b7bff, #5b4dff); }
.ss3t-avatar.lg { width: 44px; height: 44px; font-size: 19px; }
.ss3t-meta-t { flex: 1; min-width: 0; } .ss3t-name { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss3t-ago { color: var(--t-dim2); font-size: 12px; }
.ss3t-auto { flex: none; } .ss3t-autob { display: inline-flex; padding: 4px 9px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ss3t-acts { display: flex; gap: 6px; align-items: center; padding: 0 2px; }
.ss3t-mini { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--t-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.ss3t-mini:hover { background: rgba(255, 255, 255, 0.14); } .ss3t-mini.primary { background: rgba(109, 94, 252, 0.3); color: #d6d0ff; } .ss3t-mini.primary:hover { background: var(--t-accent2); color: #fff; }
.ss3t-menu { position: fixed; z-index: 27000; width: 210px; padding: 6px; border-radius: 16px; background: #1b2545; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--t-line2); animation: ss3-pop-in 0.14s var(--ss3-ease); }
.ss3t-menu button { display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--t-ink); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.ss3t-menu button:hover { background: rgba(255, 255, 255, 0.09); } .ss3t-menu button.danger { color: #fca5a5; } .ss3t-menu button i { width: 18px; text-align: center; }
.ss3t-menu-sep { display: block; height: 1px; margin: 5px 4px; background: var(--t-line); }

/* review */
.ss3t-review { position: fixed; inset: 0; z-index: 26000; display: flex; flex-direction: column; background: var(--t-bg); animation: ss3-fade 0.18s; }
.ss3t-rv-who { display: flex; align-items: center; gap: 12px; } .ss3t-rv-who h2 { margin: 0; font-size: 19px; } .ss3t-rv-who p { margin: 2px 0 0; font-size: 13px; color: var(--t-dim); display: flex; align-items: center; gap: 10px; }
.ss3t-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: #34d399; }
.ss3t-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: ss3t-blink 1.4s infinite; } @keyframes ss3t-blink { 50% { opacity: 0.3; } }
.ss3t-rv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 350px; }
.ss3t-rv-stage { position: relative; min-width: 0; background: #e8ebf4; overflow: hidden; }
.ss3t-rv-engine { position: absolute; inset: 0; }
.ss3t-rv-hint { position: absolute; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: rgba(15, 23, 42, 0.82); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; opacity: 0.9; }
.ss3t-rv-side { overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--t-panel); border-left: 1px solid var(--t-line); }
.ss3t-sec { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--t-line); display: flex; flex-direction: column; gap: 12px; }
.ss3t-sec h4 { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dim); }
.ss3t-sec textarea { width: 100%; padding: 11px 13px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--t-ink); font-size: 14.5px; resize: vertical; outline: none; box-shadow: inset 0 0 0 1px var(--t-line); min-height: 76px; }
.ss3t-sec textarea:focus { box-shadow: inset 0 0 0 2px var(--t-accent); }
.ss3t-gnow { display: flex; gap: 14px; align-items: center; }
.ss3t-gring { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; box-shadow: inset 0 0 0 5px var(--gc), 0 0 22px color-mix(in srgb, var(--gc) 35%, transparent); }
.ss3t-gring b { font-size: 26px; line-height: 1; color: var(--gc); } .ss3t-gring small { font-size: 11px; color: var(--t-dim); }
.ss3t-gtxt { min-width: 0; } .ss3t-gtxt p { margin: 4px 0 0; font-size: 13.5px; color: var(--t-dim); overflow-wrap: anywhere; }
.ss3t-src { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-dim); }
.ss3t-or { display: flex; align-items: center; gap: 10px; color: var(--t-dim2); font-size: 12px; } .ss3t-or::before, .ss3t-or::after { content: ''; flex: 1; height: 1px; background: var(--t-line); }
.ss3t-score { display: flex; align-items: center; gap: 12px; } .ss3t-score input[type="range"] { flex: 1; accent-color: var(--t-accent); }
.ss3t-score input[type="number"] { width: 62px; height: 42px; text-align: center; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 20px; font-weight: 800; outline: none; box-shadow: inset 0 0 0 1px var(--t-line); }
.ss3t-bar-prog { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: -4px; } .ss3t-bar-prog i { display: block; height: 100%; border-radius: 3px; transition: width 0.25s, background 0.25s; }
.ss3t-hrow { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); } .ss3t-hrow + .ss3t-hrow { margin-top: 8px; }
.ss3t-hrow > div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .ss3t-hrow em { font-style: normal; font-weight: 500; color: var(--t-dim); }
.ss3t-hrow p { margin: 4px 0 0; font-size: 13px; color: var(--t-dim); } .ss3t-hrow small { display: block; margin-top: 5px; font-size: 12px; color: #c4b5fd; }
.ss3t-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss3t-qa button { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.07); color: var(--t-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.ss3t-qa button:hover { background: rgba(255, 255, 255, 0.14); }

/* end of session */
.ss3t-end { height: 100%; overflow: auto; padding: 44px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ss3t-end-h { text-align: center; } .ss3t-end-h h1 { margin: 14px 0 4px; font-size: 34px; font-weight: 800; } .ss3t-end-h p { margin: 0; color: var(--t-dim); }
.ss3t-end-ic { width: 84px; height: 84px; margin: 0 auto; border-radius: 26px; display: grid; place-items: center; font-size: 34px; color: #34d399; background: rgba(16, 185, 129, 0.14); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35), 0 0 50px rgba(16, 185, 129, 0.2); }
.ss3t-end-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(720px, 100%); }
.ss3t-end-stats > div { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--t-line); text-align: center; }
.ss3t-end-stats b { display: block; font-size: 30px; font-weight: 800; } .ss3t-end-stats span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-dim); }
.ss3t-end-list { width: min(720px, 100%); border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--t-line); overflow: hidden; }
.ss3t-end-row { display: grid; grid-template-columns: 34px minmax(90px, 1.1fr) 3fr 64px; gap: 12px; align-items: center; padding: 12px 18px; } .ss3t-end-row + .ss3t-end-row { border-top: 1px solid var(--t-line); }
.ss3t-end-row .rk { color: var(--t-dim2); font-weight: 800; } .ss3t-end-row .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss3t-end-row .fb { color: var(--t-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss3t-end-row b { text-align: right; }
.ss3t-end-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 1000px) {
    .ss3t-creator { grid-template-columns: 1fr; } .ss3t-c-side { display: none; }
    .ss3t-stats { grid-template-columns: repeat(2, 1fr); } .ss3t-stat-lvl { grid-column: 1 / -1; }
    .ss3t-rv-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 46%); } .ss3t-rv-side { border-left: 0; border-top: 1px solid var(--t-line); }
    .ss3t-row { grid-template-columns: 1fr; }
    .ss3t-bar, .ss3t-toolbar, .ss3t-filters { padding-left: 14px; padding-right: 14px; } .ss3t-grid { padding-left: 14px; padding-right: 14px; }
    .ss3t-tb span { display: none; } .ss3t-tb.danger span { display: inline; }
    .ss3t-end-stats { grid-template-columns: repeat(2, 1fr); } .ss3t-end-row { grid-template-columns: 28px 1fr 56px; } .ss3t-end-row .fb { display: none; }
}

/* Teacher review: what the AI actually read + its own answer, so a handwriting misread is visible at a glance. */
.ss3t-airead { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 12.5px; line-height: 1.45; color: rgba(226, 232, 240, 0.85); overflow-wrap: anywhere; }
.ss3t-airead b { color: #e2e8f0; font-weight: 700; }
.ss3t-airead small { display: block; margin-top: 4px; opacity: 0.6; font-size: 11.5px; }

/* ── My attempts: every checked page, kept on the student's device ── */
.ss3-att-btn { width: auto; padding: 0 11px; gap: 6px; display: flex; align-items: center; }
.ss3-att-btn[hidden] { display: none; }
.ss3-att-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ss3-accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ss3-att-btn.ss3-pulse { animation: ss3-att-pulse 1.2s var(--ss3-ease) 2; }
@keyframes ss3-att-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ss3-accent) 25%, transparent); transform: scale(1.06); } }
.ss3-att-sheet { width: min(720px, 100%); text-align: start; }
.ss3-att-h { display: flex; align-items: center; gap: 10px; }
.ss3-att-h i { color: var(--ss3-accent); }
.ss3-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ss3-att-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 18px; border: 1px solid var(--ss3-line); background: #fff; cursor: pointer; text-align: start; position: relative; font: inherit; color: var(--ss3-ink); min-height: 44px; }
.ss3-att-card:hover { border-color: var(--ss3-accent); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }
.ss3-att-thumb { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #f1f5f9; display: grid; place-items: center; color: var(--ss3-ink-3); font-size: 26px; }
.ss3-att-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ss3-att-meta { display: flex; flex-direction: column; padding: 0 4px; }
.ss3-att-meta b { font-size: 14px; }
.ss3-att-meta small { color: var(--ss3-ink-3); font-size: 12px; }
.ss3-att-score { position: absolute; top: 14px; inset-inline-end: 14px; padding: 3px 9px; border-radius: 99px; background: var(--sc); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.ss3-att-score small { font-size: 11px; opacity: 0.85; margin-inline-start: 1px; }
.ss3-att-score.big { position: static; font-size: 26px; padding: 8px 16px; border-radius: 18px; flex: none; }
.ss3-att-view-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ss3-att-view-head .ss3-btn { flex: none; }
.ss3-att-nav { display: flex; gap: 6px; }
.ss3-att-q { padding: 12px 14px; border-radius: 14px; background: var(--ss3-accent-soft); font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
.ss3-att-q small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss3-accent); margin-bottom: 2px; }
.ss3-att-q img { max-width: 100%; max-height: 160px; border-radius: 10px; }
.ss3-att-big { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ss3-line); display: grid; place-items: center; min-height: 160px; color: var(--ss3-ink-3); font-size: 30px; }
.ss3-att-big img { width: 100%; max-height: 52vh; object-fit: contain; }
.ss3-att-mark { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.ss3-att-mark .ss3-feedback { text-align: start; margin: 4px 0 0; }