/* ═══════════════════════════════════════════════════════════════════════════
   Tier — Portals skin
   ---------------------------------------------------------------------------
   Port of the portal-market.com visual language, including its liquid glass.

   Everything here is lifted verbatim from the Portals production build:
     · tokens + bevels  → assets/index-BOPjPzQu.css
     · glass surfaces   → assets/index-DEl7YxuX.js  (glassStyle inline styles)
     · #distortion      → the TabbarFilter / ScrollToTopButton SVG defs

   Portals runs TWO bevels, and the difference is the whole look:
     · DEEP  (10 layers) — floating glass: tabbar, banner, glass buttons.
                           Always paired with backdrop-filter + distortion.
     · SHALLOW (4 layers) — the `.glass-shadow` utility on flat cards,
                            primary buttons and inputs.

   Loaded last. Restyles surfaces only — never structure.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Type ─── */

@font-face {
    font-family: SFProText;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/SFProText-Regular.sub.woff2") format("woff2");
}

@font-face {
    font-family: SFProText;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/SFProText-Medium.sub.woff2") format("woff2");
}

@font-face {
    font-family: SFProText;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/SFProText-Semibold.sub.woff2") format("woff2");
}

@font-face {
    font-family: SFProText;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/SFProText-Bold.sub.woff2") format("woff2");
}

/* ─── 2. Tokens ─── */

