/*!
 * Pulsar UI kit 1.0 — pulsar-ui.css
 * For the HTML pages of Pulsar extensions (popup, options and full pages shown in Pulsar's drawer or a tab).
 * The same tokens as the Pulsar app ("Quiet": shadowless, black primary — white in dark mode — and green only for
 * success and active details). Light and dark follow the phone; set data-theme="light" | "dark" on <html> to force one.
 * Mobile first (360–430 px), 48 px touch targets, logical properties (works right-to-left), honours reduced motion.
 * Docs: https://pulsarbrowser.com/developers/ui-kit
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* colour (ui/src/main/res/values/tokens.xml) */
  --pl-ground: #F7F7F8;
  --pl-canvas: #FFFFFF;
  --pl-card: #FFFFFF;
  --pl-hair: #E8E8E8;
  --pl-hair-strong: #D4D4D8;
  --pl-field: #F4F4F4;
  --pl-field-border: #E6E6E6;
  --pl-field-focus: #BDBDBD;
  --pl-ink: #0D0D0D;
  --pl-on-ink: #FFFFFF;
  --pl-mut: #5E5E5E;
  --pl-faint: #9CA3AF;
  --pl-accent: #10A37F;
  --pl-accent-ink: #0E8C6D;
  --pl-accent-tint: #E7F6EC;
  --pl-red: #D93B3B;
  --pl-red-tint: #FFEBEA;
  --pl-on-red: #FFFFFF;
  --pl-amber: #B45309;
  --pl-amber-tint: #FFF4E0;
  --pl-blue: #2E64D0;
  --pl-blue-tint: #EAF1FD;
  --pl-grab: #D9D9DE;
  --pl-dim: rgba(13, 13, 13, .32);
  --pl-toggle-off: #D9D9DE;
  --pl-toggle-on: #0D0D0D;
  --pl-knob-on: #FFFFFF;
  --pl-knob-off: #FFFFFF;
  --pl-control-off: #C9C9CF;
  --pl-ripple: rgba(0, 0, 0, .08);
  --pl-ripple-on-ink: rgba(255, 255, 255, .2);
  --pl-snack: #0D0D0D;
  --pl-on-snack: #FFFFFF;
  --pl-spinner-track: #E3E3E3;
  /* tile tints: a pale fill behind a coloured icon */
  --pl-tint-blue: #2E64D0;   --pl-tint-blue-bg: #EAF1FD;
  --pl-tint-red: #E53935;    --pl-tint-red-bg: #FFEBEA;
  --pl-tint-orange: #C2581B; --pl-tint-orange-bg: #FDF0E7;
  --pl-tint-green: #0E8C6D;  --pl-tint-green-bg: #E9F6F0;
  --pl-tint-teal: #0E6670;   --pl-tint-teal-bg: #E6F6F7;
  --pl-tint-amber: #B45309;  --pl-tint-amber-bg: #FFF4E0;
  --pl-tint-violet: #6E46D6; --pl-tint-violet-bg: #F1ECFD;
  --pl-tint-pink: #BE3667;   --pl-tint-pink-bg: #FCEDF2;
  --pl-tint-sky: #0369A1;    --pl-tint-sky-bg: #E6F3FB;
  --pl-tint-slate: #3F4A5A;  --pl-tint-slate-bg: #EEF0F3;

  /* size (tokens.xml dimens) */
  --pl-gutter: 16px;
  --pl-bar: 60px;
  --pl-pill: 44px;
  --pl-button: 48px;
  --pl-touch: 48px;
  --pl-icon: 22px;
  --pl-radius-card: 20px;
  --pl-radius-hero: 24px;
  --pl-radius-sheet: 28px;
  --pl-radius-tile: 16px;
  --pl-radius-tile-small: 12px;
  --pl-radius-menu: 16px;
  --pl-menu-row: 48px;
  --pl-menu-margin: 8px;

  /* type */
  --pl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --pl-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* motion (ui/…/Motion.kt) */
  --pl-short: 120ms;
  --pl-medium: 200ms;
  --pl-long: 280ms;
  --pl-menu-in: 170ms;
  --pl-menu-out: 110ms;
  --pl-stagger: 20ms;
  --pl-rise: 8px;
  --pl-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --pl-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --pl-ease-accelerate: cubic-bezier(.4, 0, 1, 1);
  --pl-ease-emphasized: cubic-bezier(.05, .7, .1, 1);
}

