:root {
  --duo-blue: #1b9df0;
  --duo-blue-deep: #1178bc;
  --duo-blue-soft: #e8f6ff;
  --duo-surface: #ffffff;
  --duo-ink: #17324a;
  --duo-muted: #6d8195;
  --duo-line: #d7e8f7;
  --duo-shadow: 0 18px 36px rgba(16, 71, 118, 0.1);
}

.duo-topbar {
  margin-bottom: 14px;
}

.duo-topbar-panel {
  padding: 12px 14px;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(15, 71, 118, 0.08);
}

.duo-brand-row,
.duo-brand-lockup,
.duo-topbar-pills,
.j-home-stat-row,
.j-focus-grid,
.j-focus-stack,
.j-home-lower-grid,
.j-manage-hero-pills,
.j-manage-split,
.j-rank-mini-list,
.j-future-list,
.secret-mode-grid,
.secret-score-grid,
.secret-play-meta,
.j-chess-grid {
  display: grid;
  gap: 12px;
}

.duo-brand-row {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

.duo-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.duo-brand-lockup p,
.secret-brand-lockup p {
  margin: 0;
  color: var(--duo-muted);
}

.duo-brand-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
}

.duo-topbar-pills {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
}

.duo-top-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--duo-blue-soft);
  color: var(--duo-blue-deep);
  font-size: 0.88rem;
  font-weight: 800;
}

.duo-top-pill.accent {
  background: linear-gradient(180deg, #35b8ff, #1997df);
  color: #fff;
}

.duo-top-pill.subtle {
  background: #f4f8fb;
  color: var(--duo-muted);
}

.tiny-badge.subtle {
  background: #eff6fc;
  color: var(--duo-muted);
}

.j-home-screen,
.j-manage-screen {
  gap: 16px;
}

.j-home-hero,
.j-manage-hero {
  display: grid;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.4), transparent 28%),
    linear-gradient(180deg, #1cb0f6 0%, #168dd0 100%);
  color: #fff;
  box-shadow: 0 24px 48px rgba(17, 105, 162, 0.18);
}

.j-home-hero h2,
.j-manage-hero h2,
.secret-lobby-card h2 {
  margin: 0;
}

.j-home-hero p,
.j-manage-hero p,
.secret-lobby-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.j-home-stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.j-stat-card {
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.j-stat-card small,
.j-stat-card p {
  color: rgba(255, 255, 255, 0.88);
}

.j-stat-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 1.15rem;
}

.j-focus-card,
.j-mini-panel,
.j-chapter-panel,
.j-future-panel,
.j-manage-section,
.j-chess-hub {
  border-radius: 28px;
  box-shadow: var(--duo-shadow);
}

.j-focus-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  align-items: stretch;
}

.j-focus-main {
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef8ff 100%);
  border: 2px solid var(--duo-line);
}

.j-focus-main small,
.j-focus-main p,
.j-pill-card span {
  color: var(--duo-muted);
}

.j-focus-main strong {
  display: block;
  margin: 6px 0 8px;
  font-size: 1.22rem;
}

.j-focus-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.j-pill-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 22px;
  background: #f8fbff;
  border: 2px solid var(--duo-line);
}

.j-pill-card strong {
  color: var(--duo-ink);
  font-size: 1.08rem;
}

.j-status-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.j-status-card {
  display: grid;
  gap: 6px;
  padding: 15px;
  border-radius: 22px;
  background: #f8fbff;
  border: 2px solid var(--duo-line);
}

.j-status-card.ok {
  background: #f2fbff;
}

.j-status-card.warn {
  background: #fff8ef;
  border-color: #f1d2a5;
}

.j-status-card small,
.j-status-card p,
.j-backup-note {
  margin: 0;
  color: var(--duo-muted);
}

.j-status-card strong {
  color: var(--duo-ink);
  font-size: 1.08rem;
}

.j-backup-note {
  font-size: 0.9rem;
  line-height: 1.5;
}

.j-chapter-labelrow,
.j-quick-duo-list,
.j-voice-grid,
.j-coach-grid,
.j-chess-summary-grid,
.j-ai-quick-list,
.ai-chat-log {
  display: grid;
  gap: 12px;
}

.j-chapter-labelrow {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
}

.j-chapter-head,
.j-path-rail,
.secret-mode-grid,
.secret-score-grid,
.j-chess-grid {
  display: grid;
  gap: 12px;
}

