:root {
  --bg: #000000;
  --glass: rgba(10, 10, 12, 0.78);
  --glass-strong: rgba(14, 14, 18, 0.9);
  --glass-border: rgba(255, 255, 255, 0.07);
  --text: #f2f6fc;
  --muted: #8b9bb3;
  --dim: #b6c3d8;
  --ok: #5ce3a1;
  --warn: #fbbf24;
  --danger: #f87171;
  --opt-a: #94a3b8;
  --opt-b: #5ce3a1;
  --opt-c: #67d4ff;
  --opt-d: #fbbf24;
  --opt-e: #fb7185;
  --t0: #94a3b8;
  --t1: #5ce3a1;
  --t2: #67d4ff;
  --t3: #fbbf24;
  --t4: #fb7185;
  --inv: #c4b5fd;
  --sero: #fdba74;
  --qual: #7dd3fc;
  --save: #4fd1c5;
  --skip: #a8b4c8;
  --video: #67d4ff;
  --still: #a3e635;
  --radius: 12px;
  --font: "PingFang SC", "SF Pro Display", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Menlo", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 16% 6%, rgba(103, 212, 255, 0.1), transparent 32%),
    radial-gradient(circle at 84% 2%, rgba(92, 227, 161, 0.07), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(196, 181, 253, 0.05), transparent 40%),
    var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.app { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }
.app.focus-mode .sidebar,
.app.focus-mode .form-panel { display: none; }
.app.focus-mode .workbench { grid-template-columns: 1fr; }
.app.focus-mode .main-column { padding: 0; }
.app.focus-mode .clinical-panel { display: none; }
.app.focus-mode .viewer { border-radius: 0; border: none; min-height: calc(100vh - 48px); }
.app.focus-mode .viewer-body { min-height: calc(100vh - 92px); }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 8px 14px; min-height: 52px; height: auto; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
  background: rgba(8, 10, 14, 0.88); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 1px 0 rgba(103, 212, 255, 0.06);
}
.brand-block { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 220px; }
.hospital-logo {
  width: 34px; height: 34px; border-radius: 10px; object-fit: contain; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 4px;
}
.topbar h1 {
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(280px, 36vw);
}
.study-badge {
  font-size: 0.66rem; color: #b8fff0; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: 999px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(135deg, rgba(79, 209, 197, 0.16), rgba(103, 212, 255, 0.1));
  box-shadow: 0 0 20px rgba(79, 209, 197, 0.12); flex-shrink: 1;
}
.topbar-meta {
  display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.76rem;
  flex: 2 1 420px; flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
.topbar-meta > .btn,
.topbar-meta > .reader-badge,
.topbar-meta .study-nav .btn,
.topbar-meta .phase-btn,
#tutorialBtn, #langToggleBtn {
  padding: 4px 8px; font-size: 0.72rem;
}
#caseCounter {
  flex: 1 1 100%;
  order: 20;
  text-align: right;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .study-badge { display: none; }
  .topbar h1 { max-width: min(200px, 42vw); }
}
.phase-switch { display: inline-flex; gap: 6px; }
.study-nav { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.study-nav .btn { font-size: 0.72rem; padding: 4px 8px; }
.study-nav .btn.primary-nav {
  color: #041018;
  border-color: rgba(97, 231, 161, 0.55);
  background: linear-gradient(135deg, rgba(97, 231, 161, 0.92), rgba(103, 212, 255, 0.82));
  font-weight: 700;
}
.phase-btn { border-color: rgba(103,212,255,0.28); color: var(--video); padding: 4px 8px; font-size: 0.72rem; }
.phase-btn:hover { background: rgba(103,212,255,0.12); }
.phase-btn.active { background: rgba(103,212,255,0.18); border-color: rgba(103,212,255,0.62); color: #dff7ff; }
.timer { color: var(--video); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.topbar input[type="text"] {
  width: 76px; border: 1px solid rgba(103, 212, 255, 0.35); border-radius: 8px;
  padding: 4px 8px; background: rgba(255,255,255,0.04); font-size: 0.78rem; color: var(--text);
}

.btn {
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; font-size: 0.78rem;
  color: var(--dim); transition: 0.15s ease;
}
.btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.btn.primary {
  background: linear-gradient(135deg, rgba(79,209,197,0.75), rgba(103,212,255,0.55));
  border-color: rgba(79,209,197,0.5); color: #041018; font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.06); color: #041018; }
.btn.large { padding: 16px 18px; font-size: 1rem; width: 100%; min-height: 52px; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { border-color: rgba(255,255,255,0.16); }
.btn.icon { padding: 4px 9px; min-width: 30px; font-size: 1rem; line-height: 1; }
#skipCaseBtn { border-color: rgba(251, 191, 36, 0.35); color: #fcd34d; }
#skipCaseBtn:hover { background: rgba(251, 191, 36, 0.12); }
#saveProgressBtn { border-color: rgba(103, 212, 255, 0.35); color: #67d4ff; }
#saveProgressBtn:hover:not(:disabled) { background: rgba(103, 212, 255, 0.1); }
#saveProgressBtn:disabled { opacity: 0.55; cursor: wait; }
.save-progress-hint {
  margin-top: 6px; font-size: 0.68rem; line-height: 1.4; color: var(--muted); min-height: 1em;
}
.save-progress-hint:not(:empty) { color: #67d4ff; }
#exportBtn { border-color: rgba(163, 230, 53, 0.35); color: #bef264; }
#exportBtn:hover { background: rgba(163, 230, 53, 0.1); }
.export-status-hint {
  font-size: 0.68rem; line-height: 1.45; color: var(--muted);
  padding: 8px 10px; border-top: 1px solid rgba(255,255,255,0.06);
}
.export-status-hint b { color: #bef264; font-weight: 600; }
.export-dialog {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,0.72);
}
.export-dialog.hidden { display: none !important; }
.export-dialog-card {
  width: min(520px, 100%); padding: 22px 22px 18px;
  border-radius: 14px; border: 1px solid rgba(163,230,53,0.25);
  background: rgba(10,12,16,0.96); box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.export-dialog-card h3 { margin: 0 0 10px; font-size: 1.05rem; color: #bef264; }
.export-dialog-summary { margin: 0 0 10px; color: var(--text); font-size: 0.9rem; line-height: 1.55; }
.export-dialog-note, .export-dialog-hint {
  margin: 0 0 12px; color: var(--muted); font-size: 0.82rem; line-height: 1.55;
}
.export-dialog-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.export-dialog-actions .btn { width: 100%; min-height: 44px; }
.case-timer {
  font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--video);
  padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(103,212,255,0.25);
  background: rgba(103,212,255,0.08);
}
.mini-tag.ext { background: rgba(251,191,36,0.18); color: #fcd34d; border: 1px solid rgba(251,191,36,0.35); }
.mini-tag.int { background: rgba(103,212,255,0.15); color: #93c5fd; border: 1px solid rgba(103,212,255,0.3); }
.notes-block { margin-top: 12px; }
.notes-block label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.notes-block textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px;
  border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.35);
  color: var(--text); padding: 8px 10px; font: inherit; font-size: 0.85rem;
}
.notes-block textarea:focus { outline: none; border-color: rgba(103,212,255,0.45); }
.session-stats { font-size: 0.72rem; line-height: 1.45; color: var(--muted); padding: 8px 10px; }
.session-stats b { color: var(--text); font-weight: 600; }
#focusModeBtn { border-color: rgba(196, 181, 253, 0.35); color: var(--inv); }
#speedBtn { border-color: rgba(103, 212, 255, 0.35); color: var(--video); }
#secondaryToggleBtn.active { border-color: rgba(251, 113, 133, 0.5); color: var(--t4); background: rgba(251, 113, 133, 0.12); }

.workbench { display: grid; grid-template-columns: 176px 1fr 400px; flex: 1; min-height: 0; gap: 0; }

.main-column {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: 10px; gap: 10px; background: transparent;
}

.clinical-panel {
  flex-shrink: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(103, 212, 255, 0.22);
  background: rgba(8, 12, 18, 0.95);
}
.clinical-panel.hidden { display: none !important; }
#clinicalPanel:not(.force-show) { display: none !important; }
.clinical-banner {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--glass-border);
  background: rgba(103, 212, 255, 0.06);
}
.clinical-banner-title {
  font-size: 0.88rem; font-weight: 700; color: var(--video);
  letter-spacing: 0.02em;
}
.clinical-banner-note { font-size: 0.72rem; color: var(--muted); }
.clinical-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.clinical-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border-right: 1px solid rgba(255,255,255,0.04);
}
.clinical-item:last-child { border-right: none; }
.clinical-k { font-size: 0.68rem; color: var(--muted); }
.clinical-v { font-size: 0.92rem; font-weight: 700; color: var(--text); }

.center { overflow: auto; padding: 10px; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar {
  border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; min-height: 0;
  background: var(--glass); backdrop-filter: blur(16px);
}
.sidebar-head { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); font-size: 0.75rem; color: var(--muted); }
.sidebar-tools { display: flex; gap: 4px; padding: 8px 10px 0; }
.filter-btn {
  flex: 1; padding: 5px 4px; font-size: 0.7rem; border-radius: 8px;
  border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--muted);
}
.filter-btn[data-filter="all"].active { color: var(--video); border-color: rgba(103,212,255,0.35); background: rgba(103,212,255,0.1); }
.filter-btn[data-filter="todo"].active { color: var(--warn); border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.1); }
.filter-btn[data-filter="done"].active { color: var(--ok); border-color: rgba(92,227,161,0.35); background: rgba(92,227,161,0.1); }
.progress-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--t1), var(--video)); }
.session-stats { padding: 8px 12px; font-size: 0.7rem; color: var(--muted); border-top: 1px solid var(--glass-border); }

