/* rodai print — sistema de design (Rodaí).
   Fonte única dos tokens na web. O app WPF espelha estes valores em
   src/RodaiPrint.App/Theme.xaml: ao mudar aqui, mude lá também.
   Base neutra, roxo = marca, âmbar = atenção, esmeralda = concluído, coral = erro. */
:root {
  color-scheme: dark;

  /* ---- Cinzas (a base silenciosa) ---- */
  --ink-950: #0d0e12;
  --ink-900: #131519;
  --ink-850: #181a1f;
  --ink-800: #1e2027;
  --ink-700: #292c34;
  --ink-600: #3b3f49;
  --ink-500: #565b67;
  --ink-400: #767b88;
  --ink-300: #9a9fac;
  --ink-200: #c3c7d0;
  --ink-100: #e5e7ec;
  --ink-050: #f5f6f8;

  /* ---- Roxo (marca) ---- */
  --purple-900: #241a52;
  --purple-800: #33257a;
  --purple-700: #4a37ab;
  --purple-600: #5a43c9;
  --purple-500: #6e56e3;
  --purple-400: #8b77ee;
  --purple-300: #b0a3f5;
  --purple-200: #d3cbfa;

  /* ---- Acentos ---- */
  --amber-600: #d99420;
  --amber-500: #f0a92e;
  --amber-400: #f7b93e;
  --amber-300: #fbd076;
  --coral-600: #e14d5f;
  --coral-500: #f4576b;
  --coral-400: #ff6b7d;
  --coral-300: #ff97a4;
  --emerald-600: #159f6e;
  --emerald-500: #1fbd85;
  --emerald-400: #34d99b;
  --emerald-300: #79ebc0;

  /* ---- Aliases semânticos ---- */
  --bg: var(--ink-950);
  --bg-elevated: var(--ink-900);
  --surface-1: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-700);

  --text-1: var(--ink-050);
  --text-2: var(--ink-200);
  --text-3: var(--ink-400);
  --text-on-purple: #fff;
  --text-on-accent: var(--ink-950);
  --text-link: var(--purple-300);
  --text-link-hover: var(--amber-400);

  --brand: var(--purple-500);
  --brand-hover: var(--purple-400);
  --brand-active: var(--purple-600);
  --accent: var(--amber-400);
  --accent-hover: var(--amber-300);

  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --border-brand: rgba(110, 86, 227, .55);
  --border-amber: rgba(247, 185, 62, .55);
  --border-coral: rgba(255, 107, 125, .55);
  --border-emerald: rgba(52, 217, 155, .55);

  --tint-purple: rgba(110, 86, 227, .15);
  --tint-purple-strong: rgba(110, 86, 227, .26);
  --tint-amber: rgba(247, 185, 62, .14);
  --tint-coral: rgba(255, 107, 125, .14);
  --tint-emerald: rgba(52, 217, 155, .14);
  --tint-neutral: rgba(255, 255, 255, .05);

  /* Pipeline do spot: na fila (fair play) → enviado → entregue */
  --status-queued: var(--purple-400);
  --status-queued-bg: rgba(110, 86, 227, .16);
  --status-queued-bd: rgba(110, 86, 227, .45);
  --status-analyzing: var(--amber-400);
  --status-analyzing-bg: rgba(247, 185, 62, .16);
  --status-analyzing-bd: rgba(247, 185, 62, .42);
  --status-delivered: var(--emerald-400);
  --status-delivered-bg: rgba(52, 217, 155, .16);
  --status-delivered-bd: rgba(52, 217, 155, .42);
  --danger: var(--coral-500);
  --danger-bg: rgba(244, 87, 107, .16);

  /* ---- Tipografia ---- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 6vw, 2.5rem);
  --text-4xl: clamp(2.5rem, 8vw, 3.25rem);
  --lh-tight: 1.04;
  --lh-normal: 1.5;
  --ls-tight: -.015em;
  --ls-wider: .12em;

  /* ---- Espaço, raio, sombra, movimento ---- */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, .45);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, .55);
  --glow-purple: 0 0 0 1px rgba(110, 86, 227, .35), 0 12px 40px rgba(110, 86, 227, .30);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Textura usada como espaço reservado das miniaturas */
  --hatch: repeating-linear-gradient(135deg, var(--ink-800), var(--ink-800) 7px, var(--ink-850) 7px, var(--ink-850) 14px);
}

/* ---------- Base ---------- */
* { box-sizing: border-box }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur) var(--ease-out) }
a:hover { color: var(--text-link-hover) }
::selection { background: var(--tint-amber); color: var(--text-1) }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 99px }
:focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px }
.mono { font-family: var(--font-mono) }
.muted { color: var(--text-3) }

/* ---------- Estrutura ---------- */
header.top {
  display: flex; align-items: center; gap: 24px;
  height: 68px; padding: 0 var(--gutter, 32px);
  border-bottom: 1px solid var(--ink-850); background: var(--ink-950);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; color: var(--text-1); white-space: nowrap;
}
.brand b { color: var(--purple-400); font-weight: 800 }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
.avatar {
  width: 28px; height: 28px; border-radius: 99px; background: var(--tint-purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--purple-300); flex-shrink: 0;
}
main { max-width: 1120px; margin: 0 auto; padding: 40px 32px 48px }
footer.bottom {
  border-top: 1px solid var(--ink-850); padding: 22px 32px; margin-top: 48px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
footer.bottom span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-600) }
footer.bottom nav { display: flex; gap: 18px; font-size: 11px }

.eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--purple-300); margin-bottom: 10px;
}
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap }
.page-head h1 { font-size: var(--text-4xl) }

/* ---------- Controles ---------- */
button, .btn {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: var(--ls-tight); line-height: 1;
  padding: .5rem .85rem; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--text-on-purple); border: 1px solid transparent;
  box-shadow: var(--glow-purple); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
button:hover:not(:disabled), .btn:hover { background: var(--brand-hover) }
button:active:not(:disabled) { transform: translateY(1px) scale(.985) }
button:disabled { opacity: .45; cursor: not-allowed }
button.secondary { background: var(--surface-2); color: var(--text-1); border-color: var(--border-strong); box-shadow: none }
button.secondary:hover:not(:disabled) { background: var(--surface-3) }
button.ghost { background: transparent; color: var(--text-2); box-shadow: none }
button.ghost:hover:not(:disabled) { background: var(--tint-purple); color: var(--text-1) }
button.danger { background: transparent; color: var(--coral-400); border-color: var(--border-coral); box-shadow: none }
button.danger:hover:not(:disabled) { background: var(--tint-coral) }

input, select, textarea {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-1);
  background: var(--ink-900); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .5rem .7rem;
}
input::placeholder { color: var(--ink-500) }
input[type=search] { flex: 1 1 240px; min-width: 0 }

/* Pílulas de filtro */
.pill {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid transparent;
  background: var(--ink-900); color: var(--ink-400); box-shadow: none; cursor: pointer;
}
.pill:hover:not(:disabled) { background: var(--ink-850); color: var(--text-2) }
.pill[aria-pressed=true] { background: var(--tint-purple); color: var(--purple-300); border-color: var(--border-brand) }
.pill[aria-pressed=true]:hover { background: var(--tint-purple-strong) }
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 26px }

/* Selo / pílula de estado */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem;
  border-radius: var(--radius-full); line-height: 1;
  background: var(--tint-neutral); color: var(--text-2); border: 1px solid var(--border-strong);
}
.badge.queued { background: var(--status-queued-bg); color: var(--status-queued); border-color: var(--status-queued-bd) }
.badge.sent, .badge.delivered { background: var(--status-delivered-bg); color: var(--status-delivered); border-color: var(--status-delivered-bd) }
.badge.warn, .badge.no_channel { background: var(--status-analyzing-bg); color: var(--status-analyzing); border-color: var(--status-analyzing-bd) }
.badge.failed { background: var(--danger-bg); color: var(--danger); border-color: rgba(244, 87, 107, .42) }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0 }

/* ---------- Grade de spots ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px }
.card {
  text-align: left; padding: 0; background: var(--ink-900); border: 1px solid transparent;
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer; box-shadow: none;
  display: block; width: 100%; transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover { background: var(--ink-900); border-color: var(--border-brand); transform: translateY(-2px) }
.card .thumb { height: 118px; background: var(--hatch); display: block; width: 100%; object-fit: cover }
.card .body { padding: 14px }
.card .title { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--text-1); margin-bottom: 3px }
.card .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500) }
.card .tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap }
.tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--purple-300); background: none; border: 0; padding: 0; box-shadow: none; cursor: pointer }
.tag:hover { background: none; color: var(--amber-400) }
.star { color: var(--amber-400) }

/* ---------- Detalhe ---------- */
.detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr } main { padding: 24px 16px 40px } header.top { padding: 0 16px; gap: 14px } }
.shot { width: 100%; border-radius: var(--radius-md); background: var(--hatch); display: block; margin-bottom: 12px }
.tabs { display: flex; gap: 8px; flex-wrap: wrap }
.tabs button {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 6px 12px;
  border-radius: var(--radius-sm); background: var(--ink-900); color: var(--ink-400); box-shadow: none; border: 1px solid transparent;
}
.tabs button[aria-selected=true] { background: var(--tint-purple); color: var(--purple-300); border-color: var(--border-brand) }
.panel { background: var(--ink-900); border-radius: var(--radius-md); padding: 18px; margin-bottom: 18px }
.panel .note { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; white-space: pre-wrap }
.meta { font-size: var(--text-sm); display: grid; grid-template-columns: 1fr auto; row-gap: 11px; column-gap: 16px; color: var(--ink-400); margin-bottom: 24px }
.meta b { color: var(--text-2); font-weight: 500; font-family: var(--font-mono); text-align: right }
.actions { display: flex; gap: 8px; flex-wrap: wrap }

/* ---------- Avisos e estados ---------- */
.fairplay {
  background: var(--ink-900); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--ink-400);
}
.fairplay .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--purple-400); flex-shrink: 0; animation: rp-pulse 2.4s ease-in-out infinite }
@keyframes rp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.empty { text-align: center; color: var(--ink-500); padding: 72px 20px }
.empty h2 { font-size: var(--text-xl); color: var(--text-2); margin-bottom: 8px }
.empty .mono { font-size: var(--text-sm); margin-top: 6px; display: block }
.login { max-width: 420px; margin: 8vh auto; text-align: center }
.login .brand { font-size: 28px; display: block; margin-bottom: 14px }
.login p { color: var(--ink-400); font-size: var(--text-sm); margin-bottom: 26px }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink-900); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 12px 18px; box-shadow: var(--shadow-pop); font-size: var(--text-sm); color: var(--text-1);
  max-width: min(560px, 90vw); z-index: 50; white-space: pre-line;
}
.toast.err { border-color: var(--border-coral) }