/* ---- OrbitHub Radar: app mobile (referência Luma Trader, paleta OrbitHub) ---- */
:root {
  --bg: #0a0a0b;
  --bg-elev: #131316;
  --card: #141416;
  --card-soft: #1a1a1e;
  --border: #ffffff1c;
  --border-strong: #ffffff2e;
  --text: #fafafa;
  --text-soft: #c6c9d2;
  --text-muted: #9698a3;
  --text-faint: #767a85;
  --signal: #5b8cff;
  --signal-bright: #93b4ff;
  --brand: #0048ff;
  --brand-soft: #2f6bff;
  --brand-deep: #0032b8;
  --on-brand: #eaf1ff;
  --danger: #ff5b6a;
  --danger-soft: #ff8b96;
  --success: #22c983;
  --success-soft: #7ce7b6;
  --radius-card: 16px;
  --radius-ctl: 12px;
  --font-display: 'Switzer', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --easing: cubic-bezier(.16, 1, .3, 1);
  --easing-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* grain global */
.grain {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shell do app: coluna mobile ---- */
.app {
  position: relative;
  z-index: 10;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.25rem 6.2rem;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 40% at 50% -10%, rgba(0, 72, 255, .16), transparent 70%);
}

/* ---- header ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.brand-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(var(--brand-soft), var(--brand));
  box-shadow: inset 0 1px #ffffff3d, 0 0 20px #0048ff59;
  color: var(--on-brand);
}
.brand-ico svg { width: 20px; height: 20px; }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color .3s var(--easing);
}
.icon-btn:hover { border-color: #5b8cff55; }
.icon-btn svg { width: 18px; height: 18px; }

/* ---- título de página ---- */
.page-title {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.page-sub {
  color: var(--text-muted);
  font-size: .92rem;
  margin-top: .35rem;
  margin-bottom: 1.4rem;
}

/* header de tela interna (admin) */
.screen-head {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.screen-head .brand-ico { flex: none; }

/* ---- formulário ---- */
.field { margin-bottom: 1.05rem; }
.field-label {
  display: block;
  font-size: .88rem;
  color: var(--text-soft);
  margin-bottom: .5rem;
  font-weight: 700;
}
.control {
  position: relative;
  display: flex;
  align-items: center;
}
.control-ico {
  position: absolute;
  left: .95rem;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  pointer-events: none;
}
.control-ico svg { width: 17px; height: 17px; }
.control-ico.is-emoji { font-size: 1rem; }
.control-ico .coin {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
}
.control-ico .coin.sym { color: var(--signal-bright); background: #5b8cff1f; }
.control-ico .coin img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }

.input, .select {
  width: 100%;
  padding: .95rem 1rem .95rem 2.7rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  outline: none;
  appearance: none;
  transition: border-color .3s var(--easing), box-shadow .3s var(--easing);
}
.input.no-ico, .select.no-ico { padding-left: 1rem; }
.input:focus, .select:focus {
  border-color: #5b8cff66;
  box-shadow: 0 0 0 3px #5b8cff26;
}
.input::placeholder { color: var(--text-faint); font-weight: 400; }

.select { cursor: pointer; }
.control .chev {
  position: absolute;
  right: .95rem;
  color: var(--text-muted);
  pointer-events: none;
}
.control .chev svg { width: 16px; height: 16px; }

input[type="time"].input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.6); }

/* ---- direção ---- */
.dir-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.dir-btn {
  padding: 1.1rem .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: all .3s var(--easing);
}
.dir-btn svg { width: 20px; height: 20px; }
.dir-btn.is-buy svg { color: var(--success); }
.dir-btn.is-sell svg { color: var(--danger); }
.dir-btn.is-buy.is-active {
  color: var(--success-soft);
  border-color: #22c98377;
  background: linear-gradient(#22c9831f, #22c9830a), var(--card);
  box-shadow: 0 0 22px #22c98333, inset 0 1px #ffffff14;
}
.dir-btn.is-sell.is-active {
  color: var(--danger-soft);
  border-color: #ff5b6a66;
  background: linear-gradient(#ff5b6a1a, #ff5b6a08), var(--card);
  box-shadow: 0 0 22px #ff5b6a33, inset 0 1px #ffffff14;
}

/* ---- CTA primário ---- */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: 1.05rem 1.4rem;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  color: var(--on-brand);
  background: linear-gradient(var(--brand-soft), var(--brand));
  border: 1px solid #2f6bff;
  border-radius: var(--radius-ctl);
  box-shadow: inset 0 1px #ffffff3d, 0 0 28px #0048ff4d;
  cursor: pointer;
  transition: filter .3s var(--easing), transform .3s var(--easing);
}
.btn-primary svg { width: 18px; height: 18px; }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn-primary:active { transform: none; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .95rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: all .3s var(--easing);
}
.btn-ghost:hover { border-color: #5b8cff55; color: var(--text); }
.btn-ghost.danger { color: var(--danger-soft); border-color: #ff5b6a40; }
.btn-ghost.danger:hover { border-color: #ff5b6a88; }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

/* ---- card de sinal ---- */
.signal-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: .85rem;
  transition: border-color .4s var(--easing), background .4s var(--easing);
}
.signal-card.is-new {
  border-color: #5b8cff77;
  background: linear-gradient(#5b8cff14, #5b8cff05), var(--card);
  box-shadow: 0 0 26px #0048ff33;
}
@keyframes card-in {
  0% { opacity: 0; transform: translateY(-10px) scale(.98); }
  100% { opacity: 1; transform: none; }
}
.signal-card.flash { animation: card-in .5s var(--easing); }

.signal-card.is-cancelled { opacity: .55; }
.signal-card.is-cancelled .pair-name { text-decoration: line-through; color: var(--text-muted); }

.signal-main { flex: 1; min-width: 0; }
.pair-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
}
.pair-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* ícones do ativo: dois círculos sobrepostos */
.pair-ico {
  display: flex;
  flex: none;
}
.pair-ico .coin {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--card-soft);
  border: 2px solid var(--bg-elev);
  overflow: hidden;
  line-height: 1;
}
.pair-ico .coin + .coin { margin-left: -10px; }
.pair-ico .coin img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.pair-ico .coin.sym {
  font-weight: 700;
  font-size: 13px;
  color: var(--signal-bright);
  background: #5b8cff1f;
}

.badge-novo {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--on-brand);
  background: linear-gradient(var(--brand-soft), var(--brand));
  border-radius: 999px;
  padding: .28rem .7rem;
  box-shadow: 0 0 14px #0048ff59;
}
.badge-cancel {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--danger-soft);
  background: #ff5b6a14;
  border: 1px solid #ff5b6a40;
  border-radius: 999px;
  padding: .26rem .7rem;
}

.metas {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.meta {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  min-width: 0;
}
.meta + .meta {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}
.meta svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; margin-top: .12rem; }
.meta-value {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meta-label {
  display: block;
  font-size: .62rem;
  color: var(--text-faint);
  margin-top: .1rem;
  white-space: nowrap;
}

/* bloco de direção à direita */
.dir-block {
  flex: none;
  width: 86px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.dir-block svg { width: 20px; height: 20px; }
.dir-block.is-compra { color: var(--success-soft); background: #22c98314; }
.dir-block.is-venda { color: var(--danger-soft); background: #ff5b6a10; }

/* ---- estado vazio ---- */
.empty {
  text-align: center;
  padding: 3.5rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}
.empty-scan {
  width: 58px;
  height: 58px;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  border: 1px solid #5b8cff33;
  position: relative;
  display: grid;
  place-items: center;
}
.empty-scan::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid transparent;
  border-top-color: var(--signal);
  animation: spin 2.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty p { color: var(--text-muted); font-size: .9rem; margin-top: .3rem; }
.empty .mono-tag { color: var(--signal); }

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal);
  box-shadow: 0 0 8px #5b8cff99;
  animation: pulse 1.6s var(--easing) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}

/* ---- bottom nav ---- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: space-around;
  padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: #0d0d0fe6;
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  z-index: 50;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: .2rem .8rem;
  transition: color .3s var(--easing);
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item.is-active { color: var(--signal-bright); }
.nav-item.is-active svg { filter: drop-shadow(0 0 8px #5b8cff88); }
.nav-item:hover { color: var(--text-soft); }
.nav-item.is-active:hover { color: var(--signal-bright); }

/* ---- telas (tabs) ---- */
.screen { display: none; }
.screen.is-active { display: block; }

/* ---- lista de afiliados (admin) ---- */
.aff-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: .7rem;
}
.aff-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: var(--signal-bright);
  background: #5b8cff1f;
  border: 1px solid #5b8cff33;
  flex: none;
}
.aff-info { flex: 1; min-width: 0; }
.aff-name { font-weight: 700; font-size: .95rem; }
.aff-state {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .15rem;
}
.aff-state .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #383b44;
}
.aff-state.is-online .dot {
  background: var(--signal);
  box-shadow: 0 0 8px #5b8cff99;
}
.aff-state span { font-size: .68rem; color: var(--text-faint); }
.aff-state.is-online span { color: var(--signal); }