.case-list { overflow: auto; padding: 6px; display: grid; gap: 4px; flex: 1; }
.case-chip {
  display: grid; grid-template-columns: 1fr auto auto; gap: 5px; align-items: center;
  padding: 7px 9px; border-radius: 10px; cursor: pointer; font-size: 0.78rem;
  border: 1px solid transparent; color: var(--dim); background: rgba(255,255,255,0.02);
}
.case-chip:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.case-chip.active { border-color: rgba(103,212,255,0.45); background: rgba(103,212,255,0.1); color: var(--text); }
.case-chip.done { border-color: rgba(92,227,161,0.25); }
.case-chip.locked { opacity: 0.42; cursor: not-allowed; }
.case-chip.locked:hover { transform: none; background: rgba(255,255,255,0.03); }
.case-chip.done .status-dot { background: var(--ok); box-shadow: 0 0 8px rgba(92,227,161,0.45); }
.case-chip .mini-tag { font-size: 0.62rem; color: var(--warn); }
.case-chip .mini-tag.video { color: var(--video); }
.case-chip .mini-tag.tstage { color: var(--video); }
.case-chip .mini-tag.locked { color: var(--muted); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); }

.center { overflow: auto; padding: 10px; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.clinical-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-stat {
  padding: 5px 10px; border-radius: 999px; font-size: 0.72rem;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--muted);
  backdrop-filter: blur(10px);
}
.chip-stat:nth-child(6n+1) b { color: var(--t1); }
.chip-stat:nth-child(6n+2) b { color: var(--video); }
.chip-stat:nth-child(6n+3) b { color: var(--warn); }
.chip-stat:nth-child(6n+4) b { color: var(--inv); }
.chip-stat:nth-child(6n+5) b { color: var(--sero); }
.chip-stat:nth-child(6n+6) b { color: var(--qual); }

