/* @font-face declarations are injected at runtime by `ui_components::font_face`
   (the canonical source). Tauri builds serve the woff2 from the local origin
   (`dist/fonts/`, bundled via trunk copy-dir from `cdn/fonts/`); web builds
   resolve them on the CDN. Per-face `font-display` (CJK `block`, Latin/Cyr
   `swap`) is encoded in `font_face.rs::FaceSpec`. See ADR-028 / ADR-030. */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.left-1 {
  left: 0.25rem;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.col-span-full {
  grid-column: 1 / -1;
}

.-m-2 {
  margin: -0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-1 {
  height: 0.25rem;
}

.h-12 {
  height: 3rem;
}

.h-2 {
  height: 0.5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-full {
  height: 100%;
}

.max-h-64 {
  max-height: 16rem;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[100dvh\] {
  min-height: 100dvh;
}

.min-h-\[2\.25rem\] {
  min-height: 2.25rem;
}

.min-h-\[4rem\] {
  min-height: 4rem;
}

.min-h-\[60svh\] {
  min-height: 60svh;
}

.min-h-\[60vh\] {
  min-height: 60vh;
}

.w-0 {
  width: 0px;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[min\(90vw\2c 1280px\)\] {
  min-width: min(90vw,1280px);
}

.max-w-\[min\(90vw\2c 1280px\)\] {
  max-width: min(90vw,1280px);
}

.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.origin-top {
  transform-origin: top;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-manipulation {
  touch-action: manipulation;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none {
  resize: none;
}

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

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

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

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

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-\[var\(--accent-olive\)\] {
  border-color: var(--accent-olive);
}

.border-\[var\(--border-dark\)\] {
  border-color: var(--border-dark);
}

.border-\[var\(--border-light\)\] {
  border-color: var(--border-light);
}

.border-\[var\(--error\)\] {
  border-color: var(--error);
}

.border-\[var\(--fg-black\)\] {
  border-color: var(--fg-black);
}

.border-\[var\(--success\)\] {
  border-color: var(--success);
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-l-\[var\(--error\)\] {
  border-left-color: var(--error);
}

.border-l-\[var\(--success\)\] {
  border-left-color: var(--success);
}

.bg-\[var\(--accent-olive\)\] {
  background-color: var(--accent-olive);
}

.bg-\[var\(--accent-sage\)\] {
  background-color: var(--accent-sage);
}

.bg-\[var\(--accent-terracotta\)\] {
  background-color: var(--accent-terracotta);
}

.bg-\[var\(--bg-aged\)\] {
  background-color: var(--bg-aged);
}

.bg-\[var\(--bg-cream\)\] {
  background-color: var(--bg-cream);
}

.bg-\[var\(--bg-paper\)\] {
  background-color: var(--bg-paper);
}

.bg-\[var\(--bg-secondary\)\] {
  background-color: var(--bg-secondary);
}

.bg-\[var\(--bg-warm\)\] {
  background-color: var(--bg-warm);
}

.bg-\[var\(--border-dark\)\] {
  background-color: var(--border-dark);
}

.bg-\[var\(--error\)\] {
  background-color: var(--error);
}

.bg-\[var\(--fg-black\)\] {
  background-color: var(--fg-black);
}

.bg-transparent {
  background-color: transparent;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-safe-t-half {
  padding-top: calc(env(safe-area-inset-top, 0px) / 2);
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[length\:var\(--text-default\)\] {
  font-size: var(--text-default);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}

.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[var\(--accent-olive\)\] {
  color: var(--accent-olive);
}

.text-\[var\(--accent-sage\)\] {
  color: var(--accent-sage);
}

.text-\[var\(--accent-terracotta\)\] {
  color: var(--accent-terracotta);
}

.text-\[var\(--bg-paper\)\] {
  color: var(--bg-paper);
}

.text-\[var\(--border-light\)\] {
  color: var(--border-light);
}

.text-\[var\(--error\)\] {
  color: var(--error);
}

.text-\[var\(--fg\)\] {
  color: var(--fg);
}

.text-\[var\(--fg-black\)\] {
  color: var(--fg-black);
}

.text-\[var\(--fg-light\)\] {
  color: var(--fg-light);
}

.text-\[var\(--fg-muted\)\] {
  color: var(--fg-muted);
}

.text-\[var\(--success\)\] {
  color: var(--success);
}

.text-\[var\(--text-label-sm\)\] {
  color: var(--text-label-sm);
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.decoration-\[var\(--border-light\)\] {
  text-decoration-color: var(--border-light);
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[2px_2px_0_var\(--accent-olive\)\] {
  --tw-shadow: 2px 2px 0 var(--accent-olive);
  --tw-shadow-colored: 2px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-\[var\(--accent-olive\)\] {
  --tw-ring-color: var(--accent-olive);
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  /* Colors */
  --bg-cream: #f7f4ee;
  --bg-paper: #fdfbf7;
  --bg-aged: #ede8dd;
  --bg-warm: #f0ebe1;
  --fg-black: #1a1915;
  --fg-muted: #6b665a;
  --fg-light: #9a9590;
  --accent-olive: #3d4535;
  --accent-terracotta: #a65d3f;
  --accent-gold: #8b7355;
  --accent-sage: #6b7b5e;
  --border-light: #d4cfc3;
  --border-dark: #1a1915;
  --success: #4a6b4a;
  --warning: #a67c3f;
  --error: #8b4545;
  /* Алиасы для совместимости */
  --bg-primary: var(--bg-cream);
  --bg-secondary: var(--bg-aged);
  --border-color: var(--border-dark);
  --border-subtle: var(--border-light);
  --fg: var(--fg-black);
  --fg-primary: var(--fg-black);
  --accent: var(--accent-olive);
  --muted: var(--fg-muted);
  --accent-olive-subtle: color-mix(in srgb, var(--accent-olive) 40%, transparent);
  --backdrop: color-mix(in srgb, var(--fg-black) 60%, transparent);
  --token-highlight: #D2D5C3;
  --token-highlight-active: #D2D5C3;
  /* Animation Timing */
  --anima-duration-fast: 100ms;
  --anima-duration-medium: 150ms;
  --anima-duration-normal: 200ms;
  --anima-duration-slow: 300ms;
  --anima-duration-entrance: 350ms;
  --anima-ease-paper: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anima-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --anima-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Safe Area Insets с fallback */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  /* Noto Sans KR after JP: JP has no hangul glyphs, so hangul runs pass
       through to KR; CJK ideographs stay on JP. */
  --font-serif: "Cormorant Garamond", "Noto Sans JP", "Noto Sans KR", sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans JP", "Noto Sans KR", monospace;
  /* Rounded */
  --rounded-none: 0px;
  --rounded-sm: 2px;
  --rounded-md: 4px;
  --rounded-lg: 8px;
  --rounded-full: 50%;
  /* Shadows */
  --shadow-offset-x: 6px;
  --shadow-offset-y: 6px;
  --shadow-color: var(--border-dark);
  --shadow-offset-lg: 8px;
  /* Typography Scale */
  --text-2xs: 11px;
  --text-xs: 14px;
  --text-sm: 16px;
  --text-label: 13px;
  --text-label-sm: 11px;
  --text-body: 14px;
  --text-lg: 18px;
  /* Shared by .heading-h2 and the lesson-question markdown override so the
       two question-render paths (FuriganaText and MarkdownText) cannot drift
       apart in size. */
  --heading-h2-size: clamp(2.25rem, 5vw, 2.75rem);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-mono);
  background-color: var(--bg-cream);
  color: var(--fg-black);
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
}

/* Re-enable selection for content the user SHOULD be able to select/copy.
   Whitelist approach: every future selectable container must opt in here
   (see ADR-026). user-select is inherited, so listing the top-level content
   container is enough for its descendants. */

input,
textarea,
[contenteditable="true"],
.markdown-text,
.translator-text,
.furigana-text,
.furigana-plain,
.word-translations,
.kanji-detail-hero-meaning,
.reading-tag,
.kanji-card-answer,
.kanji-card-compact-readings,
.grammar-detail-hero-meaning {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
  -webkit-touch-callout: default;
}

html,
body {
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* Touch оптимизация */

button,
[role="button"],
a,
input[type="button"],
input[type="submit"],
.cursor-pointer {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard shortcut hints: visible only when the primary pointer is fine
   (mouse/keyboard). Hidden on touch-primary devices (pointer: coarse) where
   a physical keyboard is absent. Prefer this over width breakpoints — a
   tablet is wide yet touch-driven. */

.kbd-hint {
  display: inline;
}

@media (pointer: coarse) {
  .kbd-hint {
    display: none;
  }
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

.paper-texture::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.btn {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  color: var(--fg-black);
  cursor: pointer;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper),
        border-color var(--anima-duration-normal) var(--anima-ease-paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 640px) {
  .btn {
    font-size: var(--text-label);
    letter-spacing: 0.15em;
    padding: 16px 32px;
  }
}

.btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--border-dark);
  opacity: 0;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
  pointer-events: none;
}

@media (min-width: 640px) {
  .btn::before {
    inset: 4px;
  }
}

.btn:hover::before {
  opacity: 1;
}

.btn:hover {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-filled {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.btn-filled:hover {
  background: var(--bg-paper);
  color: var(--fg-black);
}

.btn-olive {
  border-color: var(--accent-olive);
  background: var(--accent-olive);
  color: var(--bg-paper);
}

.btn-olive:hover {
  background: var(--bg-paper);
  color: var(--accent-olive);
}

.btn-olive::before {
  border-color: var(--accent-olive);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--bg-paper);
  color: var(--fg-black);
  border-color: var(--border-dark);
}

.btn-ghost::before {
  /* display: none; — removed per design system, inherits base .btn::before */
}

.btn-sm {
  padding: 8px 12px;
  font-size: var(--text-2xs);
}

@media (min-width: 640px) {
  .btn-sm {
    padding: 10px 20px;
    font-size: var(--text-label-sm);
  }
}

.btn-lg {
  padding: 20px 40px;
  font-size: var(--text-label);
}

.input-field {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  letter-spacing: 0.05em;
  padding: 14px 18px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  color: var(--fg-black);
  width: 100%;
  transition: box-shadow var(--anima-duration-normal) var(--anima-ease-paper), background-color var(--anima-duration-normal) var(--anima-ease-paper), color var(--anima-duration-normal) var(--anima-ease-paper);
}

.input-field:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--border-dark);
}

.input-field::-moz-placeholder {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--text-body);
  letter-spacing: 0.1em;
}

.input-field::placeholder {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--text-body);
  letter-spacing: 0.1em;
}

.input-field:disabled {
  background: var(--bg-aged);
  color: var(--fg-muted);
  cursor: not-allowed;
}

.card {
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  position: relative;
  /* Allow vertical touch-scroll to pass through to the scroll container
       rather than being captured by the card surface on mobile. */
  touch-action: pan-y;
}

.border-none {
  border: none;
}

.card-shadow::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--shadow-color);
  z-index: -1;
  background: var(--bg-aged);
}

.card-selectable {
  cursor: pointer;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper), border-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.card-selectable:hover {
  background: var(--bg-aged);
}

.card-selectable.selected {
  border-color: var(--accent-olive);
  background: var(--bg-warm);
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  background: var(--bg-paper);
  color: var(--fg-muted);
  display: inline-block;
}

.tag-filled {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.tag-olive {
  background: var(--accent-olive);
  color: var(--bg-paper);
  border-color: var(--accent-olive);
}

.tag-terracotta {
  background: var(--accent-terracotta);
  color: var(--bg-paper);
  border-color: var(--accent-terracotta);
}

.tag-sage {
  background: var(--accent-sage);
  color: var(--bg-paper);
  border-color: var(--accent-sage);
}

/* Clickable Tag — интерактивный фильтр/chip */

.tag-clickable {
  border-color: var(--border-dark);
  color: var(--fg-black);
  background: var(--bg-paper);
  cursor: pointer;
  position: relative;
  transition: transform var(--anima-duration-fast) var(--anima-ease-paper),
        background-color var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper),
        border-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.tag-clickable::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--border-dark);
  opacity: 0;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
  pointer-events: none;
}

.tag-clickable:hover::before {
  opacity: 1;
}

.tag-clickable:hover {
  background: var(--fg-black);
  color: var(--bg-paper);
  transform: translateY(-1px);
}

.tag-clickable:active {
  transform: translateY(1px) scale(0.98);
}

/* Цветные варианты clickable */

.tag-clickable.tag-filled {
  background: var(--fg-black);
  color: var(--bg-paper);
  border-color: var(--fg-black);
}

.tag-clickable.tag-filled:hover {
  background: var(--bg-paper);
  color: var(--fg-black);
}

.tag-clickable.tag-olive {
  background: var(--accent-olive);
  color: var(--bg-paper);
  border-color: var(--accent-olive);
}

.tag-clickable.tag-olive:hover {
  background: var(--bg-paper);
  color: var(--accent-olive);
}

.tag-clickable.tag-olive::before {
  border-color: var(--accent-olive);
}

.tag-clickable.tag-terracotta {
  background: var(--accent-terracotta);
  color: var(--bg-paper);
  border-color: var(--accent-terracotta);
}

.tag-clickable.tag-terracotta:hover {
  background: var(--bg-paper);
  color: var(--accent-terracotta);
}

.tag-clickable.tag-terracotta::before {
  border-color: var(--accent-terracotta);
}

.tag-clickable.tag-sage {
  background: var(--accent-sage);
  color: var(--bg-paper);
  border-color: var(--accent-sage);
}

.tag-clickable.tag-sage:hover {
  background: var(--bg-paper);
  color: var(--accent-sage);
}

.tag-clickable.tag-sage::before {
  border-color: var(--accent-sage);
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.checkbox-container input {
  display: none;
}

.checkbox-box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-dark);
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.checkbox-container input:checked+.checkbox-box::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--fg-black);
}

.checkbox-container:hover .checkbox-box {
  background: var(--bg-aged);
}

.radio-container {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.radio-container input {
  display: none;
}

.radio-box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-dark);
  border-radius: var(--rounded-full);
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.radio-container input:checked+.radio-box::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--fg-black);
  border-radius: var(--rounded-full);
}

.radio-container:hover .radio-box {
  background: var(--bg-aged);
}

.toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.toggle-container input {
  display: none;
}

.toggle-track {
  width: 48px;
  height: 28px;
  border: 1px solid var(--border-dark);
  position: relative;
  transition: background-color var(--anima-duration-slow) var(--anima-ease-paper), border-color var(--anima-duration-slow) var(--anima-ease-paper);
}

.toggle-track::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  top: 4px;
  left: 4px;
  transition: left var(--anima-duration-slow) var(--anima-ease-paper), background-color var(--anima-duration-slow) var(--anima-ease-paper);
}

.toggle-container input:checked+.toggle-track {
  background: var(--fg-black);
}

.toggle-container input:checked+.toggle-track::after {
  left: 27px;
  background: var(--bg-paper);
}

.divider {
  height: 1px;
  background: var(--border-dark);
}

.divider-double {
  height: 3px;
  background: transparent;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

.badge {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border: none;
  background: var(--bg-aged);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.label-frame {
  border: 1px solid var(--border-dark);
  padding: 20px;
  position: relative;
  background: var(--bg-paper);
}

.label-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--border-dark);
  pointer-events: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  padding: 36px;
  max-width: 640px;
  width: 90%;
  z-index: 101;
}

.modal-content::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-lg));
  right: calc(-1 * var(--shadow-offset-lg));
  width: 100%;
  height: 100%;
  border: 1px solid var(--shadow-color);
  z-index: -1;
  background: var(--bg-aged);
}

