/* ==========================================================================
   PDF Editor — Design system
   Visual language and motion follow transitions.dev (Jakub Antalik):
   neutral greys, soft inset cards, pill buttons, Untitled-UI glyphs and the
   transitions.dev motion tokens + t-* transition recipes (used under the
   transitions.dev license: free for use inside your own products).
   ========================================================================== */

/* ---------- Font: Inter (OFL), self-hosted — no external requests ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* transitions.dev motion tokens — shared scale */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover (used for the tool dock) */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* Skeleton loader and reveal */
  --pulse-dur: 1000ms;
  --pulse-count: infinite;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  /* Shimmer text */
  --shimmer-dur: 2000ms;
  --shimmer-base: #7c7c7c;
  --shimmer-highlight: #0d0d0d;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.7);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
  --tabs-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  /* Tooltip open/close */
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-move-dur: 160ms;
  --tt-move-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tt-bg: #ffffff;
  --tt-fg: #2f2f2f;
  /* Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Accordion expand */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Toast open / close */
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Learn more hover */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Checkbox check */
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-delay: 0ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Toggle */
  --toggle-dur: 350ms;
  --toggle-travel: 14px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* Thinking states */
  --think-hold: 2000ms;
  --think-swap: 150ms;
  --think-gap: 50ms;
  --think-distance: 8px;
  --think-blur: 2px;
  --think-shimmer: 2000ms;
  --think-base: #7c7c7c;
  --think-highlight: #0d0d0d;
  --think-ease: ease-in-out;
  /* Matrix dot loader */
  --matrix-cycle: 1200ms;
  --matrix-base: #d9d9d9;
  --matrix-active: #85858f;
  --matrix-ease: ease-in-out;

  /* ---------- Colour (light) — transitions.dev palette ---------- */
  --bg: #fdfdfd;
  --bg-sunken: #f4f4f4;
  --text: #0d0d0d;
  --text-muted: #6c6c6c;
  --text-subtle: #767676;
  --text-faint: #8f8f8f;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 16px 0 rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --stage-bg: #f7f7f7;
  --stage-border: rgba(0, 0, 0, 0.04);
  --chip-bg: #f4f4f4;
  --chip-bg-hover: #ececec;
  --chip-bg-pressed: #e6e6e6;
  --chip-active: #ffffff;
  --chip-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --line: #eeeeee;
  --line-strong: #e2e2e2;
  --icon-color: #0d0d0d;
  --icon-color-muted: rgba(13, 13, 13, 0.6);
  --material-bg: #ffffff;
  --material-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 42px rgba(0, 0, 0, 0.06);
  --primary-bg: #0d0d0d;
  --primary-fg: #ffffff;
  --primary-hover: #262626;
  --primary-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --accent: #0073e5;
  --accent-hover: #0064c8;
  --accent-text: #0064c8;
  --accent-soft: rgba(0, 115, 229, 0.09);
  --accent-soft-hover: rgba(0, 115, 229, 0.15);
  --danger: #dc3b40;
  --danger-soft: rgba(220, 59, 64, 0.1);
  --success: #2a9d5c;
  --backdrop: rgba(10, 10, 10, 0.28);
  --viewer-bg: #f1f1f1;
  --page-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.05);
  --skeleton: #eeeeef;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(0, 115, 229, 0.55);
  --sel: #0073e5;
  --field-bg: rgba(0, 115, 229, 0.08);
  --field-border: rgba(0, 115, 229, 0.35);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-card: 24px;
  --radius-stage: 16px;
  --radius-menu: 14px;
  --topbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #121212;
  --bg-sunken: #0e0e0e;
  --text: #ffffff;
  --text-muted: rgba(202, 202, 202, 0.7);
  --text-subtle: #8a8a8a;
  --text-faint: #767676;
  --card-bg: #181818;
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(196, 196, 196, 0.07);
  --card-shadow-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(196, 196, 196, 0.11);
  --stage-bg: #131313;
  --stage-border: rgba(255, 255, 255, 0.03);
  --chip-bg: rgba(255, 255, 255, 0.07);
  --chip-bg-hover: rgba(255, 255, 255, 0.1);
  --chip-bg-pressed: rgba(255, 255, 255, 0.08);
  --chip-active: rgba(255, 255, 255, 0.14);
  --chip-active-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.12);
  --icon-color: #ededed;
  --icon-color-muted: rgba(237, 237, 237, 0.6);
  --material-bg: #1b1b1b;
  --material-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.45);
  --primary-bg: #ffffff;
  --primary-fg: #0d0d0d;
  --primary-hover: #e9e9e9;
  --primary-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --accent: #55cfff;
  --accent-hover: #74d8ff;
  --accent-text: #7cd4ff;
  --accent-soft: rgba(85, 207, 255, 0.12);
  --accent-soft-hover: rgba(85, 207, 255, 0.2);
  --danger: #ff6b6f;
  --danger-soft: rgba(255, 107, 111, 0.12);
  --success: #4cc38a;
  --backdrop: rgba(0, 0, 0, 0.5);
  --viewer-bg: #0c0c0c;
  --page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.55);
  --skeleton: rgba(238, 238, 239, 0.1);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(85, 207, 255, 0.6);
  --sel: #55cfff;
  --field-bg: rgba(85, 160, 255, 0.12);
  --field-border: rgba(85, 160, 255, 0.45);

  --shimmer-base: #6a6a6a;
  --shimmer-highlight: #f2f2f2;
  --think-base: #6a6a6a;
  --think-highlight: #f2f2f2;
  --tabs-text-muted: rgba(251, 251, 251, 0.72);
  --tabs-text-active: #fbfbfb;
  --tabs-bar-bg: rgba(255, 255, 255, 0.05);
  --tabs-pill-bg: rgba(255, 255, 255, 0.14);
  --tabs-pill-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tt-bg: #2a2a2a;
  --tt-fg: #f1f1f1;
  --matrix-base: #2c2c2c;
  --matrix-active: #9a9aa6;

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
body.is-page { overflow: auto; overscroll-behavior: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img, svg, canvas { display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft-hover); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.i { width: 18px; height: 18px; flex: none; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--chip-bg);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition:
    background-color var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out),
    opacity var(--duration-quick) var(--ease-out),
    transform var(--duration-quick) var(--ease-smooth-out),
    box-shadow var(--duration-quick) var(--ease-out);
}
.btn:hover { background: var(--chip-bg-hover); }
.btn:active:not(:disabled) { transform: scale(0.97); background: var(--chip-bg-pressed); }
.btn:disabled { opacity: 0.45; }
.btn .i { width: 16px; height: 16px; }
.btn-sm { height: 34px; padding: 0 13px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-shadow); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--primary-hover); }
.btn-accent { background: var(--accent-soft); color: var(--accent-text); }
.btn-accent:hover { background: var(--accent-soft-hover); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--chip-bg); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); filter: saturate(1.2); }

