/* ==========================================================================
   DataStark — shared foundation for all UI shells.
   Shell stylesheets (bp-*.css) override the tokens and component looks.
   ========================================================================== */

:root {
    --color-background: 11 17 32;
    --color-surface: 17 24 39;
    --color-surface-hover: 31 41 55;
    --color-surface-elevated: 20 30 48;
    --color-primary: 37 99 235;
    --color-primary-hover: 29 78 216;
    --color-secondary: 51 65 85;
    --color-accent: 56 189 248;
    --color-border: 30 41 59;
    --color-text-primary: 248 250 252;
    --color-text-secondary: 148 163 184;
    --color-success: 16 185 129;
    --color-info: 14 165 233;
    --color-warning: 245 158 11;
    --color-critical: 239 68 68;
    --color-ink: 255 255 255;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --glass-bg: rgba(17, 24, 39, 0.65);
    --glass-border: rgba(255, 255, 255, 0.06);
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgb(var(--color-border));
    --scrollbar-hover: rgb(var(--color-primary));
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text-primary));
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1, .h1, .pro-h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -0.025em;
}

h2, .h2, .pro-h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3, .h3, .pro-h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -0.015em;
}

h4, .h4 {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 600;
}

p, span, label, input, button, select, textarea {
    font-family: var(--font-sans);
}

code, kbd, samp, pre, .font-mono {
    font-family: var(--font-mono);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Scroll reveal (driven by IntersectionObserver in _head.html) */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Cross-document view transitions (progressive enhancement) */
@view-transition { navigation: auto; }

/* Style-switch overlay (base; shells restyle) */
.ds-switch-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: rgba(5, 6, 10, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: ds-fade-in .25s ease-out both;
}
.ds-switch-inner { text-align: center; color: #fff; font-family: 'Inter', system-ui, sans-serif; }
.ds-switch-swatches { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.ds-switch-swatches span { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); animation: ds-pop .5s var(--ease-out) both; }
.ds-switch-swatches span:nth-child(2) { animation-delay: .06s; }
.ds-switch-swatches span:nth-child(3) { animation-delay: .12s; }
.ds-switch-kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .6; }
.ds-switch-name { font-size: 30px; font-weight: 700; margin-top: 6px; }
.ds-switch-layout { font-size: 13px; opacity: .65; margin-top: 4px; }
.ds-switch-bar { width: 220px; height: 3px; margin: 22px auto 0; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.ds-switch-bar span { display: block; height: 100%; width: 40%; background: #fff; animation: ds-load .9s ease-in-out infinite; }

@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ds-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* Shared fragments — neutral defaults */
.ds-toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: 360px; padding: 14px 16px; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-left: 3px solid rgb(var(--color-warning)); box-shadow: 0 20px 40px -12px rgba(0,0,0,.45); font-size: 13px; }
.ds-toast[data-tone="critical"] { border-left-color: rgb(var(--color-critical)); }
.ds-toast p { color: rgb(var(--color-text-secondary)); margin: 4px 0 8px; }
.ds-toast-actions { display: flex; gap: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ds-toast-actions a { color: rgb(var(--color-primary)); }
.ds-toast-actions button { color: rgb(var(--color-text-secondary)); }

.ds-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin-bottom: 20px; border: 1px solid rgb(var(--color-warning) / .35); background: rgb(var(--color-warning) / .08); font-size: 13px; }
.ds-banner-body { display: flex; flex-direction: column; gap: 2px; }
.ds-banner-body span { color: rgb(var(--color-text-secondary)); }
.ds-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ds-banner-actions a { font-weight: 700; color: rgb(var(--color-warning)); }
.ds-banner-actions button { font-size: 18px; color: rgb(var(--color-text-secondary)); }

.ds-notif-list { display: flex; flex-direction: column; }
.ds-notif-item { display: flex; gap: 10px; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid rgb(var(--color-border) / .6); transition: background .15s; }
.ds-notif-item:hover { background: rgb(var(--color-text-primary) / .04); }
.ds-notif-item strong { display: block; font-weight: 600; }
.ds-notif-item small { display: block; color: rgb(var(--color-text-secondary)); font-size: 12px; margin-top: 2px; }
.ds-notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: rgb(var(--color-info)); }
.ds-notif-item[data-tone="critical"] .ds-notif-dot { background: rgb(var(--color-critical)); }
.ds-notif-item[data-tone="warning"] .ds-notif-dot { background: rgb(var(--color-warning)); }
.ds-notif-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: rgb(var(--color-text-secondary)); }

