@charset "UTF-8";

:root {
  --bg: #0b0b0c;
  --card: #121217;
  --text: #d8d8dd;
  --muted: #9aa0a6;
  --border: #23232b;
  --accent: #ff1e56;
  --accent-2: #ff6b81;
  --kanji-fg: #f6f7fb;
  --star-off: #8a8f98;
}

[data-theme="red"] {
  --accent: #ff1e56;
  --accent-2: #ff6b81;
}

[data-theme="violet"] {
  --accent: #b26bff;
  --accent-2: #cf9bff;
}

[data-theme="green"] {
  --accent: #00e0a4;
  --accent-2: #5ff0c8;
}

[data-theme="blue"] {
  --accent: #3ab8ff;
  --accent-2: #82d5ff;
}

[data-theme="paper"] {
  --bg: #f8f7f2;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #666;
  --border: #e3e1d9;
  --accent: #111;
  --accent-2: #111;
  --kanji-fg: #111;
  --star-off: #999;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Global Sans-serif preference for all themes */
  font: 16px/1.45 Inter, "Hiragino Sans", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100%;
}

/* Optional: Serif for Paper theme globally? User only mentioned Sans for non-BW. 
       Assuming Paper stays as it was (maybe Serif-ish? or just default). 
       The previous font stack was Inter, system-ui... which is Sans.
       So Paper was likely Sans too globally, except specific elements.
       Let's stick to base Sans for all, but A4 specific handling is done. */

body {
  min-block-size: 100dvh;
  background-color: var(--bg);
}

main,
.wrap,
#app {
  background: var(--bg);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  inline-size: 100%;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .2);
  backdrop-filter: saturate(1.1) blur(2px);
}

[data-theme="paper"] .site-header {
  background: #fff;
  backdrop-filter: none;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.brand {
  min-width: 0;
  justify-self: start;
}

h1 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  letter-spacing: .2px;
  text-transform: uppercase
}

[data-theme="paper"] h1 {
  color: #111
}

/* --- Editor & IME --- */
.editor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-bottom: 40px;
}

/* --- Mobile Menu Styles --- */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 1002;
}

[data-theme="paper"] .mobile-menu-btn {
  background: #fff;
  color: #111;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1001;
  /* Above header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

[data-theme="paper"] .mobile-overlay {
  background: rgba(255, 255, 255, 0.95);
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-link {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 12px;
  transition: transform 0.2s;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="paper"] .mobile-nav-link {
  color: #111;
}

[data-theme="paper"] .mobile-nav-link:hover,
[data-theme="paper"] .mobile-nav-link.active {
  color: #111;
  background: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.editor-toolbar {
  position: sticky;
  top: 60px;
  /* Below header */
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  display: flex;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="paper"] .editor-toolbar {
  background: #fff;
}

.toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.toolbar-btn.active {
  background: var(--accent);
  color: #fff;
}