.j-chapter-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin-bottom: 14px;
}

.j-chapter-head h3,
.j-future-card strong,
.j-chess-card strong,
.secret-mode-card strong {
  margin: 0;
}

.j-chapter-head p,
.j-future-card p,
.j-chess-card p,
.secret-mode-card p,
.j-rank-mini-row small {
  margin: 0;
  color: var(--duo-muted);
}

.j-chapter-meter {
  display: grid;
  gap: 4px;
  justify-items: end;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--duo-blue-soft);
  color: var(--duo-blue-deep);
}

.j-path-rail {
  gap: 14px;
}

.j-lesson-node {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0;
  text-align: left;
}

.j-lesson-node.left {
  margin-right: 44px;
}

.j-lesson-node.right {
  margin-left: 44px;
}

.j-lesson-node-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #c8deef;
  background: #edf6fd;
  color: #84a3bd;
  font-weight: 900;
  box-shadow: inset 0 -4px 0 rgba(133, 160, 185, 0.28);
}

.j-lesson-node-copy {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 2px solid var(--duo-line);
  background: #fff;
  box-shadow: 0 12px 24px rgba(14, 74, 117, 0.06);
}

.j-lesson-node.current .j-lesson-node-ring {
  border-color: #5dd50f;
  background: linear-gradient(180deg, #7be421 0%, #58cc02 100%);
  color: #fff;
  box-shadow: inset 0 -6px 0 rgba(40, 123, 0, 0.22);
}

.j-lesson-node.current .j-lesson-node-copy {
  border-color: #b7e98f;
}

.j-lesson-node.done .j-lesson-node-ring {
  border-color: #7cc5f1;
  background: linear-gradient(180deg, #40befd 0%, #1b9df0 100%);
  color: #fff;
}

.j-lesson-node.done .j-lesson-node-copy {
  border-color: #b7ddf7;
  background: #f5fbff;
}

.j-lesson-node.locked {
  opacity: 0.7;
}

.j-lesson-node.locked .j-lesson-node-copy {
  background: #f3f6f9;
}

.j-future-list {
  gap: 10px;
}

.j-future-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
  border: 2px dashed #c9d9e8;
  background: #f8fbfe;
}

.j-future-card small {
  color: var(--duo-blue-deep);
  font-weight: 800;
}

.j-future-more {
  margin-top: 10px;
  color: var(--duo-muted);
  font-size: 0.92rem;
}

.j-rank-mini-list {
  gap: 10px;
}

.j-rank-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: #f8fbff;
  border: 2px solid var(--duo-line);
}

.j-rank-mini-row.is-me {
  background: var(--duo-blue-soft);
  border-color: #bde1fb;
}

.j-home-lower-grid,
.j-manage-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.j-chess-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.j-chess-summary-grid,
.j-voice-grid,
.j-coach-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.j-chess-card,
.secret-mode-card,
.j-voice-card,
.j-coach-card,
.j-quick-duo-btn {
  display: grid;
  gap: 8px;
  padding: 16px;
  text-align: left;
  border-radius: 22px;
  border: 2px solid var(--duo-line);
  background: #fff;
  box-shadow: 0 14px 28px rgba(14, 74, 117, 0.06);
}