/* --- Drawer Component --- */

@keyframes drawerSlideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes drawerSlideInBottom {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.drawer-content {
  position: fixed;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  z-index: 101;
  padding: 36px;
  display: flex;
  flex-direction: column;
}

/* Декоративная тень в стиле твоего приложения */

.drawer-content::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--bg-aged);
  border: 1px solid var(--border-dark);
}

/* Мобильная версия: выезжает снизу, 80% высоты */

@media (max-width: 639px) {
  .drawer-content {
    bottom: 0;
    left: 0;
    right: 0;
    height: 80%;
    border-bottom: none;
    animation: drawerSlideInBottom 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .drawer-content::after {
    top: -8px;
    left: 8px;
    right: -8px;
    height: 100%;
  }
}

/* Десктопная версия: выезжает справа, 80% ширины */

@media (min-width: 640px) {
  .drawer-content {
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 800px;
    border-right: none;
    animation: drawerSlideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .drawer-content::after {
    top: 8px;
    left: -8px;
    bottom: -8px;
    width: 100%;
  }
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  /* Небольшой отступ для скроллбара */
  /* Scroll chaining stops here: wheel/touch at the edges of the drawer
       body must not scroll the page behind the drawer. */
  overscroll-behavior: contain;
}

/* Pinned action bar (optional Drawer `footer` slot). Sibling of
   .drawer-body, so it spans the full card width (no scrollbar gutter)
   and needs no own background — scrolling content never passes under it.
   Spacing contract lives here, structurally: margin-top guarantees the
   gap between the last body element and the rule regardless of the
   body content's trailing padding. */

.drawer-footer {
  flex-shrink: 0;
  margin-top: 16px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border-dark);
}

/* ------------------------ */

.dropdown {
  position: relative;
}

.dropdown-trigger {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  color: var(--fg-black);
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper), color var(--anima-duration-normal) var(--anima-ease-paper), border-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.dropdown-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--fg-black);
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

.dropdown.active .dropdown-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper), visibility var(--anima-duration-normal) var(--anima-ease-paper), transform var(--anima-duration-normal) var(--anima-ease-paper);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--anima-duration-fast) var(--anima-ease-paper), color var(--anima-duration-fast) var(--anima-ease-paper);
  border-bottom: 1px solid var(--border-light);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.dropdown-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  background: var(--bg-paper);
  z-index: 1;
}

.dropdown-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.05em;
}

.dropdown-search input:focus {
  outline: none;
  box-shadow: 2px 2px 0 var(--border-dark);
}

.dropdown-search input::-moz-placeholder {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
}

.dropdown-search input::placeholder {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
}

.dropdown-items {
  max-height: 220px;
  overflow-y: auto;
}

.alert {
  border: 1px solid var(--border-dark);
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-paper);
}

.alert-success {
  border-left: 4px solid var(--success);
}

.alert-warning {
  border-left: 4px solid var(--warning);
}

.alert-error {
  border-left: 4px solid var(--error);
}

.alert-info {
  border-left: 4px solid var(--fg-black);
}

.progress-track {
  height: 8px;
  border: 1px solid var(--border-dark);
  background: var(--bg-aged);
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: var(--progress-width, 0%);
  background: var(--fg-black);
  transition: width 0.5s ease;
}

/* "Ghost" layer that sits BEHIND the learned progress-fill. Renders the
   projected share (learned + hard + in-progress, i.e. everything except
   brand-new cards) as a faint same-color stripe. Both this layer and the
   learned `.progress-fill` are positioned absolutely inside `.progress-track`
   (which is `position: relative`); in DOM order this stripe comes BEFORE the
   learned layer so the learned layer paints on top. */

.progress-fill-projected {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  opacity: 0.22;
  transition: width 0.5s ease;
}

/* When the learned fill is paired with a projected layer (e.g. on the JLPT
   progress card and the home category grid), the learned layer must also be
   absolutely positioned so the two layers stack rather than compete for
   normal-flow width. Apply this class alongside `.progress-fill` on the
   learned element whenever `.progress-fill-projected` is used. */

.progress-fill-layered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/* Indeterminate fallback: CDN serves model GETs chunked without Content-Length,
   so the total is unknown — animate a segment instead of a fake percentage. */

.progress-fill--indeterminate {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  background: var(--fg-black);
  transform: translateX(0);
  animation: anima-progress-indeterminate 1.4s var(--anima-ease-paper) infinite;
}

@keyframes anima-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(250%);
  }
}

.progress-container {
  position: relative;
}

/* Onboarding scoring progress bar — single horizontal track with one marker
   per section boundary (Grammar | Kanji | Vocabulary | …). Sits on top of the
   generic `.progress-track` / `.progress-fill` geometry: same height, same
   border, but the fill is driven by an inline `width: %` style instead of the
   `--progress-width` CSS var so the parent component can compute it from the
   section-aware queue length. */

.scoring-progress-bar {
  width: 100%;
}

.scoring-progress-track {
  position: relative;
  height: 8px;
  border: 1px solid var(--border-dark);
  background: var(--bg-aged);
  overflow: visible;
}

.scoring-progress-fill {
  height: 100%;
  background: var(--fg-black);
  transition: width 0.3s ease;
}

.scoring-progress-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--border-dark);
  transform: translateX(-1px);
}

.scoring-progress-legend {
  color: var(--fg-muted);
}

/* Section colours in the scoring progress bar — Grammar=Terracotta,
   Kanji=Olive, Vocabulary/Phrase=default (black). Applied to both the
   vertical section marker and the legend text so the visual association
   is clear at a glance. */

.scoring-section-grammar {
  color: var(--accent-terracotta);
}

.scoring-progress-marker.scoring-section-grammar {
  background: var(--accent-terracotta);
}

.scoring-section-kanji {
  color: var(--accent-olive);
}

.scoring-progress-marker.scoring-section-kanji {
  background: var(--accent-olive);
}

.progress-track-lesson {
  height: 3px;
  border: 1px solid var(--border-light);
  background: var(--bg-aged);
  position: relative;
  overflow: hidden;
}

.progress-fill-core {
  height: 100%;
  background: var(--fg-black);
  transition: width 0.5s ease;
}

.progress-fill-phrase {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent-sage);
  transition: width 0.5s ease, left 0.5s ease;
}

.progress-divider {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 8px;
  background: var(--border-dark);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.stepper-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.stepper-number {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  background: var(--bg-paper);
  transition: background-color var(--anima-duration-slow) var(--anima-ease-paper), border-color var(--anima-duration-slow) var(--anima-ease-paper), color var(--anima-duration-slow) var(--anima-ease-paper);
}

.stepper-step.active .stepper-number {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.stepper-step.completed .stepper-number {
  background: var(--accent-olive);
  border-color: var(--accent-olive);
  color: var(--bg-paper);
}

.stepper-label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: none;
}

.stepper-step.active .stepper-label {
  display: block;
  color: var(--fg-black);
}

.stepper-step.completed .stepper-label {
  color: var(--fg-black);
}

.stepper-line {
  flex-grow: 1;
  height: 1px;
  background: var(--border-dark);
  opacity: 0.3;
}

.stepper-step.completed+.stepper-line {
  opacity: 1;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-dark);
}

.tab {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  position: relative;
  color: var(--fg-muted);
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
  background: transparent;
  border: none;
}

.tab::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fg-black);
  transform: scaleX(0);
  transition: transform var(--anima-duration-slow) var(--anima-ease-paper);
}

.tab:hover {
  color: var(--fg-black);
}

.tab.active {
  color: var(--fg-black);
}

.tab.active::after {
  transform: scaleX(1);
}

/* Underline Tabs variant */

.tabs--underline {
  display: flex;
  border-bottom: 1px solid var(--border-dark);
  overflow-x: auto;
  -webkit-scrollbar: none;
  scrollbar-width: none;
  gap: 0;
  padding: 0;
  background: transparent;
}

.tabs--underline .tab {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 16px;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  background: transparent;
}

.tabs--underline .tab:hover {
  color: var(--fg-black);
}

.tabs--underline .tab.active {
  color: var(--fg-black);
  border-bottom-color: var(--fg-black);
  background: transparent;
}

/* Scrollable Tabs variant: horizontal scroll for narrow viewports where
   all tabs don't fit (e.g. 4 input-mode tabs in Add Words on a 360px phone).
   hide-scrollbar keeps the visual clean while remaining swipeable. */

.tabs--scrollable {
  display: flex;
  border-bottom: 1px solid var(--border-dark);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs--scrollable::-webkit-scrollbar {
  display: none;
}

.tabs--scrollable .tab {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  background: transparent;
  flex-shrink: 0;
}

.tabs--scrollable .tab:hover {
  color: var(--fg-black);
}

.tabs--scrollable .tab.active {
  color: var(--fg-black);
  border-bottom-color: var(--fg-black);
  background: transparent;
}

/* Suppress the base .tab::after underline inside scrollable variant —
   it conflicts with the border-bottom indicator above. */

.tabs--scrollable .tab::after {
  display: none;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  /* Default center; overridden by --tooltip-shift-x (px) from JS when the
       tooltip would overflow the viewport left/right edge. */
  left: calc(50% + var(--tooltip-shift-x, 0px));
  transform: translateX(-50%);
  background: var(--fg-black);
  color: var(--bg-paper);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.05em;
  white-space: normal;
  max-width: min(250px, calc(100vw - 16px));
  word-wrap: break-word;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper), visibility var(--anima-duration-normal) var(--anima-ease-paper);
  z-index: 100;
  /* Prevent invisible tooltip from intercepting pointer events */
  pointer-events: none;
}

.tooltip--top {
  bottom: calc(100% + 8px);
}

/* Arrow follows the trigger center, shifted along with the tooltip body via
   --tooltip-shift-x so it stays visually connected. */

.tooltip--top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--tooltip-shift-x, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--fg-black);
}

.tooltip--bottom {
  top: calc(100% + 8px);
}

.tooltip--bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(50% - var(--tooltip-shift-x, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--fg-black);
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

.accordion-item-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.accordion-item {
  border: 1px solid var(--border-dark);
  border-bottom: none;
}

.accordion-item:last-child {
  border-bottom: 1px solid var(--border-dark);
}

.accordion-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--bg-paper);
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.accordion-header:hover {
  background: var(--bg-aged);
}

.accordion-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  background: var(--fg-black);
  transition: transform var(--anima-duration-slow) var(--anima-ease-paper), opacity var(--anima-duration-slow) var(--anima-ease-paper);
}

.accordion-icon::before {
  width: 100%;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
}

.accordion-icon::after {
  width: 1px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.accordion-item.active .accordion-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--bg-aged);
}

/* Expanded accordion: capped at 300px with internal scroll so large
   set lists (e.g. Minna with 25+ sections) don't create an infinitely
   scrollable page. The scroll keeps the accordion self-contained. */

.accordion-content.expanded {
  max-height: 300px;
  overflow-y: auto;
}

.accordion-body {
  padding: 20px;
}

.table-container {
  border: 1px solid var(--border-dark);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-aged);
  border-bottom: 1px solid var(--border-dark);
  font-weight: 400;
}

.table td {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--bg-warm);
}

.avatar {
  min-width: 56px;
  height: 56px;
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  letter-spacing: 0.05em;
  background: var(--bg-paper);
  padding: 0 12px;
  line-height: 1;
}

.avatar-sm {
  min-width: 40px;
  height: 40px;
  font-size: var(--text-body);
  padding: 0 8px;
  line-height: 1;
}

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -12px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  cursor: pointer;
  transition: transform var(--anima-duration-fast) var(--anima-ease-paper),
        background-color var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper);
}

.pagination-btn:hover {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.pagination-btn.active {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
}

.breadcrumbs a:hover {
  color: var(--fg-black);
}

.breadcrumbs span {
  color: var(--fg-black);
}

.search-container {
  position: relative;
}

.search-input {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  width: 100%;
  transition: box-shadow var(--anima-duration-normal) var(--anima-ease-paper);
}

.search-input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--border-dark);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

/* Алиас для обратной совместимости */

.skeleton {
  background: linear-gradient(90deg,
            var(--bg-aged) 0%,
            var(--bg-paper) 50%,
            var(--bg-aged) 100%);
  background-size: 200% 100%;
  animation: anima-skeleton-paper 2s ease-in-out infinite;
}

@keyframes anima-skeleton-paper {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* --- Bottom Tab Bar (Mobile Navigation) --- */

.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Compact bar: height fills safe-area for background, but internal
       padding is minimal so the bar doesn't feel oversized. Icons sit
       near the bottom, just clearing the home indicator. */
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.2);
  background: var(--bg-cream);
  border-top: 1px solid var(--border-dark);
  display: flex;
  z-index: 50;
  width: 100%;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.bottom-tab-bar::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 4px;
  right: -4px;
  height: 4px;
  background: var(--border-dark);
}

.bottom-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: var(--fg-muted);
  opacity: 0.6;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper),
        background-color var(--anima-duration-normal) var(--anima-ease-paper);
  position: relative;
  text-decoration: none;
  min-width: 0;
}

.bottom-tab-item:hover {
  opacity: 0.8;
}

.bottom-tab-item.active {
  color: var(--fg-black);
  opacity: 1;
}

.bottom-tab-item.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--fg-black);
}

.bottom-tab-item-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo in the bottom bar: prevent flexbox from shrinking it on narrow
   phones. The wrapper carries flex-shrink:0 so the 32×32 logo keeps its
   aspect ratio. */

.bottom-tab-item-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bottom-tab-item-logo img {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
}

.bottom-tab-item-label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 400px) {
  .bottom-tab-item-label {
    font-size: 9px;
    letter-spacing: 0;
  }
}

/* === SIDEBAR === */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  background-color: var(--bg-cream);
  border-right: 1px solid var(--border-dark);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding-top: calc(env(safe-area-inset-top, 0px) / 2);
}

.sidebar-logo {
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}

.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  opacity: 0.6;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper),
        background-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.sidebar-item:hover {
  color: var(--accent-terracotta);
  background-color: var(--bg-aged);
  opacity: 1;
}

.sidebar-item.active {
  color: var(--fg-black);
  opacity: 1;
  background-color: var(--bg-warm);
}

.sidebar-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 24px;
  background-color: var(--fg-black);
  transform: translateY(-50%);
}

.sidebar-item:focus-visible {
  outline: 1px solid var(--accent-terracotta);
  outline-offset: -1px;
}

.sidebar-item-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1;
}

.sidebar-footer {
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}

.sidebar-footer .avatar-sm {
  flex-shrink: 0;
  display: block;
  text-align: center;
  line-height: 30px;
}

.main-with-sidebar {
  margin-left: 220px;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (max-width: 1023px) {
  .sidebar {
    display: none !important;
  }

  .main-with-sidebar {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-item {
    transition: none;
  }
}

.furigana-text {
  display: inline;
}

.furigana-ruby {
  ruby-align: center;
}

.furigana-rt {
  font-size: 0.6em;
  color: var(--fg-muted);
}

/* <rt> holds ruby readings (an annotation), not base text — exclude it from
   selection so copying a phrase yields 答えて, not 答えコタエて (#178). */

rt {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.furigana-plain {
  display: inline;
}

.furigana-hidden .furigana-rt {
  opacity: 0;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
}

.furigana-hidden:hover .furigana-rt {
  opacity: 1;
}

/* === Kanji Hover Popup === */

.kanji-char-hover {
  cursor: pointer;
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  line-height: 1;
}

.kanji-char-hover:hover,
.kanji-hover-active {
  background: var(--token-highlight);
}

.kanji-popup {
  position: absolute;
  /* Center under the kanji char instead of left:0 so it doesn't
       systematically overflow the right viewport edge on mobile. */
  left: 50%;
  top: 100%;
  min-width: 120px;
  max-width: min(240px, calc(100vw - 32px));
  padding: 12px 16px;
  margin-top: 4px;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  z-index: 100;
  transform: translateX(-50%);
}

.kanji-popup::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--shadow-color);
  background: var(--bg-aged);
  z-index: -1;
}

.kanji-popup-char {
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.kanji-popup-desc {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
}

/* === Acquaintance Training Front Dim === */

/* Приглушение вопроса тренировки знакомства на стороне ответа.
   Раньше был tailwind opacity-60: opacity обёртки каскадировала во все
   DOM-потомки, включая тултип кандзи (.kanji-popup), и делала его
   полупрозрачным (баг-репорт). Пока тултип открыт — приглушение
   обёртки снимается. */

.front-dimmed {
  opacity: 0.6;
}

.front-dimmed:has(.kanji-popup) {
  opacity: 1;
}

/* === Translator Text === */

.translator-text {
  display: inline;
  font-family: var(--font-serif);
}

.translator-loading {
  opacity: 0.6;
}

/* One-off tokenizer dictionary warmup inside a TranslatorText (#521):
   inline spinner + label, sized to the text line so phrases don't jump
   when tokens replace the loader. */

.translator-loading-dict {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.8em;
  opacity: 1;
}

.token-word {
  position: relative;
  display: inline;
  cursor: pointer;
  border-bottom: 1px dotted var(--accent-olive-subtle);
  transition: background-color var(--anima-duration-medium) linear, border-color var(--anima-duration-medium) linear;
}

.token-word:hover,
.token-word:focus-visible {
  background: var(--token-highlight);
  border-bottom: 1px solid var(--accent-olive);
  outline: none;
}

/* While a token's popup is open, the token creates a high stacking layer so
   the popup (its child) floats ABOVE the neighbouring phrase cards — the
   grid cards are positioned siblings painted in DOM order, and without this
   the card below intercepts pointer events over the popup's lower half
   (incl. the report button). */

.token-word-active {
  z-index: 300;
}

.token-word:active {
  background: var(--accent-olive);
  color: var(--bg-paper);
}

.token-word-active {
  border-bottom: 1px solid var(--accent-olive);
  background: var(--token-highlight-active);
}

.token-plain {
  display: inline;
}

.token-popup {
  position: absolute;
  /* Center under the token; JS adjusts --token-popup-shift to keep popup
       within the viewport on mobile. */
  left: 50%;
  top: 100%;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 16px 20px;
  margin-top: 8px;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  z-index: 100;
  transform: translateX(calc(-50% + var(--token-popup-shift, 0px)));
}

.token-popup::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--shadow-color);
  background: var(--bg-aged);
  z-index: -1;
}

.token-popup-surface {
  font-family: var(--font-serif);
  font-size: 20px;
}

.token-popup-reading {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
}

.token-popup-grammar {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  color: var(--accent-olive);
  margin-top: var(--space-xs);
}

.token-popup-grammar-description {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: var(--space-xs);
}

/* "Wrong translation?" entry inside the token popup (ADR-055): a quiet
   level-0 action line — no frame at rest, muted; hover flips to fg-black.
   Tap target padded to 44px. */

.token-popup-report-sep {
  border-top: 1px solid var(--border-light);
  margin: 12px -4px 0;
}

.token-popup-report {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
  border: none;
  padding: 8px 4px;
  margin-top: 4px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.token-popup-report:hover {
  color: var(--fg-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.token-popup-report:active {
  transform: translateY(1px);
}

.kanji-animation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.kanji-animation-svg {
  width: 109px;
  height: 109px;
  max-width: 100%;
}

.kanji-animation-svg svg {
  max-width: 100%;
  height: auto;
}

.kanji-animation-svg path:not(.bg) {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: kanji-draw 0.4s linear forwards;
}

.kanji-animation-svg path.bg {
  stroke: var(--fg-light);
  stroke-width: 0.5;
}

@keyframes kanji-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.kanji-frames-svg {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.kanji-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 109px;
  height: 109px;
  font-size: 64px;
  font-family: var(--font-serif);
}

.kanji-frames-svg svg {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.kanji-frames-svg path.active {
  stroke: var(--fg-black);
}

.kanji-frames-svg path.not.active {
  stroke: var(--fg-light);
}

.kanji-writing-section {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  margin-top: 16px;
}

.kanji-writing-grid {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

/* On mobile, narrow the writing section (including its border-top line)
   so the practice area doesn't stretch edge-to-edge of the card. */

@media (max-width: 639px) {
  .kanji-writing-section {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
  }
}

.sets-page {
  padding: 24px 0;
}

.sets-group {
  margin-bottom: 32px;
}

.markdown-text {
  font-family: var(--font-mono);
  color: var(--fg-black);
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Quiz option texts: Chromium's emergency break (word-break: break-word)
   ignores kinsoku (UAX #14 LB13), letting a wrapped line start with "," ";"
   "!" "、". The .markdown-no-break span (emitted by glue_trailing_punctuation)
   glues a word char to its trailing punctuation; the explicit resets are
   required because the parent's eager breakers are inherited and would
   re-enable breaking inside the span. Verified: leading-punct cases
   13 → 0, overflow 0 → 0 (Playwright matrix, widths 100–200px). */

.markdown-text .markdown-no-break {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.markdown-text h1,
.markdown-text h2,
.markdown-text h3,
.markdown-text h4,
.markdown-text h5,
.markdown-text h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  margin: 0.5em 0;
  color: var(--fg-black);
}

.markdown-text h1 {
  font-size: 1.5em;
}

.markdown-text h2 {
  font-size: 1.25em;
}

.markdown-text h3 {
  font-size: 1.1em;
}

.markdown-text h4 {
  font-size: 1em;
}

.markdown-text h5 {
  font-size: 0.9em;
}

.markdown-text h6 {
  font-size: 0.8em;
}

.markdown-text p {
  margin: 0.5em 0;
}

.markdown-text strong {
  font-weight: 600;
}

.markdown-text em {
  font-style: italic;
}

.markdown-text ul,
.markdown-text ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.markdown-text li {
  margin: 0.25em 0;
}

.markdown-text code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-aged);
  padding: 0.1em 0.3em;
}

.markdown-text pre {
  background: var(--bg-aged);
  padding: 0.75em;
  overflow-x: auto;
  margin: 0.5em 0;
}

.markdown-text pre code {
  background: none;
  padding: 0;
}

.markdown-text a {
  color: var(--accent-olive);
  text-decoration: underline;
}

.markdown-text a:hover {
  color: var(--accent-terracotta);
}

.markdown-text blockquote {
  border-left: 2px solid var(--border-dark);
  padding-left: 1em;
  margin: 0.5em 0;
  color: var(--fg-muted);
  font-style: italic;
}

.markdown-text hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 1em 0;
}

.markdown-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}

.markdown-text th,
.markdown-text td {
  border: 1px solid var(--border-light);
  padding: 0.5em;
  text-align: left;
}

.markdown-text th {
  background: var(--bg-aged);
  font-weight: 500;
}

.prose-xs {
  font-size: var(--text-label-sm);
}

.prose-sm {
  font-size: var(--text-body);
}

.prose-lg {
  font-size: var(--text-lg);
}

/* Lesson question block: raise markdown-text to heading-h2 size and rhythm so
   the MarkdownText question path (reversed cards) matches the FuriganaText
   path (non-reversed, inherits heading-h2 clamp). Without this the question
   font-size jumps ~2× between card directions (markdown 18px vs furigana 36px).
   Scoped to the lesson question wrapper so global .markdown-text/.prose-lg
   (grammar, vocabulary, landing) stay untouched. Specificity (0,2,0) beats
   .prose-lg (0,1,0). Shares --heading-h2-size with .heading-h2 to prevent
   drift between the two render paths. */

.lesson-question .markdown-text {
  font-size: var(--heading-h2-size);
  line-height: 1.2;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-light);
  border-top-color: var(--fg-black);
  border-radius: var(--rounded-full);
  animation: spinner-rotate 0.8s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg-paper) 90%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 200;
}

.loading-overlay-message {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  /* Allow the progress string to wrap onto its own line on narrow phones
       instead of splitting mid-phrase (e.g. "0 ИЗ" / "9"). balance distributes
       text evenly across wrapped lines; center keeps it tidy. */
  text-align: center;
  max-width: 90vw;
  line-height: 1.6;
  text-wrap: balance;
}

/* Consent screen content for the first-run resource download (Guideline
   4.2.3(ii)): centered column with title, body copy and the Download button. */

.resource-download-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 32rem;
  padding: 0 1.5rem;
}

/* Load-error screen content (ADR-053): same centered-column geometry as
   the consent card — kept as its own class so the two screens can evolve
   independently. */

.load-error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 32rem;
  padding: 0 1.5rem;
}

/* Progress bar inside the loading overlay — constrained width so the thin
   track stays legible against the full-screen overlay. */

.loading-overlay-progress {
  width: min(320px, 80vw);
}

.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-light);
  border-top-color: currentColor;
  border-radius: var(--rounded-full);
  animation: spinner-rotate 0.8s linear infinite;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.btn-text {
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.btn-text-hidden {
  opacity: 0;
}

.toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
  max-width: 360px;
}

/* Raise toasts above the bottom tab bar on viewports where it is visible
   (<lg). On lg+ the bar is hidden (lg:hidden) so the base offset applies. */

@media (max-width: 1023px) {
  .toast-container {
    bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px));
  }
}

.toast {
  border: 1px solid var(--border-dark);
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-paper);
  box-shadow: 4px 4px 0 var(--border-dark);
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-warning {
  border-left: 4px solid var(--warning);
}

.toast-error {
  border-left: 4px solid var(--error);
}

.toast-info {
  border-left: 4px solid var(--fg-black);
}

.toast-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--fg-muted);
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-close:hover {
  color: var(--fg-black);
}

.toast-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-progress .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--fg-muted);
  border-top-color: transparent;
  border-radius: var(--rounded-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.quiz-option-neutral {
  background: var(--bg-paper);
  border-color: var(--border-dark);
}

.quiz-option-neutral:hover {
  background: var(--bg-aged);
}

.quiz-option-correct {
  background: var(--bg-warm);
  border-color: var(--success);
  color: var(--success);
}

.quiz-option-wrong {
  background: var(--bg-warm);
  border-color: var(--error);
  color: var(--error);
}

.quiz-option-dimmed {
  background: var(--bg-paper);
  border-color: var(--border-light);
  opacity: 0.5;
}

.quiz-option-hidden {
  display: none;
}

.btn.quiz-option-correct {
  background: var(--bg-warm);
  border-color: var(--success);
  color: var(--success);
}

.btn.quiz-option-correct:hover {
  background: var(--bg-warm);
  color: var(--success);
}

.btn.quiz-option-correct::before {
  border-color: var(--success);
}

.btn.quiz-option-wrong {
  background: var(--bg-warm);
  border-color: var(--error);
  color: var(--error);
}

.btn.quiz-option-wrong:hover {
  background: var(--bg-warm);
  color: var(--error);
}

.btn.quiz-option-wrong::before {
  border-color: var(--error);
}

.btn.quiz-option-dimmed {
  background: var(--bg-paper);
  border-color: var(--border-light);
}

.btn.quiz-option-dimmed:hover {
  background: var(--bg-paper);
  color: var(--fg-black);
}

.quiz-option-missed {
  background: var(--bg-warm);
  border: 2px dashed var(--success);
  border-left: 4px solid var(--success);
  position: relative;
}

.quiz-option-correct::after,
.btn.quiz-option-correct::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: var(--success);
  color: var(--bg-paper);
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.quiz-option-wrong::after,
.btn.quiz-option-wrong::after {
  content: "✕";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: var(--error);
  color: var(--bg-paper);
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.quiz-option-missed::before {
  content: "+";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--success);
  color: var(--bg-paper);
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* === Kанадзи Drawing Container === */

.kanji-drawing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* === Canvas стили в стиле проекта === */

/* No border: the canvas sits inside a bordered card both in the lesson
   (writing card) and on the kanji page (section cards), and its own rule
   collided with the card border. The 320px drawing buffer now maps 1:1
   to the CSS box (border-box previously shrank it by the border width).
   The former canvas-wrapper ::after (a decorative offset shadow) never
   rendered: `inset: 4px; z-index: -1` hid it entirely under the opaque
   canvas, so both the rule and its wrapper class were removed. */

.kanji-drawing-canvas {
  background: var(--bg-paper);
  touch-action: none;
  cursor: crosshair;
  width: min(320px, 85vw);
  height: min(320px, 85vw);
}

.kanji-drawing-info {
  text-align: center;
  margin: 15px 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.kanji-drawing-success {
  color: var(--success);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

.kanji-drawing-progress {
  color: var(--fg-muted);
}

.kanji-drawing-controls {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.kanji-drawing-reset-btn {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  color: var(--fg-black);
  cursor: pointer;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper), color var(--anima-duration-normal) var(--anima-ease-paper);
}

.kanji-drawing-reset-btn:hover {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.kanji-drawing-reset-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--border-dark);
  pointer-events: none;
}

.kanji-drawing-loading {
  text-align: center;
  padding: 40px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.kanji-drawing-error {
  text-align: center;
  padding: 40px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.15em;
  color: var(--error);
}

/* ============================================
   ANIMATION SYSTEM - Origa UI
   ============================================

   Использование: добавьте классы вида anima-* к элементам
   Например: <div class="card anima-lift">

   Категории:
   - Standard: anima-press, anima-lift, anima-reveal
   - Hover: anima-card-lift, anima-tag-hover, anima-link-typewriter, anima-btn-press
   - Entrance: anima-modal-enter, anima-backdrop-enter, anima-toast-bounce
   - Exit: anima-modal-exit, anima-backdrop-exit, anima-toast-exit
   - Micro: anima-shake, anima-check-draw, anima-strikethrough
   - Loading: anima-skeleton-paper, anima-spinner-square
   - Japanese: anima-kanji-reveal, anima-furigana-show
   - Layout: anima-stagger, anima-page-fade, anima-slide-up
   - Special: anima-pulse-subtle, anima-focus-ring

   Accessibility: prefers-reduced-motion отключает все анимации
   ============================================
*/

/* === STANDARD ANIMATION SYSTEM === */

/* Press — для кнопок/действий ("нажатие клавиши пишущей машинки") */

.anima-press {
  transition: transform var(--anima-duration-fast) var(--anima-ease-paper);
}

.anima-press:active {
  transform: translateY(1px) scale(0.98);
}

/* Lift — для карточек/объектов ("поднятие листа бумаги") */

.anima-lift {
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper),
        box-shadow var(--anima-duration-normal) var(--anima-ease-paper);
}

.anima-lift:hover {
  transform: translateY(-2px);
}

.anima-lift:active {
  transform: translateY(0);
}

/* Reveal — для навигации ("маркер на тексте", без движения) */

.anima-reveal {
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper),
        background-color var(--anima-duration-normal) var(--anima-ease-paper);
}

/* === 1. HOVER АНИМАЦИИ === */

/* Deprecated: use anima-lift */

/* Карточка приподнимается при hover */

.anima-card-lift {
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper),
        box-shadow var(--anima-duration-normal) var(--anima-ease-paper);
}

.anima-card-lift:hover {
  transform: translateY(-2px);
}

.anima-card-lift:hover.card-shadow::after {
  transform: translate(var(--shadow-offset-x), var(--shadow-offset-y));
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

/* Deprecated: use tag-clickable */

/* Тег - наклон при hover */

.anima-tag-hover {
  transition: transform var(--anima-duration-fast) var(--anima-ease-paper);
}

.anima-tag-hover:hover {
  transform: translateY(-1px) rotate(-1deg);
}

/* Ссылка - печатное подчёркивание */

.anima-link-typewriter {
  position: relative;
  text-decoration: none;
}

.anima-link-typewriter::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

.anima-link-typewriter:hover::after {
  transform: scaleX(1);
}

/* Deprecated: use anima-press */

/* Кнопка - нажатие */

.anima-btn-press:active {
  transform: translateY(1px);
  transition: transform var(--anima-duration-fast) var(--anima-ease-paper);
}

/* Аватар - масштабирование при hover */

.anima-avatar-hover {
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper),
        box-shadow var(--anima-duration-normal) var(--anima-ease-paper),
        background-color var(--anima-duration-normal) var(--anima-ease-paper);
  cursor: pointer;
}

.anima-avatar-hover:hover {
  transform: scale(1.08);
  box-shadow: 2px 2px 0 var(--border-dark);
  background: var(--bg-aged);
}

/* === 2. ПОЯВЛЕНИЕ/ИСЧЕЗНОВЕНИЕ === */

/* Модальное окно - вход */

@keyframes anima-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 20px)) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.anima-modal-enter {
  animation: anima-modal-enter var(--anima-duration-entrance) var(--anima-ease-out-expo) forwards;
}

/* Backdrop */

@keyframes anima-backdrop-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.6;
  }
}

.anima-backdrop-enter {
  animation: anima-backdrop-enter var(--anima-duration-slow) ease forwards;
}

/* Toast - улучшенный вход с лёгким bounce */

@keyframes anima-toast-bounce {
  0% {
    opacity: 0;
    transform: translateX(20px) translateY(-10px);
  }

  60% {
    opacity: 1;
    transform: translateX(0) translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

.anima-toast-bounce {
  animation: anima-toast-bounce 0.4s var(--anima-ease-out-back) forwards;
}

/* === 3. ГЛУБИНА И СЛОИ === */

/* === 4. ФОКУС И ВНИМАНИЕ === */

/* Мягкая пульсация */

@keyframes anima-pulse-subtle {
  0%,
    100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.anima-pulse-subtle {
  animation: anima-pulse-subtle 2s ease-in-out infinite;
}

/* Focus ring для keyboard navigation */

.anima-focus-ring:focus-visible {
  outline: 2px solid var(--accent-terracotta);
  outline-offset: 2px;
  transition: outline-offset var(--anima-duration-fast) var(--anima-ease-paper);
}

/* === 5. МИКРОВЗАИМОДЕЙСТВИЯ === */

/* Тряска при ошибке */

@keyframes anima-shake {
  0%,
    100% {
    transform: translateX(0);
  }

  10%,
    30%,
    50%,
    70%,
    90% {
    transform: translateX(-4px);
  }

  20%,
    40%,
    60%,
    80% {
    transform: translateX(4px);
  }
}

.anima-shake {
  animation: anima-shake 0.5s ease;
}

/* Галочка рисуется */

@keyframes anima-check-draw {
  from {
    stroke-dashoffset: 24;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.anima-check-draw {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: anima-check-draw 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Зачёркивание */

.anima-strikethrough {
  position: relative;
}

.anima-strikethrough::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

.anima-strikethrough.active::after {
  transform: scaleX(1);
}

/* === 6. LOADING СОСТОЯНИЯ === */

/* Skeleton с бумажной текстурой - улучшенный */

.anima-skeleton-paper {
  background: linear-gradient(90deg,
            var(--bg-aged) 0%,
            var(--bg-paper) 50%,
            var(--bg-aged) 100%);
  background-size: 200% 100%;
  animation: anima-skeleton-paper 2s ease-in-out infinite;
}

/* Квадратный spinner в стиле проекта */

@keyframes anima-spinner-square {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.anima-spinner-square {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-light);
  animation: anima-spinner-square 1.2s steps(4) infinite;
}

/* === 7. ЯПОНСКАЯ СПЕЦИФИКА === */

/* Появление иероглифа - fade in + scale */

@keyframes anima-kanji-reveal {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.anima-kanji-reveal {
  animation: anima-kanji-reveal var(--anima-duration-slow) var(--anima-ease-paper) forwards;
}

/* Furigana появление */

@keyframes anima-furigana-show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.anima-furigana-show {
  animation: anima-furigana-show var(--anima-duration-fast) ease;
}

/* === 8. STAGGER (каскадное появление) === */

@keyframes anima-stagger-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.anima-stagger>* {
  opacity: 0;
  animation: anima-stagger-fade var(--anima-duration-slow) var(--anima-ease-out-expo) forwards;
}

.anima-stagger>*:nth-child(1) {
  animation-delay: 0ms;
}

.anima-stagger>*:nth-child(2) {
  animation-delay: 50ms;
}

.anima-stagger>*:nth-child(3) {
  animation-delay: 100ms;
}

.anima-stagger>*:nth-child(4) {
  animation-delay: 150ms;
}

.anima-stagger>*:nth-child(5) {
  animation-delay: 200ms;
}

.anima-stagger>*:nth-child(6) {
  animation-delay: 250ms;
}

.anima-stagger>*:nth-child(7) {
  animation-delay: 300ms;
}

.anima-stagger>*:nth-child(8) {
  animation-delay: 350ms;
}

.anima-stagger>*:nth-child(9) {
  animation-delay: 400ms;
}

.anima-stagger>*:nth-child(10) {
  animation-delay: 450ms;
}

/* === 9. PAGE TRANSITIONS === */

@keyframes anima-page-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.anima-page-fade {
  animation: anima-page-fade var(--anima-duration-slow) ease forwards;
}

/* Mobile-friendly slide up */

@keyframes anima-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.anima-slide-up {
  animation: anima-slide-up var(--anima-duration-entrance) var(--anima-ease-out-expo) forwards;
}

/* === 10. ACCESSIBILITY === */

/* Отключение анимаций для prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  *,
    *::before,
    *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Класс для полного отключения анимаций */

.anima-none {
  animation: none !important;
  transition: none !important;
}

/* === EXIT ANIMATIONS === */

/* Modal exit - обратное к появлению */

@keyframes anima-modal-exit {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 20px)) scale(0.98);
  }
}

.anima-modal-exit {
  animation: anima-modal-exit 0.25s ease-in forwards;
}

/* Backdrop exit - fade out */

@keyframes anima-backdrop-exit {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 0;
  }
}

.anima-backdrop-exit {
  animation: anima-backdrop-exit 0.2s ease forwards;
}

/* Toast exit - slide out */

@keyframes anima-toast-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.anima-toast-exit {
  animation: anima-toast-exit 0.2s ease-in forwards;
}

/* === CONNECTIVITY BANNER === */

.connectivity-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--warning);
  color: var(--bg-paper);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-dark);
  animation: slideDown 0.3s ease-out;
}

.banner-icon {
  font-size: var(--text-sm);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Searchable dropdown overrides */

.searchable .dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
}

/* === AUDIT FIX: Component-specific styles === */

/* Alert */

.alert-title {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.alert-message {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin-top: 4px;
}

/* Toast */

.toast-content {
  flex: 1;
}

.toast-title {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toast-message {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin-top: 4px;
}

/* Progress */

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.progress-value {
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

/* Modal/Drawer */

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.modal-close-btn {
  color: var(--fg-muted);
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
}

.modal-close-btn:hover {
  color: var(--fg-black);
}

/* Stepper */

@media (min-width: 1280px) {
  .stepper-label {
    display: block;
  }
}

.stepper-line-inactive {
  opacity: 0.3;
}

/* Typography */

.heading-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.2;
  /* `word-break: break-words` is an invalid keyword — the declaration
       was silently dropped and long words overflowed the card. */
  overflow-wrap: anywhere;
  letter-spacing: -0.02em;
}

.heading-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--heading-h2-size);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.heading-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
}

.heading-h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.125rem;
}

.heading-h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
}

.heading-h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.875rem;
}

.text-primary {
  color: var(--fg-black);
}

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

.text-olive {
  color: var(--accent-olive);
}

.display-text {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--fg-black);
}

/* Layout */

.page-layout-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

@media (min-width: 640px) {
  .page-layout-centered {
    padding: 24px;
  }
}