.ds-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 55; max-width: 380px; padding: 14px 16px; background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); font-size: 12.5px; color: rgb(var(--color-text-secondary)); box-shadow: 0 20px 40px -12px rgba(0,0,0,.4); }
.ds-cookie a { color: rgb(var(--color-primary)); text-decoration: underline; }
.ds-cookie button { margin-top: 10px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: #fff; background: rgb(var(--color-primary)); }

.ds-style-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; transition: background .15s, border-color .15s; border: 1px solid transparent; }
.ds-style-swatch { display: flex; flex-shrink: 0; }
.ds-style-swatch i { width: 14px; height: 28px; display: block; }
.ds-style-swatch i:first-child { border-radius: 6px 0 0 6px; }
.ds-style-swatch i:last-child { border-radius: 0 6px 6px 0; }
.ds-style-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-style-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ds-style-name em { font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.ds-style-layout { font-size: 11px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-style-check { font-size: 14px; color: rgb(var(--color-primary)); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   /styles interface gallery — token driven so it re-skins inside every shell
   ========================================================================== */
.ds-gal { max-width: 1200px; margin: 0 auto; padding: 56px 20px 96px; }
.ds-gal-head { max-width: 760px; }
.ds-gal-kicker { font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgb(var(--color-primary)); }
.ds-gal-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; color: rgb(var(--color-text-primary)); margin-top: 12px; }
.ds-gal-lead { margin-top: 18px; font-size: 16px; line-height: 1.65; color: rgb(var(--color-text-secondary)); }
.ds-gal-current { margin-top: 18px; display: inline-flex; gap: 6px; padding: 6px 12px; font-size: 12.5px; color: rgb(var(--color-text-secondary)); border: 1px solid rgb(var(--color-border)); border-radius: 999px; }
.ds-gal-current b { color: rgb(var(--color-text-primary)); }
.ds-gal-grid { display: grid; gap: 22px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ds-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-gal-card { display: flex; flex-direction: column; border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface)); border-radius: 18px; overflow: hidden; transition: border-color .25s, transform .35s var(--ease-out), box-shadow .35s; }
.ds-gal-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.55); border-color: rgb(var(--color-primary) / .45); }
.ds-gal-card.is-current { border-color: rgb(var(--color-primary)); box-shadow: 0 0 0 1px rgb(var(--color-primary)); }
.ds-gal-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ds-gal-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ds-gal-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--color-text-secondary)); }
.ds-gal-name { font-family: var(--font-display), var(--font-sans), sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--color-text-primary)); margin-top: 4px; }
.ds-gal-sw { display: flex; flex-shrink: 0; }
.ds-gal-sw i { width: 18px; height: 18px; border-radius: 50%; margin-left: -5px; box-shadow: 0 0 0 2px rgb(var(--color-surface)); }
.ds-gal-pitch { margin-top: 10px; font-size: 14px; line-height: 1.6; color: rgb(var(--color-text-secondary)); }
.ds-gal-specs { margin-top: 16px; display: grid; gap: 0; border-top: 1px solid rgb(var(--color-border)); }
.ds-gal-specs > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgb(var(--color-border) / .6); font-size: 13px; }
.ds-gal-specs dt { color: rgb(var(--color-text-secondary)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
.ds-gal-specs dd { color: rgb(var(--color-text-primary)); }
.ds-gal-palettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: rgb(var(--color-text-secondary)); }
.ds-gal-palettes button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgb(var(--color-border)); border-radius: 999px; color: rgb(var(--color-text-primary)); }
.ds-gal-palettes button.is-on { border-color: rgb(var(--color-primary)); }
.ds-gal-palettes i { width: 10px; height: 10px; border-radius: 50%; }
.ds-gal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.ds-gal-use { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 700; color: rgb(var(--color-ink)); background: rgb(var(--color-primary)); border-radius: 10px; transition: filter .2s, transform .2s; }
.ds-gal-use:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.ds-gal-use:disabled { background: transparent; color: rgb(var(--color-primary)); border: 1px solid rgb(var(--color-primary) / .5); cursor: default; }
.ds-gal-preview { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font-size: 13px; font-weight: 600; color: rgb(var(--color-text-primary)); border: 1px solid rgb(var(--color-border)); border-radius: 10px; transition: border-color .2s; }
.ds-gal-preview:hover { border-color: rgb(var(--color-primary)); }
.ds-gal-compare { margin-top: 56px; padding: 28px; border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface)); border-radius: 18px; }
.ds-gal-compare table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.ds-gal-compare th, .ds-gal-compare td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid rgb(var(--color-border) / .7); }
.ds-gal-compare thead th { font-size: 12px; font-weight: 700; color: rgb(var(--color-primary)); }
.ds-gal-compare tbody th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--color-text-secondary)); font-weight: 600; width: 110px; }
.ds-gal-compare td { color: rgb(var(--color-text-primary)); }
.ds-gal-note { margin-top: 16px; font-size: 12.5px; color: rgb(var(--color-text-secondary)); }
.ds-gal-note code { font-family: var(--font-mono), monospace; padding: 1px 6px; border: 1px solid rgb(var(--color-border)); border-radius: 4px; }

