/* ============================================================================
   BARBAROS — ux.css (premium batch 2 · UX ENGINE)
   ----------------------------------------------------------------------------
   Styles for window.BuldUX: toast stack, bell drawer, confirm modal, sheets,
   confetti canvas, skeleton, reveal, panel transition. Tokens only (--buld-*,
   --bx-*, --p-*). Motion: 120/180/240 ms via --bx-dur-* (bx-tokens.css collapses
   them to 0 ms under prefers-reduced-motion). Selectors carry html[data-buld-theme]
   so they beat legacy class rules by specificity. No !important.

   NAMING RULE (legacy wildcards): buld-theme.css / dark-fix.css still carry
   `[class*="toast"]`, `[class*="-modal"]`, `button[class*="primary"]`, `[class*="-card"]`,
   `[class$="-box"]`, `[class$="-tile"]`, `[class$="-panel"]`, `[class*="-label"]` … with
   !important. Class names here therefore avoid those substrings (toast → .ux-alert,
   modal → .ux-confirm, primary → .is-main, BEM "__" instead of "-" for parts).
   ============================================================================ */

html.ux-scroll-lock { overflow: hidden; }

/* ----------------------------------------------------------------------------
   1. Toast stack — top-right, max 4
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-alerts {
    position: fixed; top: 76px; inset-inline-end: 16px;
    z-index: var(--p-z-toast);
    display: flex; flex-direction: column; gap: 8px;
    width: 360px; max-width: calc(100vw - 32px);
    pointer-events: none;
}
html[data-buld-theme] .ux-alert {
    display: grid; grid-template-rows: 1fr;
    opacity: 0; transform: translateX(24px);
    transition: opacity var(--bx-dur-overlay) var(--bx-ease),
                transform var(--bx-dur-overlay) var(--bx-ease),
                grid-template-rows var(--bx-dur-overlay) var(--bx-ease);
    pointer-events: auto;
}
html[data-buld-theme] .ux-alert.is-in { opacity: var(--ux-drag-o, 1); transform: translateX(var(--ux-dx, 0px)); }
html[data-buld-theme] .ux-alert.is-dragging { transition: grid-template-rows var(--bx-dur-overlay) var(--bx-ease); }
html[data-buld-theme] .ux-alert.is-out { opacity: 0; transform: translateX(calc(var(--ux-dx, 0px) + 24px)); grid-template-rows: 0fr; }
html[data-buld-theme] .ux-alert__inner {
    position: relative; min-height: 0; overflow: hidden;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 10px 13px 12px;
    background: var(--p-card-bg); background-image: none;
    border: 1px solid var(--p-card-border);
    border-inline-start: 3px solid var(--buld-cta);
    border-radius: 12px;
    box-shadow: var(--bx-shadow-3);
    color: var(--buld-ink-1);
    font-family: var(--buld-font-text);
    touch-action: pan-y;
}
html[data-buld-theme] .ux-alert.is-out .ux-alert__inner { padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; }
html[data-buld-theme] .ux-alert__tile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--buld-cta-soft); color: var(--buld-cta);
}
html[data-buld-theme] .ux-alert__tile svg,
html[data-buld-theme] .ux-alert__tile i { width: 16px; height: 16px; }
html[data-buld-theme] .ux-alert[data-tone="success"] .ux-alert__inner { border-inline-start-color: var(--buld-success); }
html[data-buld-theme] .ux-alert[data-tone="success"] .ux-alert__tile { background: var(--buld-success-soft); color: var(--buld-success); }
html[data-buld-theme] .ux-alert[data-tone="warning"] .ux-alert__inner { border-inline-start-color: var(--buld-warning); }
html[data-buld-theme] .ux-alert[data-tone="warning"] .ux-alert__tile { background: var(--buld-warning-soft); color: var(--buld-warning); }
html[data-buld-theme] .ux-alert[data-tone="danger"] .ux-alert__inner { border-inline-start-color: var(--buld-danger); }
html[data-buld-theme] .ux-alert[data-tone="danger"] .ux-alert__tile { background: var(--buld-danger-soft); color: var(--buld-danger); }
html[data-buld-theme] .ux-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
html[data-buld-theme] .ux-alert__title { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--buld-ink-1); letter-spacing: var(--buld-tracking-text); }
html[data-buld-theme] .ux-alert__msg { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--buld-ink-2); word-wrap: break-word; }
html[data-buld-theme] .ux-alert__title + .ux-alert__msg { color: var(--buld-ink-3); }
html[data-buld-theme] .ux-alert__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
html[data-buld-theme] .ux-alert__act {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
    border-radius: 999px; border: 1px solid var(--buld-divider);
    background: transparent; color: var(--buld-ink-1);
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .ux-alert__act:hover { background: var(--buld-hover); }
html[data-buld-theme] .ux-alert__act:active { transform: scale(.98); }
html[data-buld-theme] .ux-alert__act.is-main { background: var(--buld-cta); border-color: var(--buld-cta); color: var(--bx-action-ink); }
html[data-buld-theme] .ux-alert__act.is-main:hover { background: var(--buld-cta-hover); }
html[data-buld-theme] .ux-alert__act:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 2px; }
html[data-buld-theme] .ux-alert__close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--buld-ink-3); cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .ux-alert__close:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html[data-buld-theme] .ux-alert__close:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 1px; }
html[data-buld-theme] .ux-alert__close svg,
html[data-buld-theme] .ux-alert__close i { width: 14px; height: 14px; }
/* auto-dismiss bar: scaleX 1 → 0 over --ux-dur (set by JS); paused on hover/focus */
html[data-buld-theme] .ux-alert__bar {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--buld-cta); opacity: .55; transform-origin: left;
    animation: uxAlertBar var(--ux-dur, 4500ms) linear forwards;
}
html[data-buld-theme] .ux-alert[data-tone="success"] .ux-alert__bar { background: var(--buld-success); }
html[data-buld-theme] .ux-alert[data-tone="warning"] .ux-alert__bar { background: var(--buld-warning); }
html[data-buld-theme] .ux-alert[data-tone="danger"] .ux-alert__bar { background: var(--buld-danger); }
html[data-buld-theme] .ux-alert.is-paused .ux-alert__bar { animation-play-state: paused; }
html[data-buld-theme] .ux-alert.is-indeterminate .ux-alert__bar { width: 38%; opacity: .8; animation: uxAlertSlide 1.1s var(--bx-ease) infinite; }
@keyframes uxAlertBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes uxAlertSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* ----------------------------------------------------------------------------
   2. Bell drawer — 380px right, tabs, grouped by day
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-bell {
    position: fixed; inset: 0; z-index: var(--p-z-drawer);
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear var(--bx-dur-layout);
}
html[data-buld-theme] .ux-bell.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
html[data-buld-theme] .ux-bell__scrim {
    position: absolute; inset: 0; background: var(--bx-scrim); opacity: 0;
    transition: opacity var(--bx-dur-overlay) var(--bx-ease);
}
html[data-buld-theme] .ux-bell.is-open .ux-bell__scrim { opacity: 1; }
html[data-buld-theme] .ux-bell__drawer {
    position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
    width: 380px; max-width: 100vw;
    display: flex; flex-direction: column;
    background: var(--p-card-bg); background-image: none;
    border-inline-start: 1px solid var(--p-card-border);
    box-shadow: var(--bx-shadow-3);
    color: var(--buld-ink-1); font-family: var(--buld-font-text);
    transform: translateX(100%);
    transition: transform var(--bx-dur-layout) var(--bx-ease);
    outline: none;
}
html[dir="rtl"][data-buld-theme] .ux-bell__drawer { transform: translateX(-100%); }
html[data-buld-theme] .ux-bell.is-open .ux-bell__drawer { transform: none; }
html[data-buld-theme] .ux-bell__head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 16px 10px 20px;
}
html[data-buld-theme] .ux-bell__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-buld-theme] .ux-bell__head h2 { margin: 0; font-family: var(--buld-font-display); font-size: 17px; font-weight: 600; letter-spacing: var(--buld-tracking-display); color: var(--buld-ink-1); }
html[data-buld-theme] .ux-bell__count { font-size: 12px; color: var(--buld-ink-3); }
html[data-buld-theme] .ux-bell__tabs {
    display: inline-flex; gap: 2px; margin: 0 20px 6px; padding: 3px;
    border-radius: 10px; background: var(--buld-page);
    border: 1px solid var(--buld-hairline);
    align-self: flex-start;
}
html[data-buld-theme] .ux-bell__tab {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--buld-ink-3);
    font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .ux-bell__tab:hover { color: var(--buld-ink-1); }
