/* Panel Portal skins. The admin picks one under Design; <html data-skin="..."> applies it.
   "obsidian" is the base look defined in app.css. */

/* Shared defaults for every skin, so one skin's settings never leak into another
   (e.g. inside the admin preview cards). :where() keeps specificity at zero. */
:where([data-skin]:not([data-skin="obsidian"])) {
  --bw: 1px;
  --btn-border: 0;
  --btn-tt: none;
  --btn-ls: 0;
  --btn-shadow: 0 10px 24px -12px var(--accent-glow);
  --feature-border: transparent;
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 11px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
  --display-w: 700;
  --grid-op: 0.6;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 30px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --feature-shadow: 0 24px 50px -24px var(--accent-glow);
  --vc-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* =====================================================================
   MONO BOLD — neo-brutalist: thick black lines, hard shadows, yellow
   ===================================================================== */
[data-skin="mono"] {
  --bg: #f3f1ea;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f7f5ef;
  --surface-3: #ece9df;
  --field: #ffffff;
  --border: #111111;
  --border-strong: #111111;
  --hairline: rgba(17, 17, 17, 0.14);
  --text: #111111;
  --text-2: #2a2a2a;
  --muted: #5c5c56;
  --accent: #ffd400;
  --accent-strong: #ffe033;
  --accent-ink: #111111;
  --accent-soft: rgba(255, 212, 0, 0.3);
  --accent-text: #111111;
  --accent-glow: transparent;
  --accent-grad: linear-gradient(#ffd400, #ffd400);
  --accent-line: none;
  --text-grad: linear-gradient(#111, #111);
  --ok: #0a7d38;
  --ok-soft: #d9f5e3;
  --err: #d4261c;
  --err-soft: #fde4e2;
  --warn: #9a5c00;
  --warn-soft: #fff1c2;
  --orb-a: transparent;
  --orb-b: transparent;
  --grid-op: 0;
  --radius: 14px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow: 4px 4px 0 #111;
  --shadow-pop: 6px 6px 0 #111, 0 0 0 2px #111;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-w: 900;
  --bw: 2px;
  --btn-border: 2px solid #111;
  --btn-shadow: 3px 3px 0 #111;
  --btn-tt: uppercase;
  --btn-ls: 0.04em;
  --feature-bg: #ffd400;
  --feature-fg: #111111;
  --feature-muted: rgba(17, 17, 17, 0.68);
  --feature-value: linear-gradient(#111, #111);
  --feature-ring: rgba(17, 17, 17, 0.18);
  --feature-shadow: 4px 4px 0 #111;
  --feature-border: #111;
  --vc-bg: #ffd400;
  --vc-fg: #111111;
  --vc-muted: rgba(17, 17, 17, 0.6);
  --vc-border: #111111;
  --vc-shadow: 8px 8px 0 #111;
  color-scheme: light;
}
[data-skin="mono"] :is(h1, .hero-title, .stat .value, .plan-price, .summary-row.total strong, .news-item h3, .product-group > h2, .auth-card h1, .stepper input, .error-page .code) {
  font-weight: 900;
  letter-spacing: -0.025em;
}
[data-skin="mono"] .brand { font-weight: 800; }
[data-skin="mono"] .topbar-inner,
[data-skin="mono"] .tabbar {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid #111;
  box-shadow: 4px 4px 0 #111;
}
[data-skin="mono"] .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-skin="mono"] .card:not(.feature) { background: #fff; }
[data-skin="mono"] .mainnav { background: #f3f1ea; border: 2px solid #111; }
[data-skin="mono"] .mainnav a.on { background: #ffd400; box-shadow: none; outline: 2px solid #111; outline-offset: -2px; }
[data-skin="mono"] .mainnav a.on .icon { color: #111; }
[data-skin="mono"] :is(.brand-mark, .tab-cta-inner, .seal, .avatar, .balance-chip .dot) { border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
[data-skin="mono"] .tabbar .tab-cta .tab-cta-inner { box-shadow: 0 0 0 4px #fff, 3px 3px 0 4px #111; }
[data-skin="mono"] .balance-chip { background: #fff; border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
[data-skin="mono"] .icon-btn { border: 2px solid #111; background: #fff; color: #111; }
[data-skin="mono"] .btn { border: 2px solid #111; background: #fff; box-shadow: 3px 3px 0 #111; }
[data-skin="mono"] .btn-primary { background: #ffd400; }
[data-skin="mono"] .btn-ghost { border-color: transparent; box-shadow: none; background: transparent; }
[data-skin="mono"] .btn-danger { color: #d4261c; border-color: #111; }
[data-skin="mono"] .btn:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }
[data-skin="mono"] .btn:hover { border-color: #111; }
[data-skin="mono"] :is(input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea):focus {
  border-color: #111;
  box-shadow: 3px 3px 0 #111;
}
[data-skin="mono"] :is(input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea):hover { border-color: #111; }
[data-skin="mono"] select { background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%); }
[data-skin="mono"] .plan-box { background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
[data-skin="mono"] .plan:hover .plan-box { border-color: #111; }
[data-skin="mono"] .plan input:checked + .plan-box { border: 2px solid #111; background: #fff7c2; box-shadow: 5px 5px 0 #111; }
[data-skin="mono"] .plan input:checked + .plan-box::after { background: #ffd400; border: 2px solid #111; box-shadow: inset 0 0 0 3px #fff; }
[data-skin="mono"] .plan-box::after { border: 2px solid #111; }
[data-skin="mono"] .plan-stock .pip { box-shadow: none; border: 1px solid #111; }
[data-skin="mono"] :is(.list-icon, .drawer-ic, .card-head h2 > .icon, .empty > .icon) { background: #fff; border: 2px solid #111; color: #111; }
[data-skin="mono"] .drawer-nav a.on .drawer-ic { background: #ffd400; border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
[data-skin="mono"] .badge { border: 1.5px solid #111; }
[data-skin="mono"] .alert { border-width: 2px; border-color: #111; box-shadow: 3px 3px 0 #111; }
[data-skin="mono"] tbody tr:hover td { background: #fffbe0; }
[data-skin="mono"] .key-row { border: 2px solid #111; background: #fff; }
[data-skin="mono"] .stepper,
[data-skin="mono"] .seg,
[data-skin="mono"] .chips { border: 2px solid #111; }
[data-skin="mono"] .stepper button { color: #111; }
[data-skin="mono"] :is(.chip.on, .seg input:checked + span) { box-shadow: none; outline: 2px solid #111; outline-offset: -2px; }
[data-skin="mono"] :is(.menu-pop, .drawer, .edit-panel.pop-right) { border: 2px solid #111; box-shadow: 6px 6px 0 #111; }
[data-skin="mono"] .drawer-who { background: #ffd400; border: 2px solid #111; }
[data-skin="mono"] .drawer-nav a.on { background: #f3f1ea; }
[data-skin="mono"] .auth-card {
  background: #fff;
  border: 2px solid #111;
  box-shadow: 8px 8px 0 #111;
  animation: none;
}
[data-skin="mono"] .eyebrow { background: #fff; border: 2px solid #111; color: #111; }
[data-skin="mono"] .hero-title em {
  font-style: normal;
  color: #111;
  -webkit-text-fill-color: #111;
  background: linear-gradient(transparent 58%, #ffd400 58%, #ffd400 92%, transparent 92%);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
[data-skin="mono"] .vault-card { transform: rotate(-4deg); }
[data-skin="mono"] .vc-ok { color: #0a7d38; }
[data-skin="mono"] .stat.feature::before { display: none; }
[data-skin="mono"] .news-item::before { box-shadow: none; border: 1.5px solid #111; width: 8px; height: 8px; }
[data-skin="mono"] .brand-tag { color: #111; border: 2px solid #111; background: #ffd400; }

/* =====================================================================
   ARCTIC — clean, bright, blue
   ===================================================================== */
[data-skin="arctic"] {
  --bg: #f4f7fb;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #eef2f8;
  --field: #ffffff;
  --border: #e3e8f0;
  --border-strong: #d3dbe7;
  --hairline: #edf1f6;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --accent-text: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.35);
  --accent-grad: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --accent-line: none;
  --text-grad: linear-gradient(135deg, #2563eb, #1e3a8a);
  --ok: #16a34a;
  --ok-soft: rgba(22, 163, 74, 0.1);
  --err: #dc2626;
  --err-soft: rgba(220, 38, 38, 0.08);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.1);
  --orb-a: rgba(59, 130, 246, 0.14);
  --orb-b: rgba(14, 165, 233, 0.1);
  --grid-op: 0.7;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px -14px rgba(15, 23, 42, 0.16);
  --shadow-pop: 0 24px 48px -16px rgba(15, 23, 42, 0.25), 0 0 0 1px #e3e8f0;
  --display: var(--font);
  --display-w: 700;
  --btn-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.55);
  --btn-ls: 0;
  --feature-bg: linear-gradient(135deg, #2563eb, #1e40af);
  --feature-fg: #ffffff;
  --feature-muted: rgba(255, 255, 255, 0.75);
  --feature-value: linear-gradient(#fff, #fff);
  --feature-ring: rgba(255, 255, 255, 0.22);
  --feature-shadow: 0 18px 36px -16px rgba(37, 99, 235, 0.55);
  --vc-bg: linear-gradient(135deg, #3b82f6, #1e3a8a);
  --vc-fg: #ffffff;
  --vc-muted: rgba(255, 255, 255, 0.7);
  --vc-border: rgba(255, 255, 255, 0.25);
  --vc-shadow: 0 40px 70px -30px rgba(30, 58, 138, 0.6);
  color-scheme: light;
}
[data-skin="arctic"] :is(h1, .hero-title, .stat .value, .plan-price, .summary-row.total strong, .news-item h3, .product-group > h2, .auth-card h1) { letter-spacing: -0.025em; }

/* =====================================================================
   EMERALD NIGHT — dark green-black, emerald accent
   ===================================================================== */
[data-skin="emerald"] {
  --bg: #06110e;
  --bg-2: #091712;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-solid: #0c1b16;
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.07);
  --field: rgba(0, 0, 0, 0.35);
  --border: rgba(110, 231, 183, 0.1);
  --border-strong: rgba(110, 231, 183, 0.18);
  --hairline: rgba(110, 231, 183, 0.06);
  --text: #e7f5ef;
  --text-2: #a9c4b9;
  --muted: #6f8f83;
  --accent: #10b981;
  --accent-strong: #34d399;
  --accent-ink: #022116;
  --accent-soft: rgba(16, 185, 129, 0.13);
  --accent-text: #34d399;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --accent-grad: linear-gradient(135deg, #34d399, #059669);
  --accent-line: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.6), transparent);
  --text-grad: linear-gradient(135deg, #a7f3d0, #10b981);
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.1);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, 0.1);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.1);
  --orb-a: rgba(16, 185, 129, 0.16);
  --orb-b: rgba(20, 90, 140, 0.14);
  --display: var(--font);
  --display-w: 700;
  --btn-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.7);
  --btn-ls: 0;
  --feature-bg: linear-gradient(160deg, #0f3d2e, #08221a 70%) padding-box, var(--accent-grad) border-box;
  --feature-fg: #e7f5ef;
  --feature-muted: rgba(231, 245, 239, 0.6);
  --feature-value: linear-gradient(135deg, #d1fae5, #34d399);
  --feature-ring: rgba(52, 211, 153, 0.2);
  --vc-bg: radial-gradient(120% 90% at 0% 0%, rgba(52, 211, 153, 0.3), transparent 55%), linear-gradient(145deg, #0f2a22, #06120e 70%);
  --vc-fg: #e7f5ef;
  --vc-muted: rgba(231, 245, 239, 0.55);
  --vc-border: rgba(52, 211, 153, 0.3);
}
[data-skin="emerald"] :is(h1, .hero-title, .stat .value, .plan-price, .summary-row.total strong, .auth-card h1) { letter-spacing: -0.025em; }

/* =====================================================================
   CORAL SUNRISE — warm cream, coral gradients, pill buttons
   ===================================================================== */
[data-skin="coral"] {
  --bg: #fff6ef;
  --bg-2: #fffaf6;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #fff8f3;
  --surface-3: #ffeee4;
  --field: #ffffff;
  --border: #f5e1d5;
  --border-strong: #ecd0c0;
  --hairline: #f8ebe2;
  --text: #2b1d16;
  --text-2: #5a4337;
  --muted: #9a7f72;
  --accent: #ff6b4a;
  --accent-strong: #f0552f;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 107, 74, 0.12);
  --accent-text: #e2462a;
  --accent-glow: rgba(255, 107, 74, 0.4);
  --accent-grad: linear-gradient(135deg, #ff6b4a, #ff9a3d);
  --accent-line: none;
  --text-grad: linear-gradient(135deg, #e8492a, #d9730d);
  --ok: #1f9d63;
  --ok-soft: rgba(31, 157, 99, 0.1);
  --err: #d63a2f;
  --err-soft: rgba(214, 58, 47, 0.08);
  --warn: #b86e00;
  --warn-soft: rgba(184, 110, 0, 0.1);
  --orb-a: rgba(255, 154, 61, 0.24);
  --orb-b: rgba(255, 107, 74, 0.16);
  --grid-op: 0;
  --radius: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow: 0 8px 22px -14px rgba(120, 60, 30, 0.3);
  --shadow-pop: 0 26px 50px -22px rgba(120, 60, 30, 0.35), 0 0 0 1px #f5e1d5;
  --font: "Avenir Next", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--font);
  --display-w: 800;
  --btn-shadow: 0 12px 24px -10px rgba(255, 107, 74, 0.6);
  --btn-ls: 0;
  --feature-bg: linear-gradient(135deg, #ff7a55, #ffb547);
  --feature-fg: #ffffff;
  --feature-muted: rgba(255, 255, 255, 0.85);
  --feature-value: linear-gradient(#fff, #fff);
  --feature-ring: rgba(255, 255, 255, 0.35);
  --feature-shadow: 0 20px 40px -18px rgba(255, 107, 74, 0.6);
  --vc-bg: linear-gradient(135deg, #ff7a55, #ffb547);
  --vc-fg: #ffffff;
  --vc-muted: rgba(255, 255, 255, 0.8);
  --vc-border: rgba(255, 255, 255, 0.35);
  --vc-shadow: 0 40px 70px -30px rgba(200, 80, 40, 0.55);
  color-scheme: light;
}
[data-skin="coral"] :is(.btn, .chip, .chips, .seg, .seg span, .balance-chip, .icon-btn, .stepper) { border-radius: 999px; }
[data-skin="coral"] .card { border-radius: 22px; }

/* =====================================================================
   TERMINAL — black, neon green, monospace
   ===================================================================== */
[data-skin="terminal"] {
  --bg: #030403;
  --bg-2: #060806;
  --surface: #070907;
  --surface-solid: #0a0d0a;
  --surface-2: #0b0f0b;
  --surface-3: #102010;
  --field: #020302;
  --border: #1f3a1d;
  --border-strong: #2d5a29;
  --hairline: #142613;
  --text: #c8f7c5;
  --text-2: #9ed69a;
  --muted: #5d7a5b;
  --accent: #39ff14;
  --accent-strong: #7dff5e;
  --accent-ink: #031000;
  --accent-soft: rgba(57, 255, 20, 0.1);
  --accent-text: #39ff14;
  --accent-glow: rgba(57, 255, 20, 0.45);
  --accent-grad: linear-gradient(#39ff14, #39ff14);
  --accent-line: linear-gradient(90deg, transparent, #39ff14, transparent);
  --text-grad: linear-gradient(#39ff14, #39ff14);
  --ok: #39ff14;
  --ok-soft: rgba(57, 255, 20, 0.1);
  --err: #ff4d4d;
  --err-soft: rgba(255, 77, 77, 0.1);
  --warn: #ffd23f;
  --warn-soft: rgba(255, 210, 63, 0.1);
  --orb-a: transparent;
  --orb-b: transparent;
  --grid-op: 1;
  --radius: 3px;
  --radius-md: 3px;
  --radius-sm: 3px;
  --shadow: none;
  --shadow-pop: 0 0 0 1px #2d5a29, 0 20px 40px -10px rgba(0, 0, 0, 0.9);
  --font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--font);
  --display-w: 700;
  --btn-shadow: 0 0 16px rgba(57, 255, 20, 0.35);
  --btn-tt: uppercase;
  --btn-ls: 0.12em;
  --feature-bg: linear-gradient(#050805, #050805) padding-box, linear-gradient(#39ff14, #39ff14) border-box;
  --feature-fg: #39ff14;
  --feature-muted: rgba(57, 255, 20, 0.6);
  --feature-value: linear-gradient(#39ff14, #39ff14);
  --feature-ring: rgba(57, 255, 20, 0.16);
  --feature-shadow: 0 0 24px -6px rgba(57, 255, 20, 0.35);
  --vc-bg: #050805;
  --vc-fg: #39ff14;
  --vc-muted: rgba(57, 255, 20, 0.55);
  --vc-border: #39ff14;
  --vc-shadow: 0 0 40px -10px rgba(57, 255, 20, 0.4);
}
[data-skin="terminal"] :is(.card, .btn, input, select, textarea, .plan-box, .topbar-inner, .tabbar, .badge, .chip, .chips, .list-icon, .drawer, .menu-pop, .icon-btn, .avatar, .brand-mark, .key-row, .stepper, .seg, .seg span, .balance-chip, .balance-chip .dot, .mainnav, .mainnav a, .auth-card, .drawer-nav a, .drawer-ic, .empty > .icon, .card-head h2 > .icon, .tab-cta-inner, .alert, .vault-card, .edit-panel, .seal, .eyebrow, .drawer-who, .subnav a, .plan-box::after) {
  border-radius: 3px;
}
[data-skin="terminal"] :is(.card, .plan-box, .auth-card) { border-style: dashed; }
[data-skin="terminal"] h1::before { content: "> "; color: #39ff14; }
[data-skin="terminal"] .gridlines {
  background-image: repeating-linear-gradient(0deg, rgba(57, 255, 20, 0.035) 0 1px, transparent 1px 3px);
  background-size: auto;
  mask-image: none;
  -webkit-mask-image: none;
}
[data-skin="terminal"] .brand-mark { font-style: normal; }
[data-skin="terminal"] .vault-card { transform: none; }

/* =====================================================================
   OCEAN GLASS — deep teal, frosted glass, aqua glow
   ===================================================================== */
[data-skin="ocean"] {
  --bg: #06202d;
  --bg-2: #072535;
  --surface: rgba(255, 255, 255, 0.07);
  --surface-solid: #0b3346;
  --surface-2: rgba(255, 255, 255, 0.09);
  --surface-3: rgba(255, 255, 255, 0.13);
  --field: rgba(0, 0, 0, 0.22);
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.2);
  --hairline: rgba(255, 255, 255, 0.08);
  --text: #eafcff;
  --text-2: #b7dce6;
  --muted: #82aebb;
  --accent: #3ee6d8;
  --accent-strong: #6ff2e7;
  --accent-ink: #032024;
  --accent-soft: rgba(62, 230, 216, 0.14);
  --accent-text: #5ff0e3;
  --accent-glow: rgba(62, 230, 216, 0.45);
  --accent-grad: linear-gradient(135deg, #3ee6d8, #38a7ff);
  --accent-line: linear-gradient(90deg, transparent, rgba(95, 240, 227, 0.7), transparent);
  --text-grad: linear-gradient(135deg, #8ff8ee, #69c3ff);
  --ok: #5ff0b9;
  --ok-soft: rgba(95, 240, 185, 0.12);
  --err: #ff8a8a;
  --err-soft: rgba(255, 138, 138, 0.12);
  --warn: #ffd27a;
  --warn-soft: rgba(255, 210, 122, 0.12);
  --orb-a: rgba(62, 230, 216, 0.28);
  --orb-b: rgba(56, 112, 255, 0.28);
  --grid-op: 0.3;
  --display: var(--font);
  --display-w: 700;
  --btn-shadow: 0 12px 28px -10px rgba(62, 230, 216, 0.6);
  --btn-ls: 0;
  --feature-bg: linear-gradient(135deg, rgba(62, 230, 216, 0.32), rgba(56, 140, 255, 0.24)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08)) border-box;
  --feature-fg: #ffffff;
  --feature-muted: rgba(255, 255, 255, 0.75);
  --feature-value: linear-gradient(#fff, #fff);
  --feature-ring: rgba(255, 255, 255, 0.22);
  --feature-shadow: 0 24px 50px -24px rgba(62, 230, 216, 0.5);
  --vc-bg: linear-gradient(135deg, rgba(62, 230, 216, 0.4), rgba(56, 120, 255, 0.35)), #0b3346;
  --vc-fg: #ffffff;
  --vc-muted: rgba(255, 255, 255, 0.7);
  --vc-border: rgba(255, 255, 255, 0.3);
}
html[data-skin="ocean"],
[data-skin="ocean"] body {
  background: linear-gradient(160deg, #0b4a63 0%, #082c40 45%, #051923 100%) fixed;
}
[data-skin="ocean"] :is(h1, .hero-title, .stat .value, .plan-price, .summary-row.total strong, .auth-card h1) { letter-spacing: -0.025em; }
[data-skin="ocean"] .brand-mark { font-style: normal; }

/* Non-serif skins: no italic monogram */
html:not([data-skin="obsidian"]) :is(.brand-mark, .avatar) { font-style: normal; }

/* Mono Bold: dashboard + generator details */
[data-skin="mono"] .welcome-ic,
[data-skin="mono"] .wb-ic { background: #fff; border: 2px solid #111; }
[data-skin="mono"] .welcome-balance { background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
[data-skin="mono"] .tile-ic { border: 2px solid #111; }
[data-skin="mono"] .tile-big { color: #111; }
[data-skin="mono"] .stock-line { border: 2px solid #111; }
[data-skin="mono"] .gen-head { background: #ffd400; border-bottom: 2px solid #111; }
[data-skin="mono"] .gen-head::before { display: none; }
[data-skin="mono"] .gen-ic { background: #fff; border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
[data-skin="mono"] .gen-total { border: 2px dashed #111; background: #fff; }
[data-skin="mono"] .stepper button { border-right: 2px solid #111; }
[data-skin="mono"] .stepper button:last-child { border-right: 0; border-left: 2px solid #111; }
[data-skin="mono"] :is(.np-ic, .pc-ic) { border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
[data-skin="mono"] .add-variant > summary { color: #111; }