/* Tema Polar nas janelas do app (aprovado 01/10/2026): claro com branco puro e
   cartões em vidro claro. Roda igual à do tema padrão (pastas com a cor
   sólida); só o centro fica branco. Ondas do gravador pretas. */
html[data-skin="polar"], :root[data-skin="polar"][data-theme] {
  --white: #ffffff; --off: #fafafa; --paper: #ffffff;
  --ink: #0a0a0b; --muted: #6b6b70; --muted2: #8a8a90;
  --border: rgba(0, 0, 0, .07); --border2: rgba(0, 0, 0, .12);
  --accent: #ff5a2c; --accent2: #ff7a4d; --accent-soft: rgba(255, 90, 44, .1);
  --shadow-float: 0 14px 40px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .05);
}

/* cartões: central rápida, caixinha da IA, gravador */
html[data-skin="polar"] .card,
html[data-skin="polar"] .voice-pill {
  background: linear-gradient(160deg, #ffffff, #f5f5f7);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-float);
}
html[data-skin="polar"] .item[aria-selected="true"] { background: linear-gradient(90deg, rgba(255, 90, 44, .14), rgba(0, 0, 0, .02)); }

/* roda do Ctrl+C+C: igual ao padrão, centro branco */
html[data-skin="polar"] .capture-core {
  background: #ffffff; color: #0a0a0b;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18), inset 0 1px 0 #fff, 0 0 0 5px rgba(255, 255, 255, .5);
}
html[data-skin="polar"] .capture-core small { color: rgba(10, 10, 11, .55); }

/* gravador: ondas pretas */
html[data-skin="polar"] .voice-overlay.is-recording .voice-bars i { background: #0a0a0b; opacity: .85; }

/* janela principal do app (as janelinhas são transparentes) */
html[data-skin="polar"] body:has(main.main), html[data-skin="polar"] main.main { background: #ffffff; }
html[data-skin="polar"] .topbar { background: rgba(255, 255, 255, .9); border-bottom-color: rgba(0, 0, 0, .06); }
html[data-skin="polar"] .rail { background: linear-gradient(160deg, #fbfbfc, #f3f3f5); border-right-color: rgba(0, 0, 0, .06); }
html[data-skin="polar"] .rail button:hover { background: rgba(0, 0, 0, .04); }
html[data-skin="polar"] .rail button[aria-current="page"] { background: rgba(0, 0, 0, .05); box-shadow: none; color: var(--ink); }
html[data-skin="polar"] main .card { background: linear-gradient(160deg, #ffffff, #f5f5f7); border-color: rgba(0, 0, 0, .07); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .05); }