[data-theme="paper"] .toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.a4-page {
  width: 210mm;
  min-height: 297mm;
  background: #18181b;
  /* Dark default */
  color: #eeeeee;
  /* White text */
  padding: 20mm;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  font-family: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
  /* Squared/Sans default - Noto first for variable weights */
  font-size: 18pt;
  line-height: 1.6;
  outline: none;
  white-space: pre-wrap;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.a4-page:hover:focus {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="paper"] .a4-page {
  background: #fff;
  color: #000;
  font-family: "Noto Serif JP", "Yuji Syuku", serif;
  /* Serif for paper - Noto Serif first for variable weights */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Dark mode override for A4 page? User asked for "page A4", usually white. 
       Let's keep it white for realism, but maybe dim it slightly in dark mode if too harsh? 
       For now, keep strictly white as requested. */

.ime-highlight {
  border-bottom: 2px solid var(--accent);
  background-color: rgba(0, 0, 0, 0.05);
}

.ime-overlay {
  position: absolute;
  display: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  min-width: 120px;
}

[data-theme="paper"] .ime-overlay {
  background: #fff;
}

.ime-candidate {
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ime-candidate:hover,
.ime-candidate.selected {
  background: var(--accent);
  color: #fff;
}

.ime-candidate small {
  opacity: 0.7;
  font-size: 11px;
}

.sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

#count {
  display: none;
}

/* Theme pills */
.center-rail {
  display: flex;
  justify-self: center;
}

.color-pills {
  display: flex;
  gap: 8px;
  align-items: center
}

.pill-btn {
  border: 1px solid var(--border);
  background: #0f0f14;
  color: #e9e9f0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap
}

[data-theme="paper"] .pill-btn {
  background: #fff;
  color: #111;
}

.pill-btn[data-active="true"] {
  outline: 2px solid var(--accent)
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.dot.red {
  background: #ff1e56
}

.dot.violet {
  background: #b26bff
}

.dot.green {
  background: #00e0a4
}

.dot.blue {
  background: #3ab8ff
}

.dot.paper {
  background: #f8f7f2;
  border: 1px solid #ccc
}

/* Top nav */
.topnav {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end
}

.topnav .nav-tab {
  font-size: 12px;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  transition: all 0.2s ease;
}

.topnav .nav-tab:hover {
  color: var(--text);
  border-color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.topnav .nav-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-theme="paper"] .topnav a {
  background: #fff;
  color: #111
}

/* Main */
.wrap {
  max-width: 1150px;
  margin: 18px auto;
  padding: 0 20px;
}

.controls-core {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.controls-core>* {
  width: 100%;
}

.group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 12px;
  height: 100%;
}

[data-theme="paper"] .group {
  background: #fff;
  border: 1px solid var(--border);
}

.searchbar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #0e0e13;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 0;
}

[data-theme="paper"] .searchbar {
  background: #fff;
}

.searchbar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 13px;
  caret-color: var(--accent);
}

.searchbar input::placeholder {
  color: var(--muted);
}

input:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 10000s ease-in-out 0s;
}

.group .select,
.group .switch {
  width: 100%
}

.select {
  -webkit-appearance: none;
  appearance: none;
  background: #0f0f14;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

[data-theme="paper"] .select {
  background: #fff;
  color: #111;
}

.switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0f0f14;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

[data-theme="paper"] .switch {
  background: #f1f0ea;
}

.switch input {
  display: none
}

.switch label {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: #9aa0a6;
  text-align: center;
}

.switch input:checked+label {
  color: inherit;
  background: rgba(255, 255, 255, .08);
}

[data-theme="paper"] .switch input:checked+label {
  background: #fff;
  color: #111
}

/* Grid & Cards */
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 32px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 200px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.card.fav {
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent), 0 0 8px color-mix(in oklab, var(--accent-2) 35%, transparent), 0 0 16px color-mix(in oklab, var(--accent) 30%, transparent);
}

[data-theme="paper"] .card.fav {
  border-color: #111;
  box-shadow: 0 0 0 1px #111, 0 6px 20px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .05);
}

/* Kanji (font fallback solide) */
.kanji,
.modal-kanji,
.rev-large {
  /* Default to Sans-serif (squared) for color themes */
  font-family: "Hiragino Sans", "Meiryo", "Noto Sans JP", sans-serif;
  font-weight: 800;
  /* Thicker for sans */
  letter-spacing: .5px;
  color: var(--kanji-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.kanji {
  font-size: 78px;
  line-height: 1;
  margin: 10px 0 0;
  /* Add top margin */
}

.modal-kanji {
  font-size: 120px;
  margin: 10px 0
}

.rev-large {
  font-size: 140px;
  line-height: 1;
  margin: 10px 0
}

/* Néon sombre */
[data-theme]:not([data-theme="paper"]) .kanji,
[data-theme]:not([data-theme="paper"]) .modal-kanji,
[data-theme]:not([data-theme="paper"]) .rev-large {
  text-shadow:
    0 0 6px color-mix(in oklab, var(--accent) 80%, transparent),
    0 0 18px color-mix(in oklab, var(--accent-2) 70%, transparent),
    0 0 30px color-mix(in oklab, var(--accent) 45%, transparent);
}

[data-theme="paper"] .kanji,
[data-theme="paper"] .modal-kanji,
[data-theme="paper"] .rev-large {
  /* Serif for Paper theme */
  font-family: "Yuji Syuku", "Noto Serif JP", "Yuji Mai", serif;
  font-weight: 400;
  color: #111;
  text-shadow: none;
}

.meaning {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 12px 0;
  display: block;
  width: 100%;
  text-align: center;
}

.readings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
}

.pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
  /* Capsule look */
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

[data-theme="paper"] .pill {
  background: #f5f4ee;
  color: #111;
  border-color: #dcdbd3;
}

.pill small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--border);
  line-height: 1;
  opacity: 0.7;
}