.icon-btn {
  appearance: none;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--icon-color);
  position: relative;
  flex: none;
  transition:
    background-color var(--duration-quick) var(--ease-out),
    opacity var(--duration-quick) var(--ease-out),
    transform var(--duration-quick) var(--ease-smooth-out);
}
.icon-btn:hover { background: var(--chip-bg); }
.icon-btn:active:not(:disabled) { transform: scale(0.94); background: var(--chip-bg-pressed); }
.icon-btn:disabled { opacity: 0.32; }
.icon-btn.is-primary { background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-shadow); }
.icon-btn.is-primary:hover, .icon-btn.is-primary:active:not(:disabled) { background: var(--primary-hover); }
.icon-btn.is-soft { background: var(--chip-bg); }
.icon-btn.is-soft:hover { background: var(--chip-bg-hover); }
.icon-btn-sm { width: 30px; height: 30px; }
.icon-btn-sm .i { width: 16px; height: 16px; }

/* ---------- Inputs ---------- */
.field { display: grid; gap: 6px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.input {
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.t-input-wrap .t-input.is-error, .t-input.is-error { border-color: var(--danger); }
.t-error-msg { margin: 0; font-size: 12px; color: var(--danger); min-height: 16px; }

/* Search pill (transitions.dev nav search) */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-muted);
  min-width: 0;
}
.search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}
.search input::placeholder { color: var(--text-faint); }
.search .i { width: 16px; height: 16px; }

/* ---------- Tabs sliding (transitions.dev #16) ---------- */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 14px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab .i { width: 16px; height: 16px; }
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] { color: var(--tabs-text-active); }
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  box-shadow: var(--tabs-pill-shadow);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}
.t-tabs.is-block { display: flex; width: 100%; }
.t-tabs.is-block .t-tab { flex: 1 1 0; }
.t-tabs.is-lg .t-tab, .t-tabs.is-lg .t-tabs-pill { height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

/* ---------- Toggle (transitions.dev #27) ---------- */
.t-toggle {
  appearance: none;
  border: 0;
  width: 34px;
  height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: var(--line-strong);
  flex: none;
  transition: background var(--toggle-track) var(--toggle-ease);
}
.t-toggle[data-on="true"] { background: var(--accent); }
.t-toggle-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.t-toggle-thumb { translate: 0 0; will-change: translate; }
.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on {
  0% { translate: 0 0; }
  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
  100% { translate: var(--toggle-travel) 0; }
}
@keyframes t-toggle-off {
  0% { translate: var(--toggle-travel) 0; }
  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
  80% { translate: var(--toggle-ov2) 0; }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-toggle-thumb { animation: none !important; }
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.toggle-row-text { display: grid; gap: 2px; }
.toggle-row-text strong { font-size: 13px; font-weight: 500; }
.toggle-row-text span { font-size: 12px; color: var(--text-muted); }

/* ---------- Checkbox check (transitions.dev #25) ---------- */
.t-check {
  appearance: none;
  border: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.12);
  color: #fff;
  flex: none;
  transition:
    background var(--check-box) var(--check-ease),
    box-shadow var(--check-box) var(--check-ease);
}
.t-check svg { width: 11px; height: 11px; overflow: visible; }
.t-check svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-check[aria-checked="true"] { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 1px 2px rgba(0, 0, 0, 0.12); }
html[data-theme="dark"] .t-check[aria-checked="true"] { color: #0d0d0d; }
.t-check svg path {
  stroke-dasharray: var(--check-len, 15);
  stroke-dashoffset: var(--check-len, 15);
  transition: stroke-dashoffset var(--check-uncheck) var(--check-ease);
}
.t-check[aria-checked="true"] svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay);
}
@media (prefers-reduced-motion: reduce) {
  .t-check, .t-check svg path { transition: none !important; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.stage {
  background: var(--stage-bg);
  border-radius: var(--radius-stage);
  box-shadow: inset 0 0 0 1px var(--stage-border);
}

/* ---------- Menu dropdown (transitions.dev #05) ---------- */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

.menu {
  position: fixed;
  z-index: 110;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 6px;
  border-radius: var(--radius-menu);
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
  font-size: 13px;
}
.menu-header {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-item {
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.menu-item .i { width: 16px; height: 16px; color: var(--icon-color-muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--chip-bg); box-shadow: none; }
.menu-item:disabled { opacity: 0.4; }
.menu-item.is-danger, .menu-item.is-danger .i { color: var(--danger); }
.menu-item .menu-hint { margin-left: auto; padding-left: 16px; font-size: 12px; color: var(--text-faint); font-weight: 400; }
.menu-item .menu-check { margin-left: auto; color: var(--accent); }
.menu-sep { height: 1px; margin: 5px 6px; background: var(--line); }

/* ---------- Modal open / close (transitions.dev #06) ---------- */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* ---------- Panel reveal (transitions.dev #07) — mobile sheets ---------- */
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
}
.backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  transition: opacity var(--modal-close-dur) var(--modal-ease);
}
.overlay.is-open .backdrop { opacity: 1; transition-duration: var(--modal-open-dur); }
.modal {
  position: relative;
  width: min(440px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
}
.modal.is-wide { width: min(620px, 100%); }
.modal-head { padding: 22px 22px 4px; display: flex; align-items: flex-start; gap: 12px; }
.modal-head-text { flex: 1; min-width: 0; }
.modal-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.modal-desc { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--chip-bg);
  color: var(--icon-color);
  flex: none;
}
.modal-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.modal-body { padding: 16px 22px; overflow: auto; display: grid; gap: 16px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 22px 22px;
}
.sheet-grip { display: none; }

/* ---------- Toast (transitions.dev #22) ---------- */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--toast-bottom, 24px) + var(--safe-b));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(440px, calc(100vw - 24px));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  max-width: 100%;
  padding: 8px 8px 8px 14px;
  border-radius: 16px;
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
  font-size: 13px;
  font-weight: 500;
}
.toast-text { flex: 1; min-width: 0; padding: 4px 6px 4px 0; }
.toast-text small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; }
.toast-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--icon-color-muted); }
.toast.is-error .toast-icon { color: var(--danger); }
.toast.is-success .toast-icon { color: var(--success); }
.toast .btn { height: 32px; padding: 0 12px; }

