/* Estúdio — a entrada e a lista dos temas, com as cores e o tipo da skin
   «Estúdio Áudio» (a mesa tem a sua folha, mesa.css). Escuro de propósito:
   é uma ferramenta de estúdio, e é assim que a mesa é. */
:root{
  color-scheme:dark;
  --bg:#10171c; --panel:#121c22; --caixa:#18232b; --line:#2a343e;
  --text:#e7edf4; --muted:#8998a9; --green:#3ddb7d; --mau:#ff9b8f;
}
*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; color:var(--text);
  background:radial-gradient(ellipse at 30% 0%,#17222a 0%,var(--bg) 65%) fixed;
  font:14px/1.55 Inter,"Segoe UI",Arial,sans-serif; }
a{ color:inherit; }
h1{ font-size:clamp(22px,4vw,28px); margin:0; font-weight:600; letter-spacing:-.01em; }
.suave{ color:var(--muted); font-size:14px; }
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

.topo{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:68px; padding:0 clamp(16px,3vw,24px); border-bottom:1px solid var(--line); background:#10181dcc; }
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; font-size:19px; letter-spacing:-.4px; }
.marca svg{ width:28px; height:28px; color:var(--green); }
.marca small{ display:block; font-size:10px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:1px; }
.sair button{ background:none; border:0; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; padding:6px 0; }
.sair button:hover{ color:var(--green); }

.cx{ width:min(860px,100%); margin:0 auto; padding:clamp(24px,5vw,48px) 16px 80px; }
.cabeca{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:1.4em; }

button{ font:inherit; font-size:14px; padding:.6em 1.1em; border-radius:6px; cursor:pointer;
  background:#1d2730; color:var(--text); border:1px solid var(--line); }
button:hover{ background:#2b3741; }
button.primario, .porta button[type=submit]{ background:var(--green); color:#092015; border-color:#49df88; font-weight:650; }
button.primario:hover, .porta button[type=submit]:hover{ background:#66eba1; }
button.plano{ background:none; color:var(--muted); }
button.plano:hover{ color:var(--green); border-color:var(--green); }
button:disabled{ opacity:.5; cursor:wait; }
button:focus-visible, a:focus-visible, input:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.porta{ width:min(380px,100%); margin:8vh auto 0; background:linear-gradient(140deg,#15202888,#111a20);
  border:1px solid var(--line); border-radius:10px; padding:28px 24px; }
.porta form{ margin-top:1.4em; }
.porta form button + button{ margin-left:8px; }
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:.4em; }
input[type=email], input[type=text], input[type=number]{
  width:100%; font:inherit; padding:.7em .9em; border-radius:6px; margin-bottom:1em;
  background:#0e1921; color:var(--text); border:1px solid #394d5c; }
input:focus{ outline:2px solid var(--green); outline-offset:1px; }
#codigo{ font-size:24px; letter-spacing:.35em; text-align:center; }
.recado{ margin-top:1.2em; font-size:13px; color:var(--mau); }
.recado.bom{ color:var(--green); }

.temas{ list-style:none; padding:0; margin:0; }
.temas li + li{ margin-top:8px; }
.temas a{ display:flex; align-items:center; gap:14px; text-decoration:none;
  background:linear-gradient(140deg,#15202888,#111a20); border:1px solid var(--line);
  border-radius:8px; padding:14px 16px; transition:border-color .12s; }
.temas a:hover{ border-color:var(--green); }
.temas a > svg{ color:var(--green); }
.temas .nome{ flex:1; min-width:0; }
.temas .nome b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.temas small{ display:block; color:var(--muted); font-size:12px; margin-top:.15em; }
.temas .quando{ color:var(--muted); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.temas .novo{ display:block; background:var(--caixa); border:1px solid var(--green); border-radius:8px; padding:12px 14px; }
.temas .novo input{ margin:0; }
@media(max-width:600px){ .temas .quando{ display:none; } }