/*
 * Themes for the 🎨 panel in the rail (views/cpos/_ui.php). GENERATED: one
 * block per theme and light / dark. Sets both colour families: cpos.css /
 * rail.css (--bg, --sf, --ac ...) and bq.css / modern.css (--mc-*, --bq-*).
 * <html data-skin data-scheme> come from partials/ui_head.php; the same
 * attributes on any element (the theme cards) colour just that element.
 */
[data-skin="boutique"][data-scheme="light"],
[data-skin="boutique"][data-scheme="light"] body.skin-bq,
[data-skin="boutique"][data-scheme="light"] .mp-rail,
[data-skin="boutique"][data-scheme="light"] .mp-fly,
[data-skin="boutique"][data-scheme="light"] .mp-cz {
    --bg: #f8f3ee; --sf: #fffdfa; --sf2: #f3ebe4; --bd: #eadfd5; --ln: #efe5dc;
    --tx: #3b2a26; --mu: #9a857c; --chip: #f1e7df;
    --ac: #b76e79; --ac-soft: #f6e6e6; --grad: linear-gradient(135deg, #c98690 0%, #9c5662 100%);
    --glow: 0 12px 24px rgba(156, 86, 98, .30); --sh: 0 1px 2px rgba(90, 50, 40, .04), 0 8px 24px rgba(120, 70, 60, .08); --sh-lg: 0 24px 60px rgba(60, 30, 25, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #fbe4e1 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f3e6da 0%, transparent 60%), #f8f3ee;
    --mc-bg: #f8f3ee; --mc-surface: #fffdfa; --mc-surface-2: #f3ebe4; --mc-border: #eadfd5;
    --mc-text: #3b2a26; --mc-muted: #9a857c; --mc-accent: #b76e79; --mc-accent-soft: #f6e6e6; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(90, 50, 40, .04), 0 8px 24px rgba(120, 70, 60, .08); --mc-shadow-lg: 0 24px 60px rgba(60, 30, 25, .22);
    --bq-grad: linear-gradient(135deg, #c98690 0%, #9c5662 100%); --bq-glow: 0 12px 24px rgba(156, 86, 98, .30); --bq-chip: #f1e7df; --bq-page: radial-gradient(900px 520px at 0% 0%, #fbe4e1 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f3e6da 0%, transparent 60%), #f8f3ee;
    --ui-solid: #fffdfa;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="boutique"][data-scheme="dark"],
[data-skin="boutique"][data-scheme="dark"] body.skin-bq,
[data-skin="boutique"][data-scheme="dark"] .mp-rail,
[data-skin="boutique"][data-scheme="dark"] .mp-fly,
[data-skin="boutique"][data-scheme="dark"] .mp-cz {
    --bg: hsl(345 18% 5%); --sf: hsl(345 18% 9%); --sf2: hsl(345 18% 12%); --bd: hsl(345 18% 17%); --ln: hsl(345 18% 17%);
    --tx: hsl(345 40% 94%); --mu: hsl(345 15% 62%); --chip: hsl(345 18% 14%);
    --ac: #e8a3ae; --ac-soft: hsl(350 35% 16%); --grad: linear-gradient(135deg, #c98690 0%, #9c5662 100%);
    --glow: 0 12px 26px rgba(201, 134, 144, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(201, 134, 144, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(156, 86, 98, 0.13), transparent 70%), hsl(345 18% 5%);
    --mc-bg: hsl(345 18% 5%); --mc-surface: hsl(345 18% 9%); --mc-surface-2: hsl(345 18% 12%); --mc-border: hsl(345 18% 17%);
    --mc-text: hsl(345 40% 94%); --mc-muted: hsl(345 15% 62%); --mc-accent: #e8a3ae; --mc-accent-soft: hsl(350 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #c98690 0%, #9c5662 100%); --bq-glow: 0 12px 26px rgba(201, 134, 144, 0.38); --bq-chip: hsl(345 18% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(201, 134, 144, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(156, 86, 98, 0.13), transparent 70%), hsl(345 18% 5%);
    --ui-solid: hsl(345 18% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="midnight"][data-scheme="light"],
[data-skin="midnight"][data-scheme="light"] body.skin-bq,
[data-skin="midnight"][data-scheme="light"] .mp-rail,
[data-skin="midnight"][data-scheme="light"] .mp-fly,
[data-skin="midnight"][data-scheme="light"] .mp-cz {
    --bg: hsl(250 30% 96%); --sf: hsl(250 50% 99.5%); --sf2: hsl(250 30% 93%); --bd: hsl(250 24% 87%); --ln: hsl(250 30% 91%);
    --tx: hsl(250 40% 17%); --mu: hsl(250 15% 50%); --chip: hsl(250 30% 92%);
    --ac: #7c5cf0; --ac-soft: hsl(260 70% 94%); --grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --glow: 0 12px 24px rgba(236, 72, 153, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #ece4ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #ffe4f1 0%, transparent 60%), hsl(250 30% 96%);
    --mc-bg: hsl(250 30% 96%); --mc-surface: hsl(250 50% 99.5%); --mc-surface-2: hsl(250 30% 93%); --mc-border: hsl(250 24% 87%);
    --mc-text: hsl(250 40% 17%); --mc-muted: hsl(250 15% 50%); --mc-accent: #7c5cf0; --mc-accent-soft: hsl(260 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); --bq-glow: 0 12px 24px rgba(236, 72, 153, 0.3); --bq-chip: hsl(250 30% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #ece4ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #ffe4f1 0%, transparent 60%), hsl(250 30% 96%);
    --ui-solid: hsl(250 50% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="midnight"][data-scheme="dark"],
[data-skin="midnight"][data-scheme="dark"] body.skin-bq,
[data-skin="midnight"][data-scheme="dark"] .mp-rail,
[data-skin="midnight"][data-scheme="dark"] .mp-fly,
[data-skin="midnight"][data-scheme="dark"] .mp-cz {
    --bg: #0b0b12; --sf: #14141f; --sf2: #1b1b29; --bd: #23233a; --ln: #23233a;
    --tx: #ecebff; --mu: #8b8ba7; --chip: #1f1f30;
    --ac: #a78bfa; --ac-soft: #221f3a; --grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --glow: 0 12px 26px rgba(139, 92, 246, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(139, 92, 246, .25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(236, 72, 153, .12), transparent 70%), #0b0b12;
    --mc-bg: #0b0b12; --mc-surface: #14141f; --mc-surface-2: #1b1b29; --mc-border: #23233a;
    --mc-text: #ecebff; --mc-muted: #8b8ba7; --mc-accent: #a78bfa; --mc-accent-soft: #221f3a; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); --bq-glow: 0 12px 26px rgba(139, 92, 246, .38); --bq-chip: #1f1f30; --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(139, 92, 246, .25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(236, 72, 153, .12), transparent 70%), #0b0b12;
    --ui-solid: #14141f;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ocean"][data-scheme="light"],
[data-skin="ocean"][data-scheme="light"] body.skin-bq,
[data-skin="ocean"][data-scheme="light"] .mp-rail,
[data-skin="ocean"][data-scheme="light"] .mp-fly,
[data-skin="ocean"][data-scheme="light"] .mp-cz {
    --bg: hsl(205 35% 96%); --sf: hsl(205 55% 99.5%); --sf2: hsl(205 35% 93%); --bd: hsl(205 29% 87%); --ln: hsl(205 35% 91%);
    --tx: hsl(205 40% 17%); --mu: hsl(205 17% 50%); --chip: hsl(205 35% 92%);
    --ac: #0e7fb8; --ac-soft: hsl(200 70% 94%); --grad: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
    --glow: 0 12px 24px rgba(37, 99, 235, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #d8f1fb 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #dfe9ff 0%, transparent 60%), hsl(205 35% 96%);
    --mc-bg: hsl(205 35% 96%); --mc-surface: hsl(205 55% 99.5%); --mc-surface-2: hsl(205 35% 93%); --mc-border: hsl(205 29% 87%);
    --mc-text: hsl(205 40% 17%); --mc-muted: hsl(205 17% 50%); --mc-accent: #0e7fb8; --mc-accent-soft: hsl(200 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); --bq-glow: 0 12px 24px rgba(37, 99, 235, 0.3); --bq-chip: hsl(205 35% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #d8f1fb 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #dfe9ff 0%, transparent 60%), hsl(205 35% 96%);
    --ui-solid: hsl(205 55% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="ocean"][data-scheme="dark"],
[data-skin="ocean"][data-scheme="dark"] body.skin-bq,
[data-skin="ocean"][data-scheme="dark"] .mp-rail,
[data-skin="ocean"][data-scheme="dark"] .mp-fly,
[data-skin="ocean"][data-scheme="dark"] .mp-cz {
    --bg: hsl(212 35% 5%); --sf: hsl(212 35% 9%); --sf2: hsl(212 35% 12%); --bd: hsl(212 35% 17%); --ln: hsl(212 35% 17%);
    --tx: hsl(212 40% 94%); --mu: hsl(212 23% 62%); --chip: hsl(212 35% 14%);
    --ac: #38bdf8; --ac-soft: hsl(205 35% 16%); --grad: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
    --glow: 0 12px 26px rgba(6, 182, 212, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(6, 182, 212, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(37, 99, 235, 0.13), transparent 70%), hsl(212 35% 5%);
    --mc-bg: hsl(212 35% 5%); --mc-surface: hsl(212 35% 9%); --mc-surface-2: hsl(212 35% 12%); --mc-border: hsl(212 35% 17%);
    --mc-text: hsl(212 40% 94%); --mc-muted: hsl(212 23% 62%); --mc-accent: #38bdf8; --mc-accent-soft: hsl(205 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); --bq-glow: 0 12px 26px rgba(6, 182, 212, 0.38); --bq-chip: hsl(212 35% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(6, 182, 212, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(37, 99, 235, 0.13), transparent 70%), hsl(212 35% 5%);
    --ui-solid: hsl(212 35% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="forest"][data-scheme="light"],
[data-skin="forest"][data-scheme="light"] body.skin-bq,
[data-skin="forest"][data-scheme="light"] .mp-rail,
[data-skin="forest"][data-scheme="light"] .mp-fly,
[data-skin="forest"][data-scheme="light"] .mp-cz {
    --bg: hsl(140 22% 96%); --sf: hsl(140 42% 99.5%); --sf2: hsl(140 22% 93%); --bd: hsl(140 16% 87%); --ln: hsl(140 22% 91%);
    --tx: hsl(140 32% 17%); --mu: hsl(140 11% 50%); --chip: hsl(140 22% 92%);
    --ac: #2f855a; --ac-soft: hsl(145 70% 94%); --grad: linear-gradient(135deg, #34d399 0%, #047857 100%);
    --glow: 0 12px 24px rgba(4, 120, 87, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #dcf5e6 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #eef4dc 0%, transparent 60%), hsl(140 22% 96%);
    --mc-bg: hsl(140 22% 96%); --mc-surface: hsl(140 42% 99.5%); --mc-surface-2: hsl(140 22% 93%); --mc-border: hsl(140 16% 87%);
    --mc-text: hsl(140 32% 17%); --mc-muted: hsl(140 11% 50%); --mc-accent: #2f855a; --mc-accent-soft: hsl(145 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #34d399 0%, #047857 100%); --bq-glow: 0 12px 24px rgba(4, 120, 87, 0.3); --bq-chip: hsl(140 22% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #dcf5e6 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #eef4dc 0%, transparent 60%), hsl(140 22% 96%);
    --ui-solid: hsl(140 42% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="forest"][data-scheme="dark"],
[data-skin="forest"][data-scheme="dark"] body.skin-bq,
[data-skin="forest"][data-scheme="dark"] .mp-rail,
[data-skin="forest"][data-scheme="dark"] .mp-fly,
[data-skin="forest"][data-scheme="dark"] .mp-cz {
    --bg: hsl(150 25% 5%); --sf: hsl(150 25% 9%); --sf2: hsl(150 25% 12%); --bd: hsl(150 25% 17%); --ln: hsl(150 25% 17%);
    --tx: hsl(150 40% 94%); --mu: hsl(150 18% 62%); --chip: hsl(150 25% 14%);
    --ac: #4ade80; --ac-soft: hsl(150 35% 16%); --grad: linear-gradient(135deg, #10b981 0%, #047857 100%);
    --glow: 0 12px 26px rgba(16, 185, 129, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(16, 185, 129, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(132, 204, 22, 0.13), transparent 70%), hsl(150 25% 5%);
    --mc-bg: hsl(150 25% 5%); --mc-surface: hsl(150 25% 9%); --mc-surface-2: hsl(150 25% 12%); --mc-border: hsl(150 25% 17%);
    --mc-text: hsl(150 40% 94%); --mc-muted: hsl(150 18% 62%); --mc-accent: #4ade80; --mc-accent-soft: hsl(150 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #10b981 0%, #047857 100%); --bq-glow: 0 12px 26px rgba(16, 185, 129, 0.38); --bq-chip: hsl(150 25% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(16, 185, 129, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(132, 204, 22, 0.13), transparent 70%), hsl(150 25% 5%);
    --ui-solid: hsl(150 25% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="sakura"][data-scheme="light"],
[data-skin="sakura"][data-scheme="light"] body.skin-bq,
[data-skin="sakura"][data-scheme="light"] .mp-rail,
[data-skin="sakura"][data-scheme="light"] .mp-fly,
[data-skin="sakura"][data-scheme="light"] .mp-cz {
    --bg: hsl(340 45% 96%); --sf: hsl(340 65% 99.5%); --sf2: hsl(340 45% 93%); --bd: hsl(340 39% 87%); --ln: hsl(340 45% 91%);
    --tx: hsl(340 40% 17%); --mu: hsl(340 22% 50%); --chip: hsl(340 45% 92%);
    --ac: #db5a8a; --ac-soft: hsl(335 70% 94%); --grad: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%);
    --glow: 0 12px 24px rgba(236, 72, 153, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #ffe1ee 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #fde8f3 0%, transparent 60%), hsl(340 45% 96%);
    --mc-bg: hsl(340 45% 96%); --mc-surface: hsl(340 65% 99.5%); --mc-surface-2: hsl(340 45% 93%); --mc-border: hsl(340 39% 87%);
    --mc-text: hsl(340 40% 17%); --mc-muted: hsl(340 22% 50%); --mc-accent: #db5a8a; --mc-accent-soft: hsl(335 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%); --bq-glow: 0 12px 24px rgba(236, 72, 153, 0.3); --bq-chip: hsl(340 45% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #ffe1ee 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #fde8f3 0%, transparent 60%), hsl(340 45% 96%);
    --ui-solid: hsl(340 65% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="sakura"][data-scheme="dark"],
[data-skin="sakura"][data-scheme="dark"] body.skin-bq,
[data-skin="sakura"][data-scheme="dark"] .mp-rail,
[data-skin="sakura"][data-scheme="dark"] .mp-fly,
[data-skin="sakura"][data-scheme="dark"] .mp-cz {
    --bg: hsl(335 25% 5%); --sf: hsl(335 25% 9%); --sf2: hsl(335 25% 12%); --bd: hsl(335 25% 17%); --ln: hsl(335 25% 17%);
    --tx: hsl(335 40% 94%); --mu: hsl(335 18% 62%); --chip: hsl(335 25% 14%);
    --ac: #f9a8d4; --ac-soft: hsl(335 35% 16%); --grad: linear-gradient(135deg, #f472b6 0%, #be185d 100%);
    --glow: 0 12px 26px rgba(244, 114, 182, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(244, 114, 182, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(190, 24, 93, 0.13), transparent 70%), hsl(335 25% 5%);
    --mc-bg: hsl(335 25% 5%); --mc-surface: hsl(335 25% 9%); --mc-surface-2: hsl(335 25% 12%); --mc-border: hsl(335 25% 17%);
    --mc-text: hsl(335 40% 94%); --mc-muted: hsl(335 18% 62%); --mc-accent: #f9a8d4; --mc-accent-soft: hsl(335 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #f472b6 0%, #be185d 100%); --bq-glow: 0 12px 26px rgba(244, 114, 182, 0.38); --bq-chip: hsl(335 25% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(244, 114, 182, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(190, 24, 93, 0.13), transparent 70%), hsl(335 25% 5%);
    --ui-solid: hsl(335 25% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="coffee"][data-scheme="light"],
[data-skin="coffee"][data-scheme="light"] body.skin-bq,
[data-skin="coffee"][data-scheme="light"] .mp-rail,
[data-skin="coffee"][data-scheme="light"] .mp-fly,
[data-skin="coffee"][data-scheme="light"] .mp-cz {
    --bg: hsl(30 30% 96%); --sf: hsl(30 50% 99.5%); --sf2: hsl(30 30% 93%); --bd: hsl(30 24% 87%); --ln: hsl(30 30% 91%);
    --tx: hsl(30 40% 17%); --mu: hsl(30 15% 50%); --chip: hsl(30 30% 92%);
    --ac: #8b5e3c; --ac-soft: hsl(28 70% 94%); --grad: linear-gradient(135deg, #c08552 0%, #6f4e37 100%);
    --glow: 0 12px 24px rgba(111, 78, 55, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #f3e3d3 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #efe6da 0%, transparent 60%), hsl(30 30% 96%);
    --mc-bg: hsl(30 30% 96%); --mc-surface: hsl(30 50% 99.5%); --mc-surface-2: hsl(30 30% 93%); --mc-border: hsl(30 24% 87%);
    --mc-text: hsl(30 40% 17%); --mc-muted: hsl(30 15% 50%); --mc-accent: #8b5e3c; --mc-accent-soft: hsl(28 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #c08552 0%, #6f4e37 100%); --bq-glow: 0 12px 24px rgba(111, 78, 55, 0.3); --bq-chip: hsl(30 30% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #f3e3d3 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #efe6da 0%, transparent 60%), hsl(30 30% 96%);
    --ui-solid: hsl(30 50% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="coffee"][data-scheme="dark"],
[data-skin="coffee"][data-scheme="dark"] body.skin-bq,
[data-skin="coffee"][data-scheme="dark"] .mp-rail,
[data-skin="coffee"][data-scheme="dark"] .mp-fly,
[data-skin="coffee"][data-scheme="dark"] .mp-cz {
    --bg: hsl(28 22% 5%); --sf: hsl(28 22% 9%); --sf2: hsl(28 22% 12%); --bd: hsl(28 22% 17%); --ln: hsl(28 22% 17%);
    --tx: hsl(28 40% 94%); --mu: hsl(28 17% 62%); --chip: hsl(28 22% 14%);
    --ac: #d4a373; --ac-soft: hsl(28 35% 16%); --grad: linear-gradient(135deg, #c08552 0%, #7c5235 100%);
    --glow: 0 12px 26px rgba(192, 133, 82, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(192, 133, 82, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(124, 82, 53, 0.13), transparent 70%), hsl(28 22% 5%);
    --mc-bg: hsl(28 22% 5%); --mc-surface: hsl(28 22% 9%); --mc-surface-2: hsl(28 22% 12%); --mc-border: hsl(28 22% 17%);
    --mc-text: hsl(28 40% 94%); --mc-muted: hsl(28 17% 62%); --mc-accent: #d4a373; --mc-accent-soft: hsl(28 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #c08552 0%, #7c5235 100%); --bq-glow: 0 12px 26px rgba(192, 133, 82, 0.38); --bq-chip: hsl(28 22% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(192, 133, 82, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(124, 82, 53, 0.13), transparent 70%), hsl(28 22% 5%);
    --ui-solid: hsl(28 22% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="gold"][data-scheme="light"],
[data-skin="gold"][data-scheme="light"] body.skin-bq,
[data-skin="gold"][data-scheme="light"] .mp-rail,
[data-skin="gold"][data-scheme="light"] .mp-fly,
[data-skin="gold"][data-scheme="light"] .mp-cz {
    --bg: hsl(42 30% 96%); --sf: hsl(42 50% 99.5%); --sf2: hsl(42 30% 93%); --bd: hsl(42 24% 87%); --ln: hsl(42 30% 91%);
    --tx: hsl(42 40% 17%); --mu: hsl(42 15% 50%); --chip: hsl(42 30% 92%);
    --ac: #a67c1f; --ac-soft: hsl(42 70% 94%); --grad: linear-gradient(135deg, #e8c15f 0%, #a8781f 100%);
    --glow: 0 12px 24px rgba(168, 120, 31, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #fbefcf 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f4ead6 0%, transparent 60%), hsl(42 30% 96%);
    --mc-bg: hsl(42 30% 96%); --mc-surface: hsl(42 50% 99.5%); --mc-surface-2: hsl(42 30% 93%); --mc-border: hsl(42 24% 87%);
    --mc-text: hsl(42 40% 17%); --mc-muted: hsl(42 15% 50%); --mc-accent: #a67c1f; --mc-accent-soft: hsl(42 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #e8c15f 0%, #a8781f 100%); --bq-glow: 0 12px 24px rgba(168, 120, 31, 0.3); --bq-chip: hsl(42 30% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #fbefcf 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f4ead6 0%, transparent 60%), hsl(42 30% 96%);
    --ui-solid: hsl(42 50% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="gold"][data-scheme="dark"],
[data-skin="gold"][data-scheme="dark"] body.skin-bq,
[data-skin="gold"][data-scheme="dark"] .mp-rail,
[data-skin="gold"][data-scheme="dark"] .mp-fly,
[data-skin="gold"][data-scheme="dark"] .mp-cz {
    --bg: hsl(40 18% 5%); --sf: hsl(40 18% 9%); --sf2: hsl(40 18% 12%); --bd: hsl(40 18% 17%); --ln: hsl(40 18% 17%);
    --tx: hsl(40 40% 94%); --mu: hsl(40 15% 62%); --chip: hsl(40 18% 14%);
    --ac: #e6c06a; --ac-soft: hsl(42 35% 16%); --grad: linear-gradient(135deg, #f4d27a 0%, #b8862b 100%);
    --glow: 0 12px 26px rgba(244, 210, 122, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(230, 192, 106, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(184, 134, 43, 0.13), transparent 70%), hsl(40 18% 5%);
    --mc-bg: hsl(40 18% 5%); --mc-surface: hsl(40 18% 9%); --mc-surface-2: hsl(40 18% 12%); --mc-border: hsl(40 18% 17%);
    --mc-text: hsl(40 40% 94%); --mc-muted: hsl(40 15% 62%); --mc-accent: #e6c06a; --mc-accent-soft: hsl(42 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #f4d27a 0%, #b8862b 100%); --bq-glow: 0 12px 26px rgba(244, 210, 122, 0.38); --bq-chip: hsl(40 18% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(230, 192, 106, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(184, 134, 43, 0.13), transparent 70%), hsl(40 18% 5%);
    --ui-solid: hsl(40 18% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="neon"][data-scheme="light"],
[data-skin="neon"][data-scheme="light"] body.skin-bq,
[data-skin="neon"][data-scheme="light"] .mp-rail,
[data-skin="neon"][data-scheme="light"] .mp-fly,
[data-skin="neon"][data-scheme="light"] .mp-cz {
    --bg: hsl(255 30% 96%); --sf: hsl(255 50% 99.5%); --sf2: hsl(255 30% 93%); --bd: hsl(255 24% 87%); --ln: hsl(255 30% 91%);
    --tx: hsl(255 40% 17%); --mu: hsl(255 15% 50%); --chip: hsl(255 30% 92%);
    --ac: #7c3aed; --ac-soft: hsl(270 70% 94%); --grad: linear-gradient(135deg, #06b6d4 0%, #c026d3 100%);
    --glow: 0 12px 24px rgba(192, 38, 211, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #e0f7ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #fbe3ff 0%, transparent 60%), hsl(255 30% 96%);
    --mc-bg: hsl(255 30% 96%); --mc-surface: hsl(255 50% 99.5%); --mc-surface-2: hsl(255 30% 93%); --mc-border: hsl(255 24% 87%);
    --mc-text: hsl(255 40% 17%); --mc-muted: hsl(255 15% 50%); --mc-accent: #7c3aed; --mc-accent-soft: hsl(270 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #06b6d4 0%, #c026d3 100%); --bq-glow: 0 12px 24px rgba(192, 38, 211, 0.3); --bq-chip: hsl(255 30% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #e0f7ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #fbe3ff 0%, transparent 60%), hsl(255 30% 96%);
    --ui-solid: hsl(255 50% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="neon"][data-scheme="dark"],
[data-skin="neon"][data-scheme="dark"] body.skin-bq,
[data-skin="neon"][data-scheme="dark"] .mp-rail,
[data-skin="neon"][data-scheme="dark"] .mp-fly,
[data-skin="neon"][data-scheme="dark"] .mp-cz {
    --bg: hsl(255 40% 5%); --sf: hsl(255 40% 9%); --sf2: hsl(255 40% 12%); --bd: hsl(255 40% 17%); --ln: hsl(255 40% 17%);
    --tx: hsl(255 40% 94%); --mu: hsl(255 26% 62%); --chip: hsl(255 40% 14%);
    --ac: #22d3ee; --ac-soft: hsl(190 35% 16%); --grad: linear-gradient(135deg, #22d3ee 0%, #e879f9 100%);
    --glow: 0 12px 26px rgba(34, 211, 238, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(34, 211, 238, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(232, 121, 249, 0.13), transparent 70%), hsl(255 40% 5%);
    --mc-bg: hsl(255 40% 5%); --mc-surface: hsl(255 40% 9%); --mc-surface-2: hsl(255 40% 12%); --mc-border: hsl(255 40% 17%);
    --mc-text: hsl(255 40% 94%); --mc-muted: hsl(255 26% 62%); --mc-accent: #22d3ee; --mc-accent-soft: hsl(190 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #22d3ee 0%, #e879f9 100%); --bq-glow: 0 12px 26px rgba(34, 211, 238, 0.38); --bq-chip: hsl(255 40% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(34, 211, 238, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(232, 121, 249, 0.13), transparent 70%), hsl(255 40% 5%);
    --ui-solid: hsl(255 40% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="mono"][data-scheme="light"],
[data-skin="mono"][data-scheme="light"] body.skin-bq,
[data-skin="mono"][data-scheme="light"] .mp-rail,
[data-skin="mono"][data-scheme="light"] .mp-fly,
[data-skin="mono"][data-scheme="light"] .mp-cz {
    --bg: hsl(0 0% 96%); --sf: hsl(0 0% 99.5%); --sf2: hsl(0 0% 93%); --bd: hsl(0 0% 87%); --ln: hsl(0 0% 91%);
    --tx: hsl(0 0% 17%); --mu: hsl(0 0% 50%); --chip: hsl(0 0% 92%);
    --ac: #111827; --ac-soft: hsl(0 0% 94%); --grad: linear-gradient(135deg, #374151 0%, #111827 100%);
    --glow: 0 12px 24px rgba(17, 24, 39, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #eeeeee 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f2f2f2 0%, transparent 60%), hsl(0 0% 96%);
    --mc-bg: hsl(0 0% 96%); --mc-surface: hsl(0 0% 99.5%); --mc-surface-2: hsl(0 0% 93%); --mc-border: hsl(0 0% 87%);
    --mc-text: hsl(0 0% 17%); --mc-muted: hsl(0 0% 50%); --mc-accent: #111827; --mc-accent-soft: hsl(0 0% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #374151 0%, #111827 100%); --bq-glow: 0 12px 24px rgba(17, 24, 39, 0.3); --bq-chip: hsl(0 0% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #eeeeee 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f2f2f2 0%, transparent 60%), hsl(0 0% 96%);
    --ui-solid: hsl(0 0% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="mono"][data-scheme="dark"],
[data-skin="mono"][data-scheme="dark"] body.skin-bq,
[data-skin="mono"][data-scheme="dark"] .mp-rail,
[data-skin="mono"][data-scheme="dark"] .mp-fly,
[data-skin="mono"][data-scheme="dark"] .mp-cz {
    --bg: hsl(0 0% 5%); --sf: hsl(0 0% 9%); --sf2: hsl(0 0% 12%); --bd: hsl(0 0% 17%); --ln: hsl(0 0% 17%);
    --tx: hsl(0 0% 94%); --mu: hsl(0 0% 62%); --chip: hsl(0 0% 14%);
    --ac: #d4d4d8; --ac-soft: hsl(0 0% 16%); --grad: linear-gradient(135deg, #71717a 0%, #3f3f46 100%);
    --glow: 0 12px 26px rgba(113, 113, 122, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(161, 161, 170, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(113, 113, 122, 0.13), transparent 70%), hsl(0 0% 5%);
    --mc-bg: hsl(0 0% 5%); --mc-surface: hsl(0 0% 9%); --mc-surface-2: hsl(0 0% 12%); --mc-border: hsl(0 0% 17%);
    --mc-text: hsl(0 0% 94%); --mc-muted: hsl(0 0% 62%); --mc-accent: #d4d4d8; --mc-accent-soft: hsl(0 0% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #71717a 0%, #3f3f46 100%); --bq-glow: 0 12px 26px rgba(113, 113, 122, 0.38); --bq-chip: hsl(0 0% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(161, 161, 170, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(113, 113, 122, 0.13), transparent 70%), hsl(0 0% 5%);
    --ui-solid: hsl(0 0% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="lavender"][data-scheme="light"],
[data-skin="lavender"][data-scheme="light"] body.skin-bq,
[data-skin="lavender"][data-scheme="light"] .mp-rail,
[data-skin="lavender"][data-scheme="light"] .mp-fly,
[data-skin="lavender"][data-scheme="light"] .mp-cz {
    --bg: hsl(265 40% 96%); --sf: hsl(265 60% 99.5%); --sf2: hsl(265 40% 93%); --bd: hsl(265 34% 87%); --ln: hsl(265 40% 91%);
    --tx: hsl(265 40% 17%); --mu: hsl(265 20% 50%); --chip: hsl(265 40% 92%);
    --ac: #8b6fd6; --ac-soft: hsl(265 70% 94%); --grad: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
    --glow: 0 12px 24px rgba(139, 92, 246, 0.3); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 520px at 0% 0%, #efe8ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f6e8ff 0%, transparent 60%), hsl(265 40% 96%);
    --mc-bg: hsl(265 40% 96%); --mc-surface: hsl(265 60% 99.5%); --mc-surface-2: hsl(265 40% 93%); --mc-border: hsl(265 34% 87%);
    --mc-text: hsl(265 40% 17%); --mc-muted: hsl(265 20% 50%); --mc-accent: #8b6fd6; --mc-accent-soft: hsl(265 70% 94%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%); --bq-glow: 0 12px 24px rgba(139, 92, 246, 0.3); --bq-chip: hsl(265 40% 92%); --bq-page: radial-gradient(900px 520px at 0% 0%, #efe8ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f6e8ff 0%, transparent 60%), hsl(265 40% 96%);
    --ui-solid: hsl(265 60% 99.5%);
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="lavender"][data-scheme="dark"],
[data-skin="lavender"][data-scheme="dark"] body.skin-bq,
[data-skin="lavender"][data-scheme="dark"] .mp-rail,
[data-skin="lavender"][data-scheme="dark"] .mp-fly,
[data-skin="lavender"][data-scheme="dark"] .mp-cz {
    --bg: hsl(262 28% 5%); --sf: hsl(262 28% 9%); --sf2: hsl(262 28% 12%); --bd: hsl(262 28% 17%); --ln: hsl(262 28% 17%);
    --tx: hsl(262 40% 94%); --mu: hsl(262 20% 62%); --chip: hsl(262 28% 14%);
    --ac: #c4b5fd; --ac-soft: hsl(262 35% 16%); --grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    --glow: 0 12px 26px rgba(167, 139, 250, 0.38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(167, 139, 250, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(124, 58, 237, 0.13), transparent 70%), hsl(262 28% 5%);
    --mc-bg: hsl(262 28% 5%); --mc-surface: hsl(262 28% 9%); --mc-surface-2: hsl(262 28% 12%); --mc-border: hsl(262 28% 17%);
    --mc-text: hsl(262 40% 94%); --mc-muted: hsl(262 20% 62%); --mc-accent: #c4b5fd; --mc-accent-soft: hsl(262 35% 16%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); --bq-glow: 0 12px 26px rgba(167, 139, 250, 0.38); --bq-chip: hsl(262 28% 14%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(167, 139, 250, 0.25), transparent 70%), radial-gradient(640px 480px at -5% 105%, rgba(124, 58, 237, 0.13), transparent 70%), hsl(262 28% 5%);
    --ui-solid: hsl(262 28% 9%);
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="g-aurora"][data-scheme="light"],
[data-skin="g-aurora"][data-scheme="light"] body.skin-bq,
[data-skin="g-aurora"][data-scheme="light"] .mp-rail,
[data-skin="g-aurora"][data-scheme="light"] .mp-fly,
[data-skin="g-aurora"][data-scheme="light"] .mp-cz {
    --bg: #eef4fb; --sf: rgba(255, 255, 255, .58); --sf2: rgba(255, 255, 255, .38); --bd: rgba(255, 255, 255, .7); --ln: rgba(255, 255, 255, .55);
    --tx: #1d2236; --mu: #5b6280; --chip: rgba(255, 255, 255, .5);
    --ac: #0d9488; --ac-soft: rgba(13, 148, 136, 0.14); --grad: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
    --glow: 0 12px 24px rgba(168, 85, 247, 0.32); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(800px 560px at 10% 0%, #a7f3d0 0%, transparent 60%), radial-gradient(800px 600px at 95% 10%, #c4b5fd 0%, transparent 60%), radial-gradient(700px 520px at 50% 105%, #a5f3fc 0%, transparent 60%), #eef4fb;
    --mc-bg: #eef4fb; --mc-surface: rgba(255, 255, 255, .58); --mc-surface-2: rgba(255, 255, 255, .38); --mc-border: rgba(255, 255, 255, .7);
    --mc-text: #1d2236; --mc-muted: #5b6280; --mc-accent: #0d9488; --mc-accent-soft: rgba(13, 148, 136, 0.14); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%); --bq-glow: 0 12px 24px rgba(168, 85, 247, 0.32); --bq-chip: rgba(255, 255, 255, .5); --bq-page: radial-gradient(800px 560px at 10% 0%, #a7f3d0 0%, transparent 60%), radial-gradient(800px 600px at 95% 10%, #c4b5fd 0%, transparent 60%), radial-gradient(700px 520px at 50% 105%, #a5f3fc 0%, transparent 60%), #eef4fb;
    --ui-solid: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="g-aurora"][data-scheme="dark"],
[data-skin="g-aurora"][data-scheme="dark"] body.skin-bq,
[data-skin="g-aurora"][data-scheme="dark"] .mp-rail,
[data-skin="g-aurora"][data-scheme="dark"] .mp-fly,
[data-skin="g-aurora"][data-scheme="dark"] .mp-cz {
    --bg: #0a0f24; --sf: rgba(16, 20, 38, .52); --sf2: rgba(255, 255, 255, .07); --bd: rgba(255, 255, 255, .13); --ln: rgba(255, 255, 255, .1);
    --tx: #eef2ff; --mu: #a3abc8; --chip: rgba(255, 255, 255, .08);
    --ac: #5eead4; --ac-soft: rgba(94, 234, 212, 0.18); --grad: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
    --glow: 0 12px 26px rgba(34, 211, 238, 0.4); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(800px 560px at 10% 0%, rgba(16, 185, 129, .55) 0%, transparent 60%), radial-gradient(800px 600px at 95% 10%, rgba(168, 85, 247, .55) 0%, transparent 60%), radial-gradient(700px 520px at 50% 105%, rgba(34, 211, 238, .4) 0%, transparent 60%), #0a0f24;
    --mc-bg: #0a0f24; --mc-surface: rgba(16, 20, 38, .52); --mc-surface-2: rgba(255, 255, 255, .07); --mc-border: rgba(255, 255, 255, .13);
    --mc-text: #eef2ff; --mc-muted: #a3abc8; --mc-accent: #5eead4; --mc-accent-soft: rgba(94, 234, 212, 0.18); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%); --bq-glow: 0 12px 26px rgba(34, 211, 238, 0.4); --bq-chip: rgba(255, 255, 255, .08); --bq-page: radial-gradient(800px 560px at 10% 0%, rgba(16, 185, 129, .55) 0%, transparent 60%), radial-gradient(800px 600px at 95% 10%, rgba(168, 85, 247, .55) 0%, transparent 60%), radial-gradient(700px 520px at 50% 105%, rgba(34, 211, 238, .4) 0%, transparent 60%), #0a0f24;
    --ui-solid: #161a2e;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="g-frost"][data-scheme="light"],
[data-skin="g-frost"][data-scheme="light"] body.skin-bq,
[data-skin="g-frost"][data-scheme="light"] .mp-rail,
[data-skin="g-frost"][data-scheme="light"] .mp-fly,
[data-skin="g-frost"][data-scheme="light"] .mp-cz {
    --bg: #f4f8fd; --sf: rgba(255, 255, 255, .58); --sf2: rgba(255, 255, 255, .38); --bd: rgba(255, 255, 255, .7); --ln: rgba(255, 255, 255, .55);
    --tx: #1d2236; --mu: #5b6280; --chip: rgba(255, 255, 255, .5);
    --ac: #2563eb; --ac-soft: rgba(37, 99, 235, 0.14); --grad: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
    --glow: 0 12px 24px rgba(59, 130, 246, 0.32); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(900px 600px at 0% 0%, #dbeafe 0%, transparent 60%), radial-gradient(800px 600px at 100% 20%, #e0f2fe 0%, transparent 60%), radial-gradient(700px 500px at 40% 110%, #ede9fe 0%, transparent 60%), #f4f8fd;
    --mc-bg: #f4f8fd; --mc-surface: rgba(255, 255, 255, .58); --mc-surface-2: rgba(255, 255, 255, .38); --mc-border: rgba(255, 255, 255, .7);
    --mc-text: #1d2236; --mc-muted: #5b6280; --mc-accent: #2563eb; --mc-accent-soft: rgba(37, 99, 235, 0.14); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%); --bq-glow: 0 12px 24px rgba(59, 130, 246, 0.32); --bq-chip: rgba(255, 255, 255, .5); --bq-page: radial-gradient(900px 600px at 0% 0%, #dbeafe 0%, transparent 60%), radial-gradient(800px 600px at 100% 20%, #e0f2fe 0%, transparent 60%), radial-gradient(700px 500px at 40% 110%, #ede9fe 0%, transparent 60%), #f4f8fd;
    --ui-solid: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="g-frost"][data-scheme="dark"],
[data-skin="g-frost"][data-scheme="dark"] body.skin-bq,
[data-skin="g-frost"][data-scheme="dark"] .mp-rail,
[data-skin="g-frost"][data-scheme="dark"] .mp-fly,
[data-skin="g-frost"][data-scheme="dark"] .mp-cz {
    --bg: #0d1424; --sf: rgba(16, 20, 38, .52); --sf2: rgba(255, 255, 255, .07); --bd: rgba(255, 255, 255, .13); --ln: rgba(255, 255, 255, .1);
    --tx: #eef2ff; --mu: #a3abc8; --chip: rgba(255, 255, 255, .08);
    --ac: #93c5fd; --ac-soft: rgba(147, 197, 253, 0.18); --grad: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    --glow: 0 12px 26px rgba(96, 165, 250, 0.4); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(900px 600px at 0% 0%, rgba(96, 165, 250, .35) 0%, transparent 60%), radial-gradient(800px 600px at 100% 20%, rgba(186, 230, 253, .18) 0%, transparent 60%), #0d1424;
    --mc-bg: #0d1424; --mc-surface: rgba(16, 20, 38, .52); --mc-surface-2: rgba(255, 255, 255, .07); --mc-border: rgba(255, 255, 255, .13);
    --mc-text: #eef2ff; --mc-muted: #a3abc8; --mc-accent: #93c5fd; --mc-accent-soft: rgba(147, 197, 253, 0.18); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); --bq-glow: 0 12px 26px rgba(96, 165, 250, 0.4); --bq-chip: rgba(255, 255, 255, .08); --bq-page: radial-gradient(900px 600px at 0% 0%, rgba(96, 165, 250, .35) 0%, transparent 60%), radial-gradient(800px 600px at 100% 20%, rgba(186, 230, 253, .18) 0%, transparent 60%), #0d1424;
    --ui-solid: #161a2e;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="g-sunset"][data-scheme="light"],
[data-skin="g-sunset"][data-scheme="light"] body.skin-bq,
[data-skin="g-sunset"][data-scheme="light"] .mp-rail,
[data-skin="g-sunset"][data-scheme="light"] .mp-fly,
[data-skin="g-sunset"][data-scheme="light"] .mp-cz {
    --bg: #fdf2ec; --sf: rgba(255, 255, 255, .58); --sf2: rgba(255, 255, 255, .38); --bd: rgba(255, 255, 255, .7); --ln: rgba(255, 255, 255, .55);
    --tx: #2f1d24; --mu: #7a5c66; --chip: rgba(255, 255, 255, .5);
    --ac: #ea580c; --ac-soft: rgba(234, 88, 12, 0.14); --grad: linear-gradient(135deg, #fb923c 0%, #db2777 100%);
    --glow: 0 12px 24px rgba(219, 39, 119, 0.32); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(800px 560px at 0% 0%, #fed7aa 0%, transparent 60%), radial-gradient(800px 600px at 100% 0%, #fbcfe8 0%, transparent 60%), radial-gradient(800px 560px at 60% 110%, #ddd6fe 0%, transparent 60%), #fdf2ec;
    --mc-bg: #fdf2ec; --mc-surface: rgba(255, 255, 255, .58); --mc-surface-2: rgba(255, 255, 255, .38); --mc-border: rgba(255, 255, 255, .7);
    --mc-text: #2f1d24; --mc-muted: #7a5c66; --mc-accent: #ea580c; --mc-accent-soft: rgba(234, 88, 12, 0.14); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #fb923c 0%, #db2777 100%); --bq-glow: 0 12px 24px rgba(219, 39, 119, 0.32); --bq-chip: rgba(255, 255, 255, .5); --bq-page: radial-gradient(800px 560px at 0% 0%, #fed7aa 0%, transparent 60%), radial-gradient(800px 600px at 100% 0%, #fbcfe8 0%, transparent 60%), radial-gradient(800px 560px at 60% 110%, #ddd6fe 0%, transparent 60%), #fdf2ec;
    --ui-solid: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="g-sunset"][data-scheme="dark"],
[data-skin="g-sunset"][data-scheme="dark"] body.skin-bq,
[data-skin="g-sunset"][data-scheme="dark"] .mp-rail,
[data-skin="g-sunset"][data-scheme="dark"] .mp-fly,
[data-skin="g-sunset"][data-scheme="dark"] .mp-cz {
    --bg: #1a0f1f; --sf: rgba(16, 20, 38, .52); --sf2: rgba(255, 255, 255, .07); --bd: rgba(255, 255, 255, .13); --ln: rgba(255, 255, 255, .1);
    --tx: #eef2ff; --mu: #a3abc8; --chip: rgba(255, 255, 255, .08);
    --ac: #fdba74; --ac-soft: rgba(253, 186, 116, 0.18); --grad: linear-gradient(135deg, #fb923c 0%, #db2777 100%);
    --glow: 0 12px 26px rgba(251, 146, 60, 0.4); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(800px 560px at 0% 0%, rgba(251, 146, 60, .5) 0%, transparent 60%), radial-gradient(800px 600px at 100% 0%, rgba(219, 39, 119, .5) 0%, transparent 60%), radial-gradient(800px 560px at 60% 110%, rgba(124, 58, 237, .45) 0%, transparent 60%), #1a0f1f;
    --mc-bg: #1a0f1f; --mc-surface: rgba(16, 20, 38, .52); --mc-surface-2: rgba(255, 255, 255, .07); --mc-border: rgba(255, 255, 255, .13);
    --mc-text: #eef2ff; --mc-muted: #a3abc8; --mc-accent: #fdba74; --mc-accent-soft: rgba(253, 186, 116, 0.18); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #fb923c 0%, #db2777 100%); --bq-glow: 0 12px 26px rgba(251, 146, 60, 0.4); --bq-chip: rgba(255, 255, 255, .08); --bq-page: radial-gradient(800px 560px at 0% 0%, rgba(251, 146, 60, .5) 0%, transparent 60%), radial-gradient(800px 600px at 100% 0%, rgba(219, 39, 119, .5) 0%, transparent 60%), radial-gradient(800px 560px at 60% 110%, rgba(124, 58, 237, .45) 0%, transparent 60%), #1a0f1f;
    --ui-solid: #161a2e;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="g-ocean"][data-scheme="light"],
[data-skin="g-ocean"][data-scheme="light"] body.skin-bq,
[data-skin="g-ocean"][data-scheme="light"] .mp-rail,
[data-skin="g-ocean"][data-scheme="light"] .mp-fly,
[data-skin="g-ocean"][data-scheme="light"] .mp-cz {
    --bg: #eef8fb; --sf: rgba(255, 255, 255, .58); --sf2: rgba(255, 255, 255, .38); --bd: rgba(255, 255, 255, .7); --ln: rgba(255, 255, 255, .55);
    --tx: #1d2236; --mu: #5b6280; --chip: rgba(255, 255, 255, .5);
    --ac: #0e7490; --ac-soft: rgba(14, 116, 144, 0.14); --grad: linear-gradient(135deg, #22d3ee 0%, #0369a1 100%);
    --glow: 0 12px 24px rgba(3, 105, 161, 0.32); --sh: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --sh-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --page: radial-gradient(800px 560px at 0% 0%, #a5f3fc 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, #bae6fd 0%, transparent 60%), radial-gradient(700px 520px at 40% 110%, #99f6e4 0%, transparent 60%), #eef8fb;
    --mc-bg: #eef8fb; --mc-surface: rgba(255, 255, 255, .58); --mc-surface-2: rgba(255, 255, 255, .38); --mc-border: rgba(255, 255, 255, .7);
    --mc-text: #1d2236; --mc-muted: #5b6280; --mc-accent: #0e7490; --mc-accent-soft: rgba(14, 116, 144, 0.14); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(40, 30, 30, .04), 0 8px 24px rgba(60, 40, 40, .08); --mc-shadow-lg: 0 24px 60px rgba(30, 20, 20, .22);
    --bq-grad: linear-gradient(135deg, #22d3ee 0%, #0369a1 100%); --bq-glow: 0 12px 24px rgba(3, 105, 161, 0.32); --bq-chip: rgba(255, 255, 255, .5); --bq-page: radial-gradient(800px 560px at 0% 0%, #a5f3fc 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, #bae6fd 0%, transparent 60%), radial-gradient(700px 520px at 40% 110%, #99f6e4 0%, transparent 60%), #eef8fb;
    --ui-solid: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #3f9f76; --mc-warning: #d99a3a; --mc-danger: #d0555e; --mc-info: #5d8fb0; --mc-purple: #8e6bb3;
    color-scheme: light;
}
[data-skin="g-ocean"][data-scheme="dark"],
[data-skin="g-ocean"][data-scheme="dark"] body.skin-bq,
[data-skin="g-ocean"][data-scheme="dark"] .mp-rail,
[data-skin="g-ocean"][data-scheme="dark"] .mp-fly,
[data-skin="g-ocean"][data-scheme="dark"] .mp-cz {
    --bg: #06141f; --sf: rgba(16, 20, 38, .52); --sf2: rgba(255, 255, 255, .07); --bd: rgba(255, 255, 255, .13); --ln: rgba(255, 255, 255, .1);
    --tx: #eef2ff; --mu: #a3abc8; --chip: rgba(255, 255, 255, .08);
    --ac: #67e8f9; --ac-soft: rgba(103, 232, 249, 0.18); --grad: linear-gradient(135deg, #22d3ee 0%, #0369a1 100%);
    --glow: 0 12px 26px rgba(34, 211, 238, 0.4); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(800px 560px at 0% 0%, rgba(34, 211, 238, .45) 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, rgba(3, 105, 161, .6) 0%, transparent 60%), radial-gradient(700px 520px at 40% 110%, rgba(20, 184, 166, .35) 0%, transparent 60%), #06141f;
    --mc-bg: #06141f; --mc-surface: rgba(16, 20, 38, .52); --mc-surface-2: rgba(255, 255, 255, .07); --mc-border: rgba(255, 255, 255, .13);
    --mc-text: #eef2ff; --mc-muted: #a3abc8; --mc-accent: #67e8f9; --mc-accent-soft: rgba(103, 232, 249, 0.18); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #22d3ee 0%, #0369a1 100%); --bq-glow: 0 12px 26px rgba(34, 211, 238, 0.4); --bq-chip: rgba(255, 255, 255, .08); --bq-page: radial-gradient(800px 560px at 0% 0%, rgba(34, 211, 238, .45) 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, rgba(3, 105, 161, .6) 0%, transparent 60%), radial-gradient(700px 520px at 40% 110%, rgba(20, 184, 166, .35) 0%, transparent 60%), #06141f;
    --ui-solid: #161a2e;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}

/* ---------- Designs A-H (🎨 panel > Design): their own colours plus the side menu colours (--sb-*) for nav.css. GENERATED by gen_ds.py ---------- */
[data-skin="ds-a"][data-scheme="light"],
[data-skin="ds-a"][data-scheme="light"] body.skin-bq,
[data-skin="ds-a"][data-scheme="light"] .mp-rail,
[data-skin="ds-a"][data-scheme="light"] .mp-fly,
[data-skin="ds-a"][data-scheme="light"] .mp-cz {
    --bg: #faf6f4; --sf: #ffffff; --sf2: #f4ecea; --bd: #eee3e1; --ln: #eee3e1;
    --tx: #2f2427; --mu: #8d7d80; --chip: #f4ecea;
    --ac: #c0566e; --ac-soft: #fbe8ec; --grad: linear-gradient(135deg, #d0707f 0%, #a8455e 100%);
    --glow: 0 12px 24px rgba(192, 86, 110, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #faf6f4;
    --mc-bg: #faf6f4; --mc-surface: #ffffff; --mc-surface-2: #f4ecea; --mc-border: #eee3e1;
    --mc-text: #2f2427; --mc-muted: #8d7d80; --mc-accent: #c0566e; --mc-accent-soft: #fbe8ec; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #d0707f 0%, #a8455e 100%); --bq-glow: 0 12px 24px rgba(192, 86, 110, .30); --bq-chip: #f4ecea; --bq-page: #faf6f4;
    --ui-solid: #ffffff;
    --sb: #ffffff; --sb-tx: #4a3b3e; --sb-mu: #a8989b; --sb-bd: #f1e7e5; --sb-on: #fbe8ec; --sb-on-tx: #b04760; --sb-badge: #c0566e; --sb-badge-tx: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-a"][data-scheme="dark"],
[data-skin="ds-a"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-a"][data-scheme="dark"] .mp-rail,
[data-skin="ds-a"][data-scheme="dark"] .mp-fly,
[data-skin="ds-a"][data-scheme="dark"] .mp-cz {
    --bg: hsl(346 16% 6%); --sf: hsl(346 16% 10%); --sf2: hsl(346 16% 13%); --bd: hsl(346 14% 18%); --ln: hsl(346 14% 18%);
    --tx: hsl(346 30% 94%); --mu: hsl(346 12% 63%); --chip: hsl(346 16% 13%);
    --ac: #d28597; --ac-soft: hsl(346 35% 17%); --grad: linear-gradient(135deg, #d0707f 0%, #a8455e 100%);
    --glow: 0 12px 24px rgba(192, 86, 110, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(192, 86, 110, .22), transparent 70%), hsl(346 16% 6%);
    --mc-bg: hsl(346 16% 6%); --mc-surface: hsl(346 16% 10%); --mc-surface-2: hsl(346 16% 13%); --mc-border: hsl(346 14% 18%);
    --mc-text: hsl(346 30% 94%); --mc-muted: hsl(346 12% 63%); --mc-accent: #d28597; --mc-accent-soft: hsl(346 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #d0707f 0%, #a8455e 100%); --bq-glow: 0 12px 24px rgba(192, 86, 110, .38); --bq-chip: hsl(346 16% 13%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(192, 86, 110, .22), transparent 70%), hsl(346 16% 6%);
    --ui-solid: hsl(346 16% 10%);
    --sb: hsl(346 16% 8%); --sb-tx: hsl(346 18% 78%); --sb-mu: hsl(346 10% 50%); --sb-bd: hsl(346 14% 15%); --sb-on: hsl(346 35% 17%); --sb-on-tx: #d28597; --sb-badge: #d28597; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ds-b"][data-scheme="light"],
[data-skin="ds-b"][data-scheme="light"] body.skin-bq,
[data-skin="ds-b"][data-scheme="light"] .mp-rail,
[data-skin="ds-b"][data-scheme="light"] .mp-fly,
[data-skin="ds-b"][data-scheme="light"] .mp-cz {
    --bg: #f6f7f9; --sf: #ffffff; --sf2: #f3f4f6; --bd: #e5e7eb; --ln: #e5e7eb;
    --tx: #111827; --mu: #6b7280; --chip: #f3f4f6;
    --ac: #4f46e5; --ac-soft: #eef2ff; --grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --glow: 0 12px 24px rgba(79, 70, 229, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #f6f7f9;
    --mc-bg: #f6f7f9; --mc-surface: #ffffff; --mc-surface-2: #f3f4f6; --mc-border: #e5e7eb;
    --mc-text: #111827; --mc-muted: #6b7280; --mc-accent: #4f46e5; --mc-accent-soft: #eef2ff; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --bq-glow: 0 12px 24px rgba(79, 70, 229, .30); --bq-chip: #f3f4f6; --bq-page: #f6f7f9;
    --ui-solid: #ffffff;
    --sb: #ffffff; --sb-tx: #374151; --sb-mu: #9ca3af; --sb-bd: #e5e7eb; --sb-on: #eef2ff; --sb-on-tx: #4338ca; --sb-badge: #4f46e5; --sb-badge-tx: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-b"][data-scheme="dark"],
[data-skin="ds-b"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-b"][data-scheme="dark"] .mp-rail,
[data-skin="ds-b"][data-scheme="dark"] .mp-fly,
[data-skin="ds-b"][data-scheme="dark"] .mp-cz {
    --bg: hsl(243 16% 6%); --sf: hsl(243 16% 10%); --sf2: hsl(243 16% 13%); --bd: hsl(243 14% 18%); --ln: hsl(243 14% 18%);
    --tx: hsl(243 30% 94%); --mu: hsl(243 12% 63%); --chip: hsl(243 16% 13%);
    --ac: #807aec; --ac-soft: hsl(243 35% 17%); --grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --glow: 0 12px 24px rgba(79, 70, 229, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(79, 70, 229, .22), transparent 70%), hsl(243 16% 6%);
    --mc-bg: hsl(243 16% 6%); --mc-surface: hsl(243 16% 10%); --mc-surface-2: hsl(243 16% 13%); --mc-border: hsl(243 14% 18%);
    --mc-text: hsl(243 30% 94%); --mc-muted: hsl(243 12% 63%); --mc-accent: #807aec; --mc-accent-soft: hsl(243 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --bq-glow: 0 12px 24px rgba(79, 70, 229, .38); --bq-chip: hsl(243 16% 13%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(79, 70, 229, .22), transparent 70%), hsl(243 16% 6%);
    --ui-solid: hsl(243 16% 10%);
    --sb: hsl(243 16% 8%); --sb-tx: hsl(243 18% 78%); --sb-mu: hsl(243 10% 50%); --sb-bd: hsl(243 14% 15%); --sb-on: hsl(243 35% 17%); --sb-on-tx: #807aec; --sb-badge: #807aec; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ds-c"][data-scheme="light"],
[data-skin="ds-c"][data-scheme="light"] body.skin-bq,
[data-skin="ds-c"][data-scheme="light"] .mp-rail,
[data-skin="ds-c"][data-scheme="light"] .mp-fly,
[data-skin="ds-c"][data-scheme="light"] .mp-cz {
    --bg: #f4f6f5; --sf: #ffffff; --sf2: #eef2f0; --bd: #e3e8e6; --ln: #e3e8e6;
    --tx: #14201b; --mu: #6b7a74; --chip: #eef2f0;
    --ac: #0f9d76; --ac-soft: #e3f6ef; --grad: linear-gradient(135deg, #13b386 0%, #0b7f5f 100%);
    --glow: 0 12px 24px rgba(15, 157, 118, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #f4f6f5;
    --mc-bg: #f4f6f5; --mc-surface: #ffffff; --mc-surface-2: #eef2f0; --mc-border: #e3e8e6;
    --mc-text: #14201b; --mc-muted: #6b7a74; --mc-accent: #0f9d76; --mc-accent-soft: #e3f6ef; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #13b386 0%, #0b7f5f 100%); --bq-glow: 0 12px 24px rgba(15, 157, 118, .30); --bq-chip: #eef2f0; --bq-page: #f4f6f5;
    --ui-solid: #ffffff;
    --sb: #15201c; --sb-tx: #c9d5d0; --sb-mu: #6f817a; --sb-bd: #22332d; --sb-on: #22332d; --sb-on-tx: #ffffff; --sb-badge: #0f9d76; --sb-badge-tx: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-c"][data-scheme="dark"],
[data-skin="ds-c"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-c"][data-scheme="dark"] .mp-rail,
[data-skin="ds-c"][data-scheme="dark"] .mp-fly,
[data-skin="ds-c"][data-scheme="dark"] .mp-cz {
    --bg: hsl(164 16% 6%); --sf: hsl(164 16% 10%); --sf2: hsl(164 16% 13%); --bd: hsl(164 14% 18%); --ln: hsl(164 14% 18%);
    --tx: hsl(164 30% 94%); --mu: hsl(164 12% 63%); --chip: hsl(164 16% 13%);
    --ac: #52b89c; --ac-soft: hsl(164 35% 17%); --grad: linear-gradient(135deg, #13b386 0%, #0b7f5f 100%);
    --glow: 0 12px 24px rgba(15, 157, 118, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(15, 157, 118, .22), transparent 70%), hsl(164 16% 6%);
    --mc-bg: hsl(164 16% 6%); --mc-surface: hsl(164 16% 10%); --mc-surface-2: hsl(164 16% 13%); --mc-border: hsl(164 14% 18%);
    --mc-text: hsl(164 30% 94%); --mc-muted: hsl(164 12% 63%); --mc-accent: #52b89c; --mc-accent-soft: hsl(164 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #13b386 0%, #0b7f5f 100%); --bq-glow: 0 12px 24px rgba(15, 157, 118, .38); --bq-chip: hsl(164 16% 13%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(15, 157, 118, .22), transparent 70%), hsl(164 16% 6%);
    --ui-solid: hsl(164 16% 10%);
    --sb: hsl(164 16% 8%); --sb-tx: hsl(164 18% 78%); --sb-mu: hsl(164 10% 50%); --sb-bd: hsl(164 14% 15%); --sb-on: hsl(164 35% 17%); --sb-on-tx: #52b89c; --sb-badge: #52b89c; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ds-d"][data-scheme="light"],
[data-skin="ds-d"][data-scheme="light"] body.skin-bq,
[data-skin="ds-d"][data-scheme="light"] .mp-rail,
[data-skin="ds-d"][data-scheme="light"] .mp-fly,
[data-skin="ds-d"][data-scheme="light"] .mp-cz {
    --bg: #f5efe7; --sf: #fffcf8; --sf2: #efe5d9; --bd: #e8ddd0; --ln: #e8ddd0;
    --tx: #2b231d; --mu: #8b7d70; --chip: #efe5d9;
    --ac: #b5653f; --ac-soft: #f6e5da; --grad: linear-gradient(135deg, #c97a52 0%, #a0532f 100%);
    --glow: 0 12px 24px rgba(181, 101, 63, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #f5efe7;
    --mc-bg: #f5efe7; --mc-surface: #fffcf8; --mc-surface-2: #efe5d9; --mc-border: #e8ddd0;
    --mc-text: #2b231d; --mc-muted: #8b7d70; --mc-accent: #b5653f; --mc-accent-soft: #f6e5da; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #c97a52 0%, #a0532f 100%); --bq-glow: 0 12px 24px rgba(181, 101, 63, .30); --bq-chip: #efe5d9; --bq-page: #f5efe7;
    --ui-solid: #fffcf8;
    --sb: #2b231d; --sb-tx: #d8ccbf; --sb-mu: #8f8172; --sb-bd: #3a3029; --sb-on: #f5efe7; --sb-on-tx: #2b231d; --sb-badge: #b5653f; --sb-badge-tx: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-d"][data-scheme="dark"],
[data-skin="ds-d"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-d"][data-scheme="dark"] .mp-rail,
[data-skin="ds-d"][data-scheme="dark"] .mp-fly,
[data-skin="ds-d"][data-scheme="dark"] .mp-cz {
    --bg: hsl(19 16% 6%); --sf: hsl(19 16% 10%); --sf2: hsl(19 16% 13%); --bd: hsl(19 14% 18%); --ln: hsl(19 14% 18%);
    --tx: hsl(19 30% 94%); --mu: hsl(19 12% 63%); --chip: hsl(19 16% 13%);
    --ac: #ca9075; --ac-soft: hsl(19 35% 17%); --grad: linear-gradient(135deg, #c97a52 0%, #a0532f 100%);
    --glow: 0 12px 24px rgba(181, 101, 63, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(181, 101, 63, .22), transparent 70%), hsl(19 16% 6%);
    --mc-bg: hsl(19 16% 6%); --mc-surface: hsl(19 16% 10%); --mc-surface-2: hsl(19 16% 13%); --mc-border: hsl(19 14% 18%);
    --mc-text: hsl(19 30% 94%); --mc-muted: hsl(19 12% 63%); --mc-accent: #ca9075; --mc-accent-soft: hsl(19 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #c97a52 0%, #a0532f 100%); --bq-glow: 0 12px 24px rgba(181, 101, 63, .38); --bq-chip: hsl(19 16% 13%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(181, 101, 63, .22), transparent 70%), hsl(19 16% 6%);
    --ui-solid: hsl(19 16% 10%);
    --sb: hsl(19 16% 8%); --sb-tx: hsl(19 18% 78%); --sb-mu: hsl(19 10% 50%); --sb-bd: hsl(19 14% 15%); --sb-on: hsl(19 35% 17%); --sb-on-tx: #ca9075; --sb-badge: #ca9075; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ds-e"][data-scheme="light"],
[data-skin="ds-e"][data-scheme="light"] body.skin-bq,
[data-skin="ds-e"][data-scheme="light"] .mp-rail,
[data-skin="ds-e"][data-scheme="light"] .mp-fly,
[data-skin="ds-e"][data-scheme="light"] .mp-cz {
    --bg: #f7f6fb; --sf: #ffffff; --sf2: #f1eff8; --bd: #e7e4f0; --ln: #e7e4f0;
    --tx: #1d1830; --mu: #76708c; --chip: #f1eff8;
    --ac: #7c5cdb; --ac-soft: #efeafd; --grad: linear-gradient(135deg, #8f6ff0 0%, #6a45cf 100%);
    --glow: 0 12px 24px rgba(124, 92, 219, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #f7f6fb;
    --mc-bg: #f7f6fb; --mc-surface: #ffffff; --mc-surface-2: #f1eff8; --mc-border: #e7e4f0;
    --mc-text: #1d1830; --mc-muted: #76708c; --mc-accent: #7c5cdb; --mc-accent-soft: #efeafd; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #8f6ff0 0%, #6a45cf 100%); --bq-glow: 0 12px 24px rgba(124, 92, 219, .30); --bq-chip: #f1eff8; --bq-page: #f7f6fb;
    --ui-solid: #ffffff;
    --sb: #1d1830; --sb-tx: #cfc9e6; --sb-mu: #8a83a6; --sb-bd: #2a2443; --sb-on: #7c5cdb; --sb-on-tx: #ffffff; --sb-badge: #7c5cdb; --sb-badge-tx: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-e"][data-scheme="dark"],
[data-skin="ds-e"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-e"][data-scheme="dark"] .mp-rail,
[data-skin="ds-e"][data-scheme="dark"] .mp-fly,
[data-skin="ds-e"][data-scheme="dark"] .mp-cz {
    --bg: hsl(255 16% 6%); --sf: hsl(255 16% 10%); --sf2: hsl(255 16% 13%); --bd: hsl(255 14% 18%); --ln: hsl(255 14% 18%);
    --tx: hsl(255 30% 94%); --mu: hsl(255 12% 63%); --chip: hsl(255 16% 13%);
    --ac: #a18ae5; --ac-soft: hsl(255 35% 17%); --grad: linear-gradient(135deg, #8f6ff0 0%, #6a45cf 100%);
    --glow: 0 12px 24px rgba(124, 92, 219, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(124, 92, 219, .22), transparent 70%), hsl(255 16% 6%);
    --mc-bg: hsl(255 16% 6%); --mc-surface: hsl(255 16% 10%); --mc-surface-2: hsl(255 16% 13%); --mc-border: hsl(255 14% 18%);
    --mc-text: hsl(255 30% 94%); --mc-muted: hsl(255 12% 63%); --mc-accent: #a18ae5; --mc-accent-soft: hsl(255 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #8f6ff0 0%, #6a45cf 100%); --bq-glow: 0 12px 24px rgba(124, 92, 219, .38); --bq-chip: hsl(255 16% 13%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(124, 92, 219, .22), transparent 70%), hsl(255 16% 6%);
    --ui-solid: hsl(255 16% 10%);
    --sb: hsl(255 16% 8%); --sb-tx: hsl(255 18% 78%); --sb-mu: hsl(255 10% 50%); --sb-bd: hsl(255 14% 15%); --sb-on: hsl(255 35% 17%); --sb-on-tx: #a18ae5; --sb-badge: #a18ae5; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="g-pastel"][data-scheme="light"],
[data-skin="g-pastel"][data-scheme="light"] body.skin-bq,
[data-skin="g-pastel"][data-scheme="light"] .mp-rail,
[data-skin="g-pastel"][data-scheme="light"] .mp-fly,
[data-skin="g-pastel"][data-scheme="light"] .mp-cz {
    --bg: #f6f3fa; --sf: rgba(255, 255, 255, .62); --sf2: rgba(255, 255, 255, .55); --bd: rgba(120, 100, 140, .16); --ln: rgba(120, 100, 140, .16);
    --tx: #24202e; --mu: #6e6880; --chip: rgba(255, 255, 255, .7);
    --ac: #e0577d; --ac-soft: rgba(224, 87, 125, .12); --grad: linear-gradient(135deg, #ec688f 0%, #a06eeb 100%);
    --glow: 0 12px 24px rgba(224, 87, 125, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: radial-gradient(900px 600px at 0% 0%, #ffd6e3 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, #d9e4ff 0%, transparent 60%), radial-gradient(900px 700px at 50% 100%, #e6fff3 0%, transparent 60%), #f6f3fa;
    --mc-bg: #f6f3fa; --mc-surface: rgba(255, 255, 255, .62); --mc-surface-2: rgba(255, 255, 255, .55); --mc-border: rgba(120, 100, 140, .16);
    --mc-text: #24202e; --mc-muted: #6e6880; --mc-accent: #e0577d; --mc-accent-soft: rgba(224, 87, 125, .12); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #ec688f 0%, #a06eeb 100%); --bq-glow: 0 12px 24px rgba(224, 87, 125, .30); --bq-chip: rgba(255, 255, 255, .7); --bq-page: radial-gradient(900px 600px at 0% 0%, #ffd6e3 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, #d9e4ff 0%, transparent 60%), radial-gradient(900px 700px at 50% 100%, #e6fff3 0%, transparent 60%), #f6f3fa;
    --ui-solid: #ffffff;
    --sb: rgba(255, 255, 255, .55); --sb-tx: #3a3446; --sb-mu: #8b8499; --sb-bd: rgba(255, 255, 255, .7); --sb-on: rgba(255, 255, 255, .92); --sb-on-tx: #e0577d; --sb-badge: #e0577d; --sb-badge-tx: #ffffff;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="g-pastel"][data-scheme="dark"],
[data-skin="g-pastel"][data-scheme="dark"] body.skin-bq,
[data-skin="g-pastel"][data-scheme="dark"] .mp-rail,
[data-skin="g-pastel"][data-scheme="dark"] .mp-fly,
[data-skin="g-pastel"][data-scheme="dark"] .mp-cz {
    --bg: hsl(343 16% 6%); --sf: hsla(343, 20%, 14%, .62); --sf2: hsla(343, 20%, 18%, .55); --bd: hsl(343 14% 18%); --ln: hsl(343 14% 18%);
    --tx: hsl(343 30% 94%); --mu: hsl(343 12% 63%); --chip: hsla(343, 20%, 18%, .55);
    --ac: #e986a1; --ac-soft: hsl(343 35% 17%); --grad: linear-gradient(135deg, #ec688f 0%, #a06eeb 100%);
    --glow: 0 12px 24px rgba(224, 87, 125, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(224, 87, 125, .22), transparent 70%), hsl(343 16% 6%);
    --mc-bg: hsl(343 16% 6%); --mc-surface: hsla(343, 20%, 14%, .62); --mc-surface-2: hsla(343, 20%, 18%, .55); --mc-border: hsl(343 14% 18%);
    --mc-text: hsl(343 30% 94%); --mc-muted: hsl(343 12% 63%); --mc-accent: #e986a1; --mc-accent-soft: hsl(343 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #ec688f 0%, #a06eeb 100%); --bq-glow: 0 12px 24px rgba(224, 87, 125, .38); --bq-chip: hsla(343, 20%, 18%, .55); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(224, 87, 125, .22), transparent 70%), hsl(343 16% 6%);
    --ui-solid: hsl(343 16% 11%);
    --sb: hsla(343, 20%, 12%, .6); --sb-tx: hsl(343 18% 78%); --sb-mu: hsl(343 10% 50%); --sb-bd: hsl(343 14% 15%); --sb-on: hsl(343 35% 17%); --sb-on-tx: #e986a1; --sb-badge: #e986a1; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ds-g"][data-scheme="light"],
[data-skin="ds-g"][data-scheme="light"] body.skin-bq,
[data-skin="ds-g"][data-scheme="light"] .mp-rail,
[data-skin="ds-g"][data-scheme="light"] .mp-fly,
[data-skin="ds-g"][data-scheme="light"] .mp-cz {
    --bg: #f7f5f0; --sf: #ffffff; --sf2: #f0ece3; --bd: #e6e0d3; --ln: #e6e0d3;
    --tx: #1d1a14; --mu: #7d7566; --chip: #f0ece3;
    --ac: #b7862c; --ac-soft: #f8efdc; --grad: linear-gradient(135deg, #f2c46b 0%, #c98f2a 100%);
    --glow: 0 12px 24px rgba(201, 154, 63, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #f7f5f0;
    --mc-bg: #f7f5f0; --mc-surface: #ffffff; --mc-surface-2: #f0ece3; --mc-border: #e6e0d3;
    --mc-text: #1d1a14; --mc-muted: #7d7566; --mc-accent: #b7862c; --mc-accent-soft: #f8efdc; --mc-accent-text: #1a1406;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #f2c46b 0%, #c98f2a 100%); --bq-glow: 0 12px 24px rgba(201, 154, 63, .30); --bq-chip: #f0ece3; --bq-page: #f7f5f0;
    --ui-solid: #ffffff;
    --sb: #16130d; --sb-tx: #d9d2c3; --sb-mu: #8a8170; --sb-bd: #26211a; --sb-on: rgba(232, 176, 75, .16); --sb-on-tx: #e8b04b; --sb-badge: #e8b04b; --sb-badge-tx: #1a1406;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-g"][data-scheme="dark"],
[data-skin="ds-g"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-g"][data-scheme="dark"] .mp-rail,
[data-skin="ds-g"][data-scheme="dark"] .mp-fly,
[data-skin="ds-g"][data-scheme="dark"] .mp-cz {
    --bg: #0e1117; --sf: #161b24; --sf2: #1d2430; --bd: #252c39; --ln: #252c39;
    --tx: #e9ecf2; --mu: #8d96a8; --chip: #1d2430;
    --ac: #e8b04b; --ac-soft: rgba(232, 176, 75, .14); --grad: linear-gradient(135deg, #f2c46b 0%, #c98f2a 100%);
    --glow: 0 12px 24px rgba(232, 176, 75, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: #0e1117;
    --mc-bg: #0e1117; --mc-surface: #161b24; --mc-surface-2: #1d2430; --mc-border: #252c39;
    --mc-text: #e9ecf2; --mc-muted: #8d96a8; --mc-accent: #e8b04b; --mc-accent-soft: rgba(232, 176, 75, .14); --mc-accent-text: #1a1406;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #f2c46b 0%, #c98f2a 100%); --bq-glow: 0 12px 24px rgba(232, 176, 75, .38); --bq-chip: #1d2430; --bq-page: #0e1117;
    --ui-solid: #161b24;
    --sb: #0b0e13; --sb-tx: #aeb6c6; --sb-mu: #5f6a7d; --sb-bd: #1b212c; --sb-on: rgba(232, 176, 75, .12); --sb-on-tx: #e8b04b; --sb-badge: #e8b04b; --sb-badge-tx: #1a1406;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}
[data-skin="ds-h"][data-scheme="light"],
[data-skin="ds-h"][data-scheme="light"] body.skin-bq,
[data-skin="ds-h"][data-scheme="light"] .mp-rail,
[data-skin="ds-h"][data-scheme="light"] .mp-fly,
[data-skin="ds-h"][data-scheme="light"] .mp-cz {
    --bg: #eef3f8; --sf: #ffffff; --sf2: #edf2f7; --bd: #e1e8f0; --ln: #e1e8f0;
    --tx: #0f2238; --mu: #64788f; --chip: #edf2f7;
    --ac: #0a84d6; --ac-soft: #e2f1fc; --grad: linear-gradient(135deg, #1aa0f0 0%, #0a6bc0 100%);
    --glow: 0 12px 24px rgba(10, 132, 214, .30); --sh: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --sh-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --page: #eef3f8;
    --mc-bg: #eef3f8; --mc-surface: #ffffff; --mc-surface-2: #edf2f7; --mc-border: #e1e8f0;
    --mc-text: #0f2238; --mc-muted: #64788f; --mc-accent: #0a84d6; --mc-accent-soft: #e2f1fc; --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 2px rgba(30, 30, 40, .04), 0 8px 24px rgba(30, 30, 40, .07); --mc-shadow-lg: 0 24px 60px rgba(20, 20, 30, .22);
    --bq-grad: linear-gradient(135deg, #1aa0f0 0%, #0a6bc0 100%); --bq-glow: 0 12px 24px rgba(10, 132, 214, .30); --bq-chip: #edf2f7; --bq-page: #eef3f8;
    --ui-solid: #ffffff;
    --sb: linear-gradient(180deg, #0b5fa5 0%, #0a3f73 100%); --sb-tx: #d6e8f8; --sb-mu: #8fb4d6; --sb-bd: transparent; --sb-on: rgba(255, 255, 255, .16); --sb-on-tx: #ffffff; --sb-badge: #ffffff; --sb-badge-tx: #0a5fa5;
    --ok: #047857; --ok-bg: rgba(16, 185, 129, .13); --warn: #b45309; --warn-bg: #fff4e5; --bad: #be123c;
    --mc-success: #2f9e6b; --mc-warning: #c9861c; --mc-danger: #d14b55; --mc-info: #3b82c4; --mc-purple: #8b5cf6;
    color-scheme: light;
}
[data-skin="ds-h"][data-scheme="dark"],
[data-skin="ds-h"][data-scheme="dark"] body.skin-bq,
[data-skin="ds-h"][data-scheme="dark"] .mp-rail,
[data-skin="ds-h"][data-scheme="dark"] .mp-fly,
[data-skin="ds-h"][data-scheme="dark"] .mp-cz {
    --bg: hsl(204 16% 6%); --sf: hsl(204 16% 10%); --sf2: hsl(204 16% 13%); --bd: hsl(204 14% 18%); --ln: hsl(204 14% 18%);
    --tx: hsl(204 30% 94%); --mu: hsl(204 12% 63%); --chip: hsl(204 16% 13%);
    --ac: #4fa6e1; --ac-soft: hsl(204 35% 17%); --grad: linear-gradient(135deg, #1aa0f0 0%, #0a6bc0 100%);
    --glow: 0 12px 24px rgba(10, 132, 214, .38); --sh: 0 1px 0 rgba(255, 255, 255, .02) inset; --sh-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --page: radial-gradient(640px 400px at 88% -5%, rgba(10, 132, 214, .22), transparent 70%), hsl(204 16% 6%);
    --mc-bg: hsl(204 16% 6%); --mc-surface: hsl(204 16% 10%); --mc-surface-2: hsl(204 16% 13%); --mc-border: hsl(204 14% 18%);
    --mc-text: hsl(204 30% 94%); --mc-muted: hsl(204 12% 63%); --mc-accent: #4fa6e1; --mc-accent-soft: hsl(204 35% 17%); --mc-accent-text: #ffffff;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; --mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --bq-grad: linear-gradient(135deg, #1aa0f0 0%, #0a6bc0 100%); --bq-glow: 0 12px 24px rgba(10, 132, 214, .38); --bq-chip: hsl(204 16% 13%); --bq-page: radial-gradient(640px 400px at 88% -5%, rgba(10, 132, 214, .22), transparent 70%), hsl(204 16% 6%);
    --ui-solid: hsl(204 16% 10%);
    --sb: hsl(204 16% 8%); --sb-tx: hsl(204 18% 78%); --sb-mu: hsl(204 10% 50%); --sb-bd: hsl(204 14% 15%); --sb-on: hsl(204 35% 17%); --sb-on-tx: #4fa6e1; --sb-badge: #4fa6e1; --sb-badge-tx: #111111;
    --ok: #6ee7b7; --ok-bg: rgba(16, 185, 129, .14); --warn: #fdba74; --warn-bg: rgba(251, 146, 60, .15); --bad: #fda4af;
    --mc-success: #34d399; --mc-warning: #fbbf24; --mc-danger: #fb7185; --mc-info: #38bdf8; --mc-purple: #a78bfa;
    color-scheme: dark;
}

/* ---------- Shapes (html[data-shape]); the cards in the panel show each one ----------
   :not(#ui-x) lifts them over the page layouts (styles.css: Classic squares every corner).
   Shared components and page-specific controls use the same shape. */
.ui-shp[data-shape="round"]:not(#ui-x) .ui-shp-c { border-radius: 14px !important; } .ui-shp[data-shape="round"]:not(#ui-x) .ui-shp-b { border-radius: 9px !important; } .ui-shp[data-shape="round"]:not(#ui-x) .ui-shp-p { border-radius: 999px !important; }
html[data-shape="pill"] { --r: 28px; --mc-radius: 28px; --mc-radius-sm: 14px; }
html[data-shape="pill"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="pill"]:not(#ui-x) .ui-shp-c { border-radius: 28px !important;  }
html[data-shape="pill"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="pill"]:not(#ui-x) .ui-shp-b { border-radius: 999px !important;  }
html[data-shape="pill"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="pill"]:not(#ui-x) .ui-shp-p { border-radius: 999px !important;  }
html[data-shape="soft"] { --r: 14px; --mc-radius: 14px; --mc-radius-sm: 10px; }
html[data-shape="soft"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="soft"]:not(#ui-x) .ui-shp-c { border-radius: 14px !important;  }
html[data-shape="soft"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="soft"]:not(#ui-x) .ui-shp-b { border-radius: 10px !important;  }
html[data-shape="soft"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="soft"]:not(#ui-x) .ui-shp-p { border-radius: 8px !important;  }
html[data-shape="sharp"] { --r: 4px; --mc-radius: 4px; --mc-radius-sm: 3px; }
html[data-shape="sharp"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="sharp"]:not(#ui-x) .ui-shp-c { border-radius: 4px !important;  }
html[data-shape="sharp"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="sharp"]:not(#ui-x) .ui-shp-b { border-radius: 3px !important;  }
html[data-shape="sharp"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="sharp"]:not(#ui-x) .ui-shp-p { border-radius: 3px !important;  }
html[data-shape="bubble"] { --r: 28px; --mc-radius: 28px; --mc-radius-sm: 18px; }
html[data-shape="bubble"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="bubble"]:not(#ui-x) .ui-shp-c { border-radius: 28px 28px 28px 8px !important;  }
html[data-shape="bubble"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="bubble"]:not(#ui-x) .ui-shp-b { border-radius: 18px 18px 18px 6px !important;  }
html[data-shape="bubble"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="bubble"]:not(#ui-x) .ui-shp-p { border-radius: 999px !important;  }
html[data-shape="cut"] { --r: 4px; --mc-radius: 4px; --mc-radius-sm: 0; }
html[data-shape="cut"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="cut"]:not(#ui-x) .ui-shp-c { border-radius: 4px !important;  }
html[data-shape="cut"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="cut"]:not(#ui-x) .ui-shp-b { border-radius: 0 !important; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
html[data-shape="cut"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="cut"]:not(#ui-x) .ui-shp-p { border-radius: 0 !important; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
html[data-shape="neo"] { --r: 14px; --mc-radius: 14px; --mc-radius-sm: 10px; }
html[data-shape="neo"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="neo"]:not(#ui-x) .ui-shp-c { border-radius: 14px !important; border: 2px solid var(--tx) !important; box-shadow: 4px 4px 0 var(--tx) !important; }
html[data-shape="neo"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="neo"]:not(#ui-x) .ui-shp-b { border-radius: 10px !important; }
html[data-shape="neo"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-pay, .mp-ri.on, .bq-btn, .mp-cz-btn.pri, .lg-submit), .ui-shp[data-shape="neo"]:not(#ui-x) .ui-shp-b { box-shadow: 2px 2px 0 var(--tx) !important; }
html[data-shape="neo"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="neo"]:not(#ui-x) .ui-shp-p { border-radius: 999px !important;  }
html[data-shape="flat"] { --r: 8px; --mc-radius: 8px; --mc-radius-sm: 6px; }
html[data-shape="flat"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="flat"]:not(#ui-x) .ui-shp-c { border-radius: 8px !important; box-shadow: none !important; border: 1px solid var(--bd) !important; }
html[data-shape="flat"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="flat"]:not(#ui-x) .ui-shp-b { border-radius: 6px !important; box-shadow: none !important; }
html[data-shape="flat"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="flat"]:not(#ui-x) .ui-shp-p { border-radius: 6px !important;  }


html[data-shape="round"] { --r: 18px; --mc-radius: 18px; --mc-radius-sm: 12px; }
html[data-shape="round"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .mp-sec, .mp-dlg, .set-nav, .mp-rail, .mp-fly, .mp-cz-box, .modal-content, .box, .panel, .small-box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content, .mp-due, .mp-changebox, .lg-form, .sx-card, .sx-tile, .sx-hero, .hb-kpi, .hb-tile, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .rp-nav, .cdm .xc, .cdm .xframe, .cdm .xpop, .cdm .phb, .spd-box, .fs-box, .tg-panel, .kds-col, .kds-card, .spk, .spk-half, .ui-card), .ui-shp[data-shape="round"]:not(#ui-x) .ui-shp-c { border-radius: 18px !important;  }
html[data-shape="round"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-btn, .btn, .mp-ri, .mp-icon-btn, .form-control, .pg-search input, .select2-container .select2-selection, .mp-search, .mp-pay, .mp-ghost, .mp-methods button, .mp-cash button, .mp-chips button, .mp-add, .bq-btn, .set-nav a, .mp-field input, .mp-input, .mp-pic, .mp-cust, .mp-cz-btn, .bq-seg, .mp-held, .mp-cur button, .lg-field input, .lg-submit, .mp-fly a, .dropdown-menu, .select2-dropdown, .sx-btn, .sx-back, .sx-search, .sx-hic, .sx-ti, .pg-hic, .pg-input, .pg-thumb, .ex-btn, .ex-menu, .cdm .xb, .cdm .xinp, .cdm .xback, .cdm .xtabs button, .cdm .cd-dev, .spd-in, .spd-no, .spd-yes, .kds-switch, .us-role, .mp-auto, .mp-backhub, .spk-k, .spk-x, .spk-disp, .spk-lang button, .ui-tab, .ui-shop-toggle), .ui-shp[data-shape="round"]:not(#ui-x) .ui-shp-b { border-radius: 12px !important;  }
html[data-shape="round"]:not(#ui-x):not(#ui-shape-preview) :is(.pg-chip, .pg-badge, .pg-tabs a, .pg-subtabs a, .mp-subcat, .bq-pill, .label, .mp-low, .mp-in, .badge, .sx-chip, .cdm .xchip, .cdm .xpill), .ui-shp[data-shape="round"]:not(#ui-x) .ui-shp-p { border-radius: 8px !important;  }
html[data-shape="round"] { --look-card-radius: 18px; --look-control-radius: 12px; --look-frame-radius: 18px; --look-control-clip: none; }
html[data-shape="pill"] { --look-card-radius: 28px; --look-control-radius: 999px; --look-frame-radius: 28px; --look-control-clip: none; }
html[data-shape="soft"] { --look-card-radius: 14px; --look-control-radius: 10px; --look-frame-radius: 14px; --look-control-clip: none; }
html[data-shape="sharp"] { --look-card-radius: 4px; --look-control-radius: 3px; --look-frame-radius: 4px; --look-control-clip: none; }
html[data-shape="bubble"] { --look-card-radius: 28px 28px 28px 8px; --look-control-radius: 18px 18px 18px 6px; --look-frame-radius: 28px 28px 28px 8px; --look-control-clip: none; }
html[data-shape="cut"] { --look-card-radius: 4px; --look-control-radius: 0px; --look-frame-radius: 4px; --look-control-clip: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
html[data-shape="neo"] { --look-card-radius: 14px; --look-control-radius: 10px; --look-frame-radius: 14px; --look-control-clip: none; }
html[data-shape="flat"] { --look-card-radius: 8px; --look-control-radius: 6px; --look-frame-radius: 8px; --look-control-clip: none; }

/* Phones: the bottom bar keeps its own corners whatever the shape. */
@media (max-width: 767px) {
    html[data-shape]:not([data-shape="round"]):not(#ui-x) .mp-rail.mp-rail { border-radius: 22px !important; clip-path: none; }
    html[data-shape]:not(#ui-x) .mp-rail.mp-rail .mp-ri.mp-ri { border-radius: 17px !important; clip-path: none; }
}

/* ---------- Glass themes ----------
   See-through layers over a colour wash: every layer of the layout blurs
   what is behind it - the rail / bottom bar, cards, tiles, KPI boxes, side
   panels, toolbars and buttons, pop-outs, menus, sheets, dropdowns and
   dialogs. Lists and menus that drop over the page are a little more
   opaque so their text stays easy to read. */
html[data-skin^="g-"] {
    --glass-blur: blur(16px) saturate(150%);
    --glass-blur-lg: blur(22px) saturate(160%);
}
/* Touch devices: avoid a separate backdrop pass for every scrolling tile
   and control. Keep the glass colours and stronger blur on open overlays. */
@media (hover: none) and (pointer: coarse) {
    html[data-skin^="g-"] {
        --glass-blur: blur(6px) saturate(115%);
        --glass-blur-lg: blur(10px) saturate(120%);
    }
    html[data-skin^="g-"]:not(#ui-x) :is(.mp-card, .pr-card, .hb-tile, .sx-tile, .pg-kpi, .hb-kpi,
        .pg-btn, .mp-icon-btn, .mp-ghost, .mp-search, .mp-chips button, .form-control,
        .select2-container .select2-selection) {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
    html[data-skin^="g-"]:not(#ui-x) body { background-attachment: scroll !important; }
    :is(.mp-card, .pr-card, .hb-tile, .sx-tile) { animation: none !important; }
}
/* 1. The frame: rail / bottom bar, page cards, tiles, KPIs, side panels. */
html[data-skin^="g-"]:not(#ui-x) :is(.mp-rail, .pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .mp-sum, .box, .panel, .set-nav,
    .sx-card, .sx-tile, .sx-hero, .sx-bar, .hb-kpi, .hb-tile,
    .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card, .pu-side .sl-panel, .rp-nav, .rp-tb, .hb-period-nav, .lg-form,
    .small-box, .info-box, .nav-tabs-custom, .content-header:not(.kds-page-header), .main-footer) {
    background-color: var(--mc-surface) !important;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-color: var(--mc-border) !important;
}
html[data-skin^="g-"]:not(#ui-x) :is(.pg-card, .pg-kpi, .bq-card, .bq-kpi, .mp-card, .mp-cart, .box, .panel, .set-nav, .sx-card, .sx-tile, .sx-hero, .sl-list, .sl-panel, .cu-card, .pr-card, .stx-card) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--sh) !important;
}
/* 2. Controls: buttons, search boxes, toggles, chips, back buttons. */
html[data-skin^="g-"]:not(#ui-x) :is(.pg-btn:not(.pri), .pg-backbtn, .pg-search input, .sx-back, .sx-search, .sx-btn:not(.pri), .fs-btn:not(.on), .pr-view,
    .sl-dots > button, .stx-links a, .mp-search, .mp-chips button, .mp-icon-btn, .mp-ghost, .form-control, .select2-container .select2-selection) {
    background-color: var(--mc-surface-2, var(--mc-surface)) !important;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* 3. Things that open over the page: pop-outs, menus, sheets, dropdowns,
      date pickers, dialogs - stronger blur, a little more opaque. */
html[data-skin^="g-"]:not(#ui-x) :is(.mp-fly, .mp-look, .mp-cz-box, .modal-content, .mp-dlg, .fs-panel, .ex-menu, .sl-menu, .dp, .spd-box,
    .select2-dropdown, .dropdown-menu, .ui-autocomplete, .datepicker, .bootstrap-datetimepicker-widget, .dt-button-collection, .bootbox .modal-content) {
    -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
}
html[data-skin^="g-"][data-scheme="light"]:not(#ui-x) :is(.mp-fly, .mp-look, .mp-cz-box, .modal-content, .mp-dlg, .fs-panel, .ex-menu, .sl-menu, .dp, .spd-box,
    .select2-dropdown, .dropdown-menu, .ui-autocomplete, .datepicker, .bootstrap-datetimepicker-widget, .dt-button-collection) { background-color: rgba(255, 255, 255, .78) !important; }
html[data-skin^="g-"][data-scheme="dark"]:not(#ui-x) :is(.mp-fly, .mp-look, .mp-cz-box, .modal-content, .mp-dlg, .fs-panel, .ex-menu, .sl-menu, .dp, .spd-box,
    .select2-dropdown, .dropdown-menu, .ui-autocomplete, .datepicker, .bootstrap-datetimepicker-widget, .dt-button-collection) { background-color: rgba(18, 22, 40, .8) !important; }
/* The dim behind a sheet blurs the page too. */
html[data-skin^="g-"] .fs-dim, html[data-skin^="g-"] .modal-backdrop.in { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Inner boxes inside a card stay light glass, not a solid colour. */
html[data-skin^="g-"]:not(#ui-x) :is(.cu-stats, .sl-av, .sx-row, .hb-tile .hb-ic) { background-color: rgba(255, 255, 255, .22) !important; }
html[data-skin^="g-"][data-scheme="dark"]:not(#ui-x) :is(.cu-stats, .sl-av) { background-color: rgba(255, 255, 255, .06) !important; }
html[data-skin^="g-"] body { background-attachment: fixed !important; }
@media (prefers-reduced-transparency: reduce) {
    html[data-skin^="g-"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    html[data-skin^="g-"]:not(#ui-x) :is(.mp-rail, .mp-fly, .mp-look, .mp-cz-box, .modal-content, .mp-dlg, .fs-panel, .ex-menu, .pg-card, .sx-card, .dp, .spd-box) { background-color: var(--ui-solid) !important; }
}
@media print {
    html[data-skin^="g-"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---------- Icon sets (html[data-icons]); .ui-ico shows each one in the panel ----------
   emoji = pictures (drawn by mp_icon on the server); the others are the
   line icons drawn differently. */
.ui-ico[data-icons] svg.i { stroke-width: 2; fill: none; filter: none; }
html[data-icons="thin"] svg.i:not(.ui-ico *), .ui-ico[data-icons="thin"] svg.i { stroke-width: 1.4; }
html[data-icons="bold"] svg.i:not(.ui-ico *), .ui-ico[data-icons="bold"] svg.i { stroke-width: 2.7; }
html[data-icons="duo"] svg.i:not(.ui-ico *) :is(path, rect, circle), .ui-ico[data-icons="duo"] svg.i :is(path, rect, circle) { fill: currentColor; fill-opacity: .2; }
html[data-icons="duo"] :is(.mp-ri:not(.on), .sx-hic, .sx-ti, .pg-hic), .ui-ico[data-icons="duo"] .ui-ico-t { color: var(--ac) !important; }
/* Filled: a soft tile in the brand colour behind each icon. */
html[data-icons="filled"] :is(.mp-ri:not(.on), .sx-hic, .sx-ti, .pg-hic), .ui-ico[data-icons="filled"] .ui-ico-t { background: var(--ac-soft); color: var(--ac) !important; }
html[data-icons="filled"] svg.i:not(.ui-ico *), .ui-ico[data-icons="filled"] svg.i { stroke-width: 2.3; }
/* Pastel: round tiles, each in its own soft colour. */
html[data-icons="pastel"]:not(#ui-x) :is(.mp-ri:not(.on), .sx-hic, .sx-ti, .pg-hic), .ui-ico[data-icons="pastel"]:not(#ui-x) .ui-ico-t {
    border-radius: 50% !important; clip-path: none !important; background: hsl(var(--ph, 340) 85% 92%); color: hsl(var(--ph, 340) 50% 40%) !important;
}
html[data-icons="pastel"][data-icons]:not(#ui-x) .mp-rail .mp-ri:not(.on) { border-radius: 14px !important; }
html[data-icons="pastel"][data-scheme="dark"] .mp-ri:not(.on), [data-scheme="dark"] .ui-ico[data-icons="pastel"] .ui-ico-t { background: hsl(var(--ph, 340) 35% 20%); color: hsl(var(--ph, 340) 85% 78%) !important; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+1), .ui-ico-t:nth-child(4n+1) { --ph: 340; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+2), .ui-ico-t:nth-child(4n+2) { --ph: 210; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+3), .ui-ico-t:nth-child(4n+3) { --ph: 145; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+4), .ui-ico-t:nth-child(4n+4) { --ph: 35; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+5) { --ph: 270; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+6) { --ph: 185; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+7) { --ph: 55; }
:is(.mp-rail-nav, .mp-rail-end) > .mp-ri:nth-child(8n+8) { --ph: 300; }
/* Glass: frosted tiles. */
html[data-icons="glass"] :is(.mp-ri:not(.on), .sx-hic, .sx-ti, .pg-hic), .ui-ico[data-icons="glass"] .ui-ico-t {
    background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25)); border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0, 0, 0, .07); color: var(--tx) !important;
}
html[data-icons="glass"][data-scheme="dark"] .mp-ri:not(.on), [data-scheme="dark"] .ui-ico[data-icons="glass"] .ui-ico-t {
    background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 4px 12px rgba(0, 0, 0, .3);
}
/* Neon: brand-coloured lines that glow. */
html[data-icons="neon"] :is(.mp-ri:not(.on), .sx-hic, .sx-ti, .pg-hic), .ui-ico[data-icons="neon"] .ui-ico-t { color: var(--ac) !important; }
html[data-icons="neon"] svg.i:not(.ui-ico *):not(.ui-ico *), .ui-ico[data-icons="neon"] svg.i { filter: drop-shadow(0 0 3px var(--ac)); stroke-width: 1.8; }

/* Emoji turned into line icons across the pages (dist/js/icons.js). */
svg.i.ei { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
img.i.ei3d { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.3em; flex: none; object-fit: contain; }
html[data-icons="thin"] svg.i.ei { stroke-width: 1.4; }
html[data-icons="bold"] svg.i.ei { stroke-width: 2.7; }
html[data-icons="filled"] svg.i.ei { stroke-width: 2.3; }
html[data-icons="duo"] svg.i.ei path { fill: currentColor; fill-opacity: .18; }
html[data-icons="neon"] svg.i.ei { stroke-width: 1.8; filter: drop-shadow(0 0 3px var(--ac)); }
/* An icon on its own (tiles, round icon boxes): the theme colour; the set's tile look where it has one. */
html:not([data-icons="emoji"]):not([data-icons="3d"]) .ei-solo { color: var(--ac, var(--mc-accent, #0a84d6)); }
html[data-icons="duo"] .ei-solo, html[data-icons="neon"] .ei-solo { color: var(--ac, var(--mc-accent, #0a84d6)) !important; }
html[data-icons="pastel"] .ei-solo > svg.ei { color: hsl(var(--ph, 210) 50% 42%); }
html[data-icons="glass"] .ei-solo { color: var(--tx, #0f172a); }

/* ---------- Text size: the page content is zoomed, the rail stays the same ---------- */
html[data-fs="s"] :is(.content-wrapper, .mp-main, .mp-dash-main, .modal-dialog, .lg-page) { zoom: .9; }
html[data-fs="l"] :is(.content-wrapper, .mp-main, .mp-dash-main, .modal-dialog, .lg-page) { zoom: 1.12; }

/* ---------- The 🎨 panel ---------- */
.ui-cz { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px; background: rgba(40,24,20,.35); backdrop-filter: blur(3px); font-family: Inter,'Kantumruy Pro',system-ui,sans-serif; }
.ui-cz[hidden] { display: none !important; }
.ui-cz *, .ui-cz *::before { box-sizing: border-box; }
.ui-cz .ui-box { max-height: calc(100dvh - 32px); overflow: auto; background: var(--sf,var(--mc-surface,#fff)); color: var(--tx,var(--mc-text,#1a2e3d)); border: 1px solid var(--bd,var(--mc-border,#d2e1ed)); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.ui-cz .mp-cz-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ui-cz .mp-cz-h > div { flex: 1; }
.ui-cz .mp-cz-h b { display: block; font-size: 17px; font-weight: 800; }
.ui-cz .mp-cz-h small { display: block; color: var(--mu,var(--mc-muted)); font-size: 12px; margin-top: 2px; }
.ui-cz button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.ui-cz .mp-cz-x { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--sf2,var(--mc-surface-2)) !important; color: var(--mu,var(--mc-muted)) !important; }
.ui-cz { grid-template-columns: minmax(0, 1fr); }
.ui-box { width: 760px; max-width: 100%; justify-self: center; padding: 18px 20px; }
/* Settings > Theme & look: the same panel on the page (cpos/_ui docks it in #sx-uidock). */
.sx-uidock { padding: 16px 18px; }
#sx-look > .sx-uidock:empty { display: none; }
.ui-box.ui-docked { width: auto; max-width: none; max-height: none; overflow: visible; justify-self: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
.ui-docked .mp-cz-h { display: none; }
#sx .ui-docked .ui-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#sx .ui-docked .ui-tabs::-webkit-scrollbar { display: none; }
#sx .ui-docked .ui-tabs button { width: 100%; min-width: 0; height: 38px; padding: 0 4px; border: 0 !important; background: transparent; box-shadow: none; font-size: 11px; }
#sx .ui-docked .ui-tabs button:last-child { grid-column: auto; }
#sx .ui-docked .ui-tabs button.on { background: var(--sf) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
@media (max-width: 767px) { .sx-uidock { padding: 12px; } }
@media (min-width: 1024px) {
    #sx .ui-docked .ui-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.ui-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; margin: 0 0 14px; border-radius: 14px; background: var(--sf2); }
.ui-tabs button { flex: 1; min-width: 96px; height: 38px; border-radius: 10px; font-weight: 700 !important; font-size: 13px; color: var(--mu) !important; white-space: nowrap; }
.ui-tabs button.on { background: var(--sf) !important; color: var(--tx) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.ui-pane[hidden] { display: none !important; }
.ui-box > .ui-pane { margin: 0; }
.ui-box:not(.ui-docked) > .ui-pane { padding: 14px; border: 1px solid var(--bd); border-radius: 16px; background: var(--sf2); }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.ui-pane[data-p="skin"] .ui-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-card { display: flex; flex-direction: column; gap: 6px; padding: 6px !important; border-radius: 16px; border: 2px solid var(--bd) !important; background: var(--sf) !important; text-align: left; transition: border-color .12s, transform .12s; }
.ui-card:hover { transform: translateY(-1px); }
.ui-card.on { border-color: var(--ac) !important; box-shadow: 0 0 0 3px var(--ac-soft); }
html.ui-theme-transition body, html.ui-theme-transition body * {
    transition-property: color, background-color, border-color, box-shadow, fill, stroke !important;
    transition-duration: 260ms !important;
    transition-timing-function: ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html.ui-theme-transition body, html.ui-theme-transition body * { transition: none !important; }
}
.ui-name { font-size: 12.5px; font-weight: 700; color: var(--tx); padding: 0 4px 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui-name em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--ac-soft); color: var(--ac); }
.ui-card.on .ui-name::after { content: '✓'; margin-left: auto; color: var(--ac); }
.ui-note { margin: 10px 2px 0; font-size: 12px; color: var(--mu); }
/* Theme cards: a tiny page in that theme. */
.ui-pv { display: flex; gap: 6px; height: 78px; padding: 7px; border-radius: 11px; background: var(--page); overflow: hidden; }
.ui-pv i { font-style: normal; display: flex; }
.ui-pv-rail { width: 16px; flex-direction: column; gap: 4px; padding: 4px 3px; border-radius: 6px; background: var(--sf); border: 1px solid var(--bd); }
.ui-pv-rail b { height: 8px; border-radius: 3px; background: var(--chip); }
.ui-pv-rail b:first-child { background: var(--grad); }
.ui-pv-main { flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.ui-pv-c { flex: 1; flex-direction: column; justify-content: space-between; padding: 5px 6px; border-radius: 7px; background: var(--sf); border: 1px solid var(--bd); }
.ui-pv-c b { height: 5px; width: 62%; border-radius: 3px; background: var(--tx); opacity: .75; }
.ui-pv-c s { height: 8px; width: 42%; border-radius: 4px; background: var(--grad); text-decoration: none; }
.ui-pv[data-skin^="g-"] .ui-pv-c, .ui-pv[data-skin^="g-"] .ui-pv-rail { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
/* Icon set cards. */
.ui-ico { display: flex; justify-content: space-around; gap: 2px; padding: 10px 2px; border-radius: 11px; background: var(--sf2); }
.ui-ico-t { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--mu); flex: none; }
.ui-ico .i { display: block; }
/* Shape cards. */
.ui-shp { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 11px; background: var(--sf2); height: 86px; }
.ui-shp i { font-style: normal; display: flex; }
.ui-shp-c { flex: 1; flex-direction: column; justify-content: center; gap: 5px; padding: 6px 8px; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; }
.ui-shp-c b { height: 5px; width: 70%; border-radius: 3px; background: var(--tx); opacity: .6; }
.ui-shp-c b + b { width: 45%; opacity: .3; }
.ui-shp-r { gap: 6px; align-items: center; }
.ui-shp-b { height: 18px; flex: 1; background: var(--grad); border-radius: 9px; }
.ui-shp-p { height: 14px; width: 30px; background: var(--ac-soft); border: 1px solid var(--ac); border-radius: 999px; }
/* Text size and mode cards. */
.ui-fs-a { display: grid; place-items: center; height: 70px; border-radius: 11px; background: var(--sf2); font-weight: 800; color: var(--tx); }
.ui-fs-s { font-size: 16px; } .ui-fs-m { font-size: 22px; } .ui-fs-l { font-size: 30px; }
.ui-mode-pv { display: grid; place-items: center; height: 70px; border-radius: 11px; font-size: 26px; }
.ui-mode-light { background: linear-gradient(135deg, #fff, #f1ece6); border: 1px solid #e8e0d8; }
.ui-mode-dark { background: linear-gradient(135deg, #1b1b29, #0b0b12); }
.ui-mode-auto { background: linear-gradient(135deg, #fff 0 50%, #14141f 50% 100%); border: 1px solid #ddd; }
.ui-mode-pv span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.ui-f-state { display: flex; align-items: center; justify-content: space-between; min-height: 30px; gap: 8px; }
.ui-dirty { padding: 2px 10px; border: 1px solid #fed7aa; border-radius: 99px; background: #fff7ed; color: #c2410c; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ui-applied { padding: 2px 10px; border: 1px solid #bbf7d0; border-radius: 99px; background: #f0fdf4; color: #15803d; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ui-f-btns { display: flex; width: 100%; min-width: 0; flex-wrap: nowrap; gap: 10px; margin: 0; }
.ui-f-btns .mp-cz-btn { height: 46px; justify-content: center; }
.ui-f-btns #mp-ui-apply, .ui-f-btns #mp-ui-cancel, .ui-f-btns #mp-ui-save { flex: 1 1 0; }
.ui-shop-toggle { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; min-height: 44px; margin: 16px 0 0; padding: 8px 14px !important; border: 1px solid var(--bd) !important; border-radius: 12px; background: var(--sf2) !important; color: var(--tx) !important; font-size: 13px; font-weight: 700 !important; text-align: center; cursor: pointer; }
.ui-shop-toggle.on { border-color: var(--ac) !important; background: var(--ac-soft) !important; color: var(--ac) !important; box-shadow: 0 0 0 2px var(--ac-soft); }
@media (max-width: 767px) {
    .ui-box { padding: 14px; }
    .ui-cz { display: flex; align-items: flex-start; justify-content: center; overflow: hidden; padding: 6px 10px calc(170px + env(safe-area-inset-bottom)); }
    .ui-box:not(.ui-docked) { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 204px - env(safe-area-inset-bottom)); max-height: calc(100vh - 204px - env(safe-area-inset-bottom)); height: calc(100dvh - 204px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 204px - env(safe-area-inset-bottom)); margin: 0 auto; overflow: hidden; animation: none; }
    .ui-box:not(.ui-docked) .mp-cz-h, .ui-box:not(.ui-docked) .ui-tabs, .ui-box:not(.ui-docked) .ui-shop-toggle { flex: none; }
    .ui-box:not(.ui-docked) .ui-pane.on { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .ui-box:not(.ui-docked) > .ui-pane { padding: 10px; }
    .ui-f-state { display: flex; position: relative; min-height: 30px; }
    .ui-dirty { position: static; }
    .ui-f-btns { gap: 10px; }
    .ui-f-btns .mp-cz-btn { height: 46px; min-width: 0; }
    .ui-tabs button { min-width: 0; flex: 1 0 30%; font-size: 12px; }
    .ui-grid, .ui-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-pane[data-p="skin"] .ui-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- In-page alert / confirm (dist/js/spdialog.js) ---------- */
.spd { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(30, 20, 20, .38); animation: spd-fade .12s ease-out; font-family: 'Inter', 'Kantumruy Pro', 'Battambang', system-ui, sans-serif; }
dialog.spd-native { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; }
dialog.spd-native::backdrop { background: transparent; }
[data-scheme="dark"] .spd { background: rgba(0, 0, 0, .6); }
.spd.out { opacity: 0; transition: opacity .12s; }
.spd, .spd * { box-sizing: border-box; } /* the POS page has no global border-box: padding made the box wider than a phone */
.spd-box { width: min(400px, calc(100vw - 32px)); max-width: 100%; text-align: center; padding: 26px 24px 20px; border-radius: 24px; background: var(--ui-solid, var(--sf, #fffdfa)); color: var(--tx, #3b2a26); border: 1px solid var(--bd, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, .28); animation: spd-pop .2s cubic-bezier(.2, 1.3, .4, 1); }
html[data-skin^="g-"][data-scheme="light"] .spd-box { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-skin^="g-"][data-scheme="dark"] .spd-box { background: rgba(18, 22, 40, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.spd-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; line-height: 1; background: var(--ac-soft, #f6e6e6); font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.spd-box.danger .spd-ic { background: #fde8ea; }
[data-scheme="dark"] .spd-box.danger .spd-ic { background: rgba(225, 29, 46, .18); }
.spd-t { font-size: 19px; font-weight: 800; line-height: 1.4; word-wrap: break-word; white-space: pre-line; max-height: 50vh; overflow: auto; }
.spd-t b, .spd-t strong { color: var(--ac, #b76e79); }
.spd-p { margin: 6px 0 0; color: var(--mu, #9a857c); font-size: 14px; }
.spd-in { width: 100%; height: 46px; margin-top: 14px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bd, #eadfd5); background: var(--sf, #fff); color: var(--tx, #333); font: inherit; font-size: 16px; text-align: center; outline: none; }
.spd-in:focus { border-color: var(--ac, #b76e79); box-shadow: 0 0 0 3px var(--ac-soft, #f6e6e6); }
.spd-b { display: flex; gap: 10px; margin-top: 20px; }
.spd-b button { flex: 1; min-height: 50px; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.spd-b button small { font-size: 11px; font-weight: 600; opacity: .65; }
.spd-no { background: transparent; border: 1px solid var(--bd, #eadfd5); color: var(--mu, #7a6560); }
.spd-no:hover, .spd-no:focus { background: var(--sf2, #f3ebe4); color: var(--tx, #333); outline: none; }
.spd-yes { border: 0; color: #fff; background: var(--grad, linear-gradient(135deg, #c98690, #9c5662)); box-shadow: var(--glow, 0 10px 22px rgba(156, 86, 98, .28)); }
.spd-box.danger .spd-yes { background: #e11d2e; box-shadow: 0 8px 18px rgba(225, 29, 46, .3); }
.spd-yes:focus { outline: 3px solid var(--ac-soft, #f6e6e6); outline-offset: 2px; }
@keyframes spd-fade { from { opacity: 0; } }
@keyframes spd-pop { from { opacity: 0; transform: scale(.94); } }
/* Same rounded dialog on every page (the Classic layout squares other corners). */
.spd:not(#ui-x) .spd-box { border-radius: 24px !important; }
.spd:not(#ui-x) .spd-ic { border-radius: 50% !important; }
.spd:not(#ui-x) .spd-b button { border-radius: 14px !important; }
.spd:not(#ui-x) .spd-in { border-radius: 12px !important; }

/* ---------- On-screen keyboard (dist/js/global_keyboard.js) ----------
   Theme colours; placement per Settings > Display keyboard (spk-side / pop /
   center / split / mini, number pad spk-pad). :not(#ui-x) keeps the corners
   round on the Classic (square) layout. */
.spk { position: fixed; z-index: 100001; color: var(--tx, #333); font-family: 'Inter', 'Kantumruy Pro', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: manipulation;
    background: var(--ui-solid, var(--sf, #fff)); border: 1px solid var(--bd, #e5e5e5); box-shadow: 0 30px 70px rgba(0, 0, 0, .28); padding: 8px 14px 14px;
    opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .16s, transform .18s ease-out; }
.spk.in { opacity: 1; transform: none; }
.spk:not(#ui-x) { border-radius: 24px; }
html[data-skin^="g-"] .spk { background: color-mix(in srgb, var(--ui-solid, #fff) 90%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.spk *, .spk *::before { box-sizing: border-box; }
.spk button { font: inherit; cursor: pointer; margin: 0; }
.spk-h { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 2px 8px; }
.spk-grip { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); width: 44px; height: 5px; background: var(--bd, #ddd); }
.spk:not(#ui-x) .spk-grip { border-radius: 3px; }
.spk-lbl { font-size: 14px; font-weight: 700; color: var(--tx, #333); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.spk-lang { display: flex; padding: 3px; background: var(--sf2, #f3f3f3); }
.spk-lang button { border: 0; background: none; color: var(--mu, #888); font-size: 12px; font-weight: 700; padding: 5px 12px; }
.spk-lang button.on { background: var(--grad, #b76e79); color: #fff; }
.spk:not(#ui-x) .spk-lang, .spk:not(#ui-x) .spk-lang button { border-radius: 999px; }
.spk-x { width: 32px; height: 32px; border: 0; background: var(--sf2, #f3f3f3); color: var(--mu, #888); font-size: 14px; font-weight: 700; flex: none; }
.spk:not(#ui-x) .spk-x { border-radius: 10px; }
.spk-row { display: flex; gap: 7px; justify-content: center; margin-top: 7px; }
.spk-k { position: relative; flex: 1 1 0; min-width: 0; max-width: 84px; height: 56px; padding: 0 4px; border: 1px solid var(--bd, #e5e5e5); background: var(--sf2, #f6f6f6); color: var(--tx, #333);
    box-shadow: 0 2px 0 var(--bd, #ddd); font-size: 21px; font-weight: 600; display: grid; place-items: center; white-space: nowrap; transition: transform .06s, background .1s; }
.spk:not(#ui-x) .spk-k { border-radius: 13px; }
.spk-k > span { pointer-events: none; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.spk-k:active, .spk-k.pr { transform: translateY(2px); box-shadow: none; background: var(--ac-soft, #fde); color: var(--ac, #b76e79); border-color: var(--ac, #b76e79); }
.spk-k.pr::before { content: attr(data-char); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); min-width: 56px; height: 64px; padding: 0 8px; display: grid; place-items: center;
    background: var(--ui-solid, var(--sf, #fff)); border: 1px solid var(--ac, #b76e79); color: var(--ac, #b76e79); font-size: 30px; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); z-index: 2; }
.spk:not(#ui-x) .spk-k.pr::before { border-radius: 13px; }
.spk-k.fn { background: var(--chip, var(--sf2, #eee)); color: var(--mu, #888); font-size: 15px; font-weight: 700; flex-grow: 1.5; max-width: none; }
.spk-k.on { background: var(--ac-soft, #fde); color: var(--ac, #b76e79); border-color: var(--ac, #b76e79); }
.spk-k.sp { flex-grow: 7; max-width: none; font-size: 13px; }
.spk-k.cn { background: transparent; flex-grow: 2.2; max-width: none; box-shadow: none; }
.spk-k.ok { background: var(--grad, #b76e79); color: #fff; border-color: transparent; box-shadow: var(--glow, none); flex-grow: 2.2; max-width: none; font-size: 16px; font-weight: 800; }
.spk-set[data-set="meta3"] .spk-k:not(.fn), .spk-set[data-set="meta4"] .spk-k:not(.fn) { font-family: 'Kantumruy Pro', 'Battambang', sans-serif; }
/* Placements */
.spk-center { left: 50%; bottom: 16px; width: min(1040px, 96vw); transform: translate(-50%, 14px) scale(.98); }
.spk-center.in { transform: translate(-50%, 0); }
.spk-pop::after { content: ''; position: absolute; top: -10px; left: var(--ax, 60px); width: 20px; height: 20px; background: inherit; border-left: 1px solid var(--bd, #e5e5e5); border-top: 1px solid var(--bd, #e5e5e5); transform: translateX(-50%) rotate(45deg); }
.spk-pop.up::after { top: auto; bottom: -10px; transform: translateX(-50%) rotate(225deg); }
.spk-pad.spk-pop.spk-anchor-left::after { top: var(--ay, 50%); right: auto; bottom: auto; left: -10px; transform: translateY(-50%) rotate(-45deg); }
.spk-pad.spk-pop.spk-anchor-right::after { top: var(--ay, 50%); right: -10px; bottom: auto; left: auto; transform: translateY(-50%) rotate(135deg); }
.spk-mini { width: min(860px, 96vw); }
.spk-pad.spk-mini { width: min(340px, 96vw); }
.spk-mini .spk-h { cursor: move; }
.spk-mini .spk-k { height: 48px; font-size: 18px; }
.spk-mini .spk-row { gap: 6px; margin-top: 6px; }
.spk-mini .spk-grip { width: 64px; }
.spk-split { left: var(--spl, 16px); right: var(--spr, 16px); bottom: 16px; background: transparent !important; border: 0; box-shadow: none; padding: 0; pointer-events: none;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.spk-split .spk-h, .spk-split .spk-half { pointer-events: auto; background: var(--ui-solid, var(--sf, #fff)); border: 1px solid var(--bd, #e5e5e5); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.spk-split .spk-h { width: 300px; margin: 0 auto 10px; padding: 12px 12px 8px; }
.spk-split:not(#ui-x) .spk-h, .spk-split:not(#ui-x) .spk-half { border-radius: 22px; }
.spk-split .spk-set { display: flex; justify-content: space-between; gap: 20px; }
.spk-split .spk-set[style*="none"] { display: none !important; }
.spk-split .spk-half { width: min(520px, 46%); padding: 6px 12px 12px; }
/* Number pad */
.spk-pad { width: 340px; padding: 8px 12px 12px; }
.spk-disp { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; margin: 2px 0 8px; background: var(--sf2, #f6f6f6); }
.spk:not(#ui-x) .spk-disp { border-radius: 14px; }
.spk-disp small { font-size: 12px; font-weight: 700; color: var(--mu, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spk-disp b { font-size: 28px; font-weight: 800; }
.spk-padgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spk-padgrid .spk-k { max-width: none; height: 56px; font-size: 22px; }
.spk-pad.spk-mini .spk-padgrid .spk-k { height: 48px; font-size: 18px; }
.spk-padgrid .spk-clear { color: #e11d48; font-weight: 800; font-size: 20px; }
.spk-padgrid .spk-accept { grid-row: span 2; height: auto; font-size: 15px; white-space: normal; text-align: center; }
@media (max-width: 767px) {
    .spk-side, .spk-pop:not(.spk-pad), .spk-mini:not(.spk-pad) { left: 4px !important; right: 4px; width: auto !important; top: auto !important; bottom: 4px; }
    .spk-pop:not(.spk-pad)::after { display: none; }
    .spk-k { height: 46px; font-size: 18px; }
    .spk-split .spk-set { flex-direction: column; gap: 6px; } .spk-split .spk-half { width: 100%; }
}
.spk.spk-large .spk-k:not(.fn) { font-size: 27px; }


/* Panel open on top: the page behind must not scroll. */
html:has(.mp-modal:not([hidden])), html:has(.mp-modal:not([hidden])) body, html:has(body.mp-sheet), html:has(body.mp-sheet) body { overflow: hidden !important; }
.mp-modal, .mp-dlg, .mp-dlg-b, .modal, .mp-fly { overscroll-behavior: contain; }

/* Neutral navigation/title glyphs follow the selected theme accent. */
html[data-icons]:not([data-icons="emoji"]):not([data-icons="3d"]):not(#ui-x) :is(.sx-hic, .sx-ti, .pg-hic) { color: var(--ac, var(--mc-accent)) !important; }

/* Shared summary figures: keep full amounts readable in every management area.
   Page-specific KPI styles and compact layouts use this same numeric scale. */
@media screen {
    html body :is(.hb-kpi, .hb-tile, .hm-dash, .bq-kpi, .pg-kpi, .dl-stat, .ir-kpi, .im-totals > .sx-card, .pu-sum) {
        min-width: 0;
    }
    html body :is(.hb-kpi > b, .hb-tile .hb-val, .hm-dash > b, .bq-kpi > b, .pg-kpi > b, .dl-stat > b, .ir-kpi > b, .im-totals b, .pu-sum b, .info-box-number) {
        font-size: 18px !important;
        line-height: 1.5 !important;
        font-variant-numeric: tabular-nums;
        max-width: 100%;
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
        overflow: visible !important;
        text-overflow: clip;
    }
}
@media screen and (max-width: 600px) {
    html body :is(.hb-kpi > b, .hb-tile .hb-val, .hm-dash > b, .bq-kpi > b, .pg-kpi > b, .dl-stat > b, .ir-kpi > b, .im-totals b, .pu-sum b, .info-box-number) {
        font-size: 16px !important;
    }
}