.viewer {
  flex: 1; min-height: 320px; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(103, 212, 255, 0.14);
  background: linear-gradient(180deg, rgba(14, 18, 24, 0.96), rgba(6, 8, 12, 0.98));
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.viewer-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  flex-wrap: wrap;
}
.frame-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.frame-tab {
  padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; cursor: pointer;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); color: var(--muted);
}
.frame-tab.media-video { color: rgba(103,212,255,0.85); border-color: rgba(103,212,255,0.2); }
.frame-tab.media-still { color: rgba(163,230,53,0.85); border-color: rgba(163,230,53,0.2); }
.frame-tab.media-video.active { background: rgba(103,212,255,0.16); border-color: rgba(103,212,255,0.5); color: var(--video); }
.frame-tab.media-still.active { background: rgba(163,230,53,0.14); border-color: rgba(163,230,53,0.45); color: var(--still); }
.frame-tab.viewed::after { content: '✓'; margin-left: 2px; color: var(--ok); }
.viewer-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ctl-btn { padding: 7px 12px; font-size: 0.82rem; min-height: 36px; }
.frame-counter { font-size: 0.78rem; color: var(--muted); font-family: var(--mono); }
.video-scrubber {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 12px; border-bottom: 1px solid rgba(103, 212, 255, 0.08);
  background: linear-gradient(180deg, rgba(103, 212, 255, 0.08), rgba(4, 8, 14, 0.5));
  flex-shrink: 0;
}
.video-scrubber input[type="range"] {
  flex: 1; accent-color: var(--video); height: 10px; cursor: pointer; min-width: 120px;
  border-radius: 999px;
}
.ctl-btn {
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}
.ctl-btn:hover {
  border-color: rgba(103, 212, 255, 0.35);
  background: rgba(103, 212, 255, 0.1);
  color: var(--text);
}
.video-time { font-family: var(--mono); font-size: 0.82rem; color: var(--dim); min-width: 96px; text-align: right; }
.speed-label { font-size: 0.78rem; color: var(--muted); margin-left: 4px; }
.speed-select {
  border: 1px solid rgba(103, 212, 255, 0.35); background: rgba(255,255,255,0.06);
  border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; color: var(--video); min-width: 72px;
}
.viewer-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; min-height: 0; }
.viewer-body.single-pane { grid-template-columns: 1fr; }
.viewer-body.single-pane .secondary-pane { display: none !important; }

