:root {
  --bg: #f7f2e8;
  --paper: #fffdf8;
  --panel: #fffaf1;
  --ink: #1c355e;
  --muted: #6d7685;
  --line: #e5dccd;
  --blue: #3f74c9;
  --green: #2d8a61;
  --yellow: #fff0bf;
  --orange: #ef8a49;
  --shadow: 0 18px 40px rgba(92, 76, 42, 0.11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "BIZ UDPGothic", "Yu Gothic", sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.36)),
    repeating-linear-gradient(0deg, transparent 0 31px, #efe4d3 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, #f3eadf 31px 32px),
    var(--bg);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
button, input, select {
  font: inherit;
}
button {
  cursor: pointer;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.page-layout {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 18px 72px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
}
.shell {
  min-width: 0;
}
.shell-main {
  padding-bottom: 48px;
}
.sidebar,
.hero,
.panel,
.card,
.mini-card,
.auth-card,
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.sidebar {
  position: sticky;
  top: 22px;
  height: fit-content;
  padding: 20px;
  display: grid;
  gap: 16px;
}
.brand {
  display: block;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(63,116,201,.12), rgba(45,138,97,.10));
}
.brand strong {
  display: block;
  font-size: 23px;
  line-height: 1.1;
}
.brand span {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.topbar-title {
  font-weight: 700;
}
.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  color: var(--muted);
}
.account-chip strong {
  color: var(--ink);
}
.hero {
  padding: 28px;
}
.eyebrow,
.pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}
.eyebrow { background: var(--blue); color: white; }
.pill { background: var(--yellow); }
.sub-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(63,116,201,.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.reason-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.tag-row,
.mini-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tag-chip,
.mini-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(239,138,73,.12);
  color: #b55b21;
  font-size: 12px;
  font-weight: 700;
}
.mini-tag-row {
  gap: 6px;
  margin-top: 8px;
}
.mini-tag-chip {
  font-size: 11px;
  padding: 3px 8px;
}
.review-row,
.mini-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.review-pill,
.mini-review-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(239,138,73,.12);
  color: #b55b21;
  font-size: 12px;
  font-weight: 700;
}
.review-pill.is-done,
.mini-review-pill.is-done {
  background: rgba(45,138,97,.12);
  color: var(--green);
}
.mini-review-row {
  gap: 6px;
  margin-top: 8px;
}
.mini-review-pill {
  font-size: 11px;
  padding: 3px 8px;
}
h1 { margin: 18px 0 10px; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; }
h2 { margin: 0 0 10px; }
h3 { margin: 8px 0 8px; font-size: 22px; }
h4 { margin: 0; font-size: 16px; }
.lede, .meta, .small, .muted { color: var(--muted); line-height: 1.8; }
.section-title { margin: 34px 0 16px; font-size: 24px; }
.actions, .nav-row, .selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.button, select, .search-input, .text-input {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  color: var(--ink);
  padding: 14px 18px;
  font-size: 16px;
}
.button.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
  font-weight: 700;
}
.button.soft {
  background: rgba(63,116,201,.08);
  border-color: rgba(63,116,201,.18);
}
.button.ghost {
  background: transparent;
}
.search-input, .text-input, select {
  width: 100%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.grid.tight {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
  overflow: hidden;
  position: relative;
}
.card img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.card-body {
  padding: 16px 16px 18px;
}
.card.is-watched {
  border-color: rgba(45,138,97,.38);
  box-shadow: 0 20px 42px rgba(45,138,97,.14);
}
.card.is-review {
  border-color: rgba(239,138,73,.34);
  box-shadow: 0 20px 42px rgba(239,138,73,.16);
}
.watch-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(45,138,97,.94);
  color: white;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}
.review-badge {
  position: absolute;
  top: 52px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(239,138,73,.94);
  color: white;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}