.pill.on small {
  border-right-color: color-mix(in oklab, var(--accent) 50%, var(--border));
}

.pill.kun small {
  border-right-color: color-mix(in oklab, var(--accent-2) 50%, var(--border));
}

[data-theme="paper"] .pill small {
  border-right-color: #dcdbd3;
}

/* Fav / Modal / Toast / Révision */
.fav-toggle {
  --size: 26px;
  position: absolute;
  right: 8px;
  top: 8px;
  inline-size: var(--size);
  block-size: var(--size);
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #0e0e13;
  cursor: pointer;
  z-index: 5;
  transition: border-color .15s ease, transform .08s ease, background .15s ease;
}

.fav-toggle:active {
  transform: scale(.96);
}

[data-theme="paper"] .fav-toggle {
  background: #fff;
}

.fav-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}

.star {
  fill: none;
  stroke: var(--star-off);
  stroke-width: 2;
  filter: none;
  transition: fill .15s ease, stroke .15s ease, filter .15s ease, transform .2s ease;
}

.fav-toggle[data-fav="true"] .star {
  fill: color-mix(in oklab, var(--accent) 28%, transparent);
  stroke: var(--accent);
  filter: none;
  transform: none;
}

/* Modal specific Fav Button (Big, Centered, Round) */
#modalFavBtn {
  position: relative;
  --size: 64px;
  border-radius: 16px;
  border-width: 1px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
}

#modalFavBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

#modalFavBtn svg {
  width: 28px;
  height: 28px;
}

/* Modal Copy Button - uses same styles as #modalFavBtn */
#modalCopyBtn {
  position: relative;
  --size: 64px;
  border-radius: 16px;
  border-width: 1px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
}

#modalCopyBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

#modalCopyBtn svg {
  width: 28px;
  height: 28px;
}



.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  z-index: 200
}

.modal.open {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 680px;
  width: 92%;
  padding: 18px
}

[data-theme="paper"] .modal-card {
  background: #fff;
}

/* Allow readings to wrap in modal */
.modal .readings {
  flex-wrap: wrap;
  max-width: 100%;
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px
}

.close-btn {
  cursor: pointer;
  border: 1px solid var(--border);
  background: #0f0f14;
  color: #e9e9f0;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px
}

[data-theme="paper"] .close-btn {
  background: #fff;
  color: #111;
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  background: #111a;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #333;
  font-size: 12px;
  display: none;
  z-index: 190
}

.toast.show {
  display: block
}

.rev-controls {
  margin-top: 8px
}

.rev-actions {
  display: flex;
  align-items: center;
  justify-content: space-between
}

#revGrade {
  display: none;
  gap: 10px;
  margin: 0 auto;
}

.rev-btn {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: #0f0f14;
  color: var(--text);
  cursor: pointer;
  font-size: 14px
}

[data-theme="paper"] .rev-btn {
  background: #fff;
  color: #111;
}

.rev-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin: 4px 0 10px
}

.param-group-title {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 6px
}

.param-category-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 2px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.param-btn {
  width: 100%;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}

.param-btn:hover {
  background: color-mix(in oklab, var(--accent) 14%, var(--card));
  transform: translateY(-1px);
}

.param-btn[data-active="true"] {
  background: var(--accent);
  color: #fff;
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
}

[data-theme="paper"] .param-btn[data-active="true"] {
  background: #111;
  color: #fff;
}

.param-chip-group {
  display: grid;
  gap: 8px
}

.param-chip-group.grid-2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width:560px) {
  .param-chip-group.grid-2 {
    grid-template-columns: 1fr;
  }
}