.auth-gate {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: #000;
}
.auth-card {
  width: min(480px, 92vw); padding: 24px 22px; border-radius: 16px; text-align: center;
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px;
}
.auth-brand .hospital-logo { width: 44px; height: 44px; }
.auth-card h2 { margin-bottom: 4px; font-size: 1.15rem; }
.auth-card p { color: var(--muted); font-size: 0.82rem; margin-bottom: 14px; }
.quick-guide {
  text-align: left; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(103,212,255,0.18); background: rgba(103,212,255,0.06);
}
.quick-guide-title {
  font-size: 0.82rem; font-weight: 700; color: var(--video); margin-bottom: 8px;
}
.quick-guide ol {
  margin: 0; padding-left: 1.15rem; color: var(--dim); font-size: 0.78rem; line-height: 1.55;
}
.quick-guide li { margin-bottom: 4px; }
.quick-tip {
  margin: 8px 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.45;
}
.auth-label {
  display: block; text-align: left; font-size: 0.78rem; color: var(--muted); margin: 4px 0 6px;
}
.auth-subhint {
  text-align: left; color: var(--muted); font-size: 0.72rem; margin: -4px 0 12px; line-height: 1.45;
}
.auth-card input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); margin-bottom: 10px;
}
.auth-hint { min-height: 1.2em; margin-top: 8px; color: var(--danger); font-size: 0.78rem; }
.quick-tip.hidden { display: none !important; }

.study-intro-modal {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px 12px;
}
.study-intro-modal.hidden { display: none !important; }
.study-intro-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72);
}
.study-intro-card {
  position: relative; width: min(640px, 96vw); max-height: 88vh; overflow: auto;
  padding: 22px 22px 18px; border-radius: 16px; text-align: left;
}
.study-intro-header { margin-bottom: 14px; text-align: center; }
.study-intro-badge {
  display: inline-block; font-size: 0.72rem; color: var(--video);
  border: 1px solid rgba(103,212,255,0.35); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.study-intro-header h2 { margin: 0 0 6px; font-size: 1.12rem; }
.study-intro-header p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.study-intro-body section { margin-bottom: 14px; }
.study-intro-body h3 {
  margin: 0 0 8px; font-size: 0.88rem; color: var(--video);
}
.study-intro-body ol,
.study-intro-body ul {
  margin: 0; padding-left: 1.15rem; color: var(--dim); font-size: 0.8rem; line-height: 1.55;
}
.study-intro-body li { margin-bottom: 6px; }
.study-intro-body p { margin: 0; color: var(--dim); font-size: 0.8rem; line-height: 1.55; }
.study-intro-actions { display: flex; justify-content: center; margin-top: 8px; }
.file-protocol-warning {
  color: var(--warn) !important;
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.1);
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  line-height: 1.5;
  text-align: left;
}

.survey-gate {
  position: fixed; inset: 0; z-index: 1900; display: grid; place-items: center;
  background: #000;
  overflow: auto; padding: 20px 12px;
}
.survey-card {
  width: min(560px, 96vw); padding: 26px 24px 22px; border-radius: 18px; text-align: left;
}
.survey-header { margin-bottom: 18px; text-align: center; }
.survey-step {
  display: inline-block; font-size: 0.72rem; color: var(--save);
  padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(79,209,197,0.35);
  background: rgba(79,209,197,0.08); margin-bottom: 10px;
}
.survey-header h2 { font-size: 1.2rem; margin-bottom: 6px; }
.survey-header p { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.req { color: var(--danger); }
.survey-form { display: flex; flex-direction: column; gap: 14px; }
.survey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.survey-field label {
  display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 8px; color: var(--dim);
}
.survey-field input,
.survey-field select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
}
.survey-field select { cursor: pointer; }
.survey-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.survey-pill {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03); cursor: pointer; font-size: 0.8rem; transition: 0.15s ease;
}
.survey-pill:hover { border-color: rgba(103,212,255,0.35); }
.survey-pill.active {
  background: rgba(103,212,255,0.16); border-color: rgba(103,212,255,0.5); color: var(--video);
}
.survey-actions {
  display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 18px;
}
.survey-submit { flex: 1; max-width: 280px; }
.reader-badge {
  font-size: 0.74rem; color: var(--dim); max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reader-badge-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(103,212,255,0.18);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.reader-badge-btn:hover {
  color: var(--video);
  border-color: rgba(103,212,255,0.45);
}
.profile-modal {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center; padding: 20px 12px;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
}
.profile-modal.hidden { display: none !important; }
.profile-card {
  width: min(460px, 94vw); padding: 22px 20px 18px;
  border-radius: 16px; border: 1px solid rgba(103,212,255,0.22);
}
.profile-header h2 { margin: 0 0 6px; font-size: 1.05rem; }
.profile-subtitle { margin: 0 0 14px; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.profile-summary { display: grid; gap: 10px; margin-bottom: 16px; }
.profile-row {
  display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-row:last-child { border-bottom: none; }
.profile-k { color: var(--dim); font-size: 0.78rem; }
.profile-v { color: var(--text); font-size: 0.86rem; word-break: break-word; }
.profile-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 520px) {
  .survey-grid { grid-template-columns: 1fr; }
}
.viewer-pane.video-missing {
  background: #000;
  min-height: 260px;
}
.viewer-pane.video-missing::after {
  content: '视频加载失败';
  color: var(--muted);
  font-size: 0.82rem;
}
.viewer-pane {
  position: relative; background: #020304; border-radius: 14px; overflow: hidden; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(103, 212, 255, 0.1);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
}
.viewer-pane img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.viewer-pane video { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; }
.viewer-pane video.is-loading { opacity: 0; }
.viewer-pane video:not(.is-loading) { opacity: 1; transition: opacity 0.12s ease; }
.viewer-label {
  position: absolute; left: 10px; bottom: 10px; font-size: 0.68rem;
  background: rgba(0,0,0,0.72); padding: 3px 9px; border-radius: 999px; color: var(--video);
  backdrop-filter: blur(8px);
}

.form-panel {
  border-left: 1px solid var(--glass-border); overflow: auto; min-height: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.98), rgba(4, 5, 10, 1));
  box-shadow: inset 1px 0 0 rgba(103, 212, 255, 0.04);
}
.form-scroll { flex: 1; overflow: auto; padding: 16px 14px; display: flex; flex-direction: column; }
.staging-header { margin-bottom: 14px; }
.form-sticky {
  padding: 14px; border-top: 1px solid var(--glass-border);
  background: rgba(8, 8, 12, 0.98);
}