.continue-shell {
  display: grid;
  gap: 18px;
}
.continue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.status-pill {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(45,138,97,.12);
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
button.status-pill {
  border: none;
  cursor: pointer;
  font: inherit;
}
.status-pill.is-active {
  box-shadow: inset 0 0 0 2px rgba(45,138,97,.25);
}
.status-pill.warn {
  background: rgba(239,138,73,.14);
  color: #b55b21;
}
.status-pill.warn.is-active {
  box-shadow: inset 0 0 0 2px rgba(181,91,33,.28);
}
.viewer {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(280px,.8fr);
  gap: 20px;
  margin-top: 24px;
}
.panel {
  padding: 18px;
}
.video-stack {
  display: grid;
  gap: 16px;
}
.next-up-box {
  padding: 18px;
  border: 1px dashed rgba(63,116,201,.28);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(63,116,201,.08), rgba(45,138,97,.08));
}
.next-up-box h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.chapter-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(63,116,201,.06);
  border: 1px solid rgba(63,116,201,.16);
}
.chapter-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.chapter-status {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}
.chapter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chapter-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid rgba(63,116,201,.18);
  background: white;
  border-radius: 999px;
  color: var(--ink);
  padding: 10px 14px;
  font-size: 14px;
}
.chapter-chip strong {
  font-size: 14px;
}
.chapter-chip span {
  font-size: 12px;
  color: var(--muted);
}
.chapter-chip.is-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.chapter-chip.is-active span {
  color: rgba(255,255,255,.86);
}
.practice-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(45,138,97,.06);
  border: 1px solid rgba(45,138,97,.16);
}
.practice-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.practice-list {
  display: grid;
  gap: 10px;
}
.practice-card {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(28,53,94,.10);
  background: white;
}
.practice-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.practice-num {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(63,116,201,.10);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.practice-toggle {
  border: 1px solid rgba(45,138,97,.18);
  background: rgba(45,138,97,.08);
  color: var(--green);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}
.practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.practice-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.practice-jump {
  border: 1px solid rgba(63,116,201,.16);
  background: rgba(63,116,201,.08);
  color: var(--blue);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}
.practice-check {
  border: 1px solid rgba(28,53,94,.12);
  background: white;
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}
.practice-check.is-success {
  border-color: rgba(45,138,97,.26);
  background: rgba(45,138,97,.10);
  color: var(--green);
}
.practice-check.is-retry {
  border-color: rgba(239,138,73,.24);
  background: rgba(239,138,73,.10);
  color: #b55b21;
}
.practice-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.practice-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(28,53,94,.10);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.practice-summary-chip strong {
  color: var(--ink);
}
.practice-prompt {
  line-height: 1.7;
  color: var(--ink);
}
.practice-answer {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(28,53,94,.12);
  color: var(--muted);
}
.practice-answer strong {
  color: var(--green);
}
.practice-card.is-open .practice-answer {
  display: block;
}
.countdown-text {
  font-weight: 700;
  color: var(--green);
}
.narrator-card {
  display: grid;
  gap: 16px;
}
.narrator-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.narrator-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.avatar-stage {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.95), rgba(255,255,255,.68) 30%, rgba(201,223,255,.58) 58%, rgba(99,139,209,.22) 100%),
    linear-gradient(180deg, #f7fbff, #edf5ff 55%, #e8f1ff);
  border: 1px solid rgba(99,139,209,.16);
  perspective: 1200px;
}
.avatar-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 26px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,116,201,.22), rgba(61,116,201,0) 72%);
}
.avatar {
  position: relative;
  width: 224px;
  height: 264px;
  margin: 24px auto 10px;
  transform-style: preserve-3d;
  transition: transform .22s ease;
}
.avatar.is-speaking {
  animation: avatar-bob 1.25s ease-in-out infinite;
}
.avatar-shadow {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 6px;
  height: 26px;
  border-radius: 50%;
  background: rgba(28,53,94,.18);
  filter: blur(8px);
}
.avatar-body {
  position: absolute;
  inset: 0;
}
.avatar-head {
  position: absolute;
  left: 62px;
  top: 8px;
  width: 104px;
  height: 112px;
  border-radius: 46% 46% 42% 42%;
  background: linear-gradient(145deg, #ffd5bc, #ffbf9c 70%, #ec9b78);
  box-shadow: inset -10px -12px 0 rgba(173, 90, 62, .12);
  transform: translateZ(16px);
}
.avatar-hair {
  position: absolute;
  inset: -6px -2px 38px -2px;
  border-radius: 46% 46% 30% 30%;
  background: linear-gradient(180deg, #35537d, #243a59);
}
.avatar-face {
  position: absolute;
  inset: 28px 16px 18px;
}
.avatar-eye {
  position: absolute;
  top: 14px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #17345c;
}
.avatar-eye.left {
  left: 18px;
}
.avatar-eye.right {
  right: 18px;
}
.avatar-cheek {
  position: absolute;
  top: 42px;
  width: 16px;
  height: 9px;
  border-radius: 999px;
  background: rgba(239,138,73,.24);
}
.avatar-cheek.left {
  left: 10px;
}
.avatar-cheek.right {
  right: 10px;
}
.avatar-mouth {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 24px;
  height: 9px;
  margin-left: -12px;
  border-radius: 0 0 14px 14px;
  background: #c54f54;
  transform-origin: center top;
}
.avatar-torso {
  position: absolute;
  left: 54px;
  top: 108px;
  width: 116px;
  height: 122px;
  border-radius: 28px;
  background: linear-gradient(145deg, #3f74c9, #5f92e2 70%, #84aef0);
  box-shadow: inset -16px -18px 0 rgba(23,52,92,.12);
  transform: rotateX(10deg) translateZ(8px);
}
.avatar-collar {
  position: absolute;
  left: 28px;
  top: 12px;
  width: 60px;
  height: 22px;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.9);
}
.avatar-arm {
  position: absolute;
  top: 124px;
  width: 30px;
  height: 100px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffd1b4, #f0a17e);
  transform-origin: top center;
  box-shadow: inset -6px -10px 0 rgba(173, 90, 62, .10);
}
.avatar-arm.left {
  left: 28px;
  transform: rotate(16deg);
}
.avatar-arm.right {
  right: 28px;
  transform: rotate(-18deg);
}
.avatar-hand {
  position: absolute;
  left: 3px;
  bottom: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffcca9;
}
.avatar-leg {
  position: absolute;
  bottom: 28px;
  width: 30px;
  height: 78px;
  border-radius: 18px;
  background: linear-gradient(180deg, #263f63, #16263c);
}
.avatar-leg.left {
  left: 76px;
  transform: rotate(6deg);
}
.avatar-leg.right {
  right: 76px;
  transform: rotate(-6deg);
}
.avatar-note {
  position: absolute;
  right: 12px;
  top: 34px;
  width: 108px;
  padding: 10px 12px;
  border-radius: 16px 16px 16px 6px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(63,116,201,.18);
  box-shadow: 0 16px 28px rgba(63,116,201,.12);
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.avatar.is-speaking .avatar-mouth {
  animation: mouth-chatter .22s ease-in-out infinite;
}
.avatar.is-speaking .avatar-arm.left {
  animation: arm-wave-left .92s ease-in-out infinite;
}
.avatar.is-speaking .avatar-arm.right {
  animation: arm-wave-right 1.08s ease-in-out infinite;
}
@keyframes avatar-bob {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-7px) rotateZ(.6deg); }
}
@keyframes arm-wave-left {
  0%, 100% { transform: rotate(16deg); }
  50% { transform: rotate(-4deg); }
}
@keyframes arm-wave-right {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(6deg); }
}
@keyframes mouth-chatter {
  0%, 100% { transform: scaleY(.65); }
  50% { transform: scaleY(1.7); }
}
video {
  width: 100%;
  display: block;
  border-radius: 18px;
  background: #e8e1d6;
}
.study-route-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(63,116,201,.06);
  border: 1px solid rgba(63,116,201,.16);
}
.study-route-box h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.study-route-box .small {
  margin: 0 0 12px;
}
.route-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: 10px;
}
.route-step {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(28,53,94,.10);
  background: white;
  color: var(--ink);
}
.route-step:hover {
  border-color: rgba(63,116,201,.28);
  transform: translateY(-1px);
}
.route-step.is-current {
  border-color: rgba(63,116,201,.42);
  box-shadow: 0 14px 28px rgba(63,116,201,.12);
  background: linear-gradient(135deg, rgba(63,116,201,.10), rgba(255,255,255,.98));
}
.route-step.is-watched {
  border-color: rgba(45,138,97,.28);
  background: linear-gradient(135deg, rgba(45,138,97,.08), rgba(255,255,255,.98));
}
.route-step.is-review {
  border-color: rgba(239,138,73,.30);
  background: linear-gradient(135deg, rgba(239,138,73,.10), rgba(255,255,255,.98));
}
.route-step-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.route-step-num {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--yellow);
  font-size: 12px;
  font-weight: 700;
}
.route-step-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.route-step.is-current .route-step-status {
  color: var(--blue);
}
.route-step.is-watched .route-step-status {
  color: var(--green);
}
.route-step.is-review .route-step-status {
  color: #b55b21;
}
.route-step-label {
  font-weight: 700;
  line-height: 1.4;
}
.route-step-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
ul.route-list {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
}
.unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.unit-link {
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}
.hero-note,
.side-block,
.auth-card,
.form-card {
  padding: 16px 18px;
  border-radius: 20px;
}
.hero-note {
  margin-top: 18px;
  background: #fff8ef;
  border: 1px solid #efdfbf;
}
.progress-stack {
  display: grid;
  gap: 12px;
}
.progress-rail {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(28,53,94,.08);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}
.progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  line-height: 1.7;
}
.review-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,138,73,.18);
  background: rgba(239,138,73,.10);
  color: #b55b21;
  font-size: 12px;
  font-weight: 700;
}
.progress-meta strong {
  color: var(--ink);
}
.unit-recovery-box {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(239,138,73,.18);
  background: linear-gradient(135deg, rgba(239,138,73,.10), rgba(255,255,255,.98));
}
.unit-recovery-box h4 {
  margin: 0;
  font-size: 16px;
}
.recovery-route-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.recovery-route-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,138,73,.18);
  background: white;
  color: #b55b21;
  font-weight: 700;
  font-size: 13px;
}
.recovery-route-link.active {
  background: rgba(239,138,73,.14);
}
.recovery-route-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(239,138,73,.14);
  font-size: 11px;
  font-weight: 800;
}
.side-block {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
}
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.side-title {
  font-weight: 700;
  font-size: 18px;
}
.mini-list {
  display: grid;
  gap: 10px;
}
.mini-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  align-items: center;
}
.mini-card img {
  width: 84px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.mini-card .mini-meta {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.mini-card .mini-title {
  font-weight: 700;
  line-height: 1.4;
}
.mini-card .mini-pill {
  display: inline-block;
  margin-top: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(63,116,201,.08);
  color: var(--blue);
}
.section-stack {
  display: grid;
  gap: 18px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-chip {
  border: 1px solid rgba(63,116,201,.16);
  background: white;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
}
.filter-chip.is-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.empty-state {
  padding: 12px 0 4px;
  color: var(--muted);
  line-height: 1.7;
}
.hidden {
  display: none !important;
}
.auth-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 18px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .9fr);
  gap: 22px;
}
.auth-card {
  display: grid;
  gap: 14px;
}
.auth-card h1 {
  margin-top: 10px;
}
.auth-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
}
.form-card {
  display: grid;
  gap: 14px;
}
.tabs {
  display: flex;
  gap: 10px;
}
.tab-button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
}
.tab-button.is-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.form-grid {
  display: grid;
  gap: 12px;
}
.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-size: 14px;
  font-weight: 700;
}
.form-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.flash {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #f3d7c9;
  background: #fff1e8;
  color: #8c3d1d;
}
.flash.success {
  border-color: #cde8d8;
  background: #eefaf3;
  color: #1f6a45;
}
@media (max-width: 1120px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .auth-wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 880px) {
  .viewer { grid-template-columns: 1fr; }
  .narrator-top {
    flex-direction: column;
  }
}