.appearance-stage {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  display: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
body.has-appearance-fx .appearance-stage { display: block; }
body.effect-playing .appearance-stage { opacity: 0.18; }
body.sehaj-immerse .appearance-stage { opacity: 0.28; }
body.appearance-sunshine .appearance-stage { z-index: 1; }
body.appearance-sunshine main,
body.appearance-sunshine .site-footer {
  position: relative;
  z-index: 2;
}

/* Path parchment sits above dress FX (canvas is z-index 12). */
.hukam-sheet,
.sehaj-sheet,
.gutka-sheet {
  position: relative;
  z-index: 21;
  isolation: isolate;
}

body.appearance-flowers {
  --ink: #16080c;
  --ink-2: #1c0c12;
  --ink-3: #261018;
  --gold-50: #fff4f7;
  --gold-100: #f8d8e0;
  --gold-200: #ebc0ca;
  --gold-300: #e8a8b8;
  --gold-400: #e090a8;
  --gold-500: #c87088;
  --gold-600: #a85068;
  --gold-700: #7a3848;
  --muted: #c49aa6;
  --accent-rgb: 224, 144, 168;
  --ink-rgb: 22, 8, 12;
  --bg-glow-a: rgba(224, 144, 168, 0.16);
  --bg-glow-b: rgba(212, 175, 55, 0.1);
  --bg-base: linear-gradient(180deg, #1a0a10 0%, #14080c 55%, #0c0508 100%);
  --fx-a: 244, 180, 196;
  --fx-b: 212, 175, 55;
  --fx-c: 255, 232, 236;
}

body.appearance-colors {
  --ink: #0a0818;
  --ink-2: #12102a;
  --ink-3: #1a1834;
  --gold-50: #fff6e8;
  --gold-100: #f0dcc0;
  --gold-200: #e0c898;
  --gold-400: #f0c14a;
  --gold-500: #e0a020;
  --gold-600: #c07a18;
  --gold-700: #8a5810;
  --muted: #b8a888;
  --accent-rgb: 240, 193, 74;
  --ink-rgb: 10, 8, 24;
  --bg-glow-a: rgba(90, 140, 255, 0.16);
  --bg-glow-b: rgba(240, 90, 160, 0.12);
  --bg-base: linear-gradient(180deg, #100c28 0%, #0a0818 50%, #060510 100%);
  --fx-a: 255, 110, 160;
  --fx-b: 90, 200, 255;
  --fx-c: 255, 210, 80;
}

body.appearance-sunshine {
  --ink: #e4c878;
  --ink-2: #d4b05c;
  --ink-3: #c49840;
  --gold-50: #3d2508;
  --gold-100: #4e3010;
  --gold-200: #6a4518;
  --gold-300: #a06a14;
  --gold-400: #c48912;
  --gold-500: #b07810;
  --gold-600: #8a5c0c;
  --gold-700: #6a4408;
  --cream: #f4e4b8;
  --parchment: #ead6a0;
  --muted: #7a5828;
  --accent-rgb: 196, 137, 18;
  --ink-rgb: 228, 200, 120;
  --btn-ink: #3d2508;
  --header-bg: rgba(212, 176, 80, 0.9);
  --nav-bg: rgba(228, 200, 120, 0.96);
  --hero-veil: linear-gradient(180deg, rgba(232, 192, 96, 0.12) 0%, rgba(212, 176, 80, 0.38) 45%, rgba(196, 152, 56, 0.72) 100%);
  --bg-glow-a: rgba(242, 206, 116, 0.18);
  --bg-glow-b: rgba(232, 176, 72, 0.12);
  --bg-base: linear-gradient(180deg, #e8c060 0%, #d4a848 50%, #c09030 100%);
  --fx-a: 242, 206, 116;
  --fx-b: 232, 176, 72;
  --fx-c: 236, 196, 96;
  background:
    radial-gradient(ellipse 5.8rem 2.15rem at 50% 6.5rem, rgba(236, 214, 110, 0.55) 0%, rgba(232, 204, 106, 0.28) 42%, transparent 74%),
    radial-gradient(circle at 50% 6.5rem, #c9a572 0 1.45rem, #c4a06c 2.2rem, #e8cc6a 3.45rem, rgba(232, 204, 106, 0) 6.5rem),
    radial-gradient(circle at 12% 0%, var(--bg-glow-a), transparent 38%),
    radial-gradient(circle at 90% 80%, var(--bg-glow-b), transparent 40%),
    var(--bg-base);
  background-attachment: fixed;
}
body.appearance-custom {
  background:
    radial-gradient(circle at 12% 0%, var(--bg-glow-a), transparent 38%),
    radial-gradient(circle at 90% 80%, var(--bg-glow-b), transparent 40%),
    var(--bg-base);
  background-attachment: fixed;
}
body.appearance-custom .hero {
  background: var(--hero-veil);
}

body.appearance-sunshine .hero {
  background: transparent;
}
body.appearance-sunshine .hero-inner {
  position: relative;
  z-index: 1;
}

body.appearance-fireworks {
  --ink: #050510;
  --ink-2: #0c0c1c;
  --ink-3: #141428;
  --gold-50: #fff4d8;
  --gold-100: #f0d8a0;
  --gold-200: #e0c078;
  --gold-400: #ffd36a;
  --gold-500: #f0a830;
  --gold-600: #d07020;
  --gold-700: #8a4010;
  --muted: #b8a070;
  --accent-rgb: 255, 211, 106;
  --ink-rgb: 5, 5, 16;
  --bg-glow-a: rgba(255, 80, 120, 0.14);
  --bg-glow-b: rgba(80, 140, 255, 0.12);
  --bg-base: linear-gradient(180deg, #08081a 0%, #050510 55%, #020208 100%);
  --fx-a: 255, 90, 120;
  --fx-b: 255, 211, 106;
  --fx-c: 120, 180, 255;
}

body.appearance-calm {
  --ink: #0c1414;
  --ink-2: #121c1c;
  --ink-3: #1a2624;
  --gold-50: #eef4ea;
  --gold-100: #d4e0cc;
  --gold-200: #b8c9a8;
  --gold-300: #a8bc98;
  --gold-400: #9cb890;
  --gold-500: #7a9a70;
  --gold-600: #5c7854;
  --gold-700: #405838;
  --muted: #8aa090;
  --accent-rgb: 156, 184, 144;
  --ink-rgb: 12, 20, 20;
  --bg-glow-a: rgba(156, 184, 144, 0.14);
  --bg-glow-b: rgba(120, 160, 170, 0.1);
  --bg-base: linear-gradient(180deg, #101c1c 0%, #0c1414 55%, #081010 100%);
  --fx-a: 180, 210, 200;
  --fx-b: 156, 184, 144;
  --fx-c: 220, 230, 210;
}

body.appearance-golden {
  --ink: #120e04;
  --ink-2: #1a1408;
  --ink-3: #241c0c;
  --gold-50: #fff6d8;
  --gold-100: #ffe8a8;
  --gold-200: #f0d060;
  --gold-300: #e8c040;
  --gold-400: #e0b830;
  --gold-500: #c9a227;
  --gold-600: #b8860b;
  --gold-700: #8a6a12;
  --muted: #c8b070;
  --accent-rgb: 224, 184, 48;
  --ink-rgb: 18, 14, 4;
  --bg-glow-a: rgba(224, 184, 48, 0.22);
  --bg-glow-b: rgba(255, 220, 100, 0.14);
  --bg-base: linear-gradient(180deg, #1c1608 0%, #120e04 55%, #0c0a04 100%);
  --fx-a: 255, 236, 160;
  --fx-b: 224, 184, 48;
  --fx-c: 255, 248, 220;
}

body.appearance-silver {
  --ink: #0c0e12;
  --ink-2: #14181e;
  --ink-3: #1c222a;
  --gold-50: #f4f7fb;
  --gold-100: #dce3ee;
  --gold-200: #c5cedd;
  --gold-300: #b0bcc8;
  --gold-400: #c0c8d4;
  --gold-500: #a8b2c2;
  --gold-600: #8e99ab;
  --gold-700: #6d7788;
  --muted: #9aa6b8;
  --accent-rgb: 192, 200, 212;
  --ink-rgb: 12, 14, 18;
  --btn-ink: #12151c;
  --btn-face: #e8eef6;
  --btn-border: #f4f7fb;
  --bg-glow-a: rgba(192, 200, 212, 0.14);
  --bg-glow-b: rgba(160, 180, 210, 0.08);
  --bg-base: linear-gradient(180deg, #14181e 0%, #0c0e12 55%, #08090c 100%);
  --fx-a: 230, 236, 244;
  --fx-b: 192, 200, 212;
  --fx-c: 255, 255, 255;
}

body.appearance-diamonds {
  --ink: #070b16;
  --ink-2: #0c1222;
  --ink-3: #141c30;
  --gold-50: #f3f8ff;
  --gold-100: #d8e6f8;
  --gold-200: #b8d4f0;
  --gold-300: #9cc4e8;
  --gold-400: #a8d0f4;
  --gold-500: #7aa8d8;
  --gold-600: #5880b0;
  --gold-700: #3a5878;
  --muted: #8aa8c8;
  --accent-rgb: 168, 208, 244;
  --ink-rgb: 7, 11, 22;
  --btn-ink: #071018;
  --btn-face: #e8f4ff;
  --btn-border: #f3f8ff;
  --bg-glow-a: rgba(180, 220, 255, 0.16);
  --bg-glow-b: rgba(120, 160, 220, 0.1);
  --bg-base: linear-gradient(180deg, #0c1224 0%, #070b16 55%, #04060e 100%);
  --fx-a: 230, 245, 255;
  --fx-b: 168, 208, 244;
  --fx-c: 255, 255, 255;
}

body.appearance-kesari {
  --ink: #1a0c04;
  --ink-2: #241208;
  --ink-3: #30180c;
  --gold-50: #fff4dc;
  --gold-100: #f8dca0;
  --gold-200: #f0c060;
  --gold-400: #e8a020;
  --gold-500: #d08018;
  --gold-600: #b06010;
  --gold-700: #7a4008;
  --muted: #c8a060;
  --accent-rgb: 232, 160, 32;
  --ink-rgb: 26, 12, 4;
  --bg-glow-a: rgba(232, 160, 32, 0.2);
  --bg-glow-b: rgba(200, 80, 20, 0.12);
  --bg-base: linear-gradient(180deg, #241208 0%, #1a0c04 55%, #100804 100%);
  --fx-a: 255, 200, 80;
  --fx-b: 232, 160, 32;
  --fx-c: 255, 232, 180;
}

body.appearance-phulkari {
  --ink: #1a0810;
  --ink-2: #240c18;
  --ink-3: #301420;
  --gold-50: #fff4e0;
  --gold-100: #f0d8a8;
  --gold-200: #e8c070;
  --gold-400: #e8b84a;
  --gold-500: #d09030;
  --gold-600: #b06028;
  --gold-700: #7a3818;
  --muted: #c8a078;
  --accent-rgb: 232, 184, 74;
  --ink-rgb: 26, 8, 16;
  --bg-glow-a: rgba(232, 80, 120, 0.16);
  --bg-glow-b: rgba(80, 170, 90, 0.1);
  --bg-base: linear-gradient(180deg, #240c18 0%, #1a0810 55%, #100608 100%);
  --fx-a: 232, 80, 120;
  --fx-b: 80, 170, 90;
  --fx-c: 232, 184, 74;
}

body.appearance-marigold {
  --ink: #160a04;
  --ink-2: #1e1006;
  --ink-3: #2a180a;
  --gold-50: #fff4d8;
  --gold-100: #f8d890;
  --gold-200: #f0c050;
  --gold-400: #f0a020;
  --gold-500: #d88018;
  --gold-600: #b06010;
  --gold-700: #7a4008;
  --muted: #c89850;
  --accent-rgb: 240, 160, 32;
  --ink-rgb: 22, 10, 4;
  --bg-glow-a: rgba(240, 160, 32, 0.2);
  --bg-glow-b: rgba(220, 80, 20, 0.1);
  --bg-base: linear-gradient(180deg, #1e1006 0%, #160a04 55%, #0e0702 100%);
  --fx-a: 255, 180, 40;
  --fx-b: 240, 120, 20;
  --fx-c: 255, 220, 100;
}

body.appearance-lotus {
  --ink: #160814;
  --ink-2: #1e0c1c;
  --ink-3: #2a1428;
  --gold-50: #fff0f4;
  --gold-100: #f0d0dc;
  --gold-200: #e0b0c4;
  --gold-400: #e8b0c8;
  --gold-500: #c888a0;
  --gold-600: #a06080;
  --gold-700: #70405c;
  --muted: #c8a0b0;
  --accent-rgb: 232, 176, 200;
  --ink-rgb: 22, 8, 20;
  --bg-glow-a: rgba(232, 176, 200, 0.16);
  --bg-glow-b: rgba(255, 210, 220, 0.08);
  --bg-base: linear-gradient(180deg, #1e0c1c 0%, #160814 55%, #0e060c 100%);
  --fx-a: 255, 210, 220;
  --fx-b: 232, 160, 184;
  --fx-c: 255, 240, 244;
}

body.appearance-diya {
  --ink: #120804;
  --ink-2: #1a0e06;
  --ink-3: #26160a;
  --gold-50: #fff4d4;
  --gold-100: #f8d890;
  --gold-200: #f0c060;
  --gold-400: #f0b040;
  --gold-500: #d88820;
  --gold-600: #b06010;
  --gold-700: #7a4008;
  --muted: #c89858;
  --accent-rgb: 240, 176, 64;
  --ink-rgb: 18, 8, 4;
  --bg-glow-a: rgba(255, 180, 60, 0.22);
  --bg-glow-b: rgba(200, 80, 20, 0.12);
  --bg-base: linear-gradient(180deg, #1a0e06 0%, #120804 55%, #0a0502 100%);
  --fx-a: 255, 220, 120;
  --fx-b: 255, 140, 40;
  --fx-c: 255, 200, 80;
}

body.appearance-nagara {
  --ink: #140606;
  --ink-2: #1c0a0a;
  --ink-3: #2a1010;
  --gold-50: #fff0d8;
  --gold-100: #f0d8a0;
  --gold-200: #e0c070;
  --gold-400: #d4af37;
  --gold-500: #c09020;
  --gold-600: #a06018;
  --gold-700: #702810;
  --muted: #c8a070;
  --accent-rgb: 212, 175, 55;
  --ink-rgb: 20, 6, 6;
  --bg-glow-a: rgba(180, 40, 40, 0.18);
  --bg-glow-b: rgba(212, 175, 55, 0.14);
  --bg-base: linear-gradient(180deg, #1c0a0a 0%, #140606 55%, #0c0404 100%);
  --fx-a: 212, 175, 55;
  --fx-b: 180, 40, 40;
  --fx-c: 255, 220, 160;
}

body.appearance-pearl {
  --ink: #f7f4ee;
  --ink-2: #efeae0;
  --ink-3: #e6dfd2;
  --gold-50: #2c2830;
  --gold-100: #3a3640;
  --gold-200: #524c58;
  --gold-300: #6a6070;
  --gold-400: #9a8870;
  --gold-500: #7a6a58;
  --gold-600: #5c5044;
  --gold-700: #403830;
  --cream: #fbf8f2;
  --parchment: #f3eee6;
  --muted: #7a7068;
  --accent-rgb: 176, 160, 140;
  --ink-rgb: 247, 244, 238;
  --btn-ink: #2c2830;
  --header-bg: rgba(247, 244, 238, 0.92);
  --nav-bg: rgba(255, 252, 248, 0.97);
  --hero-veil: linear-gradient(180deg, rgba(255, 252, 248, 0.35) 0%, rgba(247, 244, 238, 0.7) 50%, rgba(230, 223, 210, 0.92) 100%);
  --bg-glow-a: rgba(220, 210, 200, 0.5);
  --bg-glow-b: rgba(180, 170, 160, 0.16);
  --bg-base: linear-gradient(180deg, #fbf8f2 0%, #efeae0 55%, #e4dccf 100%);
  --fx-a: 255, 252, 248;
  --fx-b: 200, 188, 172;
  --fx-c: 232, 224, 214;
}

body.appearance-emerald {
  --ink: #06120e;
  --ink-2: #0c1c16;
  --ink-3: #142820;
  --gold-50: #e8fff4;
  --gold-100: #c4ead8;
  --gold-200: #9cd8bc;
  --gold-400: #6ec89a;
  --gold-500: #48a878;
  --gold-600: #2c8060;
  --gold-700: #1c5844;
  --muted: #88b8a0;
  --accent-rgb: 110, 200, 154;
  --ink-rgb: 6, 18, 14;
  --btn-ink: #06140e;
  --btn-face: #c8f0dc;
  --btn-border: #e8fff4;
  --bg-glow-a: rgba(110, 200, 154, 0.16);
  --bg-glow-b: rgba(40, 120, 90, 0.1);
  --bg-base: linear-gradient(180deg, #0c1c16 0%, #06120e 55%, #040c08 100%);
  --fx-a: 180, 240, 210;
  --fx-b: 110, 200, 154;
  --fx-c: 232, 255, 244;
}

body.appearance-rosewood {
  --ink: #14080a;
  --ink-2: #1c0c10;
  --ink-3: #2a1418;
  --gold-50: #f8ece0;
  --gold-100: #e8d0bc;
  --gold-200: #d4a070;
  --gold-400: #c89068;
  --gold-500: #a06048;
  --gold-600: #804030;
  --gold-700: #582820;
  --muted: #b89080;
  --accent-rgb: 200, 144, 104;
  --ink-rgb: 20, 8, 10;
  --bg-glow-a: rgba(180, 80, 70, 0.16);
  --bg-glow-b: rgba(200, 144, 104, 0.1);
  --bg-base: linear-gradient(180deg, #1c0c10 0%, #14080a 55%, #0c0406 100%);
  --fx-a: 220, 160, 140;
  --fx-b: 180, 80, 70;
  --fx-c: 232, 200, 170;
}

body.appearance-moonlit {
  --ink: #070b16;
  --ink-2: #0c1220;
  --ink-3: #141c2c;
  --gold-50: #eef2fa;
  --gold-100: #d0d8ec;
  --gold-200: #b0bcd8;
  --gold-400: #c8d4e8;
  --gold-500: #90a0c0;
  --gold-600: #6878a0;
  --gold-700: #485070;
  --muted: #8a98b8;
  --accent-rgb: 160, 180, 210;
  --ink-rgb: 7, 11, 22;
  --btn-ink: #0a1018;
  --btn-face: #e4eaf8;
  --btn-border: #eef2fa;
  --bg-glow-a: rgba(180, 200, 230, 0.14);
  --bg-glow-b: rgba(80, 100, 160, 0.12);
  --bg-base: linear-gradient(180deg, #0c1220 0%, #070b16 55%, #04060e 100%);
  --fx-a: 220, 228, 245;
  --fx-b: 160, 180, 210;
  --fx-c: 255, 255, 255;
}

body.appearance-parkash {
  --ink: #1a1408;
  --ink-2: #221c0c;
  --ink-3: #2c2410;
  --gold-50: #fff8e0;
  --gold-100: #ffe8a8;
  --gold-200: #ffd878;
  --gold-400: #ffe08a;
  --gold-500: #e0b830;
  --gold-600: #c09018;
  --gold-700: #8a6810;
  --muted: #d0b878;
  --accent-rgb: 255, 224, 138;
  --ink-rgb: 26, 20, 8;
  --bg-glow-a: rgba(255, 224, 138, 0.32);
  --bg-glow-b: rgba(255, 200, 80, 0.16);
  --bg-base: linear-gradient(180deg, #2a200c 0%, #1a1408 50%, #100c06 100%);
  --fx-a: 255, 244, 200;
  --fx-b: 255, 224, 138;
  --fx-c: 255, 252, 230;
}

body.appearance-silk {
  --ink: #160814;
  --ink-2: #1e0c1c;
  --ink-3: #2a1428;
  --gold-50: #fff4e0;
  --gold-100: #f0d8b0;
  --gold-200: #e8c070;
  --gold-400: #e8c060;
  --gold-500: #c88840;
  --gold-600: #a05070;
  --gold-700: #702848;
  --muted: #c8a090;
  --accent-rgb: 200, 80, 140;
  --ink-rgb: 22, 8, 20;
  --bg-glow-a: rgba(200, 80, 140, 0.18);
  --bg-glow-b: rgba(232, 192, 96, 0.12);
  --bg-base: linear-gradient(180deg, #1e0c1c 0%, #160814 55%, #0e060c 100%);
  --fx-a: 220, 100, 150;
  --fx-b: 232, 192, 96;
  --fx-c: 255, 210, 230;
}

body.appearance-shaheedi {
  --ink: #0c0606;
  --ink-2: #140a0a;
  --ink-3: #1e1010;
  --gold-50: #f0e0c8;
  --gold-100: #e0c8a8;
  --gold-200: #d0b090;
  --gold-400: #c08050;
  --gold-500: #a06038;
  --gold-600: #804028;
  --gold-700: #582018;
  --muted: #b09078;
  --accent-rgb: 160, 70, 50;
  --ink-rgb: 12, 6, 6;
  --bg-glow-a: rgba(160, 70, 50, 0.16);
  --bg-glow-b: rgba(80, 20, 16, 0.2);
  --bg-base: linear-gradient(180deg, #140a0a 0%, #0c0606 55%, #080404 100%);
  --fx-a: 220, 140, 80;
  --fx-b: 160, 70, 50;
  --fx-c: 255, 200, 140;
}

body.appearance-hola_mohalla {
  --ink: #061018;
  --ink-2: #0a1828;
  --ink-3: #142438;
  --gold-50: #fff4d8;
  --gold-100: #f0d890;
  --gold-200: #e8c060;
  --gold-400: #e8a028;
  --gold-500: #d07818;
  --gold-600: #a05018;
  --gold-700: #6a3010;
  --muted: #b8a070;
  --accent-rgb: 232, 160, 40;
  --ink-rgb: 6, 16, 24;
  --bg-glow-a: rgba(232, 160, 40, 0.2);
  --bg-glow-b: rgba(40, 90, 180, 0.16);
  --bg-base: linear-gradient(180deg, #0c1c30 0%, #061018 50%, #0a0c14 100%);
  --fx-a: 255, 180, 50;
  --fx-b: 50, 110, 210;
  --fx-c: 255, 80, 80;
}

body.appearance-vaisakhi {
  --ink: #1a0e04;
  --ink-2: #241408;
  --ink-3: #301c0c;
  --gold-50: #fff6d8;
  --gold-100: #ffe8a0;
  --gold-200: #f0c850;
  --gold-400: #f0b020;
  --gold-500: #d89010;
  --gold-600: #b06810;
  --gold-700: #7a4408;
  --muted: #c8a050;
  --accent-rgb: 240, 176, 32;
  --ink-rgb: 26, 14, 4;
  --bg-glow-a: rgba(240, 176, 32, 0.24);
  --bg-glow-b: rgba(80, 140, 40, 0.12);
  --bg-base: linear-gradient(180deg, #2a1808 0%, #1a0e04 50%, #100804 100%);
  --fx-a: 255, 200, 60;
  --fx-b: 240, 140, 20;
  --fx-c: 120, 170, 50;
}

body.appearance-diwali {
  --ink: #08040c;
  --ink-2: #120814;
  --ink-3: #1c0c1c;
  --gold-50: #fff4d0;
  --gold-100: #f8d888;
  --gold-200: #f0c050;
  --gold-400: #f0b040;
  --gold-500: #e08020;
  --gold-600: #c05018;
  --gold-700: #802010;
  --muted: #c89858;
  --accent-rgb: 240, 176, 64;
  --ink-rgb: 8, 4, 12;
  --bg-glow-a: rgba(255, 140, 40, 0.22);
  --bg-glow-b: rgba(180, 40, 120, 0.14);
  --bg-base: linear-gradient(180deg, #160814 0%, #08040c 50%, #040208 100%);
  --fx-a: 255, 210, 80;
  --fx-b: 255, 90, 70;
  --fx-c: 255, 160, 40;
}

body.dress-light .gold-card,
body.dress-light .teaser-card {
  box-shadow: 0 12px 28px rgba(80, 50, 10, 0.1), inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}
body.dress-light .site-header {
  box-shadow: 0 1px 0 rgba(60, 40, 10, 0.08);
}

/* Visitor-picked shade. Only applied when they chose; admin dress stays default. */
body.shade-light {
  --ink: #f4ead2;
  --ink-2: #ebe0c4;
  --ink-3: #e2d4b4;
  --gold-50: #1c1408;
  --gold-100: #2a1c0c;
  --gold-200: #4a3418;
  --gold-300: #8a6818;
  --gold-400: #b8860b;
  --gold-500: #c9a227;
  --gold-600: #8a6a12;
  --gold-700: #6a5010;
  --cream: #fff8e8;
  --parchment: #f3ead2;
  --muted: #7a6240;
  --accent-rgb: 184, 134, 11;
  --ink-rgb: 244, 234, 210;
  --btn-ink: #1c1408;
  --header-bg: rgba(244, 234, 210, 0.92);
  --nav-bg: rgba(235, 224, 196, 0.97);
  --hero-veil: linear-gradient(180deg, rgba(244, 234, 210, 0.28) 0%, rgba(235, 224, 196, 0.62) 40%, rgba(226, 212, 180, 0.9) 100%);
  --bg-glow-a: rgba(212, 175, 55, 0.16);
  --bg-glow-b: rgba(184, 134, 11, 0.1);
  --bg-base: linear-gradient(180deg, #f7f0de 0%, #efe4c8 55%, #e6d7b4 100%);
  --fx-a: 180, 130, 40;
  --fx-b: 212, 175, 55;
  --fx-c: 140, 100, 40;
  color: var(--gold-100);
  background:
    radial-gradient(circle at 12% 0%, var(--bg-glow-a), transparent 38%),
    radial-gradient(circle at 90% 80%, var(--bg-glow-b), transparent 40%),
    var(--bg-base);
  background-attachment: fixed;
}
body.shade-light .gold-card,
body.shade-light .teaser-card {
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.7), rgba(244, 234, 210, 0.85)),
    var(--ink-3);
}
body.shade-dark {
  --ink: #0b0906;
  --ink-2: #14100a;
  --ink-3: #1c160e;
  --gold-50: #fff8e8;
  --gold-100: #f6e6c3;
  --gold-200: #e8d19a;
  --gold-300: #dfc56a;
  --gold-400: #d4af37;
  --gold-500: #c9a227;
  --gold-600: #b8860b;
  --gold-700: #8a6a12;
  --cream: #faf3e3;
  --parchment: #f3ead2;
  --muted: #b9a57a;
  --accent-rgb: 212, 175, 55;
  --ink-rgb: 11, 9, 6;
  --btn-ink: #1a1408;
  --header-bg: rgba(11, 9, 6, 0.88);
  --nav-bg: rgba(11, 9, 6, 0.97);
  --hero-veil: linear-gradient(180deg, rgba(11, 9, 6, 0.55) 0%, rgba(11, 9, 6, 0.72) 40%, rgba(11, 9, 6, 0.92) 100%);
  --bg-glow-a: rgba(212, 175, 55, 0.12);
  --bg-glow-b: rgba(184, 134, 11, 0.1);
  --bg-base: linear-gradient(180deg, #0b0906 0%, #14100a 55%, #080705 100%);
  --fx-a: 255, 236, 179;
  --fx-b: 212, 175, 55;
  --fx-c: 255, 248, 220;
  color: var(--gold-100);
  background:
    radial-gradient(circle at 12% 0%, var(--bg-glow-a), transparent 38%),
    radial-gradient(circle at 90% 80%, var(--bg-glow-b), transparent 40%),
    var(--bg-base);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .appearance-stage { will-change: auto; }
}

.appearance-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  margin: 0.4rem 0 1.2rem;
}
@media (min-width: 640px) {
  .appearance-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .appearance-grid { grid-template-columns: repeat(3, 1fr); }
}
.appearance-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--ink-rgb), 0.35);
  cursor: pointer;
  min-height: 0;
}
.appearance-card.is-live,
.appearance-card:has(input:checked) {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 1px var(--gold-400);
}
.appearance-card input { accent-color: var(--gold-400); }
.appearance-card .appearance-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.appearance-card .appearance-name {
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--gold-50);
}
.appearance-card .appearance-note {
  display: block;
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.appearance-card .preview-link {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-400);
  text-decoration: none;
  font-family: var(--display);
}
.swatch {
  display: block;
  height: 4.1rem;
  border-radius: 0.15rem;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  position: relative;
  overflow: hidden;
}
.swatch-court {
  background:
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.35), transparent 42%),
    linear-gradient(180deg, #14100a, #0b0906);
}
.swatch-flowers {
  background:
    radial-gradient(ellipse 18% 10% at 22% 30%, #f4b4c4 0 40%, transparent 70%),
    radial-gradient(ellipse 14% 8% at 70% 55%, #d4af37 0 40%, transparent 70%),
    radial-gradient(ellipse 16% 9% at 48% 80%, #e8a0b0 0 40%, transparent 70%),
    radial-gradient(ellipse 12% 7% at 80% 22%, #ffe8f0 0 35%, transparent 70%),
    linear-gradient(180deg, #2a1218, #12080c);
}
.swatch-colors {
  background:
    linear-gradient(120deg, #ff6ea0 0%, #5ac8ff 40%, #ffd250 70%, #7a5cff 100%);
}
.swatch-sunshine {
  background:
    radial-gradient(ellipse 38% 14% at 50% 18%, rgba(236, 214, 110, 0.7), transparent 70%),
    radial-gradient(circle at 50% 18%, #c9a572 0 9%, #c4a06c 14%, #e8cc6a 22%, transparent 48%),
    linear-gradient(180deg, #e8c060, #c09030);
}
.swatch-custom {
  background:
    repeating-linear-gradient(135deg, #1a1408 0 10px, #d4af37 10px 12px, #1a1408 12px 22px);
}
.swatch-fireworks {
  background:
    radial-gradient(circle at 30% 42%, #ff5a78 0 4%, transparent 18%),
    radial-gradient(circle at 30% 42%, transparent 10%, #ff8aa0 11%, transparent 12%),
    radial-gradient(circle at 68% 28%, #ffd36a 0 3%, transparent 16%),
    radial-gradient(circle at 68% 28%, transparent 8%, #ffe8a0 9%, transparent 11%),
    radial-gradient(circle at 52% 70%, #78b4ff 0 3%, transparent 14%),
    radial-gradient(circle at 78% 58%, #c070ff 0 2%, transparent 10%),
    linear-gradient(180deg, #141428, #050510);
}
.swatch-calm {
  background: linear-gradient(180deg, #1a2624, #0c1414 60%, #9cb890 160%);
}
.swatch-golden {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 220, 100, 0.55), transparent 50%),
    linear-gradient(180deg, #2c2410, #120e04);
}
.swatch-silver {
  background: linear-gradient(180deg, #dce3ee, #8e99ab 55%, #0c0e12);
}
.swatch-diamonds {
  background:
    radial-gradient(circle at 36% 42%, #fff 0 2%, transparent 8%),
    radial-gradient(circle at 36% 42%, #c8e4ff 0 5%, transparent 18%),
    radial-gradient(circle at 64% 28%, #fff 0 1.5%, transparent 6%),
    radial-gradient(circle at 64% 28%, #a8d0f4 0 4%, transparent 14%),
    linear-gradient(180deg, #141c30, #070b16);
}
.swatch-kesari {
  background: linear-gradient(180deg, #f0c060, #e8a020 40%, #1a0c04);
}
.swatch-phulkari {
  background:
    linear-gradient(135deg, #e85078 0 20%, #e8b84a 20% 40%, #50aa5a 40% 60%, #e85078 60% 80%, #1a0810 80%);
}
.swatch-marigold {
  background:
    radial-gradient(circle at 30% 40%, #f0a020 0 10%, transparent 11%),
    radial-gradient(circle at 70% 60%, #f0c050 0 8%, transparent 9%),
    linear-gradient(180deg, #2a180a, #160a04);
}
.swatch-lotus {
  background:
    radial-gradient(circle at 50% 60%, #ffd2dc, transparent 42%),
    linear-gradient(180deg, #2a1428, #160814);
}
.swatch-diya {
  background:
    radial-gradient(circle at 50% 70%, #f0b040, transparent 38%),
    linear-gradient(180deg, #26160a, #120804);
}
.swatch-nagara {
  background: linear-gradient(180deg, #8a1818, #140606 55%, #d4af37 160%);
}
.swatch-pearl {
  background: linear-gradient(180deg, #fbf8f2, #e6dfd2 70%, #9a8870);
}
.swatch-emerald {
  background: linear-gradient(180deg, #6ec89a, #142820 50%, #06120e);
}
.swatch-rosewood {
  background: linear-gradient(180deg, #5c2018, #14080a 60%, #c89068);
}
.swatch-moonlit {
  background:
    radial-gradient(circle at 70% 28%, #eef2fa 0 8%, transparent 12%),
    linear-gradient(180deg, #141c2c, #070b16);
}
.swatch-parkash {
  background:
    radial-gradient(circle at 50% 40%, #ffe08a, transparent 45%),
    linear-gradient(180deg, #2c2410, #1a1408);
}
.swatch-silk {
  background: linear-gradient(120deg, #c8508c, #e8c060 50%, #160814);
}
.swatch-shaheedi {
  background: linear-gradient(180deg, #2a1010, #0c0606 60%, #c08050);
}
.swatch-hola_mohalla {
  background:
    radial-gradient(circle at 18% 78%, #ff2460 0 10%, transparent 42%),
    radial-gradient(circle at 78% 72%, #2868d0 0 9%, transparent 40%),
    radial-gradient(circle at 48% 38%, #ffe028 0 8%, transparent 36%),
    radial-gradient(circle at 62% 58%, #ff5050 0 7%, transparent 28%),
    radial-gradient(circle at 34% 52%, #24b050 0 6%, transparent 24%),
    linear-gradient(180deg, #142438, #061018);
}
.swatch-vaisakhi {
  background:
    radial-gradient(circle at 50% 28%, #ffe8a0 0 12%, transparent 42%),
    linear-gradient(180deg, #f0b020, #7a4408 55%, #1a0e04);
}
.swatch-diwali {
  background:
    radial-gradient(circle at 30% 38%, #ff5a46 0 4%, transparent 16%),
    radial-gradient(circle at 68% 30%, #ffd250 0 3%, transparent 14%),
    radial-gradient(circle at 50% 78%, #f0b040 0 8%, transparent 22%),
    linear-gradient(180deg, #1c0c1c, #08040c);
}

.hall-arrange {
  display: grid;
  gap: 0.45rem;
  margin: 0.3rem 0 1rem;
}