.acc-section {
  margin-bottom: 8px; border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.acc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 11px; cursor: pointer; font-size: 0.78rem; font-weight: 600;
  background: rgba(255,255,255,0.03); border-left: 3px solid transparent;
}
.acc-head span { color: var(--muted); font-size: 0.68rem; font-weight: 400; }
#accT .acc-head { border-left-color: var(--t2); }
#accProb .acc-head { border-left-color: var(--inv); }
#accI .acc-head { border-left-color: var(--sero); }
#accQ .acc-head { border-left-color: var(--qual); }
#accReader .acc-head { border-left-color: var(--still); }
.acc-body { padding: 10px; border-top: 1px solid var(--glass-border); }
.acc-section.collapsed .acc-body { display: none; }
.acc-section.done .acc-head { color: var(--ok); }

.stage-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.stage-row-four { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stage-row-two { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stage-grid { display: grid; flex: 1; align-content: start; }
.choice-title {
  font-size: 1.15rem; font-weight: 800; margin: 0 0 6px;
  color: var(--text);
}
.choice-hint {
  font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.45;
}
.choice-hint kbd {
  font-family: var(--mono); font-size: 0.72rem;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.06);
}
.stage-grid .stage-btn,
.stage-row-letters .stage-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px 10px; min-height: 108px; width: 100%;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.stage-grid .stage-btn:hover,
.stage-row-letters .stage-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
}
.stage-letter { font-size: 2rem; font-weight: 900; line-height: 1; }
.stage-text { font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.stage-sub { font-size: 0.68rem; font-weight: 500; line-height: 1.25; color: var(--muted); opacity: 0.95; }
.stage-btn {
  padding: 12px 4px; border-radius: 14px; text-align: center; font-size: 0.95rem; font-weight: 700;
  border: 2px solid var(--glass-border); background: rgba(255,255,255,0.03); cursor: pointer;
}
.stage-btn[data-value="A"] { color: var(--opt-b); border-color: rgba(92,227,161,0.4); }
.stage-btn[data-value="B"] { color: var(--opt-c); border-color: rgba(103,212,255,0.4); }
.stage-btn[data-value="C"] { color: var(--opt-d); border-color: rgba(251,191,36,0.4); }
.stage-btn[data-value="D"] { color: var(--opt-e); border-color: rgba(251,113,133,0.4); }
.stage-btn[data-value="benign"] { color: var(--opt-b); border-color: rgba(92,227,161,0.45); }
.stage-btn[data-value="malignant"] { color: var(--opt-e); border-color: rgba(251,113,133,0.45); }
.stage-btn[data-value="A"].active { background: rgba(92,227,161,0.22); box-shadow: 0 0 0 2px rgba(92,227,161,0.35), 0 8px 24px rgba(92,227,161,0.12); }
.stage-btn[data-value="B"].active { background: rgba(103,212,255,0.22); box-shadow: 0 0 0 2px rgba(103,212,255,0.35), 0 8px 24px rgba(103,212,255,0.12); }
.stage-btn[data-value="C"].active { background: rgba(251,191,36,0.22); box-shadow: 0 0 0 2px rgba(251,191,36,0.35), 0 8px 24px rgba(251,191,36,0.12); }
.stage-btn[data-value="D"].active { background: rgba(251,113,133,0.22); box-shadow: 0 0 0 2px rgba(251,113,133,0.35), 0 8px 24px rgba(251,113,133,0.12); }
.stage-btn[data-value="benign"].active {
  background: rgba(92,227,161,0.26);
  border-color: rgba(92,227,161,0.95);
  color: #d8ffe9;
  box-shadow: 0 0 0 3px rgba(92,227,161,0.55), 0 12px 32px rgba(92,227,161,0.18);
}
.stage-btn[data-value="malignant"].active {
  background: rgba(251,113,133,0.28);
  border-color: rgba(251,113,133,0.95);
  color: #ffe4e9;
  box-shadow: 0 0 0 3px rgba(251,113,133,0.55), 0 12px 32px rgba(251,113,133,0.18);
}
.stage-btn.active .stage-text::after {
  content: ' 已选';
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  color: #020617;
  background: rgba(255,255,255,0.86);
}
html[data-lang="en"] .stage-btn.active .stage-text::after {
  content: ' Selected';
}
.selection-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
}
.selection-feedback.selected-benign {
  color: #d8ffe9;
  border-color: rgba(92,227,161,0.62);
  background: rgba(92,227,161,0.15);
}
.selection-feedback.selected-malignant {
  color: #ffe4e9;
  border-color: rgba(251,113,133,0.62);
  background: rgba(251,113,133,0.16);
}

