/* ============================================================
   WSV TECH — DESIGN THEME ENGINE
   Sobrescreve variáveis ORIGINAIS (--cyan, --violet, --blue, --green, --silver-*)
   preservando gradientes/glows/brilho originais.
   ============================================================ */

/* ---------------------------------------------------------------
   CARBON — variante prata/cinza
   --------------------------------------------------------------- */
html[data-theme="carbon"] {
  --cyan: #d7d9dd;
  --violet: #686b70;
  --blue: #aeb1b6;
  --green: #7a9a8c;

  --bg: #0a0b0d;
  --bg2: #101114;
  --bg-alt: #0c0d10;
  --surface: #131518;
  --surface2: #191b1f;
  --line: rgba(255,255,255,.10);
  --text: #f2f3f5;
  --muted: #9a9da3;

  --silver-dark: #686b70;
  --silver: #aeb1b6;
  --silver-light: #d7d9dd;
  --silver-bright: #f2f3f5;

  --silver-glow: rgba(220, 225, 232, .20);
  --silver-glow-soft: rgba(220, 225, 232, .09);

  --silver-gradient: linear-gradient(115deg, #5d6065 0%, #f4f5f7 25%, #85888d 48%, #ffffff 68%, #5b5e63 100%);
}

/* ---------------------------------------------------------------
   OCEAN — tons de azul oceano
   --------------------------------------------------------------- */
html[data-theme="ocean"] {
  --cyan: #4FB0E8;
  --violet: #2E86C1;
  --blue: #1B4F72;
  --green: #2ECC71;

  --bg: #050a12;
  --bg2: #081120;
  --bg-alt: #060d18;
  --surface: #0b1524;
  --surface2: #101c30;
  --line: rgba(120,180,255,.13);
  --text: #eef5fc;
  --muted: #8ba3bd;

  --silver-dark: #2E86C1;
  --silver: #4FB0E8;
  --silver-light: #85C1E9;
  --silver-bright: #D6EAF8;

  --silver-glow: rgba(79, 176, 232, .35);
  --silver-glow-soft: rgba(79, 176, 232, .15);

  --silver-gradient: linear-gradient(115deg, #1B4F72 0%, #4FB0E8 25%, #85C1E9 48%, #D6EAF8 68%, #1B4F72 100%);
}

/* ---------------------------------------------------------------
   NEON — ciano neon vibrante
   --------------------------------------------------------------- */
html[data-theme="neon"] {
  --cyan: #54C8FF;
  --violet: #00BFFF;
  --blue: #0099CC;
  --green: #00E676;

  --bg: #020608;
  --bg2: #050d12;
  --bg-alt: #030a0e;
  --surface: #081018;
  --surface2: #0c1620;
  --line: rgba(84,200,255,.17);
  --text: #f0fbff;
  --muted: #8fb3c4;

  --silver-dark: #00BFFF;
  --silver: #54C8FF;
  --silver-light: #8CE4FF;
  --silver-bright: #CCF4FF;

  --silver-glow: rgba(84, 200, 255, .55);
  --silver-glow-soft: rgba(84, 200, 255, .25);

  --silver-gradient: linear-gradient(115deg, #0099CC 0%, #54C8FF 25%, #8CE4FF 48%, #CCF4FF 68%, #0099CC 100%);
}

/* ---------------------------------------------------------------
   EMERALD — verde esmeralda
   --------------------------------------------------------------- */
html[data-theme="emerald"] {
  --cyan: #38C07E;
  --violet: #2E8B57;
  --blue: #1A5C3A;
  --green: #22C55E;

  --bg: #040b07;
  --bg2: #081410;
  --bg-alt: #060f0a;
  --surface: #0b1510;
  --surface2: #101d17;
  --line: rgba(56,192,126,.15);
  --text: #effaf3;
  --muted: #8fae9d;

  --silver-dark: #2E8B57;
  --silver: #38C07E;
  --silver-light: #6FD4A5;
  --silver-bright: #A7E8C8;

  --silver-glow: rgba(56, 192, 126, .45);
  --silver-glow-soft: rgba(56, 192, 126, .20);

  --silver-gradient: linear-gradient(115deg, #1A5C3A 0%, #38C07E 25%, #6FD4A5 48%, #A7E8C8 68%, #1A5C3A 100%);
}

/* ---------------------------------------------------------------
   COPPER — cobre/âmbar quente
   --------------------------------------------------------------- */
html[data-theme="copper"] {
  --cyan: #D99A5B;
  --violet: #C47D3A;
  --blue: #8B5A2B;
  --green: #A87D3D;

  --bg: #0d0805;
  --bg2: #150e08;
  --bg-alt: #100a06;
  --surface: #18100a;
  --surface2: #20150c;
  --line: rgba(217,154,91,.17);
  --text: #faf3ea;
  --muted: #b39a80;

  --silver-dark: #C47D3A;
  --silver: #D99A5B;
  --silver-light: #E6B882;
  --silver-bright: #F2D9B5;

  --silver-glow: rgba(217, 154, 91, .40);
  --silver-glow-soft: rgba(217, 154, 91, .18);

  --silver-gradient: linear-gradient(115deg, #8B5A2B 0%, #D99A5B 25%, #E6B882 48%, #F2D9B5 68%, #8B5A2B 100%);
}

/* ---------------------------------------------------------------
   VIOLET — roxo vibrante
   --------------------------------------------------------------- */
html[data-theme="violet"] {
  --cyan: #8A6BFF;
  --violet: #6C4DFF;
  --blue: #4B32CC;
  --green: #7C3AED;

  --bg: #080614;
  --bg2: #0d0a1e;
  --bg-alt: #0a0818;
  --surface: #120c22;
  --surface2: #181030;
  --line: rgba(138,107,255,.17);
  --text: #f3f0ff;
  --muted: #9d94c4;

  --silver-dark: #6C4DFF;
  --silver: #8A6BFF;
  --silver-light: #B39EFF;
  --silver-bright: #D6C9FF;

  --silver-glow: rgba(138, 107, 255, .50);
  --silver-glow-soft: rgba(138, 107, 255, .22);

  --silver-gradient: linear-gradient(115deg, #4B32CC 0%, #8A6BFF 25%, #B39EFF 48%, #D6C9FF 68%, #4B32CC 100%);
}

/* ---------------------------------------------------------------
   RUBY — vermelho rubi
   --------------------------------------------------------------- */
html[data-theme="ruby"] {
  --cyan: #F2555A;
  --violet: #B91C1C;
  --blue: #7F1D1D;
  --green: #4ADE80;

  --bg: #0d0506;
  --bg2: #170a0c;
  --bg-alt: #100608;
  --surface: #1a0d0f;
  --surface2: #221114;
  --line: rgba(242,85,90,.18);
  --text: #fdf0f0;
  --muted: #b08f92;

  --silver-dark: #B91C1C;
  --silver: #F2555A;
  --silver-light: #FCA5A5;
  --silver-bright: #FECACA;

  --silver-glow: rgba(242, 85, 90, .45);
  --silver-glow-soft: rgba(242, 85, 90, .20);

  --silver-gradient: linear-gradient(115deg, #7F1D1D 0%, #F2555A 25%, #FCA5A5 48%, #FECACA 68%, #7F1D1D 100%);
}

/* ---------------------------------------------------------------
   GOLD — dourado
   --------------------------------------------------------------- */
html[data-theme="gold"] {
  --cyan: #E7B416;
  --violet: #B8860B;
  --blue: #8A6708;
  --green: #84CC16;

  --bg: #0c0a04;
  --bg2: #161106;
  --bg-alt: #0f0c05;
  --surface: #1a1408;
  --surface2: #231b0c;
  --line: rgba(231,180,22,.18);
  --text: #fdf8ea;
  --muted: #b3a67f;

  --silver-dark: #B8860B;
  --silver: #E7B416;
  --silver-light: #F5D76E;
  --silver-bright: #FBEEC2;

  --silver-glow: rgba(231, 180, 22, .40);
  --silver-glow-soft: rgba(231, 180, 22, .18);

  --silver-gradient: linear-gradient(115deg, #8A6708 0%, #E7B416 25%, #F5D76E 48%, #FBEEC2 68%, #8A6708 100%);
}

/* ---------------------------------------------------------------
   ROSE — rosa
   --------------------------------------------------------------- */
html[data-theme="rose"] {
  --cyan: #F472B6;
  --violet: #DB2777;
  --blue: #9D174D;
  --green: #34D399;

  --bg: #0e060a;
  --bg2: #180b12;
  --bg-alt: #12070d;
  --surface: #1c0e16;
  --surface2: #26121e;
  --line: rgba(244,114,182,.18);
  --text: #fdf2f8;
  --muted: #b794a8;

  --silver-dark: #DB2777;
  --silver: #F472B6;
  --silver-light: #F9A8D4;
  --silver-bright: #FCE7F3;

  --silver-glow: rgba(244, 114, 182, .40);
  --silver-glow-soft: rgba(244, 114, 182, .18);

  --silver-gradient: linear-gradient(115deg, #9D174D 0%, #F472B6 25%, #F9A8D4 48%, #FCE7F3 68%, #9D174D 100%);
}

/* ---------------------------------------------------------------
   SUNSET — laranja pôr do sol
   --------------------------------------------------------------- */
html[data-theme="sunset"] {
  --cyan: #FF7A45;
  --violet: #E8590C;
  --blue: #A1400B;
  --green: #F59E0B;

  --bg: #0e0703;
  --bg2: #190e05;
  --bg-alt: #120a04;
  --surface: #1d1108;
  --surface2: #281709;
  --line: rgba(255,122,69,.18);
  --text: #fff4ec;
  --muted: #bda088;

  --silver-dark: #E8590C;
  --silver: #FF7A45;
  --silver-light: #FFA873;
  --silver-bright: #FFD8B8;

  --silver-glow: rgba(255, 122, 69, .42);
  --silver-glow-soft: rgba(255, 122, 69, .18);

  --silver-gradient: linear-gradient(115deg, #A1400B 0%, #FF7A45 25%, #FFA873 48%, #FFD8B8 68%, #A1400B 100%);
}

/* ---------------------------------------------------------------
   TEAL — turquesa
   --------------------------------------------------------------- */
html[data-theme="teal"] {
  --cyan: #2DD4BF;
  --violet: #0D9488;
  --blue: #0F766E;
  --green: #34D399;

  --bg: #030b0b;
  --bg2: #071514;
  --bg-alt: #050f0f;
  --surface: #0a1a19;
  --surface2: #0f2422;
  --line: rgba(45,212,191,.17);
  --text: #ecfdf9;
  --muted: #8fb5ae;

  --silver-dark: #0D9488;
  --silver: #2DD4BF;
  --silver-light: #5EEAD4;
  --silver-bright: #CCFBF1;

  --silver-glow: rgba(45, 212, 191, .42);
  --silver-glow-soft: rgba(45, 212, 191, .18);

  --silver-gradient: linear-gradient(115deg, #0F766E 0%, #2DD4BF 25%, #5EEAD4 48%, #CCFBF1 68%, #0F766E 100%);
}

/* ============================================================
   CAMADA GENÉRICA — pontos que usam cor "cravada" no CSS das
   páginas passam a seguir as variáveis do tema ativo.
   Só vale quando há data-theme (Original fica 100% intacto).
   ============================================================ */
html[data-theme] .btn-primary{background:linear-gradient(100deg,var(--blue),var(--violet),var(--blue));background-size:220% 100%;box-shadow:0 12px 35px color-mix(in srgb,var(--violet) 26%,transparent)}
html[data-theme] .btn-primary:hover{box-shadow:0 16px 42px color-mix(in srgb,var(--violet) 40%,transparent)}
html[data-theme] .btn-ghost:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 6%,transparent)}
html[data-theme] .hero:before{background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 13%,transparent),transparent 58%)}
html[data-theme] .hero:after{background:radial-gradient(circle,color-mix(in srgb,var(--violet) 13%,transparent),transparent 65%)}
html[data-theme] .cursor-glow{background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 12%,transparent),color-mix(in srgb,var(--violet) 8%,transparent) 35%,transparent 70%)}
html[data-theme] .scroll-progress{box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 55%,transparent)}
html[data-theme] .brand:before{background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 50%,transparent),color-mix(in srgb,var(--violet) 32%,transparent) 60%,transparent 75%)}
html[data-theme] .brand img{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cyan) 30%,transparent))}
html[data-theme] .brand:hover img{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--cyan) 55%,transparent))}
html[data-theme] .kicker i{box-shadow:0 0 10px color-mix(in srgb,var(--cyan) 70%,transparent)}
html[data-theme] .product-tag{color:var(--silver-bright);background:color-mix(in srgb,var(--cyan) 9%,transparent);border-color:color-mix(in srgb,var(--cyan) 25%,transparent)}
html[data-theme] .hero-photo:after{background:linear-gradient(120deg,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 40%,color-mix(in srgb,var(--violet) 13%,transparent))}
html[data-theme] .story-media:after{background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 38%,color-mix(in srgb,var(--violet) 18%,transparent))}
html[data-theme] .service:before{background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 13%,transparent),transparent 65%)}
html[data-theme] .service:after{background:radial-gradient(220px circle at var(--mx) var(--my),color-mix(in srgb,var(--cyan) 14%,transparent),transparent 72%)}
html[data-theme] .service:hover .service-icon{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 18%,transparent)}
html[data-theme] .section.dark{background:var(--bg-alt)}
html[data-theme] footer{background:var(--bg-alt)}
html[data-theme] header.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent)}
html[data-theme] .chip:hover{border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
html[data-theme] .chip.is-active{border-color:color-mix(in srgb,var(--cyan) 55%,transparent);background:color-mix(in srgb,var(--cyan) 9%,transparent)}
html[data-theme] .mini-shot:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
html[data-theme] .contact-card:focus-within{border-color:color-mix(in srgb,var(--cyan) 40%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 8%,transparent)}
html[data-theme] .contact-card input:focus{border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}
html[data-theme] .contact-method:hover{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);background:color-mix(in srgb,var(--cyan) 7%,transparent)}
html[data-theme] .principle:hover{border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}
html[data-theme] .footer-social a:hover{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
html[data-theme] .back-link:hover,html[data-theme] .back-btn:hover{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);background:color-mix(in srgb,var(--cyan) 6%,transparent)}
html[data-theme] .project:hover,.plan:hover,.card:hover{border-color:color-mix(in srgb,var(--cyan) 35%,transparent)}
html[data-theme] .plan-tag{background:linear-gradient(100deg,var(--blue),var(--violet));color:#fff}
html[data-theme] .plan.featured,html[data-theme] .plan-card.pop{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);box-shadow:0 22px 55px color-mix(in srgb,var(--cyan) 12%,transparent)}
html[data-theme] .plan-option.checked{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 12%,transparent)}
html[data-theme] .tab-btn.active,.chip.active{background:linear-gradient(100deg,var(--blue),var(--violet));box-shadow:0 10px 28px color-mix(in srgb,var(--violet) 30%,transparent)}
html[data-theme] .updated{color:var(--silver-bright);border-color:color-mix(in srgb,var(--cyan) 30%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
html[data-theme] th{color:var(--silver-bright);background:color-mix(in srgb,var(--cyan) 5%,transparent)}
html[data-theme] .field input:focus,html[data-theme] .field select:focus{border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}

/* --- Imagens acompanham o tema (sutil, sem distorcer) --- */
html[data-theme="carbon"] .hero-photo img,html[data-theme="carbon"] .banner-media img,html[data-theme="carbon"] .story-media img,html[data-theme="carbon"] .mini-shot img,html[data-theme="carbon"] .card-preview img,html[data-theme="carbon"] .project img{filter:saturate(.5) contrast(1.07)}
html[data-theme="ocean"] .hero-photo img,html[data-theme="ocean"] .banner-media img,html[data-theme="ocean"] .story-media img,html[data-theme="ocean"] .mini-shot img,html[data-theme="ocean"] .card-preview img,html[data-theme="ocean"] .project img{filter:saturate(.95) contrast(1.07) hue-rotate(6deg)}
html[data-theme="neon"] .hero-photo img,html[data-theme="neon"] .banner-media img,html[data-theme="neon"] .story-media img,html[data-theme="neon"] .mini-shot img,html[data-theme="neon"] .card-preview img,html[data-theme="neon"] .project img{filter:saturate(1.08) contrast(1.1) brightness(1.04)}
html[data-theme="emerald"] .hero-photo img,html[data-theme="emerald"] .banner-media img,html[data-theme="emerald"] .story-media img,html[data-theme="emerald"] .mini-shot img,html[data-theme="emerald"] .card-preview img,html[data-theme="emerald"] .project img{filter:saturate(.9) contrast(1.06) hue-rotate(-8deg)}
html[data-theme="copper"] .hero-photo img,html[data-theme="copper"] .banner-media img,html[data-theme="copper"] .story-media img,html[data-theme="copper"] .mini-shot img,html[data-theme="copper"] .card-preview img,html[data-theme="copper"] .project img{filter:sepia(.2) saturate(.92) contrast(1.06)}
html[data-theme="violet"] .hero-photo img,html[data-theme="violet"] .banner-media img,html[data-theme="violet"] .story-media img,html[data-theme="violet"] .mini-shot img,html[data-theme="violet"] .card-preview img,html[data-theme="violet"] .project img{filter:saturate(.95) contrast(1.07) hue-rotate(10deg)}
html[data-theme="ruby"] .hero-photo img,html[data-theme="ruby"] .banner-media img,html[data-theme="ruby"] .story-media img,html[data-theme="ruby"] .mini-shot img,html[data-theme="ruby"] .card-preview img,html[data-theme="ruby"] .project img{filter:saturate(1.0) contrast(1.07) hue-rotate(-6deg)}
html[data-theme="gold"] .hero-photo img,html[data-theme="gold"] .banner-media img,html[data-theme="gold"] .story-media img,html[data-theme="gold"] .mini-shot img,html[data-theme="gold"] .card-preview img,html[data-theme="gold"] .project img{filter:sepia(.14) saturate(1.02) contrast(1.05)}
html[data-theme="rose"] .hero-photo img,html[data-theme="rose"] .banner-media img,html[data-theme="rose"] .story-media img,html[data-theme="rose"] .mini-shot img,html[data-theme="rose"] .card-preview img,html[data-theme="rose"] .project img{filter:saturate(1.03) contrast(1.05) hue-rotate(-4deg)}
html[data-theme="sunset"] .hero-photo img,html[data-theme="sunset"] .banner-media img,html[data-theme="sunset"] .story-media img,html[data-theme="sunset"] .mini-shot img,html[data-theme="sunset"] .card-preview img,html[data-theme="sunset"] .project img{filter:sepia(.12) saturate(1.05) contrast(1.07)}
html[data-theme="teal"] .hero-photo img,html[data-theme="teal"] .banner-media img,html[data-theme="teal"] .story-media img,html[data-theme="teal"] .mini-shot img,html[data-theme="teal"] .card-preview img,html[data-theme="teal"] .project img{filter:saturate(.92) contrast(1.06) hue-rotate(4deg)}

/* ---------------------------------------------------------------
   TRANSITION — animação suave ao trocar tema
   --------------------------------------------------------------- */
html.wsv-theming,
html.wsv-theming * {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease,
    box-shadow .35s ease, fill .35s ease, stroke .35s ease, outline-color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.wsv-theming,
  html.wsv-theming * { transition: none !important; }
}

/* ============================================================
   SELECTOR — "PERSONALIZE A EXPERIÊNCIA"
   (injected by wsv-theme.js)
   ============================================================ */

/* --- Botão de paleta no TOPBAR (fixo, pulsando) --- */
.ts-topbtn {
  position: relative; width: 42px; height: 42px; flex: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--silver-glow, rgba(255,255,255,.16));
  background: var(--glass, rgba(255,255,255,.05));
  color: var(--cyan);
  overflow: visible;
  animation: ts-pulse 2.4s ease-in-out infinite;
}
.ts-topbtn svg { width: 22px; height: 22px; transition: transform .3s ease; }
.ts-topbtn:hover svg { transform: rotate(18deg) scale(1.08); }
.ts-topbtn::after {
  content: ""; position: absolute; inset: -5px; border-radius: 14px; pointer-events: none;
  background: radial-gradient(circle, var(--silver-glow, rgba(255,255,255,.15)), transparent 70%);
  z-index: -1; animation: ts-halo 2.4s ease-in-out infinite;
}
.ts-topbtn:focus-visible { outline: 2px solid var(--silver-glow, #8A6BFF); outline-offset: 3px; }

@keyframes ts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--silver-glow, rgba(255,255,255,0)); transform: scale(1); }
  50%      { box-shadow: 0 0 0 7px transparent; transform: scale(1.06); }
}
@keyframes ts-halo {
  0%, 100% { opacity: .35; transform: scale(.92); }
  50%      { opacity: .9; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-topbtn, .ts-topbtn::after { animation: none; }
}
@media (max-width: 1000px) { .ts-topbtn { width: 40px; height: 40px; } }
@media (max-width: 720px)  { .ts-topbtn { width: 40px; height: 40px; } }

/* --- Backdrop invisível (fecha ao tocar fora no mobile) --- */
.ts-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 478;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.ts-backdrop.open { display: block; }

/* --- Painel do seletor --- */
.ts-panel {
  position: fixed; top: 72px; right: 20px; z-index: 479;
  width: 322px; max-width: calc(100vw - 24px);
  box-sizing: border-box;
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px; border-radius: 18px;
  background: var(--surface, #0b0b0c);
  border: 1px solid var(--line-strong, rgba(255,255,255,.16));
  box-shadow: 0 30px 80px var(--shadow, rgba(0,0,0,.5));
  color: var(--text, #f3f4f6);
  font-family: var(--body, 'DM Sans', system-ui, sans-serif);
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98);
  transform-origin: top right;
  transition: opacity .26s ease, transform .26s cubic-bezier(.16,.84,.24,1), visibility .26s;
}
.ts-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ts-panel[role="dialog"]:focus { outline: none; }

.ts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ts-title { font-family: var(--display, 'Space Grotesk', system-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .02em; line-height: 1.25; }
.ts-title small { display: block; font-family: var(--body, sans-serif); font-weight: 500; font-size: 11.5px; color: var(--muted, #92959b); margin-top: 4px; line-height: 1.5; }
.ts-close { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.1)); background: transparent; color: var(--text-2, #A1A6B0); font-size: 18px; line-height: 1; cursor: pointer; }
.ts-close:hover { border-color: var(--cyan); color: var(--cyan); }
.ts-close:focus-visible { outline: 2px solid var(--silver-glow); outline-offset: 2px; }

.ts-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-opt { position: relative; padding: 12px 10px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; background: var(--surface-2, #121216); text-align: left; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ts-opt:hover { border-color: var(--silver-glow); transform: translateY(-1px); }
.ts-opt:focus-visible { outline: 2px solid var(--silver-glow); outline-offset: 2px; }
.ts-opt.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 8px 24px var(--silver-glow); }
.ts-swatch { display: flex; gap: 6px; margin-bottom: 8px; }
.ts-swatch i { width: 18px; height: 18px; border-radius: 6px; flex: 1; }
.ts-name { font-size: 12px; font-weight: 600; color: var(--text); }
.ts-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ts-opt.active .ts-check { opacity: 1; }

/* Preview colors for each theme option */
.ts-opt[data-theme-preview="original"] .ts-swatch i:nth-child(1) { background: #00bfff; }
.ts-opt[data-theme-preview="original"] .ts-swatch i:nth-child(2) { background: #a855f7; }
.ts-opt[data-theme-preview="carbon"]  .ts-swatch i:nth-child(1) { background: #d7d9dd; }
.ts-opt[data-theme-preview="carbon"]  .ts-swatch i:nth-child(2) { background: #686b70; }
.ts-opt[data-theme-preview="carbon"]  .ts-swatch i:nth-child(2) { background: #686b70; }
.ts-opt[data-theme-preview="ocean"]   .ts-swatch i:nth-child(1) { background: #4FB0E8; }
.ts-opt[data-theme-preview="ocean"]   .ts-swatch i:nth-child(2) { background: #2E86C1; }
.ts-opt[data-theme-preview="neon"]    .ts-swatch i:nth-child(1) { background: #54C8FF; }
.ts-opt[data-theme-preview="neon"]    .ts-swatch i:nth-child(2) { background: #00BFFF; }
.ts-opt[data-theme-preview="emerald"] .ts-swatch i:nth-child(1) { background: #38C07E; }
.ts-opt[data-theme-preview="emerald"] .ts-swatch i:nth-child(2) { background: #2E8B57; }
.ts-opt[data-theme-preview="copper"]  .ts-swatch i:nth-child(1) { background: #D99A5B; }
.ts-opt[data-theme-preview="copper"]  .ts-swatch i:nth-child(2) { background: #C47D3A; }
.ts-opt[data-theme-preview="violet"]  .ts-swatch i:nth-child(1) { background: #8A6BFF; }
.ts-opt[data-theme-preview="violet"]  .ts-swatch i:nth-child(2) { background: #6C4DFF; }
.ts-opt[data-theme-preview="ruby"]    .ts-swatch i:nth-child(1) { background: #F2555A; }
.ts-opt[data-theme-preview="ruby"]    .ts-swatch i:nth-child(2) { background: #B91C1C; }
.ts-opt[data-theme-preview="gold"]    .ts-swatch i:nth-child(1) { background: #E7B416; }
.ts-opt[data-theme-preview="gold"]    .ts-swatch i:nth-child(2) { background: #B8860B; }
.ts-opt[data-theme-preview="rose"]    .ts-swatch i:nth-child(1) { background: #F472B6; }
.ts-opt[data-theme-preview="rose"]    .ts-swatch i:nth-child(2) { background: #DB2777; }
.ts-opt[data-theme-preview="sunset"]  .ts-swatch i:nth-child(1) { background: #FF7A45; }
.ts-opt[data-theme-preview="sunset"]  .ts-swatch i:nth-child(2) { background: #E8590C; }
.ts-opt[data-theme-preview="teal"]    .ts-swatch i:nth-child(1) { background: #2DD4BF; }
.ts-opt[data-theme-preview="teal"]    .ts-swatch i:nth-child(2) { background: #0D9488; }

.ts-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255,255,255,.1)); display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted, #92959b); }
.ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #3ECF8E); box-shadow: 0 0 6px var(--green, #3ECF8E); animation: blink 1.8s ease-in-out infinite; }
.ts-shuffle { margin-left: auto; border: 1px solid var(--line, rgba(255,255,255,.14)); background: transparent; color: var(--muted, #92959b); border-radius: 9px; padding: 5px 10px; font-size: 11px; cursor: pointer; transition: .2s; }
.ts-shuffle:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
@keyframes blink { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Responsividade do seletor */
.ts-close { width: 44px; height: 44px; }
.ts-opt, .ts-shuffle { touch-action: manipulation; min-height: 44px; }
.ts-foot { flex-wrap: wrap; }

@media (max-width: 560px) {
  .ts-panel {
    top: 68px; right: 10px;
    width: min(320px, calc(100vw - 20px));
    padding: 14px 12px;
    /* Em landscape de tela baixa, reduz altura máxima */
    max-height: min(calc(100dvh - 80px), 520px);
  }
  .ts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .ts-opt { padding: 9px 5px; border-radius: 11px; }
  .ts-swatch i { width: 14px; height: 14px; border-radius: 5px; }
  .ts-name { font-size: 11px; }
  .ts-head { margin-bottom: 10px; }
  .ts-foot { margin-top: 12px; padding-top: 10px; font-size: 10px; }
}

/* Landscape mobile com altura reduzida */
@media (max-height: 500px) and (max-width: 900px) {
  .ts-panel {
    top: 8px; right: 10px;
    max-height: calc(100dvh - 16px);
    width: min(380px, calc(100vw - 20px));
  }
  .ts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ts-opt { min-height: 40px; padding: 7px 4px; }
  .ts-swatch { margin-bottom: 5px; }
}

/* Telas muito pequenas (320px) — 2 colunas se ficar apertado */
@media (max-width: 319px) {
  .ts-list { grid-template-columns: repeat(2, 1fr); }
}