/* The five looks. Each has a white and a black version, chosen with data-style and data-theme on <html>.
   The same attributes on any element (the Settings previews) give that element the look too.
   Backdrops are drawn by <div class="bd"> with four <i> layers and one <b> overlay; each look turns on what it needs.
   Sizes inside the backdrop use container units, so a small preview looks like the full page. */

/* ---------- shared white base, so a white preview inside a black page still gets white tokens ---------- */
[data-theme="light"] {
  --bg: #F4F4F5; --panel: #FFFFFF; --panel-2: rgba(0, 0, 0, 0.035);
  --ink: #0B0B0C; --ink-2: #3A3A3E; --muted: #6E6E73;
  --line: rgba(0, 0, 0, 0.07); --line-2: rgba(0, 0, 0, 0.14);
  --win: #0E9F6E; --loss: #DC3545; --warn: #B7791F;
  --accent: #0B0B0C; --accent-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.2); --scrim: rgba(0, 0, 0, 0.3);
  color-scheme: light;
}

/* ---------- backdrop machinery ---------- */
.bd { position: absolute; inset: 0; overflow: hidden; background: var(--bg); container-type: size; isolation: isolate; }
.bd i, .bd b { position: absolute; display: none; pointer-events: none; }
.bd b { inset: 0; }
@keyframes fb-liquid {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50% { border-radius: 58% 42% 36% 64% / 55% 38% 62% 45%; }
  100% { border-radius: 37% 63% 51% 49% / 37% 62% 38% 63%; }
}
@keyframes fb-drift { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(5cqmax, 3cqmax) rotate(28deg) scale(1.07); } }
@keyframes fb-smoke { from { background-position: 0 0, 0 0; } to { background-position: 900px 260px, -1300px 420px; } }
@keyframes fb-sheen { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes fb-haze { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6cqmax, 4cqmax) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .bd i, .bd b { animation: none !important; } }
.look-prev .bd i, .look-prev .bd b { animation: none !important; }

/* Reset per element, so a preview of one look inside a page of another does not inherit the page's surfaces.
   The film grain is shared by several looks. */
[data-style] {
  --card-sheen: none; --card-filter: none; --side-bg: transparent; --side-filter: none;
  --r-lg: 18px; --r: 14px; --gap: 16px;
  --h1: 600 clamp(24px, 2.6vw, 30px)/1.1 var(--f-ui); --h1-track: -0.03em;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =====================================================================
   1. LIQUID GLASS: translucent surfaces with reflections over slow chrome blobs
   ===================================================================== */
[data-style="glass"] { --r-lg: 22px; --r: 16px; }
[data-style="glass"][data-theme="dark"] {
  --bg: #040404; --panel: rgba(22, 22, 24, 0.88);
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.03) 100%);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.02), 0 24px 60px rgba(0, 0, 0, 0.5);
  --card-filter: blur(30px) saturate(150%);
  --side-bg: rgba(255, 255, 255, 0.02); --side-filter: blur(30px) saturate(140%); --side-border: rgba(255, 255, 255, 0.06);
  --blob: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.30) 0, rgba(255, 255, 255, 0) 20%),
          radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0) 32%),
          radial-gradient(circle at 50% 50%, #2B2B2E 0, #151517 55%, #09090A 100%);
  --blob-shadow: inset -2.5cqmax -3.5cqmax 6cqmax rgba(0, 0, 0, 0.65), inset 1.2cqmax 1.6cqmax 3cqmax rgba(255, 255, 255, 0.07);
}
[data-style="glass"][data-theme="light"] {
  --bg: #EDEDEF; --panel: rgba(255, 255, 255, 0.9);
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.4) 100%);
  --card-border: rgba(255, 255, 255, 0.85);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.08);
  --card-filter: blur(30px) saturate(160%);
  --side-bg: rgba(255, 255, 255, 0.35); --side-filter: blur(30px) saturate(150%); --side-border: rgba(255, 255, 255, 0.7);
  --blob: radial-gradient(circle at 30% 26%, #FFFFFF 0, rgba(255, 255, 255, 0) 24%),
          radial-gradient(circle at 50% 52%, #E4E4E7 0, #D2D2D6 62%, #C4C4C9 100%);
  --blob-shadow: inset -2.5cqmax -3.5cqmax 6cqmax rgba(0, 0, 0, 0.10), inset 1.2cqmax 1.6cqmax 3cqmax rgba(255, 255, 255, 0.9);
}
.bd[data-look="glass"] i {
  display: block; background: var(--blob); box-shadow: var(--blob-shadow); filter: blur(0.6cqmax);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: fb-liquid 26s ease-in-out infinite alternate, fb-drift 40s ease-in-out infinite alternate;
}
.bd[data-look="glass"] i:nth-child(1) { width: 54cqmax; height: 54cqmax; left: -16cqmax; top: -14cqmax; }
.bd[data-look="glass"] i:nth-child(2) { width: 40cqmax; height: 40cqmax; right: -12cqmax; top: 34cqh; animation-duration: 32s, 46s; animation-delay: -8s, -12s; }
.bd[data-look="glass"] i:nth-child(3) { width: 26cqmax; height: 26cqmax; left: 34cqw; bottom: -12cqmax; animation-duration: 22s, 34s; animation-delay: -4s, -20s; }
.bd[data-look="glass"] i:nth-child(4) { width: 14cqmax; height: 14cqmax; right: 22cqw; top: 6cqh; animation-duration: 18s, 28s; animation-delay: -11s, -6s; }
.bd[data-look="glass"] b { display: block; background-image: var(--grain); opacity: .6; }
[data-style="glass"] dialog.modal { background: var(--panel); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); }

/* =====================================================================
   2. LIQUID SILK: glossy liquid ribbons flowing slowly across the page
   ===================================================================== */
[data-style="smoke"] { --r-lg: 18px; }
[data-style="smoke"][data-theme="dark"] {
  --bg: #030303; --panel: #0E0E0F;
  --card-bg: rgba(10, 10, 11, 0.5);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 70px rgba(0, 0, 0, 0.55);
  --card-filter: blur(22px) saturate(140%);
  --side-bg: rgba(3, 3, 3, 0.35); --side-filter: blur(22px); --side-border: rgba(255, 255, 255, 0.05);
  --silk-base: #000000; --silk-mid: #1C1C1F; --silk-hi: #B9B9C0; --silk-shadow: rgba(0, 0, 0, 0.85);
}
[data-style="smoke"][data-theme="light"] {
  --bg: #EFEFF1; --panel: #FFFFFF;
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-border: rgba(255, 255, 255, 0.8);
  --card-shadow: inset 0 1px 0 #FFFFFF, 0 24px 60px rgba(0, 0, 0, 0.07);
  --card-filter: blur(22px) saturate(140%);
  --side-bg: rgba(239, 239, 241, 0.45); --side-filter: blur(22px); --side-border: rgba(0, 0, 0, 0.05);
  --silk-base: #FFFFFF; --silk-mid: #D3D3D8; --silk-hi: #FFFFFF; --silk-shadow: rgba(60, 60, 70, 0.22);
}
.bd .silk { display: none; }
.bd[data-look="smoke"] .silk { display: block; position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; }
.bd[data-look="smoke"] .rb { transform-box: fill-box; transform-origin: center; animation: fb-silk 30s ease-in-out infinite alternate; }
.bd[data-look="smoke"] .rb1 { animation-duration: 24s; animation-delay: -6s; }
.bd[data-look="smoke"] .rb2 { animation-duration: 36s; animation-delay: -14s; }
.bd[data-look="smoke"] .rb3 { animation-duration: 28s; animation-delay: -3s; opacity: .7; }
@keyframes fb-silk { from { transform: translate(-2%, 0) scaleY(1); } to { transform: translate(2%, 3%) scaleY(1.14); } }
@media (prefers-reduced-motion: reduce) { .bd[data-look="smoke"] .rb { animation: none; } }
.look-prev .bd[data-look="smoke"] .rb { animation: none; }
.bd[data-look="smoke"] b { display: block; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 45%, var(--bg) 100%), var(--grain); }

/* =====================================================================
   3. OBSIDIAN GLASS: near-solid surfaces, faint highlights, one slow reflection
   ===================================================================== */