/* dark (values-night/tokens.xml): the phone's theme, unless the page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pl-ground: #171717; --pl-canvas: #171717; --pl-card: #222222; --pl-hair: #303030; --pl-hair-strong: #4A4A50;
    --pl-field: #262626; --pl-field-border: #353535; --pl-field-focus: #5A5A5A;
    --pl-ink: #EDEDED; --pl-on-ink: #0D0D0D; --pl-mut: #A8A8A8; --pl-faint: #8F8F8F;
    --pl-accent: #10A37F; --pl-accent-ink: #5FD3AE; --pl-accent-tint: #1E3A2F;
    --pl-red: #F26B6B; --pl-red-tint: #3A1F1F; --pl-on-red: #161616; --pl-amber: #F0B254; --pl-amber-tint: #3A2E1A;
    --pl-blue: #7FA8F5; --pl-blue-tint: #1B2A44;
    --pl-grab: #3A3A3A; --pl-dim: rgba(0, 0, 0, .55);
    --pl-toggle-off: #3A3A3A; --pl-toggle-on: #ECECEC; --pl-knob-on: #161616; --pl-knob-off: #8F8F8F; --pl-control-off: #52525B;
    --pl-ripple: rgba(255, 255, 255, .12); --pl-ripple-on-ink: rgba(0, 0, 0, .15);
    --pl-snack: #ECECEC; --pl-on-snack: #0D0D0D; --pl-spinner-track: #3A3A3A;
    --pl-tint-blue: #7FA8F5;   --pl-tint-blue-bg: #1B2A44;
    --pl-tint-red: #F28B8B;    --pl-tint-red-bg: rgba(229, 57, 53, .22);
    --pl-tint-orange: #F2A68A; --pl-tint-orange-bg: #33241E;
    --pl-tint-green: #5FD3AE;  --pl-tint-green-bg: #16302A;
    --pl-tint-teal: #86C7F0;   --pl-tint-teal-bg: #1E2A33;
    --pl-tint-amber: #F0B254;  --pl-tint-amber-bg: rgba(180, 83, 9, .22);
    --pl-tint-violet: #B49CF5; --pl-tint-violet-bg: #2A2440;
    --pl-tint-pink: #F2B8B8;   --pl-tint-pink-bg: #2A2424;
    --pl-tint-sky: #8FC4EA;    --pl-tint-sky-bg: rgba(3, 105, 161, .22);
    --pl-tint-slate: #E0E0E0;  --pl-tint-slate-bg: #2A2A2A;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pl-ground: #171717; --pl-canvas: #171717; --pl-card: #222222; --pl-hair: #303030; --pl-hair-strong: #4A4A50;
  --pl-field: #262626; --pl-field-border: #353535; --pl-field-focus: #5A5A5A;
  --pl-ink: #EDEDED; --pl-on-ink: #0D0D0D; --pl-mut: #A8A8A8; --pl-faint: #8F8F8F;
  --pl-accent: #10A37F; --pl-accent-ink: #5FD3AE; --pl-accent-tint: #1E3A2F;
  --pl-red: #F26B6B; --pl-red-tint: #3A1F1F; --pl-on-red: #161616; --pl-amber: #F0B254; --pl-amber-tint: #3A2E1A;
  --pl-blue: #7FA8F5; --pl-blue-tint: #1B2A44;
  --pl-grab: #3A3A3A; --pl-dim: rgba(0, 0, 0, .55);
  --pl-toggle-off: #3A3A3A; --pl-toggle-on: #ECECEC; --pl-knob-on: #161616; --pl-knob-off: #8F8F8F; --pl-control-off: #52525B;
  --pl-ripple: rgba(255, 255, 255, .12); --pl-ripple-on-ink: rgba(0, 0, 0, .15);
  --pl-snack: #ECECEC; --pl-on-snack: #0D0D0D; --pl-spinner-track: #3A3A3A;
  --pl-tint-blue: #7FA8F5;   --pl-tint-blue-bg: #1B2A44;
  --pl-tint-red: #F28B8B;    --pl-tint-red-bg: rgba(229, 57, 53, .22);
  --pl-tint-orange: #F2A68A; --pl-tint-orange-bg: #33241E;
  --pl-tint-green: #5FD3AE;  --pl-tint-green-bg: #16302A;
  --pl-tint-teal: #86C7F0;   --pl-tint-teal-bg: #1E2A33;
  --pl-tint-amber: #F0B254;  --pl-tint-amber-bg: rgba(180, 83, 9, .22);
  --pl-tint-violet: #B49CF5; --pl-tint-violet-bg: #2A2440;
  --pl-tint-pink: #F2B8B8;   --pl-tint-pink-bg: #2A2424;
  --pl-tint-sky: #8FC4EA;    --pl-tint-sky-bg: rgba(3, 105, 161, .22);
  --pl-tint-slate: #E0E0E0;  --pl-tint-slate-bg: #2A2A2A;
}

/* ── 2. Base ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.pl, .pl *, .pl *::before, .pl *::after,
body.pl-page, body.pl-page *, body.pl-page *::before, body.pl-page *::after { box-sizing: border-box; }
body.pl-page { margin: 0; }
.pl, .pl-page {
  font-family: var(--pl-font);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--pl-ink);
  background: var(--pl-ground);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}
.pl-page { min-height: 100vh; min-height: 100dvh; }
.pl [hidden], .pl-page [hidden], [hidden].pl-page { display: none !important; }
.pl-wrap { padding: 16px var(--pl-gutter) 24px; max-width: 560px; margin-inline: auto; }
.pl-stack { display: flex; flex-direction: column; gap: 12px; }
.pl-stack--lg { gap: 20px; }
.pl-hstack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-spacer { flex: 1 1 auto; }
.pl :focus-visible, .pl-page :focus-visible { outline: 2px solid var(--pl-ink); outline-offset: 2px; }
.pl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pl-icon { width: var(--pl-icon); height: var(--pl-icon); flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-icon--16 { width: 16px; height: 16px; }
.pl-icon--18 { width: 18px; height: 18px; }
.pl-icon--20 { width: 20px; height: 20px; }
.pl-icon--24 { width: 24px; height: 24px; }
[dir="rtl"] .pl-flip, .pl-flip:dir(rtl) { transform: scaleX(-1); }

/* ── 3. Typography (Inter: titles 15 semibold, body 15 regular, small 13 medium) ───────────────────────────────── */
.pl-h1 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.pl-h2 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.pl-title { font-size: 15px; line-height: 1.35; font-weight: 600; margin: 0; }
.pl-body { font-size: 15px; line-height: 1.5; font-weight: 400; margin: 0; }
.pl-small { font-size: 13px; line-height: 1.4; font-weight: 500; margin: 0; }
.pl-caption { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--pl-faint); margin: 0; }
.pl-mono, .pl code, .pl-page code { font-family: var(--pl-font-mono); font-size: 13px; }
.pl-page code:not(.pl-mono), .pl code:not(.pl-mono) { background: var(--pl-field); border-radius: 6px; padding: 1px 5px; }
.pl-mut { color: var(--pl-mut); }
.pl-faint { color: var(--pl-faint); }
.pl-ok { color: var(--pl-accent-ink); }
.pl-danger-text { color: var(--pl-red); }
.pl-link { color: var(--pl-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pl-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 4. Pressed tint (no ripples or shadows: a soft overlay) ───────────────────────────────────────────────────── */
.pl-btn, .pl-icon-btn, .pl-row--action, .pl-chip, .pl-seg-btn, .pl-cardchip, .pl-menu-item, .pl-tab, .pl-media {
  position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent;
}
.pl-btn::after, .pl-icon-btn::after, .pl-row--action::after, .pl-chip::after, .pl-seg-btn::after, .pl-cardchip::after, .pl-menu-item::after, .pl-tab::after, .pl-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pl-ripple); opacity: 0;
  pointer-events: none; transition: opacity var(--pl-short) var(--pl-ease-standard); z-index: -1;
}
.pl-media::after { z-index: 1; }
@media (hover: hover) {
  .pl-btn:hover::after, .pl-icon-btn:hover::after, .pl-row--action:hover::after, .pl-chip:hover::after, .pl-seg-btn:hover::after, .pl-cardchip:hover::after, .pl-menu-item:hover::after, .pl-tab:hover::after, .pl-media:hover::after { opacity: .5; }
}
.pl-btn:active::after, .pl-icon-btn:active::after, .pl-row--action:active::after, .pl-chip:active::after, .pl-seg-btn:active::after, .pl-cardchip:active::after, .pl-menu-item:active::after, .pl-tab:active::after, .pl-media:active::after,
.pl-btn.is-pressed::after, .pl-row--action.is-pressed::after { opacity: 1; }