/* ---------- Tooltip (transitions.dev #17) ---------- */
.t-tt-group { position: relative; }
.t-tt {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  overflow: hidden;
  translate: var(--tt-x, 0px) 0;
  scale: var(--tt-scale);
  transform-origin: 50% 100%;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--tt-bg);
  color: var(--tt-fg);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  z-index: 60;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 0 rgba(0, 0, 0, 0.05),
    0 4px 42px 0 rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   var(--tt-out-dur) var(--tt-out-ease),
    scale     var(--tt-out-dur) var(--tt-out-ease),
    translate var(--tt-move-dur) var(--tt-move-ease),
    width     var(--tt-move-dur) var(--tt-move-ease);
}
.t-tt[data-show="true"] {
  opacity: 1;
  scale: 1;
  transition:
    opacity   var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),
    scale     var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),
    translate var(--tt-move-dur) var(--tt-move-ease),
    width     var(--tt-move-dur) var(--tt-move-ease);
}
.t-tt-text { white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.t-tt-text kbd {
  font: inherit;
  font-size: 11px;
  color: var(--text-faint);
  padding: 0 5px;
  border-radius: 4px;
  background: var(--chip-bg);
}
.t-tt.is-below { bottom: auto; top: calc(100% + 8px); transform-origin: 50% 0; }
html[data-theme="dark"] .t-tt { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 24px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .t-tt { transition: none !important; }
}

/* ---------- Text states swap (transitions.dev #04) ---------- */
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-text-swap { transition: none !important; }
}

/* ---------- Icon swap (transitions.dev #09) ---------- */
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}
@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

/* ---------- Notification badge (transitions.dev #03) ---------- */
@keyframes t-badge-slide-in {
  from { transform: translate(var(--badge-offset-x), var(--badge-offset-y)); }
  to   { transform: translate(0, 0); }
}
.t-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  pointer-events: none;
  will-change: transform;
}
.t-badge[data-open="true"] {
  animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease);
}
.t-badge-dot {
  display: block;
  transform-origin: center;
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  transition:
    transform var(--badge-pop-dur)  var(--badge-pop-ease),
    opacity   var(--badge-fade-dur) var(--badge-pop-ease),
    filter    var(--badge-pop-dur)  var(--badge-pop-ease);
  will-change: transform, opacity, filter;
}
.t-badge[data-open="false"] .t-badge-dot {
  transform: scale(0);
  opacity: 0;
  filter: blur(var(--badge-blur));
  transition:
    transform var(--badge-pop-close-dur)  var(--badge-close-ease),
    opacity   var(--badge-fade-close-dur) var(--badge-close-ease),
    filter    var(--badge-pop-close-dur)  var(--badge-close-ease);
}
@media (prefers-reduced-motion: reduce) {
  .t-badge, .t-badge-dot { animation: none !important; transition: none !important; }
}
.badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}
.badge-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
html[data-theme="dark"] .badge-count { color: #0d0d0d; }

/* ---------- Number pop-in (transitions.dev #02) ---------- */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.t-digit {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* ---------- Success check (transitions.dev #10) ---------- */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}
.success-badge {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--success);
  color: #fff;
}
.success-badge svg { width: 12px; height: 12px; }
.success-badge svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Error state shake (transitions.dev #12) ---------- */
.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .t-input { animation: none !important; transform: none !important; }
}

/* ---------- Skeleton loader and reveal (transitions.dev #14) ---------- */
.t-skel { position: relative; }
.t-skel-skeleton,
.t-skel-content {
  position: absolute;
  inset: 0;
}
.t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
  transition: none !important;
}
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--pulse-min); }
}
@media (prefers-reduced-motion: reduce) {
  .t-skel-skeleton, .t-skel-content {
    transition: none !important;
  }
  .t-skel-skeleton.is-pulsing > * { animation: none !important; }
}
.skel-block { background: var(--skeleton); border-radius: 6px; }

/* ---------- Shimmer text (transitions.dev #15) ---------- */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

/* ---------- Thinking states (transitions.dev #28) ---------- */
.t-think { position: relative; display: inline-block; text-align: left; }
.t-think-sizer { display: block; visibility: hidden; white-space: nowrap; height: 0; overflow: hidden; }
.t-think-line { display: block; height: 1.45em; }
.t-think-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  color: var(--think-base);
  white-space: nowrap;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--think-swap) var(--think-ease),
    filter var(--think-swap) var(--think-ease),
    opacity var(--think-swap) var(--think-ease);
  will-change: transform, filter, opacity;
}
.t-think-text::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    transparent 0%, transparent 40%,
    var(--think-highlight) 50%,
    transparent 60%, transparent 100%);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-think-shimmer var(--think-shimmer) linear infinite;
}
@keyframes t-think-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.t-think-text.is-exit {
  transform: translateY(calc(var(--think-distance) * -1));
  filter: blur(var(--think-blur));
  opacity: 0;
}
.t-think-text.is-enter-start {
  transition: none;
  transform: translateY(var(--think-distance));
  filter: blur(var(--think-blur));
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .t-think-text { transition: none !important; transform: none !important; filter: none !important; }
  .t-think-text::before { display: none !important; }
}