/* histórico do admin: destino */
.sig-target {
  font-size: .64rem;
  color: var(--text-faint);
  margin-top: .3rem;
}
.sig-target b { color: var(--text-muted); font-weight: 700; }

/* ---- login ---- */
.login-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  z-index: 10;
}
.login-card { width: 100%; max-width: 400px; }
.login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.8rem;
}
.login-hero .brand-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 1rem;
}
.login-hero .brand-ico svg { width: 26px; height: 26px; }

/* ---- feedback ---- */
.form-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
  min-height: 1rem;
}
.form-note .ok { color: var(--signal); }
.form-note .err { color: var(--danger-soft); }

.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 1.6rem 0 .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.risk-note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: .74rem;
  color: var(--text-faint);
}

/* ---- modal de sinal novo ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: #050506cc;
  backdrop-filter: blur(10px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 1.8rem 1.5rem 1.5rem;
  background: linear-gradient(#ffffff0a, #ffffff03), var(--bg-elev);
  border: 1px solid #5b8cff55;
  border-radius: 20px;
  box-shadow: 0 0 60px #0048ff40, inset 0 1px #ffffff1a;
  text-align: center;
  animation: modal-pop .45s var(--easing-spring);
}
@keyframes modal-pop {
  0% { opacity: 0; transform: translateY(18px) scale(.92); }
  100% { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ffffff08;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .3s var(--easing), border-color .3s var(--easing);
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.modal-close svg { width: 15px; height: 15px; }

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--on-brand);
  background: linear-gradient(var(--brand-soft), var(--brand));
  border-radius: 999px;
  padding: .35rem .85rem;
  box-shadow: 0 0 16px #0048ff59;
  margin-bottom: 1.2rem;
}
.modal-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 1.3rem;
}
.modal-pair .pair-name { font-size: 1.55rem; }
.modal-pair .coin { width: 36px; height: 36px; font-size: 17px; }

.modal-metas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: .7rem;
}
.modal-meta {
  padding: .85rem .6rem;
  background: #ffffff05;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.modal-meta .meta-value { font-size: 1.05rem; }
.modal-meta .meta-label { margin-top: .25rem; }

.modal-dir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem;
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 1.1rem;
}
.modal-dir svg { width: 22px; height: 22px; }
.modal-dir.is-compra {
  color: var(--success-soft);
  background: #22c9831a;
  border: 1px solid #22c98355;
  box-shadow: 0 0 26px #22c98326;
}
.modal-dir.is-venda {
  color: var(--danger-soft);
  background: #ff5b6a14;
  border: 1px solid #ff5b6a4d;
  box-shadow: 0 0 26px #ff5b6a26;
}

.modal-count {
  font-size: .82rem;
  color: var(--text-muted);
}
.modal-count b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  color: var(--signal-bright);
}

/* ---- página de instalação (PWA) ---- */
.serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.os-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding: .3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  margin-bottom: 1.1rem;
}
.os-tab {
  padding: .7rem;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all .3s var(--easing);
}
.os-tab.is-active {
  color: var(--on-brand);
  background: linear-gradient(var(--brand-soft), var(--brand));
  border-color: #2f6bff;
  box-shadow: 0 0 16px #0048ff40;
}
.steps { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.step {
  display: flex;
  gap: .95rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.step-n {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--signal-bright);
  background: #5b8cff14;
  border: 1px solid #5b8cff40;
  border-radius: 10px;
}
.step b { display: block; font-size: .95rem; margin-bottom: .25rem; }
.step p { font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.step p b { display: inline; font-size: inherit; color: var(--text-soft); margin: 0; }
.step-note {
  font-size: .78rem;
  color: var(--text-faint);
  line-height: 1.5;
  padding: .2rem .3rem;
}
.glyph {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  vertical-align: -6px;
  color: var(--signal-bright);
  background: #5b8cff14;
  border-radius: 6px;
}
.glyph svg { width: 14px; height: 14px; }
.mono-inline {
  font-family: var(--font-mono);
  font-size: .8em;
  color: var(--signal-bright);
}
.install-done {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem;
  margin-bottom: 1.2rem;
  background: #22c98312;
  border: 1px solid #22c98355;
  border-radius: var(--radius-card);
}
.install-done-ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--success-soft);
  background: #22c9831f;
  border-radius: 9px;
}
.install-done-ico svg { width: 16px; height: 16px; }
.install-done b { font-size: .92rem; }
.install-done p { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }

/* ---- card de notificações no app ---- */
.notif-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(#5b8cff14, #5b8cff05), var(--card);
  border: 1px solid #5b8cff55;
  border-radius: var(--radius-card);
  box-shadow: 0 0 22px #0048ff26;
}
.notif-card.is-warn {
  background: linear-gradient(#ff5b6a10, #ff5b6a04), var(--card);
  border-color: #ff5b6a40;
  box-shadow: none;
}
.notif-ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--signal-bright);
  background: #5b8cff1f;
  border-radius: 12px;
}
.notif-card.is-warn .notif-ico { color: var(--danger-soft); background: #ff5b6a14; }
.notif-ico svg { width: 19px; height: 19px; }
.notif-txt { flex: 1; min-width: 0; }
.notif-txt b { display: block; font-size: .92rem; }
.notif-txt p { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.45; }
.notif-txt a { color: var(--signal-bright); }
.btn-small {
  flex: none;
  padding: .6rem .9rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--on-brand);
  background: linear-gradient(var(--brand-soft), var(--brand));
  border: 1px solid #2f6bff;
  border-radius: 10px;
  box-shadow: inset 0 1px #ffffff3d, 0 0 16px #0048ff40;
  cursor: pointer;
  text-decoration: none;
}
.btn-small:disabled { opacity: .5; }

/* linha de configuração (Minha conta) */
.set-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: .7rem;
  color: var(--text);
  text-decoration: none;
}
.set-row .notif-ico { width: 36px; height: 36px; border-radius: 10px; }
.set-row .chev { flex: none; margin-left: auto; }
.set-row .chev svg { width: 16px; height: 16px; }
.set-state { font-size: .72rem; color: var(--text-faint); margin-top: .1rem; }
.set-state.on { color: var(--success-soft); }
.set-state.off { color: var(--danger-soft); }

@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .empty-scan::before, .pill-dot, .signal-card.flash { animation: none; }
}
@media (max-width: 420px) {
  .app { padding-left: 1rem; padding-right: 1rem; }
  .metas { gap: .7rem; }
  .meta + .meta { padding-left: .7rem; }
  .dir-block { width: 74px; }
}