/* ============================================
   OUTCOMY — Skins (estilos intercambiables) v1
   Se activan con html[data-skin="..."]. Sin data-skin = estilo Outcomy.
   Cada skin define variables para dia y para noche (html.oc-night).
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Chakra+Petch:wght@500;600;700&display=swap');

/* ---------- 1) DARK ORANGE ---------- */
html[data-skin="orange"] {
  --sk-font: 'Manrope', sans-serif;
  --sk-font-display: 'Manrope', sans-serif;
  --sk-bg: #e8e5df;
  --sk-bg-img: repeating-linear-gradient(45deg, rgba(0,0,0,0.025) 0 2px, transparent 2px 6px);
  --sk-bg-alt: #2a2a2a;
  --sk-text: #1f1d1a;
  --sk-muted: #5c574f;
  --sk-text-alt: #f1ede6;
  --sk-muted-alt: #b9b3a8;
  --sk-surface: linear-gradient(180deg, #f7f5f0 0%, #ebe8e1 100%);
  --sk-surface-flat: #f1eee8;
  --sk-border: #cdc8be;
  --sk-radius: 10px;
  --sk-btn-radius: 8px;
  --sk-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.16);
  --sk-accent: #e8760d;
  --sk-accent-soft: rgba(232,118,13,0.14);
  --sk-btn-bg: linear-gradient(180deg, #ffa63f 0%, #ef7a12 100%);
  --sk-btn-text: #ffffff;
  --sk-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 5px rgba(0,0,0,0.25);
  --sk-btn2-bg: linear-gradient(180deg, #fbf9f5 0%, #e3dfd7 100%);
  --sk-btn2-text: #1f1d1a;
  --sk-header: rgba(236, 233, 227, 0.92);
}
html.oc-night[data-skin="orange"] {
  --sk-bg: #2b2b2b;
  --sk-bg-img: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px);
  --sk-bg-alt: #1c1c1c;
  --sk-text: #f1ede6;
  --sk-muted: #b3ada3;
  --sk-text-alt: #f1ede6;
  --sk-muted-alt: #a39d93;
  --sk-surface: linear-gradient(180deg, #454545 0%, #343434 100%);
  --sk-surface-flat: #3a3a3a;
  --sk-border: #1a1a1a;
  --sk-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.5);
  --sk-accent: #ff9a2e;
  --sk-accent-soft: rgba(255,154,46,0.16);
  --sk-btn-bg: linear-gradient(180deg, #4e4e4e 0%, #353535 100%);
  --sk-btn-text: #ff9a2e;
  --sk-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 5px rgba(0,0,0,0.6);
  --sk-btn2-bg: linear-gradient(180deg, #4e4e4e 0%, #353535 100%);
  --sk-btn2-text: #f1ede6;
  --sk-header: rgba(34, 34, 34, 0.94);
}

/* ---------- 2) FONO / BLUEPRINT ---------- */
html[data-skin="fono"] {
  --sk-font: 'Space Grotesk', 'Manrope', sans-serif;
  --sk-font-display: 'Space Grotesk', 'Manrope', sans-serif;
  --sk-bg: #e9eee6;
  --sk-bg-img: none;
  --sk-bg-alt: #121412;
  --sk-text: #121412;
  --sk-muted: #3f443e;
  --sk-text-alt: #e9eee6;
  --sk-muted-alt: #b4bbb1;
  --sk-surface: #e9eee6;
  --sk-surface-flat: #e9eee6;
  --sk-border: #121412;
  --sk-radius: 22px;
  --sk-btn-radius: 999px;
  --sk-shadow: none;
  --sk-accent: #121412;
  --sk-accent-soft: rgba(18,20,18,0.08);
  --sk-btn-bg: #121412;
  --sk-btn-text: #e9eee6;
  --sk-btn-shadow: none;
  --sk-btn2-bg: transparent;
  --sk-btn2-text: #121412;
  --sk-header: rgba(233, 238, 230, 0.94);
}
html.oc-night[data-skin="fono"] {
  --sk-bg: #121412;
  --sk-bg-alt: #e9eee6;
  --sk-text: #e9eee6;
  --sk-muted: #b4bbb1;
  --sk-text-alt: #121412;
  --sk-muted-alt: #3f443e;
  --sk-surface: #121412;
  --sk-surface-flat: #121412;
  --sk-border: #e9eee6;
  --sk-accent: #e9eee6;
  --sk-accent-soft: rgba(233,238,230,0.1);
  --sk-btn-bg: #e9eee6;
  --sk-btn-text: #121412;
  --sk-btn2-text: #e9eee6;
  --sk-header: rgba(18, 20, 18, 0.94);
}
html[data-skin="fono"] .oc-tool, html[data-skin="fono"] .oc-section-label, html[data-skin="fono"] .oc-chat-note,
html[data-skin="fono"] .oc-g-hint, html[data-skin="fono"] .oc-pc-tag, html[data-skin="fono"] small,
html[data-skin="fono"] .text-xs, html[data-skin="fono"] .text-sm.font-semibold.uppercase {
  font-family: 'Space Mono', monospace !important;
}
html[data-skin="fono"] .card, html[data-skin="fono"] .bg-white, html[data-skin="fono"] #oc-chat,
html[data-skin="fono"] .oc-bubble, html[data-skin="fono"] .oc-g-item, html[data-skin="fono"] .oc-g-score,
html[data-skin="fono"] .oc-g-skip, html[data-skin="fono"] .oc-tool {
  border-width: 1.5px !important;
}

/* ---------- 3) CHROME ---------- */
html[data-skin="chrome"] {
  --sk-font: 'Manrope', sans-serif;
  --sk-font-display: 'Chakra Petch', 'Manrope', sans-serif;
  --sk-bg: #d7dbe1;
  --sk-bg-img: linear-gradient(180deg, #e3e6eb 0%, #cfd4db 100%);
  --sk-bg-alt: #15171b;
  --sk-text: #0f1115;
  --sk-muted: #4b5563;
  --sk-text-alt: #f2f4f7;
  --sk-muted-alt: #9aa3ad;
  --sk-surface: linear-gradient(180deg, #fbfcfd 0%, #e2e6eb 100%);
  --sk-surface-flat: #eef0f3;
  --sk-border: #aab2bd;
  --sk-radius: 16px;
  --sk-btn-radius: 999px;
  --sk-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #b7bec8, 0 3px 8px rgba(0,0,0,0.18);
  --sk-accent: #0f1115;
  --sk-accent-soft: rgba(15,17,21,0.08);
  --sk-btn-bg: linear-gradient(180deg, #ffffff 0%, #c9d0d8 100%);
  --sk-btn-text: #0f1115;
  --sk-btn-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #98a1ab, 0 2px 4px rgba(0,0,0,0.28);
  --sk-btn2-bg: linear-gradient(180deg, #f4f6f8 0%, #d6dbe1 100%);
  --sk-btn2-text: #0f1115;
  --sk-header: rgba(226, 229, 234, 0.9);
}
html.oc-night[data-skin="chrome"] {
  --sk-bg: #0b0c0f;
  --sk-bg-img: radial-gradient(circle at 50% 0%, #1b1e24 0%, #0b0c0f 60%);
  --sk-bg-alt: #050607;
  --sk-text: #f2f4f7;
  --sk-muted: #9aa3ad;
  --sk-text-alt: #f2f4f7;
  --sk-muted-alt: #9aa3ad;
  --sk-surface: linear-gradient(180deg, #2a2d33 0%, #15171b 100%);
  --sk-surface-flat: #1b1e23;
  --sk-border: #3a3f47;
  --sk-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px #0b0c0f, 0 0 0 2px #5a6069, 0 6px 14px rgba(0,0,0,0.6);
  --sk-accent: #dfe3e8;
  --sk-accent-soft: rgba(223,227,232,0.1);
  --sk-btn-bg: linear-gradient(180deg, #686d75 0%, #23262b 100%);
  --sk-btn-text: #f2f4f7;
  --sk-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 2px #0b0c0f, 0 0 0 3px #8a9099, 0 4px 10px rgba(0,0,0,0.6);
  --sk-btn2-bg: linear-gradient(180deg, #3a3e45 0%, #1c1f24 100%);
  --sk-btn2-text: #f2f4f7;
  --sk-header: rgba(11, 12, 15, 0.9);
}

/* ---------- 4) NEUMORFISMO ---------- */
html[data-skin="neo"] {
  --sk-font: 'Manrope', sans-serif;
  --sk-font-display: 'Manrope', sans-serif;
  --sk-bg: #e6eaf0;
  --sk-bg-img: none;
  --sk-bg-alt: #e6eaf0;
  --sk-text: #1e2a3a;
  --sk-muted: #5f6b7a;
  --sk-text-alt: #1e2a3a;
  --sk-muted-alt: #5f6b7a;
  --sk-surface: #e6eaf0;
  --sk-surface-flat: #e6eaf0;
  --sk-border: transparent;
  --sk-radius: 26px;
  --sk-btn-radius: 999px;
  --sk-shadow: 9px 9px 20px #c3c8d0, -9px -9px 20px #ffffff;
  --sk-accent: #2563FF;
  --sk-accent-soft: rgba(37,99,255,0.12);
  --sk-btn-bg: linear-gradient(135deg, #3b74ff 0%, #2559e6 100%);
  --sk-btn-text: #ffffff;
  --sk-btn-shadow: 6px 6px 14px #c3c8d0, -6px -6px 14px #ffffff;
  --sk-btn2-bg: #e6eaf0;
  --sk-btn2-text: #2563FF;
  --sk-header: rgba(230, 234, 240, 0.92);
}
html.oc-night[data-skin="neo"] {
  --sk-bg: #23272f;
  --sk-bg-alt: #23272f;
  --sk-text: #e8ecf2;
  --sk-muted: #9aa3b2;
  --sk-text-alt: #e8ecf2;
  --sk-muted-alt: #9aa3b2;
  --sk-surface: #23272f;
  --sk-surface-flat: #23272f;
  --sk-shadow: 9px 9px 20px #181b20, -9px -9px 20px #2e333e;
  --sk-accent: #6c9cff;
  --sk-accent-soft: rgba(108,156,255,0.14);
  --sk-btn-shadow: 6px 6px 14px #181b20, -6px -6px 14px #2e333e;
  --sk-btn2-bg: #23272f;
  --sk-btn2-text: #6c9cff;
  --sk-header: rgba(35, 39, 47, 0.92);
}
html[data-skin="neo"] .oc-chat-mic, html[data-skin="neo"] .oc-tool, html[data-skin="neo"] .oc-g-item,
html[data-skin="neo"] .oc-g-skip, html[data-skin="neo"] .oc-g-score {
  box-shadow: 5px 5px 12px var(--sk-neo-d, #c3c8d0), -5px -5px 12px var(--sk-neo-l, #ffffff) !important;
  border-color: transparent !important;
}
html.oc-night[data-skin="neo"] { --sk-neo-d: #181b20; --sk-neo-l: #2e333e; }

/* ---------- 5) CLAY ---------- */
html[data-skin="clay"] {
  --sk-font: 'Manrope', sans-serif;
  --sk-font-display: 'Manrope', sans-serif;
  --sk-bg: #f1efe9;
  --sk-bg-img: none;
  --sk-bg-alt: #2f2e2b;
  --sk-text: #2b2b2b;
  --sk-muted: #6b6b6b;
  --sk-text-alt: #f3f1ea;
  --sk-muted-alt: #b5b2a8;
  --sk-surface: #fbf9f4;
  --sk-surface-flat: #fbf9f4;
  --sk-border: #e1dcd2;
  --sk-radius: 28px;
  --sk-btn-radius: 999px;
  --sk-shadow: 0 6px 0 #ddd8ce, 0 16px 26px rgba(0,0,0,0.08);
  --sk-accent: #2f8f72;
  --sk-accent-soft: rgba(134,227,195,0.28);
  --sk-btn-bg: #8fe6c6;
  --sk-btn-text: #1f3b32;
  --sk-btn-shadow: 0 5px 0 #5fbf9d, 0 12px 18px rgba(0,0,0,0.12);
  --sk-btn2-bg: #ffffff;
  --sk-btn2-text: #2b2b2b;
  --sk-header: rgba(241, 239, 233, 0.92);
}
html.oc-night[data-skin="clay"] {
  --sk-bg: #2a2a28;
  --sk-bg-alt: #1c1c1a;
  --sk-text: #f3f1ea;
  --sk-muted: #b5b2a8;
  --sk-text-alt: #f3f1ea;
  --sk-muted-alt: #b5b2a8;
  --sk-surface: #363531;
  --sk-surface-flat: #363531;
  --sk-border: #47453f;
  --sk-shadow: 0 6px 0 #1b1b19, 0 16px 26px rgba(0,0,0,0.4);
  --sk-accent: #8fe6c6;
  --sk-accent-soft: rgba(143,230,198,0.16);
  --sk-btn-shadow: 0 5px 0 #4fa88a, 0 12px 18px rgba(0,0,0,0.4);
  --sk-btn2-bg: #3f3e39;
  --sk-btn2-text: #f3f1ea;
  --sk-header: rgba(42, 42, 40, 0.92);
}

/* ============================================
   REGLAS COMUNES: aplican a cualquier skin (html[data-skin])
   y pisan tanto el build como el modo noche.
   ============================================ */
html[data-skin] body {
  background: var(--sk-bg) !important;
  background-image: var(--sk-bg-img) !important;
  color: var(--sk-text) !important;
  font-family: var(--sk-font) !important;
}
html[data-skin] .font-display { font-family: var(--sk-font-display) !important; }

/* secciones */
html[data-skin] #hero, html[data-skin] #como-trabajamos, html[data-skin] #apps, html[data-skin] #planes,
html[data-skin] #nosotros, html[data-skin] #prensa, html[data-skin] #productos,
html[data-skin] section[class*="bg-[linear-gradient(180deg,#ffffff"],
html[data-skin] section[class*="bg-[linear-gradient(180deg,#FFFFFF"],
html[data-skin] [class*="bg-[linear-gradient(135deg,#FFF8F0"],
html[data-skin] [class*="bg-[linear-gradient(135deg,#EAF8F6"],
html[data-skin] [class*="bg-[linear-gradient(135deg,#E7F0FA"] {
  background: transparent !important;
}
html[data-skin] #que-hacemos, html[data-skin] #contacto, html[data-skin] footer,
html[data-skin] [class*="bg-[linear-gradient(180deg,#071225"], html[data-skin] .bg-bg-dark, html[data-skin] .bg-bg-dark\/55 {
  background: var(--sk-bg-alt) !important;
  color: var(--sk-text-alt) !important;
}
html[data-skin] #que-hacemos .text-white, html[data-skin] #contacto .text-white, html[data-skin] footer .text-white,
html[data-skin] #que-hacemos h2, html[data-skin] #contacto h2 { color: var(--sk-text-alt) !important; }
html[data-skin] #que-hacemos .text-white\/70, html[data-skin] #contacto .text-white\/70, html[data-skin] footer .text-white\/70,
html[data-skin] #que-hacemos .text-white\/55, html[data-skin] #contacto .text-white\/55, html[data-skin] footer .text-white\/55,
html[data-skin] #que-hacemos .text-ink-muted, html[data-skin] #contacto .text-ink-muted, html[data-skin] footer .text-ink-muted {
  color: var(--sk-muted-alt) !important;
}
html[data-skin] #que-hacemos .bg-white\/5, html[data-skin] #contacto .bg-white\/5, html[data-skin] footer .bg-white\/5,
html[data-skin] #contacto .border-white\/15, html[data-skin] #contacto .bg-white\/10 {
  background-color: color-mix(in srgb, var(--sk-text-alt) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--sk-text-alt) 18%, transparent) !important;
}

/* header */
html[data-skin] header, html[data-skin] header > div:first-child,
html[data-skin] header .bg-white\/70, html[data-skin] header .bg-white\/75, html[data-skin] header .bg-white\/85 {
  background: var(--sk-header) !important;
  border-color: var(--sk-border) !important;
}
html[data-skin] header, html[data-skin] header > div, html[data-skin] header [class*="bg-white/"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-width: 0 0 1px 0 !important;
}
html[data-skin] header nav a { color: var(--sk-muted) !important; border-radius: var(--sk-btn-radius) !important; font-family: var(--sk-font) !important; }
html[data-skin] header nav a:hover { color: var(--sk-text) !important; background: var(--sk-accent-soft) !important; }
html[data-skin] header .bg-ink { background: var(--sk-text) !important; }

/* textos */
html[data-skin] .text-ink, html[data-skin] #oc-plans-stage ~ * .text-ink { color: var(--sk-text) !important; }
html[data-skin] .text-ink-muted, html[data-skin] .text-ink-muted\/80 { color: var(--sk-muted) !important; }
html[data-skin] .text-brand-blue, html[data-skin] .text-brand-cyan, html[data-skin] .text-brand-violet { color: var(--sk-accent) !important; }
html[data-skin] .gradient-text {
  background-image: none !important;
  -webkit-text-fill-color: var(--sk-accent) !important;
  color: var(--sk-accent) !important;
}
html[data-skin] .bg-ink { background-color: var(--sk-text) !important; }

/* superficies: tarjetas, cajas */
html[data-skin] .card, html[data-skin] .bg-white, html[data-skin] [class*="bg-white/7"], html[data-skin] [class*="bg-white/8"],
html[data-skin] #oc-chat, html[data-skin] .oc-bubble, html[data-skin] .oc-g-item, html[data-skin] .oc-g-score,
html[data-skin] .oc-g-skip, html[data-skin] .oc-g-stage, html[data-skin] .oc-plan-card {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow) !important;
  color: var(--sk-text);
}
html[data-skin] .oc-bubble::after { background: var(--sk-surface-flat) !important; border-color: var(--sk-border) !important; }
html[data-skin] .bg-bg-light { background: var(--sk-surface-flat) !important; }
html[data-skin] .border-border-light, html[data-skin] .border-border-light\/70, html[data-skin] .border-border-light\/80,
html[data-skin] .border-white, html[data-skin] .border-white\/70 { border-color: var(--sk-border) !important; }
html[data-skin] .bg-brand-blue\/10, html[data-skin] .bg-brand-blue\/15, html[data-skin] .bg-brand-blue\/20,
html[data-skin] .bg-brand-violet\/5, html[data-skin] .bg-brand-violet\/15,
html[data-skin] [class*="from-brand-blue/10"] { background: var(--sk-accent-soft) !important; background-image: none !important; }
html[data-skin] .border-brand-blue\/15, html[data-skin] .border-brand-blue\/40 { border-color: var(--sk-border) !important; }
html[data-skin] .shadow-card, html[data-skin] .shadow-card-hover, html[data-skin] .shadow-md { box-shadow: var(--sk-shadow) !important; }

/* planes 3D: se mantienen oscuros pero con la tipografia y el acento del skin */
html[data-skin] .oc-plan-card { background: var(--sk-bg-alt) !important; color: var(--sk-text-alt) !important; }
html[data-skin] .oc-pc-title, html[data-skin] .oc-pc-price { color: var(--sk-text-alt) !important; }
html[data-skin] .oc-pc-sub, html[data-skin] .oc-pc-ideal, html[data-skin] .oc-pc-price span, html[data-skin] .oc-pc-feats li { color: var(--sk-muted-alt) !important; }
html[data-skin] .oc-pc-tag, html[data-skin] .oc-pc-helper { color: var(--sk-accent) !important; }

/* botones principales */
html[data-skin] .btn-primary, html[data-skin] .oc-chat-send, html[data-skin] .oc-g-auto, html[data-skin] .oc-pc-btn,
html[data-skin] .oc-tool.oc-on, html[data-skin] .oc-chat-user, html[data-skin] .bg-brand-blue,
html[data-skin] a[class*="bg-gradient-to-r"], html[data-skin] button[class*="bg-gradient-to-r"] {
  background: var(--sk-btn-bg) !important;
  background-image: var(--sk-btn-bg) !important;
  color: var(--sk-btn-text) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-btn-radius) !important;
  box-shadow: var(--sk-btn-shadow) !important;
  font-family: var(--sk-font) !important;
}
html[data-skin] .oc-chat-send { border-radius: 50% !important; }
html[data-skin] .btn-primary svg, html[data-skin] .oc-chat-send svg { color: var(--sk-btn-text); }
/* botones secundarios */
html[data-skin] .oc-tool, html[data-skin] .oc-chat-mic, html[data-skin] .oc-g-item, html[data-skin] .oc-g-skip,
html[data-skin] .btn-ghost-dark, html[data-skin] .btn-ghost {
  background: var(--sk-btn2-bg) !important;
  color: var(--sk-btn2-text) !important;
  border: 1px solid var(--sk-border) !important;
  font-family: var(--sk-font) !important;
}
html[data-skin] .oc-tool, html[data-skin] .oc-g-skip, html[data-skin] .btn-ghost-dark, html[data-skin] .btn-ghost { border-radius: var(--sk-btn-radius) !important; }
html[data-skin] .oc-tools { border-left-color: var(--sk-border); }
html[data-skin] .oc-chat-in { color: var(--sk-text); font-family: var(--sk-font); }
html[data-skin] .oc-chat-in::placeholder { color: var(--sk-muted); }
html[data-skin] .oc-chat-note, html[data-skin] .oc-g-hint, html[data-skin] .oc-g-foot, html[data-skin] .oc-section-label { color: var(--sk-muted) !important; }
html[data-skin] .oc-chat-comy { background: var(--sk-surface-flat) !important; color: var(--sk-text) !important; border: 1px solid var(--sk-border); }
html[data-skin] .oc-chat-log { border-bottom-color: var(--sk-border); }
html[data-skin] .oc-g-shop, html[data-skin] .oc-g-item small { color: var(--sk-text) !important; }
html[data-skin] .oc-g-score { color: var(--sk-accent) !important; }
html[data-skin] #oc-welcome { background: color-mix(in srgb, var(--sk-bg) 82%, transparent) !important; }
html[data-skin] .oc-hero-comy { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.18)); }
html[data-skin] .oc-dots i { background: var(--sk-accent); }

/* ============================================
   SELECTOR DE SKINS (en el header)
   ============================================ */
.oc-skin-wrap { position: relative; }
.oc-skins {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 8px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  font-family: 'Manrope', sans-serif;
}
.oc-skins.oc-open { display: flex; }
.oc-skin-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.oc-skin-opt:hover { background: #f1f5f9; }
.oc-skin-opt.oc-on { background: #eef2ff; color: #2563FF; }
.oc-skin-opt i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
}
.oc-skin-opt[data-skin=""] i { background: linear-gradient(135deg, #2563FF, #00CFFF); }
.oc-skin-opt[data-skin="orange"] i { background: linear-gradient(135deg, #3a3a3a 50%, #ff9a2e 50%); }
.oc-skin-opt[data-skin="fono"] i { background: linear-gradient(135deg, #e9eee6 50%, #121412 50%); }
.oc-skin-opt[data-skin="chrome"] i { background: linear-gradient(180deg, #ffffff, #8a9099 60%, #15171b); }
.oc-skin-opt[data-skin="neo"] i { background: #e6eaf0; box-shadow: 3px 3px 6px #c3c8d0, -3px -3px 6px #ffffff; }
.oc-skin-opt[data-skin="clay"] i { background: linear-gradient(135deg, #fbf9f4 50%, #8fe6c6 50%); }
html.oc-night .oc-skins { background: #0f1a2e; border-color: #24324d; }
html.oc-night .oc-skin-opt { color: #e5edf7; }
html.oc-night .oc-skin-opt:hover { background: #16243d; }
html.oc-night .oc-skin-opt.oc-on { background: #16243d; color: #8fb3ff; }
html[data-skin] .oc-skins { background: var(--sk-surface-flat); border-color: var(--sk-border); }
html[data-skin] .oc-skin-opt { color: var(--sk-text); }
html[data-skin] .oc-skin-opt:hover, html[data-skin] .oc-skin-opt.oc-on { background: var(--sk-accent-soft); color: var(--sk-accent); }