/* ---------- Matrix dot loader (transitions.dev #31) ---------- */
.t-matrix {
  display: grid;
  grid-template-columns: repeat(4, 3px);
  grid-auto-rows: 3px;
  gap: 2px;
}
.t-matrix i {
  display: block;
  border-radius: 1px;
  background: var(--matrix-base);
  animation: t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.t-matrix i.is-gap { visibility: hidden; animation: none; }
@keyframes t-matrix-pulse {
  0%, 45%, 100% { background-color: var(--matrix-base); }
  15%           { background-color: var(--matrix-active); }
}
@media (prefers-reduced-motion: reduce) {
  .t-matrix i { animation: none !important; }
}

/* ---------- Texts reveal (transitions.dev #18) ---------- */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* ---------- Accordion expand (transitions.dev #21) ---------- */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}
@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}
.t-acc-head {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.t-acc-chevron svg { width: 16px; height: 16px; fill: none; stroke: var(--icon-color-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-acc-panel-inner > div { padding-bottom: 8px; display: grid; gap: 4px; }

/* ---------- Learn more hover (transitions.dev #24) ---------- */
.t-learn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
}
.t-learn:hover { color: var(--text); }
.t-learn-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }
@media (prefers-reduced-motion: reduce) {
  .t-learn-chevron, .t-learn-arm { transition: none !important; }
}

/* ---------- Card resize (transitions.dev #01) ---------- */
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}
@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}

/* ---------- Avatar group hover (transitions.dev #11) — tool dock ---------- */
.t-avatar {
  transform-origin: center;
  transform:
    translateY(var(--shift, 0px))
    scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}

/* ---------- Page side-by-side (transitions.dev #08) ---------- */
.t-page-slide {
  position: relative;
}
.t-page-slide > .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide > .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide > .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity   var(--page-fade-dur)  var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter    var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] > .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] > .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
@media (prefers-reduced-motion: reduce) {
  .t-page-slide > .t-page { transition: none !important; }
}
.t-page-slide.is-instant > .t-page { transition: none !important; }
/* After a slide settles, drop the will-change/filter layer so pages
   render crisp and fixed children position against the viewport. */
.t-page-slide.is-settled > .t-page { will-change: auto; }
.t-page-slide.is-settled[data-page="1"] > .t-page[data-page-id="1"],
.t-page-slide.is-settled[data-page="2"] > .t-page[data-page-id="2"] { filter: none; transform: none; }

/* ==========================================================================
   App layout
   ========================================================================== */
.app { position: fixed; inset: 0; }
.screen { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; overflow: clip; }
.boot-hide { visibility: hidden; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.brand small { font-weight: 500; color: var(--text-faint); }

/* ---------- Home ---------- */
.home-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.home-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 max(24px, var(--safe-l)) 0 max(24px, var(--safe-r));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.home-nav .spacer { flex: 1; }
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border-radius: 50px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.nav-pill:hover { background: var(--chip-bg); color: var(--text); }
.nav-pill .i { width: 16px; height: 16px; }

.home-main {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 24px max(24px, var(--safe-l)) 48px max(24px, var(--safe-r));
}
.hero { text-align: center; padding: 36px 0 28px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 500;
  margin: 0 auto 18px;
}
.eyebrow .i { width: 14px; height: 14px; }
.hero h1 {
  margin: 0;
  font-size: clamp(32px, 5.2vw, 48px);
  line-height: 1.1;
  font-weight: 560;
  letter-spacing: -0.025em;
}
.hero h1 .muted { color: var(--text-faint); }
.hero p {
  margin: 14px auto 0;
  max-width: 520px;
  color: var(--text-muted);
  font-size: 15px;
}

.drop-card { padding: 8px; margin-top: 8px; }
.drop-stage {
  position: relative;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 44px 24px;
  text-align: center;
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
}
.drop-stage.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--icon-color);
}
.drop-title { margin: 0; font-size: 15px; font-weight: 500; }
.drop-sub { margin: -8px 0 0; font-size: 13px; color: var(--text-muted); }
.drop-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.drop-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); }
.drop-note .i { width: 14px; height: 14px; }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.quick-card {
  appearance: none;
  border: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--text);
  transition: box-shadow 200ms ease-out, transform 200ms var(--ease-smooth-out);
}
.quick-card:hover { box-shadow: var(--card-shadow-hover); }
.quick-card:active { transform: scale(0.985); }
.quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--stage-bg);
  box-shadow: inset 0 0 0 1px var(--stage-border);
  color: var(--icon-color);
  flex: none;
}
.quick-text { display: grid; gap: 2px; min-width: 0; }
.quick-text strong { font-size: 13px; font-weight: 500; }
.quick-text span { font-size: 12px; color: var(--text-subtle); }