html[data-buld-theme] .ux-bell__tab.is-active { background: var(--p-card-bg); color: var(--buld-ink-1); box-shadow: var(--bx-shadow-1); font-weight: 600; }
html[data-buld-theme] .ux-bell__tab:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 1px; }
html[data-buld-theme] .ux-bell__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--buld-cta); color: var(--bx-action-ink); font-size: 10.5px; font-weight: 700;
}
html[data-buld-theme] .ux-bell__badge[hidden] { display: none; }
html[data-buld-theme] .ux-bell__list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; overscroll-behavior: contain; }
html[data-buld-theme] .ux-bell__group + .ux-bell__group { margin-top: 6px; }
html[data-buld-theme] .ux-bell__day {
    margin: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--buld-ink-3);
}
html[data-buld-theme] .ux-bell__item {
    position: relative; display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 28px 10px 10px; border-radius: 10px; cursor: default;
    transition: background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .ux-bell__item:hover { background: var(--buld-hover); }
html[data-buld-theme] .ux-bell__item:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: -2px; }
html[data-buld-theme] .ux-bell__item.is-unread { background: var(--buld-cta-soft); }
html[data-buld-theme] .ux-bell__item.is-unread:hover { background: var(--buld-hover); }
html[data-buld-theme] .ux-bell__tile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--buld-page); color: var(--buld-ink-2); border: 1px solid var(--buld-hairline);
}
html[data-buld-theme="dark"] .ux-bell__tile { background: var(--buld-surface-2); }
html[data-buld-theme] .ux-bell__tile svg,
html[data-buld-theme] .ux-bell__tile i { width: 16px; height: 16px; }
html[data-buld-theme] .ux-bell__tile[data-kind="order"] { color: var(--buld-cta); background: var(--buld-cta-soft); border-color: transparent; }
html[data-buld-theme] .ux-bell__tile[data-kind="credits"] { color: var(--buld-warning); background: var(--buld-warning-soft); border-color: transparent; }
html[data-buld-theme] .ux-bell__tile[data-kind="stock"] { color: var(--buld-danger); background: var(--buld-danger-soft); border-color: transparent; }
html[data-buld-theme] .ux-bell__tile[data-kind="tip"] { color: var(--buld-cta); }
html[data-buld-theme] .ux-bell__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html[data-buld-theme] .ux-bell__title { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--buld-ink-1); }
html[data-buld-theme] .ux-bell__msg { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--buld-ink-3); }
html[data-buld-theme] .ux-bell__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
html[data-buld-theme] .ux-bell__meta time { font-size: 11.5px; color: var(--buld-ink-4); font-variant-numeric: tabular-nums; }
html[data-buld-theme] .ux-bell__act {
    display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto;
    height: 26px; padding: 0 4px 0 10px; border-radius: 999px;
    border: 1px solid var(--buld-divider); background: var(--p-card-bg); color: var(--buld-ink-1);
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), border-color var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .ux-bell__act:hover { border-color: var(--buld-cta); color: var(--buld-cta); }
html[data-buld-theme] .ux-bell__act:active { transform: scale(.98); }
html[data-buld-theme] .ux-bell__act:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 2px; }
html[data-buld-theme] .ux-bell__act svg,
html[data-buld-theme] .ux-bell__act i { width: 14px; height: 14px; transition: transform var(--bx-dur-hover) var(--bx-ease); }
html[data-buld-theme] .ux-bell__act:hover svg,
html[data-buld-theme] .ux-bell__act:hover i { transform: translateX(2px); }
html[data-buld-theme] .ux-bell__unread {
    position: absolute; top: 14px; inset-inline-end: 12px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--buld-cta); opacity: 0;
    transition: opacity var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .ux-bell__item.is-unread .ux-bell__unread { opacity: 1; }
