:root {
  --bg: #f2f5f7;
  --panel: #ffffff;
  --panel-alt: #eef2f5;
  --border: #cfd8df;
  --ink: #15232d;
  --muted: #5f7282;
  --accent: #1f7a8c;
  --accent-strong: #166577;
  --good: #2e7d32;
  --warn: #b85c00;
  --danger: #b42318;
  --shadow: 0 4px 12px rgba(21, 35, 45, 0.08);
  --page-bg: radial-gradient(circle at top left, #f8fbfd 0%, #edf2f6 55%, #e8eef2 100%);
  --hover-bg: #f1f7fb;
  --selected-bg: #dff2f7;
  --selected-ink: #11485a;
  --token-hover-bg: #dff2f7;
  --pill-bg: #f8fbff;
  --disabled-bg: #e7edf2;
  --disabled-ink: #5e7282;
  --disabled-border: #c3ced7;
  --primary-disabled-bg: #8ca3b6;
  --link: #1d67bf;
  --link-hover: #1655a0;
}

[data-theme="dark"] {
  --bg: #0f1419;
  --panel: #161e26;
  --panel-alt: #1b2530;
  --border: #2f3d4b;
  --ink: #e4edf5;
  --muted: #a1b3c4;
  --accent: #4fb2c5;
  --accent-strong: #6bc7d8;
  --good: #63c174;
  --warn: #e6a24d;
  --danger: #f06a6a;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  --page-bg: radial-gradient(circle at top left, #1a2632 0%, #111a23 60%, #0b1118 100%);
  --hover-bg: #243340;
  --selected-bg: #244657;
  --selected-ink: #d6edf8;
  --token-hover-bg: #285265;
  --pill-bg: #243545;
  --disabled-bg: #22303d;
  --disabled-ink: #8fa5b8;
  --disabled-border: #3a4e61;
  --primary-disabled-bg: #3d566a;
  --link: #8dc8ff;
  --link-hover: #b4ddff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  min-height: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

#genPrompt,
#genTheme {
  width: 100%;
}

button {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  color: var(--ink);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

button:hover {
  background: var(--hover-bg);
}

button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

button.primary:hover {
  background: var(--accent-strong);
}

button.small {
  font-size: 0.84rem;
  padding: 0.26rem 0.5rem;
}

button:disabled {
  cursor: not-allowed;
  opacity: 1;
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  border-color: var(--disabled-border);
}

button.primary:disabled,
button.primary.lockedBtn:disabled {
  background: var(--primary-disabled-bg);
  border-color: var(--primary-disabled-bg);
  color: #f7fbff;
}

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  background: var(--panel);
  color: var(--ink);
}

textarea {
  resize: vertical;
  min-height: 76px;
}

.appShell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.topbar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.45rem 0.55rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.topbarBrand {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 0.2rem;
}

.topbarTabs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.topbar button.active {
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
  font-weight: 600;
}

.statusBanner {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem 0.6rem;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
}

.statusBanner.dismissible {
  cursor: pointer;
}

.statusBanner.info {
  border-color: #9ec9d4;
  background: #edf8fb;
  color: #0b4f60;
}

.statusBanner.warn {
  border-color: #e1c186;
  background: #fff6e7;
  color: #805111;
}

.statusBanner.error {
  border-color: #e4a1a1;
  background: #fff1f1;
  color: #7d1010;
}

.mainGrid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
  gap: 0.65rem;
}

.mainGrid.singleColumn {
  grid-template-columns: 1fr;
}

.viewPanel,
.infoPanel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.viewPanel {
  padding: 0.85rem;
  min-height: 70vh;
}

.infoPanel {
  padding: 0.85rem;
  position: sticky;
  top: 0.6rem;
  align-self: start;
}

.tabView {
  display: none;
  gap: 0.7rem;
}

.tabView.active {
  display: grid;
}

.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-alt);
  padding: 0.65rem;
}

.card h3,
.card h4 {
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.readMarkRow,
.readGenerateRow,
.readChapterNavRow {
  justify-content: center;
}

.readMarkButton {
  width: min(100%, 24rem);
  padding: 0.62rem 1rem;
  font-size: 1rem;
}

.readChapterNavButton {
  min-width: 6.2rem;
  padding: 0.42rem 0.86rem;
  font-size: 0.95rem;
}

.googleSignInSlot {
  min-height: 40px;
}

.accountAvatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  object-fit: cover;
}

.accountAvatarFallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--muted);
}

.tagInline {
  justify-content: flex-start;
  max-width: 100%;
}

.themePresetRow {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bubbleButton {
  border-radius: 999px;
  background: var(--panel);
  border-color: var(--border);
}

.selectedBubble {
  background: var(--selected-bg);
  border-color: var(--accent);
  color: var(--selected-ink);
  font-weight: 700;
}

.tagGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.tagGrid button {
  text-align: center;
}

.vocabTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.vocabReading {
  color: var(--muted);
}

.errorBox {
  border: 1px solid #e4a1a1;
  border-radius: 10px;
  background: #fff1f1;
  color: #7d1010;
  padding: 0.55rem;
}

.stack {
  display: grid;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  padding: 0.08rem 0.46rem;
  color: var(--muted);
  background: var(--panel);
}

.chip.inspectLevel {
  text-transform: uppercase;
  font-weight: 700;
}

.chip.inspectLevel.unknown {
  border-color: #b8c4cf;
  color: #6c7d8b;
}

.chip.inspectLevel.seen {
  border-color: #c5d9a7;
  color: #547232;
}

.chip.inspectLevel.known {
  border-color: #9fdbb1;
  color: #2f7942;
}

.chip.completed {
  border-color: #b9ddc2;
  background: #ebf8ef;
  color: #2e7d32;
  font-weight: 600;
}

.storyText {
  white-space: pre-wrap;
  line-height: 1.95;
  font-size: 1.33rem;
  letter-spacing: 0.01em;
}

.readInspectTopButton {
  z-index: 3;
  border-radius: 999px;
  min-width: 1.65rem;
  padding: 0.16rem 0.45rem;
  font-weight: 700;
  white-space: nowrap;
}

.readInspectFloating {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 24;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  pointer-events: none;
}

.readInspectFloating.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.readInspectFloatingButton {
  pointer-events: auto;
  box-shadow: var(--shadow);
}

.storyToken {
  color: var(--accent-strong);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.storyToken:hover {
  background: var(--token-hover-bg);
  border-radius: 4px;
}

.storyToken.inspectToken {
  color: #0b7285;
  text-decoration-style: dotted;
}

.list {
  display: grid;
  gap: 0.52rem;
}

.listItem {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.58rem;
}

.listItem .title {
  font-size: 1.02rem;
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.45rem;
  font-size: 0.93rem;
}

.kv .k {
  color: var(--muted);
}

.syncMeta {
  font-size: 0.78rem;
}

.generateConfig {
  gap: 0.65rem;
}

.generateSection {
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
  display: grid;
  gap: 0.38rem;
}

.genSectionTitle {
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.genSubTitle {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.generateBubbleColumn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.34rem;
  max-width: 380px;
}

.generateActionWrap {
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}

.statGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem;
  background: var(--panel);
}

.stat .label {
  color: var(--muted);
  font-size: 0.82rem;
}

.stat .value {
  font-size: 1.26rem;
  font-weight: 700;
}

.inlineTerm {
  font-size: 1.18rem;
  font-weight: 700;
}

.subEntry {
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.35rem 0.5rem;
}

.subCharGrid {
  margin-top: 0.45rem;
  display: grid;
  gap: 0.45rem;
}

.subCharCard {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.15rem;
}

.subCharPill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  background: var(--pill-bg);
  font-weight: 700;
}

.hardRecallBtn {
  background: #fff2f2;
  border-color: #e0a2a2;
  color: #7d1010;
  font-weight: 700;
}

.hardRecallBtn:hover {
  background: #ffe3e3;
}

.dangerZoneCard {
  border-color: #e0a2a2;
}

.dangerActionBlock {
  border: 1px solid #e7b0b0;
  border-radius: 12px;
  padding: 0.6rem;
  background: #fff7f7;
}

[data-theme="dark"] .dangerActionBlock {
  background: #2c1b1d;
  border-color: #7a3e44;
}

[data-theme="dark"] .hardRecallBtn {
  background: #4b2428;
  border-color: #8a4951;
  color: #ffd8d8;
}

[data-theme="dark"] .hardRecallBtn:hover {
  background: #5b2a30;
}

[data-theme="dark"] .errorBox {
  border-color: #8a4951;
  background: #3a2225;
  color: #ffd1d1;
}

[data-theme="dark"] .statusBanner.info {
  border-color: #2f6f7d;
  background: #13343d;
  color: #bfeaf6;
}

[data-theme="dark"] .statusBanner.warn {
  border-color: #8b6d37;
  background: #3a2b17;
  color: #f4d9ab;
}

[data-theme="dark"] .statusBanner.error {
  border-color: #8a4951;
  background: #3a2225;
  color: #ffd1d1;
}


.inlineTerm[href] {
  color: var(--ink);
  text-decoration: none;
}

.inlineTerm[href]:hover {
  text-decoration: underline;
}

.progressList a.inlineTerm {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.progressList {
  max-height: 32rem;
  overflow: auto;
}

.jlptChartGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.05rem, 1fr));
  gap: 0.22rem;
}