.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 14px;
}
.section-head h2 { margin: 0; font-size: 17px; font-weight: 560; letter-spacing: -0.01em; }
.section-head .count { color: var(--text-faint); font-weight: 500; }
.section-head .spacer { flex: 1; }
.section-head .search { width: 220px; }

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}
.doc-card {
  position: relative;
  padding: 8px;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: box-shadow 200ms ease-out, transform 250ms var(--ease-smooth-out), opacity 250ms var(--ease-smooth-out);
  outline: none;
}
.doc-card:hover { box-shadow: var(--card-shadow-hover); }
.doc-card:active { transform: scale(0.985); }
.doc-card:focus-visible { box-shadow: var(--card-shadow-hover), var(--focus); }
.doc-thumb {
  aspect-ratio: 4 / 4.2;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.doc-thumb .t-skel { position: absolute; inset: 14px 26px; }
.doc-thumb .t-skel-skeleton { display: grid; place-items: center; }
.doc-thumb .t-skel-skeleton > div { width: 100%; height: 100%; border-radius: 6px; background: var(--skeleton); }
.doc-thumb .t-skel-content { display: grid; place-items: center; }
.doc-thumb img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.doc-meta { display: flex; align-items: center; gap: 8px; padding: 12px 6px 6px 8px; }
.doc-meta-text { flex: 1; min-width: 0; }
.doc-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-sub { font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-card .icon-btn { background: var(--chip-bg); }
.doc-card .icon-btn:hover { background: var(--chip-bg-hover); }
.doc-card.is-removing { opacity: 0; transform: scale(0.96); }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}
.empty strong { color: var(--text); font-weight: 500; font-size: 15px; }
.empty span { font-size: 13px; }

.home-foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 12px;
  color: var(--text-faint);
}
.home-foot .spacer { flex: 1; }

.drop-overlay {
  position: fixed;
  inset: 12px;
  z-index: 95;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 2px var(--accent);
  font-size: 15px;
  font-weight: 500;
  pointer-events: none;
}
.drop-overlay > div { display: grid; justify-items: center; gap: 12px; }

/* ---------- Editor: top bar ---------- */
.topbar {
  height: var(--topbar-h);
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 max(12px, var(--safe-r)) 0 max(12px, var(--safe-l));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tb-right { justify-content: flex-end; }
.tb-center { display: flex; justify-content: center; }
.doc-name-btn {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  transition: background-color 150ms ease-out;
}
.doc-name-btn:hover { background: var(--chip-bg); }
.doc-name-stack { display: grid; min-width: 0; line-height: 1.2; }
.doc-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28vw;
}
.save-state { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.doc-name-btn .i { width: 16px; height: 16px; color: var(--icon-color-muted); }
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.btn-export { padding: 0 14px 0 12px; }
.btn-export .t-badge { top: -2px; right: -2px; }

/* ---------- Editor: body ---------- */
.editor-body { flex: 1; min-height: 0; }
.mode { display: flex; overflow: hidden; overflow: clip; }
.editor-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }

.thumbs {
  width: 168px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: margin-left var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease);
}
.editor.is-thumbs-hidden .thumbs { margin-left: -168px; opacity: 0; pointer-events: none; }
.thumb {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}
.thumb-box {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: box-shadow 150ms ease-out;
}
.thumb:hover .thumb-box { box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 4px var(--chip-bg); }
.thumb.is-current .thumb-box { box-shadow: 0 0 0 2px var(--accent); }
.thumb.is-current { color: var(--text); }
.thumb-box canvas, .card-thumb canvas { width: 100%; height: 100%; }

.viewer {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--viewer-bg);
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 28px 150px;
  min-width: min-content;
  transform-origin: 0 0;
}
.page {
  position: relative;
  flex: none;
  background: #fff;
  box-shadow: var(--page-shadow);
  border-radius: 2px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.page-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; }
.page-skel { position: absolute; inset: 0; display: grid; place-items: center; }
.page-skel .t-matrix { opacity: 0.8; }
.layer {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.page-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  pointer-events: none;
}
.viewer[data-tool="text"] .page,
.viewer[data-tool="stamp"] .page { cursor: crosshair; }
.viewer[data-tool="draw"] .page,
.viewer[data-tool="highlight"] .page,
.viewer[data-tool="shape"] .page,
.viewer[data-tool="whiteout"] .page { cursor: crosshair; touch-action: none; }
.viewer[data-tool="textedit"] .page { cursor: text; }

/* Annotations (positioned in PDF points, layer scaled by zoom) */
.an {
  position: absolute;
  touch-action: pan-x pan-y;
}
.an svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.an-image img { width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.an-text {
  white-space: pre;
  line-height: 1.2;
  min-width: 2px;
  outline: none;
  cursor: default;
  word-break: keep-all;
}
.an-text:empty::before { content: attr(data-placeholder); opacity: 0.45; }
.an-text.is-editing { cursor: text; user-select: text; -webkit-user-select: text; touch-action: auto; caret-color: var(--sel); }
.hl-layer { mix-blend-mode: multiply; }
.viewer[data-tool="select"] .an,
.an.is-selected { cursor: move; }
.an.is-selected { touch-action: none; }
.an-text.is-editing { cursor: text; }
.annot-hover .an:hover { outline: 1px dashed color-mix(in srgb, var(--sel) 70%, transparent); outline-offset: 1px; }

/* Selection frame (screen pixels, unscaled) */
.sel {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.sel-frame {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--sel);
  border-radius: 2px;
}
.sel.is-editing .sel-frame { border-style: dashed; }
.sel-h {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #fff;
  border: 1.5px solid var(--sel);
  border-radius: 3px;
  pointer-events: auto;
  touch-action: none;
}
.sel-h::after { content: ""; position: absolute; inset: -12px; }
.sel-h[data-h="nw"], .sel-h[data-h="se"] { cursor: nwse-resize; }
.sel-h[data-h="ne"], .sel-h[data-h="sw"] { cursor: nesw-resize; }
.sel-h[data-h="n"], .sel-h[data-h="s"] { cursor: ns-resize; }
.sel-h[data-h="e"], .sel-h[data-h="w"] { cursor: ew-resize; }
.sel-h[data-h="p1"], .sel-h[data-h="p2"] { cursor: crosshair; border-radius: 999px; }
.draft-rect {
  position: absolute;
  border: 1.5px dashed var(--sel);
  background: color-mix(in srgb, var(--sel) 8%, transparent);
  pointer-events: none;
  z-index: 4;
}

/* Text-edit tool hit boxes over existing PDF text */
.te-layer .te-line {
  position: absolute;
  border-radius: 2px;
  cursor: text;
  transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
}
.te-layer .te-line:hover { background: color-mix(in srgb, var(--sel) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sel) 60%, transparent); }