.option-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  padding: 6px 10px; border-radius: 999px; font-size: 0.75rem;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); cursor: pointer; color: var(--muted);
}
[data-field="second_choice_t_stage"] .pill[data-value="A"] { color: rgba(148,163,184,0.9); }
[data-field="second_choice_t_stage"] .pill[data-value="B"] { color: rgba(92,227,161,0.9); }
[data-field="second_choice_t_stage"] .pill[data-value="C"] { color: rgba(103,212,255,0.9); }
[data-field="second_choice_t_stage"] .pill[data-value="D"] { color: rgba(251,191,36,0.9); }
[data-field="second_choice_t_stage"] .pill[data-value="E"] { color: rgba(251,113,133,0.9); }
[data-field="invasion_depth"] .pill.active { border-color: rgba(196,181,253,0.55); background: rgba(196,181,253,0.14); color: var(--inv); }
[data-field="serosal_integrity"] .pill[data-value="intact"].active { border-color: rgba(92,227,161,0.55); background: rgba(92,227,161,0.12); color: var(--ok); }
[data-field="serosal_integrity"] .pill[data-value="suspect"].active { border-color: rgba(251,191,36,0.55); background: rgba(251,191,36,0.12); color: var(--warn); }
[data-field="serosal_integrity"] .pill[data-value="disrupted"].active { border-color: rgba(251,113,133,0.55); background: rgba(251,113,133,0.12); color: var(--t4); }
[data-field="serosal_integrity"] .pill[data-value="na"].active { border-color: rgba(168,180,200,0.55); background: rgba(168,180,200,0.1); color: var(--dim); }
[data-field="wall_layer_clarity"] .pill[data-value="clear"].active { color: var(--ok); border-color: rgba(92,227,161,0.5); background: rgba(92,227,161,0.1); }
[data-field="wall_layer_clarity"] .pill[data-value="partial"].active { color: var(--warn); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.1); }
[data-field="wall_layer_clarity"] .pill[data-value="poor"].active { color: var(--t4); border-color: rgba(251,113,133,0.5); background: rgba(251,113,133,0.1); }
[data-field="sufficient_for_staging"] .pill[data-value="yes"].active { color: var(--ok); border-color: rgba(92,227,161,0.5); }
[data-field="sufficient_for_staging"] .pill[data-value="no"].active { color: var(--t4); border-color: rgba(251,113,133,0.5); }
[data-field="need_more_views"] .pill[data-value="yes"].active { color: var(--warn); border-color: rgba(251,191,36,0.5); }
.pill.active { font-weight: 600; }

.slider-block { margin-bottom: 10px; }
.slider-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.slider-head label { font-size: 0.75rem; color: var(--muted); margin: 0; }
.slider-value { font-size: 0.78rem; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; }
#accT .slider-value { color: var(--t2); }
#accI .slider-value { color: var(--sero); }
#accQ .slider-value { color: var(--qual); }
#accProb .slider-value { color: var(--inv); }

input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.1); outline: none;
}
#accT input[type="range"]::-webkit-slider-thumb { background: var(--t2); }
#accI input[type="range"]::-webkit-slider-thumb { background: var(--sero); }
#accQ input[type="range"]::-webkit-slider-thumb { background: var(--qual); }
#accProb input[type="range"]::-webkit-slider-thumb { background: var(--inv); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  cursor: pointer; border: 2px solid var(--bg);
}

