/* ═══════════════════════════════════════════════════════════════════
   MS-One — design system do ecossistema Mais Seguidores (docs/design_system.md)
   Tokens + componentes canônicos. Servido como /hub-static/msx.css nas
   plataformas que montam app/web/static (MS, mais_bio, creators, hub_portal)
   e como /static/msx.css no HUB Achadinhos.

   REGRAS: identidade por plataforma via --msx-accent/--msx-accent-2 (valores
   do registro hub_portal/plataformas.py); o resto é IGUAL em todo lugar.
   Token semântico, nunca cor literal. Dark automático via prefers-color-scheme.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* superfícies (iOS system — padrão-ouro do /app, ADR-013) */
  --msx-bg: #f2f2f7;
  --msx-elev: #ffffff;
  --msx-sep: rgba(60, 60, 67, .12);
  /* texto */
  --msx-txt: #1c1c1e;
  --msx-txt2: #3c3c4399;
  --msx-txt3: #3c3c434d;
  /* marca — cada plataforma sobrescreve com a cor do registro */
  --msx-accent: #7c3aed;
  --msx-accent-2: #ec4899;
  --msx-grad: linear-gradient(135deg, var(--msx-accent), var(--msx-accent-2));
  /* semânticas */
  --msx-ok: #10b981;
  --msx-warn: #f59e0b;
  --msx-danger: #dc2626;
  --msx-info: #3b82f6;
  /* geometria */
  --msx-r: 14px;
  --msx-r-lg: 20px;
  --msx-blur: saturate(180%) blur(20px);
  --msx-sh: 0 8px 24px rgba(0, 0, 0, .08);
  /* tipografia */
  --msx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* safe areas (notch/gestos) */
  --msx-safe-t: env(safe-area-inset-top);
  --msx-safe-b: env(safe-area-inset-bottom);
}
@media (prefers-color-scheme: dark) {
  :root {
    --msx-bg: #000000;
    --msx-elev: #1c1c1e;
    --msx-sep: rgba(84, 84, 88, .4);
    --msx-txt: #ffffff;
    --msx-txt2: #ebebf599;
    --msx-txt3: #ebebf54d;
    --msx-sh: 0 8px 24px rgba(0, 0, 0, .5);
  }
}

/* ── Componentes canônicos ─────────────────────────────────────────── */

/* Top bar glass sticky (☰ SEMPRE à esquerda · marca central · ação à direita) */
.msx-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--msx-safe-t)) 14px 10px;
  background: color-mix(in srgb, var(--msx-elev) 78%, transparent);
  -webkit-backdrop-filter: var(--msx-blur);
  backdrop-filter: var(--msx-blur);
  border-bottom: 1px solid var(--msx-sep);
}

/* Superfície elevada padrão */
.msx-card {
  background: var(--msx-elev);
  border: 1px solid var(--msx-sep);
  border-radius: var(--msx-r);
  box-shadow: var(--msx-sh);
  padding: 16px 18px;
}

/* Botões — semânticos, nunca cor no nome */
.msx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--msx-grad);
  color: #fff;
  font-family: var(--msx-font);
  font-weight: 800;
  font-size: 15px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--msx-r);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--msx-accent) 38%, transparent);
  transition: filter .12s, transform .12s;
}
.msx-btn:hover { filter: brightness(1.07); text-decoration: none; }
.msx-btn:active { transform: translateY(1px); }
.msx-btn--ghost {
  background: transparent;
  color: var(--msx-accent);
  border: 1.5px solid var(--msx-sep);
  box-shadow: none;
}
.msx-btn--danger { background: var(--msx-danger); box-shadow: none; }

/* Badge / contagem (pulsante na variante notif) */
.msx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: color-mix(in srgb, var(--msx-accent) 14%, transparent);
  color: var(--msx-accent);
}
.msx-badge--notif {
  background: var(--msx-danger);
  color: #fff;
  animation: msx-pulse 2s infinite;
}
@keyframes msx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Card de KPI/stat — REGRA: sempre clicável (leva ao detalhe/filtro) */
a.msx-kpi, .msx-kpi {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--msx-elev);
  border: 1px solid var(--msx-sep);
  border-radius: var(--msx-r);
  padding: 14px 16px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.msx-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--msx-sh);
  border-color: var(--msx-accent);
  text-decoration: none;
}
.msx-kpi .label { font-size: 12px; font-weight: 700; color: var(--msx-txt2); }
.msx-kpi .valor { font-size: 26px; font-weight: 900; color: var(--msx-txt); margin-top: 2px; }
.msx-kpi .sub { font-size: 11.5px; color: var(--msx-txt2); margin-top: 2px; }

/* Separador hairline */
.msx-sep { height: 1px; background: var(--msx-sep); border: 0; margin: 16px 0; }

/* ══ .msa-top — top bar glass mobile compartilhada (§4.3; extraída dos layouts
   na sobra da Onda 4). Aqui vive SÓ o comum às plataformas; cada layout mantém
   inline as regras específicas: breakpoint próprio (o HUB Achadinhos usa
   1024px e por isso repete a regra de exibição), qual topbar local esconder,
   qual body-class de menu-aberto esconde a barra e a variante ESCURA (por
   prefers-color-scheme ou pelo data-theme da plataforma). ══ */
.msa-top{display:none}
.msa-top-btn{width:40px;height:40px;flex:0 0 40px;border:none;cursor:pointer;padding:0;background:rgba(127,127,127,.14);color:inherit;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .15s}
.msa-top-btn:active{background:rgba(127,127,127,.30)}
.msa-top-btn svg{width:22px;height:22px}
.msa-top-brand{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:inherit;text-decoration:none;font-weight:800;font-size:16.5px;letter-spacing:-.3px}
.msa-top-brand .msa-em{font-size:19px;line-height:1}
.msa-top-brand .msa-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msa-top-spacer{flex:0 0 40px}
@media (max-width:880px){
  .msa-top{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:60;padding:calc(env(safe-area-inset-top) + 9px) 12px 9px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid rgba(60,60,67,.14);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif}
}