/* ============================================================
   Maple Liquid · camada de tema para as páginas legadas
   ------------------------------------------------------------
   Carregada no fim do <head> de cada template (shared/, admin/,
   login, raiz). Remapeia o vocabulário de variáveis antigo
   (--ink-*, --purple, --cyan, --display, --mute…) para a marca
   Maple e aplica vidro líquido, aurora e heróis com fotografia.
   theme.js marca <html data-maple> e faz as partes dinâmicas.
   ============================================================ */

@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url('/maple/assets/fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url('/maple/assets/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url('/maple/assets/fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700; src: url('/maple/assets/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 800; src: url('/maple/assets/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('/maple/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('/maple/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 700; src: url('/maple/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ─────────────  Vocabulário antigo → Maple  ───────────── */
html[data-maple]:root {
  color-scheme: dark;
  --black: #03080a;
  --ink-1: rgb(255 255 255 / 3.5%);
  --ink-2: rgb(255 255 255 / 5.5%);
  --ink-3: rgb(255 255 255 / 8%);
  --ink-4: rgb(255 255 255 / 12%);
  --line: rgb(255 255 255 / 11%);
  --line-soft: rgb(255 255 255 / 7%);
  --line-faint: rgb(255 255 255 / 4%);
  --purple: #8cc3d4;
  --purple-soft: #dce8ec;
  --purple-deep: #2e7489;
  --cyan: #dce8ec;
  --cyan-deep: #8cc3d4;
  --cyan-soft: #bfe0ea;
  --accent: #8cc3d4;
  --white: #f2f8fa;
  --white-dim: rgb(222 236 241 / 82%);
  --mute: rgb(222 236 241 / 58%);
  --mute-2: rgb(222 236 241 / 40%);
  --green: #6be3ac; --green-soft: #9debc6;
  --amber: #dce8ec; --orange: #8cc3d4; --red: #ff8f98; --red-deep: #d9606b;
  --pink: #4f9bb0; --blue: #a7c9ff;
  --display: "Manrope", system-ui, sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --grain: none;
  --mp-glass: linear-gradient(145deg, rgb(255 255 255 / 8.5%), rgb(255 255 255 / 2.5%));
  --mp-glass-solid: rgb(12 23 28 / 82%);
  --mp-edge: rgb(255 255 255 / 13%);
  --mp-hi: rgb(255 255 255 / 26%);
  --mp-grad: linear-gradient(135deg, #dce8ec 0%, #8cc3d4 42%, #2e7489 100%);
  --mp-grad-text: linear-gradient(100deg, #ffffff 10%, #dce8ec 45%, #7fb6c7 100%);
  /* ds.css (onboarding, dashboard) */
  --ds-bg: #03080a;
}

html[data-maple] { background: #03080a; scrollbar-color: rgb(140 195 212 / 35%) transparent; }
html[data-maple] body {
  background: transparent !important;
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-maple] body::before { background-image: none !important; }
html[data-maple] ::selection { background: #dce8ec; color: #000; }
html[data-maple] :focus-visible { outline: 2px solid #dce8ec; outline-offset: 3px; }
html[data-maple] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-maple] ::-webkit-scrollbar-thumb { background: rgb(140 195 212 / 28%); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
html[data-maple] ::-webkit-scrollbar-track { background: transparent; }

/* Títulos: Manrope com tracking apertado, como na central nova */
html[data-maple] h1, html[data-maple] h2, html[data-maple] .display {
  font-family: "Manrope", system-ui, sans-serif; font-weight: 500 !important; letter-spacing: -.045em;
}
html[data-maple] h3, html[data-maple] h4 { font-family: "Manrope", system-ui, sans-serif; letter-spacing: -.02em; }
html[data-maple] .gradient, html[data-maple] .grad, html[data-maple] .gradient-text {
  background: var(--mp-grad-text) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}

/* ─────────────  Aurora  ───────────── */
.mp-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mp-backdrop i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.mp-backdrop .a1 { width: 60vw; height: 60vw; left: -15vw; top: -25vw; background: radial-gradient(circle, #143542, transparent 65%); opacity: .6; animation: mpDrift1 26s ease-in-out infinite alternate; }
.mp-backdrop .a2 { width: 55vw; height: 55vw; right: -18vw; top: 12vh; background: radial-gradient(circle, #0f2a34, transparent 65%); opacity: .5; animation: mpDrift2 32s ease-in-out infinite alternate; }
.mp-backdrop .a3 { width: 50vw; height: 50vw; left: 25vw; bottom: -30vw; background: radial-gradient(circle, #143542, transparent 65%); opacity: .35; animation: mpDrift3 38s ease-in-out infinite alternate; }
.mp-backdrop .a4 { width: 36vw; height: 36vw; left: 45vw; top: -10vw; background: radial-gradient(circle, #dce8ec, transparent 65%); opacity: .07; animation: mpDrift2 44s ease-in-out infinite alternate-reverse; }
.mp-backdrop .grid { position: absolute; inset: 0; opacity: .5; filter: none; border-radius: 0;
  background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 60% 0%, #000, transparent 70%); }
@keyframes mpDrift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes mpDrift2 { to { transform: translate(-16vw, 20vh) scale(.9); } }
@keyframes mpDrift3 { to { transform: translate(-10vw, -18vh) scale(1.2); } }

/* ─────────────  Barra superior em pílula de vidro  ───────────── */
html[data-maple] nav.top, html[data-maple] .topbar {
  top: 12px !important; margin: 12px 12px 0 !important;
  border: 1px solid var(--mp-edge) !important; border-radius: 999px !important;
  background: var(--mp-glass) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%) !important; backdrop-filter: blur(26px) saturate(165%) !important;
  box-shadow: inset 0 1px 0 var(--mp-hi), 0 20px 50px rgb(0 0 0 / 35%) !important;
}
html[data-maple] nav.top[data-mp-fixed], html[data-maple] .topbar[data-mp-fixed] { left: 12px !important; right: 12px !important; width: auto !important; margin: 0 !important; }
html[data-maple] .mp-logo { height: 17px !important; width: auto !important; display: block; margin-right: 14px; }
html[data-maple] a.logo:has(.mp-logo) { display: inline-flex; align-items: center; }

/* Palco com vídeo: login, raiz e 404 */
.mp-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mp-stage video, .mp-stage img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: mpKen 30s ease-in-out infinite alternate; }
.mp-stage::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgb(3 10 13 / 45%), rgb(3 10 13 / 88%)), linear-gradient(0deg, rgb(3 10 13 / 70%), transparent 50%); }

/* ─────────────  Hero com fotografia  ───────────── */
html[data-maple] .mp-hero {
  position: relative !important; isolation: isolate; overflow: hidden !important;
  margin: 20px 12px 12px !important; border-radius: 32px !important;
  border: 1px solid rgb(255 255 255 / 16%) !important;
  box-shadow: 0 30px 80px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 22%);
  background: transparent !important;
}
html[data-maple] .mp-hero > .mp-hero-media {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); animation: mpKen 24s ease-in-out infinite alternate; pointer-events: none;
}
html[data-maple] .mp-hero > .mp-hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(3 10 13 / 88%) 0%, rgb(3 10 13 / 62%) 45%, rgb(3 10 13 / 22%) 85%), linear-gradient(0deg, rgb(3 10 13 / 60%), transparent 60%);
}
@keyframes mpKen { to { transform: scale(1.12) translate(-1.5%, -1%); } }
html[data-maple] .mp-hero::before, html[data-maple] .mp-hero::after { opacity: .35; }

/* ─────────────  Vidro líquido (aplicado por theme.js)  ───────────── */
html[data-maple] .mp-glass {
  background:
    radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgb(220 232 236 / 11%), transparent 45%),
    var(--mp-glass) !important;
  border-color: var(--mp-edge) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--mp-hi), 0 18px 50px rgb(0 0 0 / 28%);
}
html[data-maple] .mp-glass.mp-solid {
  background:
    radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgb(220 232 236 / 9%), transparent 45%),
    var(--mp-glass-solid) !important;
}
html[data-maple] .mp-glass.mp-lift { transition: transform .25s cubic-bezier(.2,0,0,1), box-shadow .25s; }
html[data-maple] .mp-glass.mp-lift:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--mp-hi), 0 26px 60px rgb(0 0 0 / 38%), 0 0 30px rgb(140 195 212 / 10%); }

/* Diálogos e modais existentes */
html[data-maple] dialog, html[data-maple] [role="dialog"]:not(.mp-skip) {
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
}

/* Campos */
html[data-maple] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-maple] select, html[data-maple] textarea {
  font-family: "Manrope", system-ui, sans-serif;
}
html[data-maple] input[type="range"], html[data-maple] input[type="checkbox"], html[data-maple] input[type="radio"] { accent-color: #8cc3d4; }

/* Rodapé */
html[data-maple] footer { border-top-color: rgb(255 255 255 / 7%) !important; background: transparent !important; }

@media (max-width: 767px) {
  html[data-maple] .mp-hero { margin: 12px 8px 8px !important; border-radius: 24px !important; }
  html[data-maple] .mp-hero > .mp-hero-shade { background: linear-gradient(0deg, rgb(3 10 13 / 92%) 25%, rgb(3 10 13 / 55%) 75%, rgb(3 10 13 / 30%)); }
  html[data-maple] nav.top, html[data-maple] .topbar { margin: 8px 8px 0 !important; top: 8px !important; }
  .mp-backdrop i { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-backdrop i, html[data-maple] .mp-hero > .mp-hero-media { animation: none !important; }
  html[data-maple] .mp-glass.mp-lift:hover { transform: none; }
}
@media print {
  .mp-backdrop { display: none; }
  html[data-maple] .mp-glass { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================
   Estrutura unificada (páginas do cliente)
   ============================================================ */
html.mp-shell body { padding-left: 300px !important; }
html.mp-shell nav.top, html.mp-shell footer.m9, html.mp-shell body > footer, html.mp-shell .back-link { display: none !important; }
.mps-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mps-side {
  position: fixed; left: 16px; top: 16px; bottom: 16px; width: 268px; z-index: 70;
  display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: var(--mp-glass); border: 1px solid var(--mp-edge);
  -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  box-shadow: inset 0 1px 0 var(--mp-hi), 0 24px 64px rgb(0 0 0 / 45%);
  font-family: "Manrope", system-ui, sans-serif; color: #f2f8fa;
}
.mps-side a { text-decoration: none; color: inherit; }
.mps-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 22px 20px; }
.mps-brand { display: inline-flex; flex-direction: column; gap: 9px; }
.mps-brand img { height: 18px; width: auto; display: block; }
.mps-brand span { font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgb(222 236 241 / 48%); }
.mps-client { display: flex; align-items: center; gap: 12px; margin: 0 14px 12px; padding: 12px; border-radius: 18px; background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 10%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%); }
.mps-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--mp-grad); color: #031014; font-size: 13px; font-weight: 700; box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), 0 6px 18px rgb(46 116 137 / 35%); }
.mps-av.round { border-radius: 50%; }
.mps-who { min-width: 0; display: grid; }
.mps-who strong { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mps-who span { font-size: 12px; line-height: 16px; color: rgb(222 236 241 / 48%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mps-nav { flex: 1; overflow-y: auto; padding: 4px 14px 16px; scrollbar-width: none; }
.mps-nav ul { list-style: none; margin: 0; padding: 0; }
.mps-group + .mps-group { margin-top: 14px; }
.mps-label { display: block; padding: 8px 14px 6px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(222 236 241 / 48%); }
.mps-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 14px; border-radius: 999px; font-size: 14px; line-height: 20px; color: rgb(222 236 241 / 72%); transition: background-color .16s, color .16s; }
.mps-item .mps-ico { color: rgb(222 236 241 / 48%); }
.mps-item:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.mps-item.is-active { color: #fff; font-weight: 600; background: linear-gradient(120deg, rgb(140 195 212 / 26%), rgb(255 255 255 / 6%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 0 0 1px rgb(255 255 255 / 16%), 0 8px 24px rgb(46 116 137 / 22%); }
.mps-item.is-active .mps-ico { color: #fff; }
.mps-sub { margin: 4px 0 6px 22px !important; padding-left: 12px !important; border-left: 1px solid rgb(255 255 255 / 12%); }
.mps-sub a { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border-radius: 10px; font-size: 13px; line-height: 18px; color: rgb(222 236 241 / 62%); }
.mps-sub a .mps-ico { width: 14px; height: 14px; opacity: .6; }
.mps-sub a:hover { color: #fff; background: rgb(255 255 255 / 6%); }
.mps-sub a[aria-current="page"] { color: #fff; font-weight: 600; background: rgb(140 195 212 / 14%); }
.mps-sub a[aria-current="page"] .mps-ico { opacity: 1; color: #8cc3d4; }
.mps-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid rgb(255 255 255 / 9%); }
.mps-foot strong { font-size: 13px; line-height: 18px; }
.mps-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgb(222 236 241 / 72%); cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s; }
.mps-icon:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.mps-close, .mps-menu, .mps-mobile-brand { display: none !important; }

.mps-top {
  position: sticky; top: 16px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; margin: 16px 16px 0 0; padding: 0 10px 0 22px; border-radius: 999px;
  background: var(--mp-glass); border: 1px solid var(--mp-edge);
  -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  box-shadow: inset 0 1px 0 var(--mp-hi), 0 20px 50px rgb(0 0 0 / 35%);
  font-family: "Manrope", system-ui, sans-serif; color: #f2f8fa;
}
.mps-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.mps-crumbs a { color: rgb(222 236 241 / 50%); text-decoration: none; }
.mps-crumbs a:hover { color: #fff; }
.mps-crumbs span { color: rgb(222 236 241 / 35%); }
.mps-crumbs strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.mps-actions { display: flex; align-items: center; gap: 6px; }
.mps-talk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: #fff; color: #000; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgb(140 195 212 / 28%); transition: background-color .15s; }
.mps-talk:hover { background: #dce8ec; }
.mps-talk .mps-ico { width: 18px; height: 18px; }
html.mp-shell .mp-hero { margin: 20px 16px 12px 0 !important; }
.mps-bottom, .mps-scrim { display: none; }
.mps-slim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 48px 16px 24px 0; padding: 18px 8px 0; border-top: 1px solid rgb(255 255 255 / 7%); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; color: rgb(222 236 241 / 42%); }
.mps-slim a { color: rgb(222 236 241 / 60%); text-decoration: none; }
.mps-slim a:hover { color: #fff; }

@media (max-width: 1023px) {
  html.mp-shell body { padding-left: 0 !important; }
  .mps-side { transform: translateX(calc(-100% - 24px)); transition: transform .34s cubic-bezier(.2,0,0,1); background: var(--mp-glass-solid); left: 10px; top: 10px; bottom: 10px; }
  html.mps-open .mps-side { transform: none; }
  html.mps-open .mps-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgb(0 0 0 / 55%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .mps-close, .mps-menu, .mps-mobile-brand { display: inline-flex !important; }
  .mps-top { margin: 10px 10px 0; top: 10px; padding: 0 6px; }
  .mps-mobile-brand img { height: 14px; width: auto; }
  .mps-crumbs { display: none; }
  html.mp-shell .mp-hero { margin: 16px 10px 10px !important; }
  .mps-slim { margin: 40px 10px 110px; }
}
@media (max-width: 767px) {
  .mps-talk span { display: none; }
  .mps-talk { padding: 8px 12px; }
  .mps-bottom { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 26px; background: var(--mp-glass-solid); border: 1px solid var(--mp-edge); -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%); box-shadow: inset 0 1px 0 var(--mp-hi), 0 20px 50px rgb(0 0 0 / 45%); font-family: "Manrope", system-ui, sans-serif; }
  .mps-bottom a, .mps-bottom button { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; background: none; font-size: 10.5px; line-height: 14px; font-weight: 600; color: rgb(222 236 241 / 50%); text-decoration: none; cursor: pointer; border-radius: 20px; }
  .mps-bottom [aria-current="page"] { color: #fff; background: linear-gradient(150deg, rgb(140 195 212 / 26%), rgb(255 255 255 / 5%)); }
  html.mp-shell body { padding-bottom: 90px !important; }
}

/* ============================================================
   Cabeçalho padrão (hero) igual ao da central nova
   ============================================================ */
html[data-maple] .mp-hero h1 {
  font-size: clamp(38px, 4.8vw, 68px) !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -.05em !important; color: #fff;
}
html[data-maple] .mp-hero h1 .gradient, html[data-maple] .mp-hero h1 em, html[data-maple] .mp-hero h1 span {
  background: linear-gradient(100deg, #ffffff, #dce8ec 40%, #8cc3d4) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-style: normal;
}
html[data-maple] .mp-hero .eyebrow {
  display: inline-flex !important; align-items: center; gap: 10px; width: fit-content; padding: 6px 14px 6px 10px !important; border-radius: 999px;
  background: rgb(3 10 13 / 32%); border: 1px solid rgb(255 255 255 / 22%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: "IBM Plex Mono", monospace !important; font-size: 11px !important; line-height: 16px !important; letter-spacing: .12em !important; text-transform: uppercase; color: #eaf4f7 !important;
}
html[data-maple] .mp-hero .lead, html[data-maple] .mp-hero .sub, html[data-maple] .mp-hero p { color: rgb(234 244 247 / 84%); }

/* ============================================================
   Tipografia legível (theme.js marca rótulos miúdos e números)
   ============================================================ */
html[data-maple] .mp-t-label { font-size: 11px !important; letter-spacing: .1em !important; }
html[data-maple] .mp-t-num { font-family: "Manrope", system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -.035em !important; font-variant-numeric: tabular-nums; }

/* ============================================================
   Vidro em um nível: cartões internos viram blocos planos
   ============================================================ */
html[data-maple] .mp-flat {
  background: rgb(255 255 255 / 3.5%) !important; border-color: rgb(255 255 255 / 8%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}

/* ============================================================
   Entrada, carregamento e estados vazios
   ============================================================ */
html[data-maple] .mp-rv { opacity: 0; transform: translateY(14px); }
html[data-maple] .mp-rv.mp-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,0,0,1), transform .6s cubic-bezier(.2,0,0,1); }
html[data-maple] .mp-loading {
  color: transparent !important; min-height: 18px; min-width: 120px; border-radius: 12px;
  background: linear-gradient(100deg, rgb(255 255 255 / 5%) 30%, rgb(255 255 255 / 12%) 50%, rgb(255 255 255 / 5%) 70%) !important; background-size: 300% 100% !important;
  animation: mpShimmer 1.4s linear infinite;
}
@keyframes mpShimmer { to { background-position: -150% 0; } }
html[data-maple] .empty-state, html[data-maple] .empty {
  position: relative; overflow: hidden; border-radius: 24px !important;
  background: radial-gradient(420px circle at 50% 0%, rgb(140 195 212 / 12%), transparent 60%), rgb(255 255 255 / 3%) !important;
  border: 1px dashed rgb(255 255 255 / 16%) !important;
}
html[data-maple] .empty-state .ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; background: var(--mp-grad); color: #031014 !important; font-size: 20px; box-shadow: 0 10px 26px rgb(46 116 137 / 30%); }

/* Tabelas: cabeçalho fixo e linhas com destaque */
html[data-maple] table thead th { position: sticky; top: 0; z-index: 1; background: rgb(10 20 24 / 92%) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-maple] table tbody tr { transition: background-color .15s; }
html[data-maple] table tbody tr:hover { background: rgb(255 255 255 / 4%) !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-maple] .mp-rv { opacity: 1; transform: none; }
  html[data-maple] .mp-loading { animation: none; }
}

/* Seletores com pílula deslizante (editorial, materiais, instagram…) */
html[data-maple] .view-toggle .pill { background: #fff !important; box-shadow: 0 6px 20px rgb(140 195 212 / 30%) !important; }
html[data-maple] .view-toggle button.active { color: #031014 !important; }

/* Onboarding dentro da estrutura: sem barra duplicada, só progresso e etapas */
html.mp-shell .topbar {
  position: sticky !important; top: 84px !important; z-index: 40 !important;
  margin: 8px 16px 0 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.mp-shell .topbar .brand { display: none !important; }
html.mp-shell .topbar .wrap { display: flex; justify-content: flex-end; }
html.mp-shell .topbar .topbar-prog {
  padding: 8px 14px; border-radius: 999px; background: var(--mp-glass-solid); border: 1px solid var(--mp-edge);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
html.mp-shell .secnav { background: transparent !important; border: 0 !important; margin-right: 16px; }
html.mp-shell .secnav a { border-radius: 999px; }
@media (max-width: 1023px) { html.mp-shell .topbar { top: 76px !important; margin: 8px 10px 0 !important; } html.mp-shell .secnav { margin-right: 0; } }