.param-chip {
  width: 100%;
  text-align: center;
  border: 1px solid var(--border);
  background: #0f0f14;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}

.param-chip:hover {
  background: color-mix(in oklab, var(--accent) 10%, #0f0f14);
  transform: translateY(-1px);
}

.param-chip[data-active="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

[data-theme="paper"] .param-chip {
  background: #fff;
}

[data-theme="paper"] .param-chip:hover {
  background: #f5f4ee;
}

@media (max-width: 900px) {
  .controls-core {
    grid-template-columns: 1fr 1fr;
  }

  .a4-page {
    width: 100%;
    max-width: 210mm;
    margin: 0 auto;
    padding: 15mm;
  }
}

/* Minimalist Switches Global */
.switch label {
  font-size: 0 !important;
  padding: 6px 16px;
  /* slightly more padding for desktop comfort */
  min-width: 40px;
}

.switch label::before {
  font-size: 13px;
  font-weight: 700;
  display: block;
}

/* Kana -> あ */
label[for="kana"]::before {
  content: "あ";
}

/* Romaji -> Ab */
label[for="romaji"]::before {
  content: "Ab";
}

/* FavOff -> All */
label[for="favOff"]::before {
  content: "All";
  font-size: 11px;
}

/* FavOn -> Star */
label[for="favOn"]::before {
  content: "⭐";
}

@media (max-width: 600px) {

  .controls-core {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    align-items: end;
  }

  /* Search bar takes full width on top */
  .controls-core>.group:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* Thicker search bar on mobile */
  /* Thicker search bar on mobile */
  .controls-core .group.searchbar {
    padding: 18px 16px;
  }

  /* Hide descriptive labels (Set, Reading) */
  .controls-core .group>span {
    display: none;
  }

  /* Compact groups */
  .controls-core .group {
    padding: 4px;
    justify-content: center;
  }

  /* Compact Select */
  .select {
    padding: 6px 4px;
    text-align: center;
    background-position: right 2px center;
  }

  /* Reduce padding slightly for mobile */
  .switch label {
    padding: 6px 0;
    min-width: 32px;
  }


  /* Typographie plus petite sur mobile */
  .kanji {
    font-size: 56px;
  }

  .modal-kanji {
    font-size: 80px;
  }

  .rev-large {
    font-size: 90px;
  }

  /* En-tête sur 2 lignes pour éviter l'encombrement */
  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px 16px;
  }

  .brand {
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: 4px;
  }

  .center-rail {
    grid-column: 1;
    justify-self: start;
  }

  .topnav {
    grid-column: 2;
    justify-self: end;
  }

  .topnav .main-nav {
    display: none;
    /* Hide top nav links on mobile */
  }

  /* Show hamburger on mobile */
  .mobile-menu-btn {
    display: block;
    grid-column: 2;
    justify-self: end;
  }

  /* Hide standard navs */
  .center-rail,
  .topnav {
    display: none;
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
  }

  /* Restore theme pills visual for mobile menu if needed, or rely on overlay */

  /* Ajustements structure */
  .wrap {
    padding: 0 16px;
    margin: 12px auto;
  }

  .card {
    min-height: 160px;
    padding: 20px 10px;
  }

  /* Toolbar éditeur défilable si besoin */
  /* Toolbar éditeur compacte */
  .editor-toolbar {
    top: 90px;
    max-width: 95%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px 8px;
    gap: 5px;
    scrollbar-width: none;
  }

  .toolbar-btn {
    font-size: 13px;
    padding: 5px 10px;
  }

  .editor-toolbar::-webkit-scrollbar {
    display: none;
  }

  /* Suggestions plus grandes et lisibles */
  .ime-overlay {
    min-width: 260px;
    max-height: 250px;
  }

  .ime-candidate {
    padding: 14px 16px;
    font-size: 17px;
    gap: 16px;
  }

  .ime-candidate small {
    font-size: 13px;
    opacity: 0.8;
  }

  /* Page A4 responsive */
  .a4-page {
    width: 100%;
    padding: 10mm;
    border-radius: 4px;
    /* Moins rigide sur mobile */
  }

  /* Modale ajustée */
  .modal-card {
    width: 94%;
    padding: 16px;
    max-height: 85vh;
    overflow-y: auto;
  }

  /* Flashcards */
  .card-3d {
    max-width: 100%;
  }

  .fc-controls {
    flex-direction: column;
    gap: 10px;
  }

  .grade-btn {
    width: 100%;
    max-width: none;
  }

  .fc-setup-card {
    padding: 16px;
  }
}

/* --- New Structure: Tabs & Sections --- */
.main-nav {
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
}

.nav-tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.nav-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="paper"] .nav-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}