/* Page number preview */
.pn {
  position: absolute;
  font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
  color: #222;
  white-space: pre;
  line-height: 1.2;
  pointer-events: none;
}
.te-layer { display: none; }
.viewer[data-tool="textedit"] .te-layer { display: block; }
.layer { pointer-events: none; }
.layer.forms > *, .layer.annots > .an, .te-layer .te-line { pointer-events: auto; }
.layer.annots > .an-line { pointer-events: none; }
.mini-anns .an { pointer-events: none !important; }
.live-ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* Form fields */
.fm {
  position: absolute;
  margin: 0;
  border: 0;
  padding: 0 2px;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 1px var(--field-border);
  border-radius: 1px;
  color: #111;
  font-family: Helvetica, Arial, sans-serif;
  touch-action: manipulation;
}
html[data-theme="dark"] .fm { background: rgba(0, 115, 229, 0.08); }
.fm:focus { box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(0, 115, 229, 0.06); }
textarea.fm { resize: none; padding-top: 1px; line-height: 1.15; }
select.fm { padding: 0 1px; }
.fm-check { display: grid; place-items: center; cursor: pointer; padding: 0; }
.fm-check svg { width: 80%; height: 80%; opacity: 0; transform: scale(0.6); transition: opacity 150ms ease-out, transform 250ms var(--ease-bounce); }
.fm-check[aria-checked="true"] svg { opacity: 1; transform: scale(1); }
.fm-check.is-radio { border-radius: 999px; }
.fm[readonly], .fm:disabled { background: transparent; box-shadow: none; }

