:root {
  --orange: #e5a02c;
  --orange-dim: #a8751f;
  --green-dark: #2d5048;
  --green: #72c67c;
  --graphite: #222222;
  --graphite-2: #2b2b2b;
  --graphite-3: #343434;
  --line: #3d3d3d;
  --text: #ececec;
  --muted: #a3a3a3;
  --error: #e0625a;
  --radius: 10px;
  --font: "Chakra Petch", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--graphite); color: var(--text); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--orange); }
h1, h2, h3 { font-weight: 600; letter-spacing: .02em; line-height: 1.2; }
h1 { font-size: 1.6rem; margin: .2em 0 .8em; }
h2 { font-size: 1.15rem; margin: 0 0 .8em; color: var(--orange); }
h3 { font-size: 1rem; margin: 1.2em 0 .6em; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; background: var(--graphite-3); padding: .1em .35em; border-radius: 4px; word-break: break-all; }
code.big { font-size: 1.2em; letter-spacing: .06em; color: var(--orange); }
[hidden] { display: none !important; }

/* ---- layout geral ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: #1d1d1d; }
.topbar nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: var(--text); text-decoration: none; }
.topbar nav a:hover { color: var(--orange); }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: .04em; }
.page { max-width: 980px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.card { background: var(--graphite-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin: 0 0 1.2rem; }
.card.narrow, .narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.wrap { align-items: flex-end; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.inline { display: inline; margin: 0; }
.center { text-align: center; margin-top: .8rem; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .88rem; margin: 0; }
.steps { padding-left: 1.2rem; margin: 0 0 1rem; }
.steps li { margin: .4rem 0; }

/* ---- formulários ---- */
label { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; color: #d6d6d6; }
label.check { flex-direction: row; align-items: center; gap: .5rem; }
input, select, textarea { font: inherit; color: var(--text); background: #1b1b1b; border: 1px solid var(--line); border-radius: 8px; padding: .65rem .75rem; width: 100%; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--orange); }
input[type=range] { padding: 0; accent-color: var(--orange); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.btn { font: inherit; font-weight: 600; letter-spacing: .03em; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--graphite-3); color: var(--text); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--orange); }
.btn.primary { background: var(--orange); color: #1a1a1a; border-color: var(--orange); }
.btn.primary:hover { background: #f0b247; }
.btn.ghost { background: transparent; }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; }
.linkish:hover { color: var(--orange); }
.alert { padding: .65rem .85rem; border-radius: 8px; margin: 0 0 1rem; border: 1px solid; }
.alert.error { border-color: #7a3430; background: #3a2321; color: #ffc9c4; }
.alert.ok { border-color: var(--green-dark); background: #20302c; color: #c9f0cd; }
.alert.warn { border-color: var(--orange-dim); background: #352a17; color: #ffe2b0; }
.badge { display: inline-block; font-size: .78rem; padding: .05rem .5rem; border-radius: 99px; background: var(--graphite-3); color: var(--muted); border: 1px solid var(--line); }
.badge.ok { color: var(--green); border-color: var(--green-dark); }
.badge.err { color: #ffb4ad; border-color: #7a3430; }
.badge.warn { color: var(--orange); border-color: var(--orange-dim); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-weight: 500; }
.table tr.dim td { opacity: .55; }
.table td.ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.qr { background: #fff; border-radius: 8px; padding: .5rem; width: max-content; max-width: 100%; margin: 0 auto; }
.qr svg { display: block; max-width: 100%; height: auto; }
.secret { text-align: center; }

/* ---- telas de login ---- */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--graphite-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.4rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-bottom: 1.2rem; }
.auth-brand h1 { margin: .2rem 0 0; font-size: 1.5rem; letter-spacing: .08em; }
.auth-card h2 { color: var(--text); }
.lava { max-width: 420px; text-align: center; color: var(--muted); font-size: .9rem; margin-top: 1.4rem; line-height: 1.6; }
.lava::before { content: ""; display: block; width: 46px; height: 2px; margin: 0 auto .9rem; background: linear-gradient(90deg, var(--orange), var(--green)); }

/* ---- tela de voz ---- */
body.voice { overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #2a2a2a 0%, var(--graphite) 55%, #181818 100%); }
.stage { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: max(env(safe-area-inset-top), .6rem) 1rem max(env(safe-area-inset-bottom), .8rem); }
.corner { position: absolute; top: max(env(safe-area-inset-top), .8rem); display: flex; align-items: center; gap: .9rem; font-size: .9rem; z-index: 3; }
.corner.left { left: 1rem; gap: .5rem; font-weight: 600; letter-spacing: .06em; }
.corner.right { right: 1rem; }
.corner.right a { color: var(--muted); text-decoration: none; }
.corner.right a:hover { color: var(--orange); }
#banners { position: absolute; top: 3.2rem; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 2rem)); z-index: 4; display: flex; flex-direction: column; gap: .5rem; }
.banner { margin: 0; padding: .6rem .9rem; border-radius: 8px; font-size: .9rem; text-align: center; }
.banner.warn { background: #352a17; border: 1px solid var(--orange-dim); color: #ffe2b0; }
.banner.error { background: #3a2321; border: 1px solid #7a3430; color: #ffc9c4; }
.sphere-wrap { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
#sphere { width: min(70vmin, 520px); height: min(70vmin, 520px); max-height: 52dvh; max-width: 52dvh; touch-action: none; }
.state-label { margin: .2rem 0 0; color: var(--muted); letter-spacing: .25em; text-transform: uppercase; font-size: .78rem; }
.transcript { width: min(720px, 100%); min-height: 5.5rem; max-height: 24dvh; overflow-y: auto; text-align: center; padding: 0 .5rem; }
.user-text { color: var(--muted); font-size: .92rem; margin: .2rem 0; }
.user-text:not(:empty)::before { content: "você: "; color: var(--orange); opacity: .8; }
.assistant-text { color: var(--text); margin: .3rem 0; font-size: 1.02rem; }
.sources { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; padding: 0; margin: .3rem 0 0; }
.sources li { font-size: .75rem; color: var(--green); border: 1px solid var(--green-dark); border-radius: 99px; padding: .05rem .55rem; }
.controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: .8rem; flex-wrap: wrap; }
.pill { font: inherit; font-size: .85rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 99px; background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.pill:hover { color: var(--text); border-color: var(--orange); }
.pill .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.pill[aria-pressed="true"] { color: #1a1a1a; background: var(--green); border-color: var(--green); font-weight: 600; }
.pill[aria-pressed="true"] .dot { background: #1a1a1a; animation: blink 1.2s infinite; }
.ptt { position: relative; width: 112px; height: 112px; border-radius: 50%; border: 2px solid var(--orange); background: radial-gradient(circle at 50% 40%, #3a2f1c, #262219); color: var(--orange); font: 600 .78rem var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: transform .1s; }
.ptt:active, .ptt.active { transform: scale(.96); background: var(--orange); color: #1a1a1a; }
.ptt:disabled { opacity: .4; cursor: not-allowed; }
.ptt-label { position: relative; z-index: 1; display: block; padding: 0 .8rem; }
.ptt-ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.ptt.active .ptt-ring { animation: ring 1.1s ease-out infinite; }
.kbd-hint { color: #6f6f6f; font-size: .74rem; margin: .7rem 0 0; text-align: center; }
.latency { color: #6f6f6f; font-size: .72rem; margin: .25rem 0 0; min-height: 1em; font-variant-numeric: tabular-nums; text-align: center; }
body.auto-on .stage::after { content: "MODO AUTOMÁTICO LIGADO"; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--green); box-shadow: 0 0 18px var(--green); }

@keyframes ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@keyframes blink { 50% { opacity: .3; } }

@media (max-width: 640px) {
  .corner.left span { display: none; }
  .ptt { width: 132px; height: 132px; }
  .controls { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "ptt ptt" "auto clear"; gap: .8rem; justify-items: center; }
  .controls .ptt { grid-area: ptt; }
  #auto-btn { grid-area: auto; }
  #clear-btn { grid-area: clear; }
  .kbd-hint { display: none; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }