/* Yuejian · mobile-first silver system: solid reading surfaces, glass controls. */
.quick-menu {
  position: absolute;
  z-index: 31;
  top: calc(100% - 5px);
  right: 14px;
  width: min(278px, calc(100vw - 28px));
  padding: 7px;
  color: #292e36;
  border: 1px solid #ffffffd9;
  border-radius: 23px;
  background: #f8f9fbd9;
  box-shadow: 0 16px 36px #30374620, inset 0 1px 0 #ffffffb8;
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}
.quick-menu-item {
  width: 100%;
  min-height: 54px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  border: 0;
  border-radius: 17px;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.quick-menu-item + .quick-menu-item { border-top: 1px solid #dfe3e850; }
.quick-menu-item:hover, .quick-menu-item:focus-visible { background: #e8ebf1b9; }
.quick-menu-item:focus-visible { outline: 2px solid #526d9f; outline-offset: -2px; }
.quick-menu-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: none;
  color: #4d607c;
  border: 1px solid #ffffffce;
  border-radius: 9px;
  background: #eef1f5;
  font-size: 19px;
  font-weight: 400;
}
.quick-menu-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quick-menu-arrow { margin-left: auto; color: #9298a3; font-size: 18px; font-weight: 400; }
.section-manage-button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 2px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #748093;
  font-size: 13px;
  font-weight: 650;
}
.reader-actions .action-icon svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 900px) {
  .quick-menu { left: 15px; right: auto; }
}

@media (max-width: 899px) {
  :root {
    color-scheme: light;
    background: #e9ebef;
    color: #202228;
    --ui-ink: #202228;
    --ui-muted: #606a78;
    --ui-faint: #7d8692;
    --ui-line: #dfe3e9;
    --ui-accent: #4a627f;
    --ui-focus: #526d9f;
    --ui-card: #fff;
  }

  body {
    background: #e9ebef;
  }
  .app-shell {
    background: #f7f8fa;
    box-shadow: 0 20px 52px #4b526316, 0 0 0 1px #ffffff96;
  }
  .app-header {
    height: calc(76px + env(safe-area-inset-top));
    padding-top: calc(16px + env(safe-area-inset-top));
    background: #f7f8fa;
    border-bottom: 1px solid #e9ebef;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .brand-mark {
    color: #fff;
    background: #25282e;
    box-shadow: 0 6px 15px #171a2330, inset 0 1px 0 #ffffff42;
  }
  .brand, .page-title, .section-title, .mine-panel-title { color: var(--ui-ink); }
  .brand-sub, .page-subtitle, .section-meta, .book-meta { color: var(--ui-muted); }
  .eyebrow { color: #62738c; }
  .brand-sub { font-size: 12px; }
  .page-subtitle { font-size: 14px; }
  .eyebrow { font-size: 12px; letter-spacing: .1em; }
  .book-meta, .feature-kicker, .rank-source-time, .rank-book small,
  .directory-link-desc, .mark-detail { font-size: 12px; }
  .feature-detail, .source-note, .source-author { font-size: 13px; }
  .source-pill, .rank-source-badge, .directory-link-type { font-size: 12px; }
  .icon-button {
    color: #303640;
    background: #ffffffbf;
    border: 1px solid #ffffffed;
    box-shadow: 0 5px 13px #555f6b14, inset 0 1px 0 #fff;
  }
  .header-add { width: 44px; height: 44px; }
  .main-view { padding-bottom: 30px; }
  .section-head { align-items: center; }
  .search-input, .note-editor { font-size: 16px; }
  .source-search-cta, .primary-button, .ghost-button,
  .rank-refresh-button, .rank-retry, .rank-auth-retry,
  .rank-refresh-row .account-link, .source-link,
  .account-action, .account-link, .panel-primary, .panel-secondary {
    min-height: 44px;
  }

  /* The book and ranking content is quiet and opaque; only controls use glass. */
  .feature-card, .source-card, .rank-source-panel, .mine-panel, .mark-card,
  .combined-rank-list, .directory-link, .empty-state {
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid #e7eaf0;
    box-shadow: 0 5px 16px #30394c0c;
  }
  .feature-card { border-radius: 22px; }
  .feature-kicker, .feature-arrow, .source-pill, .directory-link-type,
  .rank-position, .rank-origin-link, .mark-book { color: #526b8a; }
  .feature-detail, .source-note, .source-author, .directory-link-desc,
  .rank-source-time, .rank-book small { color: var(--ui-muted); }
  .source-search-cta, .search-input, .ghost-button, .rank-retry,
  .rank-auth-retry, .rank-refresh-row .account-link {
    color: #343b47;
    background: #fff;
    border-color: var(--ui-line);
    box-shadow: 0 2px 8px #4c566b08;
  }
  .search-input:focus { border-color: #7189aa; }
  .empty-state strong, .sync-status, .status-line { color: #52637b; }
  .mine-panel-note, .rank-source-empty, .mark-detail { color: var(--ui-muted); }
  .primary-button, .panel-primary {
    color: #fff;
    background: #292d35;
    box-shadow: 0 4px 12px #1e25321c;
  }
  .import-tile {
    color: #62738c;
    background: #f8f9fb;
    border-color: #bfc8d4;
  }
  .info-banner, .sync-panel, .rank-unavailable, .rank-refresh-status {
    color: #536070;
    background: #edf0f4;
  }
  .rank-link { background: #fff; }
  .rank-refresh-button {
    color: #344761;
    border-color: #d7dfe9;
    background: #fff;
    box-shadow: 0 2px 8px #4a566d0b;
  }
  .rank-source-badge.fresh, .source-pill, .rank-origin-chip {
    color: #435d7b;
    background: #e8edf3;
  }
  .rank-entry { color: #292e36; border-top-color: #e9ebef; }
  .rank-entry-arrow { color: #76869b; }
  .rank-refresh-hint, .rank-method { color: var(--ui-muted); }
  .rank-refresh-status.warning, .rank-source-badge.stale { background: #f4eee5; color: #80694d; }
  .rank-refresh-status.error { background: #f9eceb; color: #96534f; }
  .book-title, .feature-title, .source-title { color: #232831; }
  .source-search-cta, .rank-refresh-button { font-size: 13px; }
  .rank-refresh-hint, .rank-method { font-size: 12px; }
  .book-card:active .cover, .import-tile:active { transform: scale(.985); }
  .cover, .import-tile { transition: transform .16s ease-out; }

  /* One restrained translucent dock. A soft inner reflection gives depth. */
  .bottom-nav {
    bottom: calc(12px + env(safe-area-inset-bottom));
    height: 68px;
    padding: 5px;
    border: 1px solid #ffffffc9;
    border-radius: 29px;
    background: #f7f8fa80;
    box-shadow: 0 13px 30px #3c465b24, inset 0 1px 0 #ffffffc8;
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    transition: opacity .18s ease, transform .22s ease;
  }
  .bottom-nav::before {
    background: linear-gradient(180deg, #ffffff6e, transparent 55%);
  }
  .nav-item {
    min-height: 56px;
    color: #596474;
    border-radius: 23px;
    font-size: 12px;
    font-weight: 650;
  }
  .nav-item.active {
    color: #222730;
    background: #ffffff73;
    border: 1px solid #ffffffa9;
    box-shadow: 0 2px 7px #525b6a12, inset 0 1px 0 #ffffffa6;
  }
  .nav-item svg { stroke-width: 1.7; }
  .nav-item:not(.active):active { color: #303743; background: #ffffff75; }
  .app-shell:has(.search-input:focus) .bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 24px));
  }

  /* The page itself stays solid; only the controls float above it. */
  .reader-header {
    background: color-mix(in srgb, var(--chrome) 95%, transparent);
    border-bottom-color: color-mix(in srgb, var(--ink) 7%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .reader-footer {
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    padding: 7px 12px 9px;
    border: 1px solid color-mix(in srgb, var(--chrome) 65%, #fff);
    border-radius: 25px;
    background: color-mix(in srgb, var(--chrome) 64%, transparent);
    box-shadow: 0 10px 26px #252a3526, inset 0 1px 0 #ffffff9e;
    backdrop-filter: blur(26px) saturate(130%);
    -webkit-backdrop-filter: blur(26px) saturate(130%);
  }
  .reader.theme-night .reader-footer {
    border-color: #ffffff35;
    background: #303438a3;
    box-shadow: 0 10px 26px #0006, inset 0 1px 0 #ffffff22;
  }
  .reader-actions button, .progress-arrow { min-width: 44px; }
  .progress-row { height: 44px; gap: 4px; }
  .progress-arrow { width: 44px; height: 44px; border-radius: 15px; }
  .progress-row input { height: 40px; margin: 0; }
  .reader-icon { width: 44px; height: 44px; }
  .reader-actions button { min-height: 48px; border-radius: 18px; }
  .reader-actions button:active, .progress-arrow:active {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 9%, transparent);
  }
  .progress-row input { accent-color: #526b8a; }
  .reader-menu-orb {
    right: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    /* The button remains 44px; its glass disc is inset to a quieter 40px. */
    width: 44px;
    height: 44px;
    color: var(--ink);
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .reader-menu-orb::before {
    inset: 2px;
    border: 1px solid #ffffffa8;
    background: color-mix(in srgb, var(--chrome) 52%, transparent);
    box-shadow: 0 7px 18px #27303e2b, inset 0 1px 0 #ffffffb3;
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
  }
  .reader-menu-orb::after { inset: 4px; border-color: #ffffff65; border-bottom-color: transparent; box-shadow: none; }
  .reader-menu-orb:active { box-shadow: none; }
  @media (hover: hover) {
    .reader.controls-collapsed .reader-menu-orb:hover {
      box-shadow: none;
      transform: translateY(-1px) scale(1);
    }
  }
  .reader.theme-night .reader-menu-orb {
    color: #f5f6f8;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .reader.theme-night .reader-menu-orb::before {
    border-color: #ffffff4d;
    background: #444b5080;
    box-shadow: 0 7px 18px #0007, inset 0 1px 0 #ffffff36;
  }
  .reader.theme-night .reader-menu-orb::after { border-color: #ffffff44; }

  /* A readable frosted sheet, like the references' floating menus. */
  .drawer-scrim { background: #22293650; }
  .reader-drawer {
    bottom: var(--keyboard-inset, 0px);
    max-height: min(75dvh, calc(100dvh - var(--keyboard-inset, 0px) - env(safe-area-inset-top) - 12px));
    scroll-padding-bottom: 20px;
    border-top: 1px solid #ffffffb6;
    border-radius: 29px 29px 0 0;
    background: color-mix(in srgb, var(--chrome) 84%, transparent);
    box-shadow: 0 -14px 40px #242a3726, inset 0 1px 0 #ffffffc3;
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
  }
  .reader.theme-night .reader-drawer {
    border-color: #ffffff35;
    background: #2a3031e8;
    box-shadow: 0 -18px 52px #0009, inset 0 1px 0 #ffffff25;
  }
  .drawer-close {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .drawer-close:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
  .panel-buttons button, .note-actions button { min-height: 44px; }
  .reader-drawer:has(.note-editor:focus) .note-entry:has(.note-editor) .panel-buttons {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 6px 0;
    background: var(--chrome);
  }
  .setting-range-row, .layout-pill, .panel-buttons button {
    border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    background: color-mix(in srgb, var(--chrome) 92%, var(--ink) 8%);
  }
  .setting-range::-webkit-slider-thumb {
    background: color-mix(in srgb, var(--chrome) 65%, var(--ink) 35%);
  }
  .setting-range::-moz-range-thumb {
    background: color-mix(in srgb, var(--chrome) 65%, var(--ink) 35%);
  }
  .setting-chip, .panel-secondary, .setting-row button {
    border-color: color-mix(in srgb, var(--ink) 13%, transparent);
  }
  .setting-hint, .note-entry .note-meta, .note-entry .note-actions button,
  .stat span { font-size: 12px; }
  .layout-pill { font-size: 12px; }
  .setting-chip.selected, .layout-pill.selected, .font-option.selected,
  .theme-swatch.selected, .texture-swatch.selected {
    border-color: #6f88ac;
    color: #4b6384;
    box-shadow: 0 0 0 2px var(--chrome) inset, 0 0 0 2px #6f88ac30;
  }
  .reader.theme-night .setting-chip.selected, .reader.theme-night .layout-pill.selected,
  .reader.theme-night .font-option.selected { color: #b4c7e0; }
  .toc-item.active, .note-entry .note-actions button { color: #547196; }
  .setting-toggle input { accent-color: #627c9f; }
  .note-editor { border-color: #aab8c8; }
  .note-quote { border-left-color: #6f88ac; }
  .toast {
    color: #f7f8fa;
    background: #2e333bdc;
    border: 1px solid #ffffff39;
    border-radius: 16px;
    box-shadow: 0 12px 30px #20263339;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  button:focus-visible, input:focus-visible, a:focus-visible,
  .reader-menu-orb:focus-visible, .reader-actions button:focus-visible,
  .progress-arrow:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
}

@media (max-width: 390px) {
  .source-directory, .rank-link-grid, .layout-dual-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .directory-link, .rank-link { min-height: 0; }
  .directory-link { gap: 8px; padding: 14px 16px; }
}

@media (max-width: 359px) {
  .main-view { padding-inline: 16px; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .reader-content { padding-inline: 20px; }
  .feature-card { gap: 12px; padding: 13px; }
  .feature-card .cover { width: clamp(84px, 27vw, 102px); }
  .feature-title { font-size: 15px; }
  .reader-footer { left: 8px; right: 8px; padding-inline: 8px; }
  .progress-row { gap: 2px; }
  .progress-row #chapter-position { min-width: 28px; text-align: center; }
}

@media (max-width: 899px) and (prefers-reduced-transparency: reduce) {
  .app-header, .bottom-nav, .reader-header, .reader-footer,
  .reader-menu-orb, .reader-drawer, .toast, .quick-menu {
    background: #f8f9fa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .reader-header, .reader-footer, .reader-menu-orb, .reader-drawer { background: var(--chrome); }
  .reader-menu-orb, .reader.theme-night .reader-menu-orb { background: transparent; }
  .reader-menu-orb::before { background: var(--chrome); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .reader.theme-night .reader-menu-orb::before { background: #2e3838; }
  .reader.theme-night .reader-drawer { background: #2e3838; }
}

@media (max-width: 899px) and (prefers-contrast: more) {
  .bottom-nav, .reader-footer, .reader-menu-orb, .reader-drawer,
  .directory-link, .source-card, .rank-source-panel, .mine-panel, .quick-menu { border: 2px solid #29303b; }
  .nav-item { color: #414752; }
  .nav-item.active { color: #fff; background: #272d36; }
  .reader.theme-night .reader-footer, .reader.theme-night .reader-drawer,
  .reader.theme-night .reader-menu-orb { border-color: #f6f7f9; }
  .reader-menu-orb::before, .reader-menu-orb::after { display: none; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .cover, .import-tile, .nav-item, .bottom-nav, .reader-footer,
  .reader-menu-orb, .directory-link, .rank-refresh-button { transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .quick-menu { background: #f8f9fb; }
  @media (max-width: 899px) {
    .app-header, .bottom-nav, .toast { background: #f8f9fbee; }
    .reader-header, .reader-footer, .reader-drawer { background: var(--chrome); }
    .reader-menu-orb, .reader.theme-night .reader-menu-orb { background: transparent; }
    .reader-menu-orb::before { background: var(--chrome); }
    .reader.theme-night .reader-menu-orb::before { background: #2e3838; }
    .reader.theme-night .reader-drawer { background: #2e3838; }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .quick-menu { background: #f8f9fb; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .quick-menu { border-color: #29303b; }
  .quick-menu-item:focus-visible { outline-color: #101827; }
}