.nav-tab.active {
  background: var(--accent);
  color: #fff;
}

[data-theme="paper"] .nav-tab.active {
  color: #fff;
  /* accent is dark in paper mode */
}

.tab-content {
  display: none;
  margin-top: 20px;
}

.tab-content.active {
  display: block;
  animation: fadein 0.3s ease;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fixed bottom-right theme pills */
.fixed-pills-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.color-pills.fixed {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="paper"] .color-pills.fixed {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Slider Styles */
.slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.font-weight-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  outline: none;
}

.font-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  cursor: pointer;
  border: 2px solid var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="paper"] .font-weight-slider {
  background: #e0e0e0;
}

[data-theme="paper"] .font-weight-slider::-webkit-slider-thumb {
  background: #111;
  border-color: #fff;
}

/* --- New Flashcards CSS --- */
.flashcards-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.fc-view {
  display: none;
  animation: fadein 0.3s ease;
  width: 100%;
  height: 100%;
  flex: 1;
}

.fc-view.active {
  display: flex;
  flex-direction: column;
}

/* Session Header */
.fc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.fc-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

[data-theme="paper"] .fc-progress-track {
  background: rgba(0, 0, 0, 0.1);
}

.fc-track-segment {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
  transition: flex 0.3s ease;
}

[data-theme="paper"] .fc-track-segment {
  background: rgba(0, 0, 0, 0.1);
}

.fc-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.fc-progress-fill.extra {
  background: repeating-linear-gradient(45deg,
      var(--accent),
      var(--accent) 10px,
      var(--border) 10px,
      var(--border) 20px);
}

/* 3D Scene */
.scene {
  perspective: 1000px;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
  margin-bottom: 24px;
}

.card-3d {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3/4;
  max-height: 500px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.card-3d.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  /* Ensure background is opaque for backface-visibility to work reliably */
  background-color: var(--card);
}

[data-theme="paper"] .card-face {
  background: #fff;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
}

.card-3d.flipped .face-front {
  opacity: 0;
  pointer-events: none;
}

.face-front {
  transition: opacity 0.3s ease;
}

.face-back {
  transform: rotateY(180deg);
  /* z-index: 1; */
}

.fc-hint {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fc-instruction {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.6;
}

/* Animations */
.slide-out-left {
  animation: slideOutLeft 0.4s forwards ease-in;
}

.slide-in-right {
  animation: slideInRight 0.4s forwards ease-out;
}

@keyframes slideOutLeft {
  to {
    transform: translateX(-120%) rotateY(-20deg);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(120%) rotateY(20deg);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Controls */
.fc-controls {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary-action {
  background: var(--text);
  color: var(--bg);
  border: none;
  font-weight: 600;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 99px;
  transition: transform 0.1s;
}

[data-theme="paper"] .primary-action {
  background: #111;
  color: #fff;
}

.primary-action:active {
  transform: scale(0.96);
}

.grade-btn {
  flex: 1;
  max-width: 120px;
  border-color: transparent;
  background: var(--bg);
  color: var(--c);
  border: 1px solid var(--c);
  font-weight: 600;
  transition: all 0.2s;
}

.grade-btn:hover {
  background: var(--c);
  color: #fff;
}

/* NEW SETUP IMPROVEMENTS */
.fc-setup-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 0 40px;
  animation: fadeup 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fc-setup-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.fc-setup-header h2 {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, var(--text) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

[data-theme="paper"] .fc-setup-header h2 {
  background: none;
  -webkit-text-fill-color: initial;
  color: #111;
}

.fc-setup-header p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

.fc-setup-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-setup-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fc-setup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}

[data-theme="paper"] .fc-setup-card:hover {
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.1);
}

.fc-card-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: 0.6;
}

/* Grid for Categories - Re-styling existing check buttons */
#revSets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

#revSets .param-btn {
  border-radius: 14px;
  height: 48px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  border-color: transparent;
  text-transform: none;
}

[data-theme="paper"] #revSets .param-btn {
  background: #f4f4f4;
  border-color: #ddd;
}