/* ── 5. Buttons (48 / 40 / 34) ─────────────────────────────────────────────────────────────────────────────────── */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--pl-button); min-width: 64px; padding: 0 20px; border-radius: 24px; border: 1px solid transparent;
  background: var(--pl-ink); color: var(--pl-on-ink);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.005em; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--pl-medium) var(--pl-ease-standard), color var(--pl-medium) var(--pl-ease-standard), border-color var(--pl-medium) var(--pl-ease-standard), opacity var(--pl-medium) var(--pl-ease-standard);
}
.pl-btn::after { background: var(--pl-ripple-on-ink); }
.pl-btn .pl-icon { width: 20px; height: 20px; margin-inline-start: -4px; }
.pl-btn--secondary { background: var(--pl-card); color: var(--pl-ink); border-color: var(--pl-hair); }
.pl-btn--ghost { background: transparent; color: var(--pl-ink); }
.pl-btn--secondary::after, .pl-btn--ghost::after { background: var(--pl-ripple); }
.pl-btn--danger { background: var(--pl-red); color: var(--pl-on-red); }
.pl-btn--danger-soft { background: var(--pl-red-tint); color: var(--pl-red); }
.pl-btn--danger-soft::after { background: var(--pl-ripple); }
.pl-btn--md { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; }
.pl-btn--sm { height: 34px; min-width: 0; padding: 0 14px; border-radius: 17px; font-size: 13px; font-weight: 600; }
.pl-btn--sm .pl-icon, .pl-btn--md .pl-icon { width: 18px; height: 18px; }
.pl-btn--block { display: flex; width: 100%; }
.pl-btn:disabled, .pl-btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.pl-btn.is-loading { pointer-events: none; }
.pl-btn.is-loading .pl-spinner { --pl-spinner-arc: currentColor; --pl-spinner-track: color-mix(in srgb, currentColor 25%, transparent); width: 20px; height: 20px; margin-inline-start: -4px; }
.pl-btn--sm.is-loading .pl-spinner, .pl-btn--md.is-loading .pl-spinner { width: 16px; height: 16px; }
/* small buttons keep a 48 px target */
.pl-btn--sm::before, .pl-btn--md::before, .pl-icon-btn::before, .pl-chip::before, .pl-switch-hit::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: var(--pl-touch); transform: translateY(-50%); min-width: 100%;
}
.pl-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-btn-row > .pl-btn { flex: 1 1 0; }

.pl-icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; flex: none;
  background: transparent; color: var(--pl-ink); cursor: pointer; font: inherit;
}
.pl-icon-btn::before { inset-inline: -4px; }
.pl-icon-btn .pl-icon { width: 22px; height: 22px; }
.pl-icon-btn--field { background: var(--pl-field); }
.pl-icon-btn--ink { background: var(--pl-ink); color: var(--pl-on-ink); }
.pl-icon-btn--ink::after { background: var(--pl-ripple-on-ink); }
.pl-icon-btn--sm { width: 34px; height: 34px; }
.pl-icon-btn--sm .pl-icon { width: 18px; height: 18px; }
.pl-icon-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── 6. Toggle switch (the native 40 × 24 track, 18 knob inset 3) ──────────────────────────────────────────────── */
.pl-switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  width: 40px; height: 24px; border-radius: 12px; border: 0; background: var(--pl-toggle-off);
  transition: background-color var(--pl-medium) var(--pl-ease-standard), opacity var(--pl-medium) var(--pl-ease-standard);
}
.pl-switch::before {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pl-knob-off);
  transition: transform var(--pl-medium) var(--pl-ease-standard), background-color var(--pl-medium) var(--pl-ease-standard);
}
.pl-switch:checked { background: var(--pl-toggle-on); }
.pl-switch:checked::before { background: var(--pl-knob-on); transform: translateX(16px); }
[dir="rtl"] .pl-switch:checked::before, .pl-switch:checked:dir(rtl)::before { transform: translateX(-16px); }
.pl-switch:disabled { opacity: .4; cursor: default; }
.pl-switch:focus-visible { outline: 2px solid var(--pl-ink); outline-offset: 3px; }
.pl-switch-hit { position: relative; display: inline-flex; align-items: center; }

/* ── 7. Checkbox (20, radius 6) and radio (22, 7 px ring) ──────────────────────────────────────────────────────── */
.pl-check, .pl-radio {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative; display: inline-grid; place-items: center;
  border: 1.6px solid var(--pl-control-off); background: transparent;
  transition: background-color var(--pl-short) var(--pl-ease-standard), border-color var(--pl-short) var(--pl-ease-standard), border-width var(--pl-short) var(--pl-ease-standard);
}
.pl-check { width: 20px; height: 20px; border-radius: 6px; }
.pl-check::after {
  content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--pl-on-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: transform var(--pl-short) var(--pl-ease-decelerate), opacity var(--pl-short) var(--pl-ease-decelerate);
}
.pl-check:checked { background: var(--pl-ink); border-color: var(--pl-ink); }
.pl-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.pl-check:indeterminate { background: var(--pl-ink); border-color: var(--pl-ink); }
.pl-check:indeterminate::after { width: 10px; height: 0; margin: 0; border-width: 0 0 2px 0; transform: none; opacity: 1; }
.pl-radio { width: 22px; height: 22px; border-radius: 50%; }
.pl-radio:checked { border: 7px solid var(--pl-toggle-on); background: var(--pl-card); }
.pl-check:disabled, .pl-radio:disabled { opacity: .4; cursor: default; }
.pl-choice { display: flex; align-items: center; gap: 12px; min-height: var(--pl-touch); cursor: pointer; font-size: 15px; }
.pl-choice:has(:disabled) { cursor: default; color: var(--pl-faint); }