/* ---------- Dock ---------- */
.dock-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(16px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100% - 24px);
}
.dock {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 20px;
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
  max-width: 100%;
}
.dock-scroll { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dock-btn {
  appearance: none;
  border: 0;
  position: relative;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--icon-color-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out,
    box-shadow 150ms ease-out,
    transform var(--avatar-dur) var(--avatar-ease-in);
}
.dock-btn .lbl { display: none; }
.dock-btn.has-label .lbl { display: inline; }
.dock-btn:hover { background: var(--chip-bg); color: var(--icon-color); }
.dock-btn[aria-pressed="true"] {
  background: var(--chip-active);
  box-shadow: var(--chip-active-shadow);
  color: var(--icon-color);
}
html:not([data-theme="dark"]) .dock-btn[aria-pressed="true"] { background: var(--chip-bg-pressed); box-shadow: none; }
.dock-btn:disabled { opacity: 0.35; }
.dock-btn.is-danger:not(:disabled):hover { color: var(--danger); background: var(--danger-soft); }
.dock-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; }
.dock-count {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.dock-count .muted { color: var(--text-faint); }

/* Tool options bar */
.opts {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
  max-width: 100%;
  overflow: hidden;
}
.opts {
  transition:
    width var(--resize-dur) var(--resize-ease),
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}
.opts.is-hidden {
  opacity: 0;
  transform: translateY(var(--distance-base)) scale(var(--toast-scale));
  filter: blur(var(--blur-small));
  pointer-events: none;
  transition:
    width var(--resize-dur) var(--resize-ease),
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
@media (prefers-reduced-motion: reduce) {
  .opts { transition: none !important; }
}
.opts-inner { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.opts-hint { font-size: 12px; color: var(--text-muted); padding: 0 8px; white-space: nowrap; }
.opts-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; flex: none; }
.opts-label { font-size: 12px; color: var(--text-faint); padding: 0 4px 0 6px; font-weight: 500; }
.swatches { display: flex; gap: 2px; }
.swatch {
  appearance: none;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  padding: 0;
  transition: background-color 150ms ease-out;
}
.swatch:hover { background: var(--chip-bg); }
.swatch i {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 250ms var(--ease-bounce), box-shadow 150ms ease-out;
}
.swatch[aria-checked="true"] i { transform: scale(0.82); box-shadow: 0 0 0 2px var(--material-bg), 0 0 0 3.5px var(--c); }
.swatch.is-none i { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), var(--card-bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.swatch.is-none[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--material-bg), 0 0 0 3.5px var(--text-faint); }
.stepper { display: inline-flex; align-items: center; gap: 2px; height: 30px; border-radius: 999px; background: var(--chip-bg); padding: 0 2px; }
.stepper .icon-btn { width: 26px; height: 26px; }
.stepper .icon-btn .i { width: 14px; height: 14px; }
.stepper-val { min-width: 30px; text-align: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.opt-btn {
  appearance: none;
  border: 0;
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--icon-color-muted);
  font-size: 12px;
  font-weight: 500;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.opt-btn .i { width: 16px; height: 16px; }
.opt-btn:hover { background: var(--chip-bg); color: var(--icon-color); }
.opt-btn[aria-pressed="true"] { background: var(--chip-active); box-shadow: var(--chip-active-shadow); color: var(--icon-color); }
html:not([data-theme="dark"]) .opt-btn[aria-pressed="true"] { background: var(--chip-bg-pressed); box-shadow: none; }
.opt-btn.is-danger:hover { color: var(--danger); background: var(--danger-soft); }
.opts .t-tabs { padding: 2px; }
.opts .t-tab { height: 26px; padding: 2px 10px; font-size: 12px; }
.opts .t-tabs-pill { top: 2px; height: 26px; }
.sig-chip {
  appearance: none;
  border: 0;
  height: 30px;
  width: 64px;
  padding: 2px 6px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  display: grid;
  place-items: center;
}
.sig-chip svg { width: 100%; height: 100%; }
.sig-chip:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Zoom + page indicator (desktop) */
.viewer-hud {
  position: absolute;
  right: 16px;
  bottom: calc(16px + var(--safe-b));
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
}
.viewer-hud .icon-btn { width: 32px; height: 32px; }
.viewer-hud .icon-btn .i { width: 16px; height: 16px; }
.zoom-val {
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 52px;
  height: 32px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.zoom-val:hover { background: var(--chip-bg); }
.page-ind {
  position: absolute;
  left: 16px;
  bottom: calc(16px + var(--safe-b));
  z-index: 19;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
  pointer-events: none;
}
.page-ind .t-digit-group { color: var(--text); }

.banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: var(--material-bg);
  box-shadow: var(--material-shadow);
  font-size: 12px;
  font-weight: 500;
}
.banner .i { width: 16px; height: 16px; color: var(--accent); }
.banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner .icon-btn { width: 28px; height: 28px; }
.banner .icon-btn .i { color: var(--icon-color-muted); width: 14px; height: 14px; }

/* ---------- Organizer ---------- */
.org { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.org-scroll { flex: 1; overflow: auto; background: var(--viewer-bg); -webkit-overflow-scrolling: touch; }
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 22px 18px;
  padding: 28px max(28px, var(--safe-r)) 150px max(28px, var(--safe-l));
  max-width: 1280px;
  margin: 0 auto;
}
.org-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}
.org-card.is-ghost { opacity: 0.25; }
.org-thumb-wrap { width: 100%; aspect-ratio: 1 / 1.3; display: grid; place-items: center; }
.org-thumb {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--page-shadow);
  overflow: hidden;
  transition: box-shadow 150ms ease-out, transform 250ms var(--ease-smooth-out);
}
.org-card:hover .org-thumb { transform: translateY(-2px); }
.org-card.is-selected .org-thumb { box-shadow: 0 0 0 2.5px var(--accent), var(--page-shadow); }
.org-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.org-thumb .layer { pointer-events: none; }
.org-card .t-check { position: absolute; top: 8px; left: 8px; z-index: 3; opacity: 0; transition: opacity 150ms ease-out, background var(--check-box) var(--check-ease), box-shadow var(--check-box) var(--check-ease); }
.org-card:hover .t-check, .org-card .t-check[aria-checked="true"], .org.is-selecting .org-card .t-check { opacity: 1; }
.org-num { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.org-card.is-selected .org-num { color: var(--accent-text); }
.org-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 150ms ease-out, transform 250ms var(--ease-smooth-out);
}
.org-card:hover .org-actions { opacity: 1; transform: none; }
.org-actions .icon-btn { width: 28px; height: 28px; background: rgba(20, 20, 20, 0.72); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.org-actions .icon-btn:hover { background: rgba(20, 20, 20, 0.9); }
.org-actions .icon-btn .i { width: 14px; height: 14px; }
.drag-ghost {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--accent);
  transform: rotate(-2deg) scale(1.03);
  transition: transform 200ms var(--ease-smooth-out);
  background: #fff;
}
.drag-ghost canvas { width: 100%; height: 100%; }
.drop-caret {
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  pointer-events: none;
  z-index: 4;
  transition: left 150ms var(--ease-smooth-out), top 150ms var(--ease-smooth-out);
}

/* ---------- Dialog content helpers ---------- */
.form-grid { display: grid; gap: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.hint { font-size: 12px; color: var(--text-muted); margin: 0; }
.hint .i { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.file-list { display: grid; gap: 6px; }
.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 6px;
  border-radius: 14px;
  background: var(--stage-bg);
  box-shadow: inset 0 0 0 1px var(--stage-border);
  touch-action: pan-y;
}
.file-row.is-dragging { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 0 1.5px var(--accent); background: var(--material-bg); position: relative; z-index: 2; }
.file-row .grip { color: var(--icon-color-muted); cursor: grab; touch-action: none; padding: 6px 2px; display: grid; place-items: center; }
.file-row .grip .i { width: 16px; height: 16px; }
.file-row-thumb { width: 32px; height: 40px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--line-strong); overflow: hidden; flex: none; display: grid; place-items: center; color: #999; }
.file-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-row-text { flex: 1; min-width: 0; }
.file-row-text strong { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row-text span { font-size: 12px; color: var(--text-subtle); }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.img-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--stage-bg);
  box-shadow: inset 0 0 0 1px var(--stage-border);
  touch-action: none;
  cursor: grab;
  transition: transform 200ms var(--ease-smooth-out), box-shadow 150ms ease-out;
}
.img-tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.img-tile .num { position: absolute; left: 6px; bottom: 6px; min-width: 20px; height: 20px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 6px; }
.img-tile .icon-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.img-tile .icon-btn .i { width: 14px; height: 14px; }
.img-tile.is-dragging { z-index: 3; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--accent); }
.img-add {
  appearance: none;
  border: 0;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.img-add:hover { background: var(--chip-bg); }

.sigpad-wrap { position: relative; }
.sigpad {
  width: 100%;
  height: 200px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  touch-action: none;
  cursor: crosshair;
}
.sigpad-line { position: absolute; left: 24px; right: 24px; bottom: 48px; height: 1px; background: #d6d6d6; pointer-events: none; }
.sigpad-hint { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 12px; color: #9a9a9a; pointer-events: none; transition: opacity 200ms ease-out; }
.sig-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.sig-item { position: relative; height: 64px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); padding: 6px 10px; cursor: pointer; border: 0; }
.sig-item:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sig-item svg { width: 100%; height: 100%; }
.sig-item .icon-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; color: #777; }
.sig-item .icon-btn .i { width: 14px; height: 14px; }

.progress-row { display: flex; align-items: center; gap: 12px; }

/* Settings */
.settings-list { display: grid; }
.settings-list > * + * { border-top: 1px solid var(--line); }
.storage-bar { height: 6px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.storage-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: 0; transition: width 600ms var(--ease-smooth-out); }

/* ---------- Responsive: phone ---------- */
.mobile-only { display: none !important; }
@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: revert !important; }
  .icon-btn.mobile-only, .dock-btn.mobile-only { display: inline-grid !important; }

  :root { --topbar-h: 52px; }
  .home-nav { height: 56px; padding: 0 max(16px, var(--safe-l)) 0 max(16px, var(--safe-r)); }
  .home-main { padding: 8px max(16px, var(--safe-l)) 40px max(16px, var(--safe-r)); }
  .hero { padding: 18px 0 20px; text-align: left; }
  .hero h1 { font-size: 30px; }
  .hero p { margin-left: 0; font-size: 14px; }
  .eyebrow { margin: 0 0 14px; }
  .drop-stage { padding: 28px 18px; }
  .quick { grid-template-columns: 1fr; gap: 8px; }
  .quick-card { padding: 10px; border-radius: 18px; }
  .quick-icon { width: 40px; height: 40px; }
  .section-head { margin-top: 30px; flex-wrap: wrap; }
  .section-head .search { width: 100%; order: 5; }
  .doc-grid { grid-template-columns: 1fr; gap: 8px; }
  .doc-card { display: flex; align-items: center; padding: 6px; border-radius: 18px; }
  .doc-thumb { width: 56px; height: 64px; aspect-ratio: auto; border-radius: 12px; flex: none; }
  .doc-thumb .t-skel { inset: 6px 9px; }
  .doc-meta { flex: 1; min-width: 0; padding: 0 2px 0 12px; }

  .topbar { grid-template-columns: auto 1fr auto; gap: 6px; padding: 0 max(8px, var(--safe-r)) 0 max(8px, var(--safe-l)); }
  .tb-center { justify-content: center; }
  .doc-name { max-width: 40vw; }
  .t-tabs.mode-tabs .t-tab { padding: 4px 12px; }

  .thumbs { display: none; }
  .pages { padding: 14px 10px 190px; gap: 12px; }
  .viewer-hud { display: none; }
  .page-ind { left: 50%; transform: translateX(-50%); top: 10px; bottom: auto; height: 26px; font-size: 11px; opacity: 0; transition: opacity 250ms ease-out; }
  .page-ind.is-visible { opacity: 0.94; }

  .dock-wrap {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: none;
    gap: 0;
    align-items: stretch;
  }
  .opts { border-radius: 16px; margin: 0 8px 8px; align-self: center; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
  .opts::-webkit-scrollbar { display: none; }
  .dock {
    border-radius: 22px 22px 0 0;
    padding: 6px max(6px, var(--safe-r)) calc(6px + var(--safe-b)) max(6px, var(--safe-l));
    box-shadow: 0 -1px 0 var(--line), 0 -8px 30px rgba(0, 0, 0, 0.08);
    gap: 0;
  }
  html[data-theme="dark"] .dock { box-shadow: 0 -1px 0 var(--line), 0 -8px 30px rgba(0, 0, 0, 0.4); }
  .dock-scroll { flex: 1; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
  .dock-scroll::-webkit-scrollbar { display: none; }
  .dock-btn {
    flex-direction: column;
    gap: 3px;
    height: 54px;
    min-width: 54px;
    padding: 0 6px;
    border-radius: 14px;
    font-size: 10px;
  }
  .dock-btn .lbl { display: block; font-size: 10px; font-weight: 500; }
  .dock-btn .i { width: 20px; height: 20px; }
  .dock-sep { height: 30px; margin: 0 2px; }
  .dock-count { height: 54px; font-size: 12px; padding: 0 8px; }

  .org-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; padding: 16px 12px 190px; }
  .org-card .t-check { opacity: 1; top: 6px; left: 6px; }
  .org-actions { display: none; }

  .overlay { padding: 0; place-items: end stretch; }
  .modal {
    width: 100%;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    padding-bottom: var(--safe-b);
  }
  .modal.is-wide { width: 100%; }
  .sheet-grip { display: block; width: 36px; height: 5px; border-radius: 999px; background: var(--line-strong); margin: 8px auto 0; flex: none; }
  .modal-head { padding: 14px 18px 2px; }
  .modal-body { padding: 14px 18px; }
  .modal-foot { padding: 6px 18px 16px; }
  .modal-foot .btn { flex: 1; height: 46px; }
  .menu { max-width: calc(100vw - 16px); }
  .menu-item { min-height: 42px; font-size: 14px; }
  .toasts { --toast-bottom: 150px; }
}
@media (max-width: 380px) {
  .t-tabs.mode-tabs .t-tab { padding: 4px 9px; font-size: 12px; }
  .t-tabs.mode-tabs .t-tab .i { display: none; }
}
@media (hover: none) {
  .org-card:hover .org-thumb { transform: none; }
  .doc-card:hover { box-shadow: var(--card-shadow); }
}

/* ---------- Legal page ---------- */
.legal { width: min(760px, 100%); margin: 0 auto; padding: 24px max(24px, var(--safe-l)) 80px max(24px, var(--safe-r)); }
.legal h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 560; letter-spacing: -0.025em; margin: 24px 0 8px; line-height: 1.1; }
.legal .lead { color: var(--text-muted); font-size: 15px; margin: 0 0 28px; }
.legal section { padding: 22px 24px; margin-top: 12px; }
.legal h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.005em; }
.legal p, .legal li { color: var(--text-muted); font-size: 14px; line-height: 1.65; }
.legal p { margin: 8px 0 0; }
.legal ul { margin: 8px 0 0; padding-left: 20px; }
.legal strong { color: var(--text); font-weight: 500; }
.legal a { color: var(--accent-text); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .placeholder { background: var(--accent-soft); color: var(--accent-text); border-radius: 6px; padding: 1px 6px; }
.legal .stand { margin-top: 28px; font-size: 12px; color: var(--text-faint); }
@media (max-width: 420px) {
  .nav-label { display: none; }
  .nav-compact { width: 36px; padding: 0; justify-content: center; }
}
.field > .stepper { justify-self: start; }
.an:focus-visible, .an:focus { box-shadow: none; outline: none; }
@media (max-width: 720px) {
  .legal { padding: 8px max(16px, var(--safe-l)) 60px max(16px, var(--safe-r)); }
  .legal section { padding: 18px; border-radius: 20px; }
}