#revSets .param-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

#revSets .param-btn[data-active="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 40%, transparent);
}

[data-theme="paper"] #revSets .param-btn[data-active="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Modern Segment Control for Priority/Count */
.segment-group {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 14px;
  gap: 4px;
}

[data-theme="paper"] .segment-group {
  background: #eee;
}

/* Override param-chip styles within setup card */
.fc-setup-card .param-chip {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.fc-setup-card .param-chip:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  transform: none;
}

.fc-setup-card .param-chip[data-active="true"],
.fc-setup-card .param-chip[aria-pressed="true"] {
  background: var(--card);
  /* Surface color */
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  /* minimal border */
}

/* Active modifier for Accent coloring in segment check */
.fc-setup-card .param-chip[data-active="true"] {
  color: var(--accent);
}

[data-theme="paper"] .fc-setup-card .param-chip[data-active="true"] {
  background: #fff;
  color: #111;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Split row for small cards */
.fc-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media(max-width: 600px) {
  .fc-row-split {
    grid-template-columns: 1fr;
  }

  /* Hide duplicate theme pills on mobile (already in menu) */
  .fixed-pills-container {
    display: none;
  }
}

/* Actions */
.fc-setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
}

.btn-text {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-text:hover {
  color: var(--text);
  text-decoration: underline;
}

.btn-primary-large {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 20px color-mix(in oklab, var(--accent) 30%, transparent);
}

.btn-primary-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in oklab, var(--accent) 45%, transparent);
}

.btn-primary-large:active {
  transform: scale(0.97);
}

[data-theme="paper"] .btn-primary-large {
  background: #111;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- Vocab Grid --- */
.vocab-grid {
  display: flex;
  flex-direction: column;
  /* Remove gap to use borders instead */
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
}

.vocab-header {
  display: grid;
  grid-template-columns: 100px 1fr 1.5fr 80px;
  background: var(--card);
  padding: 12px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}

[data-theme="paper"] .vocab-header {
  background: #f0f0f0;
}

.vocab-row {
  display: grid;
  grid-template-columns: 100px 1fr 1.5fr 80px;
  background: var(--bg);
  padding: 14px 16px;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
  /* Fine separator line */
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Remove border for last item if needed, but usually fine to keep or hide on last-child */
.vocab-row:last-child {
  border-bottom: none;
}

[data-theme="paper"] .vocab-row {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vocab-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="paper"] .vocab-row:hover {
  background: #f7f7f7;
}

.vocab-row.expanded {
  background: var(--card);
}

[data-theme="paper"] .vocab-row.expanded {
  background: #f9f9f9;
}

.vocab-kanji {
  font-size: 18px;
  font-weight: 700;
  color: var(--kanji-fg);
  font-family: "Noto Sans JP", sans-serif;
}

.vocab-reading {
  color: var(--muted);
  font-size: 13px;
}

.vocab-meaning {
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
}

.vocab-tag-cell {
  justify-self: end;
}

.vocab-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
}

[data-theme="paper"] .vocab-tag {
  background: #eee;
  color: #666;
}

/* Accordion Details */
.vocab-details-row {
  background: var(--card);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

[data-theme="paper"] .vocab-details-row {
  background: #fff;
}

.vocab-details-row.open {
  max-height: 300px;
  border-bottom: 1px solid var(--border);
}

.vocab-details-inner {
  padding: 0 16px 24px 116px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  margin-right: 6px;
  font-weight: 600;
}

@media (max-width: 600px) {

  /* Vocab Grid Mobile: Hide Reading (col 2) and Tag (col 4) from main row */
  .vocab-header,
  .vocab-row {
    grid-template-columns: 80px 1fr;
    /* Kanji + Meaning */
  }

  .vocab-header>div:nth-child(2),
  .vocab-header>div:nth-child(4),
  .vocab-row>.vocab-reading,
  .vocab-row>.vocab-tag-cell {
    display: none;
  }

  /* Adjust padding for details to be full width since cols are gone */
  .vocab-details-inner {
    padding: 0 16px 20px 16px;
  }
}



/* Unified Search Bar */
.vocab-controls {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 12px;
  flex-wrap: wrap;
  /* Allow wrapping on small screens */
}

/* Wrap search in a styled container that looks like the old bar */
.vocab-search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 6px 4px 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-theme="paper"] .vocab-search-bar {
  background: #fff;
}

.vocab-search-bar:focus-within {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-color: var(--accent);
}

[data-theme="paper"] .vocab-search-bar:focus-within {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.vocab-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  outline: none;
  padding: 8px 0;
}

.vocab-search-input::placeholder {
  color: var(--muted);
}

.vocab-filters {
  display: flex;
  gap: 8px;
}

@media (max-width: 600px) {
  .vocab-filters {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Distribute evenly */
  }

  .vocab-filters .custom-select-container,
  .vocab-filters .vocab-select {
    width: 100%;
    min-width: 0;
    /* Prevention overflow */
  }

  /* Target the trigger inside specifically to ellipsize if needed */
  .custom-select-trigger {
    padding: 0 8px;
    /* Save space */
    justify-content: center;
  }

  .custom-select-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Styled Selects */
.vocab-select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  height: 42px;
  /* Match search bar height approx */
  display: grid;
  place-items: center;
  transition: all 0.2s;
}

.vocab-select:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: var(--accent);
}