.dist-grid { display: grid; gap: 6px; }
.dist-row { display: grid; grid-template-columns: 32px 1fr 36px; gap: 6px; align-items: center; font-size: 0.75rem; color: var(--muted); }
.dist-row:nth-child(1) span, .dist-row:nth-child(1) [data-slider-label] { color: var(--opt-a); }
.dist-row:nth-child(2) span, .dist-row:nth-child(2) [data-slider-label] { color: var(--opt-b); }
.dist-row:nth-child(3) span, .dist-row:nth-child(3) [data-slider-label] { color: var(--opt-c); }
.dist-row:nth-child(4) span, .dist-row:nth-child(4) [data-slider-label] { color: var(--opt-d); }
.dist-row:nth-child(5) span, .dist-row:nth-child(5) [data-slider-label] { color: var(--opt-e); }
.dist-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 28px; margin-bottom: 6px; }
.dist-bar:nth-child(1) { background: linear-gradient(180deg, var(--opt-a), rgba(148,163,184,0.2)); }
.dist-bar:nth-child(2) { background: linear-gradient(180deg, var(--opt-b), rgba(92,227,161,0.2)); }
.dist-bar:nth-child(3) { background: linear-gradient(180deg, var(--opt-c), rgba(103,212,255,0.2)); }
.dist-bar:nth-child(4) { background: linear-gradient(180deg, var(--opt-d), rgba(251,191,36,0.2)); }
.dist-bar:nth-child(5) { background: linear-gradient(180deg, var(--opt-e), rgba(251,113,133,0.2)); }
.dist-bar { border-radius: 4px 4px 0 0; align-self: end; min-height: 4px; transition: height 0.15s; }
.dist-sum { font-size: 0.68rem; color: var(--muted); text-align: right; margin-bottom: 4px; }

textarea {
  width: 100%; min-height: 52px; border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 8px; background: rgba(255,255,255,0.04); resize: vertical; font-size: 0.8rem; color: var(--text);
}
textarea:focus { outline: none; border-color: rgba(103,212,255,0.4); }
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.hidden { display: none !important; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; z-index: 300;
}
.modal.open { display: flex; }
.modal-inner { position: relative; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.modal img,
.modal video { max-width: 96vw; max-height: 78vh; object-fit: contain; border-radius: 10px; }
.modal-bar { display: flex; gap: 6px; }
.modal-hint { font-size: 0.72rem; color: var(--muted); }

.toast {
  position: fixed; bottom: 16px; right: 16px; padding: 9px 14px; border-radius: 10px;
  background: rgba(92,227,161,0.14); border: 1px solid rgba(92,227,161,0.35); color: var(--ok);
  font-size: 0.78rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 400;
  backdrop-filter: blur(12px);
}
.toast.show { opacity: 1; }

.kf-capture-btn {
  border-color: rgba(196, 181, 253, 0.45) !important;
  color: #e9d5ff !important;
  background: rgba(196, 181, 253, 0.12) !important;
  font-weight: 600;
}
.kf-capture-btn:hover {
  background: rgba(196, 181, 253, 0.22) !important;
  color: #f5f3ff !important;
}
.keyframe-rail {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(103, 212, 255, 0.1);
  background: rgba(4, 8, 14, 0.72);
}
.keyframe-rail-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 0.76rem; color: var(--muted);
}
.keyframe-rail-head strong { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.04em; }
#keyframeCount {
  color: var(--video); font-family: var(--mono); font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(103, 212, 255, 0.25); background: rgba(103, 212, 255, 0.08);
}
.keyframe-hint { flex: 1; min-width: 160px; font-size: 0.72rem; opacity: 0.85; }
.keyframe-list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.keyframe-list::-webkit-scrollbar { height: 6px; }
.keyframe-list::-webkit-scrollbar-thumb {
  background: rgba(103, 212, 255, 0.25); border-radius: 999px;
}
.keyframe-card {
  flex: 0 0 108px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  overflow: hidden; background: rgba(255, 255, 255, 0.04); cursor: zoom-in;
  scroll-snap-align: start; transition: transform 0.15s ease, border-color 0.15s ease;
}
.keyframe-card:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 212, 255, 0.45);
}
.keyframe-card img {
  display: block; width: 108px; height: 68px; object-fit: cover; background: #000;
}
.keyframe-meta {
  display: flex; flex-direction: column; gap: 2px; padding: 5px 6px;
  color: var(--muted); font-size: 0.62rem; line-height: 1.3;
}
.keyframe-meta button, .keyframe-meta a {
  color: var(--video); background: transparent; border: 0; cursor: pointer;
  padding: 0; font-size: inherit; text-decoration: none;
}
.keyframe-empty {
  color: var(--muted); font-size: 0.74rem; padding: 6px 2px; font-style: italic;
}
.kf-modal {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 16px;
}
.kf-modal.hidden { display: none !important; }
.kf-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.84); backdrop-filter: blur(6px); }
.kf-modal-inner {
  position: relative; width: min(96vw, 1200px); max-height: 92vh;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 16px; border: 1px solid rgba(103, 212, 255, 0.28);
  background: rgba(8, 12, 18, 0.96); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.kf-modal-inner img {
  width: 100%; max-height: calc(92vh - 88px); object-fit: contain;
  background: #000; border-radius: 10px;
}
.kf-modal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--dim); font-size: 0.82rem;
}
.kf-modal-close {
  border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.06);
  color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer;
}