.page-layout-full {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

@media (min-width: 640px) {
  .page-layout-full {
    padding: 16px;
  }
}

.page-layout-compact {
  padding: 16px;
}

@media (min-width: 640px) {
  .page-layout-compact {
    padding: 24px;
  }
}

.card-layout-small {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.card-layout-medium {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
}

.card-layout-large {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.card-layout-adaptive {
  width: 100%;
}

.card-layout-content {
  background: var(--bg-cream);
  padding: 16px;
}

@media (min-width: 640px) {
  .card-layout-content {
    padding: 24px;
  }
}

@media (min-width: 1024px) {
  .card-layout-content {
    padding: 32px;
  }
}

/* Accordion */

.accordion-title {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.accordion-body {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--fg-muted);
}

/* Collapsible */

.collapsible-toggle {
  margin-top: 4px;
}

/* === MISSING UTILITY CLASSES === */

/* Accessibility */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Line clamp */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pointer events */

.pointer-events-none {
  pointer-events: none;
}

/* Banner text */

.banner-text {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Kanji loading */

.kanji-loading {
  text-align: center;
  padding: 40px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Tab button */

.tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tab-button-icon {
  font-size: 20px;
  line-height: 1;
}

.tab-button-text {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

.tab-button-active {
  color: var(--accent-olive);
}

.tab-button-inactive {
  color: var(--fg-muted);
}

/* Reading group */

.reading-group {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.reading-main {
  flex: 1;
  min-width: 0;
}

.reading-kanji {
  width: 64px;
  flex-shrink: 0;
  padding-top: 4px;
}

.reading-furigana {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reading-tag {
  display: inline-block;
  padding: 4px 8px;
  background: var(--bg-aged);
  font-size: var(--text-body);
}

/* Rare reading: visually de-emphasised (transparent bg, muted fg) but still
   WCAG-AA readable (fg-muted #6b665a on surface ≈ 4.8:1). The light border
   keeps the token legible against bg-paper where the rare readings cluster. */

.reading-tag--rare {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border-light);
}

.reading-rare-hint {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}

/* Progress inline width helper */

.progress-inline {
  transition: width 0.5s ease;
}

/* Accordion max-height transition */

.accordion-max-height {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-max-height-open {
  max-height: 240px;
}

/* Skeleton base */

.skeleton-base {
  background: linear-gradient(90deg,
            var(--bg-aged) 0%,
            var(--bg-paper) 50%,
            var(--bg-aged) 100%);
  background-size: 200% 100%;
  animation: anima-skeleton-paper 2s ease-in-out infinite;
}

/* App skeleton */

.app-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-cream);
}

.app-skeleton-content {
  width: 100%;
  max-width: 800px;
  padding: 24px;
}

.app-skeleton-card {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
}

.app-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-skeleton-line {
  height: 16px;
}

/* Audio buttons */

.audio-buttons {
  display: flex;
  gap: 8px;
  padding: 4px;
}

.audio-btn {
  color: var(--fg-muted);
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
}

.audio-btn:hover {
  color: var(--fg-black);
}

.audio-btn:disabled {
  opacity: 0.3;
}

.card-history-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* modal-content padding (72px) + modal-header (~48px) + buffer (~40px) */
  max-height: calc(85vh - 160px);
  overflow: hidden;
}

.card-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-aged);
}

.card-history-date {
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.card-history-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-align: center;
}

.card-history-empty {
  padding: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--fg-muted);
}

/* Chart */

.chart-container {
  font-family: var(--font-mono);
  overflow: hidden;
}

.chart-label {
  font-size: var(--text-label-sm);
}

/* Delete button */

.delete-button {
  cursor: pointer;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
}

.delete-button:hover {
  opacity: 0.7;
}

.delete-button svg {
  width: 16px;
  height: 16px;
}

/* Favorite button */

.favorite-button {
  cursor: pointer;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
}

.favorite-button:hover {
  opacity: 0.7;
}

.favorite-button svg {
  width: 16px;
  height: 16px;
}

/* History button */

.history-button {
  cursor: pointer;
  transition: opacity var(--anima-duration-normal) var(--anima-ease-paper);
}

.history-button:hover {
  opacity: 0.7;
}

.history-button svg {
  width: 16px;
  height: 16px;
}

/* Confirm modal (shared confirm pattern; DeleteConfirmModal wraps it) */

.confirm-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.confirm-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Drawer header */

.drawer-header {
  font-family: var(--font-serif);
  font-size: 24px;
  margin-top: 4px;
}

/* OCR loading stage */

.ocr-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ocr-stage-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ocr-stage-title {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 500;
}

.ocr-stage-status {
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.ocr-stage-description {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
}

.ocr-stage-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ocr-stage-indicator {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ocr-stage-content {
  flex: 1;
  min-width: 0;
}

.ocr-stage-icon-success {
  color: var(--success);
}

.ocr-stage-icon-error {
  color: var(--error);
}

.ocr-stage-icon-pending {
  color: var(--fg-muted);
}

.ocr-stage-text-pending {
  color: var(--fg-muted);
}

.ocr-stage-text-processing {
  color: var(--accent-olive);
}

.ocr-stage-text-success {
  color: var(--success);
}

.ocr-stage-text-error {
  color: var(--error);
}

.ocr-stage-bg-warm {
  background: var(--bg-warm);
}

.ocr-stage-border-pending {
  border-color: var(--border-light);
}

.ocr-stage-border-processing {
  border-color: var(--accent-olive);
}

.ocr-stage-border-success {
  border-color: var(--success);
}

.ocr-stage-border-error {
  border-color: var(--error);
}

/* Update drawer */

.update-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--backdrop);
}

.update-drawer-content {
  width: 100%;
  max-width: 480px;
  margin: 0 16px;
  padding: 24px;
  background: var(--bg-cream);
  border: 1px solid var(--border-dark);
}

.update-drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.update-drawer-icon {
  width: 24px;
  height: 24px;
}

.update-drawer-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-olive);
}

.update-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.update-drawer-info {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--fg-muted);
}

/* Typography extras */

.text-xs {
  font-size: var(--text-body);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-xl {
  font-size: 20px;
}

.text-2xl {
  font-size: 24px;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-widest {
  letter-spacing: 0.15em;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

/* Layout extras */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-4 {
  width: 16px;
}

.h-4 {
  height: 16px;
}

.w-5 {
  width: 20px;
}

.h-5 {
  height: 20px;
}

.w-16 {
  width: 64px;
}

.h-16 {
  height: 64px;
}

.min-w-0 {
  min-width: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.inline-block {
  display: inline-block;
}

.grid {
  display: grid;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.items-start {
  align-items: flex-start;
}

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

.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.gap-12 {
  gap: 48px;
}

.space-y-1>*+* {
  margin-top: 4px;
}

.space-y-2>*+* {
  margin-top: 8px;
}

.space-y-4>*+* {
  margin-top: 16px;
}

.space-y-5>*+* {
  margin-top: 20px;
}

.p-1 {
  padding: 4px;
}

.p-4 {
  padding: 16px;
}

.p-6 {
  padding: 24px;
}

.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.py-16 {
  padding-top: 64px;
  padding-bottom: 64px;
}

.mt-0 {
  margin-top: 0;
}

.mt-0\.5 {
  margin-top: 2px;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-24 {
  margin-top: 96px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-8 {
  margin-bottom: 32px;
}

.mb-12 {
  margin-bottom: 48px;
}

.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}

.-mb-px {
  margin-bottom: -1px;
}

.rounded {
  border-radius: var(--rounded-sm);
}

.rounded-xl {
  border-radius: var(--rounded-lg);
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.leading-relaxed {
  line-height: 1.625;
}

.text-\[var\(--fg-muted\)\] {
  color: var(--fg-muted);
}

.text-\[var\(--fg-black\)\] {
  color: var(--fg-black);
}

.text-\[var\(--accent-olive\)\] {
  color: var(--accent-olive);
}

.text-\[var\(--accent-terracotta\)\] {
  color: var(--accent-terracotta);
}

.text-\[var\(--success\)\] {
  color: var(--success);
}

.text-\[var\(--error\)\] {
  color: var(--error);
}

.text-\[var\(--fg-light\)\] {
  color: var(--fg-light);
}

.bg-\[var\(--bg-aged\)\] {
  background: var(--bg-aged);
}

.bg-\[var\(--bg-warm\)\] {
  background: var(--bg-warm);
}

.bg-\[var\(--bg-paper\)\] {
  background: var(--bg-paper);
}

.bg-\[var\(--bg-cream\)\] {
  background: var(--bg-cream);
}

.bg-black\/80 {
  background: color-mix(in srgb, var(--fg-black) 80%, transparent);
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-\[var\(--border-light\)\] {
  border-color: var(--border-light);
}

.border-\[var\(--border-dark\)\] {
  border-color: var(--border-dark);
}

.border-\[var\(--accent-olive\)\] {
  border-color: var(--accent-olive);
}

.border-\[var\(--success\)\] {
  border-color: var(--success);
}

.border-\[var\(--error\)\] {
  border-color: var(--error);
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:text-\[var\(--fg-black\)\]:hover {
  color: var(--fg-black);
}

.hover\:text-\[var\(--accent-terracotta\)\]:hover {
  color: var(--accent-terracotta);
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

@media (min-width: 640px) {
  .sm\:px-6 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .lg\:px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* JLPT Step Options */

.jlpt-option {
  border: 1px solid var(--border-dark);
}

.jlpt-option.selected {
  border: 2px solid var(--accent-olive);
  background: var(--bg-warm);
}

.jlpt-option-radio {
  border: 1px solid var(--border-dark);
}

.jlpt-option.selected .jlpt-option-radio {
  border: 1px solid var(--accent-olive);
}

.jlpt-option-radio-check {
  inset: 3px;
  background: var(--fg-black);
}

/* CardActionBar */

.card-action-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 32px;
}

.card-action-status {
  display: flex;
  padding: 4px 0 0;
}

.card-action-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.card-action-toolbar .icon-btn {
  width: 32px;
  height: 32px;
}

.card-action-bar .tag {
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-black);
  cursor: pointer;
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper),
        border-color var(--anima-duration-normal) var(--anima-ease-paper),
        color var(--anima-duration-normal) var(--anima-ease-paper);
}

.icon-btn:hover {
  background: var(--bg-aged);
  border-color: var(--border-dark);
}

.icon-btn-danger:hover {
  color: var(--error);
  border-color: var(--error);
}

@media (max-width: 639px) {
  .icon-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

@media (max-width: 360px) {
  .bottom-tab-item-label {
    display: none;
  }
}

/* ============================================
   THEME SYSTEM
   ============================================
   Default (light) theme lives in :root.
   Future themes override via data-theme attribute:
   <html data-theme="dark">
   ============================================
*/

[data-theme] {
  /* Structural hook: all tokens inherit from :root by default.
       Override specific --* variables in named themes below. */
}

[data-theme="dark"] {
  /* Placeholder: add dark palette overrides here */
}

/* TodayOverview status grid */

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.status-card {
  border: 1px solid var(--border-dark);
  padding: 16px;
  background: var(--bg-paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-number {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--fg-black);
  display: flex;
  align-items: baseline;
}

.status-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-left: auto;
}

.status-label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.status-progress {
  height: 4px;
  background: var(--bg-aged);
  width: 100%;
  margin-top: 4px;
}

.status-progress-fill {
  height: 100%;
  transition: width 0.5s ease;
}

/* Status card --new */

.status-card--new .status-progress-fill {
  background: var(--accent-gold);
}

.status-card--new .status-number {
  color: var(--accent-gold);
}

.status-card--new .status-label {
  color: var(--accent-gold);
}

/* Status card --learned */

.status-card--learned .status-progress-fill {
  background: var(--accent-sage);
}

.status-card--learned .status-number {
  color: var(--accent-sage);
}

.status-card--learned .status-label {
  color: var(--accent-sage);
}

/* Status card --in-progress */

.status-card--in-progress .status-progress-fill {
  background: var(--accent-olive);
}

.status-card--in-progress .status-number {
  color: var(--accent-olive);
}

.status-card--in-progress .status-label {
  color: var(--accent-olive);
}

/* Status card --difficult */

.status-card--difficult {
  border: 2px solid var(--accent-terracotta);
}

.status-card--difficult .status-progress-fill {
  background: var(--accent-terracotta);
}

.status-card--difficult .status-number {
  color: var(--accent-terracotta);
}

.status-card--difficult .status-label {
  color: var(--accent-terracotta);
}

/* === Grammar Detail Page — Redesigned === */

.grammar-detail-container {
  padding: 24px 32px;
  /* Leave room for the bottom tab bar on mobile (60px + safe-area) */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.grammar-detail-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}

.grammar-detail-top-bar .fsrs-bar {
  width: 80px;
}

.grammar-breadcrumbs {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.grammar-breadcrumbs a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
}

.grammar-breadcrumbs a:hover {
  color: var(--fg-black);
}

.grammar-breadcrumbs-separator {
  color: var(--fg-light);
}

.grammar-breadcrumbs-current {
  color: var(--fg-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grammar-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
}

.grammar-detail-left-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.grammar-detail-right-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.grammar-detail-hero-card {
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  padding: 24px;
  position: relative;
}

.grammar-detail-hero-card::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.grammar-detail-hero-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grammar-detail-hero-kanji {
  display: none;
}

.grammar-detail-hero-kanji::after {
  display: none;
}

.grammar-detail-hero-form {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 16px);
  line-height: 1.4;
  color: var(--fg-muted);
}

.grammar-detail-hero-info {
  flex: 1;
  min-width: 0;
}

.grammar-detail-hero-meaning {
  font-family: var(--font-serif);
  /* Same role as .kanji-detail-hero-meaning — the two detail heroes
       must not drift apart in size (32px drowned long RU rule titles). */
  font-size: var(--text-lg, 18px);
  color: var(--fg-black);
  line-height: 1.2;
}

.grammar-detail-hero-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  flex-shrink: 0;
}

.grammar-detail-hero-badge .tag {
  font-size: 10px;
  padding: 4px 8px;
}

.grammar-detail-hero-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
}

.grammar-detail-hero-actions .fsrs-bar {
  width: 80px;
}

.grammar-detail-section-card {
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  padding: 24px;
  position: relative;
}

/* On mobile the section cards are already inside the lesson card (which has
   its own border + shadow). The nested border + ::after shadow create
   visually heavy double-framing that eats horizontal space on a narrow
   phone. Strip the frame down to just a title-divider so content gets
   maximum useful width. */

@media (max-width: 639px) {
  .grammar-detail-section-card {
    border: none;
    padding: 0 2px;
    background: transparent;
  }

  .grammar-detail-section-card::after {
    display: none;
  }
}

.grammar-detail-section-card::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.grammar-detail-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fg-muted);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.grammar-detail-section {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border-light);
}

/* Structured grammar nuances (schema v2): wrong → correct pairs + notes.
   The data layer carries no presentation markers; visual grammar lives
   here. No radius, no blur shadows — hard offset shadows only. */

.grammar-nuances {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grammar-nuance-mistake {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.grammar-nuance-wrong {
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.grammar-nuance-arrow {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
}

.grammar-nuance-correct {
  color: var(--fg-black);
}

.grammar-nuance-mistake-note {
  margin-top: -6px;
  color: var(--fg-muted);
  font-size: 0.9em;
  border-left: 2px solid var(--border-light);
  padding-left: 10px;
}

.grammar-nuance-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grammar-nuance-note-item {
  color: var(--fg-muted);
  padding-left: 14px;
  position: relative;
}

.grammar-nuance-note-item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--border-dark);
}

/* Warnings lifted out of the explanation markdown (schema v2). */

.grammar-warnings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.grammar-warning {
  border-left: 3px solid var(--border-dark);
  background: var(--bg-aged);
  padding: 12px 14px;
}

/* Related patterns resolved by rule_id (schema v2). */

.grammar-related {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grammar-related-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.grammar-related-chip-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--border-dark);
  padding: 6px 10px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-paper);
}

.grammar-related-chip-link:hover {
  background: var(--bg-aged);
}

/* Chip heading: localized meaning leads in serif — the chip follows the
   same hierarchy as every other grammar surface (#503 UX); the pattern
   inside stays mono via .grammar-related-chip-pattern. */

.grammar-related-chip-title {
  font-family: var(--font-serif);
  color: var(--fg-black);
}

/* Secondary line inside the chip: the bare Japanese pattern under the
   localized heading (#503 UX hierarchy). */

.grammar-related-chip-pattern {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
  color: var(--fg-muted);
  margin-top: 2px;
}

.grammar-related-chip-level {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}

.grammar-related-chip-note {
  font-size: 0.85em;
  color: var(--fg-muted);
  max-width: 280px;
}

/* Grammar badge on lesson cards: the Tag base (uppercase mono, wide
   tracking) is unreadable for a sentence-length meaning, so both spans
   reset it. The localized meaning leads, the pattern trails in mono. */

.grammar-badge-meaning {
  font-family: var(--font-serif);
  font-size: var(--text-sm, 16px);
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg-black);
  margin-right: 8px;
}

.grammar-badge-pattern {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg-muted);
}

.grammar-detail-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .grammar-detail-container {
    padding: 16px;
  }

  .grammar-detail-desktop {
    display: none !important;
  }

  .grammar-detail-mobile {
    display: block !important;
  }

  .grammar-detail-top-bar .card-action-bar {
    display: none;
  }

  .grammar-detail-top-bar .fsrs-metrics {
    display: none;
  }
}

/* === Kanji Detail — Redesigned === */

.kanji-detail-container {
  padding: 24px 32px;
  /* Leave room for the bottom tab bar on mobile (60px + safe-area) */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Breadcrumbs */

.kanji-detail-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}

.kanji-detail-top-bar .fsrs-bar {
  width: 80px;
}

.kanji-breadcrumbs {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.kanji-breadcrumbs a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--anima-duration-normal) var(--anima-ease-paper);
}