[data-theme="paper"] .vocab-select {
  background: #fff;
  color: #666;
}

[data-theme="paper"] .vocab-select:hover {
  background: #f4f4f4;
  color: #111;
  border-color: #999;
}

/* Custom Select Implementation */
.custom-select-container {
  position: relative;
  width: 100%;
  min-width: 140px;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  transition: all 0.2s;
}

.custom-select-trigger:hover,
.custom-select-container.open .custom-select-trigger {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: var(--accent);
}

[data-theme="paper"] .custom-select-trigger {
  background: #fff;
  color: #666;
}

[data-theme="paper"] .custom-select-trigger:hover,
[data-theme="paper"] .custom-select-container.open .custom-select-trigger {
  background: #f4f4f4;
  color: #111;
  border-color: #999;
}

/* Scroll list limited to approx 10 items (10 * 36px ~ 360px) */
.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: none;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.custom-select-container.open .custom-select-options {
  display: block;
  animation: fadein 0.2s ease;
}

[data-theme="paper"] .custom-select-options {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.custom-option {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.custom-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent);
}

[data-theme="paper"] .custom-option {
  color: #111;
}

[data-theme="paper"] .custom-option:hover {
  background: #eee;
}

.custom-option.selected {
  background: var(--accent);
  color: #fff;
}

[data-theme="paper"] .custom-option.selected {
  background: #111;
}

/* Load More */
.load-more-container {
  display: flex;
  justify-content: center;
  padding: 20px 0 40px;
}

.load-more-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 32px;
  border-radius: 99px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 40%, transparent);
}

[data-theme="paper"] .load-more-btn {
  background: #fff;
  color: #111;
}

[data-theme="paper"] .load-more-btn:hover {
  background: #111;
  color: #fff;
}

/* Loading Mask */
#app-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  transition: opacity 0.4s ease;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 24px;
  letter-spacing: 0.2em;

  /* Default (Dark) = White 20% */
  color: rgba(255, 255, 255, 0.2);
}

[data-theme="paper"] #app-mask {
  /* Paper (Light) = Black 20% */
  color: rgba(0, 0, 0, 0.2);
}

/* Pro Invite Card - New Design */
.pro-invite-card {
  background: var(--card);
  /* Default to dark card bg */
  color: var(--text);
  /* Default to light text */
  border-radius: 20px;
  padding: 30px 24px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Adjust for Paper theme to ensure it stands out but matches */
[data-theme="paper"] .pro-invite-card {
  background: #ffffff;
  color: #111;
  border: 1px solid #e0e0e0;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}

.pro-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 40%, transparent);
}