.sidebar-head strong { color: var(--video); font-size: 1.05rem; }
.case-chip.active {
  box-shadow: inset 0 0 0 1px rgba(103, 212, 255, 0.2);
}
.progress-bar span {
  background: linear-gradient(90deg, var(--t1), var(--video), var(--save));
  box-shadow: 0 0 12px rgba(103, 212, 255, 0.35);
}
.form-sticky {
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
#saveCaseBtn {
  box-shadow: 0 8px 28px rgba(79, 209, 197, 0.22);
}

/* assist (kept minimal) */
.assist-app { background: var(--bg); }
.assist-setup { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.assist-card {
  width: min(720px, 94vw); background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 20px; backdrop-filter: blur(18px);
}
.assist-workbench { flex: 1; display: grid; grid-template-columns: 180px 1fr; min-height: 0; }
.assist-main { overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.field input[type="file"], .field input[type="text"] {
  width: 100%; border: 1px solid var(--glass-border); border-radius: 8px; padding: 8px; background: rgba(255,255,255,0.04);
}
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { font-size: 0.78rem; font-weight: 600; color: var(--qual); margin-bottom: 8px; }
.assist-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; padding: 4px 0; border-bottom: 1px solid var(--glass-border); }
.assist-kv span { color: var(--muted); }
.assist-kv b { color: var(--text); }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px; }
.baseline-panel, .ai-panel {
  background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px; margin-bottom: 10px;
}
.ai-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--video), var(--save)); }
.ai-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.ai-bar-row { display: grid; grid-template-columns: 28px 1fr 36px; gap: 6px; align-items: center; font-size: 0.75rem; margin-bottom: 4px; }
.frames { display: grid; gap: 8px; }
.assist-frame { border: 1px solid var(--glass-border); border-radius: 10px; overflow: hidden; }
.assist-frame-head { padding: 6px 10px; font-size: 0.72rem; color: var(--muted); border-bottom: 1px solid var(--glass-border); }
.assist-frame-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #000; padding: 4px; }
.assist-frame-body img, .assist-frame-body video { width: 100%; max-height: 220px; object-fit: contain; cursor: zoom-in; background: #000; border-radius: 8px; }
.assist-table th, .assist-table td { border: 1px solid var(--glass-border); padding: 6px 8px; text-align: left; }
.assist-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

@media (max-width: 1200px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  .workbench { grid-template-columns: 1fr; }
  .sidebar { max-height: 200px; }
  .clinical-grid { grid-template-columns: repeat(3, 1fr); }
  .clinical-item { border-bottom: 1px solid rgba(255,255,255,0.04); }
  .viewer-body { grid-template-columns: 1fr; }
  .assist-workbench { grid-template-columns: 1fr; }
  .assist-frame-body { grid-template-columns: 1fr; }
}

/* —— i18n / tutorial —— */
.lang-toggle-btn { min-width: 3.2rem; font-weight: 700; letter-spacing: .02em; }
.auth-i18n-row { display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.tutorial-modal { position:fixed; inset:0; z-index:100050; display:flex; align-items:center; justify-content:center; padding:20px; }
.tutorial-modal.hidden { display:none !important; }
.tutorial-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); }
.tutorial-card { position:relative; z-index:1; width:min(720px,96vw); max-height:min(82vh,860px); display:flex; flex-direction:column; border:1px solid rgba(103,212,255,.28); border-radius:14px; background:rgba(10,12,16,.96); box-shadow:0 18px 60px rgba(0,0,0,.55); overflow:hidden; }
.tutorial-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
.tutorial-header h2 { margin:0; font-size:1.05rem; color:#e8f4ff; }
.tutorial-header-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tutorial-body { padding:16px 18px 22px; overflow:auto; line-height:1.65; color:#c5d0e0; font-size:.92rem; }
.tut-section { margin-bottom:16px; }
.tut-section h3 { margin:0 0 6px; font-size:.98rem; color:#7dd3fc; font-weight:650; }
.tut-section p { margin:0; }
html[data-lang="en"] body { font-family: "SF Pro Display","Helvetica Neue",Arial,"PingFang SC",sans-serif; }