/* Revaro stylesheet manifest.
 *
 * This file is the single entry point `<link rel="stylesheet" href="/styles.css">`
 * in `index.html`. It replaces the Vue side's two-stage import graph
 * (`main.ts` importing `style.css`/`account.css`/`ui.css`/... while `style.css`
 * itself `@import`ed the seven `styles/*.css` parts) with one flat, explicit
 * list.
 *
 * The global and component sheets form an ordered cascade. Keep the import
 * order stable: `logic::stylesheet` checks it against the manifest.
 *
 * Effective cascade order recovered from the Vue entry point:
 *   1  styles/shell.css              7  account.css
 *   2  styles/browser.css            8  ui.css
 *   3  styles/uploads.css            9  styles/selection-toolbar.css
 *   4  styles/dialogs.css           10  styles/share-dialog.css
 *   5  styles/media.css             11  styles/document-editor.css
 *   6  styles/responsive.css        12  styles/reader-flow.css
 *                                   13  styles/reader-chrome.css
 *                                   14  styles/video-player.css
 *
 * `video-player.css` is last because Vue loaded it from
 * `VideoPlayer.vue`'s `<style src>`, i.e. after every module-level import.
 *
 * Appended after those fourteen are the ported `<style scoped>` component
 * blocks. Vue emitted them with an extra `[data-v-*]` attribute, so they
 * outranked the global sheets on equal specificity; the port keeps that by
 * loading them after every global sheet and by anchoring their generic class
 * names under each component root. The `:deep()` selectors among them are now
 * plain selectors, since Leptos has no scoped-style transform. */

:root {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  --navy: var(--ink);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-width: 320px;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.splash {
  height: 100vh;
  display: grid;
  place-content: center;
  gap: 24px;
  justify-items: center;
}
.splash .brand-logo {
  width: 77px;
  height: 64px;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-hover), var(--accent-border));
  color: #fff;
  font-weight: 800;
  font-size: 25px;
  box-shadow: 0 16px 34px #426b5e3b;
}
.brand-mark.small {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 15px;
  box-shadow: none;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
}
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.15fr) minmax(390px, 0.85fr);
  background: #fff;
}
.login-visual {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ink-subtle), var(--accent-hover));
  color: #fff;
  padding: 9vh 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#fff1 1px, transparent 1px);
  background-size: 28px 28px;
}
.visual-copy {
  position: relative;
  z-index: 1;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--accent-border);
}
.eyebrow.dark {
  color: var(--accent);
  margin: 0 0 8px;
}
.visual-copy h1 {
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.05;
  margin: 24px 0;
  letter-spacing: -0.05em;
  max-width: 800px;
}
.visual-copy p {
  color: var(--accent-soft);
  font-size: 17px;
}
.revaro-card {
  position: relative;
  z-index: 1;
  margin-top: 9vh;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #ffffff12;
  border: 1px solid #ffffff22;
  backdrop-filter: blur(12px);
  border-radius: 16px;
}
.revaro-card > span {
  font-size: 27px;
}
.revaro-card div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.revaro-card small {
  color: var(--accent-light);
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}
.glow-a {
  width: 460px;
  height: 460px;
  right: -140px;
  top: -140px;
  background: #b5cbb333;
}
.glow-b {
  width: 300px;
  height: 300px;
  left: -100px;
  bottom: -80px;
  background: #426b5e33;
}
.login-panel {
  display: grid;
  place-items: center;
  padding: 48px;
}
.login-form {
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.login-form > .logo {
  margin-bottom: 44px;
}
.login-form .brand-logo {
  display: block;
  width: 48px;
  height: 40px;
}
.login-form h2 {
  font-size: 31px;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.muted {
  color: var(--muted);
  margin: 0;
}
.login-form label,
.modal label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-subtle);
  font-size: 13px;
  font-weight: 650;
}
.login-form input,
.modal input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 13px 14px;
  outline: none;
  background: #fff;
}
.login-form input:focus,
.modal input:focus {
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring);
}
.form-error {
  margin: -10px 0;
  color: var(--danger);
  font-size: 13px;
}
.primary,
.secondary {
  border: 0;
  border-radius: 10px;
  padding: 11px 17px;
  font-weight: 700;
}
.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px #426b5e30;
}
.primary:hover {
  background: var(--accent-hover);
}
.primary:disabled {
  opacity: 0.55;
}
.secondary {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-subtle);
}
.wide {
  width: 100%;
  padding: 14px;
}
.app-shell {
  min-height: 100vh;
  display: block;
}

.avatar {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-weight: 800;
  position: relative;
}
.avatar span {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  background: #1e293b;
  color: #fff;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11px;
}
.avatar:hover span {
  display: block;
}
.content {
  padding: 42px 48px 80px;
  min-width: 0;
}

.content-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.actions {
  display: flex;
  gap: 10px;
}
.state {
  min-height: 350px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--muted);
}
.state.small {
  min-height: 180px;
}
.empty-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 34px;
  transform: rotate(-8deg);
}
.state h3 {
  color: var(--ink-subtle);
  margin: 20px 0 6px;
}
.state p {
  margin: 0 0 22px;
}
.mutedrow {
  opacity: 0.62;
}
.drop-zone {
  position: fixed;
  inset: 78px 0 0;
  background: #f3f6eff1;
  z-index: 20;
  border: 3px dashed var(--accent-border);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--accent-hover);
}
.drop-zone span {
  font-size: 55px;
}
.drop-zone h2 {
  margin: 12px 0;
}
.drop-zone p {
  color: var(--muted);
}
.progress {
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  margin: 9px 0 0 41px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: 0.2s;
}
.progress i.done {
  background: var(--success);
}
.progress i.failed {
  background: var(--danger);
}
.modal-backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: #0f172a66;
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 30px 80px #0f172a44;
}
.modal > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.modal h2 {
  margin: 0;
}
.modal header > button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
}
.modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 11px 17px;
  border-radius: 9px;
  box-shadow: 0 10px 30px #0f172a44;
  font-size: 13px;
}
.toast.success {
  background: var(--success);
}
@media (max-width: 850px) {
  .login-page {
    grid-template-columns: 1fr;
  }
  .login-visual {
    display: none;
  }
  .login-panel {
    min-height: 100vh;
  }

  .content {
    padding: 26px 16px 90px;
  }

  .actions {
    width: 100%;
  }
  .actions button {
    flex: 1;
  }
}

/* File browser controls and previews */
.actions {
  align-items: center;
  flex-wrap: wrap;
}
.account-button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  padding: 5px 9px 5px 5px;
  color: var(--ink-subtle);
  text-align: left;
}
.account-button:hover {
  background: var(--surface-subtle);
}
.account-button:focus-visible {
  outline: 3px solid var(--accent-border);
  outline-offset: 2px;
}
.avatar-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 800;
}
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}
@media (max-width: 1100px) {
  .account-button {
    padding: 4px;
  }
}
@media (max-width: 850px) {

  .actions {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
  }
  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Calm, full-screen image lightbox */

/* Koofr-style tile selection: content first, actions only after selection */
.avatar-badge {
  overflow: hidden;
}
.avatar-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Unified media viewer */
.large-video{
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
}

/* ===== Visual upgrade: brand, navigation, storage card, pulse, swipe, mobile ===== */
.brand-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.brand-button {
  border: 0;
  background: transparent;
  padding: 3px 8px 3px 3px;
  border-radius: 14px;
  transition: 0.15s;
}
.brand-button:hover {
  background: var(--surface-subtle);
}
.brand-button:active {
  transform: scale(0.97);
}

.nav {
  font-size: 14px;
  padding: 12px 13px;
  transition: 0.15s;
}
.nav:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.content-head p {
  font-size: 13px;
}
.actions button {
  font-size: 13px;
}
@keyframes storage-breathe {
  from {
    opacity: 0.5;
    filter: saturate(0.75);
  }
  to {
    opacity: 1;
    filter: saturate(1.2);
  }
}

/* Mobile polish */
@media (max-width: 850px) {

  .content {
    padding: 22px 14px 96px;
  }

  .actions button {
    padding: 0 13px;
    min-height: 42px;
  }
  .modal-backdrop {
    padding: 14px 10px;
  }
  .modal h2 {
    font-size: 21px;
  }
  .login-panel {
    padding: 0 24px;
  }
  .login-form h2 {
    font-size: 24px;
  }
}
@media (max-width: 520px) {
  .modal {
    width: calc(100vw - 20px);
  }

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

.modal-backdrop.reading {
  overflow: hidden;
  padding: 0;
  background: #f7f3eb;
  backdrop-filter: none;
}

.listing-end {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 64px;
  padding: 20px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.listing-end:empty { min-height: 1px; padding: 0; }
.version-history pre { max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere; }
.history-row { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line); }
.history-row > :first-child { flex:1;min-width:0;overflow-wrap:anywhere; }
.version-history { padding:20px;border-bottom:1px solid var(--line);max-height:45vh;overflow:auto; }
.version-history header { display:flex;justify-content:space-between;gap:12px; }



/* 视频/电子书缩略图 */
/* 视频缩略图占位居中：wrapper 用 grid 居中占位符号，img 绝对定位铺满 */
.video-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 视频缩略图占位：glyph 在底层，缩略图加载完成前保持可见、加载后淡出 */
.thumb-fallback {
  position: relative;
  z-index: 0;
  transition: opacity 0.18s;
}
.thumb-fallback.hidden {
  opacity: 0;
}
.video-thumb img {
  z-index: 1;
}

/* 鸿蒙浏览器会把 UI 中的图片劫持成“查看大图”。按钮内图片和显式标记的
   装饰图都不接管触摸/长按事件；真正的媒体预览与 TOTP 二维码不标记。 */
button img,
.ui-image {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== File browser layout: no single-item sidebar, compact responsive header ===== */
.content {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 34px clamp(20px, 3vw, 48px) 80px;
}
.drop-zone {
  inset: 78px 0 0;
}

.folder-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted) !important;
}
.folder-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

@media (max-width: 850px) {
    .content {
    padding: 18px 14px 80px;
  }

  .folder-meta {
    gap: 7px;
    font-size: 12px !important;
  }
  .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px;
  }

}

@media (max-width: 520px) {
  .topbar .brand-button .brand-mark {
    display: none;
  }
  .topbar .logo > span:last-child {
    display: inline;
  }
  .topbar .brand-button {
    padding: 6px 4px;
    font-size: 18px;
  }
  .folder-meta span:nth-of-type(2),
  .folder-meta i:nth-of-type(2) {
    display: none;
  }
  .file-grid {
    gap: 10px;
  }
}

/* File grid sizing; card structure is shared in components/file-card.css. */
.folder-meta {
  font-size: 13px !important;
}
.file-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 10px;
  align-items: start;
}
.file-type-icon {
  width: 92px;
  height: 92px;
  overflow: visible;
  fill: none;
  stroke: none;
}
.folder-type-icon {
  width: 112px;
  height: 112px;
}
.folder-back {
  fill: var(--accent);
}
.folder-front {
  fill: var(--accent-border);
}
.folder-highlight {
  fill: var(--accent-soft);
}
.icon-base {
  fill: var(--accent-soft);
}
.icon-fold {
  fill: var(--accent-border);
}
.icon-detail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-accent {
  fill: var(--accent);
}
.document-type-icon .icon-base {
  fill: var(--accent-soft);
}
.document-type-icon .icon-fold {
  fill: var(--accent-border);
}
.document-type-icon .icon-detail {
  stroke: var(--accent);
}
.book-type-icon .icon-base {
  fill: var(--accent-soft);
}
.book-type-icon .icon-detail {
  stroke: var(--accent);
  stroke-width: 3.4;
}
.audio-type-icon .icon-base {
  fill: var(--accent-soft);
}
.audio-type-icon .icon-fold {
  fill: var(--accent-border);
}
.audio-type-icon .icon-detail {
  stroke: var(--accent);
}
.audio-type-icon .icon-accent {
  fill: var(--accent);
}
.generic-type-icon .icon-base {
  fill: var(--line);
}
.generic-type-icon .icon-fold {
  fill: var(--line-strong);
}
.generic-type-icon .icon-accent {
  fill: var(--muted);
}
.large-video {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #17203380;
  color: #fff;
  box-shadow: 0 5px 20px #0004;
  backdrop-filter: blur(5px);
}
.large-video svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  stroke: none;
}

@media (max-width: 1024px) and (min-width: 641px) {
  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 9px;
  }
}
@media (max-width: 640px) {
  .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .file-type-icon {
    width: 70px;
    height: 70px;
  }
  .folder-type-icon {
    width: 88px;
    height: 88px;
  }
  .large-video {
    width: 58px;
    height: 58px;
  }
  .large-video svg {
    width: 28px;
    height: 28px;
  }
}

/* Bright full-screen chapter audio player.
   The `audio-pulse` keyframes were dropped during the Leptos port: the audit
   found no rule referencing them (`.chapter-equalizer b` uses `chapter-wave`). */
.chapter-equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 13px;
}
.chapter-equalizer b {
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  animation: chapter-wave 0.75s ease-in-out infinite;
}
.chapter-equalizer b:nth-child(1) {
  height: 7px;
}
.chapter-equalizer b:nth-child(2) {
  height: 12px;
  animation-delay: 0.15s;
}
.chapter-equalizer b:nth-child(3) {
  height: 9px;
  animation-delay: 0.3s;
}
@keyframes chapter-wave {
  50% {
    height: 4px;
  }
}

/* Final immersive-preview overrides (kept after the historical preview rules).
   The `zoom-notice-in` keyframes were dropped during the Leptos port: the audit
   found no rule referencing them. */