.pro-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin: 4px 0 0;
  color: var(--text);
  /* Use text var, JS overrides with accent for Pro */
  letter-spacing: -0.5px;
}

/* In JS for "Pro Member" title is forced to var(--accent), so this is fallback for non-pro title 'Upgrade to Pro' which might use this?
       Wait, currently 'Upgrade to Pro' title is .pro-title too. 
       In JS for non-pro: <div class="pro-title">Upgrade to Pro</div> 
       So non-pro title should benefit from light text in dark mode. */

[data-theme="paper"] .pro-title {
  color: #1a1a1a;
}

.pro-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  font-weight: 500;
  max-width: 260px;
}

[data-theme="paper"] .pro-desc {
  color: #666;
}

.pro-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

.pro-feature-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s;
  cursor: default;
}

[data-theme="paper"] .pro-feature-block {
  background: #f5f5f7;
  border-color: transparent;
  color: #666;
}

.pro-feature-block:hover {
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  border-color: var(--accent);
  color: var(--text);
}

[data-theme="paper"] .pro-feature-block:hover {
  background: #eee;
  color: #111;
}

.pro-feat-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

.pro-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
  text-align: left;
  font-size: 13px;
  color: #444;
  background: #f5f5f7;
  padding: 12px 16px;
  border-radius: 12px;
  width: 100%;
}

.pro-feat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pro-check {
  color: var(--accent);
  font-weight: 900;
  font-size: 14px;
}

.pro-cta-btn {
  background: #111;
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 14px;
  font-weight: 700;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
  font-size: 15px;
}

.pro-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-text {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-text:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

[data-theme="paper"] .btn-text:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #111;
}

.pro-status-current {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-top: 4px;
}

/* Small decorative shine */
.pro-invite-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

/* Smart Suggestion Button */
#smartSuggestBtn {
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Ready state (Selection exists) -> Invite with pulse */
#smartSuggestBtn.ready {
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: pulse-border 2s infinite;
  box-shadow: 0 0 15px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* Active state (Menu Open) -> Pressed look */
#smartSuggestBtn.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: var(--text) !important;
  /* Invert or specific color? */
  color: var(--bg) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  animation: none;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
  }

  70% {
    box-shadow: 0 0 0 6px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* GLOBAL SELECTION - INJECTED */
/* GLOBAL SELECTION - INJECTED */
::selection,
*::selection {
  /* Force high contrast background for dark mode (Fallback to simple opacity if mix fails) */
  background: rgba(255, 30, 86, 0.4) !important;
  /* Default RED fallback */
  background: color-mix(in srgb, var(--accent) 40%, transparent) !important;
  color: #fff !important;
  /* Force white text for contrast */
  text-shadow: none !important;
}

[data-theme="paper"] ::selection,
[data-theme="paper"] *::selection {
  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  color: inherit !important;
}

[data-theme="paper"] ::selection,
[data-theme="paper"] *::selection {
  background: color-mix(in oklab, var(--accent) 20%, transparent) !important;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 60px;
}

.about-card {
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 24px;
  min-height: auto;
  gap: 12px;
  transition: transform 0.2s;
}

.about-card:hover {
  transform: translateY(-4px);
}

.about-icon {
  font-size: 36px;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

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

/* Minimalist Switches Global */
.switch label {
  font-size: 0 !important;
  padding: 6px 16px;
  min-width: 40px;
}

.switch label::before {
  font-size: 13px;
  font-weight: 700;
  display: block;
}

/* Kana -> あ */
label[for="kana"]::before {
  content: "あ";
}

/* Romaji -> Ab */
label[for="romaji"]::before {
  content: "Ab";
}

/* FavOff -> All */
label[for="favOff"]::before {
  content: "All";
  font-size: 11px;
}

/* FavOn -> Favorites */
label[for="favOn"]::before {
  content: "Favorites";
  font-size: 11px;
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--card);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

[data-theme="paper"] .toast {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}