/* ── 8. Chips, segmented control, cards with a swatch ─────────────────────────────────────────────────────────── */
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px;
  border: 1px solid var(--pl-hair); background: var(--pl-card); color: var(--pl-ink);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--pl-short) var(--pl-ease-standard), color var(--pl-short) var(--pl-ease-standard), border-color var(--pl-short) var(--pl-ease-standard);
}
.pl-chip .pl-icon { width: 16px; height: 16px; margin-inline-start: -2px; }
.pl-chip[aria-checked="true"], .pl-chip[aria-pressed="true"], .pl-chip.is-on { background: var(--pl-ink); border-color: var(--pl-ink); color: var(--pl-on-ink); }
.pl-chip[aria-checked="true"]::after, .pl-chip[aria-pressed="true"]::after, .pl-chip.is-on::after { background: var(--pl-ripple-on-ink); }
.pl-chip:disabled, .pl-chip[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }

.pl-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--pl-field); }
.pl-seg-btn {
  flex: 1 1 0; min-width: 0; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--pl-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background-color var(--pl-medium) var(--pl-ease-standard), color var(--pl-medium) var(--pl-ease-standard), border-color var(--pl-medium) var(--pl-ease-standard);
}
.pl-seg-btn[aria-checked="true"], .pl-seg-btn.is-on { background: var(--pl-card); border-color: var(--pl-hair); color: var(--pl-ink); font-weight: 600; }
.pl-seg-btn:disabled { opacity: .4; cursor: default; }

.pl-cardchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.pl-cardchip {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 10px; border-radius: var(--pl-radius-tile);
  border: 1px solid var(--pl-hair); background: var(--pl-ground); color: var(--pl-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color var(--pl-short) var(--pl-ease-standard), box-shadow var(--pl-short) var(--pl-ease-standard);
}
.pl-cardchip .pl-swatch { width: 100%; height: 44px; border-radius: var(--pl-radius-tile-small); border: 1px solid var(--pl-hair-strong); background: var(--pl-swatch, #212121); }
.pl-cardchip[aria-checked="true"], .pl-cardchip.is-on { border-color: var(--pl-toggle-on); box-shadow: inset 0 0 0 .5px var(--pl-toggle-on); font-weight: 600; }
.pl-cardchip:disabled { opacity: .4; cursor: default; }

/* ── 9. Slider with value ─────────────────────────────────────────────────────────────────────────────────────── */
.pl-slider { display: flex; flex-direction: column; gap: 6px; }
.pl-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-slider-head .pl-title { font-weight: 500; }
.pl-slider-value { font-size: 15px; font-weight: 500; color: var(--pl-mut); font-variant-numeric: tabular-nums; }
.pl-range {
  --pl-fill: 50%;
  appearance: none; -webkit-appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.pl-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--pl-ink) 0 var(--pl-fill), var(--pl-hair-strong) var(--pl-fill) 100%);
}
[dir="rtl"] .pl-range::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--pl-ink) 0 var(--pl-fill), var(--pl-hair-strong) var(--pl-fill) 100%); }
.pl-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--pl-hair-strong); }
.pl-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--pl-ink); }
.pl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; border: 0;
  background: var(--pl-ink); transition: transform var(--pl-short) var(--pl-ease-standard);
}
.pl-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--pl-ink); transition: transform var(--pl-short) var(--pl-ease-standard); }
.pl-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.pl-range:active::-moz-range-thumb { transform: scale(1.15); }
.pl-range:focus-visible { outline: none; }
.pl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pl-ground), 0 0 0 5px var(--pl-ink); }
.pl-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pl-ground), 0 0 0 5px var(--pl-ink); }
.pl-range:disabled { opacity: .4; cursor: default; }
.pl-slider-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--pl-faint); }

