/* ==========================================================================
   STRUCTURAL FAMILIES — every style of App\Platform\Themes belongs to one family (soft / glass / flat / bold);
   the family lists below must match Themes::families(). Colours/tokens come from theme-tokens.css (generated).
   soft  = default soft-3D system in soft.css (nothing here)
   glass = translucent frosted cards over a living brand-colour field
   flat  = minimal: plain cards, hairlines, no 3D shadows or gloss, solid brand colour
   bold  = high contrast, larger type, solid colour blocks with hard offset shadows
   Most of the work is done by re-pointing soft.css tokens (--e*, --in*, --edge, --gloss, --surface…);
   selectors carry [data-preset][data-theme] so they outrank soft.css (:root[data-theme]).
   ========================================================================== */

/* ============================== GLASS ============================== */
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"])[data-theme] {
  --g-fill: rgba(255, 255, 255, .5); --g-fill-2: rgba(255, 255, 255, .7); --g-line: rgba(255, 255, 255, .65); --g-blur: blur(22px) saturate(180%);
  --surface: var(--g-fill); --surface-in: rgba(255, 255, 255, .35);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4);
  --e1: 0 4px 12px -6px rgba(var(--b-deep-rgb), .18);
  --e2: 0 12px 30px -16px rgba(var(--b-deep-rgb), .28);
  --e3: 0 24px 50px -20px rgba(var(--b-deep-rgb), .35);
  --in1: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 1px 3px rgba(0, 0, 0, .06);
  --in2: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 2px 6px rgba(0, 0, 0, .07);
  --bar: rgba(255, 255, 255, .45);
}
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"])[data-theme="dark"] {
  --g-fill: rgba(40, 42, 54, .48); --g-fill-2: rgba(48, 50, 64, .7); --g-line: rgba(255, 255, 255, .14);
  --surface-in: rgba(0, 0, 0, .22);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --e1: 0 4px 12px -6px rgba(0, 0, 0, .5); --e2: 0 12px 30px -14px rgba(0, 0, 0, .65); --e3: 0 24px 50px -18px rgba(0, 0, 0, .75);
  --in1: inset 0 0 0 1px rgba(255, 255, 255, .07); --in2: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 2px 6px rgba(0, 0, 0, .3);
  --bar: rgba(30, 32, 42, .5);
}
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) body::before { opacity: 1;
  background: radial-gradient(55vmax 45vmax at 105% -5%, rgba(var(--blob-rgb, var(--b-tint-rgb)), .42), transparent 62%),
              radial-gradient(50vmax 45vmax at -10% 40%, rgba(var(--blob-rgb, var(--b-accent-rgb)), .34), transparent 60%),
              radial-gradient(60vmax 50vmax at 70% 110%, rgba(var(--blob-rgb, var(--b-tint-2-rgb)), .3), transparent 62%) !important; }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"])[data-theme="dark"] body::before { opacity: .75; }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) :is(.list, .card, .kpi, .form-list, .mini-card, .tl-card, .table-wrap, .banner, .ai-card, .act-card, .lb-card, .guest-card, .ai-action, .rail, .toast, .tile, .avatar, .chip, .badge, .me-pill, .platform, .appbar .icon-btn, .back-btn, .sheet-head .x .icon-btn, .btn.tinted, .btn.gray, .lang-pick label) {
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) :is(.tile, .avatar) { background: var(--g-fill-2) !important; }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) dialog.sheet { background: var(--g-fill-2); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) .tabbar { background: var(--g-fill) !important; -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  box-shadow: 0 18px 40px -16px rgba(var(--b-deep-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px var(--g-line) !important; }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) .tab { color: var(--label-2); }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) .tab.on { color: var(--b-on); }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) .hero { box-shadow: 0 24px 40px -22px rgba(var(--b-tint-2-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .28) !important; }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) .hero::before { background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 60%); filter: blur(10px); animation: none; }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) .btn { box-shadow: 0 10px 24px -12px rgba(var(--b-tint-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .25); }
:is(:root, .brand-scope):is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"]) :is(.input-solo, .search input, .stepper) { background: var(--surface-in); }

/* ============================== FLAT ============================== */
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"])[data-theme] {
  --surface: var(--s-top); --surface-in: var(--fill);
  --edge: 0 0 0 1px var(--sep);
  --e1: 0 0 0 0 transparent;
  --e2: 0 1px 2px rgba(16, 24, 40, .05);
  --e3: 0 10px 28px -14px rgba(16, 24, 40, .22);
  --in1: inset 0 0 0 1px var(--sep); --in2: inset 0 0 0 1px var(--sep);
  --gloss: 0 0 0 0 transparent; --o-glow: 0 0 0 0 transparent;
  --orange: var(--b-tint); --orb: var(--b-tint);
}
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"])[data-theme="light"] { --s-top: #fff; --s-bot: #fff; --sep: rgba(32, 36, 45, .1); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"])[data-theme="dark"] { --sep: rgba(255, 255, 255, .1); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) body::before { display: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .btn::after, :is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .hero::before, :is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .hero::after,
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) :is(.punch-wrap, .ai-head)::before, :is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .tab-lens::after { display: none; animation: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) :is(.fab, .ai-orb, .ai-btn, .auth .logo, .guest-card .logo) { animation: none !important; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .hero { background: var(--b-tint) !important; box-shadow: none !important; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) :is(.tile, .avatar) { background: var(--tint-soft) !important; box-shadow: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .app-icon .tile { box-shadow: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .btn { box-shadow: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .btn:active { box-shadow: none; filter: brightness(.94); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .btn.green { background: #18a65a; } :is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .btn.red { background: #e3352a; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) :is(.btn.tinted, .btn.gray, .btn.danger-tinted) { background: var(--tint-soft); box-shadow: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .btn.gray { background: var(--fill-2); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .tabbar { background: var(--s-top) !important; box-shadow: 0 0 0 1px var(--sep), 0 10px 24px -16px rgba(16, 24, 40, .3) !important; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .tab { color: var(--label-2); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .tab.on { color: var(--b-on); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .tab-lens { box-shadow: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .fab { box-shadow: 0 8px 18px -8px rgba(var(--b-tint-rgb), .6); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) :is(.punch, .logo, .rail .brand .logo) { box-shadow: 0 0 0 12px var(--tint-soft) !important; background: var(--b-tint) !important; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .ring { filter: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .badge { box-shadow: none; background: var(--fill); }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .switch input:checked + i { box-shadow: none; }
:is(:root, .brand-scope):is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"]) .appbar.scrolled { box-shadow: 0 1px 0 var(--sep); }

/* ============================== BOLD ============================== */
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"])[data-theme] {
  --bd-line: #111318;
  --surface: var(--s-top); --surface-in: var(--s-top);
  --edge: inset 0 0 0 2px var(--bd-line);
  --e1: 0 0 0 0 transparent;
  --e2: 4px 4px 0 var(--bd-line);
  --e3: 6px 6px 0 var(--bd-line);
  --in1: inset 0 0 0 2px var(--bd-line); --in2: inset 0 0 0 2px var(--bd-line);
  --gloss: 0 0 0 0 transparent; --o-glow: 3px 3px 0 var(--bd-line);
  --orange: var(--b-tint); --orb: var(--b-tint);
  --label: #08090c; --label-2: #3a3f4b; --label-3: #6b7180; --sep: rgba(8, 9, 12, .16);
}
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"])[data-theme="light"] { --s-top: #fff; --s-bot: #fff; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"])[data-theme="dark"] { --bd-line: rgba(255, 255, 255, .88); --label: #fff; --label-2: #d3d7df; --label-3: #9aa1ae; --sep: rgba(255, 255, 255, .2); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) body::before, :is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .btn::after, :is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .hero::before, :is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .hero::after,
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tab-lens::after, :is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) :is(.punch-wrap, .ai-head)::before { display: none; animation: none; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) :is(.fab, .ai-orb, .ai-btn) { animation: none !important; }
/* larger, heavier type */
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) body { font-size: 17px; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .page-head h1 { font-size: 36px; font-weight: 900; letter-spacing: -.045em; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .section-title h2, :is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .group-label { font-weight: 900; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .section-title h2 { font-size: 22px; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .row .title { font-size: 17px; font-weight: 800; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .row .sub { font-size: 14.5px; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .kpi .val { font-size: 32px; font-weight: 900; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .hero h2 { font-size: 32px; font-weight: 900; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .btn { font-size: 17px; font-weight: 850; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tab span { font-size: 11.5px; font-weight: 800; }
/* solid colour blocks */
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .hero { background: var(--b-tint) !important; box-shadow: 6px 6px 0 var(--bd-line), inset 0 0 0 2px var(--bd-line) !important; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .kpis > .kpi:nth-child(4n+1) { background: var(--b-tint); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .kpis > .kpi:nth-child(4n+1) :is(.val, .lbl, b, .muted, .sub, span:not(.tile):not(.badge):not(.delta)) { color: var(--b-on) !important; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .kpis > .kpi:nth-child(4n+1) .tile { background: var(--b-on) !important; color: var(--b-tint); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .kpis > .kpi:nth-child(4n+1) :is(.badge, .delta) { color: var(--b-tint) !important; background: var(--b-on) !important; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tile { background: var(--b-tint) !important; color: var(--b-on); box-shadow: inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tile b { color: var(--b-on); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .empty .tile { background: var(--s-top) !important; color: var(--label-3); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .avatar { box-shadow: inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .btn { box-shadow: 3px 3px 0 var(--bd-line), inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--bd-line), inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .btn.green { background: #13a159; } :is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .btn.red { background: #e3352a; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) :is(.btn.tinted, .btn.gray, .btn.danger-tinted) { background: var(--s-top); color: var(--label); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .chip.on { box-shadow: 2px 2px 0 var(--bd-line), inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tabbar { background: var(--b-tint) !important; box-shadow: 5px 5px 0 var(--bd-line), inset 0 0 0 2px var(--bd-line) !important; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tab { color: var(--b-on); opacity: .78; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tab.on { color: var(--b-tint); opacity: 1; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .tab-lens { background: var(--b-on); box-shadow: inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) :is(.punch, .logo, .rail .brand .logo) { background: var(--b-tint) !important; box-shadow: 6px 6px 0 var(--bd-line), inset 0 0 0 3px var(--bd-line) !important; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .fab { box-shadow: 4px 4px 0 var(--bd-line), inset 0 0 0 2px var(--bd-line); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .ring { filter: none; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .badge { box-shadow: inset 0 0 0 1.5px currentColor; }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) .progress i { background: var(--b-tint); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) :is(.input-solo, .search input):focus { box-shadow: inset 0 0 0 2px var(--bd-line), 0 0 0 3px rgba(var(--b-tint-rgb), .5); }
:is(:root, .brand-scope):is([data-preset="bold"],[data-preset="arcade"]) a:not(.btn):not(.row):not(.tab):not(.kpi):not(.chip):focus-visible { outline: 3px solid var(--b-tint); outline-offset: 2px; }

/* ============================== brand logo / monogram (all presets) ============================== */
.brand-logo { width: auto !important; max-width: min(86%, 340px); max-height: 170px; object-fit: contain; }
#splash .brand-logo, #splash img.brand-logo { width: auto; max-width: min(70vw, 360px); max-height: 38vh; }
.rail .brand .brand-logo-rail { width: auto; max-width: 100%; max-height: 90px; display: block; margin: 0 auto; object-fit: contain; }
img.brand-logo { border-radius: 22px; } img.brand-logo-rail { border-radius: 14px; }
.brand-mono { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto 18px; text-align: center; }
.brand-mono-orb { display: grid; place-items: center; width: 104px; height: 104px; border-radius: var(--r-xl, 30px); font-size: 42px; font-weight: 900; letter-spacing: -.04em;
  color: var(--b-on, #fff); background: var(--orb, var(--tint)); box-shadow: var(--o-glow, none), var(--gloss, none); }
.brand-mono b { font-size: 24px; font-weight: 850; letter-spacing: -.03em; color: var(--label); }
.brand-mono-rail { flex-direction: row; gap: 10px; margin: 0; padding: 4px 6px; }
.brand-mono-rail .brand-mono-orb { width: 46px; height: 46px; border-radius: var(--r-sm, 14px); font-size: 19px; flex: none; }
.brand-mono-rail b { font-size: 17px; text-align: start; }
#splash .brand-mono { position: relative; animation: splash-pop 1s cubic-bezier(.34, 1.56, .64, 1) both .1s; }
#splash .brand-mono-orb { width: 132px; height: 132px; font-size: 54px; }
.auth .tagline { text-align: center; margin: -6px 0 14px; color: var(--label-2); font-weight: 650; }
body.has-bg .auth .tagline, body.has-bg .brand-mono b { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }

/* ============================== .brand-scope: a self-contained brand preview (settings page, platform console) ==============================
   <div class="brand-scope" data-theme="light" data-preset="glass" style="<?= Brand::cssVars($b) ?>"> … </div>
   soft.css + presets.css re-resolve every token inside it, so it shows ITS brand whatever the page uses. */
.brand-scope { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--label); border-radius: var(--r-xl); padding: 16px 14px 86px; font-size: 15px; text-align: start; }
.brand-scope::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 50% at 100% 0%, rgba(var(--b-accent-rgb), .14), transparent 60%); }
.brand-scope:is([data-preset="glass"],[data-preset="acrylic"],[data-preset="redsea"],[data-preset="neon"])::before { background: radial-gradient(60% 45% at 100% 0%, rgba(var(--b-tint-rgb), .45), transparent 62%), radial-gradient(55% 45% at 0% 45%, rgba(var(--b-accent-rgb), .36), transparent 60%), radial-gradient(60% 50% at 70% 100%, rgba(var(--b-tint-2-rgb), .3), transparent 62%); }
.brand-scope:is([data-preset="flat"],[data-preset="crisp"],[data-preset="tonal"],[data-preset="nordic"],[data-preset="luxury"],[data-preset="aegean"],[data-preset="sahara"],[data-preset="enterprise"],[data-preset="pastel"],[data-preset="contrast"],[data-preset="editorial"])::before, .brand-scope:is([data-preset="bold"],[data-preset="arcade"])::before { display: none; }
.brand-scope .tabbar { position: absolute; inset-inline: 10px; bottom: 10px; height: 58px; padding: 6px; z-index: 1; border-radius: 30px; max-width: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.brand-scope .tab-lens { inset-inline-start: 6px; width: calc((100% - 12px) / 4); }
.brand-scope .hero { animation: none; margin-bottom: 12px; padding: 16px; }
.brand-scope .hero h2 { font-size: 22px; }
.brand-scope .pv-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.brand-scope .btn { padding: 9px 16px; min-height: 0; font-size: 14px; }
.brand-scope .pv-name { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 850; font-size: 17px; }
.brand-scope .pv-name img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.brand-scope .pv-name .brand-mono-orb { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.brand-scope .tab > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 9.5px; }