/* Wireframes: each draws the real structural skeleton of its interface */
.ds-wf { position: relative; height: 230px; background: var(--c0); overflow: hidden; border-bottom: 1px solid rgb(var(--color-border)); }
.ds-wf i, .ds-wf b, .ds-wf em { position: absolute; display: block; font-style: normal; }
.ds-wf b { position: relative; }
.ds-gal-card:hover .ds-wf > i { transition: transform .6s var(--ease-out); }
/* hostinger */
.ds-wf-hostinger .wf-strip { inset: 0 0 auto 0; height: 16px; background: var(--c3); }
.ds-wf-hostinger .wf-side { left: 0; top: 16px; bottom: 0; width: 22%; background: var(--c1); border-right: 1px solid #E5E3F5; padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; }
.ds-wf-hostinger .wf-side b { height: 8px; border-radius: 4px; background: #E9E6FB; }
.ds-wf-hostinger .wf-side b:nth-child(2) { background: var(--c2); opacity: .85; }
.ds-wf-hostinger .wf-top { left: 22%; right: 0; top: 16px; height: 30px; background: var(--c1); border-bottom: 1px solid #E5E3F5; }
.ds-wf-hostinger .wf-cards { left: calc(22% + 16px); right: 16px; top: 62px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ds-wf-hostinger .wf-cards b { background: var(--c1); border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(47,28,106,.25); }
.ds-wf-hostinger .wf-cards b.wide { grid-column: span 3; background: linear-gradient(90deg, var(--c2), #8C6CFF); }
.ds-gal-card:hover .ds-wf-hostinger .wf-cards { transform: translateY(-3px); }
/* webvetted */
.ds-wf-webvetted { background-image: linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px); background-size: 16px 16px; }
.ds-wf-webvetted .wf-strip { inset: 0 0 auto 0; height: 10px; background: var(--c3); }
.ds-wf-webvetted .wf-head { left: 0; right: 0; top: 10px; height: 30px; border-bottom: 1px solid #26304E; }
.ds-wf-webvetted .wf-tabs { left: 16px; right: 16px; top: 46px; height: 18px; display: flex; gap: 4px; }
.ds-wf-webvetted .wf-tabs b { width: 54px; height: 18px; background: #172040; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.ds-wf-webvetted .wf-tabs b.on { background: var(--c1); box-shadow: inset 0 2px 0 var(--c3); }
.ds-wf-webvetted .wf-sheet { left: 16px; right: 31%; top: 64px; bottom: 14px; background: var(--c1); border: 1px solid #26304E; border-top: 2px solid var(--c3); padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.ds-wf-webvetted .wf-sheet b { height: 7px; background: #26304E; }
.ds-wf-webvetted .wf-sheet b:first-child { width: 60%; height: 12px; background: #3A4570; }
.ds-wf-webvetted .wf-sheet b.short { width: 40%; }
.ds-wf-webvetted .wf-sheet em { right: 14px; bottom: 14px; padding: 4px 8px; border: 2px double var(--c3); color: var(--c3); font: 700 10px/1 monospace; letter-spacing: .14em; transform: rotate(-10deg); }
.ds-wf-webvetted .wf-rail { right: 16px; width: calc(31% - 28px); top: 64px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.ds-wf-webvetted .wf-rail b { flex: 1; background: #10172C; border: 1px dashed #26304E; }
.ds-gal-card:hover .ds-wf-webvetted .wf-sheet em { transform: rotate(-14deg) scale(1.1); }
/* fingerprint */
.ds-wf-fingerprint { background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }
.ds-wf-fingerprint .wf-bar { inset: 0 0 auto 0; height: 16px; background: var(--c1); border-bottom: 1px solid #202A25; display: flex; gap: 3px; padding: 4px 6px; }
.ds-wf-fingerprint .wf-bar b { width: 34px; height: 8px; background: #1F2A24; }
.ds-wf-fingerprint .wf-bar b.on { background: #D7F5E4; }
.ds-wf-fingerprint .wf-bar b:first-child { background: var(--c2); }
.ds-wf-fingerprint .wf-tree { left: 0; top: 16px; bottom: 14px; width: 24%; border-right: 1px solid #202A25; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.ds-wf-fingerprint .wf-tree b { height: 6px; width: 80%; background: #1F2A24; margin-left: 10px; }
.ds-wf-fingerprint .wf-tree b:nth-child(odd) { margin-left: 0; width: 60%; background: rgba(255,176,0,.45); }
.ds-wf-fingerprint .wf-tree b.on { background: var(--c2); width: 90%; margin-left: 10px; }
.ds-wf-fingerprint .wf-pane { left: calc(24% + 14px); right: 14px; top: 30px; bottom: 28px; border: 1px solid #202A25; padding: 26px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.ds-wf-fingerprint .wf-pane::before { content: '┌─ status ─────────'; position: absolute; top: 4px; left: 6px; font: 9px monospace; color: var(--c2); }
.ds-wf-fingerprint .wf-pane b { height: 6px; width: 70%; background: #1F2A24; }
.ds-wf-fingerprint .wf-pane b.g { width: 45%; background: repeating-linear-gradient(90deg, var(--c2) 0 5px, transparent 5px 7px); }
.ds-wf-fingerprint .wf-pane b.a { width: 62%; background: repeating-linear-gradient(90deg, var(--c3) 0 5px, transparent 5px 7px); }
.ds-wf-fingerprint .wf-status { inset: auto 0 0 0; height: 14px; background: var(--c1); border-top: 1px solid #202A25; box-shadow: inset 44px 0 0 var(--c2); }
.ds-gal-card:hover .ds-wf-fingerprint .wf-pane b.g { width: 75%; transition: width .8s var(--ease-out); }
/* horus */
.ds-wf-horus { background: radial-gradient(400px 200px at 50% 0%, rgba(196,174,146,.14), transparent 70%), var(--c0); }
.ds-wf-horus .wf-capsule { left: 50%; top: 12px; width: 62%; height: 20px; transform: translateX(-50%); border-radius: 999px; background: rgba(18,18,21,.9); border: 1px solid rgba(196,174,146,.2); }
.ds-wf-horus .wf-ring { left: 50%; top: 46px; width: 96px; height: 96px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(196,174,146,.15); background: conic-gradient(var(--c2) 0 58%, transparent 58%); -webkit-mask: radial-gradient(circle, transparent 44px, #000 45px); mask: radial-gradient(circle, transparent 44px, #000 45px); }
.ds-wf-horus .wf-bento { left: 14%; right: 14%; top: 152px; height: 34px; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; }
.ds-wf-horus .wf-bento b { border-radius: 12px; background: var(--c1); border: 1px solid rgba(196,174,146,.14); }
.ds-wf-horus .wf-dock { left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 5px; padding: 5px 7px; border-radius: 12px; background: rgba(18,18,21,.9); border: 1px solid rgba(196,174,146,.2); }
.ds-wf-horus .wf-dock b { width: 14px; height: 14px; border-radius: 5px; background: #2A2723; transition: transform .3s var(--ease-out); transform-origin: bottom; }
.ds-wf-horus .wf-dock b.on { background: linear-gradient(160deg, var(--c3), var(--c2)); }
.ds-gal-card:hover .ds-wf-horus .wf-dock b:nth-child(2), .ds-gal-card:hover .ds-wf-horus .wf-dock b:nth-child(4) { transform: scale(1.25); }
.ds-gal-card:hover .ds-wf-horus .wf-dock b.on { transform: scale(1.5); }
.ds-gal-card:hover .ds-wf-horus .wf-ring { transform: translateX(-50%) rotate(40deg); transition: transform 1.2s var(--ease-out); }
/* classic */
.ds-wf-classic { background: radial-gradient(300px 200px at 80% 0%, rgba(37,99,235,.25), transparent 70%), var(--c0); }
.ds-wf-classic .wf-nav { left: 12px; right: 12px; top: 10px; height: 24px; border-radius: 10px; background: rgba(17,24,39,.8); border: 1px solid rgba(255,255,255,.06); }
.ds-wf-classic .wf-side { left: 12px; top: 44px; bottom: 12px; width: 22%; border-radius: 14px; background: rgba(17,24,39,.8); border: 1px solid rgba(255,255,255,.06); }
.ds-wf-classic .wf-panels { left: calc(22% + 24px); right: 12px; top: 44px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-wf-classic .wf-panels b { border-radius: 14px; background: rgba(17,24,39,.75); border: 1px solid rgba(255,255,255,.06); }
.ds-wf-classic .wf-panels b.wide { grid-column: span 2; background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(56,189,248,.15)); }

/* Settings → interface picker */
.ds-set-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-background) / .5); border-radius: 14px; transition: border-color .2s, transform .25s var(--ease-out); }
.ds-set-card:hover { border-color: rgb(var(--color-primary) / .5); transform: translateY(-2px); }
.ds-set-card.is-current { border-color: rgb(var(--color-primary)); box-shadow: 0 0 0 1px rgb(var(--color-primary)); }
.ds-set-sw { display: flex; height: 36px; border-radius: 8px; overflow: hidden; }
.ds-set-sw i { flex: 1; }
.ds-set-use { height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 700; border-radius: 8px; color: rgb(var(--color-ink)); background: rgb(var(--color-primary)); }
.ds-set-use:disabled { background: transparent; color: rgb(var(--color-primary)); border: 1px solid rgb(var(--color-primary) / .5); }
.ds-set-prev { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12.5px; font-weight: 600; border-radius: 8px; border: 1px solid rgb(var(--color-border)); color: rgb(var(--color-text-primary)); }
.ds-set-prev:hover { border-color: rgb(var(--color-primary)); }
.ds-set-pal { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(var(--color-border)); color: rgb(var(--color-text-secondary)); }
.ds-set-pal.is-on { border-color: rgb(var(--color-primary)); color: rgb(var(--color-text-primary)); }

/* Auth pages inside shell auth frames: the frame supplies the title */
.ds-auth-dup { display: none; }
[data-bp]:not([data-bp="classic"]) .ds-auth-inner :is(.w-16.h-16, .w-20.h-20) { display: none; }