/* ── 10. Fields: text, textarea, search, select ───────────────────────────────────────────────────────────────── */
.pl-label { display: block; font-size: 13px; font-weight: 500; color: var(--pl-mut); margin: 0 0 6px; padding-inline: 4px; }
.pl-help { font-size: 13px; color: var(--pl-mut); margin: 6px 0 0; padding-inline: 4px; }
.pl-error { font-size: 13px; font-weight: 500; color: var(--pl-red); margin: 6px 0 0; padding-inline: 4px; }
.pl-field, .pl-textarea, .pl-select {
  display: block; width: 100%; appearance: none; -webkit-appearance: none; margin: 0;
  border: 1px solid var(--pl-field); background: var(--pl-field); color: var(--pl-ink);
  font: inherit; font-size: 15px; font-weight: 400; outline: none;
  transition: border-color var(--pl-short) var(--pl-ease-standard), background-color var(--pl-short) var(--pl-ease-standard);
}
.pl-field, .pl-select { height: var(--pl-button); padding: 0 16px; border-radius: 24px; }
.pl-textarea { min-height: 104px; padding: 12px 16px; border-radius: var(--pl-radius-tile); line-height: 1.5; resize: vertical; }
.pl-field::placeholder, .pl-textarea::placeholder { color: var(--pl-faint); opacity: 1; }
.pl-field:hover, .pl-textarea:hover, .pl-select:hover { border-color: var(--pl-field-border); }
.pl-field:focus, .pl-textarea:focus, .pl-select:focus, .pl-field:focus-visible, .pl-textarea:focus-visible, .pl-select:focus-visible { border-color: var(--pl-field-focus); outline: none; }
.pl-field[aria-invalid="true"], .pl-textarea[aria-invalid="true"], .pl-select[aria-invalid="true"] { border-color: var(--pl-red); }
.pl-field:disabled, .pl-textarea:disabled, .pl-select:disabled { opacity: .5; cursor: default; }
.pl-field--mono, .pl-textarea--mono { font-family: var(--pl-font-mono); font-size: 13px; }
.pl-select {
  padding-inline-end: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%235E5E5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
[dir="rtl"] .pl-select { background-position: left 14px center; }
.pl-search { position: relative; display: flex; align-items: center; }
.pl-search > .pl-icon { position: absolute; inset-inline-start: 16px; width: 20px; height: 20px; color: var(--pl-mut); pointer-events: none; }
.pl-search > .pl-field { padding-inline-start: 46px; padding-inline-end: 44px; }
.pl-search > .pl-field::-webkit-search-cancel-button { display: none; }
.pl-search > .pl-icon-btn { position: absolute; inset-inline-end: 4px; width: 40px; height: 40px; color: var(--pl-mut); }
.pl-search > .pl-field:placeholder-shown + .pl-icon-btn { visibility: hidden; }
.pl-formrow { display: flex; flex-direction: column; }

/* ── 11. Lists and setting rows ───────────────────────────────────────────────────────────────────────────────── */
.pl-section { display: flex; flex-direction: column; }
.pl-section + .pl-section { margin-top: 20px; }
.pl-section-title { font-size: 13px; font-weight: 600; color: var(--pl-mut); margin: 0 0 8px; padding-inline: 4px; letter-spacing: 0; }
.pl-footnote { font-size: 13px; line-height: 1.45; color: var(--pl-mut); margin: 8px 0 0; padding-inline: 4px; }
.pl-list { display: flex; flex-direction: column; background: var(--pl-card); border: 1px solid var(--pl-hair); border-radius: var(--pl-radius-card); padding: 4px 0; overflow: hidden; margin: 0; list-style: none; }
.pl-list--flush { background: transparent; border: 0; border-radius: 0; padding: 0; }
.pl-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; width: 100%;
  background: transparent; border: 0; color: inherit; font: inherit; text-align: start; text-decoration: none;
}
.pl-row--compact { min-height: var(--pl-touch); }
.pl-row--action { cursor: pointer; border-radius: 0; }
.pl-list > .pl-row--action:first-child { border-start-start-radius: calc(var(--pl-radius-card) - 1px); border-start-end-radius: calc(var(--pl-radius-card) - 1px); }
.pl-row--action:disabled, .pl-row[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.pl-list--divided > .pl-row + .pl-row { box-shadow: inset 0 1px 0 var(--pl-hair); }
.pl-row-icon { width: 36px; height: 36px; border-radius: var(--pl-radius-tile-small); display: grid; place-items: center; flex: none; background: var(--pl-field); color: var(--pl-ink); }
.pl-row-icon .pl-icon { width: 20px; height: 20px; }
.pl-row-plain-icon { width: 22px; height: 22px; flex: none; color: var(--pl-ink); }
.pl-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-row-title { font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pl-row-sub { font-size: 13px; line-height: 1.35; color: var(--pl-mut); overflow-wrap: anywhere; }
.pl-row-value { font-size: 15px; color: var(--pl-mut); white-space: nowrap; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.pl-row-chev { width: 20px; height: 20px; color: var(--pl-faint); flex: none; margin-inline-end: -4px; }
[dir="rtl"] .pl-row-chev, .pl-row-chev:dir(rtl) { transform: scaleX(-1); }
.pl-row--danger .pl-row-title, .pl-row--danger .pl-row-plain-icon { color: var(--pl-red); }
.pl-row--danger .pl-row-icon { background: var(--pl-red-tint); color: var(--pl-red); }
label.pl-row { cursor: pointer; }
label.pl-row:has(:disabled) { cursor: default; }
label.pl-row:has(:disabled) .pl-row-text { opacity: .4; }

/* ── 12. Cards ────────────────────────────────────────────────────────────────────────────────────────────────── */
.pl-card { background: var(--pl-card); border: 1px solid var(--pl-hair); border-radius: var(--pl-radius-card); padding: 16px; }
.pl-card--hero { border-radius: var(--pl-radius-hero); padding: 20px; }
.pl-card--ground { background: var(--pl-ground); }
.pl-card--flat { border-color: transparent; background: var(--pl-field); }
.pl-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pl-card-head .pl-row-text { gap: 1px; }

/* ── 13. Stats tiles with mini bars ───────────────────────────────────────────────────────────────────────────── */
.pl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-stats--1 { grid-template-columns: minmax(0, 1fr); }
.pl-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-stat { background: var(--pl-card); border: 1px solid var(--pl-hair); border-radius: var(--pl-radius-tile); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 92px; }
.pl-stat-label { font-size: 13px; font-weight: 500; color: var(--pl-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-stat-value { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: auto; }
.pl-stat-sub { font-size: 12px; font-weight: 500; color: var(--pl-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: auto; }
.pl-bars > i { flex: 1 1 0; min-width: 3px; max-width: 10px; height: var(--h, 50%); min-height: 3px; border-radius: 3px; background: var(--pl-hair-strong); }
.pl-bars > i:last-child, .pl-bars > i.is-now { background: var(--pl-ink); }

/* ── 14. Media card ───────────────────────────────────────────────────────────────────────────────────────────── */
.pl-media { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: var(--pl-radius-tile); width: 100%; }
.pl-media-pic { position: relative; aspect-ratio: 16 / 9; border-radius: var(--pl-radius-tile); overflow: hidden; display: grid; place-items: center; background: var(--pl-tint, var(--pl-tint-slate-bg)); color: var(--pl-tint-fg, var(--pl-tint-slate)); }
.pl-media-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-media-pic .pl-icon { width: 32px; height: 32px; }
.pl-media-chip { position: absolute; inset-inline-end: 8px; bottom: 8px; background: rgba(13, 13, 13, .45); color: #FFFFFF; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 8px; }
.pl-media-title { font-size: 15px; font-weight: 600; line-height: 1.3; padding-inline: 2px; }
.pl-media-sub { font-size: 13px; color: var(--pl-mut); padding-inline: 2px; margin-top: -6px; }

/* ── 15. Badges, pills, tags ──────────────────────────────────────────────────────────────────────────────────── */
.pl-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 9px; background: var(--pl-field); color: var(--pl-ink); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.pl-badge--ok { background: var(--pl-accent-tint); color: var(--pl-accent-ink); }
.pl-badge--warn { background: var(--pl-amber-tint); color: var(--pl-amber); }
.pl-badge--danger { background: var(--pl-red-tint); color: var(--pl-red); }
.pl-badge--info { background: var(--pl-blue-tint); color: var(--pl-blue); }
.pl-badge--ink { background: var(--pl-ink); color: var(--pl-on-ink); }
.pl-badge--outline { background: transparent; border: 1px solid var(--pl-ink); border-radius: 6px; height: 18px; padding: 0 5px; font-size: 10.5px; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-accent); flex: none; display: inline-block; }
.pl-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--pl-field); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pl-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--pl-hair); background: var(--pl-card); color: var(--pl-mut); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ── 16. Banner / notice ──────────────────────────────────────────────────────────────────────────────────────── */
.pl-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--pl-radius-tile); background: var(--pl-field); color: var(--pl-ink); font-size: 14px; line-height: 1.45; }
.pl-banner > .pl-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--pl-mut); }
.pl-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-banner-title { font-weight: 600; }
.pl-banner-action { align-self: center; flex: none; }
.pl-banner--info { background: var(--pl-blue-tint); }
.pl-banner--info > .pl-icon { color: var(--pl-blue); }
.pl-banner--ok { background: var(--pl-accent-tint); }
.pl-banner--ok > .pl-icon { color: var(--pl-accent-ink); }
.pl-banner--warn { background: var(--pl-amber-tint); }
.pl-banner--warn > .pl-icon { color: var(--pl-amber); }
.pl-banner--danger { background: var(--pl-red-tint); }
.pl-banner--danger > .pl-icon, .pl-banner--danger .pl-banner-title { color: var(--pl-red); }