html[data-buld-theme] .ux-bell__empty { padding: 48px 16px; }
html[data-buld-theme] .ux-bell__foot {
    display: flex; justify-content: flex-end; padding: 10px 16px 14px;
    border-top: 1px solid var(--p-card-border);
}
html[data-buld-theme] .ux-bell__foot .bx-btn { gap: 6px; }
html[data-buld-theme] .ux-bell__foot .bx-btn svg,
html[data-buld-theme] .ux-bell__foot .bx-btn i { width: 14px; height: 14px; }
html[data-buld-theme] .ux-bell__foot .bx-btn:disabled { opacity: .5; cursor: default; }
/* unread dot pops when a new item arrives */
html[data-buld-theme] .ap-notif-dot.is-pop { animation: uxPop 360ms var(--bx-ease); }
@keyframes uxPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ----------------------------------------------------------------------------
   3. Confirm modal
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-confirm {
    position: fixed; inset: 0; z-index: var(--p-z-modal);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; transition: opacity var(--bx-dur-overlay) var(--bx-ease);
}
html[data-buld-theme] .ux-confirm.is-open { opacity: 1; }
html[data-buld-theme] .ux-confirm__scrim { position: absolute; inset: 0; background: var(--bx-scrim); }
html[data-buld-theme] .ux-confirm__box {
    position: relative; width: 420px; max-width: 100%;
    padding: 22px 22px 18px;
    background: var(--p-card-bg); background-image: none;
    border: 1px solid var(--p-card-border); border-radius: 12px;
    box-shadow: var(--bx-shadow-3);
    color: var(--buld-ink-1); font-family: var(--buld-font-text);
    transform: translateY(8px) scale(.98);
    transition: transform var(--bx-dur-overlay) var(--bx-ease);
    outline: none;
}
html[data-buld-theme] .ux-confirm.is-open .ux-confirm__box { transform: none; }
html[data-buld-theme] .ux-confirm__tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px;
    background: var(--buld-cta-soft); color: var(--buld-cta);
}
html[data-buld-theme] .ux-confirm__tile.is-danger { background: var(--buld-danger-soft); color: var(--buld-danger); }
html[data-buld-theme] .ux-confirm__tile svg,
html[data-buld-theme] .ux-confirm__tile i { width: 20px; height: 20px; }
html[data-buld-theme] .ux-confirm__title { margin: 0 0 6px; font-family: var(--buld-font-display); font-size: 17px; font-weight: 600; letter-spacing: var(--buld-tracking-display); color: var(--buld-ink-1); }
html[data-buld-theme] .ux-confirm__msg { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--buld-ink-2); }
html[data-buld-theme] .ux-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ----------------------------------------------------------------------------
   4. Sheet — right drawer or bottom sheet
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-sheet {
    position: fixed; inset: 0; z-index: calc(var(--p-z-drawer) + var(--ux-sheet-i, 0));
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear var(--bx-dur-layout);
}
html[data-buld-theme] .ux-sheet.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
html[data-buld-theme] .ux-sheet__scrim {
    position: absolute; inset: 0; background: var(--bx-scrim); opacity: 0;
    transition: opacity var(--bx-dur-overlay) var(--bx-ease);
}
html[data-buld-theme] .ux-sheet.is-open .ux-sheet__scrim { opacity: 1; }
html[data-buld-theme] .ux-sheet__panel {
    position: absolute; display: flex; flex-direction: column;
    background: var(--p-card-bg); background-image: none;
    box-shadow: var(--bx-shadow-3);
    color: var(--buld-ink-1); font-family: var(--buld-font-text);
    transition: transform var(--bx-dur-layout) var(--bx-ease);
    outline: none;
}
html[data-buld-theme] .ux-sheet[data-side="right"] .ux-sheet__panel {
    top: 0; bottom: 0; inset-inline-end: 0;
    width: var(--ux-sheet-w, 480px); max-width: 100vw;
    border-inline-start: 1px solid var(--p-card-border);
    transform: translateX(100%);
}
html[dir="rtl"][data-buld-theme] .ux-sheet[data-side="right"] .ux-sheet__panel { transform: translateX(-100%); }
html[data-buld-theme] .ux-sheet[data-side="bottom"] .ux-sheet__panel {
    left: 0; right: 0; bottom: 0; margin: 0 auto;
    width: min(100%, var(--ux-sheet-w, 640px)); max-height: 88vh;
    border: 1px solid var(--p-card-border); border-bottom: 0;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
}
html[data-buld-theme] .ux-sheet.is-open .ux-sheet__panel { transform: none; }
html[data-buld-theme] .ux-sheet__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 16px 12px 22px;
    border-bottom: 1px solid var(--p-card-border);
}
html[data-buld-theme] .ux-sheet[data-side="bottom"] .ux-sheet__head::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 999px; background: var(--buld-divider);
}
html[data-buld-theme] .ux-sheet__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-buld-theme] .ux-sheet__title { margin: 0; font-family: var(--buld-font-display); font-size: 17px; font-weight: 600; letter-spacing: var(--buld-tracking-display); color: var(--buld-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-buld-theme] .ux-sheet__subtitle { margin: 0; font-size: 12.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .ux-sheet__subtitle[hidden] { display: none; }
html[data-buld-theme] .ux-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; overscroll-behavior: contain; }
html[data-buld-theme] .ux-sheet__foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 22px 16px; border-top: 1px solid var(--p-card-border);
    background: var(--p-card-bg);
}
html[data-buld-theme] .ux-sheet__foot[hidden] { display: none; }
/* helpers other owners may use inside sheet bodies */
html[data-buld-theme] .ux-sheet__section { padding: 14px 0; border-bottom: 1px solid var(--buld-hairline); }
html[data-buld-theme] .ux-sheet__section:last-child { border-bottom: 0; }
html[data-buld-theme] .ux-sheet__section-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--buld-ink-3); }