.j-chess-card.primary {
  background: linear-gradient(180deg, #ebf8ff 0%, #dff3ff 100%);
}

.j-quick-duo-btn strong,
.j-voice-card strong,
.j-coach-card strong {
  margin: 0;
}

.j-quick-duo-btn span,
.j-voice-card span,
.j-coach-card small {
  color: var(--duo-muted);
}

.j-quick-duo-list {
  gap: 10px;
}

.j-quick-duo-btn {
  background: #f8fbff;
}

.j-voice-card.active {
  border-color: #8fd0ff;
  background: linear-gradient(180deg, #eef8ff 0%, #e0f4ff 100%);
  box-shadow: 0 0 0 2px rgba(28, 157, 240, 0.1), 0 16px 28px rgba(14, 74, 117, 0.08);
}

.j-coach-panel,
.j-coach-shell {
  border-radius: 28px;
  box-shadow: var(--duo-shadow);
}

.j-coach-card {
  background: linear-gradient(180deg, #fbfdff 0%, #f3faff 100%);
}

.ai-chat-log {
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.ai-chat-bubble {
  display: grid;
  gap: 6px;
  max-width: min(100%, 88%);
  padding: 14px 16px;
  border-radius: 22px;
  border: 2px solid var(--duo-line);
  background: #f7fbff;
}

.ai-chat-bubble small,
.ai-chat-bubble p,
.ai-chat-bubble span {
  margin: 0;
  color: var(--duo-muted);
}

.ai-chat-bubble.user {
  margin-left: auto;
  background: linear-gradient(180deg, #1cb0f6 0%, #1694d3 100%);
  border-color: #1b9df0;
  color: #fff;
}

.ai-chat-bubble.user small,
.ai-chat-bubble.user p,
.ai-chat-bubble.user span {
  color: rgba(255, 255, 255, 0.92);
}

.ai-chat-bubble.coach {
  background: #f1fbeb;
  border-color: #bfe8a4;
}

.ai-chat-bubble.partner {
  background: #fff;
}

.ai-chat-romanization {
  margin: 0;
  color: var(--duo-blue-deep);
  font-weight: 700;
}

.j-ai-prompt-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 22px;
  background: #f7fbff;
  border: 2px solid var(--duo-line);
}

.j-ai-prompt-card p {
  margin: 0;
  color: var(--duo-muted);
}

.j-ai-quick-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.secret-bottom-nav {
  background: rgba(12, 20, 32, 0.94);
  border: 1px solid rgba(94, 143, 181, 0.18);
}

.secret-topbar-panel {
  border-color: rgba(88, 143, 190, 0.18);
  background: rgba(9, 16, 24, 0.92);
}

.secret-brand-lockup strong,
.secret-brand-lockup p,
.secret-topbar-panel .duo-top-pill {
  color: #eef6ff;
}

.secret-topbar-panel .duo-top-pill {
  background: rgba(41, 70, 102, 0.74);
}

.secret-topbar-panel .duo-top-pill.accent {
  background: linear-gradient(180deg, #2fc0ff 0%, #148be2 100%);
}

.secret-orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7be7ff 0%, #2ab7f1 58%, #0d3d5a 100%);
  box-shadow: 0 0 20px rgba(74, 196, 255, 0.6);
}

.secret-hub-screen .panel,
.secret-lobby-card,
.secret-play-shell {
  border-radius: 28px;
  border: 1px solid rgba(95, 143, 187, 0.16);
  background:
    radial-gradient(circle at top right, rgba(71, 132, 193, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(17, 26, 40, 0.98) 0%, rgba(10, 17, 28, 0.98) 100%);
  color: #eef6ff;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
}

.secret-hub-screen .section-head p,
.secret-hub-screen .history-row span,
.secret-hub-screen .state-log-row p,
.secret-hub-screen .secret-mode-card p {
  color: #b7c9db;
}

.secret-lobby-card {
  display: grid;
  gap: 16px;
  padding: 22px 20px;
}

.secret-score-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.secret-score-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(22, 37, 57, 0.84);
  border: 1px solid rgba(97, 145, 189, 0.18);
}

.secret-score-card small,
.secret-score-card span {
  color: #8fa7bf;
}

.secret-score-card strong {
  font-size: 1.08rem;
}

.secret-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.secret-mode-card {
  background: rgba(17, 30, 47, 0.9);
  border-color: rgba(96, 144, 188, 0.14);
  color: #eef6ff;
}

.secret-mode-card.active {
  border-color: #2fc0ff;
  box-shadow: 0 0 0 2px rgba(49, 191, 255, 0.12), 0 16px 32px rgba(0, 0, 0, 0.25);
}

.secret-play-meta {
  grid-template-columns: repeat(4, max-content);
}

.secret-map-shell {
  min-height: 360px;
  border-radius: 24px;
}

.secret-play-shell .state-map,
.secret-hub-screen .state-map {
  background:
    radial-gradient(circle at top left, rgba(24, 163, 228, 0.16), transparent 24%),
    linear-gradient(180deg, rgba(9, 20, 34, 0.96) 0%, rgba(6, 13, 22, 0.96) 100%);
}

.j-placement-copy {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #f5fbff;
  border: 2px solid var(--duo-line);
}

.j-placement-copy p {
  margin: 0;
  color: var(--duo-muted);
}

.j-lesson-card {
  padding-bottom: 22px;
}

.choice-label,
.choice-hint,
.reading-billboard strong,
.phrase-card strong,
.trace-guide,
.course-card p,
.course-card small,
.game-card p,
.j-lesson-node-copy strong,
.j-lesson-node-copy small,
.math-track-card strong,
.math-track-card span,
.ai-chat-bubble strong {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.writing-lesson-card {
  display: grid;
  gap: 16px;
}

.writing-focus-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef8ff 100%);
  border: 2px solid var(--duo-line);
}

.writing-focus-card.cjk {
  text-align: center;
}

.writing-focus-card small,
.writing-focus-card p,
.writing-focus-card span {
  margin: 0;
  color: var(--duo-muted);
}

.writing-focus-card strong {
  margin: 0;
  color: var(--duo-ink);
  font-size: 1.32rem;
  line-height: 1.25;
}

.writing-glyph-board {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 18px;
  border-radius: 26px;
  border: 2px dashed var(--duo-line);
  background: #f8fbff;
  color: var(--duo-blue-deep);
  font-size: 2.4rem;
  font-weight: 900;
}

.writing-input-shell {
  gap: 12px;
}

.writing-input-shell input {
  overflow-wrap: anywhere;
}

.writing-slot-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(34px, max-content));
}

.writing-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 14px;
  border: 2px solid var(--duo-line);
  background: #fff;
  color: var(--duo-ink);
  font-weight: 800;
}