/* ── 17. Toast / snackbar ─────────────────────────────────────────────────────────────────────────────────────── */
.pl-toasts { position: fixed; z-index: 1000; inset-inline: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: stretch; pointer-events: none; }
.pl-toast {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px; border-radius: 16px; max-width: 560px; width: 100%; margin-inline: auto;
  background: var(--pl-snack); color: var(--pl-on-snack); font-size: 14px; font-weight: 500; line-height: 1.4; pointer-events: auto;
  animation: pl-rise-in var(--pl-medium) var(--pl-ease-decelerate) both;
}
.pl-toast > .pl-icon { width: 20px; height: 20px; color: var(--pl-accent); }
.pl-toast-text { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-toast-action { flex: none; height: 36px; min-width: 48px; margin: -8px -8px -8px 4px; padding: 0 8px; border: 0; border-radius: 18px; background: transparent; color: var(--pl-on-snack); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; }
.pl-toast-action:hover { background: color-mix(in srgb, var(--pl-on-snack) 12%, transparent); }
.pl-toast-action:focus-visible { outline: 2px solid var(--pl-on-snack); outline-offset: 0; }
.pl-toast.is-leaving { animation: pl-drop-out var(--pl-short) var(--pl-ease-accelerate) both; }
.pl-toast--static { animation: none; }

/* ── 18. Empty state ──────────────────────────────────────────────────────────────────────────────────────────── */
.pl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 16px; }
.pl-empty-tile { width: 56px; height: 56px; border-radius: var(--pl-radius-tile); background: var(--pl-field); color: var(--pl-mut); display: grid; place-items: center; margin-bottom: 8px; }
.pl-empty-tile .pl-icon { width: 26px; height: 26px; }
.pl-empty-title { font-size: 15px; font-weight: 600; }
.pl-empty-sub { font-size: 14px; color: var(--pl-mut); max-width: 280px; }
.pl-empty .pl-btn { margin-top: 12px; }

/* ── 19. Spinner, progress ring, linear progress ──────────────────────────────────────────────────────────────── */
.pl-spinner {
  --pl-spinner-arc: var(--pl-ink);
  width: 20px; height: 20px; flex: none; display: inline-block; border-radius: 50%; position: relative;
  border: 3px solid var(--pl-spinner-track); border-top-color: var(--pl-spinner-arc);
  animation: pl-turn 900ms linear infinite;
}
.pl-spinner--16 { width: 16px; height: 16px; border-width: 2.5px; }
.pl-spinner--28 { width: 28px; height: 28px; border-width: 3px; }
.pl-spinner--on-ink { --pl-spinner-arc: var(--pl-on-ink); --pl-spinner-track: color-mix(in srgb, var(--pl-on-ink) 25%, transparent); }
.pl-ring { --value: 0; --size: 56px; --stroke: 5px; width: var(--size); height: var(--size); flex: none; position: relative; display: inline-grid; place-items: center; }
.pl-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--pl-ink) calc(var(--value) * 1%), var(--pl-field) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke)), #000 calc(100% - var(--stroke) + .5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--stroke)), #000 calc(100% - var(--stroke) + .5px));
  transition: background var(--pl-medium) var(--pl-ease-standard);
}
.pl-ring-label { position: relative; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-ring--ok::before { background: conic-gradient(var(--pl-accent) calc(var(--value) * 1%), var(--pl-field) 0); }
.pl-progress { height: 6px; border-radius: 3px; background: var(--pl-field); overflow: hidden; position: relative; }
.pl-progress > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--pl-ink); transition: width var(--pl-medium) var(--pl-ease-standard); }
.pl-progress--ok > span { background: var(--pl-accent); }
.pl-progress--indeterminate > span { width: 40%; position: absolute; inset-block: 0; animation: pl-slide 1.2s var(--pl-ease-standard) infinite; }
[dir="rtl"] .pl-progress--indeterminate > span { animation-name: pl-slide-rtl; }

