:root {
  /* superfícies, do fundo pro que flutua */
  --s0: #0A0A0D;
  --s1: #101014;
  --s2: #17171D;
  --s3: #1F1F27;
  --s4: #232330;
  --line: #24242E;
  --line2: #33333F;

  /* texto */
  --fg: #EDEDF2;
  --fg2: #9A97A6;
  --fg3: #8F8C9B;
  --fg4: #625F6D;

  /* marca — monocromática: branco quente como única cor de seleção/foco/ação */
  --ac: #F2F2F5;
  --ac2: #FFFFFF;
  --on-ac: #0A0A0D;
  --ac-soft: rgba(255, 255, 255, .13);
  --ac-line: rgba(255, 255, 255, .34);

  /* semânticos (só onde a informação exige, nunca decorativo) */
  --ok: #3DD68C;
  --info: #4EA8FF;
  --warn: #FFC53D;
  --danger: #FF6B8A;

  /* raio, mesma escala do início ao fim */
  --r1: 7px;
  --r2: 10px;
  --r3: 14px;
  --r4: 18px;
  --pill: 999px;

  /* elevação: três degraus, nunca sombra inventada na hora */
  --e1: 0 1px 2px rgba(0, 0, 0, .4);
  --e2: 0 8px 24px rgba(0, 0, 0, .45);
  --e3: 0 18px 48px rgba(0, 0, 0, .55);

  /* movimento: um ritmo só no app inteiro */
  --tf: 120ms;
  --t: 180ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* escala tipográfica: oito degraus, nada fora deles */
  --f1: 11px;
  --f2: 12px;
  --f3: 13px;
  --f4: 15px;
  --f5: 16px;
  --f6: 21px;
  --f7: 30px;
  --f8: 40px;

  /* aliases: nomes antigos usados nas views, mantidos pra não quebrar nada */
  --bg: var(--s0);
  --bg-elev: var(--s1);
  --surface: var(--s2);
  --surface-2: var(--s3);
  --border: var(--line);
  --border-strong: var(--line2);
  --text: var(--fg);
  --text-muted: var(--fg2);
  --text-dim: var(--fg4);
  --accent: var(--ac);
  --accent-dim: var(--fg2);
  --accent-glow: var(--ac-soft);
  --accent-ink: var(--on-ac);
  --danger-bg: rgba(255, 107, 138, .12);
  --radius: var(--r2);
  --radius-lg: var(--r3);
  --font-display: var(--font);
  --font-body: var(--font);
  --font-mono: var(--mono);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ac); }

html, body {
  margin: 0;
  padding: 0;
  background: var(--s0);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

a { color: inherit; }
button, input, select, textarea { font-family: inherit; }

:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: var(--r1); }
::selection { background: var(--ac-soft); color: var(--fg); }

* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }

/* grão sutil por cima de tudo: sem isso, uma paleta 100% cinza fica achatada
   feito captura de tela. mix-blend-mode:overlay é o mesmo truque usado no
   Koncord OS — ganha textura sem tirar contraste de lugar nenhum. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r2);
  border: 1px solid var(--line2);
  background: var(--s3);
  color: var(--fg);
  padding: 10px 18px;
  font-weight: 600;
  font-size: var(--f4);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease), transform var(--tf) var(--ease);
}
.btn:hover { border-color: var(--fg4); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary {
  background: var(--ac);
  color: var(--on-ac);
  border: 1px solid var(--ac);
}
.btn-primary:hover { background: var(--ac2); box-shadow: 0 0 0 4px var(--ac-soft); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--fg2);
}
.btn-danger:hover { color: var(--fg); border-color: var(--danger); }

.card {
  position: relative;
  overflow: hidden;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: 20px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--tf) var(--ease);
}
/* holofote do card: --mx/--my seguem o ponteiro (ver shell.js), um brilho
   suave por cima em vez de borda acesa — mesmo truque do Koncord OS. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06), transparent 70%);
  transition: opacity var(--t) var(--ease);
}
.card:hover::after { opacity: 1; }

.input {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  color: var(--fg);
  padding: 10px 12px;
  font-size: var(--f4);
  transition: border-color var(--t) var(--ease);
}
.input:focus { outline: none; border-color: var(--fg4); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--pill);
  font-size: var(--f2);
  font-weight: 600;
  border: 1px solid var(--line2);
  color: var(--fg2);
}
.pill-accent { border-color: var(--ac-line); color: var(--ac); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--f1);
  font-family: var(--mono);
  background: var(--s3);
  border: 1px solid var(--line);
  color: var(--fg2);
}

.progress { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ac); transition: width var(--t) var(--ease); }

.muted { color: var(--fg2); }
.dim { color: var(--fg4); }
.mono { font-family: var(--mono); }

.icon { display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.6; }