[data-style="obsidian"] { --r-lg: 14px; --r: 12px; }
[data-style="obsidian"][data-theme="dark"] {
  --bg: #020202; --panel: #0D0D0E;
  --card-bg: linear-gradient(180deg, #121213 0%, #0A0A0B 100%);
  --card-sheen: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0) 62%);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(0, 0, 0, 0.9), 0 30px 60px rgba(0, 0, 0, 0.6);
  --side-bg: linear-gradient(180deg, #0B0B0C, #050505); --side-border: rgba(255, 255, 255, 0.05);
  --ob-light: rgba(255, 255, 255, 0.075); --ob-streak: rgba(255, 255, 255, 0.025);
}
[data-style="obsidian"][data-theme="light"] {
  --bg: #E8E8E9; --panel: #FFFFFF;
  --card-bg: linear-gradient(180deg, #FFFFFF 0%, #F6F6F7 100%);
  --card-sheen: linear-gradient(115deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.012) 50%, rgba(0, 0, 0, 0) 62%);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.05), 0 22px 44px rgba(0, 0, 0, 0.07);
  --side-bg: linear-gradient(180deg, #F2F2F3, #E6E6E7); --side-border: rgba(0, 0, 0, 0.06);
  --ob-light: rgba(255, 255, 255, 0.95); --ob-streak: rgba(255, 255, 255, 0.45);
}
.bd[data-look="obsidian"] i:nth-child(1) { display: block; inset: 0; background: radial-gradient(70% 55% at 50% -12%, var(--ob-light), transparent 70%); }
.bd[data-look="obsidian"] i:nth-child(2) { display: block; inset: -50%; background: linear-gradient(115deg, transparent 45%, var(--ob-streak) 50%, transparent 55%); animation: fb-sheen 34s ease-in-out infinite alternate; }
.bd[data-look="obsidian"] b { display: block; background-image: var(--grain); opacity: .45; }

/* =====================================================================
   4. CINEMATIC MINIMALISM: no boxes, big type, a spotlight and a vignette
   ===================================================================== */
[data-style="cinema"] {
  --r-lg: 0px; --gap: 34px;
  --h1: 500 clamp(34px, 4.4vw, 58px)/1 var(--f-ui); --h1-track: -0.05em;
}
[data-style="cinema"][data-theme="dark"] {
  --bg: #000000; --panel: #0B0B0B; --muted: #7A7A7F; --line: rgba(255, 255, 255, 0.08);
  --card-bg: transparent; --card-border: transparent; --card-shadow: none;
  --side-border: transparent;
  --spot: rgba(255, 255, 255, 0.10); --vignette: rgba(0, 0, 0, 0.92);
}
[data-style="cinema"][data-theme="light"] {
  --bg: #FAFAFA; --panel: #FFFFFF; --muted: #8A8A8F; --line: rgba(0, 0, 0, 0.08);
  --card-bg: transparent; --card-border: transparent; --card-shadow: none;
  --side-border: transparent;
  --spot: rgba(255, 255, 255, 1); --vignette: rgba(0, 0, 0, 0.07);
}
.bd[data-look="cinema"] i:nth-child(1) { display: block; inset: 0; background: radial-gradient(55% 60% at 50% -18%, var(--spot), transparent 72%); }
.bd[data-look="cinema"] b { display: block; background: radial-gradient(ellipse 120% 95% at 50% 40%, transparent 52%, var(--vignette) 100%), var(--grain); }
[data-style="cinema"] .panel { border: 0; border-top: 1px solid var(--line-2); padding: 24px 0 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-style="cinema"] .panel.flush { padding: 0; }
[data-style="cinema"] .panel.flush .panel-head { padding: 24px 0 0; }
[data-style="cinema"] .panel.flush .table th:first-child, [data-style="cinema"] .panel.flush .table td:first-child { padding-left: 0; }
[data-style="cinema"] .kpi { padding: 20px 0 0; }
[data-style="cinema"] .kpi .value { font-weight: 500; letter-spacing: -0.045em; }
[data-style="cinema"] .kpi.big .value { font-size: clamp(36px, 4.4vw, 60px); }
[data-style="cinema"] .kpis { gap: 28px; }
[data-style="cinema"] .page-head { margin-bottom: 40px; }
[data-style="cinema"] .panel-head h2, [data-style="cinema"] .panel h2 { font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-style="cinema"] .nav a[aria-current="page"] { background: transparent; }
[data-style="cinema"] .nav a[aria-current="page"] span { border-bottom: 1px solid var(--ink); }
[data-style="cinema"] .insight, [data-style="cinema"] .cal .cell, [data-style="cinema"] .week-strip a { background: transparent; }

/* =====================================================================
   5. ETHEREAL / AMBIENT: haze and fog, soft round frosted cards
   ===================================================================== */