/* ── 20. Skeleton ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pl-skel {
  display: block; border-radius: 8px; min-height: 12px;
  background: linear-gradient(90deg, var(--pl-field) 0, color-mix(in srgb, var(--pl-field) 40%, var(--pl-card)) 40%, var(--pl-field) 80%);
  background-size: 600px 100%; animation: pl-shimmer 1.4s linear infinite;
}
.pl-skel--line { height: 12px; }
.pl-skel--title { height: 16px; width: 60%; }
.pl-skel--tile { width: 36px; height: 36px; border-radius: var(--pl-radius-tile-small); flex: none; }
.pl-skel--block { height: 92px; border-radius: var(--pl-radius-tile); }

/* ── 21. Divider, avatar, tile icon ───────────────────────────────────────────────────────────────────────────── */
.pl-divider { border: 0; height: 1px; background: var(--pl-hair); margin: 12px 0; }
.pl-divider--inset { margin-inline-start: 64px; }
.pl-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--pl-tint-green-bg); color: var(--pl-tint-green); font-size: 15px; font-weight: 600; }
.pl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pl-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.pl-tile { width: 40px; height: 40px; border-radius: var(--pl-radius-tile-small); flex: none; display: grid; place-items: center; background: var(--pl-tint-bg, var(--pl-field)); color: var(--pl-tint-fg, var(--pl-ink)); }
.pl-tile .pl-icon { width: 22px; height: 22px; }
.pl-tile--lg { width: 56px; height: 56px; border-radius: var(--pl-radius-tile); }
.pl-tile--lg .pl-icon { width: 28px; height: 28px; }
.pl-tile--ink { background: var(--pl-ink); color: var(--pl-on-ink); }
.pl-tint-blue { --pl-tint-bg: var(--pl-tint-blue-bg); --pl-tint-fg: var(--pl-tint-blue); --pl-tint: var(--pl-tint-blue-bg); }
.pl-tint-red { --pl-tint-bg: var(--pl-tint-red-bg); --pl-tint-fg: var(--pl-tint-red); --pl-tint: var(--pl-tint-red-bg); }
.pl-tint-orange { --pl-tint-bg: var(--pl-tint-orange-bg); --pl-tint-fg: var(--pl-tint-orange); --pl-tint: var(--pl-tint-orange-bg); }
.pl-tint-green { --pl-tint-bg: var(--pl-tint-green-bg); --pl-tint-fg: var(--pl-tint-green); --pl-tint: var(--pl-tint-green-bg); }
.pl-tint-teal { --pl-tint-bg: var(--pl-tint-teal-bg); --pl-tint-fg: var(--pl-tint-teal); --pl-tint: var(--pl-tint-teal-bg); }
.pl-tint-amber { --pl-tint-bg: var(--pl-tint-amber-bg); --pl-tint-fg: var(--pl-tint-amber); --pl-tint: var(--pl-tint-amber-bg); }
.pl-tint-violet { --pl-tint-bg: var(--pl-tint-violet-bg); --pl-tint-fg: var(--pl-tint-violet); --pl-tint: var(--pl-tint-violet-bg); }
.pl-tint-pink { --pl-tint-bg: var(--pl-tint-pink-bg); --pl-tint-fg: var(--pl-tint-pink); --pl-tint: var(--pl-tint-pink-bg); }
.pl-tint-sky { --pl-tint-bg: var(--pl-tint-sky-bg); --pl-tint-fg: var(--pl-tint-sky); --pl-tint: var(--pl-tint-sky-bg); }
.pl-tint-slate { --pl-tint-bg: var(--pl-tint-slate-bg); --pl-tint-fg: var(--pl-tint-slate); --pl-tint: var(--pl-tint-slate-bg); }
.pl-media-pic.pl-tint-blue, .pl-media-pic.pl-tint-green, .pl-media-pic.pl-tint-violet, .pl-media-pic.pl-tint-pink, .pl-media-pic.pl-tint-orange, .pl-media-pic.pl-tint-teal, .pl-media-pic.pl-tint-amber, .pl-media-pic.pl-tint-sky, .pl-media-pic.pl-tint-red, .pl-media-pic.pl-tint-slate { --pl-tint-fg: inherit; color: var(--pl-tint-fg); }

/* ── 22. Header bar (for full pages) ──────────────────────────────────────────────────────────────────────────── */
.pl-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: var(--pl-bar); padding: 0 8px; background: var(--pl-canvas); border-bottom: 1px solid var(--pl-hair); }
.pl-bar-title { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; }
.pl-bar > .pl-icon-btn:first-child + .pl-bar-title { padding-inline-start: 0; }

/* ── 23. Tabs ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.pl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pl-hair); overflow-x: auto; scrollbar-width: none; }
.pl-tabs::-webkit-scrollbar { display: none; }
.pl-tab {
  flex: none; height: var(--pl-touch); padding: 0 12px; border: 0; background: transparent; border-radius: 12px 12px 0 0;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--pl-mut); white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--pl-medium) var(--pl-ease-standard), box-shadow var(--pl-medium) var(--pl-ease-standard);
}
.pl-tab[aria-selected="true"] { color: var(--pl-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pl-ink); }
.pl-tab:disabled { opacity: .4; cursor: default; }
.pl-tabs--fill .pl-tab { flex: 1 1 0; }
.pl-tabpanel[hidden] { display: none; }
.pl-tabpanel { padding-top: 16px; animation: pl-fade-in var(--pl-medium) var(--pl-ease-decelerate); }

/* ── 24. Menu / popover (radius 16, rows 48, in 170 ms / out 110 ms) ──────────────────────────────────────────── */
.pl-menu {
  position: fixed; z-index: 900; min-width: 200px; max-width: calc(100vw - 2 * var(--pl-menu-margin)); max-height: calc(100vh - 2 * var(--pl-menu-margin)); overflow-y: auto;
  margin: 0; padding: 6px 0; list-style: none; background: var(--pl-card); border: 1px solid var(--pl-hair); border-radius: var(--pl-radius-menu);
  transform-origin: var(--pl-origin, top right); animation: pl-menu-in var(--pl-menu-in) var(--pl-ease-decelerate) both;
}
.pl-menu.is-leaving { animation: pl-menu-out var(--pl-menu-out) var(--pl-ease-accelerate) both; pointer-events: none; }
.pl-menu--static { position: relative; z-index: auto; animation: none; display: inline-block; }
.pl-menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; height: var(--pl-menu-row); padding: 0 16px; border: 0; background: transparent; border-radius: 0;
  color: var(--pl-ink); font: inherit; font-size: 14.5px; font-weight: 400; text-align: start; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.pl-menu-item .pl-icon { width: 20px; height: 20px; }
