/* ============================================================
   KStudio · Tema GRAFITE — escuro e claro
   Arquivo separado de propósito: o visual antigo (styles.css) continua igual.
   Para voltar ao antigo é só escolher outro tema em Configurações › Aparência.
   Tudo aqui só vale com <html data-skin="grafite"> (temas "Grafite escuro" e "Grafite claro").
   ============================================================ */
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- cores ---------- */
:root[data-base="grafite-dark"] {
  color-scheme: dark;
  --bg0: #0b0c0e; --bg1: #141518; --bg2: #1a1b1f; --bg3: #222429; --bg4: #2b2d33;
  --line: #24262b; --line2: #30333a; --line3: #43464e;
  --text: #e9eaed; --text2: #a0a3ab; --text3: #6f727a;
  --stage: #0a0b0d;
  --metal-hi: rgba(255,255,255,.055); --metal-lo: rgba(0,0,0,.35);
  --head: linear-gradient(180deg, #1d1f23 0%, #17181b 100%);
  --bar: linear-gradient(180deg, #18191c 0%, #111214 100%);
  --btn: linear-gradient(180deg, #26282d 0%, #1e1f23 100%);
  --btn-h: linear-gradient(180deg, #2d3036 0%, #24262b 100%);
  --acc-g: linear-gradient(180deg, #5b98ff 0%, #3d7df0 100%); --glass: #1b1c20;
  --shadow: 0 12px 32px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --accent: #4c8dff; --accent-2: #4c8dff; --accent-ink: #8fb6ff;
  --rec: #ef4444; --live: #ef4444; --ok: #34c759; --warn: #f5a524;
}
:root[data-base="grafite-light"] {
  color-scheme: light;
  --bg0: #e4e6ea; --bg1: #f3f4f6; --bg2: #fbfbfc; --bg3: #e9ebee; --bg4: #dfe2e6;
  --line: #d6d9de; --line2: #c6cad1; --line3: #aeb3bc;
  --text: #16181c; --text2: #50555f; --text3: #848993;
  --stage: #dcdfe4;
  --metal-hi: rgba(255,255,255,.9); --metal-lo: rgba(0,0,0,.06);
  --head: linear-gradient(180deg, #fbfbfc 0%, #eceef1 100%);
  --bar: linear-gradient(180deg, #f6f7f8 0%, #e6e8ec 100%);
  --btn: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%);
  --btn-h: linear-gradient(180deg, #ffffff 0%, #e6e9ed 100%);
  --acc-g: linear-gradient(180deg, #1a7fd4 0%, #005fb3 100%); --glass: #ffffff;
  --shadow: 0 12px 32px rgba(20,24,32,.14), 0 1px 2px rgba(20,24,32,.08);
  --accent: #0067c0; --accent-2: #0067c0; --accent-ink: #0067c0;
  --rec: #d92d20; --live: #d92d20; --ok: #1f9d55; --warn: #c47f00;
}

/* ---------- base comum ---------- */
:root[data-skin="grafite"] {
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Geist", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", Consolas, monospace;
  --r-sm: 0; --r: 0; --r-lg: 0; --r-xl: 0; /* sem cantos arredondados: cara de janela / equipamento */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 50%, transparent);
}
:root[data-skin="grafite"] body { font-family: var(--font); font-feature-settings: "ss01" 0; }

/* sem brilhos, sombras coloridas e "pulinhos" */
:root[data-skin="grafite"] .logo-mark { filter: none; }
:root[data-skin="grafite"] .wordmark { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
:root[data-skin="grafite"] .wordmark b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); font-weight: 600; }
:root[data-skin="grafite"] .btn:hover, :root[data-skin="grafite"] .btn-rec:hover, :root[data-skin="grafite"] .btn-live:hover { transform: none; box-shadow: none; }
:root[data-skin="grafite"] .btn:active, :root[data-skin="grafite"] .btn-rec:active, :root[data-skin="grafite"] .btn-live:active { transform: none; }
:root[data-skin="grafite"] .btn.primary { box-shadow: none; }
:root[data-skin="grafite"] .btn.primary:hover { box-shadow: none; filter: brightness(1.08); }
:root[data-skin="grafite"] .btn.danger { box-shadow: none; }
:root[data-skin="grafite"] .seg button.on { box-shadow: 0 0 0 1px var(--line2); background: var(--bg3); }
:root[data-skin="grafite"] .seg button:active { transform: none; }
:root[data-skin="grafite"] input:focus, :root[data-skin="grafite"] select:focus, :root[data-skin="grafite"] textarea:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
:root[data-skin="grafite"] .switch .knob { box-shadow: none; transition: transform .16s ease; }
:root[data-skin="grafite"] .menu { backdrop-filter: none; background: var(--bg2); box-shadow: var(--shadow); animation: none; }
:root[data-skin="grafite"] .menu .mh { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
:root[data-skin="grafite"] .toast { backdrop-filter: none; background: var(--bg2); }
:root[data-skin="grafite"] .modal-bg { backdrop-filter: none; }

/* ---------- barra de título ---------- */
:root[data-skin="grafite"] #titlebar { background: var(--bg0); }
:root[data-skin="grafite"] #menubar button { font-size: 13px; color: var(--text2); }
:root[data-skin="grafite"] .tb-center #tbScene { color: var(--text); }
:root[data-skin="grafite"] .acct-chip, :root[data-skin="grafite"] .ver-chip { background: transparent; border: 1px solid var(--line2); color: var(--text2); font-weight: 500; }
:root[data-skin="grafite"] .acct-chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

/* ---------- painéis: quase colados, com um vão bem fino (3 px) entre um box e outro — em cima/embaixo e
   dos lados, inclusive quando um painel fica embaixo de outro no lado direito. Continuam magnéticos. ---------- */
:root[data-base="grafite-dark"] { --gap-bg: #050506; }
:root[data-base="grafite-light"] { --gap-bg: #b9bec7; }
:root[data-skin="grafite"] #ws { padding: 2px; background: var(--gap-bg); }
:root[data-skin="grafite"] .zone { border-radius: 0; }
:root[data-skin="grafite"] .zsplit { flex: 0 0 2px; background: transparent; }
:root[data-skin="grafite"] .zsplit.h { flex-basis: 2px; }
:root[data-skin="grafite"] .psplit { flex: 0 0 2px; background: transparent; }
/* a área de pegar para redimensionar é maior que o vão que aparece */
:root[data-skin="grafite"] .zsplit::before, :root[data-skin="grafite"] .psplit::before { content: ''; position: absolute; inset: -4px; }
:root[data-skin="grafite"] .zsplit.v::after, :root[data-skin="grafite"] .psplit.vert::after { left: 0; width: 2px; top: 0; bottom: 0; border-radius: 0; }
:root[data-skin="grafite"] .zsplit.h::after, :root[data-skin="grafite"] .psplit.horz::after { top: 0; height: 2px; left: 0; right: 0; border-radius: 0; }
:root[data-skin="grafite"] .panel { border: 0; border-radius: 0; background: var(--bg1); }
:root[data-skin="grafite"] #stage { border: 0; border-radius: 0; background: var(--stage); }
:root[data-skin="grafite"] .ph { height: 36px; flex-basis: 36px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); }
:root[data-skin="grafite"] .ph .i { display: none; }
:root[data-skin="grafite"] .ph-title { text-transform: none; letter-spacing: -.005em; font-size: 12.5px; font-weight: 600; color: var(--text); }
:root[data-skin="grafite"] .drop-ind { box-shadow: none; }
:root[data-skin="grafite"] .dock-ghost { box-shadow: var(--shadow); }
:root[data-skin="grafite"] #ws.dock-dragging .zone { box-shadow: none; }

/* ---------- listas (telas, fontes) ---------- */
:root[data-skin="grafite"] .list li { border: 0; color: var(--text2); }
:root[data-skin="grafite"] .list li:hover { transform: none; background: var(--bg3); color: var(--text); }
:root[data-skin="grafite"] .list li:active { transform: none; }
:root[data-skin="grafite"] .list li.sel { background: var(--bg3); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); border-radius: 0; }
:root[data-skin="grafite"] .list li .num { font-family: var(--font-mono); }
:root[data-skin="grafite"] .list li .onair { background: transparent; color: var(--live); padding: 0; letter-spacing: 0; font-size: 10.5px; display: inline-flex; align-items: center; gap: 5px; }
:root[data-skin="grafite"] .list li .onair::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
:root[data-skin="grafite"] .sec { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text2); }
/* botão "Layouts prontos": discreto, não um botão gigante azul */
:root[data-skin="grafite"] .layouts-btn { background: var(--accent) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; height: 32px; font-weight: 600; }
:root[data-skin="grafite"] .layouts-btn:hover { filter: brightness(1.08); }
:root[data-skin="grafite"] .layouts-btn .i, :root[data-skin="grafite"] .layouts-btn svg { color: #fff; }

/* ---------- prévias (horizontal e vertical lado a lado) ---------- */
:root[data-skin="grafite"] .stage-bar { background: var(--bg1); border-bottom: 1px solid var(--line); }
:root[data-skin="grafite"] .frame { border-radius: 0; box-shadow: 0 0 0 1px var(--line2); }
:root[data-skin="grafite"] .pv.editing .frame { box-shadow: 0 0 0 1.5px var(--accent); }
:root[data-skin="grafite"] .pv.live .frame::after { border-radius: 0; }
:root[data-skin="grafite"] .pv-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; font-weight: 500; text-transform: none; }
:root[data-skin="grafite"] .pv.editing .pv-label .dot { box-shadow: none; }

/* ---------- mixer ---------- */
:root[data-skin="grafite"] .strip { background: transparent; border: 1px solid var(--line); border-radius: var(--r-lg); }
:root[data-skin="grafite"] .strip.master { background: transparent; border-color: var(--line2); }
:root[data-skin="grafite"] .strip .s-db { font-family: var(--font-mono); font-weight: 400; }
:root[data-skin="grafite"] .meter, :root[data-skin="grafite"] .meter i { box-shadow: none; }
:root[data-skin="grafite"] .meter i { background: var(--bg3); }
:root[data-skin="grafite"] .fader input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
:root[data-skin="grafite"] .add-strip { border: 1px dashed var(--line2); }

/* ---------- rodapé ---------- */
:root[data-skin="grafite"] #statusbar { background: var(--bg1); }
:root[data-skin="grafite"] .stats { font-family: var(--font-mono); font-size: 11.5px; }
:root[data-skin="grafite"] .stat b { font-weight: 500; }
:root[data-skin="grafite"] .sb-group { border-left: 0; padding-left: 4px; }
:root[data-skin="grafite"] .chip-t span { border-radius: var(--r); font-family: var(--font-mono); font-weight: 500; }
:root[data-skin="grafite"] .chip-t input:checked + span { background: transparent; border-color: var(--line3); color: var(--text); }
:root[data-skin="grafite"] .btn-rec, :root[data-skin="grafite"] .btn-live { font-weight: 500; transition: background .15s, border-color .15s; }
:root[data-skin="grafite"] .rdot { box-shadow: none; }
:root[data-skin="grafite"] kbd { font-family: var(--font-mono); font-weight: 400; border: 0; padding: 0; opacity: .6; }
:root[data-skin="grafite"] .health-chip { font-weight: 500; }

/* ---------- janelas (modais) ---------- */
:root[data-skin="grafite"] .modal { box-shadow: var(--shadow); }
:root[data-skin="grafite"] .grp-title { letter-spacing: -.01em; }
:root[data-skin="grafite"] .fsec { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text); font-weight: 600; }

/* ---------- o que está selecionado fica pintado (contraste claro) ---------- */
:root[data-skin="grafite"] .seg button.on { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-skin="grafite"] .seg button.on .ar { opacity: 1; }
:root[data-skin="grafite"] .chip-t input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-skin="grafite"] .chip-t span { transition: background .15s, color .15s, border-color .15s; }
:root[data-skin="grafite"] #menubar button.open { background: var(--accent); color: #fff; }

/* ---------- microanimações (leves: só transform e cor, desenhadas pela placa de vídeo sem refazer a tela) ---------- */
/* chaves (Modo estúdio, Vertical, Espelhar tela): a bolinha desliza */
:root[data-skin="grafite"] .switch .track { transition: background .18s ease; }
:root[data-skin="grafite"] .switch .knob { transition: transform .2s cubic-bezier(.3,.7,.4,1.2); }
:root[data-skin="grafite"] .switch input:checked + .track .knob { transform: translateX(14px); }
:root[data-skin="grafite"] .switch.sm input:checked + .track .knob { transform: translateX(12px); }
/* botões: afundam um pouquinho ao apertar */
:root[data-skin="grafite"] .btn, :root[data-skin="grafite"] .btn-rec, :root[data-skin="grafite"] .btn-live, :root[data-skin="grafite"] .seg button, :root[data-skin="grafite"] .chip-t span, :root[data-skin="grafite"] .ib { transition: background .15s, border-color .15s, color .15s, transform .08s ease-out; }
:root[data-skin="grafite"] .btn:active, :root[data-skin="grafite"] .btn-rec:active, :root[data-skin="grafite"] .btn-live:active, :root[data-skin="grafite"] .seg button:active, :root[data-skin="grafite"] .chip-t:active span, :root[data-skin="grafite"] .ib:active { transform: translateY(1px) scale(.97); }
:root[data-skin="grafite"] .list li { transition: background .12s, color .12s; }
/* quem pede menos movimento no Windows continua sem animação (regra do styles.css) */

/* ============================================================
   Acabamento "metal" (premium) — só degradês e luzes paradas, desenhados uma vez (não pesam)
   ============================================================ */
/* barra de título e rodapé: chapa escovada */
:root[data-skin="grafite"] #titlebar { background: var(--bar); border-bottom: 1px solid var(--gap-bg); box-shadow: inset 0 -1px 0 var(--metal-hi); }
:root[data-skin="grafite"] #statusbar { background: var(--bar); border-top: 1px solid var(--gap-bg); box-shadow: inset 0 1px 0 var(--metal-hi); }
:root[data-skin="grafite"] .wordmark { letter-spacing: .01em; }
/* painéis: luz fina na borda de cima (efeito de chapa) e cabeçalho com degradê */
:root[data-skin="grafite"] .panel { box-shadow: inset 0 1px 0 var(--metal-hi); }
:root[data-skin="grafite"] .ph { background: var(--head); border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--metal-hi); }
:root[data-skin="grafite"] .ph-title { font-weight: 600; letter-spacing: .01em; }
:root[data-skin="grafite"] .stage-bar { background: var(--head); box-shadow: inset 0 1px 0 var(--metal-hi); }
/* botões: relevo discreto de metal */
:root[data-skin="grafite"] .btn, :root[data-skin="grafite"] .btn-rec, :root[data-skin="grafite"] .btn-live { background: var(--btn); border: 1px solid var(--line2); box-shadow: inset 0 1px 0 var(--metal-hi), 0 1px 0 var(--metal-lo); }
:root[data-skin="grafite"] .btn:hover, :root[data-skin="grafite"] .btn-rec:hover, :root[data-skin="grafite"] .btn-live:hover { background: var(--btn-h); border-color: var(--line3); box-shadow: inset 0 1px 0 var(--metal-hi), 0 1px 0 var(--metal-lo); }
:root[data-skin="grafite"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-skin="grafite"] .btn.primary, :root[data-skin="grafite"] .layouts-btn { background: var(--acc-g) !important; border: 1px solid color-mix(in srgb, var(--accent) 70%, #000) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important; }
:root[data-skin="grafite"] .btn-rec.on { background: linear-gradient(180deg, #f05252 0%, #d42f2f 100%); border-color: #b42323; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
:root[data-skin="grafite"] .btn-live.on { background: linear-gradient(180deg, #f05252 0%, #d42f2f 100%); border-color: #b42323; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
/* seletores (16:9 / 9:16, etc.): trilho afundado e o escolhido em azul com relevo */
:root[data-skin="grafite"] .seg { background: var(--bg0); border: 1px solid var(--line2); box-shadow: inset 0 1px 2px var(--metal-lo); }
:root[data-skin="grafite"] .seg button.on { background: var(--acc-g); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
:root[data-skin="grafite"] .chip-t span { background: var(--btn); box-shadow: inset 0 1px 0 var(--metal-hi); }
:root[data-skin="grafite"] .chip-t input:checked + span { background: var(--acc-g); border-color: color-mix(in srgb, var(--accent) 70%, #000); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
/* campos: afundados */
:root[data-skin="grafite"] input[type=text], :root[data-skin="grafite"] input[type=number], :root[data-skin="grafite"] input[type=password], :root[data-skin="grafite"] select, :root[data-skin="grafite"] textarea { box-shadow: inset 0 1px 2px var(--metal-lo); }
/* chaves: trilho afundado, bolinha com brilho de metal */
:root[data-skin="grafite"] .switch .track { box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
:root[data-skin="grafite"] .switch .knob { background: linear-gradient(180deg, #ffffff 0%, #dfe2e7 100%); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
:root[data-skin="grafite"] .switch input:checked + .track { background: var(--acc-g); }
/* lista: item escolhido com faixa azul e leve luz */
:root[data-skin="grafite"] .list li.sel { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
/* mixer: canais como módulos de mesa de som */
:root[data-skin="grafite"] .strip { background: var(--head); border-color: var(--line2); box-shadow: inset 0 1px 0 var(--metal-hi); }
:root[data-skin="grafite"] .meter { background-color: var(--gap-bg); }
/* janelas e menus: retos, com borda fina e luz no topo */
:root[data-skin="grafite"] .modal, :root[data-skin="grafite"] .menu, :root[data-skin="grafite"] .toast, :root[data-skin="grafite"] .gx { border-radius: 0; box-shadow: var(--shadow), inset 0 1px 0 var(--metal-hi); }
:root[data-skin="grafite"] .modal header, :root[data-skin="grafite"] .gx-hd { background: var(--head); }
:root[data-skin="grafite"] .mi { border-radius: 0; }
:root[data-skin="grafite"] .health-chip, :root[data-skin="grafite"] .acct-chip, :root[data-skin="grafite"] .ver-chip, :root[data-skin="grafite"] .update-chip, :root[data-skin="grafite"] .ib { border-radius: 0; }
:root[data-skin="grafite"] .wz-key kbd { border: 1px solid var(--line3); border-bottom-width: 3px; padding: 0 8px; opacity: 1; border-radius: 0; font-family: var(--font-mono); }

:root[data-skin="grafite"] .ph .ph-grip .i { display: inline-block; }