.jlptChartCell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.05rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  text-decoration: none;
  font-weight: 700;
  background: var(--panel);
  color: var(--ink);
  transition: filter 120ms ease, transform 120ms ease;
}

.jlptChartCell:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.jlptChartCell.unknown {
  opacity: 0.35;
}

.jlptChartCell.seen {
  background: var(--selected-bg);
  color: var(--selected-ink);
  opacity: 0.9;
}

.jlptChartCell.known {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  opacity: 1;
}

.jlptChartLegend.unknown {
  opacity: 0.55;
}

.jlptChartLegend.seen {
  background: var(--selected-bg);
  color: var(--selected-ink);
}

.jlptChartLegend.known {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.inspectorOverlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(21, 35, 45, 0.38);
  display: grid;
  align-items: end;
  padding: 0.5rem;
}

.inspectorPopupOverlay {
  align-items: center;
  justify-items: center;
}

.inspectorOverlayAnchored {
  background: rgba(21, 35, 45, 0.26);
}

.inspectorModal {
  width: 100%;
  max-height: 84vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0.78rem;
}

.generateDialogModal {
  width: min(620px, 96vw);
}

.generateOverlayPassive {
  pointer-events: none;
  background: transparent;
}

.generateOverlayPassive .generateDialogModal {
  pointer-events: auto;
}

.generateProgressTrack {
  width: 100%;
  height: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-alt);
}

.generateProgressFill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.startupOverlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  background: rgba(9, 15, 22, 0.52);
}

.startupCard {
  min-width: 10.5rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem;
  display: grid;
  justify-items: center;
  gap: 0.48rem;
}

.startupDot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--accent);
  animation: startupPulse 0.9s ease-in-out infinite;
}

.startupText {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
}

@keyframes startupPulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.7; }
}

.followupPicker {
  max-height: 88vh;
}

.kanjiDetailModal {
  width: min(760px, 98vw);
  max-height: 92vh;
}

.kanjiBig {
  font-size: clamp(5rem, 20vw, 10rem);
  line-height: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (min-width: 761px) {
  .inspectorOverlay {
    align-items: center;
    justify-items: end;
    padding: 0.8rem;
  }

  .inspectorPopupOverlay {
    justify-items: center;
  }

  .inspectorModal {
    width: min(420px, 92vw);
  }

  .inspectorModal.generateDialogModal {
    width: min(620px, 92vw);
  }

  .inspectorModal.kanjiDetailModal {
    width: min(760px, 96vw);
  }
}

@media (max-width: 1040px) {
  .mainGrid {
    grid-template-columns: 1fr;
  }

  .infoPanel {
    position: static;
  }
}

@media (max-width: 760px) {
  .appShell {
    padding: 0.42rem;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
  }

  .topbarBrand {
    text-align: center;
    font-size: 0.74rem;
  }

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

  .viewPanel,
  .infoPanel {
    padding: 0.66rem;
  }

  .viewPanel {
    min-height: 0;
  }

  .storyText {
    font-size: 1.2rem;
    line-height: 1.85;
  }

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

  .kv {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .progressList {
    max-height: none;
  }

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