.pl-menu-item:focus-visible { outline: none; }
.pl-menu-item:focus-visible::after { opacity: 1; }
.pl-menu-item--danger { color: var(--pl-red); }
.pl-menu-item:disabled, .pl-menu-item[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.pl-menu-sep { height: 1px; background: var(--pl-hair); margin: 4px 0; border: 0; }
.pl-menu-head { padding: 8px 16px 10px; display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--pl-hair); margin-bottom: 4px; }
.pl-menu-head b { font-size: 14.5px; font-weight: 600; }
.pl-menu-head small { font-size: 12.5px; color: var(--pl-mut); }

/* ── 25. Bottom sheet (radius 28, grab handle, scrim, slides up) ──────────────────────────────────────────────── */
.pl-scrim { position: fixed; inset: 0; z-index: 950; background: var(--pl-dim); animation: pl-fade-in var(--pl-medium) var(--pl-ease-standard) both; }
.pl-scrim.is-leaving { animation: pl-fade-out var(--pl-medium) var(--pl-ease-standard) both; }
.pl-sheet {
  position: fixed; z-index: 960; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--pl-card); border-radius: var(--pl-radius-sheet) var(--pl-radius-sheet) 0 0;
  padding: 0 var(--pl-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  animation: pl-sheet-in var(--pl-long) var(--pl-ease-emphasized) both;
}
.pl-sheet[hidden] { display: none; }
.pl-sheet.is-leaving { animation: pl-sheet-out var(--pl-medium) var(--pl-ease-accelerate) both; }
.pl-sheet--static { position: relative; z-index: auto; inset: auto; max-height: none; animation: none; border: 1px solid var(--pl-hair); border-bottom: 0; }
.pl-grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--pl-grab); margin: 10px auto 6px; }
.pl-sheet-head { display: flex; align-items: center; gap: 12px; padding: 10px 0 12px; }
.pl-sheet-head .pl-row-text { gap: 1px; }
.pl-sheet-title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.pl-sheet-sub { font-size: 13px; color: var(--pl-mut); margin: 0; }
.pl-sheet-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }

/* ── 26. Dialog ───────────────────────────────────────────────────────────────────────────────────────────────── */
.pl-dialog-wrap { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; padding: 24px 16px; pointer-events: none; }
.pl-dialog {
  pointer-events: auto; width: 100%; max-width: 340px; background: var(--pl-card); border-radius: var(--pl-radius-hero); padding: 24px 20px 16px;
  display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--pl-hair);
  animation: pl-dialog-in var(--pl-medium) var(--pl-ease-decelerate) both;
}
.pl-dialog.is-leaving { animation: pl-dialog-out var(--pl-short) var(--pl-ease-accelerate) both; }
.pl-dialog--static { animation: none; }
.pl-dialog-title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.pl-dialog-body { font-size: 15px; line-height: 1.5; color: var(--pl-mut); margin: 0; }
.pl-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pl-dialog-actions .pl-btn { min-width: 88px; }

/* ── 27. Tooltip ([data-pl-tip]) ──────────────────────────────────────────────────────────────────────────────── */
[data-pl-tip] { position: relative; }
[data-pl-tip]::before {
  content: attr(data-pl-tip); position: absolute; z-index: 980; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  width: max-content; max-width: 220px; padding: 6px 10px; border-radius: 8px; background: var(--pl-snack); color: var(--pl-on-snack);
  font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; white-space: normal; pointer-events: none; opacity: 0;
  transition: opacity var(--pl-short) var(--pl-ease-standard), transform var(--pl-short) var(--pl-ease-standard);
}
[data-pl-tip]:hover::before, [data-pl-tip]:focus-visible::before, [data-pl-tip].is-tip::before { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; }
[data-pl-tip][data-pl-tip-pos="below"]::before { bottom: auto; top: calc(100% + 8px); }
.pl-tooltip { display: inline-block; max-width: 220px; padding: 6px 10px; border-radius: 8px; background: var(--pl-snack); color: var(--pl-on-snack); font-size: 13px; font-weight: 500; line-height: 1.35; }

/* ── 28. Motion ───────────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes pl-turn { to { transform: rotate(360deg); } }
@keyframes pl-pulse { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes pl-shimmer { from { background-position: -300px 0; } to { background-position: 300px 0; } }
@keyframes pl-slide { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@keyframes pl-slide-rtl { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@keyframes pl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pl-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pl-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--pl-rise)); } }
@keyframes pl-menu-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pl-menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.92); } }
@keyframes pl-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pl-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes pl-dialog-in { from { opacity: 0; transform: translateY(var(--pl-rise)) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pl-dialog-out { from { opacity: 1; } to { opacity: 0; transform: scale(.98); } }
.pl-appear { animation: pl-rise-in var(--pl-medium) var(--pl-ease-decelerate) both; }
.pl-appear-group > * { animation: pl-rise-in var(--pl-medium) var(--pl-ease-decelerate) both; }
.pl-appear-group > :nth-child(2) { animation-delay: calc(var(--pl-stagger) * 1); }
.pl-appear-group > :nth-child(3) { animation-delay: calc(var(--pl-stagger) * 2); }
.pl-appear-group > :nth-child(4) { animation-delay: calc(var(--pl-stagger) * 3); }
.pl-appear-group > :nth-child(5) { animation-delay: calc(var(--pl-stagger) * 4); }
.pl-appear-group > :nth-child(n + 6) { animation-delay: calc(var(--pl-stagger) * 5); }

/* Reduced motion: things appear at once; the spinner becomes the soft pulsing green dot (as in the app). */
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after, .pl-page *, .pl-page *::before, .pl-page *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .pl .pl-spinner, .pl-page .pl-spinner {
    border: 0; background: var(--pl-accent); transform: scale(.86);
    animation: pl-pulse 1.2s ease-in-out infinite !important; animation-duration: 1.2s !important; animation-iteration-count: infinite !important;
    -webkit-mask: radial-gradient(circle, #000 42%, transparent 43%); mask: radial-gradient(circle, #000 42%, transparent 43%);
  }
  .pl .pl-skel, .pl-page .pl-skel { animation: none !important; }
  .pl .pl-progress--indeterminate > span, .pl-page .pl-progress--indeterminate > span { animation: none !important; inset-inline-start: 0; width: 100%; opacity: .35; }
}