.writing-slot.filled {
  border-color: rgba(27, 157, 240, 0.36);
  background: #eef8ff;
}

.writing-slot.gap {
  min-width: 12px;
  border-color: transparent;
  background: transparent;
}

.ime-assist-bar {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(92px, max-content));
  align-items: stretch;
}

.ime-assist-bar.compact {
  gap: 8px;
}

.ime-candidate-btn {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 2px solid var(--duo-line);
  background: #fff;
  text-align: left;
  color: var(--duo-ink);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ime-candidate-btn strong {
  font-size: 1rem;
}

.ime-candidate-btn span,
.ime-hint {
  color: var(--duo-muted);
  font-size: 0.82rem;
}

.ime-candidate-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(27, 157, 240, 0.4);
  box-shadow: 0 10px 24px rgba(17, 120, 188, 0.12);
}

.math-hub-panel,
.voice-upgrade-panel {
  border-radius: 28px;
  box-shadow: var(--duo-shadow);
}

.math-track-grid,
.math-concept-tags,
.math-toolbar,
.math-toolbar-block {
  display: grid;
  gap: 12px;
}

.math-track-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.math-track-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 20px;
  border: 2px solid var(--duo-line);
  background: #fff;
  text-align: left;
}

.math-track-card.active {
  border-color: rgba(27, 157, 240, 0.42);
  background: #eef8ff;
}

.math-track-card span {
  color: var(--duo-muted);
  font-size: 0.88rem;
}

.math-hero-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef8ff 100%);
  border: 2px solid var(--duo-line);
}

.math-hero-card small,
.math-hero-card p {
  margin: 0;
  color: var(--duo-muted);
}

.math-hero-card strong {
  font-size: 1.16rem;
  color: var(--duo-ink);
}

.math-concept-tags {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.math-concept-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--duo-line);
  color: var(--duo-ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.math-toolbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.math-toolbar-block {
  gap: 8px;
}

.math-toolbar-block small {
  color: var(--duo-muted);
  font-weight: 700;
}

.secret-arcade-theme {
  background:
    radial-gradient(circle at top left, rgba(22, 126, 202, 0.16), transparent 30%),
    radial-gradient(circle at bottom right, rgba(71, 196, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #050c14 0%, #0a1220 100%);
}

.secret-arcade-theme .app-shell {
  width: min(100%, 560px);
}

@media (max-width: 640px) {
  .duo-brand-row,
  .j-focus-grid,
  .j-home-lower-grid,
  .j-manage-split,
  .secret-score-grid,
  .secret-mode-grid,
  .j-chess-grid,
  .j-chess-summary-grid,
  .j-status-grid,
  .j-voice-grid,
  .j-coach-grid,
  .j-ai-quick-list,
  .j-home-stat-row,
  .math-track-grid,
  .math-toolbar {
    grid-template-columns: 1fr;
  }

  .duo-topbar-pills {
    grid-auto-flow: row;
    justify-items: end;
  }

  .j-focus-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .j-lesson-node.left,
  .j-lesson-node.right {
    margin: 0;
  }

  .secret-play-meta {
    grid-template-columns: repeat(2, max-content);
  }

  .ime-assist-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-slot-row {
    grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
    gap: 8px;
  }
}