[data-style="ether"] { --r-lg: 28px; --r: 20px; --h1: 400 clamp(28px, 3.2vw, 40px)/1.1 var(--f-ui); --h1-track: -0.035em; }
[data-style="ether"][data-theme="dark"] {
  --bg: #08080A; --panel: rgba(20, 20, 23, 0.9);
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  --card-filter: blur(34px) saturate(120%);
  --side-bg: rgba(255, 255, 255, 0.015); --side-filter: blur(34px); --side-border: rgba(255, 255, 255, 0.04);
  --haze-1: rgba(150, 154, 168, 0.30); --haze-2: rgba(118, 118, 128, 0.26); --haze-3: rgba(172, 166, 182, 0.20); --haze-4: rgba(210, 210, 218, 0.12);
  --fog: rgba(255, 255, 255, 0.05);
}
[data-style="ether"][data-theme="light"] {
  --bg: #ECECEF; --panel: rgba(255, 255, 255, 0.92);
  --card-bg: rgba(255, 255, 255, 0.42);
  --card-border: rgba(255, 255, 255, 0.7);
  --card-shadow: 0 30px 80px rgba(80, 80, 100, 0.08);
  --card-filter: blur(34px) saturate(130%);
  --side-bg: rgba(255, 255, 255, 0.25); --side-filter: blur(34px); --side-border: rgba(255, 255, 255, 0.6);
  --haze-1: rgba(255, 255, 255, 0.95); --haze-2: rgba(212, 214, 224, 0.85); --haze-3: rgba(226, 220, 232, 0.8); --haze-4: rgba(200, 204, 212, 0.7);
  --fog: rgba(255, 255, 255, 0.6);
}
.bd[data-look="ether"] i { display: block; border-radius: 50%; filter: blur(9cqmax); animation: fb-haze 36s ease-in-out infinite alternate; }
.bd[data-look="ether"] i:nth-child(1) { width: 60cqmax; height: 44cqmax; left: -12cqmax; top: -10cqmax; background: var(--haze-1); }
.bd[data-look="ether"] i:nth-child(2) { width: 52cqmax; height: 40cqmax; right: -14cqmax; top: 20cqh; background: var(--haze-2); animation-duration: 44s; animation-delay: -10s; }
.bd[data-look="ether"] i:nth-child(3) { width: 46cqmax; height: 34cqmax; left: 20cqw; bottom: -14cqmax; background: var(--haze-3); animation-duration: 52s; animation-delay: -24s; }
.bd[data-look="ether"] i:nth-child(4) { width: 30cqmax; height: 22cqmax; left: 46cqw; top: 8cqh; background: var(--haze-4); animation-duration: 30s; animation-delay: -6s; }
.bd[data-look="ether"] b { display: block; background: linear-gradient(to top, var(--fog), transparent 45%), var(--grain); }
[data-style="ether"] dialog.modal { background: var(--panel); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
[data-style="ether"] .kpi .value { font-weight: 500; }

/* =====================================================================
   6. MINIMAL SAAS: flat, crisp hairlines, small radius, a dotted grid that fades out
   ===================================================================== */
[data-style="saas"] { --r-lg: 12px; --r: 10px; --h1: 600 clamp(24px, 2.4vw, 30px)/1.15 var(--f-ui); --h1-track: -0.025em; }
[data-style="saas"][data-theme="dark"] {
  --bg: #09090B; --panel: #111113; --muted: #8B8B93;
  --card-bg: #0F0F11;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.5);
  --side-bg: #09090B; --side-border: rgba(255, 255, 255, 0.07);
  --dot: rgba(255, 255, 255, 0.075); --glow: rgba(255, 255, 255, 0.06);
}
[data-style="saas"][data-theme="light"] {
  --bg: #FAFAFA; --panel: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-border: rgba(0, 0, 0, 0.08);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --side-bg: #FAFAFA; --side-border: rgba(0, 0, 0, 0.07);
  --dot: rgba(0, 0, 0, 0.09); --glow: rgba(255, 255, 255, 1);
}
.bd[data-look="saas"] i:nth-child(1) {
  display: block; inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 0%, transparent 100%);
}
.bd[data-look="saas"] i:nth-child(2) { display: block; inset: 0; background: radial-gradient(60% 30% at 50% 0%, var(--glow), transparent 70%); }

/* =====================================================================
   7. LIQUID ARCHITECTURE: flowing contour lines over a structural grid; cards marked at the corners
   ===================================================================== */