/* Shared viewer surfaces and controls. Media layout lives here, without breakpoint overrides in other modules. */
.modal-backdrop.previewing { padding: 0; background: #191c20; }
.modal-backdrop.previewing.image-previewing { background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: none; }
.preview-modal {
  --media-surface: var(--paper);
  --media-panel: var(--surface);
  --media-ink: var(--ink);
  --media-muted: var(--muted);
  --media-line: var(--line);
  --media-hover: var(--surface-hover);
  --media-accent: var(--accent);
  position: fixed; z-index: 30; inset: 0;
  display: grid; grid-template-rows: calc(60px + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
  width: 100%; height: 100dvh; min-width: 0; overflow: hidden; outline: none;
  background: var(--media-surface); color: var(--media-ink);
}
.preview-modal svg { flex-shrink: 0; width: 20px; height: 20px; stroke-width: 1.7; }
.preview-modal button, .preview-modal summary { -webkit-tap-highlight-color: transparent; }
.preview-modal button:disabled { opacity: .35; cursor: default; }
.preview-modal button:focus-visible, .preview-modal summary:focus-visible, .preview-modal input:focus-visible, .preview-modal select:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 3px; }
.preview-commandbar { position: relative; z-index: 16; display: flex; align-items: center; gap: 20px; min-width: 0; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); background: var(--media-surface); color: var(--media-ink); }
.preview-file-meta { flex: 1; min-width: 0; }
.preview-file-meta strong { display: block; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.preview-file-actions { display: flex; align-items: center; gap: 4px; }
.preview-count { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--media-muted); }
.media-icon-button, .action-menu > summary { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.media-icon-button:hover:not(:disabled) { background:var(--media-hover); }
.action-menu > summary:hover { background:var(--menu-hover); }
.action-menu { position: relative; --menu-hover:var(--media-hover,var(--surface-hover)); --menu-line:var(--media-line,var(--line)); --menu-panel:var(--media-panel,var(--surface)); --menu-ink:var(--media-ink,var(--ink-subtle)); }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary { background: var(--menu-hover); }
.action-menu-panel { position: absolute; z-index: 30; left:50%; transform:translateX(-50%); top:calc(100% + 8px); bottom:auto; width: max-content; min-width: 188px; max-width:min(300px,calc(100vw - 16px)); max-height:var(--popover-available-height,70vh); overflow:auto; padding:5px; border:1px solid var(--menu-line); border-radius:var(--radius-md); background:var(--menu-panel); color:var(--menu-ink); box-shadow:var(--shadow-popover); }
.action-menu-panel > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 13px; text-align: left; }
.action-menu-panel > button:hover { background: var(--menu-hover); }
.media-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 260px; margin: 8px 0 0; padding: 12px; border-top: 1px solid var(--media-line); color: var(--media-muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.media-detail span { width: 100%; }
.media-detail svg { width: 15px; height: 15px; }
.media-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.preview-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.video-preview {
  --media-surface: #191c20; --media-panel: #24282d; --media-ink: #edf0f2;
  --media-muted: #a2abb3; --media-line: #ffffff1c; --media-hover: #ffffff12; --media-accent: var(--accent-light);
}
.image-preview {
  --media-surface: var(--surface); --media-panel: var(--surface); --media-ink: var(--ink);
  --media-muted: var(--muted); --media-line: var(--line); --media-hover: var(--surface-hover); --media-accent: var(--accent);
  grid-template-rows: calc(60px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) auto; background: transparent;
}
.image-preview .preview-commandbar { box-shadow: 0 1px 0 var(--line); }
.image-preview .preview-image-tools, .image-preview .action-menu-panel { box-shadow: var(--shadow-popover); }
.image-preview .preview-nav { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink-subtle); box-shadow: var(--shadow-popover); }
.image-preview .preview-nav:hover { background: var(--surface-hover); color: var(--accent); }
.image-preview .preview-stage { touch-action: none; }
.preview-image { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; object-fit: contain; user-select: none; }
.preview-stage.zoomed { cursor: grab; }
.preview-stage.zoomed.dragging { cursor: grabbing; }
.preview-nav { position: absolute; z-index: 5; top: 50%; border-radius: 50%; background: #191c208c; transform: translateY(-50%); }
.preview-prev { left: max(16px, env(safe-area-inset-left, 0px)); }
.preview-next { right: max(16px, env(safe-area-inset-right, 0px)); }
.preview-image-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--media-muted); font-size: 13px; }
.preview-image-status button { min-height: 44px; padding: 0 16px; border: 1px solid var(--media-line); border-radius: 9px; background: var(--media-hover); color: var(--media-ink); }
.preview-image-footer { z-index: 10; min-width: 0; padding: 12px 16px max(18px, env(safe-area-inset-bottom, 0px)); }
.preview-image-tools { display: flex; align-items: center; justify-content: center; width: max-content; margin: auto; padding: 3px 6px; border: 1px solid var(--media-line); border-radius: 14px; background: var(--media-panel); }
.preview-actual-size { min-width: 60px; height: 44px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.preview-actual-size:hover { background: var(--media-hover); }
.preview-filmstrip { display: flex; gap: 8px; width: max-content; max-width: 100%; margin: 14px auto 0; padding: 3px; overflow-x: auto; scrollbar-width: thin; }
.preview-filmstrip button { flex: 0 0 62px; width: 62px; height: 54px; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: var(--media-panel); }
.preview-filmstrip button[aria-current="true"] { border-color: var(--media-accent); }
.preview-filmstrip img { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; }
.image-preview .preview-commandbar, .preview-image-footer, .preview-nav { transition: opacity .18s ease, visibility .18s; }
.image-preview.chrome-hidden .preview-commandbar, .chrome-hidden .preview-image-footer, .chrome-hidden .preview-nav { opacity: 0; visibility: hidden; pointer-events: none; }
.video-preview { display: block; background: #090b0e; }
.video-preview .preview-stage { height: 100%; }

.chapter-audio-player { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; outline: none; }
.chapter-audio-player.panel-open { grid-template-columns: minmax(0, 1fr) minmax(300px, 38%); }
.audio-main { display: grid; grid-template-rows: auto minmax(0,1fr) auto; justify-items: center; gap: 20px; min-width: 0; min-height: 0; overflow: hidden; padding: 24px 32px max(28px, env(safe-area-inset-bottom, 0px)); }
.audio-now-playing { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 100%; max-width: 500px; text-align: center; }
.audio-track-info { display: none; }
.audio-cover { display: grid; place-items: center; width: min(280px, 32dvh); aspect-ratio: 1; overflow: hidden; border: 1px solid #ffffff80; border-radius: 18px; background: var(--accent-soft); color: var(--accent); box-shadow: 0 12px 34px #293d4d12; }
.audio-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.audio-cover > svg { width: 28%; height: 28%; stroke-width: 1; }
.audio-transcript { position: relative; width: 100%; max-width: 500px; height: 100%; min-width: 0; min-height: 0; }
.audio-transcript-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: thin; mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.audio-transcript-lines { padding: var(--transcript-inset, 80px) 4px; }
.audio-transcript-line { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--media-muted); font: inherit; font-size: clamp(15px,1.6vw,18px); line-height: 1.7; text-align: center; white-space: pre-line; overflow-wrap: anywhere; transition: color .2s ease; }
.audio-transcript-line:hover { background: var(--media-hover); }
.audio-transcript-line.active { color: var(--media-accent); font-weight: 600; }
.audio-transcript-empty { display: grid; place-items: center; height: 100%; margin: 0; color: var(--media-muted); font-size: 13px; }
.audio-transcript-scroll.empty { mask-image: none; }
.audio-transcript-scroll.empty .audio-transcript-lines { display: none; }
.audio-transcript-follow { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); min-height: 44px; padding: 6px 14px; border: 1px solid var(--media-line); border-radius: 18px; background: var(--media-panel); color: var(--media-accent); box-shadow: var(--shadow-popover); font-size: 12px; white-space: nowrap; }
.audio-playback { flex-shrink: 0; width: 100%; max-width: 460px; }
.audio-playback > audio { display: none; }
.audio-playback .full-bleed-progress--audio { --progress-center: 12px; --progress-height: 3px; --progress-thumb-size: 12px; --progress-track: var(--line); --progress-buffer: var(--line-strong); --progress-played: var(--media-accent); --progress-thumb: var(--media-accent); --progress-thumb-border: var(--media-surface); }
.audio-time { display: flex; justify-content: space-between; margin-top: 4px; color: var(--media-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.audio-controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 22px 0 16px; }
.audio-controls button { position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--media-ink); }
.audio-controls button:hover:not(:disabled) { background: var(--media-hover); }
.audio-controls button > svg { width: 32px; height: 32px; stroke-width: 1.4; }
.audio-controls button > small { position: absolute; top: 20px; font-size: 9px; font-weight: 600; }
.audio-controls .audio-play { width: 64px; height: 64px; background: var(--media-ink); color: #fff; }
.audio-controls .audio-play:hover:not(:disabled) { background: var(--media-accent); }
.audio-controls .audio-play svg { width: 26px; height: 26px; }
.audio-control-spinner { width: 24px; height: 24px; border: 2px solid #ffffff40; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.audio-options { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--media-muted); }
.audio-options > button { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: inherit; font-size: 12px; white-space: nowrap; }
.audio-options > button:hover, .audio-options > button[aria-expanded="true"] { background: var(--media-hover); color: var(--media-accent); }
.audio-rate select { height: 44px; min-width: 66px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--media-muted); font: inherit; font-size: 13px; cursor: pointer; }
.audio-volume { display: flex; align-items: center; gap: 8px; width: 220px; }
.audio-volume button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: inherit; }
.audio-volume input { min-width: 0; flex: 1; height: 44px; accent-color: var(--media-accent); }
.audio-volume output { min-width: 32px; font-size: 11px; }
.audio-player-error { margin: 12px 0 0; color: var(--danger); font-size: 12px; line-height: 1.6; text-align: center; }
.audio-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--media-line); background: var(--media-panel); }
.audio-panel > header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid var(--media-line); }
.audio-panel > header strong { font-size: 13px; font-weight: 600; }
.audio-panel .chapter-panel-close,
.music-queue .chapter-panel-close { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.audio-panel .chapter-panel-close svg,
.music-queue .chapter-panel-close svg { width: 18px; height: 18px; stroke-width: 1.7; }
.audio-panel .chapter-panel-close:hover,
.music-queue .chapter-panel-close:hover { background: var(--surface-hover); color: var(--ink); }
.audio-panel .chapter-panel-close:focus-visible,
.music-queue .chapter-panel-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.audio-panel-empty { padding:0 24px; color:var(--media-muted); font-size:12px; }
.music-player-dialog { z-index:60; }
.music-dock .dock-cover { padding:0; }
.library-card.is-playing { border-color:var(--accent-border); }
.audio-chapter-navigation { display: flex; justify-content: space-between; gap: 8px; padding: 8px 20px; }
.audio-chapter-navigation button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--media-muted); font-size: 12px; }
.audio-chapter-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 20px; }
.audio-chapter-list button { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 12px; border: 0; border-radius: 10px; background: transparent; color: var(--media-muted); text-align: left; }
.audio-chapter-list strong { font-size: 13px; font-weight: 450; line-height: 1.5; overflow-wrap: anywhere; }
.audio-chapter-list small, .audio-chapter-number { font-size: 11px; font-variant-numeric: tabular-nums; }
.audio-chapter-list button:hover, .audio-chapter-list button[aria-current="true"] { background: var(--media-hover); color: var(--media-accent); }
.audio-panel-scrim { display: none; }
@media (max-width: 760px) {
  .preview-commandbar { gap: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .preview-commandbar .preview-file-meta strong { font-size: 12px; }
  .chapter-audio-player.panel-open { grid-template-columns: minmax(0,1fr); }
  .audio-main { gap: 16px; padding: 16px 24px max(24px, env(safe-area-inset-bottom, 0px)); }
  .audio-cover { width: min(260px, 30dvh); }
  .audio-options { gap: 4px; }
  .audio-options > button { padding-inline: 6px; }
  .audio-options .audio-rate select { width: 66px; }
  .audio-preview .audio-options .playback-mode select { min-width: 84px; width: 84px; padding-inline: 4px; font-size: 12px; }
  .audio-panel { position: absolute; z-index: 22; right: 0; bottom: 0; left: 0; height: min(72dvh, 600px); padding-bottom: env(safe-area-inset-bottom, 0px); border: 1px solid var(--media-line); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px #17212b14; }
  .audio-panel-scrim { position: absolute; z-index: 21; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #17212b40; }
  .preview-prev { left: 8px; } .preview-next { right: 8px; }
}
@media (max-height: 600px) {
  .audio-main { gap: 12px; padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .audio-cover { width: min(180px, 20dvh); }
  .audio-controls { margin: 12px 0 8px; }
}
@media (max-height: 600px) and (min-width: 620px) and (max-width: 1023px) {
  .audio-main { grid-template-columns: auto minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; column-gap: 32px; }
  .audio-now-playing { align-self: center; }
  .audio-cover { width: min(200px, 28dvh); }
  .audio-playback { grid-column: 1 / -1; }
}
/* Desktop listening uses the cover and transcript as two independent columns. */
@media (min-width: 1024px) {
  .chapter-audio-player.panel-open { grid-template-columns: minmax(0, 1fr); }
  .audio-main {
    align-self: center; justify-content: space-between; align-items: center;
    grid-template-columns: clamp(320px, 28vw, 380px) minmax(0, 700px);
    grid-template-rows: clamp(220px, 30dvh, 280px) auto;
    column-gap: clamp(40px, 4vw, 64px); row-gap: 24px;
    width: calc(100% - 64px); max-width: 1160px; max-height: 100%; margin: 0 auto;
    padding: 24px 0 max(24px, env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  }
  .audio-now-playing { grid-column: 1; grid-row: 1 / -1; align-self: center; max-width: none; }
  .audio-cover { width: 100%; max-width: 380px; }
  .audio-track-info { display: block; width: 100%; margin-top: 24px; }
  .audio-track-info h1 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
  .audio-track-info p { margin: 10px 0 0; color: var(--media-muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .audio-transcript { grid-column: 2; grid-row: 1; max-width: none; }
  .audio-transcript-lines { padding-inline: 8px; }
  .audio-transcript-line { padding: 14px 24px; font-size: 18px; }
  .audio-transcript-line.active { font-size: 24px; line-height: 1.6; }
  .audio-playback { grid-column: 2; grid-row: 2; max-width: none; }
  .audio-playback .full-bleed-progress--audio { --progress-center: 22px; --progress-height: 6px; --progress-thumb-size: 18px; height: 44px; }
  .audio-playback .full-bleed-progress__track { border-radius: 3px; }
  .audio-time { margin-top: 0; font-size: 13px; }
  .audio-controls { gap: 32px; margin: 28px 0 20px; }
  .audio-controls .audio-play { width: 68px; height: 68px; }
  .audio-controls .audio-play svg { width: 30px; height: 30px; }
  .audio-options { gap: 20px; }
  .audio-options > button, .audio-rate select { font-size: 14px; }
  .audio-panel { position: absolute; z-index: 22; top: 0; right: 0; bottom: 0; width: clamp(380px, 30vw, 460px); box-shadow: -12px 0 40px #17212b14; }
  .audio-panel-scrim { position: absolute; z-index: 21; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #17212b40; }
  .audio-panel > header { padding: 16px 24px; }
  .audio-panel > header strong { font-size: 16px; }
  .audio-chapter-navigation { padding-inline: 24px; }
  .audio-chapter-list { padding-inline: 16px; }
  .audio-chapter-list strong { font-size: 14px; }
  .audio-chapter-list small, .audio-chapter-number { font-size: 12px; }
}
@media (min-width: 1024px) and (max-height: 600px) {
  .audio-main { row-gap: 16px; padding-top: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .audio-controls { margin: 12px 0 8px; }
  .audio-track-info { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-preview .preview-commandbar, .preview-image-footer, .preview-nav, .audio-transcript-line { transition: none; }
  .audio-transcript-scroll { scroll-behavior: auto; }
}

/* Dynamic viewport and intrinsic-size guards for HarmonyOS and other mobile WebViews. */
html,
body,
#app {
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
}
body {
  overflow-x: hidden;
}
.splash {
  height: 100vh;
  height: 100dvh;
}
.login-page,
.app-shell {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
.app-shell > * {
  min-width: 0;
}
.content {
  min-width: 0;
  max-width: 100%;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.modal-backdrop {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  padding: max(20px, env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  overflow: hidden;
}
.document-editor {
  height: min(880px, calc(100vh - 36px));
  height: min(880px, calc(100dvh - 36px));
}

/* File names must never contribute an unbounded intrinsic width. */
.editor-title > div {
  min-width: 0;
  max-width: 100%;
}
.editor-title strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 850px) {
  .login-panel {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .content {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
  .drop-zone {
    inset: calc(64px + env(safe-area-inset-top, 0px)) 0 0;
  }
  .modal-backdrop {
    padding: max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }
}

/* File manager visual system: shared surfaces, controls and responsive rhythm. */
body {
  background: var(--surface-subtle);
  color: var(--ink);
}
button,
summary,
input,
textarea,
select {
  transition:
    border-color 0.14s,
    background-color 0.14s,
    color 0.14s,
    box-shadow 0.14s;
}
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
button:disabled {
  cursor: not-allowed;
}

.brand-button {
  letter-spacing: -0.02em;
}
.account-button {
  margin-left: 7px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-md);
}
.account-button:hover {
  background: var(--surface-hover);
}
.avatar-badge {
  width: 34px;
  height: 34px;
}
.content {
  width: min(100%, 1540px);
  padding-top: 38px;
}

.folder-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted) !important;
}
.folder-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

.actions {
  gap: 8px;
}
.actions .primary,
.actions .secondary{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--control-md);
  padding: 0 14px;
  border-radius: var(--radius-md);
}
.actions svg {
  width: 17px;
  height: 17px;
}
.primary {
  background: var(--blue);
  box-shadow: none;
}
.primary:hover {
  background: var(--blue-hover);
}
.secondary {
  border-color: var(--line-strong);
  color: var(--ink-subtle);
}
.secondary:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.modal-backdrop {
  background: #17212b66;
  backdrop-filter: none;
}
.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dialog);
}
@media (max-width: 850px) {

  .content {
    padding-top: 22px;
  }

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

  .file-grid {
    gap: 8px;
  }
  .folder-meta {
    flex-wrap: wrap;
  }

}
@media (max-width: 430px) {
  .content {
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  .actions .primary,
  .actions .secondary{
    padding: 0 10px;
  }
  .file-grid {
    gap: 7px;
  }
  .file-type-icon {
    width: 62px;
    height: 62px;
  }
  .folder-type-icon {
    width: 78px;
    height: 78px;
  }
}

/* The canonical `:root` palette used to live here. During the Leptos
   port the byte-identical duplicate in `ui.css` was kept as the single
   authoritative definition and this one was deleted: both blocks had the same
   specificity, so `ui.css` (later in the cascade) already won for every token,
   and the only divergence was `--shadow-dialog`, where `ui.css` set
   `0 24px 64px #17212b33` against the `#17212b29` here. Keeping `ui.css` is
   therefore a pure no-op for rendered output. */

/* A muted grass-green palette for shared controls and the login illustration. */
.brand-mark {
  background: linear-gradient(145deg, var(--accent-hover), var(--accent-light));
  box-shadow: 0 16px 34px #426b5e3b;
}
.login-visual {
  background: linear-gradient(145deg, var(--ink-subtle), var(--accent-hover));
}
.eyebrow {
  color: var(--accent-light);
}
.eyebrow.dark {
  color: var(--accent);
}
.login-form input:focus,
.modal input:focus {
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring);
}
.primary {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: none;
}
.primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  box-shadow: none;
}

.progress i{
  background: var(--accent);
}
.modal-backdrop.accounting {
  background: #17212b78;
  backdrop-filter: none;
}
.avatar,

.nav.active,
.nav:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.account-button:focus-visible {
  outline-color: var(--accent-border);
}
.drop-zone {
  border-color: var(--accent-border);
  background: #f3f6eff1;
  color: var(--accent-hover);
}

.form-success {
  margin: -10px 0;
  color: var(--success);
  font-size: 13px;
}

.modal-backdrop.accounting {
  z-index: 40;
}

.account-modal {
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 20px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.account-modal > header {
  align-items: center;
  margin-bottom: 16px;
}

.account-modal h2 {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.account-modal header > button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.account-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0 18px;
}

.avatar-large {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  font-weight: 700;
}

.avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-profile-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.account-profile-copy strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-text-button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.account-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.account-setting-row + .account-setting-row {
  border-top: 1px solid var(--line);
}

.account-setting-row .setting-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.account-setting-row .setting-status {
  max-width: 55%;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-setting-row .setting-status.enabled {
  color: var(--success);
}

.account-setting-row > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  color: var(--muted-soft);
  stroke-width: 1.7;
}

.account-modal .account-footer {
  justify-content: flex-start;
  margin-top: 12px;
  padding: 0;
}

.account-logout {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
}

.account-modal button:disabled {
  cursor: default;
  opacity: .55;
}

.account-modal button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .account-setting-row:hover:not(:disabled) {
    background: var(--accent-faint);
  }

  .account-text-button:hover:not(:disabled) {
    color: var(--accent-hover);
  }

  .account-logout:hover {
    color: var(--danger-hover);
  }
}

/* Explanations and forms only appear while a setting is being changed. */
.account-subdialog-backdrop {
  position: fixed;
  z-index: 42;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #17212b66;
}

.account-subdialog {
  width: min(400px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 20px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.account-subdialog > header {
  gap: 12px;
  margin-bottom: 18px;
}

.account-subdialog form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-subdialog label {
  font-weight: 500;
}

.account-subdialog input {
  border-color: var(--line-strong);
}

.account-subdialog input:focus {
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring);
}

.account-subdialog footer {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.account-subdialog form > footer {
  margin-top: 0;
}

.account-subdialog .secondary,
.account-subdialog .danger-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  box-shadow: none;
}

.account-subdialog .danger-button,
.account-subdialog .danger-text {
  color: var(--danger);
}

.account-modal .form-error {
  margin: 0;
}

.totp-dialog {
  width: min(520px, 100%);
}

.subdialog-hint,
.login-totp-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

.subdialog-hint {
  margin: 6px 0 0;
}

.totp-instructions h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.two-factor-idle > p,
.two-factor-enabled > p,
.totp-instructions > p,
.recovery-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.two-factor-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  color: var(--muted);
  font-size: 12px;
}

.two-factor-loading .spinner {
  width: 18px;
  height: 18px;
}

.two-factor-idle,
.totp-instructions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.two-factor-idle .primary {
  align-self: flex-end;
}

.totp-enroll {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.totp-qr {
  padding: 6px;
  background: #fff;
}

.totp-qr img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.manual-secret code {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 6px;
  color: var(--accent);
  font: 600 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
}

.two-factor-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.two-factor-actions,
.recovery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recovery-panel {
  margin-bottom: 18px;
}

.recovery-panel strong {
  color: var(--warning);
  font-size: 13px;
}

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

.recovery-grid code {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--ink);
  text-align: center;
  font: 600 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .07em;
}

.two-factor-error {
  margin-top: 14px !important;
}

@media (max-width: 520px) {
  .account-modal {
    padding: 18px 16px;
  }

  .account-subdialog-backdrop {
    padding: 10px;
  }

  .account-subdialog {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 18px 16px;
  }

  .totp-enroll,
  .two-factor-fields {
    grid-template-columns: 1fr;
  }

  .totp-qr {
    width: 160px;
    margin: 0 auto;
  }
}

/* Shared application palette and primitives. Loaded after the sheets whose component-local
   legacy values it converges, exactly as in the Vue load order.

   This file also owns the single authoritative design-token block after the
   Leptos port de-duplicated the byte-identical copy that used to live in
   `responsive.css`. Both blocks had the same specificity, so this one (later in
   the cascade) already won every token; the only divergence was
   `--shadow-dialog`, where `#17212b33` here beat `#17212b29` there. Deleting the
   `responsive.css` copy is therefore a pure no-op for rendered output.

   Dead selectors dropped during the port, after confirming nothing in
   `web/src` (templates or modules) references them: transfer-center,
   transfer-ring, transfer-popover, transfer-list, download-center,
   download-ring, download-popover, download-list, download-empty,
   download-backdrop, download-dialog, merge-center, merge-ring, merge-popover,
   merge-list, merge-empty, task-icon,
   task-direction and task-actions. Rules that mixed live and dead selectors were
   split so the live half survives; nothing that a current component uses was
   removed. */
:root{
  --ink:#253b3b;--ink-subtle:#53685b;--muted:#657469;--muted-soft:#899687;
  --line:#e2e8dd;--line-strong:#cbd6c6;--surface:#fff;--paper:#f8f9f6;--surface-subtle:var(--paper);
  --surface-hover:#f0f4ec;--surface-selected:#edf3e7;--accent:#426b5e;--accent-hover:#335446;
  --accent-soft:#e9efdf;--accent-faint:#f3f6ef;--accent-border:#ccd9c2;--blue:var(--accent);--blue-hover:var(--accent-hover);
  --accent-light:#b5cbb3;--record-surface:#394c45;--record-groove:#34443e;
  --blue-soft:var(--accent-soft);--danger:#b84444;--danger-hover:#983737;--danger-soft:#fbefee;--danger-border:#edd0cd;
  --success:#387654;--success-soft:#edf5f0;--success-border:#cfdfd5;
  --warning:#93622b;--warning-soft:#fbf4e8;--warning-border:#ead9bc;--radius-sm:7px;--radius-md:10px;
  --radius-lg:14px;--radius-xl:18px;--shadow-popover:0 12px 32px #17212b1a;
  --shadow-dialog:0 24px 64px #17212b33;--focus-ring:0 0 0 3px #426b5e2e;
  --control-sm:36px;--control-md:40px;--control-lg:44px;--space-1:4px;--space-2:8px;
  --space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px
}
.dialog-backdrop{
  position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:20px;
  background:#0f172a73;backdrop-filter:blur(5px)
}
.app-dialog{
  display:grid;grid-template-columns:46px 1fr;width:min(440px,100%);padding:24px;
  border:1px solid var(--line);border-radius:19px;background:#fff;box-shadow:0 30px 90px #0f172a4d
}
.dialog-icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent)
}
.dialog-icon.danger{background:var(--danger-soft);color:var(--danger)}
.dialog-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dialog-copy h2{margin:2px 0 7px;color:var(--ink);font-size:18px}
.dialog-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.65;white-space:pre-line}
.app-dialog input{grid-column:1/-1;width:100%;margin-top:20px;padding:12px 13px;outline:none}
.app-dialog footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.app-dialog .dialog-confirm{border:0;background:var(--accent);color:#fff}
.app-dialog .dialog-confirm.danger{background:var(--danger)}
.app-dialog .dialog-confirm:disabled{opacity:.5}
.dialog-backdrop,.account-subdialog-backdrop{background:#17212b66;backdrop-filter:none}
.app-dialog{border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-dialog)}
.app-dialog{padding:var(--space-6);border-color:var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-dialog)}
.dialog-icon{border-radius:var(--radius-md);background:var(--blue-soft);color:var(--blue)}
.dialog-copy h2{color:var(--ink);font-size:18px}.dialog-copy p{color:var(--muted)}
.app-dialog input{border:1px solid var(--line-strong);border-color:var(--line-strong);border-radius:var(--radius-md)}.app-dialog input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.app-dialog button{min-height:39px;padding:0 16px;border-radius:var(--radius-md);font-weight:750}.app-dialog .dialog-confirm{background:var(--blue)}

.selection-toolbar{position:sticky;z-index:9;top:90px;display:flex;align-items:center;gap:12px;min-height:58px;margin:-6px 0 20px;padding:8px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 8px 24px #17212b12}
.selection-close{display:grid;place-items:center;flex:0 0 auto;min-width:48px;height:36px;padding:0 10px;border:0;border-radius:9px;background:var(--surface-subtle);color:var(--muted);font-size:12px}.selection-close:hover{background:var(--accent-soft);color:var(--accent-hover)}
.selection-summary{display:flex;flex:0 0 auto;flex-direction:column;gap:2px;min-width:126px;padding-right:13px;border-right:1px solid var(--line)}.selection-summary b{color:var(--ink);font-size:12px}.selection-summary small{color:var(--muted);font-size:10px}
.selection-action-groups{display:flex;align-items:center;gap:3px;flex:1;min-width:0}.selection-management{display:flex;align-items:center;gap:3px;flex:0 0 auto}.selection-actions{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto}:is(.selection-actions,.selection-management)>button{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:var(--ink-subtle);font-size:11px;font-weight:750;white-space:nowrap}:is(.selection-actions,.selection-management)>button:hover{background:var(--accent-soft);color:var(--accent-hover)}:is(.selection-actions,.selection-management)>button.danger:hover{background:var(--danger-soft);color:var(--danger)}:is(.selection-actions,.selection-management) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:850px){.selection-toolbar{top:72px;flex-wrap:wrap;gap:8px}.selection-summary{min-width:0;flex:1;padding:0;border:0}.selection-summary small{display:none}.selection-action-groups{width:100%;flex-basis:100%}.selection-actions{flex:1}:is(.selection-actions,.selection-management)>button{flex-direction:column;gap:2px;min-width:54px;padding:4px 8px;font-size:9px}:is(.selection-actions,.selection-management) svg{width:19px;height:19px}}

/* Native selection controls remain available to keyboards and screen readers only. */
.selection-checkbox{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}
.selection-checkbox input{margin:0}

/* Transform-only motion leaves the listing and batch toolbar geometry unchanged. */
.selection-mode>:is(.file-card,.library-card,.home-card){cursor:pointer;transform:none;transform-origin:center;transition:transform 180ms ease,box-shadow 180ms ease,outline-color 180ms ease}
.selection-mode>:is(.file-card,.library-card,.home-card):not(.selected){animation:selection-sway 2.8s ease-in-out infinite;animation-delay:var(--selection-delay,0s)}
.selection-mode>:is(.file-card,.library-card,.home-card):nth-child(5n+2){--selection-delay:-.45s}
.selection-mode>:is(.file-card,.library-card,.home-card):nth-child(5n+3){--selection-delay:-1.65s}
.selection-mode>:is(.file-card,.library-card,.home-card):nth-child(5n+4){--selection-delay:-.9s}
.selection-mode>:is(.file-card,.library-card,.home-card):nth-child(5n){--selection-delay:-2.2s}
.selection-mode>:is(.file-card,.library-card,.home-card).selected{animation:none;transform:scale(.985);outline:none;box-shadow:0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}
.selection-mode>:is(.file-card,.library-card,.home-card):has(.selection-checkbox input:focus-visible){outline:1px solid var(--accent);outline-offset:-1px}
@keyframes selection-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.selection-mode>:is(.file-card,.library-card,.home-card):not(.selected){animation:none}.selection-mode>:is(.file-card,.library-card,.home-card){transition:none}}

.selection-mode>:is(.file-card,.library-card,.home-card).selected::after{content:"";position:absolute;z-index:3;inset:0;border:1px solid color-mix(in srgb,var(--accent) 75%,transparent);border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.selection-management .action-menu>summary{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;height:38px;padding:0 11px;border-radius:9px;font-size:11px;font-weight:750;color:var(--ink-subtle)}
.selection-management .action-menu>summary[aria-disabled="true"],.selection-management>button:disabled{opacity:.5;cursor:wait}
.selection-management .action-menu>summary svg{width:18px;height:18px}
.selection-management-panel>button{flex-direction:row;min-height:38px;padding:9px 11px;font-size:12px}
@media(max-width:850px){.selection-management .action-menu>summary{flex-direction:column;gap:2px;min-width:54px;height:auto;min-height:48px;padding:4px 8px;font-size:9px}.selection-management .action-menu>summary svg{width:19px;height:19px}}

@media(max-width:850px){.selection-management .action-menu>summary svg{order:-1}}

.share-modal{width:min(480px,100%);padding:22px}.share-modal>header{align-items:center;margin-bottom:16px}.share-title{display:flex;align-items:center;gap:12px;min-width:0}.share-title>span{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:21px}.share-title>div{min-width:0}.share-title h2{font-size:19px}.share-title p{overflow:hidden;max-width:330px;margin:4px 0 0;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.share-description{margin:0 0 17px;color:var(--ink-subtle);font-size:13px;line-height:1.65}.share-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.share-link input{min-width:0;padding:11px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-subtle);color:var(--ink-subtle);outline:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.share-link input:focus{border-color:var(--accent-border);box-shadow:var(--focus-ring)}.share-link button{min-width:96px}.share-created{margin:9px 2px 0;color:var(--muted);font-size:11px}.share-create{width:100%}.share-modal .state.small{min-height:130px}.share-modal .form-error{margin:12px 0 0}.share-footer{justify-content:space-between!important;margin-top:18px!important;padding-top:16px;border-top:1px solid var(--line)}
.danger-text{border:0;background:transparent;color:var(--danger);font-weight:700}.danger-text:hover{color:var(--danger-hover)}
@media(max-width:850px){.share-link{grid-template-columns:1fr}.share-link button{min-height:42px}.share-footer{gap:10px}.share-footer button{flex:1}}
@media(max-width:720px){.share-title p{max-width:240px}}

.modal-backdrop.editing{padding:18px;background:#142033b8;backdrop-filter:blur(10px)}.document-editor{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1400px,100%);height:min(880px,calc(100vh - 36px));overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 34px 100px #07111f80}.editor-header{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:18px;min-height:70px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-subtle)}.editor-title{display:flex;align-items:center;gap:11px;min-width:0}.editor-title>span:first-child{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:21px}.editor-title>div{display:flex;flex-direction:column;gap:3px;min-width:0}.editor-title strong{overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.editor-title small{color:var(--muted);font-size:10px}.editor-title input{width:min(360px,100%);padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);font-weight:700;outline:none}.editor-title input:focus{border-color:var(--accent-border);box-shadow:var(--focus-ring)}.editor-meta{flex:0 0 auto;padding-left:11px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;white-space:nowrap}.editor-meta b{color:var(--muted);font-weight:650}
.editor-tabs{display:flex;padding:3px;border-radius:10px;background:var(--surface-hover)}.editor-tabs button{min-width:64px;padding:8px 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:700}.editor-tabs button.active{background:#fff;color:var(--accent);box-shadow:0 2px 8px #0f172a14}.editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.editor-actions .primary{padding:9px 17px}.editor-header-message{max-width:180px;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.editor-header-message.error{color:var(--danger)}.editor-close{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:25px}.editor-close:hover{background:var(--surface-hover);color:var(--ink)}.unsaved-dot{color:var(--warning);font-size:10px;font-weight:700}
.editor-workspace{display:grid;min-height:0;background:#fff}.editor-workspace.mode-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.editor-workspace textarea{width:100%;height:100%;min-height:0;resize:none;border:0;background:#fff;color:var(--ink);padding:30px 34px;outline:none;font:14px/1.75 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;tab-size:2}.editor-workspace.mode-split textarea{border-right:1px solid var(--line)}.markdown-preview{min-width:0;margin:0;padding:30px 40px;overflow:auto;color:var(--ink);font-size:15px;line-height:1.75}.markdown-preview>:first-child{margin-top:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{margin:1.5em 0 .65em;color:var(--ink);line-height:1.25}.markdown-preview h1{padding-bottom:.35em;border-bottom:1px solid var(--line);font-size:2em}.markdown-preview h2{font-size:1.5em}.markdown-preview h3{font-size:1.2em}.markdown-preview a{color:var(--accent)}.markdown-preview code{padding:.16em .38em;border-radius:5px;background:var(--surface-hover);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.markdown-preview pre{overflow:auto;padding:16px;border-radius:10px;background:#111827;color:#e5edf7}.markdown-preview pre code{padding:0;background:transparent}.markdown-preview blockquote{margin-left:0;padding-left:16px;border-left:4px solid var(--accent-border);color:var(--muted)}.markdown-preview img{max-width:100%}.markdown-preview table{border-collapse:collapse}.markdown-preview th,.markdown-preview td{padding:7px 10px;border:1px solid var(--line)}.editor-loading{min-height:0}
@media(max-width:1100px){.editor-header{grid-template-columns:minmax(180px,1fr) auto}.editor-tabs{grid-row:2;grid-column:1/-1;justify-self:center}.document-editor{height:calc(100vh - 24px)}.modal-backdrop.editing{padding:12px}}
@media(max-width:720px){.document-editor{height:100%;border-radius:0}.modal-backdrop.editing{padding:0}.editor-header{grid-template-columns:minmax(0,1fr) auto;gap:9px}.editor-tabs{width:100%}.editor-tabs button{flex:1}.editor-actions .unsaved-dot{display:none}.editor-actions .primary{padding:9px 12px}.editor-workspace.mode-split{grid-template-columns:1fr}.editor-workspace.mode-split textarea{display:none}.editor-workspace textarea,.markdown-preview{padding:22px 18px}}
@media(max-width:720px){.editor-meta>span{display:none}.editor-meta{padding-left:8px}.editor-header-message{display:none}}
@media(max-width:520px){.editor-title{gap:7px}.editor-title>span:first-child{width:36px;height:36px}.editor-meta{padding-left:7px;font-size:9px}}
.document-editor{height:min(880px,calc(100vh - 36px));height:min(880px,calc(100dvh - 36px))}
.editor-draft-recovery { padding: .75rem 1rem; background: var(--surface); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* 连续 reading flow 阅读器样式。
   分页由浏览器原生 CSS columns 完成：正文装进一个连续的 .rf-flow 多栏
   容器（chunk 只是内容分组，不是页面）；翻页 = 对 .rf-flow 做合成层
   translateX。内容规则沿用原共享样式表（.revaro-content），随前端打包。 */

/* ---- 正文内容规则（作用域 .revaro-content） ---- */

:root {
  --revaro-font-family: "Noto Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
  --revaro-font-size: 19px;
  --revaro-line-height: 1.7;
  --revaro-ink: #29251f;
  --revaro-paper: #f7f3eb;
  --revaro-muted: #827a6f;
}

.revaro-content {
  box-sizing: border-box;
  /* flow-root：建立 BFC，阻止首/末子元素外边距穿透锁定容器 */
  display: flow-root;
  orphans: 1;
  widows: 1;
  font-family: var(--revaro-font-family);
  font-size: var(--revaro-font-size);
  line-height: var(--revaro-line-height);
  color: var(--revaro-ink);
  overflow-wrap: anywhere;
}

.revaro-content.txt {
  white-space: pre-wrap;
}

.revaro-content h1,
.revaro-content h2,
.revaro-content h3,
.revaro-content h4 {
  line-height: 1.35;
  margin: 0.4em 0 0.7em;
  break-inside: avoid;
}

.revaro-content p {
  margin: 0;
  text-indent: 2em;
}

.revaro-content blockquote,
.revaro-content pre,
.revaro-content figure,
.revaro-content table,
.revaro-content li {
  margin: 0.2em 0 0.3em;
}

/* 图片/插画：高度上限 = 栏高（--revaro-col-height 由 JS 以像素注入）。
   服务端已按图片固有尺寸写入 width/height 属性，加载前后不产生位移。 */
.revaro-content img,
.revaro-content svg,
.revaro-content video {
  max-width: 100%;
  max-height: var(--revaro-col-height, none);
  height: auto;
  object-fit: contain;
  break-inside: avoid;
  display: block;
  margin: 0 auto;
}

.revaro-content figure img,
.revaro-content figure svg,
.revaro-content figure video {
  max-height: calc(var(--revaro-col-height, none) - 2em);
}

.revaro-content figure {
  max-height: var(--revaro-col-height, none);
  margin: 0 auto;
  text-align: center;
}

.revaro-content figcaption {
  font-size: 0.85em;
  color: var(--revaro-muted);
  margin: 0.4em 0 0;
}

.revaro-content figure,
.revaro-content table,
.revaro-content pre {
  break-inside: avoid;
}

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

.revaro-content pre {
  white-space: pre-wrap;
}

.revaro-content ruby rt {
  font-size: 0.55em;
}

/* TXT 文本块：无段首缩进、块间无空隙（连续 pre-wrap 观感） */
.revaro-content.txt .txt-blk {
  margin: 0;
  padding: 0;
}

/* ---- 阅读器布局 ---- */

.rf-viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.rf-pager {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 分页载体：多栏连续流。宽/高/边距/栏宽/栏距/字号等排版参数由 JS
   按视口与偏好内联设置（栏距恒等于 2×侧边距，栏距 + 栏宽 = 屏宽，
   因此每翻一页恰好平移一屏宽，栏内容始终居中于屏）。
   注意：不给 .rf-flow 常驻 will-change:transform——只在拖动/翻页动画期间
   由 JS 临时开启并在结束后释放，避免大图旁文字被过度合成而轻微发糊。 */
.rf-flow {
  position: absolute;
  top: 0;
  left: 0;
  /* 多栏溢出向右延伸，本容器不裁剪（由 .rf-pager 裁） */
  overflow: visible;
}

.rf-chunk {
  margin: 0;
  padding: 0;
}

/* 稳定分页边界：服务端在每个 spine 起始块（全书首块除外）注入
   data-spine-start，这里强制其从新栏开始。窗口虚拟化只允许以 spine
   起始块所在 chunk 为排版原点——强制分栏保证窗口增删（增删的都只在
   当前 spine 边界之外）不改变当前 spine 内的任何 page boundary。 */
.rf-flow [data-spine-start] {
  break-before: column;
}

/* 明暗主题只换 CSS 变量（ink/paper），不重排 */
#reader-view.dark {
  --revaro-ink: #dedbd3;
  --revaro-paper: #1e1b17;
  --revaro-muted: #9a938a;
}

.v2-lineheight {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.v2-lineheight .font-step.v2-active {
  color: var(--accent, #426b5e);
  border-color: var(--accent, #426b5e);
}

@media (prefers-reduced-motion: reduce) {
  .rf-flow {
    transition: none !important;
  }
}

/* Reader controls share the paper palette; their visibility never changes pagination.
   The two `body.reader-open` rules were dropped during the Leptos port: no code
   ever sets that class (the reader locks scrolling through `usePreviewDialog`'s
   inline `body.style.overflow` instead), so they were dead. */
#reader-view.reader-shell {
  --paper: #f7f4ee;
  --ink: #34322e;
  --muted: #858078;
  --line: #e6e0d6;
  --surface-hover: #eeeadf;
  --revaro-paper: var(--paper);
  --revaro-ink: var(--ink);
  --revaro-muted: var(--muted);
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
#reader-view.reader-shell.dark {
  --paper: #222524;
  --ink: #d8d9d3;
  --muted: #a0a49e;
  --line: #353a37;
  --accent: var(--accent-light);
  --surface-hover: #2e3330;
}
#reader-view .hidden { display: none; }
.reader-bar {
  position: fixed;
  z-index: 8;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  height: calc(58px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.reader-bar-title { min-width: 0; padding: 0 16px; text-align: center; }
.reader-bar-title strong { display: block; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.reader-icon-btn, .toc-heading button {
  display: grid; place-items: center; justify-self: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
}
.reader-progress-ring { position: relative; display: grid; place-items: center; justify-self: center; width: 44px; height: 44px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reader-progress-ring svg { position: absolute; inset: 5px; width: 34px; height: 34px; fill: none; transform: rotate(-90deg); }
.reader-progress-ring circle { stroke-width: 1.8; }
.reader-progress-ring-track { stroke: var(--line); }
.reader-progress-ring-value { stroke: var(--accent); transition: stroke-dashoffset .2s ease; }
.reader-progress-ring-value.empty { opacity: 0; }
.reader-progress-ring b { font-size: 11px; font-weight: 500; }
.reader-viewport { position: relative; height: 100dvh; overflow: hidden; background: var(--paper); touch-action: pan-y; }
.reader-loading { position: absolute; z-index: 7; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; color: var(--muted); background: var(--paper); font-size: 13px; }
.page-zone { position: absolute; z-index: 6; top: 0; bottom: 0; width: 33.3334%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.page-zone:focus { outline: none; }
.page-zone:focus-visible { outline: 1px solid var(--accent); outline-offset: -6px; }
.prev-zone { left: 0; } .center-zone { left: 33.3333%; } .next-zone { right: 0; }
.reader-footer { position: fixed; z-index: 8; inset: auto 0 0; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: var(--paper); }
.reader-actions { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 420px; min-height: 60px; margin: auto; }
.reader-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60px; padding: 6px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); }
.reader-action-btn svg { width: 22px; height: 22px; stroke-width: 1.6; }
.reader-action-btn span { font-size: 11px; line-height: 1.4; }
.reader-action-btn[aria-expanded="true"] { color: var(--accent); background: var(--surface-hover); }
.reader-icon-btn:hover, .reader-action-btn:hover, .toc-heading button:hover, .font-step:hover { color: var(--ink); background: var(--surface-hover); }
#reader-view button:focus-visible, #reader-view input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tools-hidden .reader-bar, .tools-hidden .reader-footer, .tools-hidden .font-popover { display: none; }
.font-popover { position: fixed; z-index: 9; left: 50%; bottom: calc(94px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; width: min(360px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--muted); box-shadow: 0 8px 32px #00000012; transform: translateX(-50%); }
.reader-setting-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.reader-setting-row > span { flex: 0 0 30px; }
.reader-setting-row input { min-width: 0; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.font-step { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); font-size: 13px; }
.reader-setting-row.v2-lineheight .font-step { flex: 1; }
.toc-scrim { position: fixed; z-index: 18; inset: 0; background: #151b193d; }
.toc-drawer { position: fixed; z-index: 19; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(360px, 90vw); height: 100dvh; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper); box-shadow: -8px 0 40px #00000014; transform: translateX(105%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.toc-drawer.open { transform: none; visibility: visible; transition: transform .2s ease; }
.toc-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); }
.toc-heading h2 { margin: 0; font-size: 16px; font-weight: 500; }
.toc-heading svg { width: 20px; height: 20px; stroke-width: 1.7; }
.toc-list { flex: 1; overflow: auto; padding: 12px; }
.toc-item { display: block; width: 100%; min-height: 44px; padding: 12px 14px 12px calc(14px + var(--toc-indent, 0px)); border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; line-height: 1.6; }
.toc-item:hover, .toc-item.active { background: var(--surface-hover); color: var(--ink); }
.toc-item.active { color: var(--accent); font-weight: 600; }
.toc-empty { padding: 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .toc-drawer, .reader-progress-ring-value { transition: none; } }

.video-player-shell {
  --player-bg: #090b0e; --player-text: #f2f4f5; --player-muted: #b2bbc4; --player-accent: var(--accent-light); --player-track: #ffffff38;
  position: relative; isolation: isolate; width: 100%; height: 100%; min-width: 0; overflow: hidden; background: var(--player-bg); color: var(--player-text); outline: none;
}
.video-player-shell:fullscreen { width: 100vw; height: 100dvh; }
.video-player-shell video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--player-bg); }
.video-player-shell.cursor-hidden, .video-player-shell.cursor-hidden video { cursor: none; }
.video-top-shade { position: absolute; z-index: 8; inset: 0 0 auto; padding: max(12px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(#090b0ea6, transparent); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; pointer-events: none; }
.video-top-shade.visible { opacity: 1; visibility: visible; }
.video-title-group { display: flex; align-items: center; gap: 12px; }
.video-title-group strong { overflow: hidden; font-size: 14px; line-height: 1.5; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.video-back { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; pointer-events: auto; }
.video-back svg { width: 24px; height: 24px; stroke-width: 1.7; }
.video-back:hover { background: #ffffff14; }
.video-center-play { position: absolute; z-index: 6; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 1px solid #ffffff26; border-radius: 50%; background: #15191eb3; color: #fff; transform: translate(-50%,-50%); }
.video-center-play svg { width: 28px; height: 28px; }
.video-controls { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; min-width: 0; padding: 36px max(24px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); background: linear-gradient(transparent, #090b0ebf); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; pointer-events: none; }
.video-controls.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.video-seek { display: block; width: 100%; height: 32px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.video-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 8px; background: linear-gradient(to right, var(--player-accent) var(--video-progress), var(--player-track) var(--video-progress)); }
.video-seek::-moz-range-track { height: 3px; border-radius: 8px; background: linear-gradient(to right, var(--player-accent) var(--video-progress), var(--player-track) var(--video-progress)); }
.video-seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; appearance: none; border: 0; border-radius: 50%; background: var(--player-text); }
.video-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--player-text); }
.video-control-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.video-icon-button { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; }
.video-icon-button svg { width: 22px; height: 22px; stroke-width: 1.7; }
.video-icon-button:hover { background: #ffffff12; }
.video-time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-time > span { color: var(--player-muted); }
.video-desktop-volume { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.video-volume { width: 86px; height: 44px; accent-color: var(--player-accent); }
.video-control-spacer { flex: 1; min-width: 0; }
.video-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 4px 12px; font-size: 12px; }
.video-setting > span { flex-shrink: 0; color: var(--player-muted); }
.video-setting select { max-width: 190px; min-width: 76px; height: 40px; padding: 0 8px; border: 1px solid var(--media-line); border-radius: 8px; background: var(--media-panel); color: inherit; font: inherit; }
.video-setting input { width: 140px; min-width: 0; height: 44px; accent-color: var(--player-accent); }
.video-mobile-volume { display: none; }
.video-loading { position: absolute; z-index: 7; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; background: #090b0e99; color: var(--player-text); text-align: center; pointer-events: none; }
.video-loading span, .video-buffering span { width: 28px; height: 28px; border: 2px solid #ffffff26; border-top-color: var(--player-accent); border-radius: 50%; animation: video-spin .8s linear infinite; }
.video-loading strong { font-size: 14px; font-weight: 500; }
.video-loading small { font-size: 12px; color: var(--player-muted); }
.video-loading.compact, .video-buffering { position: absolute; z-index: 7; inset: auto auto 120px 50%; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border: 1px solid #ffffff1a; border-radius: 30px; background: #191d23c7; color: var(--player-text); transform: translateX(-50%); pointer-events: none; }
.video-buffering { top: 50%; bottom: auto; transform: translate(-50%,-50%); }
.video-loading.compact span, .video-buffering span { flex-shrink: 0; width: 18px; height: 18px; }
.video-loading.compact strong, .video-buffering strong { font-size: 12px; font-weight: 450; }
.video-error { position: absolute; z-index: 10; top: 50%; left: 50%; width: min(360px, calc(100% - 32px)); max-height: 65%; overflow: auto; padding: 24px; border: 1px solid #ffffff1a; border-radius: 16px; background: #20252bf2; text-align: center; transform: translate(-50%,-50%); }
.video-error > p { margin: 0 0 16px; font-size: 14px; }
.video-error > button { min-height: 44px; padding: 0 20px; border: 1px solid #ffffff24; border-radius: 9px; background: #ffffff12; color: inherit; }
@keyframes video-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .video-top-shade { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .video-title-group { gap: 4px; }
  .video-title-group strong { font-size: 13px; }
  .video-controls { padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .video-control-row { gap: 2px; }
  .video-desktop-volume { display: none; }
  .video-mobile-volume { display: flex; }
  .video-time { font-size: 11px; }
  .video-controls .action-menu-panel { max-height: min(60dvh, 420px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .video-top-shade, .video-controls { transition: none; } }


/* Ported component scoped blocks (see the header note above). */
/* Shared application header, navigation and file actions. */
.topbar { --header-icon-scale:1.14; --header-brand-size:28px; --header-brand-padding:6px; --header-avatar-size:34px; --header-status-size:34px; --header-padding:clamp(18px,3vw,40px); position:sticky; top:0; z-index:22; display:flex; justify-content:space-between; align-items:center; gap:18px; height:78px; padding:0 var(--header-padding); border-bottom:1px solid var(--line); background:var(--surface); }
.topbar .top-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; min-width:0; flex:0 0 auto; }
.app-navigation { display:flex; align-items:center; height:100%; justify-content:center; gap:8px; }
.topbar>.app-navigation { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:max-content; height:44px; }
.app-navigation a { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:var(--radius-md); color:var(--muted); text-decoration:none; white-space:nowrap; font-size:14px; }
.app-navigation a:hover,.app-navigation a.active { color:var(--accent); background:var(--accent-soft); }
.app-navigation a svg { width:21px; height:21px; stroke-width:1.7; }
/* Enlarge the artwork together while preserving the header and button footprints. */
.topbar>.app-navigation a svg,.topbar .top-actions>button svg,.topbar .top-actions>.action-menu>summary svg,.topbar .search-toggle svg { width:calc(21px * var(--header-icon-scale)); height:calc(21px * var(--header-icon-scale)); }
.app-navigation a:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.app-navigation a.active::after { content:""; position:absolute; bottom:-6px; left:50%; width:20px; height:3px; transform:translateX(-50%); background:var(--accent); border-radius:3px 3px 0 0; }
.mobile-navigation { display:none; }
@media(min-width:851px) and (max-width:1220px) { .topbar { --header-padding:18px; gap:12px; } .topbar .top-actions { gap:3px; } .topbar .account-button { margin-left:0; } }
@media(max-width:850px) {
 .topbar { display:flex; justify-content:space-between; height:calc(64px + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); }
 .topbar>.app-navigation { display:none; }
 .mobile-navigation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; bottom:0; left:0; right:0; height:calc(58px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); z-index:34; background:var(--surface); border-top:1px solid var(--line); gap:0; }
 .mobile-navigation > a,.mobile-library-menu { min-width:0; height:100%; }
 .mobile-navigation > a,.mobile-library-menu > .action-menu > summary { justify-content:center; width:100%; padding:0 6px; height:100%; border-radius:0; }
 .mobile-library-menu > .action-menu { height:100%; }
 .mobile-library-menu > .action-menu > summary { position:relative; color:var(--muted); }
 .mobile-library-menu.active > .action-menu > summary,.mobile-library-menu > .action-menu[open] > summary { color:var(--accent); background:var(--accent-soft); }
 .mobile-library-menu > .action-menu > summary:focus-visible { outline:none; box-shadow:var(--focus-ring); }
 .mobile-navigation > a.active::after,.mobile-library-menu.active > .action-menu > summary::after { content:""; position:absolute; top:0; bottom:auto; left:50%; width:20px; height:3px; transform:translateX(-50%); background:var(--accent); border-radius:3px 3px 0 0; }
 .mobile-library-menu-panel > a { justify-content:flex-start; gap:12px; width:100%; height:auto; min-height:48px; padding:12px; border-radius:var(--radius-sm); }
 .mobile-library-menu-panel > a.active::after { display:none; }
 .mobile-library-menu-panel > a svg { flex-shrink:0; }
}
.topbar .topbar-left{display:flex;align-items:center;gap:8px;min-width:0}
.topbar .brand-logo{display:block;width:auto;height:calc(var(--header-brand-size) * var(--header-icon-scale))}
.topbar .brand-button{min-width:0;height:calc(var(--header-brand-size) + var(--header-brand-padding));padding-top:0;padding-bottom:0}
.topbar .account-button{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;margin:0;padding:0;border-radius:50%;}
.topbar .avatar-badge{width:calc(var(--header-avatar-size) * var(--header-icon-scale));height:calc(var(--header-avatar-size) * var(--header-icon-scale));font-size:calc(1em * var(--header-icon-scale));}
@media(max-width:850px) { .topbar { padding-left:max(14px,env(safe-area-inset-left,0px)); padding-right:max(14px,env(safe-area-inset-right,0px)); } .topbar { --header-brand-size:24px; } }

/* The search surface expands left in the header; its right edge stays attached to the trigger. */
.topbar .topbar-search { position:relative; z-index:2; flex:0 0 auto; width:44px; height:44px; transition:width .24s ease; }
.topbar .topbar-search.expanded { width:min(var(--search-width,208px),420px,calc(50vw - var(--header-padding) - (7 * 44px + 6 * 8px) / 2 - 3 * (44px + 5px) - 18px)); }
.topbar .search-surface { position:relative; display:flex; align-items:center; width:100%; height:44px; margin:0; padding:0; overflow:hidden; border:0; border-radius:22px; background:transparent; transition:background-color .2s ease, box-shadow .2s ease; }
.topbar .topbar-search.expanded .search-surface { padding-left:12px; background:var(--surface-subtle); box-shadow:inset 0 0 0 1px var(--line); }
.topbar .topbar-search.expanded .search-surface:focus-within { box-shadow:inset 0 0 0 1px var(--accent-border); }
/* Compact desktop search uses the central space while editing. */
@media(min-width:851px) and (max-width:1550px) {
 .topbar.searching>.app-navigation { visibility:hidden; }
 .topbar .topbar-search.expanded { width:min(var(--search-width,208px),420px); }
}
.topbar .search-toggle {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent);
}
.topbar .search-toggle:hover { background: var(--accent-soft); }
.topbar .search-fields {
  display: flex; align-items: center; flex: 1; min-width: 0; height: 100%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
}
.topbar .topbar-search.expanded .search-fields { opacity: 1; visibility: visible; pointer-events: auto; }
.topbar .search-measure,.topbar .search-fields input[type="search"] {
  flex: 1; min-width: 0; width: 100%; height: 34px; margin: 0; padding: 0 4px 0 0;
  border: 0; border-radius: 0; outline: none; box-shadow: none; appearance: none;
  background: transparent; color: var(--ink); font: inherit; font-size: 14px;
}
.topbar .search-measure { position:absolute; left:0; top:0; width:max-content; height:auto; padding:0; visibility:hidden; pointer-events:none; white-space:pre; }
.topbar .search-fields input[type="search"]::-webkit-search-cancel-button,
.topbar .search-fields input[type="search"]::-webkit-search-decoration { display: none; }
.topbar .search-close {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 26px;
  margin-right:0; padding: 0; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; box-shadow: none; background: transparent; color: var(--muted);
}
.topbar .search-close svg { width:calc(17px * var(--header-icon-scale)); height:calc(17px * var(--header-icon-scale)); }
.topbar .search-close:hover { color: var(--ink-subtle); }
@media(max-width:850px) {
 .topbar.searching .topbar-left { display:none; }
 .topbar.searching .top-actions { flex:1; }
 .topbar.searching .top-actions>:not(.topbar-search) { flex-shrink:0; }
 .topbar .topbar-search.expanded { width:min(var(--search-width,208px),420px); flex-shrink:1; min-width:0; }
}
@media(max-width:1440px) {
 .topbar .search-measure,.topbar .search-fields input[type="search"] { font-size:13px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .topbar-search, .topbar .search-surface, .topbar .search-fields { transition: none; }
}

/* Topbar actions reuse the shared disclosure surface and SVG treatment. */
.topbar .top-actions > .action-menu > summary { color:var(--accent); border-radius:50%; }
.topbar .top-actions button:focus,.topbar summary:focus { outline:none; box-shadow:none; }
.topbar .top-actions button:focus-visible,.topbar summary:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.topbar .action-menu > summary[aria-disabled="true"] { opacity:.4; cursor:default; }
.topbar .topbar-menu > .topbar-menu-panel { left:auto; right:0; top:calc(100% + 8px); transform:none; width:300px; min-width:0; max-width:calc(100vw - 16px); max-height:min(70vh,calc(100dvh - 96px)); padding:8px; overscroll-behavior:contain; }
.topbar-menu-backdrop { display:none; }
.topbar-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 8px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.topbar-menu-heading h2 { margin:0; color:var(--ink); font-size:14px; font-weight:600; }
.topbar-menu-close { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--radius-sm); color:var(--muted); background:transparent; }
.topbar-menu-close:hover { background:var(--surface-hover); }
.topbar-menu-close svg { width:18px; height:18px; }
.topbar .topbar-menu-panel > .selection-toggle,.topbar .topbar-menu-panel .embedded-menu > summary { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; height:auto; padding:10px 12px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink-subtle); font-size:13px; text-align:left; }
.topbar .topbar-menu-panel > .selection-toggle:hover,.topbar .topbar-menu-panel > .selection-toggle.active,.topbar .topbar-menu-panel .embedded-menu > summary:hover,.topbar .topbar-menu-panel .embedded-menu[open] > summary { background:var(--accent-soft); color:var(--accent); }
.topbar .topbar-menu-panel > .selection-toggle svg,.topbar .topbar-menu-panel .embedded-menu > summary svg { width:21px; height:21px; flex:0 0 21px; color:var(--accent); stroke-width:1.7; }
.topbar .topbar-menu-panel .menu-item-label { position:static; flex:1; min-width:0; color:inherit; font-size:inherit; font-weight:500; }
.topbar .topbar-menu-panel .embedded-menu > summary > svg:last-child { width:16px; height:16px; flex-basis:16px; color:var(--muted); transition:transform .15s ease; }
.topbar .topbar-menu-panel .embedded-menu[open] > summary > svg:last-child { transform:rotate(180deg); }
.topbar .embedded-menu > .action-menu-panel { position:static; width:100%; min-width:0; max-width:100%; max-height:360px; margin:4px 0 8px; padding:5px; transform:none; box-shadow:none; background:var(--surface-subtle); }
.topbar .embedded-menu > .action-menu-panel > button { min-height:38px; padding:8px 12px 8px 44px; font-size:13px; }
.topbar .embedded-menu > .topbar-popover { padding:12px; }

@media(min-width:851px) and (max-width:1220px) {
 .topbar > .app-navigation { gap:3px; }
 .topbar > .app-navigation a { width:40px; }
 .topbar .top-actions > .action-menu > summary,.topbar .account-button,.topbar .topbar-search,.topbar .search-toggle { width:34px; flex-basis:34px; }
}
@media(min-width:851px) and (max-width:980px) {
 .topbar > .app-navigation { gap:2px; }
 .topbar > .app-navigation a { width:32px; }
 .topbar .top-actions { gap:2px; }
}
@media(max-width:850px) {
 .topbar { --header-status-size:32px; }
 .topbar .top-actions { gap:2px; }
 .topbar .top-actions > .action-menu > summary,.topbar .account-button,.topbar .topbar-search,.topbar .search-toggle { width:34px; height:40px; flex-basis:34px; }
 .mobile-navigation a svg,.mobile-library-menu > .action-menu > summary svg { width:20px; height:20px; stroke-width:1.7; }
 .topbar:has(.topbar-menu[open]),.mobile-navigation:has(.topbar-menu[open]) { z-index:36; }
 body:has(.topbar-menu[open]) { overflow:hidden; }
 .topbar-menu[open] > .topbar-menu-backdrop { display:block; position:fixed; inset:0; z-index:1; background:#0f172a66; }
 .topbar .topbar-menu > .topbar-menu-panel,.mobile-library-menu .mobile-library-menu-panel { position:fixed; z-index:2; inset:auto 0 0; transform:none; width:100%; min-width:0; max-width:100%; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); padding:8px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--shadow-dialog); }
 .topbar-menu-panel::before,.mobile-library-menu-panel::before { content:""; display:block; width:36px; height:4px; margin:2px auto 8px; border-radius:var(--radius-sm); background:var(--line-strong); }
}
@media(max-width:520px) { .topbar { --header-brand-padding:12px; } }
@media(max-width:430px) { .topbar { --header-avatar-size:30px; --header-status-size:28px; } }
@media(max-width:350px) {
 .topbar { --header-brand-size:18px; --header-icon-scale:1.08; padding-left:8px; padding-right:8px; gap:4px; }
 .topbar .top-actions { gap:1px; }
 .topbar .topbar-search.expanded .search-surface { padding-left:10px; }
 .topbar .search-measure,.topbar .search-fields input[type="search"] { font-size:12px; }
 .topbar .search-close { flex-basis:24px; width:24px; }
}
/* Search still sizes itself by content when the surrounding tools are compact. */
.topbar .topbar-search.expanded { flex-basis:auto; }
.topbar .search-surface { height:100%; }
@media(prefers-reduced-motion:reduce) { .topbar .topbar-menu-panel .embedded-menu > summary > svg:last-child { transition:none; } }

/* Account-independent disclosures share the existing menu anchor and surface. */
.topbar .topbar-popover { padding:14px; max-height:min(var(--popover-available-height,70vh),520px); overflow:auto; cursor:default; }
.topbar .public-links-popover { width:100%; min-width:0; }
.topbar .system-status-popover { width:200px; min-width:0; }
.popover-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.popover-heading h2 { margin:0; color:var(--ink); font-size:14px; font-weight:600; }
.popover-text-action { border:0; padding:0; min-height:28px; background:transparent; color:var(--accent); font-size:11px; white-space:nowrap; }
.popover-empty { display:grid; place-items:center; min-height:80px; margin:0; color:var(--muted); font-size:12px; }
.public-link-row { display:grid; min-width:0; gap:8px; padding:12px 0; border-top:1px solid var(--line); }
.public-link-row > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-subtle); font-size:12px; font-weight:600; }
.public-link-row p { margin:0; font-size:11px; color:var(--muted); }
.public-link-row .link-active { color:var(--success); }
.public-link-row input { width:100%; min-width:0; height:30px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 8px; background:var(--surface-subtle); color:var(--muted); font-size:11px; }
.popover-row-actions { display:flex; align-items:center; gap:8px; padding-top:4px; }
.topbar-popover .popover-row-actions button { display:inline-flex; justify-content:center; align-items:center; min-height:30px; padding:0 8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-subtle); font-size:11px; font-weight:500; }
.topbar-popover footer { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.topbar-popover button:disabled { opacity:.5; cursor:default; }
.topbar-popover .form-error,.popover-notice { margin:10px 0 0; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.popover-notice { color:var(--success); }
.topbar .system-status-ball { display:grid; place-items:center; position:relative; width:calc(var(--header-status-size) * var(--header-icon-scale)); height:calc(var(--header-status-size) * var(--header-icon-scale)); flex-shrink:0; color:var(--accent); }
.topbar .action-menu > summary .system-status-ball svg { position:absolute; inset:0; width:100%; height:100%; }
.storage-ring-track { stroke:var(--line); }
.storage-ring-progress { stroke:currentColor; stroke-linecap:round; }
.system-status-ball > span { font-size:calc(9px * var(--header-icon-scale)); font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
.system-status-ball.pending { color:var(--muted); }
.system-metrics { display:grid; gap:12px; }
.system-metric { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:18px; }
.system-metric:first-child { display:grid; grid-template-rows:16px 18px; gap:6px; height:40px; }
.system-metric > span { font-size:11px; line-height:16px; color:var(--muted); white-space:nowrap; }
.system-metric strong { color:var(--ink-subtle); font-size:12px; font-weight:550; font-variant-numeric:tabular-nums; white-space:nowrap; }
.system-metric .metric-skeleton { width:65px; color:transparent; height:14px; border-radius:4px; background:var(--surface-subtle); }
.system-metric:first-child .metric-skeleton { width:130px; }

/* Temporary upload progress, using the shared surface and focus tokens. */
.upload-progress{--upload-edge:clamp(12px,2vw,24px);--upload-bottom:calc(var(--upload-edge) + env(safe-area-inset-bottom,0px));position:fixed;z-index:24;right:max(var(--upload-edge),env(safe-area-inset-right,0px));bottom:var(--upload-bottom);display:flex;flex-direction:column;width:min(380px,calc(100vw - max(var(--upload-edge),env(safe-area-inset-left,0px)) - max(var(--upload-edge),env(safe-area-inset-right,0px))));max-height:min(360px,calc(100dvh - var(--upload-bottom) - 12px));overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink-subtle);box-shadow:var(--shadow-popover)}
.upload-progress>header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.upload-progress>header strong{font-size:13px;font-weight:600}
.upload-progress>header small{color:var(--muted);font-size:11px}
.upload-progress-list{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px;scrollbar-gutter:stable}
.upload-progress-list:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.upload-progress-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 10px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--line)}
.upload-progress-item:last-child{border-bottom:0}
.upload-progress-item>strong{min-width:0;overflow:hidden;font-size:12px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.upload-progress-state{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.upload-progress-item.failed .upload-progress-state{color:var(--danger)}
.upload-progress-item>progress{grid-column:1/3;width:100%;height:4px;overflow:hidden;appearance:none;border:0;border-radius:var(--radius-sm);background:var(--line);color:var(--accent)}
.upload-progress-item>progress::-webkit-progress-bar{border-radius:var(--radius-sm);background:var(--line)}
.upload-progress-item>progress::-webkit-progress-value{border-radius:var(--radius-sm);background:var(--accent)}
.upload-progress-item>progress::-moz-progress-bar{border-radius:var(--radius-sm);background:var(--accent)}
.upload-progress-item.failed>progress{color:var(--danger)}
.upload-progress-item.failed>progress::-webkit-progress-value{background:var(--danger)}
.upload-progress-item.failed>progress::-moz-progress-bar{background:var(--danger)}
.upload-progress-actions{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:2px}
.upload-progress-actions>button{display:flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;gap:3px;padding:3px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:11px}
.upload-progress-actions>button:hover{background:var(--surface-hover);color:var(--accent)}
.upload-progress-actions>button:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.upload-progress-actions svg{width:15px;height:15px;stroke-width:1.7}
/* Desktop floats fit side by side; narrow screens keep uploads above the player. */
@media(max-width:1023px){
 .content-library.has-music .upload-progress{--upload-bottom:calc(var(--music-float-bottom) + var(--music-orb-size) + var(--upload-edge))}
 .content-library:has(.music-dock.is-expanded) .upload-progress{top:calc(90px + env(safe-area-inset-top,0px));bottom:auto;max-height:min(360px,calc(50dvh - 102px - env(safe-area-inset-top,0px)))}
 .content-library:has(.upload-progress) .music-dock.is-expanded .dock-body{max-height:calc(50dvh - var(--music-float-bottom) - 180px)}
}
@media(max-width:850px){
 .upload-progress{--upload-edge:12px;--upload-bottom:calc(58px + env(safe-area-inset-bottom,0px) + var(--upload-edge))}
 .upload-progress-actions>button{min-width:32px;min-height:32px}
}
@media(max-height:320px){
 .upload-progress{--upload-edge:12px}
 .upload-progress>header{padding:8px 12px}
}

/* StatusBadge.vue's <style scoped> block, ported to a global sheet.
   `.size-*` and `.tone-*` collide with the global sheets when pasted
   unprefixed, so each is qualified by the `.status-badge` root that carries it.
*/
.status-badge{display:inline-flex;max-width:100%;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid transparent;border-radius:999px;font-weight:750;line-height:1;white-space:nowrap}
.status-badge.size-sm{min-height:22px;padding:0 8px;font-size:10px}
.status-badge.size-md{min-height:27px;padding:0 10px;font-size:11px}
.status-badge.tone-neutral{border-color:var(--line);background:var(--surface-subtle);color:var(--muted)}
.status-badge.tone-info{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent-hover)}
.status-badge.tone-success{border-color:var(--success-border);background:var(--success-soft);color:var(--success)}
.status-badge.tone-warning{border-color:var(--warning-border);background:var(--warning-soft);color:var(--warning)}
.status-badge.tone-danger{border-color:var(--danger-border);background:var(--danger-soft);color:var(--danger)}

/* DirectoryPicker.vue drove its open/close animation with Vue's
   `<Transition name="directory-flyout">`, which Leptos does not have. The
   transition is expressed here as a class toggle instead: the Leptos port will
   add `flyout-closed` to `.directory-popover` (the element the transition
   wrapped) while hidden and remove it on open, which reproduces the original
   `enter-from`/`leave-to` state and the 140 ms transition.
   The Leptos picker uses the same class toggle to preserve the enter/leave
   timing while keeping the panel mounted until its transition completes. */
.directory-popover{transition:opacity .14s ease,transform .14s ease}
.directory-popover.flyout-closed{opacity:0;transform:translateY(-4px)}

.directory-picker{position:relative;min-width:0}.directory-picker.disabled{opacity:.65}.directory-picker .directory-trigger{display:grid;grid-template-columns:22px minmax(0,1fr) 18px;align-items:center;width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink-subtle);text-align:left}.directory-picker .directory-trigger:hover,.directory-picker.expanded .directory-trigger{border-color:var(--accent-border);background:var(--surface-hover)}.directory-trigger>svg:first-child{width:18px;color:var(--accent)}.directory-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.directory-chevron{width:16px!important;fill:none!important;color:var(--muted)!important;transition:transform .16s ease}.directory-picker.expanded .directory-chevron{transform:rotate(180deg)}.directory-picker .directory-trigger:disabled{cursor:not-allowed}.directory-popover{z-index:155;display:flex;min-height:120px;overflow:hidden;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-popover);color:var(--ink);transform-origin:top center}.directory-breadcrumbs{display:flex;align-items:center;gap:3px;flex:0 0 auto;min-height:43px;padding:5px 9px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:thin}.directory-breadcrumb-entry{display:flex;align-items:center;gap:3px;flex:0 0 auto}.directory-breadcrumbs>button,.directory-breadcrumb-entry button{display:flex;align-items:center;gap:5px;flex:0 0 auto;max-width:155px;min-height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--muted)}.directory-breadcrumbs button:hover,.directory-breadcrumbs button.active{background:var(--accent-soft);color:var(--accent-hover)}.directory-breadcrumbs button span,.directory-breadcrumb-entry button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-breadcrumbs button svg{width:14px}.directory-chevron-right{width:13px;flex:0 0 auto;color:var(--muted-soft)}.directory-list{min-height:0;max-height:340px;overflow:auto;overscroll-behavior:contain;padding:6px;touch-action:pan-y}.directory-list>button{display:grid;grid-template-columns:31px minmax(0,1fr) 17px;align-items:center;width:100%;min-height:44px;padding:4px 10px;border:0;border-radius:9px;background:#fff;color:var(--ink-subtle);text-align:left}.directory-list>button:hover{background:var(--accent-soft);color:var(--accent-hover)}.directory-list>button svg:first-child{width:20px;color:var(--accent);fill:var(--accent-border)}.directory-list>button svg:last-child{width:15px;color:var(--muted);fill:none}.directory-list>button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-state{display:flex;min-height:100px;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center}.directory-state>svg{width:25px}.directory-state p{margin:0}.directory-state.error{color:var(--danger)}.directory-state.error button{padding:7px 10px;border:0;border-radius:8px;background:var(--danger-soft);color:var(--danger-hover)}.move-copy-dialog{width:min(560px,calc(100vw - 28px))}.move-copy-dialog header p:last-child{margin:4px 0 0;color:var(--muted);font-size:12px}.move-copy-body{padding:18px 20px}.transfer-error{margin:10px 0 0}@media(max-width:600px){.move-copy-dialog{width:calc(100vw - 20px)}.directory-breadcrumbs button{max-width:125px}.directory-list>button{min-height:46px}}
@media(max-width:600px){.move-copy-body{padding:14px}}

.content-head .trash-empty-action { min-height: 40px; padding: 0 16px; border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 750; }
.content-head .trash-empty-action:hover:not(:disabled) { background: var(--danger-soft); }
.content-head .trash-empty-action:disabled { opacity: .45; }
.breadcrumbs{display:flex;align-items:center;max-width:min(760px,70vw);margin:-4px 0 7px;padding:3px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}.breadcrumbs::-webkit-scrollbar{display:none}.breadcrumbs button{display:inline-flex;min-width:max-content;min-height:36px;align-items:center;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ink-subtle);font-size:14px;font-weight:650;line-height:1;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}.breadcrumbs button:hover{background:var(--accent-soft);color:var(--accent)}.breadcrumbs button:active{background:var(--accent-soft);color:var(--accent-hover)}.breadcrumbs button:focus-visible{outline:0;box-shadow:var(--focus-ring)}.breadcrumbs button.current{background:var(--accent-soft);color:var(--accent-hover);font-weight:750}.breadcrumb-separator{width:15px;height:15px;flex:0 0 auto;color:var(--muted-soft);stroke-width:1.8}@media(max-width:850px){.breadcrumbs{width:calc(100vw - 28px);max-width:100%;margin-bottom:6px;padding:2px 0 4px;mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 16px),transparent 100%)}.breadcrumbs button{min-height:40px;padding:0 11px;font-size:14px}.breadcrumbs button:first-of-type{margin-left:4px}.breadcrumbs button:last-of-type{margin-right:12px}.breadcrumb-separator{width:14px;height:14px}}

.content-head .file-sort {
  position: relative; display: inline-flex; align-items: stretch; flex: 0 0 auto;
  width: max-content; height: var(--control-md); max-width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
.content-head .file-sort button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0;
  background: transparent; color: var(--ink-subtle); font: inherit; font-size: 13px;
  font-weight: 600; white-space: nowrap; box-shadow: none;
}
.content-head .file-sort button:hover { background: var(--surface-hover); color: var(--ink-subtle); }
.content-head .file-sort button:focus-visible { outline: 1px solid var(--accent-border); outline-offset: -1px; box-shadow: none; }
.content-head .file-sort .sort-field-toggle {
  flex: 0 0 auto; justify-content: center; padding: 0 12px;
  border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px);
}
.content-head .file-sort .sort-direction {
  /* WebKit's max-content sizing needs a width as well as the flex basis. */
  flex: 0 0 38px; width: 38px; border-left: 1px solid var(--line);
  border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
  color: var(--accent); font-size: 22px; line-height: 1;
}
.content-head .sort-field-options {
  position:absolute; z-index:40; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  display:grid; gap:0; width:160px; max-height:var(--popover-available-height,70vh); overflow:auto; padding:5px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--surface); box-shadow:var(--shadow-popover);
}
.content-head .sort-field-options button {
  justify-content: flex-start; height: 36px; padding: 0 10px; border-radius: 5px;
}

/* Path, totals and sorting share one desktop toolbar row. */
.content-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; min-height:40px; margin-bottom:18px; }
.content-head .breadcrumbs { grid-column:1; min-width:0; max-width:100%; width:100%; min-height:40px; margin:0; padding:0; }
.content-head .folder-meta { grid-column:2; margin:0; flex-wrap:nowrap; white-space:nowrap; }
.content-head .actions { grid-column:3; display:flex; align-items:center; width:auto; }
.trash-toolbar .folder-meta { grid-column:1; }
@media(max-width:650px) {
 .content-head { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
 .content-head .breadcrumbs { grid-column:1/-1; }
 .content-head .folder-meta { grid-column:1; min-width:0; flex-wrap:wrap; gap:6px; }
 .content-head .actions { grid-column:2; }
 .trash-toolbar .folder-meta { white-space:normal; }
}

/* FullBleedProgress's component styles, retained for the layered audio range.
 * The transparent native input owns seek gestures; the track, buffer and thumb
 * share its coordinates. Chapter buttons sit above it for exact jumps. */
.full-bleed-progress {
  --progress-center: 0px;
  --progress-height: 4px;
  --progress-thumb-size: 18px;
  --progress-edge-start: max(calc(var(--progress-thumb-size) / 2), env(safe-area-inset-left, 0px));
  --progress-edge-end: max(calc(var(--progress-thumb-size) / 2), env(safe-area-inset-right, 0px));
  position: relative;
  z-index: 2;
  width: 100%;
  height: 22px;
  min-width: 0;
  overflow: visible;
  touch-action: none;
}

.full-bleed-progress__track {
  position: absolute;
  top: var(--progress-center);
  right: 0;
  left: 0;
  height: var(--progress-height);
  overflow: hidden;
  background: var(--progress-track, var(--line));
  pointer-events: none;
  transform: translateY(-50%);
}

.full-bleed-progress__buffer,
.full-bleed-progress__played {
  position: absolute;
  inset: 0 auto 0 0;
  pointer-events: none;
}

.full-bleed-progress__buffer {
  background: var(--progress-buffer, transparent);
}

.full-bleed-progress__played {
  background: var(--progress-played, var(--accent));
}

.full-bleed-progress__chapter-marker {
  position: absolute;
  z-index: 6;
  top: var(--progress-center);
  width: 12px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.full-bleed-progress__chapter-marker::before {
  content: "";
  display: block;
  width: 2px;
  height: calc(var(--progress-height) + 4px);
  margin: auto;
  background: var(--progress-marker, #fff);
  box-shadow: 0 0 0 1px #7990ad52;
}

.full-bleed-progress__runway {
  position: absolute;
  top: var(--progress-center);
  right: 0;
  left: 0;
  height: 0;
  pointer-events: none;
}

.full-bleed-progress__thumb {
  position: absolute;
  z-index: 2;
  top: 0;
  width: var(--progress-thumb-size);
  height: var(--progress-thumb-size);
  border: 2px solid var(--progress-thumb-border, #fff);
  border-radius: 50%;
  background: var(--progress-thumb, var(--accent));
  box-shadow: 0 1px 4px #00000040;
  transform: translate(-50%, -50%);
}

.full-bleed-progress__tooltip {
  position: absolute;
  z-index: 4;
  bottom: 14px;
  min-width: 48px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #1f2937;
  color: #fff;
  font: 10px ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 5px 16px #0f172a2e;
}

.full-bleed-progress__tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  border: 4px solid transparent;
  border-top-color: #1f2937;
  content: "";
  transform: translateX(-50%);
}

.full-bleed-progress__input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: absolute;
  z-index: 5;
  top: calc(var(--progress-center) - 22px);
  right: 0;
  left: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  opacity: 0;
  touch-action: none;
}

.full-bleed-progress__input:active {
  cursor: grabbing;
}

.full-bleed-progress__input:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.full-bleed-progress__input::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
}

.full-bleed-progress__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--progress-thumb-size);
  height: 44px;
  border: 0;
  background: transparent;
}

.full-bleed-progress__input::-moz-range-track {
  height: 44px;
  border: 0;
  background: transparent;
}

.full-bleed-progress__input::-moz-range-thumb {
  width: var(--progress-thumb-size);
  height: 44px;
  border: 0;
  background: transparent;
}

.full-bleed-progress__input:disabled {
  cursor: default;
}

/* The content shell shares file, reader and preview primitives, with its own layout. */
.content-library { --workspace-width:1440px; --workspace-gutter:5vw; --library-gutter:var(--workspace-gutter); --library-ink:var(--ink); --library-muted:var(--muted); --library-accent:var(--accent); --music-float-bottom:24px; --music-orb-size:80px; min-height:100dvh; background:var(--paper); color:var(--library-ink); padding-bottom:48px; }
.library-main { max-width:var(--workspace-width); padding:24px var(--library-gutter) 40px; margin:auto; }
/* Align the batch bar with files while retaining the library card layout. */
.library-main>.selection-toolbar { margin-inline:calc(var(--workspace-gutter) - var(--library-gutter)); }

.home-section { margin:0 0 28px; }
.home-section>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.home-section h2 { font-weight:600; font-size:18px; margin:0; letter-spacing:.5px; }
.home-content-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
.home-item { padding:0; border:0; background:none; text-align:left; min-width:0; color:inherit; }

.library-cover { width:100%; height:100%; display:block; border:0; box-shadow:none; overflow:hidden; position:relative; background:var(--surface-hover); }
.library-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-placeholder { width:100%; height:100%; display:grid; place-items:center; background:var(--surface-subtle); }

.home-empty { grid-column:1/-1; border:1px dashed var(--line-strong); border-radius:12px; background:var(--surface-subtle); color:var(--muted); min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; font-size:13px; }
.home-empty p { margin:0; }
.home-empty strong { color:var(--ink-subtle); font-weight:500; }
.home-loading { grid-column:1/-1; min-height:90px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--library-muted); font-size:12px; }
.library-toolbar-actions { display:flex; align-items:center; gap:var(--library-toolbar-gap); flex-shrink:0; }
.content-library .primary { background:var(--accent); box-shadow:none; border-radius:9px; display:inline-flex; align-items:center; gap:8px; font-size:13px; }
.content-library .primary:hover { background:var(--accent-hover); }
.content-library .primary svg { width:16px; height:16px; }
.content-library .secondary { background:var(--surface); color:var(--ink-subtle); border-color:var(--line-strong); font-size:12px; }
.library-toolbar { --library-control-height:38px; --library-toolbar-gap:8px; display:flex; flex-wrap:nowrap; align-items:center; gap:var(--library-toolbar-gap); padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.library-tabs { display:flex; flex:1; flex-wrap:nowrap; align-items:center; gap:var(--library-toolbar-gap); min-width:0; }
.library-toolbar .library-tabs>button,.library-toolbar .collection-menu>summary,.library-toolbar .library-toolbar-actions>button { display:flex; align-items:center; justify-content:center; flex-shrink:0; gap:var(--library-toolbar-gap); height:var(--library-control-height); min-height:var(--library-control-height); margin:0; border-radius:var(--radius-md); font-size:13px; line-height:1; white-space:nowrap; }
.library-tabs>button,.library-tabs .action-menu>summary { border:1px solid var(--line); background:var(--surface); color:var(--ink-subtle); }
.library-tabs>button { padding:0 12px; }
.library-toolbar-actions>button { padding:0 12px; }
.library-tabs>button:hover,.library-tabs .action-menu>summary:hover { background:var(--surface-hover); }
.library-tabs>button.active { color:var(--accent-hover); background:var(--accent-soft); border-color:var(--accent-border); }
.library-tabs small { flex-shrink:0; font-size:10px; font-weight:400; padding:2px 6px; background:var(--surface-subtle); border-radius:4px; }
.library-tabs .favorite-filter,.library-toolbar-actions .collection-create { flex:0 0 var(--library-control-height); width:var(--library-control-height); padding:0; }
.favorite-filter svg,.collection-create svg { width:18px; height:18px; }

.library-tabs .collection-menu { flex:1; min-width:0; }
.library-tabs .collection-menu>summary { width:100%; min-width:0; padding:0 10px; }
.collection-menu>summary span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.collection-menu>summary svg { width:14px; height:14px; flex-shrink:0; }
.library-tabs .action-menu-panel { max-height:min(var(--popover-available-height,50vh),360px); overflow-y:auto; min-width:170px; }
.library-tabs .action-menu-panel>button { min-height:38px; padding:8px 10px; overflow-wrap:anywhere; }
.library-tabs .action-menu-panel>button[aria-pressed="true"] { color:var(--accent-hover); background:var(--accent-soft); }
.library-tabs button:focus-visible,.library-tabs summary:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.library-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:30px 24px; }
.library-card { min-width:0; position:relative; }
.library-card-open { display:block; border:0; padding:0; background:none; text-align:left; width:100%; color:inherit; }

.photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }

.library-empty,.library-loading { min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--muted); text-align:center; }
.library-empty>span { font-size:40px; color:var(--muted-soft); }
.library-empty h2 { font-size:19px; font-weight:500; margin:0; color:var(--ink-subtle); }
.library-empty p { font-size:12px; line-height:1.7; margin:0 0 7px; }
.library-loading p { font-size:12px; }
.library-load-more { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px; }
.library-load-more small { font-size:11px; color:var(--muted); }
.library-error { padding:14px; margin:20px 0; background:var(--danger-soft); color:var(--danger); border-radius:9px; font-size:13px; }
.library-error button { margin-left:12px; border:0; background:none; color:inherit; text-decoration:underline; }
.library-notice { display:flex; align-items:center; justify-content:space-between; padding:12px 17px; margin-top:18px; background:var(--accent-soft); border-radius:9px; font-size:12px; color:var(--accent-hover); }
.library-notice button { border:0; background:none; font-size:19px; color:inherit; }
.collection-caption { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin:-10px 0 22px; gap:15px; }
.collection-caption button { flex-shrink:0; border:0; background:none; color:var(--danger); font-size:11px; }
.collection-options { display:flex; flex-direction:column; gap:9px; }
.collection-options>button { border:1px solid var(--line); background:var(--surface-subtle); border-radius:9px; padding:13px; color:var(--ink-subtle); text-align:left; display:flex; justify-content:space-between; }
.collection-options small { color:var(--muted); }
.collection-options p { font-size:13px; color:var(--muted); line-height:1.7; }
.content-library>.app-shell { min-height:0; }
.content-library>.app-shell.file-tools-background>.content { display:none; }
.content-library>.app-shell>.content { max-width:var(--workspace-width); margin:auto; padding-left:var(--workspace-gutter); padding-right:var(--workspace-gutter); }
/* One floating entry and one on-demand panel share the persistent audio session. */
.music-orb-shell { position:fixed; z-index:35; left:24px; bottom:var(--music-float-bottom); transform:translateY(0) scale(1); transform-origin:bottom left; opacity:1; visibility:visible; transition:transform .24s ease, opacity .24s ease, visibility 0s; }
.music-orb-shell.is-hidden { transform:translateY(8px) scale(.85); opacity:0; visibility:hidden; pointer-events:none; transition:transform .24s ease, opacity .24s ease, visibility 0s .24s; }
.music-orb { position:relative; display:grid; place-items:center; flex:0 0 var(--music-orb-size); width:var(--music-orb-size); height:var(--music-orb-size); padding:0; border:0; border-radius:50%; background:var(--surface); color:var(--accent); box-shadow:0 4px 16px #17212b12; cursor:pointer; }
.music-orb:hover { background:var(--accent-soft); }
.music-orb-ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.music-orb-track { stroke:var(--line-strong); }
.music-orb-progress { stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .2s linear; }
.music-orb-cover { position:absolute; inset:9px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--accent-soft); }
.music-orb-cover img { width:100%; height:100%; object-fit:cover; }
.music-orb-cover > svg { width:28px; height:28px; }
.music-dock { position:fixed; z-index:35; left:24px; bottom:var(--music-float-bottom); width:400px; max-width:calc(100vw - 48px); padding:0; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); box-shadow:0 8px 32px #17212b14; transform:translateY(12px) scale(.94); transform-origin:bottom left; opacity:0; visibility:hidden; pointer-events:none; transition:transform .24s ease, opacity .24s ease, visibility 0s .24s; }
.music-dock.is-expanded { transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.dock-header { display:flex; align-items:center; gap:4px; padding:8px 12px 0 20px; }
.dock-header > strong { flex:1; color:var(--muted); font-size:12px; font-weight:500; }
.dock-header > .action-menu { z-index:3; }
.dock-body { display:flex; flex-direction:column; gap:14px; max-height:calc(100dvh - var(--music-float-bottom) - 224px); overflow-y:auto; overscroll-behavior:contain; padding:12px 20px 14px; }
.dock-body > * { flex-shrink:0; }
.music-dock button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:8px; min-width:44px; min-height:44px; padding:6px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:12px; white-space:nowrap; }
.music-dock button:hover { color:var(--accent); background:var(--surface-hover); }
.music-dock button:disabled { opacity:.4; cursor:default; }
.music-dock button.active { color:var(--accent-hover); background:var(--accent-soft); }
.music-dock button svg { width:20px; height:20px; }
.music-dock .dock-collapse { width:44px; height:44px; padding:0; }
.dock-track { display:flex; align-items:center; gap:14px; min-width:0; }
.music-dock .dock-cover { flex:0 0 72px; width:72px; height:72px; padding:0; overflow:hidden; border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.dock-cover img { width:100%; height:100%; object-fit:cover; }
.dock-cover > svg { width:28px; height:28px; }
.dock-track > div { flex:1; min-width:0; }
.dock-track strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.5; }
.dock-track small { display:block; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.dock-controls { display:flex; justify-content:center; align-items:center; gap:24px; padding:0 20px 14px; }
.music-dock .dock-play { width:56px; height:56px; padding:0; border-radius:50%; background:var(--accent); color:#fff; }
.music-dock .dock-play:hover { background:var(--accent-hover); }
.dock-controls .dock-play svg { width:24px; height:24px; }
.dock-progress { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:44px 16px; width:100%; min-width:0; }
.dock-progress > span { grid-row:2; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dock-progress > span:last-child { text-align:right; }
.dock-timeline { position:relative; grid-row:1; grid-column:1 / -1; width:100%; height:44px; }
.dock-timeline-track { position:absolute; inset:20px 0 auto; height:4px; overflow:visible; border-radius:3px; background:var(--line); pointer-events:none; }
.dock-timeline-track .dock-buffer { position:absolute; height:100%; background:var(--accent-border); }
.dock-timeline-track .dock-played { position:absolute; height:100%; border-radius:3px; background:var(--accent); }
.music-dock .dock-chapter-marker { position:absolute; z-index:2; top:11px; height:22px; width:12px; min-height:0; min-width:0; padding:0; border:0; background:transparent; transform:translateX(-50%); cursor:pointer; }
.music-dock .dock-chapter-marker:hover { background:transparent; }
.dock-chapter-marker::before { content:""; display:block; height:8px; width:2px; margin:auto; background:var(--ink-subtle); }
.music-dock .dock-timeline input { position:absolute; inset:0; width:100%; height:44px; margin:0; background:transparent; appearance:none; cursor:pointer; touch-action:none; }
.dock-timeline input::-webkit-slider-runnable-track { height:4px; background:transparent; }
.dock-timeline input::-moz-range-track { height:4px; background:transparent; }
.dock-timeline input::-webkit-slider-thumb { appearance:none; height:14px; width:14px; margin-top:-5px; border-radius:50%; background:var(--accent); }
.dock-timeline input::-moz-range-thumb { height:14px; width:14px; border:0; border-radius:50%; background:var(--accent); }
.dock-options { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 20px 20px; }
.playback-mode { display:flex; align-items:center; flex:0 0 auto; color:var(--muted); }
.playback-mode select { height:44px; min-width:96px; padding:0 6px; border:0; border-radius:9px; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; }
.playback-mode select:hover { background:var(--surface-hover); }
.playback-mode select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.music-dock .playback-mode > .action-menu > summary { width:auto; min-width:96px; height:44px; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 6px; border-radius:9px; color:var(--muted); font-size:12px; }
.music-dock .playback-mode > .action-menu > summary > svg { width:14px; height:14px; }
.audio-options .playback-mode select { font-size:14px; }
.dock-volume { display:flex; align-items:center; gap:12px; }
.dock-volume input { flex:1; min-width:0; height:44px; margin:0; accent-color:var(--accent); cursor:pointer; }
.dock-volume-popover { width:248px; padding:8px; }
.dock-volume output { min-width:34px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; }
.dock-options > .action-menu { flex:0 0 auto; }
.dock-options > .action-menu > summary { color:var(--muted); }
.audio-subtitles { white-space:pre-line; text-align:center; line-height:1.6; font-size:14px; color:var(--ink); }
.dock-lyrics { display:grid; grid-template-rows:18px minmax(0,1fr) 18px; align-items:center; gap:6px; height:104px; padding:4px 12px; text-align:center; }
.dock-lyric-neighbor { margin:0; overflow:hidden; color:var(--muted); opacity:.6; font-size:12px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
.music-dock .dock-lyrics .audio-subtitles { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; font-size:15px; font-weight:600; line-height:1.5; }
.dock-lyrics .audio-subtitles:empty::after { content:"…"; color:var(--muted); font-weight:400; }
.dock-lyrics-empty { grid-row:1 / -1; margin:0; color:var(--muted); font-size:12px; }
.music-queue { padding-top:12px; border-top:1px solid var(--line); }
.music-queue header { display:flex; justify-content:space-between; align-items:center; }
.music-queue header strong { font-size:13px; }
.music-queue > button { display:flex; justify-content:flex-start; width:100%; gap:12px; text-align:left; }
.music-queue > button strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.music-chapters small,.music-queue > button span { color:var(--muted); font-size:11px; }
.music-chapters p { color:var(--muted); font-size:12px; }
.music-dock .action-menu-panel .player-end { color:var(--danger); justify-content:flex-start; }
.music-dock .action-menu-panel > button { justify-content:flex-start; text-align:left; }
.content-library button:focus-visible,.content-library a:focus-visible,.content-library input:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.music-orb,.music-dock .dock-collapse,.music-dock .action-menu > summary { outline:none; box-shadow:none; }
.music-orb { box-shadow:0 4px 16px #17212b12; }
.content-library .music-orb:focus,.music-dock .dock-collapse:focus,.music-dock .action-menu > summary:focus { outline:none; box-shadow:none; }
.content-library .music-orb:focus-visible,.music-dock .dock-collapse:focus-visible,.music-dock .action-menu > summary:focus-visible { outline:1px solid var(--accent); outline-offset:3px; box-shadow:none; }
.music-orb-shell.pointer-interaction .music-orb:focus-visible,.music-dock.pointer-interaction .dock-collapse:focus-visible { outline:none; box-shadow:none; }
@media(min-width:1600px) { .content-library { --library-gutter:65px; } }
@media(max-width:1100px) { .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .home-content-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; } }
@media(max-width:850px) {
 .content-library { padding-bottom:80px; }
 .library-main { padding-top:18px; padding-bottom:32px; }


 .home-section { margin-bottom:33px; }
 .home-section h2 { font-size:19px; }
 .home-content-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }

 .library-toolbar { --library-toolbar-gap:6px; margin-bottom:14px; }
 .library-toolbar .library-tabs>button,.library-toolbar .collection-menu>summary,.library-toolbar .library-toolbar-actions>button { font-size:12px; }
 .library-tabs>button { padding:0 8px; }
 .library-tabs .collection-menu>summary { padding:0 6px; }
 .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 13px; }
 .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }


 .collection-caption { font-size:10px; line-height:1.7; }
}
@media(prefers-reduced-motion:reduce) { .library-cover { transition:none; } }
@media(max-width:1023px) {
 .content-library { --music-orb-size:60px; --music-float-bottom:16px; }
 .music-orb-shell { left:max(12px,env(safe-area-inset-left,0px)); }
 .music-orb-cover { inset:7px; }
 .music-orb-cover > svg { width:22px; height:22px; }
 .music-dock { left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); width:auto; max-width:none; border-radius:20px; transform:translateY(24px); }
 .music-dock.is-expanded { transform:translateY(0); }
 .dock-header { padding-left:16px; }
 .dock-body { padding:12px 16px; gap:12px; }
 .dock-controls { padding:0 16px 12px; }
 .dock-options { padding:0 16px 16px; }
 .music-dock .dock-cover { flex-basis:56px; width:56px; height:56px; border-radius:10px; }
 .dock-track strong { font-size:14px; }
 .music-dock .dock-play { width:52px; height:52px; }
}
@media(max-height:600px) { .dock-lyrics { height:64px; grid-template-rows:14px minmax(0,1fr) 14px; gap:2px; } .dock-lyric-neighbor { font-size:11px; line-height:14px; } .music-dock .dock-lyrics .audio-subtitles { -webkit-line-clamp:1; font-size:14px; } }
@media(max-height:500px) { .dock-body { gap:8px; padding:8px; } .dock-lyrics { height:40px; grid-template-rows:1fr; } .dock-lyric-neighbor { display:none; } }
@media(max-width:850px) {
 .content-library { --music-float-bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
}
@media(prefers-reduced-motion:reduce) { .music-orb-shell,.music-orb-progress,.music-dock { transition:none; } }
/* Keep cards square without shrinking their reserved filename area. */
@media(max-width:480px) { .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Keep the floating player above the reader's controls. */
.content-library:has(#reader-view) { --music-float-bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
.content-library:has(#reader-view) .mobile-navigation { display:none; }
.content-library:has(.toc-drawer.open) .music-orb-shell,.content-library:has(.toc-drawer.open) .music-dock { opacity:0; visibility:hidden; pointer-events:none; }

.video-cover-play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:#17212b12; }
.video-cover-play svg { width:24px; height:24px; padding:5px; box-sizing:content-box; background:#17212b65; border-radius:50%; }
.video-duration { position:absolute; bottom:8px; right:8px; padding:3px 6px; background:#17212bb3; border-radius:var(--radius-sm); color:#fff; font-size:11px; font-variant-numeric:tabular-nums; }

/* Shared selection mode keeps the existing card surfaces and spacing. */
.home-card { min-width:0; position:relative; }
.home-card .home-item { display:block; width:100%; }


.collection-target-count{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 16px}

/* Keep gestures native while preventing cover dragging and touch callouts. */
[data-selection-ids]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
[data-selection-ids] img{-webkit-user-drag:none}
.book-reading-progress{position:absolute;z-index:4;bottom:0;left:0;right:0;height:3px;background:var(--accent-border);opacity:0;pointer-events:none;transition:opacity 180ms ease}
.book-reading-progress>span{display:block;height:100%;background:var(--accent,var(--accent));transition:width 180ms ease}
:is(.file-card,.library-card,.home-card):is(:hover,:focus-within) .book-reading-progress{opacity:1}
.stack-count{position:absolute;top:9px;right:9px;padding:4px 7px;border-radius:var(--radius-sm);background:#fffffff0;color:var(--library-ink);font-size:11px}
.stack-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.stack-header-title{flex:1;min-width:0}
.stack-header h1{font-size:20px;line-height:1.4;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--library-ink)}
.stack-header small{color:var(--library-muted);font-size:12px}
.stack-header>button{flex-shrink:0}
@media(hover:none){.book-reading-progress{opacity:1}}
@media(max-width:850px){.stack-header{gap:12px}.stack-header h1{font-size:17px}.stack-count{top:6px;right:6px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.book-reading-progress,.book-reading-progress>span{transition:none}}

/* A Stack has distinct, slightly offset book covers within the shelf grid. */
.library-card.stack-card{box-shadow:none}
.stack-covers{position:relative;width:100%;height:100%;isolation:isolate}
.stack-cover-layer{position:absolute;inset:0 12px 12px 0;pointer-events:none}
.stack-cover-layer:nth-child(2){transform:translate(6px,6px)}
.stack-cover-layer:nth-child(3){transform:translate(12px,12px)}
.stack-cover-layer .library-cover{height:100%;box-shadow:2px 3px 8px #17212b25}
.content-library .stack-card .stack-count{right:21px;z-index:5}
.library-card[draggable=true]{cursor:grab}
.library-card.stack-drop-target{outline:3px solid var(--accent);outline-offset:5px;background:var(--accent-soft);border-radius:7px}
.stack-header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.stack-icon-button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--library-ink)}
.stack-icon-button:hover:not(:disabled){background:var(--surface-hover)}
.stack-icon-button svg{width:21px;height:21px}
.stack-header .action-menu-panel>button.danger{color:var(--danger);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px}
.stack-header .action-menu-panel>button.danger:hover{background:var(--danger-soft)}
.stack-management-bar{display:flex;align-items:center;gap:10px;min-height:44px;margin:-12px 0 20px;color:var(--library-muted);font-size:12px;flex-wrap:wrap}
.stack-management-bar>button{min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-subtle);font-size:12px;white-space:nowrap}
.stack-management-bar>button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-hover)}
.stack-management-bar>button:first-child{color:var(--accent-hover);font-weight:600}
.stack-management-bar>small{flex:1;font-size:11px}
.stack-management-bar .stack-remove-selected{color:var(--accent-hover)}
.library-card[data-stack-book-id]{-webkit-touch-callout:none;user-select:none}
.library-card.stack-drag-source{opacity:.4}
.library-grid.selection-mode>.library-card.stack-order-target{outline:2px solid var(--accent);outline-offset:5px;border-radius:7px}
.stack-drag-preview{position:fixed;z-index:200;pointer-events:none;opacity:.9;filter:drop-shadow(0 8px 12px #17212b40)}
.stack-drag-preview :is(.card-info,.selection-checkbox){display:none}
.stack-dialog{width:min(520px,calc(100vw - 32px));max-height:85dvh;overflow-y:auto}
.stack-dialog p{font-size:13px;color:var(--library-muted);line-height:1.6}
.stack-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack-dialog>header h2{margin:0;font-size:20px}
.stack-dialog>header button{border:0;background:none;font-size:24px}
.stack-dialog form>label{display:flex;flex-direction:column;gap:8px}
.stack-dialog footer{display:flex;justify-content:flex-end;margin-top:18px}
.stack-options{display:flex;flex-direction:column;gap:8px;max-height:40dvh;overflow-y:auto;margin:14px 0;padding:0}
.stack-options button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-align:left;overflow-wrap:anywhere}
.stack-options button{justify-content:space-between}
.stack-options small{flex-shrink:0;color:var(--library-muted)}
@media(max-width:850px){.stack-header{gap:6px}.stack-management-bar{gap:4px}.stack-management-bar>small{flex-basis:100%;order:5}.stack-management-bar>span{flex:1}.stack-recommend{font-size:11px;padding:7px}}

/* Book picking uses compact rows; only the list scrolls between search and actions. */
.stack-picker-viewport{position:fixed;z-index:40;inset:0;bottom:auto;height:100dvh}
.stack-picker-backdrop.modal-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:24px}
.modal.stack-book-picker{display:flex;flex-direction:column;width:min(600px,100%);height:min(680px,calc(var(--picker-viewport-height,100dvh) - 56px));max-height:100%;min-height:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-dialog)}
.stack-picker-grip{display:none}
.modal.stack-book-picker>header{flex-shrink:0;align-items:center;gap:12px;margin:0;padding:18px 22px 10px}
.stack-book-picker h2{font-size:19px;font-weight:600;color:var(--ink)}
.stack-book-picker>header>button{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;padding:0;border-radius:9px;color:var(--muted)}
.stack-book-picker>header>button:hover:not(:disabled){background:var(--surface-hover)}
.stack-book-picker>header>button svg{width:20px;height:20px}
.stack-picker-search{flex-shrink:0;padding:0 22px 14px;border-bottom:1px solid var(--line)}
.stack-picker-search-field{position:relative}
.stack-picker-search-field>svg{position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.stack-book-picker .stack-picker-search-field>input{height:42px;padding:0 36px 0 40px;border-radius:var(--radius-md);background:var(--surface-subtle);font-size:13px;font-weight:400}
.stack-picker-search>p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.stack-picker-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 14px;touch-action:pan-y pinch-zoom}
.stack-picker-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.stack-picker-row{display:flex;align-items:center;gap:13px;width:100%;min-height:78px;padding:9px 10px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--ink);text-align:left;touch-action:pan-y pinch-zoom}
.stack-picker-row:hover:not(:disabled){background:var(--surface-hover)}
.stack-picker-row.selected{border-color:var(--accent-border);background:var(--accent-soft)}
.stack-picker-row.selected:hover:not(:disabled){background:var(--accent-soft)}
.stack-picker-row:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.stack-picker-cover{display:block;flex-shrink:0;width:40px;height:56px;overflow:hidden;border-radius:3px 6px 6px 3px;border:1px solid var(--line);background:var(--surface-subtle)}
.stack-picker-cover>img{display:block;width:100%;height:100%;object-fit:cover}
.stack-picker-cover-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;color:var(--accent-hover);background:var(--accent-soft)}
.stack-picker-cover-fallback>svg{width:22px;height:22px}
.stack-picker-cover-fallback>small{font-size:8px;font-weight:600}
.stack-picker-copy{display:block;flex:1;min-width:0}
.stack-picker-copy>strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.stack-picker-copy small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px;line-height:1.5}
.stack-picker-copy .stack-picker-origin.moving{color:var(--accent-hover)}
.stack-picker-copy .stack-picker-origin{display:flex;align-items:center;gap:7px}
.stack-picker-origin>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack-picker-origin>.stack-picker-move{flex-shrink:0}
.stack-picker-check{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;color:transparent;background:var(--surface)}
.stack-picker-check>svg{width:15px;height:15px}
.stack-picker-row.selected .stack-picker-check{border-color:var(--accent);background:var(--accent);color:#fff}
.stack-picker-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-height:140px;height:100%;color:var(--muted)}
.stack-picker-empty p{margin:0;font-size:13px}
.stack-picker-error{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;padding:10px 22px;color:var(--danger);font-size:12px;background:var(--danger-soft)}
.stack-picker-error>button{flex-shrink:0;padding:4px 6px;border:0;background:transparent;color:inherit;font-size:12px}
.stack-book-picker .stack-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;margin:0;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface)}
.stack-picker-footer>span{font-size:13px;color:var(--ink-subtle)}
.stack-book-picker .stack-picker-footer>button{justify-content:center;min-width:104px;min-height:42px;padding:0 20px;border:0;border-radius:var(--radius-md);font-weight:600}
@media(max-width:850px){
 .stack-picker-backdrop.modal-backdrop{padding:0;place-items:end center}
 .modal.stack-book-picker{width:100%;height:calc(var(--picker-viewport-height,100dvh) - max(16px,env(safe-area-inset-top,0px)));border-radius:20px 20px 0 0;border-bottom:0}
 .stack-picker-grip{display:block;flex-shrink:0;width:34px;height:4px;margin:9px auto 0;border-radius:4px;background:var(--line-strong)}
 .modal.stack-book-picker>header{padding:8px 18px 10px}
 .stack-book-picker h2{font-size:18px}
 .stack-picker-search{padding:0 18px 13px}
 .stack-book-picker .stack-picker-search-field>input{font-size:16px}
 .stack-picker-scroll{padding:9px 10px}
 .stack-picker-row{gap:11px;padding:9px 8px}
 .stack-book-picker .stack-picker-footer{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px))}
 .stack-picker-error{padding-inline:18px}
}

/* One card surface and persistent caption across all screen sizes. */
:is(.file-card,.library-card,.home-card) {
  --file-card-caption-height: 68px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
:is(.file-card,.library-card,.home-card):hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 8px #17212b0a;
}
.file-card {
  outline: 0;
  touch-action: manipulation;
}
.file-card:focus-visible {
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring);
}
.library-card-open,.home-card .home-item {
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: inherit;
}
.file-card-content {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 128px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: inherit;
}

/* Fixed square image/video covers can skip off-screen painting. Keep every
   keyed card mounted, and render all covers during selection interactions. */
.library-grid.photo-grid:not(.selection-mode) .file-card-content {
    content-visibility: auto;
}
.card-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0,1fr) / minmax(0,1fr);
  place-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface-subtle);
  cursor: pointer;
}
.card-preview.cannot-open { cursor: default; }
.card-preview img,.card-preview .video-thumb {
  width: 100%;
  height: 100%;
}
.card-preview img {
  display: block;
  object-fit: cover;
}
.card-preview .file-type-icon {
  max-width: 70%;
  max-height: 80%;
}
.card-preview .cover-placeholder {
  min-height: 0;
  grid-template: minmax(0,1fr) / minmax(0,1fr);
}
.card-info {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: var(--file-card-caption-height);
  margin: 0;
  padding: 24px 10px 10px;
  gap: 0;
  background: linear-gradient(180deg,transparent,#141d26a8 22px,#141d26e0);
  text-align: left;
  pointer-events: none;
}
.card-info strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  min-width: 0;
  height: 2.8em;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 2px #0006;
}
.card-info small { display: none; }

/* Type icons use the content area above the same reserved filename space. */
.file-card-content:has(.file-type-icon,.cover-placeholder,.thumb-fallback:not(.hidden)) .card-preview {
  bottom: var(--file-card-caption-height);
}
.file-card-content:has(.file-type-icon,.cover-placeholder,.thumb-fallback:not(.hidden)) .card-info {
  background: linear-gradient(180deg,transparent,var(--surface) 22px);
}
.file-card-content:has(.file-type-icon,.cover-placeholder,.thumb-fallback:not(.hidden)) .card-info strong {
  color: var(--ink);
  text-shadow: none;
}
.video-duration {
  z-index: 3;
  top: 8px;
  bottom: auto;
}
.video-cover-play { bottom: var(--file-card-caption-height); }

@media (prefers-reduced-motion: reduce) {
  :is(.file-card,.library-card,.home-card) { transition: none; }
}