/* ----------------------------------------------------------------------------
   5. Confetti canvas
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: var(--p-z-toast); pointer-events: none; }

/* ----------------------------------------------------------------------------
   6. Skeleton — overlay appended to the container (non-destructive)
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-is-loading { position: relative; min-height: var(--ux-sk-min, 184px); }
html[data-buld-theme] .ux-skeleton {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 8px; padding: 8px;
    background: var(--p-card-bg); border-radius: inherit; overflow: hidden;
}
html[data-buld-theme] .ux-skeleton__row { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px; }
html[data-buld-theme] .ux-skeleton__tile,
html[data-buld-theme] .ux-skeleton__line,
html[data-buld-theme] .ux-skeleton__pill {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, var(--buld-hover) 25%, var(--buld-elevated) 50%, var(--buld-hover) 75%);
    background-size: 200% 100%;
    animation: uxShimmer 1.4s linear infinite;
}
html[data-buld-theme="light"] .ux-skeleton__tile,
html[data-buld-theme="light"] .ux-skeleton__line,
html[data-buld-theme="light"] .ux-skeleton__pill {
    background: linear-gradient(90deg, var(--buld-elevated) 25%, var(--buld-page) 50%, var(--buld-elevated) 75%);
    background-size: 200% 100%;
}
html[data-buld-theme] .ux-skeleton__tile { width: 36px; height: 36px; flex-shrink: 0; }
html[data-buld-theme] .ux-skeleton__lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
html[data-buld-theme] .ux-skeleton__line { height: 11px; width: 62%; border-radius: 6px; }
html[data-buld-theme] .ux-skeleton__line.is-short { width: 38%; height: 9px; }
html[data-buld-theme] .ux-skeleton__pill { width: 72px; height: 22px; border-radius: 999px; }
@keyframes uxShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ----------------------------------------------------------------------------
   7. Reveal + panel transition
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .ux-reveal [data-reveal] {
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--bx-dur-layout) var(--bx-ease), transform var(--bx-dur-layout) var(--bx-ease);
    transition-delay: calc(var(--ux-i, 0) * 40ms);
}
html[data-buld-theme] .ux-reveal.is-visible [data-reveal] { opacity: 1; transform: none; }
html[data-buld-theme] .panel.ux-panel-in { animation: uxPanelIn var(--bx-dur-layout) var(--bx-ease) both; }
html[data-buld-theme] .panel.ux-panel-out { animation: uxPanelOut var(--bx-dur-hover) var(--bx-ease) both; }
@keyframes uxPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes uxPanelOut { from { opacity: 1; } to { opacity: 0; } }

/* ----------------------------------------------------------------------------
   8. Small screens
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
    html[data-buld-theme] .ux-alerts { top: 70px; inset-inline: 12px; width: auto; max-width: none; }
    html[data-buld-theme] .ux-bell__drawer,
    html[data-buld-theme] .ux-sheet[data-side="right"] .ux-sheet__panel { width: 100vw; border-inline-start: 0; }
    html[data-buld-theme] .ux-sheet__body { padding: 16px; }
    html[data-buld-theme] .ux-sheet__head { padding-inline-start: 16px; }
    html[data-buld-theme] .ux-confirm__actions { flex-direction: column-reverse; }
    html[data-buld-theme] .ux-confirm__actions .bx-btn { width: 100%; justify-content: center; }
}