[data-style="arch"] {
  --r-lg: 4px; --r: 4px; --gap: 20px;
  --h1: 300 clamp(30px, 3.6vw, 46px)/1.05 var(--f-ui); --h1-track: -0.04em;
}
[data-style="arch"][data-theme="dark"] {
  --bg: #070707; --panel: #0E0E0F;
  --card-bg: rgba(10, 10, 11, 0.74);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  --card-filter: blur(10px);
  --tick: rgba(255, 255, 255, 0.6);
  --side-bg: rgba(7, 7, 7, 0.6); --side-filter: blur(10px); --side-border: rgba(255, 255, 255, 0.07);
  --contour: rgba(255, 255, 255, 0.06); --contour-2: rgba(255, 255, 255, 0.04); --column: rgba(255, 255, 255, 0.03); --mass: rgba(255, 255, 255, 0.05);
}
[data-style="arch"][data-theme="light"] {
  --bg: #F1F1F0; --panel: #FFFFFF;
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(0, 0, 0, 0.08);
  --card-shadow: 0 24px 50px rgba(0, 0, 0, 0.05);
  --card-filter: blur(10px);
  --tick: rgba(0, 0, 0, 0.55);
  --side-bg: rgba(241, 241, 240, 0.7); --side-filter: blur(10px); --side-border: rgba(0, 0, 0, 0.07);
  --contour: rgba(0, 0, 0, 0.075); --contour-2: rgba(0, 0, 0, 0.05); --column: rgba(0, 0, 0, 0.035); --mass: rgba(255, 255, 255, 0.9);
}
[data-style="arch"][data-theme] {
  --card-sheen:
    linear-gradient(var(--tick), var(--tick)) left top / 12px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) left top / 1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / 12px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) right top / 1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / 12px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 12px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) right bottom / 1px 12px no-repeat;
}
@keyframes fb-breathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.06) rotate(1.5deg); } }
.bd[data-look="arch"] i:nth-child(1) {
  display: block; inset: -10%;
  background:
    repeating-radial-gradient(circle at 12% 118%, transparent 0 2.6cqmax, var(--contour) 2.6cqmax calc(2.6cqmax + 1px)),
    repeating-radial-gradient(circle at 108% -14%, transparent 0 3.4cqmax, var(--contour-2) 3.4cqmax calc(3.4cqmax + 1px));
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%, #000 100%);
  mask-image: linear-gradient(160deg, #000 0%, transparent 55%, #000 100%);
  animation: fb-breathe 40s ease-in-out infinite alternate;
}
.bd[data-look="arch"] i:nth-child(2) { display: block; inset: 0; background: repeating-linear-gradient(90deg, var(--column) 0 1px, transparent 1px 12.5%); }
.bd[data-look="arch"] i:nth-child(3) { display: block; inset: 0; background: radial-gradient(ellipse 70% 45% at 72% 62%, var(--mass), transparent 65%); }
.bd[data-look="arch"] b { display: block; background-image: var(--grain); opacity: .5; }
[data-style="arch"] .panel-head h2, [data-style="arch"] .panel h2 { font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
[data-style="arch"] .kpi .value { font-weight: 400; letter-spacing: -0.04em; }
[data-style="arch"] .btn, [data-style="arch"] .input, [data-style="arch"] .seg, [data-style="arch"] .seg button, [data-style="arch"] .seg label { border-radius: 3px; }

/* ---------- look picker in Settings ---------- */
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.look { display: grid; gap: 8px; text-align: left; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink); }
.look-prev { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); }
.look[aria-pressed="true"] .look-prev { outline: 2px solid var(--ink); outline-offset: 3px; }
.look-prev .mini { position: absolute; left: 12%; top: 22%; width: 52%; height: 50%; border-radius: min(var(--r-lg), 12px);
  background: var(--card-sheen), var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-filter); -webkit-backdrop-filter: var(--card-filter); padding: 10px; display: grid; align-content: start; gap: 6px; }
.look-prev .mini i { display: block; height: 4px; border-radius: 4px; background: var(--muted); opacity: .5; width: 40%; }
.look-prev .mini b { display: block; font: 600 15px/1 var(--f-ui); color: var(--win); letter-spacing: -0.03em; }
.look-prev .mini2 { position: absolute; right: 8%; top: 22%; width: 22%; height: 50%; border-radius: min(var(--r-lg), 12px);
  background: var(--card-sheen), var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-filter); -webkit-backdrop-filter: var(--card-filter); }
.look-prev[data-style="cinema"] .mini, .look-prev[data-style="cinema"] .mini2 { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 10px 0 0; }
.look .name { font-weight: 600; }
.look small { color: var(--muted); font-size: 12px; line-height: 1.35; }