.kanji-breadcrumbs a:hover {
  color: var(--fg-black);
}

.kanji-breadcrumbs-separator {
  color: var(--fg-light);
}

.kanji-breadcrumbs-current {
  color: var(--fg-black);
}

/* Desktop Grid */

.kanji-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.kanji-detail-left-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kanji-detail-practice-cell {
  display: flex;
  flex-direction: column;
}

.kanji-detail-practice-cell > .kanji-detail-section-card {
  flex: 1;
}

.kanji-detail-stroke-cell {
  grid-column: 1 / -1;
}

/* Hero Card */

.kanji-detail-hero-card {
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  padding: 24px;
  position: relative;
}

.kanji-detail-hero-card::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.kanji-detail-hero-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.kanji-detail-hero-kanji {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  position: relative;
  font-family: var(--font-serif);
  font-size: 56px;
  flex-shrink: 0;
}

.kanji-detail-hero-kanji::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.kanji-detail-hero-info {
  flex: 1;
  min-width: 0;
}

.kanji-detail-hero-meaning {
  font-family: var(--font-serif);
  font-size: var(--text-lg, 18px);
  color: var(--fg-black);
  margin-bottom: 8px;
}

.kanji-detail-hero-readings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kanji-detail-hero-badge {
  flex-shrink: 0;
}

.kanji-detail-hero-badge .tag {
  font-size: 10px;
  padding: 4px 8px;
}

.kanji-detail-hero-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
}

.kanji-detail-hero-actions .fsrs-bar {
  width: 80px;
}

/* Section Card */

.kanji-detail-section-card {
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  padding: 24px;
  position: relative;
}

.kanji-detail-section-card::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.kanji-detail-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm, 11px);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fg-muted);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

/* Vocabulary List */

.kanji-vocab-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kanji-vocab-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-paper);
}

.kanji-vocab-item-kanji {
  font-family: var(--font-serif);
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  flex-shrink: 0;
}

.kanji-vocab-item-reading {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 16px);
  color: var(--fg-black);
  margin-bottom: 2px;
}

.kanji-vocab-item-meaning {
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 11px);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* Desktop / Mobile visibility */

.kanji-detail-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .kanji-detail-container {
    padding: 16px;
  }

  .kanji-detail-desktop {
    display: none !important;
  }

  .kanji-detail-mobile {
    display: block !important;
  }

  .kanji-detail-top-bar .card-action-bar {
    display: none;
  }

  .kanji-detail-top-bar .fsrs-metrics {
    display: none;
  }

  /* Compact reading groups on phones: shrink the ON/KUN label column so
       reading tags have room to sit side-by-side in a row instead of
       stacking one-per-line. */

  .kanji-detail-hero-readings .reading-group {
    gap: 8px;
  }

  .kanji-detail-hero-readings .reading-kanji {
    width: 36px;
  }

  .kanji-detail-hero-readings .reading-furigana {
    gap: 4px;
  }
}

/* Legacy section separator (used in mobile tabs) */

.kanji-detail-section {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border-light);
}

/* === Kanji Grid (Add Kanji Drawer) === */

.kanji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.kanji-grid-tile {
  position: relative;
  border: 1px solid var(--border-dark);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-paper);
  transition: background-color var(--anima-duration-normal) var(--anima-ease-paper);
}

.kanji-grid-tile:hover {
  background: var(--bg-aged);
}

.kanji-grid-tile--selected {
  border-color: var(--accent-olive);
  background: var(--bg-warm);
}

.kanji-grid-tile--known {
  opacity: 0.45;
}

.kanji-grid-tile-char {
  font-family: var(--font-serif);
  font-size: 24px;
  display: block;
  line-height: 1.2;
}

.kanji-grid-tile-meaning {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanji-grid-tile-check {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  color: var(--accent-olive);
  font-weight: bold;
}

/* === Kanji Card Item — Redesigned === */

.kanji-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  position: relative;
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

.kanji-card::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.kanji-card:hover {
  transform: translateY(-2px);
}

.kanji-card-link {
  display: flex;
  flex: 1;
  padding: 10px 20px;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.kanji-card-kanji-box {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  flex-shrink: 0;
  position: relative;
}

.kanji-card-kanji-box::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.kanji-card-kanji-char {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--fg-black);
}

.kanji-card-content {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 4px;
}

.kanji-card-answer {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 16px);
  color: var(--fg-black);
  line-height: 1.4;
}

.kanji-card-compact-readings {
  font-family: var(--font-mono);
  font-size: var(--text-xs, 14px);
  color: var(--fg-muted);
  line-height: 1.4;
  letter-spacing: 0.05em;
  /* Preview only — long reading lists ellipsis to one line. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanji-card-radicals {
  font-family: var(--font-mono);
  font-size: var(--text-2xs, 11px);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kanji-card-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0 20px;
}

.kanji-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
}

.kanji-card-tag {
  flex-shrink: 0;
}

.kanji-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* === Kanji Card Badge === */

.kanji-card-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  z-index: 10;
}

.kanji-card-badge .tag {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.1em;
}

/* === Word Card Item — Redesigned === */

.word-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  position: relative;
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

.word-card::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.word-card:hover {
  transform: translateY(-2px);
}

.word-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  gap: 12px;
}

.word-card-word-box {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  position: relative;
  padding: 8px 16px;
}

.word-card-word-box::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.word-card-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 4px;
}

.word-card-meaning {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 16px);
  color: var(--fg-black);
  line-height: 1.4;
}

.word-card-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0 20px;
}

.word-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
}

.word-card-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  z-index: 10;
}

.word-card-badge .tag {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.1em;
}