:root,
[data-theme=dark],
[data-theme=light] {
    /* Portals' own glass primitives, names and values unchanged */
    --bg-glass: #000;
    --c-light: #fff;
    --c-dark: #000;
    --c-content: #ffffff;
    --glass-reflex-dark: 2;
    --glass-reflex-light: .3;
    --saturation: 140%;
    --switcher-transition: .25s cubic-bezier(1, 0, .4, 1);

    /* Palette */
    --pm-background: #141414;
    --pm-secondary: #282727;
    --pm-secondary-2: #3a3a3a;
    --pm-text: #ffffff;
    --pm-text-muted: #6d6d71;
    --pm-text-1: rgba(255, 255, 255, .7);
    --pm-text-2: rgba(255, 255, 255, .4);
    --pm-text-3: rgba(255, 255, 255, .24);
    --pm-primary: #f2f2f7;
    --pm-primary-2: #ffffff;
    --pm-primary-fill: #636366;
    --pm-primary-fill-strong: #8e8e93;
    --pm-azure: #c7c7cc;
    --pm-accent: #49df64;
    --pm-destructive: #df494d;
    --pm-destructive-2: #ff3f46;
    --pm-muted: #3a3a3a;
    --pm-border: #454545;
    --pm-input: #1c1c1c;
    --pm-gold: #f1aa05;
    --pm-purple: #af51de;

    /* ── DEEP bevel — Portals' floating glass ── */
    --pm-glass-deep:
        inset 0 0 0 1px rgba(255, 255, 255, .03),
        inset 1.8px 3px 0px -2px rgba(255, 255, 255, .27),
        inset -2px -2px 0px -2px rgba(255, 255, 255, .24),
        inset -3px -8px 1px -6px rgba(255, 255, 255, .18),
        inset -.3px -1px 4px 0px rgba(0, 0, 0, .24),
        inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, .4),
        inset 0px 3px 4px -2px rgba(0, 0, 0, .4),
        inset 2px -6.5px 1px -4px rgba(0, 0, 0, .2),
        0px 1px 5px 0px rgba(0, 0, 0, .2),
        0px 6px 16px 0px rgba(0, 0, 0, .16);

    /* ── SHALLOW bevel — the `.glass-shadow` utility ── */
    --pm-glass-bevel:
        inset 1.8px 3px 0px -2px rgba(255, 255, 255, .06),
        inset 2px 2px 0px -2px rgba(255, 255, 255, .09),
        inset -2px -2px 2px -2px rgba(255, 255, 255, .09),
        inset -1.8px -3px 0px -2px rgba(255, 255, 255, .06);

    /* ── Switcher thumb bevel ── */
    --pm-thumb-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .03),
        inset 2px 1px 0 -1px rgba(255, 255, 255, .27),
        inset -1.5px -1px 0 -1px rgba(255, 255, 255, .24),
        inset -2px -6px 1px -5px rgba(255, 255, 255, .18),
        inset -1px 2px 3px -1px rgba(0, 0, 0, .4),
        inset 0 -4px 1px -2px rgba(0, 0, 0, .2),
        0 3px 6px rgba(0, 0, 0, .16);

    /* Glass fills, exactly as the bundle writes them */
    --pm-surface: #1b1b1c;
    --pm-glass-veil: color-mix(in srgb, var(--bg-glass) 12%, transparent);
    --pm-glass-panel: color-mix(in srgb, var(--bg-glass) 12%, #1C1C1CCC);
    --pm-glass-tint: rgba(0, 0, 0, .12);

    --pm-radius-card: 24px;
    --pm-radius-pill: 999px;
    --pm-font: "SFProText", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

    /* Re-point the app's own tokens so anything without an explicit rule
       below still lands inside the Portals palette. */
    --ui-bg: #141414;
    --ui-card: color-mix(in srgb, var(--bg-glass) 12%, #1C1C1CCC);
    --ui-card-raised: #282727;
    --ui-text: #ffffff;
    --ui-text-2: rgba(255, 255, 255, .7);
    --ui-hint: #6d6d71;
    --ui-section-header: #6d6d71;
    --ui-separator: rgba(255, 255, 255, .07);
    --ui-accent: #f2f2f7;
    --ui-accent-strong: #ffffff;
    --ui-accent-fill: #636366;
    --ui-accent-fill-strong: #8e8e93;
    --ui-accent-text: #ffffff;
    --ui-accent-soft: rgba(255, 255, 255, .14);
    --ui-accent-grad: linear-gradient(110deg, #f2f2f7 0%, #ffffff 50%, #f2f2f7 100%);
    --ui-accent-sheen-1: #ffffff;
    --ui-accent-sheen-2: #e5e5ea;
    --ui-accent-glass: rgba(255, 255, 255, .12);
    --ui-destructive: #df494d;
    --ui-confirm: #49df64;
    --ui-star: #f1aa05;
    --ui-pro: #af51de;
    --ui-fill: rgba(255, 255, 255, .06);
    --ui-fill-2: rgba(255, 255, 255, .1);
    --ui-fill-3: rgba(255, 255, 255, .14);
    --ui-hover: rgba(255, 255, 255, .05);
    --ui-press: rgba(255, 255, 255, .08);
    --ui-radius-card: 24px;
    --ui-radius-field: 20px;
    --ui-radius-pill: 999px;
    --ui-font: "SFProText", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

    --ui-badge-bg: #636366;
    --ui-badge-border: none;
    --ui-badge-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

    /* Tier's own liquid-glass layer keeps working — repointed at Portals values */
    --glass-shadow: var(--pm-glass-deep);
    --glass-shadow-sm: var(--pm-glass-bevel);
    --glass-well-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .03),
        inset 0 2px 4px -1px rgba(0, 0, 0, .5),
        inset 1.5px 2px 0 -1.5px rgba(0, 0, 0, .4),
        inset -1.5px -2.5px 0 -1.5px rgba(255, 255, 255, .16);
    --glass-fill: color-mix(in srgb, var(--bg-glass) 12%, transparent);
    --glass-fill-raised: color-mix(in srgb, var(--bg-glass) 12%, #1C1C1CCC);
    --glass-fill-sunken: rgba(0, 0, 0, .3);
    --glass-fill-well: rgba(0, 0, 0, .26);
    --glass-blur: blur(8px) saturate(140%);
    --glass-blur-sm: blur(8px) saturate(140%);

    --glass-fill-raised: #262627;
    --oem-tile-surface: #1c1c1c;
    --oem-disabled-button: #282727;
    --oem-disabled-text: #6d6d71;
}

/* ─── 3. The glass surface ───
   Two mixins matching the two inline styles in the Portals bundle. `url()` in
   backdrop-filter is Chromium-only; Portals ships the same -webkit- fallback
   without the distortion, so WebKit degrades to plain blur+saturate. */

/* A — full refraction. Reserved for floating chrome, the way Portals uses it:
   a handful of elements at a time, never a grid of them. */
.pm-glass,
.oem-sheet,
.ui-modal,
.ui-popup,
.oem-titlebar-action,
.ui-icon-button,
.oem-tile-brush,
.oem-tile-segmented,
.ui-segmented,
.oem-line-segmented,
.oem-switch,
.ui-switch,
.oem-position-pad {
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) url(#distortion) saturate(var(--saturation));
    isolation: isolate;
}

/* B — glass without the displacement pass. Cards and the twelve catalogue
   tiles are on screen together; running an SVG filter on each one costs a
   full offscreen pass per frame and janks the grid on mid-range Android. */
.ui-card,
.ui-draglist,
.oem-pager,
.oem-inline-bubble,
.oem-template-preview {
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
    isolation: isolate;
}

/* Panels that must stay legible over scrolling content carry the tinted fill. */
.ui-card,
.ui-draglist,
.oem-pager,
.oem-inline-bubble {
    background: var(--pm-glass-panel);
    border: 0;
    box-shadow: var(--pm-glass-deep);
}

/* Sheets and modals sit on top of live content, so they get a real base. */
.oem-sheet,
.ui-modal,
.ui-popup {
    background: var(--pm-surface);
    border: 0;
    box-shadow: var(--pm-glass-deep), 0 -10px 40px rgba(0, 0, 0, .55);
}

/* Floating chrome sits on the near-transparent veil, so the content behind it
   reads through the blur — this is what makes it look like glass and not paint. */
.oem-titlebar-action,
.ui-icon-button,
.oem-tile-brush,
.oem-tile-segmented,
.ui-segmented,
.oem-line-segmented,
.oem-switch,
.ui-switch,
.oem-position-pad {
    background-color: var(--pm-glass-veil);
    border: 0;
    box-shadow: var(--pm-glass-deep);
}

/* ─── 4. Page shell ─── */

html,
body {
    background: var(--pm-background);
    color: var(--pm-text);
    font-family: var(--pm-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Portals ships a flat canvas; its glass catches the artwork, not a gradient. */
[data-theme=dark] body.oem-body,
[data-theme=light] body.oem-body,
body.oem-body {
    background-color: var(--pm-background) !important;
    background-image: none !important;
}

/* The distortion filter host must never take layout. */
.pm-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    pointer-events: none;
}

.ui-page,
.ui-button,
.ui-segment,
.ui-modal,
.oem-titlebar,
.oem-titlebar-action,
.oem-titlebar-back,
.oem-sheet,
.ui-field,
input,
button,
textarea {
    font-family: var(--pm-font);
}

.ui-page {
    width: min(100%, 512px);
}

/* ─── 5. Squircle corners ───
   Portals rounds with `corner-shape: squircle` and falls back to a smaller
   plain radius where the property is unsupported. Same deal here. */

.ui-card,
.ui-modal,
.oem-pager,
.oem-template-preview,
.oem-sheet-preview,
.oem-position-pad,
.oem-emoji,
.oem-color-preset,
.ui-draglist {
    border-radius: var(--pm-radius-card);
}

@supports (corner-shape: squircle) {
    .ui-card,
    .ui-modal,
    .oem-pager,
    .ui-draglist {
        corner-shape: squircle;
        border-radius: 56px;
    }

    .oem-template-preview,
    .oem-sheet-preview,
    .oem-position-pad {
        corner-shape: squircle;
        border-radius: 48px;
    }

    .oem-emoji {
        corner-shape: squircle;
        border-radius: 18px !important;
    }

    .oem-emoji--lg {
        border-radius: 26px !important;
    }
}

/* `border-radius: inherit` carries the radius but not the corner shape, so a
   selection ring would trace a plain rounded rect over a squircle tile. */
.oem-template-preview:after,
.oem-template-live,
.oem-sheet-preview .oem-template-live {
    corner-shape: inherit;
}

/* ─── 6. Cards and rows ─── */

.ui-card,
.ui-draglist {
    margin: 0 16px;
}

.ui-section {
    margin-bottom: 16px;
}

.ui-section-header {
    padding: 0 22px;
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ui-section-footer {
    padding: 0 22px;
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.ui-row {
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
}

.ui-row + .ui-row:before,
.oem-pack-row + .oem-pack-row:before {
    left: 14px !important;
    right: 14px;
    background: rgba(255, 255, 255, .07);
}

.ui-row-title {
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

.ui-row-subtitle,
.ui-row-overline {
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

.ui-row-after {
    gap: 8px;
    color: var(--pm-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.ui-row-value {
    color: var(--pm-text);
    font-weight: 700;
}

.ui-row--accent .ui-row-title {
    color: var(--pm-primary);
}

.oem-destructive-row .ui-row-title {
    color: var(--pm-destructive);
}

/* ─── 7. Leading icon chips ───
   Portals' small round glyph holders: `bg-white/24 glass-shadow glass`. */

.oem-emoji {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .1) !important;
    box-shadow: var(--pm-glass-bevel) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) saturate(var(--saturation));
}

.oem-emoji--lg {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
}

.oem-emoji svg {
    width: 19px !important;
    height: 19px !important;
}

.oem-icon-text,
.oem-icon-fill,
.oem-icon-layers,
.oem-icon-folder,
.oem-icon-back,
.oem-icon-external,
.oem-icon-upload,
.oem-icon-stroke,
.oem-icon-content,
.oem-icon-palette {
    background: rgba(255, 255, 255, .1) !important;
}

.oem-icon-delete {
    background: rgba(223, 73, 77, .28) !important;
    color: #ff8a8d !important;
}

.oem-icon-delete svg {
    color: #ff8a8d !important;
}

.oem-trailing,
.oem-nav-btn {
    color: var(--pm-text-muted);
}

/* ─── 8. Title bar ─── */

.oem-titlebar {
    margin: 0 16px 14px;
    padding: 0 4px;
}

.oem-titlebar-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.oem-titlebar-title--center {
    font-size: 17px;
    font-weight: 700;
}

.oem-titlebar-action {
    min-height: 40px;
    padding: 0 12px 0 16px;
    border-radius: var(--pm-radius-pill);
    font-size: 14px;
    font-weight: 700;
    color: var(--pm-text);
}

.oem-titlebar-action > svg {
    width: 16px;
    height: 16px;
    color: var(--pm-text-muted);
}

.oem-titlebar-action:active {
    transform: scale(.98);
    opacity: 1;
}

.oem-titlebar-back {
    color: var(--pm-primary);
    font-size: 15px;
    font-weight: 600;
}

.oem-titlebar-back > svg {
    width: 20px;
    height: 20px;
}

/* ─── 9. Buttons ───
   Portals' primary: `glass-shadow bg-primary font-bold` — flat blue wearing
   the shallow bevel, never the deep one. */

.ui-button {
    height: 42px;
    padding: 0 18px;
    gap: 6px;
    border-radius: var(--pm-radius-pill);
    background: var(--pm-primary-fill);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--pm-glass-bevel);
    transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

@media (hover: hover) {
    .ui-button:hover:not(:disabled) {
        background: var(--pm-primary-fill-strong);
    }
}

.ui-button:active:not(:disabled) {
    background: var(--pm-primary-fill-strong);
    transform: scale(.985);
}

.ui-button--large {
    height: 52px;
    font-size: 16px;
}

.ui-button--tinted {
    background: var(--pm-glass-veil);
    color: var(--pm-text);
    box-shadow: var(--pm-glass-deep);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) url(#distortion) saturate(var(--saturation));
    isolation: isolate;
}

@media (hover: hover) {
    .ui-button--tinted:hover:not(:disabled) {
        background: rgba(0, 0, 0, .2);
        filter: none;
    }
}

.ui-button:disabled {
    background: var(--pm-glass-veil);
    color: var(--pm-text-muted);
    box-shadow: var(--pm-glass-deep);
    opacity: 1;
}

.ui-icon-button,
.oem-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--pm-text-muted);
}

.ui-icon-button:disabled {
    opacity: .4;
}

@media (hover: hover) {
    .ui-icon-button:hover {
        background-color: rgba(0, 0, 0, .2);
    }
}

/* ─── 10. Bottom CTA ───
   The bar is glass over the scrolling tile grid; the button on it is the
   Portals primary. The old shimmering gradient ring has no counterpart there. */

.ui-cta,
.ui-cta--off,
.ui-cta.ui-cta--ignite {
    padding: 0 !important;
    background: none !important;
    animation: none !important;
    box-shadow: none !important;
}

.ui-cta > .ui-button,
.ui-cta:not(.ui-cta--off) > .ui-button {
    width: 100%;
    background: var(--pm-primary-2) !important;
    color: #0b0b0d !important;
    border: 0 !important;
    box-shadow: var(--pm-glass-bevel) !important;
    animation: none !important;
}

.ui-cta--off > .ui-button:disabled,
.ui-cta-bar .ui-button:disabled {
    background: var(--pm-glass-veil) !important;
    color: var(--pm-text-muted) !important;
    box-shadow: var(--pm-glass-deep) !important;
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) url(#distortion) saturate(var(--saturation));
    opacity: 1 !important;
}

.ui-cta-bar,
.ui-cta-bar.oem-cta-bar {
    padding: 14px 16px calc(14px + var(--ui-safe-bottom));
}

/* Portals lets its bottom bar float over live content rather than sitting on a
   wall of black, so the skirt only ever thickens the blur — it never becomes
   opaque, and the grid stays visible sliding underneath. */
.ui-cta-bar.oem-cta-bar:before,
.ui-fade-bottom:before {
    background: linear-gradient(180deg,
        rgba(20, 20, 20, 0) 0%,
        rgba(20, 20, 20, .18) 42%,
        rgba(20, 20, 20, .42) 72%,
        rgba(20, 20, 20, .6) 100%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation)) !important;
    backdrop-filter: blur(12px) saturate(var(--saturation)) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 38%) !important;
}

.ui-cta-bar-inner {
    width: min(100%, 512px);
}

/* ─── 11. Fields ─── */

.ui-field,
.oem-row-input {
    color: var(--pm-text);
    font-family: var(--pm-font);
    font-size: 15px;
    font-weight: 600;
}

.ui-field::placeholder,
.oem-row-input::placeholder {
    color: var(--pm-text-muted);
    font-weight: 600;
    opacity: 1;
}

.oem-input-label {
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 600;
}

.oem-token-input {
    border-radius: var(--pm-radius-pill);
    background: rgba(28, 28, 28, .8);
    border: 1px solid transparent;
    box-shadow: var(--pm-glass-bevel);
    color: var(--pm-text);
    font-weight: 600;
}

.oem-token-input:focus {
    border-color: var(--pm-primary);
}

/* ─── 12. Template grid ─── */

.oem-template-grid {
    gap: 10px;
    padding: 0 16px 8px;
}

.oem-template-preview {
    background: var(--pm-glass-veil);
    box-shadow: var(--pm-glass-deep);
}

.oem-template-tile--selected .oem-template-preview {
    box-shadow: var(--pm-glass-deep), 0 0 0 1.5px rgba(255, 255, 255, .68), 0 6px 20px rgba(0, 0, 0, .3);
}

.oem-template-tile--selected .oem-template-preview:after {
    border: 2.5px solid var(--pm-primary);
}

.oem-template-tile:focus-visible:not(.oem-template-tile--selected) .oem-template-preview:after {
    border-color: rgba(255, 255, 255, .45);
}

.oem-template-tile--selected:before {
    background-color: var(--pm-primary-fill);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.oem-tile-brush {
    color: #ffffff !important;
}

.oem-pager {
    margin: 0 16px 8px;
    padding: 8px 10px;
}

.oem-catalog-count {
    color: var(--pm-text-muted);
}

/* ─── 13. Colour rows ─── */

.oem-color-swatch {
    border-radius: 50%;
    box-shadow: var(--pm-glass-bevel), 0 0 0 1px rgba(255, 255, 255, .1);
}

.oem-color-hex {
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oem-color-preset {
    box-shadow: var(--pm-glass-bevel);
}

.oem-color-preset.is-active {
    outline: 2px solid var(--pm-primary);
    outline-offset: 2px;
}

/* ─── 14. Segmented controls ───
   Portals' switcher: glass capsule, bevelled dark thumb that slides, muted
   inactive labels, primary-blue active one. */

.oem-tile-segmented,
.ui-segmented,
.oem-line-segmented {
    border-radius: var(--pm-radius-pill);
    transition: background-color var(--switcher-transition), box-shadow var(--switcher-transition);
}

.oem-tile-segmented {
    margin: 4px 14px 14px;
    height: 40px;
}

.oem-tile-segmented:before,
.oem-line-segmented:after {
    background: rgba(0, 0, 0, .3);
    box-shadow: var(--pm-thumb-shadow);
    transition: transform var(--switcher-transition);
}

.oem-tile-segment-btn,
.ui-segment {
    color: var(--pm-text);
    opacity: .4;
    font-size: 13px;
    font-weight: 700;
    transition: all .16s;
}

.oem-tile-segmented[data-active="montserrat"] .oem-tile-segment-btn[data-font="montserrat"],
.oem-tile-segmented[data-active="seymour"] .oem-tile-segment-btn[data-font="seymour"],
.ui-segment--active {
    color: var(--pm-primary);
    opacity: 1;
}

.ui-chip {
    border-radius: var(--pm-radius-pill);
    background: var(--pm-glass-veil);
    box-shadow: var(--pm-glass-deep);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    backdrop-filter: blur(8px) url(#distortion) saturate(var(--saturation));
    border: 0;
    color: var(--pm-text-muted);
}

.ui-chip__label {
    font-size: 14px;
    font-weight: 700;
}

.ui-chip--active {
    background: var(--pm-primary-fill);
    color: #ffffff;
    box-shadow: var(--pm-glass-bevel);
}

/* ─── 15. Switch ─── */

.oem-switch,
.ui-switch {
    width: 48px;
    height: 28px;
}

.oem-switch[aria-checked="true"],
.ui-switch--on {
    background-color: var(--pm-primary-fill);
    box-shadow: var(--pm-glass-bevel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.oem-switch:before,
.ui-switch:after {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.oem-switch[aria-checked="true"]:before {
    transform: translateX(20px);
}

.ui-checkbox-box {
    border-radius: 10px;
    border-color: var(--pm-border);
}

.ui-checkbox-input:checked + .ui-checkbox-box {
    background: var(--pm-primary-fill);
    border-color: var(--pm-primary-fill);
}

/* ─── 16. Sliders and position pad ─── */

.oem-slider {
    accent-color: var(--pm-primary);
}

.oem-slider-label,
.oem-position-value {
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.oem-slider-num {
    color: var(--pm-text);
    font-size: 13px;
    font-weight: 700;
}

.oem-position-dot {
    background: var(--pm-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35), var(--pm-glass-bevel);
}

.oem-position-pad-cross {
    background:
        linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) center / 100% 1px no-repeat,
        linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) center / 1px 100% no-repeat;
}

/* ─── 17. Sheets, modals, overlays ─── */

.ui-overlay {
    background: rgba(0, 0, 0, .62);
    -webkit-backdrop-filter: blur(14px) saturate(var(--saturation));
    backdrop-filter: blur(14px) saturate(var(--saturation));
}

.ui-modal-title {
    color: var(--pm-text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.oem-sheet {
    border-radius: 20px 20px 0 0;
}

.oem-sheet-handle {
    background: var(--pm-text-3);
}

.oem-sheet-title {
    font-size: 17px;
    font-weight: 700;
}

.oem-sheet-text-btn {
    color: var(--pm-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.oem-sheet-text-btn--accent {
    color: var(--pm-primary);
    font-weight: 700;
}

/* Holds the rendered template, so glass behind it would never be seen. */
.oem-sheet-preview {
    background: var(--pm-input);
    box-shadow: var(--pm-glass-deep);
}

.oem-picker-row--active .ui-row-title,
.oem-picker-check {
    color: var(--pm-primary);
}

.oem-picker-count {
    color: var(--pm-text-muted);
}

.ui-popup-title {
    font-weight: 700;
}

.ui-popup-close {
    background: var(--pm-glass-veil);
    box-shadow: var(--pm-glass-deep);
    color: var(--pm-text-muted);
}

/* ─── 18. Notices, spinner, misc ─── */

.ui-notice {
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.ui-notice--error {
    color: var(--pm-destructive);
}

.ui-spinner {
    color: var(--pm-primary);
}

.ui-spinner-track {
    color: rgba(255, 255, 255, .12);
}

.oem-inline-bubble {
    border-radius: 22px;
    color: var(--pm-text);
    font-weight: 600;
}

.oem-draft-card .ui-row-after {
    color: var(--pm-text-muted);
    font-weight: 600;
}

.ui-modelpicker-badge {
    background: var(--pm-primary-fill);
    color: #ffffff;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Blur is expensive; drop the refraction pass where motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
    .oem-tile-segmented:before,
    .oem-line-segmented:after {
        transition: none;
    }
}


/* ─── 19. Rounder everywhere ───
   "Сделай всё круглым": the remaining square-ish surfaces pick up the same
   squircle family as the cards. */

.oem-template-preview,
.oem-sheet-preview {
    border-radius: 24px;
}

.oem-position-pad {
    border-radius: 26px;
}

.oem-emoji {
    border-radius: 14px !important;
}

.oem-emoji--lg {
    border-radius: 18px !important;
}

.ui-field--input,
.oem-row-input {
    border-radius: var(--pm-radius-pill);
}

.oem-tile-brush {
    border-radius: 50%;
}

.ui-modal-actions > * {
    border-radius: var(--pm-radius-pill);
}

@supports (corner-shape: squircle) {
    .oem-emoji {
        border-radius: 22px !important;
    }

    .oem-emoji--lg {
        border-radius: 30px !important;
    }

    .oem-position-pad {
        corner-shape: squircle;
        border-radius: 50px;
    }
}

/* The sheet's cards sit on the sheet, not on the page — lift them a step. */
.oem-sheet .ui-card {
    background: #232324;
    box-shadow: var(--pm-glass-bevel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.oem-sheet-preview {
    background: var(--pm-input);
}

/* Segmented control: pill track, blue active label, as on Portals' switcher. */
.oem-tile-segmented {
    background: rgba(0, 0, 0, .32);
}