.word-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.word-translations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.word-translations-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.word-translations-item {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 16px);
  color: var(--fg-black);
  line-height: 1.5;
}

.word-translations-desc {
  font-family: var(--font-serif);
  font-size: var(--text-sm, 16px);
  color: var(--fg-muted);
  font-style: italic;
  line-height: 1.5;
  padding-top: 4px;
  border-top: 1px solid var(--border-light);
}

/* === Lesson Answer Translations Override === */

.lesson-answer .word-translations-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lesson-answer .word-translations-item {
  font-size: var(--text-lg, 18px);
  line-height: 1.3;
  margin-bottom: 2px;
}

.lesson-answer .word-translations-desc {
  border-top: none;
  border-left: 3px solid var(--accent-olive);
  background: var(--bg-secondary);
  padding: 8px 12px;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-serif);
  font-size: var(--text-sm, 16px);
  color: var(--fg-muted);
}

/* === Phrase Card Item — Redesigned === */

.phrase-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  position: relative;
  /* Hover lift via `top`, NOT transform: transform would create a
       stacking context on hover and hoist this card above the translator
       popup of the previous card (its z-index is scoped inside that card's
       context) — the popup buttons became unclickable whenever the pointer
       path crossed this card. */
  transition: top var(--anima-duration-normal) var(--anima-ease-paper);
}

.phrase-card:hover {
  top: -2px;
}

.phrase-card:active {
  top: 0;
}

.phrase-card::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.phrase-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 20px;
  gap: 8px;
}

.phrase-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.phrase-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.phrase-card-phrase {
  font-family: var(--font-serif);
  font-size: var(--text-lg, 20px);
  line-height: 1.3;
  color: var(--fg-black);
  flex: 1;
  min-width: 0;
}

.phrase-card-audio {
  flex-shrink: 0;
}

.phrase-card-audio .audio-player-btn {
  padding: 8px;
}

.phrase-card-audio .audio-player-btn svg {
  width: 1.2em;
  height: 1.2em;
}

.phrase-card-content {
  flex: 0 1 auto;
  min-width: 0;
}

.phrase-meaning-line {
  margin: 0;
}

.phrase-meaning-line p {
  margin: 0;
}

.phrase-meaning-line .prose,
.phrase-meaning-line.prose {
  margin: 0;
  padding: 0;
}

.phrase-card-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0 20px;
}

.phrase-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
}

.phrase-card-badge {
  z-index: 10;
}

.phrase-card-badge .tag {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.1em;
}

.phrase-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* === Grammar Card Item — Redesigned === */

.grammar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-paper);
  border: 1px solid var(--border-dark);
  position: relative;
  transition: transform var(--anima-duration-normal) var(--anima-ease-paper);
}

.grammar-card::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--shadow-offset-y));
  right: calc(-1 * var(--shadow-offset-x));
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.grammar-card:hover {
  transform: translateY(-2px);
}

.grammar-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  justify-content: center;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.grammar-card-rule-box {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  background: var(--bg-paper);
  position: relative;
  padding: 12px 16px;
}

.grammar-card-rule-box::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-dark);
  z-index: -1;
  background: var(--bg-aged);
}

.grammar-card-content {
  padding: 0 20px 10px;
}

.grammar-card-heading {
  font-family: var(--font-serif);
  font-size: var(--text-base, 18px);
  color: var(--fg-black);
  line-height: 1.4;
}

.grammar-card-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0 20px;
}

.grammar-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
}

.grammar-card-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  z-index: 10;
}

.grammar-card-badge .tag {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.1em;
}

.grammar-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* === Studied Today Cards — compact rhythm === */

/* The home "studied today" cards stack a JP word and its translation;
   the default .markdown-text p margins (0.5em top and bottom) inflated
   the padding-to-content gap and doubled the word-translation spacing
   (owner report). Scoped zeroing — both markdown blocks (JP line and
   description) compact uniformly; spacing is carried by the layout
   utilities in the component (mt-0.5 / mt-1). */

.recent-study-card .markdown-text p {
  margin: 0;
}

/* === FSRS Metrics Component === */

/* Container compact — stacked vertically */

.fsrs-metrics {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Expanded container */

.fsrs-metrics--expanded {
  gap: 16px;
}

/* Single compact metric */

.fsrs-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* Expanded metric */

.fsrs-metric--expanded {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fsrs-metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Label */

.fsrs-label {
  color: var(--fg-light);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Compact label column — min-width keeps bars aligned without clipping long labels */

.fsrs-metric .fsrs-label {
  min-width: 40px;
  text-align: right;
}

/* Fill-bar */

.fsrs-bar {
  width: 44px;
  height: 4px;
  background: var(--bg-aged);
  position: relative;
  flex-shrink: 0;
}

.fsrs-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--fsrs-fill, 0%);
  transition: width 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fsrs-bar--expanded {
  flex: 1;
  height: 6px;
  width: auto;
}

/* Fill colors */

.fsrs-bar--olive::before {
  background: var(--accent-olive);
}

.fsrs-bar--gold::before {
  background: var(--accent-gold);
}

.fsrs-bar--terracotta::before {
  background: var(--accent-terracotta);
}

/* Value */

.fsrs-value {
  font-variant-numeric: tabular-nums;
  color: var(--fg-black);
  text-align: right;
}

.fsrs-value--none {
  color: var(--fg-light);
}

.fsrs-value--date {
  color: var(--fg-black);
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* Responsive — mobile cards */

@media (max-width: 640px) {
  .fsrs-metrics {
    gap: 2px;
  }

  .fsrs-bar {
    width: 32px;
  }

  .fsrs-label {
    font-size: 9px;
  }
}

/* === PROFILE PAGE LAYOUT === */

.profile-layout {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
  overflow-x: hidden;
  min-width: 0;
}

@media (min-width: 640px) {
  .profile-layout {
    gap: 32px;
    padding-bottom: 32px;
  }
}

.profile-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 0 0;
}

.profile-breadcrumbs-label {
  color: var(--fg-muted);
}

.profile-breadcrumbs-separator {
  color: var(--fg-light);
}

.profile-breadcrumbs-current {
  color: var(--fg-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-muted {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .profile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}

.profile-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.autosave-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--fg-muted);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

.autosave-status--saved {
  color: var(--success);
}

.autosave-status--error {
  color: var(--error);
}

.autosave-retry {
  cursor: pointer;
  text-decoration: underline;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.15em;
  background: none;
  border: none;
  padding: 0;
  color: var(--error);
}

.danger-zone-card {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--error);
  padding: 24px;
}

.danger-zone-card::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--error);
  background: var(--bg-aged);
  z-index: -1;
  opacity: 0.5;
}

.danger-zone-title {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--error);
  margin-bottom: 16px;
}

.danger-zone-btn {
  background: var(--bg-warm);
}

.danger-zone-btn:hover {
  background: var(--fg-black);
  color: var(--bg-paper);
}

.danger-zone-btn--delete {
  background: var(--bg-warm);
  color: var(--error);
}

.danger-zone-btn--delete:hover {
  background: var(--error);
  color: var(--bg-paper);
}

.profile-section-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-danger-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* No border here by design: the only production consumer of .legal-card is
   the Profile page, where it sits inside a bordered <Card> — an own border
   would draw a second frame (double-frame bug). The Login page renders the
   borderless .legal-links row instead and never uses this class. */

.legal-card {
  position: relative;
  background: var(--bg-paper);
  padding: 24px;
}

.legal-card__title {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-black);
  margin-bottom: 16px;
}

.legal-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-links__item {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.legal-links__item:hover {
  color: var(--fg-black);
}

/* Onboarding scoring card: stabilise question area and answer area height
   so the Know/Don't-Know buttons don't jump when card content varies between
   card types (grammar has no readings, vocabulary has readings + answer). */

.scoring-card-question-area {
  min-height: 80px;
}

.scoring-card-answer-area {
  min-height: 60px;
}

/* ==========================================================================
   Feedback modal (issue #414, ADR-055)
   ========================================================================== */

/* Subject plate: the content being reported (level-2 surface: light border,
   aged background — a service block, not a card). */

.feedback-subject {
  background: var(--bg-aged);
  border: 1px solid var(--border-light);
  padding: 12px 16px;
  margin-bottom: var(--space-md);
}

.feedback-subject__surface {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.2;
}

.feedback-subject__reading {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
  margin-top: 4px;
}

.feedback-subject__context {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feedback-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-black);
}

.feedback-label__required {
  color: var(--accent-terracotta);
  margin-left: 2px;
}

.feedback-offline-hint,
.feedback-info {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
  border-left: 4px solid var(--accent-gold);
  padding: 8px 12px;
  background: var(--bg-warm);
}

.feedback-error {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--error);
  border-left: 4px solid var(--error);
  padding: 8px 12px;
  background: var(--bg-warm);
}

.feedback-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-xs);
}

/* Success state: check-draw + auto-close. */

.feedback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
}

.feedback-success__check {
  color: var(--accent-olive);
}

.feedback-success__check path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: anima-check-draw 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.feedback-success__title {
  font-size: 24px;
}

.feedback-success__note {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--fg-muted);
  text-align: center;
}

/* Lesson header report button (ADR-055): same quiet pattern as the mute
   button, tinted with the error color so the affordance reads instantly.
   Active in every card phase — on the question side the report subject is
   built without the answer (spoiler guard). */

.lesson-report-btn {
  padding: 6px;
  color: var(--error);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.lesson-report-btn:hover {
  opacity: 0.75;
}

.lesson-report-btn:active {
  transform: translateY(1px);
}

.last\:border-0:last-child {
  border-width: 0px;
}

.hover\:border-\[var\(--border-light\)\]:hover {
  border-color: var(--border-light);
}

.hover\:bg-\[var\(--bg-aged\)\]:hover {
  background-color: var(--bg-aged);
}

.hover\:bg-\[var\(--bg-hover\)\]:hover {
  background-color: var(--bg-hover);
}

.hover\:bg-\[var\(--bg-paper\)\]:hover {
  background-color: var(--bg-paper);
}

.hover\:bg-\[var\(--error\)\]:hover {
  background-color: var(--error);
}

.hover\:bg-\[var\(--fg-black\)\]:hover {
  background-color: var(--fg-black);
}

.hover\:text-\[var\(--accent-olive\)\]:hover {
  color: var(--accent-olive);
}

.hover\:text-\[var\(--bg-paper\)\]:hover {
  color: var(--bg-paper);
}

.hover\:text-\[var\(--fg-black\)\]:hover {
  color: var(--fg-black);
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (min-width: 640px) {
  .sm\:mb-1 {
    margin-bottom: 0.25rem;
  }

  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:min-h-\[70svh\] {
    min-height: 70svh;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[280px\] {
    min-width: 280px;
  }

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

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .sm\:p-2 {
    padding: 0.5rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:pb-16 {
    padding-bottom: 4rem;
  }

  .sm\:pt-10 {
    padding-top: 2.5rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .sm\:text-\[12px\] {
    font-size: 12px;
  }

  .sm\:tracking-\[0\.1em\] {
    letter-spacing: 0.1em;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none;
  }

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

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

  .lg\:grid-cols-\[minmax\(280px\2c 5fr\)_minmax\(360px\2c 7fr\)\] {
    grid-template-columns: minmax(280px,5fr) minmax(360px,7fr);
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .\32xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .\32xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}