/* Primoris Academy — tema único, escuro: preto e verde militar predominantes, dourado para destaque.
   Layout: menu lateral fixo + área de conteúdo em grade de cards; no celular, barra inferior. */
:root {
  /* Preto profundo como base, vermelho real como acento, branco para leitura. */
  --bg: #0A0A0B;
  --surface: #141416;
  --surface-2: #1C1C1F;
  --red: #D7192E;
  --red-deep: #7A0E1A;
  --accent: #E3283C;
  --text: #FFFFFF;
  --text-2: #A3A3AB;
  --border: #26262B;
  --ok: #3FB27F;
  --warn: #E0A93B;
  --bad: #FF7A7A;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 16px 0 8px; }
p { margin: 0 0 8px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
textarea.mono { width: 100%; }
.display { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.big { font-size: 28px; }
.accent-t { color: var(--accent); }
.ic { flex: none; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { border-color: #4a4f49; text-decoration: none; background: #313431; }
.btn.primary { background: var(--red); border-color: #E3283C; }
.btn.primary:hover { background: #B8132A; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 600; }
.btn.accent:hover { background: #F0384C; }
.btn.danger { color: #f0a5a3; border-color: #5a2d2c; background: transparent; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.xs { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn.block { width: 100%; justify-content: center; padding: 12px; }
.btn:disabled { opacity: .6; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--text); text-align: left; display: inline-flex; gap: 6px; align-items: center; }
.linkbtn:hover { color: var(--accent); }
.link { font-size: 12px; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #FFFFFF; font: 700 11px/18px var(--body); font-style: normal; text-align: center; }

/* Estrutura */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, var(--red-deep), #0e0d0e 70%); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; z-index: 30; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 6px; }
.side-brand .mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid var(--accent); border-radius: 10px; font-family: var(--display); color: var(--accent); font-size: 20px; }
.side-brand strong { display: block; letter-spacing: .22em; font-size: 13px; }
.side-brand small { display: block; letter-spacing: .42em; font-size: 10px; color: var(--accent); }
.side nav { display: grid; gap: 2px; }
.side nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: #d6d9d4; font-weight: 500; }
.side nav a:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.side nav a.on { background: var(--red); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.side nav a.on .ic { color: var(--accent); }
.side nav a .badge { position: static; margin-left: auto; }
.side-foot { margin-top: auto; padding: 0 8px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: rgba(17,17,17,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.hello h1 { font-family: var(--display); font-size: 22px; }
.hello p { margin: 0; font-size: 13px; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { display: grid; justify-items: end; gap: 2px; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--red); border: 1px solid var(--accent); color: var(--accent); font-weight: 600; flex: none; vertical-align: middle; }
#view { padding: 24px 28px 96px; display: grid; gap: 18px; max-width: 1440px; width: 100%; }
.bottom { display: none; }
.only-m { display: none; }

/* Cabeçalho de página e filtros */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ph h2 { font-size: 28px; }
.ph p { margin: 4px 0 0; }
.ph-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill-big { font-family: var(--display); font-size: 30px; color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
select, input, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
select:focus, input:focus, textarea:focus { border-color: var(--accent); outline: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; padding: 0; }
.search { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; min-width: 240px; }
.search input { border: 0; background: transparent; padding: 8px 0; flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: 7px 12px; display: inline-flex; align-items: center; gap: 4px; }
.seg button.on { background: var(--red); color: #fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tabs.scroll { overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h3 { font-size: 15px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.span2 { grid-column: 1 / -1; }
.stack { display: grid; gap: 18px; align-content: start; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { text-align: left; display: grid; gap: 4px; align-content: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; transition: border-color .15s, transform .15s; }
.kpi:not(:disabled):hover { border-color: #5a2a31; transform: translateY(-1px); }
.kpi-l { font-size: 12px; color: var(--text-2); }
.kpi-v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi.accent { background: linear-gradient(135deg, var(--red-deep), var(--surface)); border-color: rgba(227,40,60,.45); }
.kpi.accent .kpi-v { color: var(--accent); }
.kpi-s { font-size: 12px; color: var(--text-2); }
.bar { height: 7px; background: #2d302d; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.bar span { display: block; height: 100%; background: #B8132A; border-radius: 4px; transition: width .3s; }
.bar span.accent { background: linear-gradient(90deg, #9E1021, var(--accent)); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: #d4d6d2; border: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.chip.accent { color: var(--accent); border-color: rgba(227,40,60,.4); background: rgba(227,40,60,.08); }
.chip.ok { color: #8fd8b0; border-color: rgba(76,175,122,.4); background: rgba(76,175,122,.1); }
.chip.warn { color: #F2C46B; border-color: rgba(217,164,65,.4); background: rgba(217,164,65,.1); }
.chip.bad { color: #f0a5a3; border-color: rgba(217,83,79,.4); background: rgba(217,83,79,.1); }
.empty { text-align: center; padding: 26px 16px; display: grid; gap: 6px; justify-items: center; color: var(--text-2); }
.empty strong { color: var(--text); }
.notice { background: rgba(227,40,60,.08); border: 1px solid rgba(227,40,60,.35); color: #FFD9DD; padding: 10px 14px; border-radius: 10px; }
.notice.slim { margin: 10px 28px 0; font-size: 13px; }
.row-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.row-a.wrap { margin: 8px 0; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.row3 > div, .hero-m > div { display: grid; gap: 2px; }
.row3 strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.evo { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.evo > div { display: grid; }
.evo strong { font-size: 18px; }
.milhao { display: flex; align-items: baseline; gap: 8px; }
.reqs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.reqs li { display: flex; gap: 8px; align-items: center; color: var(--text-2); }
.reqs li.ok { color: var(--text); }
.reqs li.ok .ic { color: var(--ok); }
.reqs.lg li { padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.reqs.lg li > div { display: grid; flex: 1; }
.lst, .todo, .tasks, .timeline, .notifs, .sz-itens, .aulas, .rank { list-style: none; margin: 0; padding: 0; }
.lst li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: center; }
.lst li:last-child { border-bottom: 0; }
.todo { display: grid; gap: 6px; margin-top: 12px; }
.todo li { padding: 8px 10px; background: var(--surface-2); border-radius: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo li a { color: var(--text); display: inline-flex; gap: 6px; align-items: center; }
.metas-dia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.md { background: var(--surface-2); border-radius: 8px; padding: 10px; display: grid; }
.md strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.md strong small { font-size: 12px; color: var(--text-2); font-weight: 400; }
.check { display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 2px; flex: none; }
.rank li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); align-items: center; }
.rank li.me { background: rgba(227,40,60,.08); }
.rank .pos { font-weight: 700; text-align: center; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.medals.sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.medal { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: #5b5f5a; }
.medal strong, .medal small { color: var(--text-2); font-size: 12.5px; }
.medal.on { color: var(--accent); border-color: rgba(227,40,60,.4); background: linear-gradient(180deg, rgba(227,40,60,.08), var(--surface)); }
.medal.on strong, .medal.on small { color: var(--text); }

/* Gráficos */
.bchart { display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(0deg, transparent 0 35px, rgba(255,255,255,.035) 35px 36px); }
.bcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bbar { width: 62%; max-width: 46px; background: #3a3a40; border-radius: 6px 6px 0 0; }
.bbar.last { background: linear-gradient(180deg, var(--accent), #9E1021); }
.bval { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blab { font-size: 11px; color: var(--text-2); margin-bottom: -22px; padding-top: 4px; white-space: nowrap; }
.bchart { margin-bottom: 24px; }
.funil { display: grid; gap: 6px; }
.frow { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; font-size: 12.5px; }
.fb { height: 16px; background: #262926; border-radius: 4px; overflow: hidden; }
.fb span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #B8132A); border-radius: 4px; min-width: 2px; }
.fn { text-align: right; font-variant-numeric: tabular-nums; }

/* Telas centrais */
.center-screen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #3a0a12, var(--red-deep) 35%, #060606 80%); text-align: center; }
.brand-big { font-family: var(--display); font-size: 26px; letter-spacing: .26em; color: var(--accent); display: grid; gap: 2px; }
.brand-big span { font-family: var(--body); font-size: 11px; letter-spacing: .55em; color: #d6d9d4; }
.login-card { width: min(440px, 100%); background: rgba(32,32,32,.94); border: 1px solid #3a2a2d; border-radius: 16px; padding: 30px; display: grid; gap: 14px; text-align: left; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.login-card.wide { width: min(620px, 100%); }
.login-card .brand-big { text-align: center; margin-bottom: 6px; }
.login-card h1 { font-size: 32px; }
.login-card h2 { font-size: 20px; }

/* Formulários */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 12px; color: var(--text-2); font-weight: 500; }
.field.inline { display: flex; align-items: center; gap: 8px; }
.field input, .field select, .field textarea { width: 100%; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 16px; }
fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 0 0 12px; }
legend { padding: 0 6px; font-weight: 600; }
.quiz fieldset { display: grid; gap: 6px; }
.rowed { display: grid; grid-template-columns: 1.3fr .6fr 1.3fr 38px; gap: 6px; margin-bottom: 8px; align-items: start; }
.rowed textarea { grid-column: 1 / 4; }
[data-row=q].rowed { grid-template-columns: 1.5fr 1.5fr 90px 38px; }
.rubrica { display: grid; gap: 8px; }
.rubrica .field.inline span { flex: 1; }
.szedit .form-grid { gap: 8px 12px; }
blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 8px 0; }
.kv span { color: var(--text-2); }
.kv.big strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.prog-line { display: grid; gap: 4px; margin: 6px 0; }

/* Tabelas */
.tablewrap { overflow-x: auto; padding: 6px 6px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--text-2); font-size: 12px; padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--surface-2); }
.tbl .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Semana Zero */
.sz-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.szd { display: grid; gap: 2px; text-align: left; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); position: relative; }
.szd span { font-weight: 600; }
.szd small { color: var(--text-2); font-size: 11.5px; line-height: 1.3; }
.szd .ic { position: absolute; top: 10px; right: 10px; }
.szd.on { border-color: var(--accent); background: rgba(227,40,60,.08); }
.szd.done { border-color: #2f6b50; }
.szd.done .ic { color: var(--ok); }
.szd:disabled { opacity: .45; }
.sz-itens { display: grid; gap: 8px; }
.sz-itens li { padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }

/* Academy */
.escolas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.escola { text-align: left; display: grid; gap: 6px; padding: 18px; border-radius: var(--r); border: 1px solid var(--border); background: linear-gradient(160deg, var(--red-deep), var(--surface) 70%); }
.escola:hover { border-color: rgba(227,40,60,.5); }
.escola .num { font-family: var(--display); color: var(--accent); font-size: 26px; line-height: 1; }
.cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.curso { text-align: left; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
button.curso:hover { border-color: #5a2a31; }
.curso.cert { border-color: rgba(227,40,60,.35); }
.grid-curso { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.aulas { display: grid; gap: 4px; }
.aulas button { width: 100%; text-align: left; display: flex; gap: 8px; align-items: center; padding: 9px 10px; border: 0; border-radius: 8px; background: none; }
.aulas button.on { background: var(--red); }
.aulas button .ic { color: var(--ok); }
.aulas .n { width: 18px; text-align: center; color: var(--text-2); font-size: 12px; }
.video { display: grid; place-items: center; gap: 6px; aspect-ratio: 16/9; max-height: 360px; margin: 12px 0; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #2a0c12, #121512); border: 1px solid var(--border); color: var(--accent); text-align: center; align-content: center; }
.video:hover { text-decoration: none; border-color: var(--accent); }
.prose { line-height: 1.65; max-width: 70ch; }
.prose ol { padding-left: 20px; display: grid; gap: 6px; }

/* CRM */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: #191a19; border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; max-height: 70vh; min-height: 200px; }
.kcol.over { border-color: var(--accent); }
.kcol header { padding: 10px 12px; display: grid; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.kbody { padding: 8px; display: grid; gap: 8px; overflow-y: auto; align-content: start; }
.ccard { display: grid; gap: 3px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: grab; }
.ccard:hover { border-color: #5a2a31; }
.ccard.dragging { opacity: .5; }
.ctags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.det-h h3 { font-family: var(--display); font-size: 22px; }
.timeline { display: grid; gap: 0; border-left: 1px solid var(--border); margin-left: 6px; }
.timeline li { display: grid; gap: 2px; padding: 6px 0 10px 16px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Agenda e tarefas */
.agenda { display: grid; gap: 10px; }
.ag-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; display: grid; gap: 8px; }
.ag-day.today { border-color: rgba(227,40,60,.5); }
.ag-day h4 { margin: 0; text-transform: capitalize; }
.ev { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; border-left: 3px solid var(--red); }
.ev > div { display: grid; }
.ev.realizada { border-left-color: var(--ok); }
.ev.nao_compareceu { border-left-color: var(--bad); }
.ev-t { font-weight: 600; font-variant-numeric: tabular-nums; }
.tasks { display: grid; gap: 6px; }
.tasks li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; flex-wrap: wrap; }
.tasks li > label span { display: grid; }
.tasks li.done strong { text-decoration: line-through; color: var(--text-2); }

/* Vendas */
.hero-m { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: linear-gradient(135deg, var(--red-deep), var(--surface) 65%); border-color: rgba(227,40,60,.35); }
.hero-m strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.span4 { grid-column: 1 / -1; }
.marcos { position: relative; padding-bottom: 22px; }
.marcos .bar { height: 12px; border-radius: 6px; }
.marco { position: absolute; top: 20px; transform: translateX(-50%); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.marco:last-child { transform: translateX(-100%); }
.marco.on { color: var(--accent); }
.sim-out { align-content: start; }

/* Carreira */
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.step { height: var(--h); display: grid; align-content: start; gap: 2px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.step strong { font-size: 14px; }
.step small { color: var(--text-2); font-size: 11.5px; }
.step.past { border-color: #2f6b50; }
.step.cur { border: 1.5px solid var(--accent); background: linear-gradient(180deg, rgba(227,40,60,.14), var(--surface-2)); }
.step.cur strong { color: var(--accent); }

/* Modal, toast, ações rápidas */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; z-index: 100; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid #3a3e3a; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal.wide { width: min(860px, 100%); }
.modal header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); z-index: 1; }
.modal-b { padding: 18px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #2a2d2a; border: 1px solid #444; color: #fff; padding: 11px 16px; border-radius: 10px; z-index: 200; transition: opacity .2s, transform .2s; max-width: min(520px, calc(100vw - 32px)); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.ok { border-color: #2f6b50; }
#toast.bad { border-color: #7a3533; }
#toast.warn { border-color: #7a6233; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.quick-b { display: grid; gap: 8px; justify-items: center; padding: 18px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); }
.quick-b span { color: var(--text); }
.quick-b:hover { border-color: var(--accent); }
.notifs li { border-bottom: 1px solid var(--border); }
.notifs li.new { background: rgba(227,40,60,.06); }
.notifs .linkbtn { display: grid; padding: 10px 6px; width: 100%; }

/* Responsivo */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metas-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sz-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; width: 270px; transform: translateX(-105%); transition: transform .2s; box-shadow: 20px 0 50px rgba(0,0,0,.5); }
  .side.open { transform: none; }
  .only-m { display: inline-grid; }
  .top { padding: 10px 16px; }
  .hello h1 { font-size: 18px; }
  .hello p { display: none; }
  #view { padding: 16px 16px 100px; }
  .notice.slim { margin: 10px 16px 0; }
  .grid2, .grid-curso { grid-template-columns: 1fr; }
  .hero-m { grid-template-columns: repeat(2, 1fr); }
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { height: auto; }
  .bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: rgba(24,26,24,.97); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottom a, .bottom > button { display: grid; justify-items: center; gap: 2px; color: var(--text-2); font-size: 11px; background: none; border: 0; padding: 4px 0; }
  .bottom a.on { color: var(--accent); }
  .bottom .fab { justify-self: center; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: grid; place-items: center; margin-top: -18px; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
  .hide-s { display: none !important; }
  .kanban { grid-auto-columns: 82%; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .metas-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sz-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row3 { grid-template-columns: 1fr 1fr; }
  .frow { grid-template-columns: 110px 1fr 30px; }
  .ph h2 { font-size: 23px; }
  .kpi-v { font-size: 20px; }
  .search { min-width: 0; width: 100%; }
  .rowed, [data-row=q].rowed { grid-template-columns: 1fr 38px; }
  .rowed > *:not(button) { grid-column: 1; }
  .rowed > button { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.rubrica .field.inline select { width: 90px; flex: none; }
.reqs.lg strong { font-size: 14px; }

/* ---------- Marca: coroa */
.crown .cr-body { fill: var(--red); }
.crown .cr-band, .crown .cr-gem { fill: #fff; }
.crown .cr-dot { fill: var(--red); }
.side-brand .mark { border-color: rgba(255,255,255,.14); background: #0e0e10; width: 42px; height: 42px; }
.side-brand small { color: var(--accent); }
.side-brand strong, .brand-big strong { font-family: var(--display); font-weight: 600; }
.brand-big { color: #fff; justify-items: center; font-family: var(--display); letter-spacing: .28em; }
.brand-big strong { font-size: 26px; letter-spacing: .28em; margin-top: 8px; }
.brand-big span { color: var(--accent); letter-spacing: .6em; font-weight: 600; }
.display { font-family: var(--body); font-weight: 800; letter-spacing: -.02em; }
.hello h1 { font-family: var(--body); font-weight: 800; letter-spacing: -.02em; }
.ph h2 { font-size: 30px; }
.escola .num, .pill-big { font-family: var(--display); color: var(--accent); }

/* ---------- Animações */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { from { stroke-dashoffset: 240; fill-opacity: 0; } 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(227,40,60,.45); } 50% { box-shadow: 0 0 0 6px rgba(227,40,60,0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.crown.anim .cr-body { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 240; animation: draw 1.1s var(--ease) both; }
.crown.anim .cr-band { transform-origin: 32px 43px; animation: grow .5s .55s var(--ease) both; }
.crown.anim .cr-gem { transform-box: fill-box; transform-origin: center; animation: pop .45s var(--ease) both; }
.crown.anim .cr-gem:nth-of-type(1) { animation-delay: .8s; } .crown.anim .cr-gem:nth-of-type(2) { animation-delay: .9s; } .crown.anim .cr-gem:nth-of-type(3) { animation-delay: 1s; }
.boot .brand-big strong, .boot .brand-big span { animation: rise .6s .35s var(--ease) both; }
.boot-line { width: 160px; height: 2px; background: #222226; border-radius: 2px; overflow: hidden; }
.boot-line span { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: sweep 1.1s ease-in-out infinite; }

#view.enter > * { animation: rise .45s var(--ease) both; }
#view.enter > *:nth-child(2) { animation-delay: .04s; } #view.enter > *:nth-child(3) { animation-delay: .08s; } #view.enter > *:nth-child(4) { animation-delay: .12s; } #view.enter > *:nth-child(n+5) { animation-delay: .16s; }
#view.enter .kpis > *, #view.enter .grid2 > *, #view.enter .escolas > *, #view.enter .cursos > *, #view.enter .medals > * { animation: rise .5s var(--ease) both; }
#view.enter .kpis > *:nth-child(2), #view.enter .grid2 > *:nth-child(2) { animation-delay: .05s; }
#view.enter .kpis > *:nth-child(3), #view.enter .grid2 > *:nth-child(3) { animation-delay: .1s; }
#view.enter .kpis > *:nth-child(4), #view.enter .grid2 > *:nth-child(4) { animation-delay: .15s; }
#view.enter .kpis > *:nth-child(n+5), #view.enter .grid2 > *:nth-child(n+5) { animation-delay: .2s; }
#view.enter .bar span, #view.enter .fb span { transform-origin: left; animation: grow .9s .2s var(--ease) both; }
#view.enter .bbar { transform-origin: bottom; animation: growY .8s .15s var(--ease) both; }
.kpi.accent { background: linear-gradient(135deg, rgba(215,25,46,.22), var(--surface) 60%); border-color: rgba(227,40,60,.45); position: relative; overflow: hidden; }
.kpi.accent::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%); background-size: 200% 100%; animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
.kpi.accent .kpi-v { color: #fff; }
.kpi, .card, .curso, .escola, .ccard, .quick-b, .medal { transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.kpi:not(:disabled):hover, button.curso:hover, .escola:hover, .quick-b:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.ccard:hover { transform: translateY(-1px); }
.btn { transition: transform .12s var(--ease), background .15s, border-color .15s; }
.btn:active { transform: scale(.97); }
.btn.accent { background: var(--red); border-color: var(--red); color: #fff; }
.btn.accent:hover { background: var(--accent); box-shadow: 0 6px 20px rgba(215,25,46,.35); }
.btn.primary { background: #fff; color: #0A0A0B; border-color: #fff; font-weight: 600; }
.btn.primary:hover { background: #e9e9ec; }
.badge { background: var(--red); color: #fff; animation: pulse 2s infinite; }
.side nav a { transition: background .15s, color .15s; }
.side nav a.on { background: rgba(215,25,46,.14); box-shadow: inset 3px 0 0 var(--accent); }
.side nav a.on .ic { color: var(--accent); }
.side { background: linear-gradient(180deg, #121214, #0A0A0B 75%); }
.top { background: rgba(10,10,11,.86); }
.modal-bg { animation: fadeIn .18s ease both; backdrop-filter: blur(3px); }
.modal { animation: modalIn .26s var(--ease) both; }
.medal.on { animation: none; color: var(--accent); background: linear-gradient(180deg, rgba(215,25,46,.12), var(--surface)); }
.medal.on .ic { filter: drop-shadow(0 0 10px rgba(227,40,60,.45)); }
.bar span.accent { background: linear-gradient(90deg, var(--red-deep), var(--accent)); }
.bbar { background: #34343a; }
.bbar.last { background: linear-gradient(180deg, var(--accent), var(--red-deep)); }
.fb span { background: linear-gradient(90deg, var(--red-deep), var(--red)); }
.avatar { background: #1a1a1d; border-color: var(--red); color: #fff; }
.chip.accent { color: #ff8a95; }
.step.cur { border-color: var(--accent); background: linear-gradient(180deg, rgba(215,25,46,.18), var(--surface-2)); }
.step.cur strong { color: #fff; }
.center-screen { background: radial-gradient(900px 520px at 50% -10%, #3a0a12, #120608 45%, #050505 85%); }
.login-card { border-color: #2c2c31; }
.kcol.over { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.skeleton { background: linear-gradient(90deg, #17171a 25%, #202024 50%, #17171a 75%); background-size: 200% 100%; animation: shine 1.4s linear infinite; border-radius: 10px; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-weight: 600; font-size: 15px; }
.google-btn:hover { box-shadow: 0 6px 20px rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
.side-foot { display: flex; justify-content: space-between; align-items: center; }
.claude-mode [data-act="sair"] { display: none !important; }

/* ---------- v2 */
.install { margin: 0 6px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; border: 1px dashed rgba(227,40,60,.6); background: rgba(215,25,46,.08); color: #fff; font-weight: 600; }
.install:hover { background: rgba(215,25,46,.16); }
.desafio { padding: 12px 0; border-bottom: 1px solid var(--border); }
.desafio:last-child { border-bottom: 0; }
.desafio-h { display: grid; gap: 2px; margin-bottom: 6px; }
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alertas li { display: flex; gap: 10px; align-items: flex-start; }
.alertas li p { margin: 0 0 4px; }
.tbl tr.tot td { font-weight: 700; background: var(--surface-2); }
.modelos { display: flex; flex-wrap: wrap; gap: 6px; }
.objecoes { display: grid; gap: 8px; }
.objecoes details { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--surface-2); }
.objecoes summary { cursor: pointer; font-weight: 600; }
.objecoes p { margin: 8px 0; color: #e4e4e8; }
.player { position: relative; aspect-ratio: 16/9; margin: 12px 0; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.player iframe, .player > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-row=regra].rowed { grid-template-columns: 1.1fr 1.3fr 1fr 90px 38px; }
.rowed.head { grid-template-columns: 1.1fr 1.3fr 1fr 90px 38px; margin-bottom: 4px; }
textarea.mono-area { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
@media (max-width: 560px) { [data-row=regra].rowed, .rowed.head { grid-template-columns: 1fr 38px; } .rowed.head { display: none; } }

/* ---------- Coroa animada no fundo */
body { position: relative; }
#app, #modal-root, #toast { position: relative; z-index: 1; }
#modal-root { z-index: 100; } #toast { position: fixed; z-index: 200; }
.crown-bg { position: fixed; right: -120px; bottom: -110px; width: 640px; pointer-events: none; z-index: 0; opacity: .045; filter: drop-shadow(0 0 60px rgba(227,40,60,.6)); animation: crownFloat 16s ease-in-out infinite; will-change: transform; }
.crown-bg svg { width: 100%; height: auto; }
.crown-bg .cr-body { fill: var(--red); } .crown-bg .cr-band, .crown-bg .cr-gem { fill: #fff; }
@keyframes crownFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-26px) rotate(-2deg); } }
.crown-bg::after { content: ''; position: absolute; inset: 20% 15%; border-radius: 50%; background: radial-gradient(circle, rgba(227,40,60,.35), transparent 70%); animation: crownGlow 6s ease-in-out infinite; }
@keyframes crownGlow { 0%, 100% { opacity: .2; transform: scale(.9); } 50% { opacity: .6; transform: scale(1.08); } }
.crown-sparks { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.spark { position: absolute; bottom: -40px; opacity: 0; animation: sparkUp 18s linear infinite; will-change: transform, opacity; }
.spark svg { display: block; } .spark .cr-body { fill: var(--red); } .spark .cr-band, .spark .cr-gem { fill: #fff; }
.spark.s1 { left: 8%; animation-delay: 0s; } .spark.s2 { left: 22%; animation-delay: 5s; transform: scale(.7); } .spark.s3 { left: 41%; animation-delay: 9s; } .spark.s4 { left: 63%; animation-delay: 2.5s; } .spark.s5 { left: 78%; animation-delay: 12s; } .spark.s6 { left: 90%; animation-delay: 7s; } .spark.s7 { left: 52%; animation-delay: 14.5s; }
@keyframes sparkUp { 0% { transform: translateY(0) rotate(0deg) scale(.7); opacity: 0; } 10% { opacity: .22; } 70% { opacity: .12; } 100% { transform: translateY(-110vh) rotate(25deg) scale(1); opacity: 0; } }
.center-screen { background: radial-gradient(900px 520px at 50% -10%, rgba(58,10,18,.9), rgba(18,6,8,.8) 45%, rgba(5,5,5,.6) 85%); }
.center-screen .crown.anim { filter: drop-shadow(0 0 18px rgba(227,40,60,.55)); }
.app { background: transparent; }
.main { position: relative; }
body { background: var(--bg); }
@media (max-width: 900px) { .crown-bg { width: 380px; right: -90px; bottom: -40px; } }

/* ---------- WhatsApp do grupo */
.wa-grupo { margin: 0 6px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; background: #1fa855; color: #fff; font-weight: 600; font-size: 13px; }
.wa-grupo:hover { background: #22c063; text-decoration: none; box-shadow: 0 6px 18px rgba(31,168,85,.35); }
.wa-top { color: #25d366; }
.side { display: flex; } .side .wa-grupo, .side .install { flex: none; }

/* ---------- Fórum */
.topicos { display: grid; gap: 10px; }
.topico { text-align: left; display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); transition: border-color .2s, transform .2s var(--ease); }
.topico:hover { border-color: #5a2a31; transform: translateY(-1px); }
.topico-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.topico-f { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.autor { display: inline-flex; gap: 10px; align-items: center; }
.autor > span:last-child { display: inline; }
.papel { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: #d4d6d2; margin-left: 4px; }
.papel.g { background: rgba(215,25,46,.14); border-color: rgba(227,40,60,.5); color: #ff9aa4; }
.post { display: grid; gap: 10px; }
.post-txt { line-height: 1.65; white-space: normal; max-width: 75ch; }
.pergunta { border-color: #3a2a2d; }
.respostas { display: grid; gap: 10px; }
.resp-gestao { border-color: rgba(227,40,60,.55); background: linear-gradient(135deg, rgba(215,25,46,.08), var(--surface) 55%); position: relative; }
.selo { position: absolute; top: -10px; right: 14px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 99px; letter-spacing: .02em; }
.digitando { min-height: 22px; display: grid; gap: 4px; color: var(--text-2); font-size: 13px; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: dot 1s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Projeção */
.proj-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.proj-top > div { display: grid; gap: 2px; } .proj-top strong { font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .proj-top { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .crown-bg, .spark { animation: none !important; } .spark { display: none; } }
.funil.larg .frow { grid-template-columns: 150px 1fr 120px; }
.crown-bg .cr-gem { fill: rgba(255,255,255,.7); }

/* ---------- Logo oficial (coroa) e fundo com a equipe */
img.crown { display: block; height: auto; object-fit: contain; }
.brand-big img.crown { width: 120px; margin: 0 auto; filter: drop-shadow(0 6px 22px rgba(215,25,46,.45)); }
.side-brand .mark { background: transparent; border: 0; width: 48px; height: 40px; }
.side-brand .mark img.crown { width: 46px; }
.crown.anim { animation: coroaEntra 1.1s var(--ease) both, coroaBrilho 3.2s 1.1s ease-in-out infinite; }
@keyframes coroaEntra { 0% { opacity: 0; transform: translateY(14px) scale(.72) rotate(-6deg); filter: blur(6px) drop-shadow(0 0 0 rgba(215,25,46,0)); } 60% { opacity: 1; transform: translateY(-4px) scale(1.06) rotate(1deg); filter: blur(0) drop-shadow(0 0 28px rgba(227,40,60,.7)); } 100% { transform: none; filter: drop-shadow(0 6px 22px rgba(215,25,46,.45)); } }
@keyframes coroaBrilho { 0%, 100% { filter: drop-shadow(0 6px 18px rgba(215,25,46,.35)); } 50% { filter: drop-shadow(0 6px 34px rgba(227,40,60,.75)); } }
.crown-bg { opacity: .07; filter: none; }
.crown-bg img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 50px rgba(227,40,60,.5)); }
.spark img { display: block; width: 26px; height: auto; }
.bg-equipe { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.92) 70%), url('../img/equipe.jpg') center 30% / cover no-repeat; opacity: .32; filter: grayscale(1) contrast(1.05); animation: equipeZoom 40s ease-in-out infinite alternate; will-change: transform; }
@keyframes equipeZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (max-width: 900px) { .bg-equipe { background-image: linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,.92) 70%), url('../img/equipe-900.jpg'); } }
.center-screen { background: radial-gradient(900px 520px at 50% -10%, rgba(58,10,18,.75), rgba(18,6,8,.55) 45%, rgba(5,5,5,.35) 85%); }
.center-screen ~ * { }
.side { background: linear-gradient(180deg, rgba(18,18,20,.94), rgba(10,10,11,.96) 75%); backdrop-filter: blur(6px); }
.card, .kpi, .kcol, .curso, .escola, .topico, .ag-day { background-color: rgba(20,20,22,.9); }
.kpi.accent { background: linear-gradient(135deg, rgba(215,25,46,.24), rgba(20,20,22,.92) 60%); }
@media (prefers-reduced-motion: reduce) { .bg-equipe, .crown.anim { animation: none !important; } }

/* ---------- Eventos */
.evento-tile { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r); border: 1px solid rgba(227,40,60,.5); background: linear-gradient(110deg, rgba(215,25,46,.28), rgba(20,20,22,.92) 55%); color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.evento-tile:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(215,25,46,.25); }
.evento-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); background-size: 200% 100%; animation: shine 5s ease-in-out infinite; pointer-events: none; }
.et-txt { display: grid; gap: 2px; } .et-txt strong { letter-spacing: .14em; font-size: 15px; } .et-txt span { color: #e6e6ea; font-size: 13px; }
.balao { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(215,25,46,.2); border: 1px solid rgba(227,40,60,.55); color: #fff; animation: flutua 3.2s ease-in-out infinite; }
.balao .ic { stroke-width: 1.5; }
@keyframes flutua { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.balao-t { display: inline-grid; vertical-align: -4px; color: var(--accent); }
.eventos { display: grid; gap: 12px; }
.evento { display: grid; grid-template-columns: 78px 1fr auto; gap: 18px; align-items: center; }
.ev-data { display: grid; place-items: center; width: 74px; height: 78px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 800; line-height: 1; }
.ev-data span { font-size: 30px; } .ev-data small { font-size: 12px; letter-spacing: .12em; margin-top: -10px; }
.ev-info h3 { font-size: 18px; margin-bottom: 4px; }
.ev-acao { display: grid; gap: 6px; justify-items: end; }
.ev-resumo { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: rgba(215,25,46,.1); border: 1px solid rgba(227,40,60,.35); }
.visitantes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.tbl tr.sel td { background: rgba(215,25,46,.08); }
@media (max-width: 700px) { .evento { grid-template-columns: 64px 1fr; } .ev-acao { grid-column: 1 / -1; justify-items: start; } .ev-data { width: 62px; height: 66px; } .visitantes { grid-template-columns: 1fr; } .evento-tile { grid-template-columns: auto 1fr; } .et-cta { grid-column: 1 / -1; } }

/* ---------- Meta do mês (coroa subindo até os brindes) */
.metames { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 28px; align-items: center; }
.mm-torre { position: relative; height: 260px; margin: 18px 0 10px; padding-left: 8px; }
.mm-trilho { position: absolute; left: 30px; top: 0; bottom: 0; width: 18px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.mm-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p); background: linear-gradient(0deg, var(--red-deep), var(--red) 55%, var(--accent)); box-shadow: 0 0 22px rgba(227,40,60,.6); }
.mm-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, transparent, rgba(255,255,255,.25), transparent); background-size: 100% 60px; animation: mmBrilho 2.4s linear infinite; }
@keyframes mmBrilho { from { background-position: 0 100%; } to { background-position: 0 -60px; } }
.mm-coroa { position: absolute; left: 39px; bottom: var(--p); transform: translate(-50%, 50%); z-index: 2; }
.mm-coroa img { width: 44px; height: auto; display: block; filter: drop-shadow(0 4px 14px rgba(227,40,60,.8)); animation: mmFlutua 2.6s ease-in-out infinite; }
@keyframes mmFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#view.enter .mm-fill { animation: mmSobeH 1.6s var(--ease) both; }
#view.enter .mm-coroa { animation: mmSobeB 1.6s var(--ease) both; }
@keyframes mmSobeH { from { height: 0; } }
@keyframes mmSobeB { from { bottom: 0; } }
.mm-marco { position: absolute; left: 22px; right: 0; bottom: var(--y); transform: translateY(50%); display: flex; align-items: center; gap: 8px; }
.mm-linha { width: 34px; height: 2px; background: rgba(255,255,255,.25); }
.mm-gift { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1c1c1f; border: 1px solid rgba(255,255,255,.18); color: #a3a3ab; margin-left: 8px; }
.mm-lbl { display: grid; line-height: 1.15; } .mm-lbl strong { font-size: 15px; } .mm-lbl small { color: var(--muted, #a3a3ab); font-size: 12px; }
.mm-marco.ok .mm-linha { background: var(--accent); }
.mm-marco.ok .mm-gift { background: var(--red); border-color: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(227,40,60,.65); animation: mmPresente 2.2s ease-in-out infinite; }
.mm-marco.ok .mm-lbl small { color: #fff; font-weight: 700; }
@keyframes mmPresente { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(0); } }
.mm-resumo { display: grid; gap: 6px; } .mm-resumo .big { font-size: 34px; } .mm-resumo p { margin: 0; }
.mm-top { display: flex; gap: 8px; align-items: center; font-weight: 700; color: #fff; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mm-chips .chip { display: inline-flex; gap: 4px; align-items: center; }
.metames.festa .mm-coroa img { animation: mmFesta .9s ease-in-out 3; }
@keyframes mmFesta { 50% { transform: translateY(-14px) scale(1.25) rotate(8deg); } }
.marcos-l { display: grid; gap: 6px; } .marcos-l .grow { flex: 1; }
@media (max-width: 700px) { .metames { grid-template-columns: 1fr; gap: 8px; } .mm-torre { height: 230px; } }
@media (prefers-reduced-motion: reduce) { .mm-fill::after, .mm-coroa img, .mm-marco.ok .mm-gift { animation: none !important; } }

/* ---------- Minhas Vendas */
.tipo-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; vertical-align: middle; }
.tipo-ic.imovel { background: rgba(215,25,46,.18); border-color: rgba(227,40,60,.5); }
.tipo-ic.veiculo { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.kpi span .tipo-ic { width: 24px; height: 24px; border-radius: 7px; margin-right: 4px; }
.vend-mes { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; align-items: center; }
.vm-total { display: grid; gap: 4px; } .vm-total .big { font-size: 34px; }
.vm-tipo { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.vm-tipo .tipo-ic { width: 52px; height: 52px; border-radius: 14px; }
.vm-tipo div { display: grid; gap: 2px; } .vm-tipo strong { font-size: 20px; }
.kpi.warn { border-color: rgba(240,180,40,.5); }
.vm-kpis { margin-bottom: 16px; }
.vendas-tbl td.acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tipo-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tipo-op input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-op span { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); cursor: pointer; transition: all .2s var(--ease); }
.tipo-op input:checked + span { border-color: var(--accent); background: rgba(215,25,46,.16); box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 24px rgba(215,25,46,.2); }
.tipo-op input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { .vend-mes { grid-template-columns: 1fr; } .vendas-tbl td.acts { min-width: 160px; } }

/* ---------- Abertura (10 segundos) */
.boot.splash .brand-big strong { font-size: 40px; letter-spacing: .24em; }
.boot.splash .brand-big img.crown { width: 150px; }
.boot-line.fill { width: 240px; height: 4px; background: #1d1d21; }
.boot-line.fill span { width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--red-deep), var(--red), var(--accent)); box-shadow: 0 0 12px rgba(227,40,60,.7); animation: bootFill 10s linear forwards; }
@keyframes bootFill { to { transform: scaleX(1); } }
.boot-msg { letter-spacing: .04em; } .boot-msg b { color: #fff; font-variant-numeric: tabular-nums; margin-left: 4px; }
.boot.splash.saindo { animation: splashSai .38s ease-in forwards; }
@keyframes splashSai { to { opacity: 0; transform: scale(1.04); filter: blur(4px); } }

/* ---------- Abertura: a coroa enche de vermelho e brilha (10 s) */
.sp-coroa { --d: 0ms; position: relative; width: 220px; aspect-ratio: 1059 / 755; margin: 0 auto 8px; animation: coroaEntra 1.1s var(--ease) both; }
.sp-coroa img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-base { filter: grayscale(1) brightness(.2); opacity: .5; }
.sp-glow, .sp-cheia { position: absolute; inset: 0; }
.sp-glow { animation: spGlow 1.8s ease-in-out infinite; }
.sp-cheia { clip-path: inset(100% 0 0 0); animation: spEnche 10s linear var(--d) forwards; }
@keyframes spEnche { to { clip-path: inset(0 0 0 0); } }
@keyframes spGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(227,40,60,.55)) saturate(1.1); } 50% { filter: drop-shadow(0 0 32px rgba(255,60,80,.95)) brightness(1.18) saturate(1.25); } }
.sp-nivel, .sp-brilho { position: absolute; inset: 0; -webkit-mask: url('../img/coroa-240.webp') center / 100% 100% no-repeat; mask: url('../img/coroa-240.webp') center / 100% 100% no-repeat; pointer-events: none; }
.sp-nivel { background: linear-gradient(0deg, transparent calc(var(--lv) - 3%), rgba(255,255,255,.95) var(--lv), transparent calc(var(--lv) + 2.5%)); mix-blend-mode: screen; animation: spNivel 10s linear var(--d) forwards; }
@property --lv { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes spNivel { from { --lv: 0%; } to { --lv: 100%; } }
.sp-brilho { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 260% 100%; mix-blend-mode: screen; animation: spReflexo 2.6s ease-in-out infinite; }
@keyframes spReflexo { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.sp-nome strong { animation: rise .6s .35s var(--ease) both; } .sp-nome span { animation: rise .6s .5s var(--ease) both; }
.boot.splash .sp-nome strong { font-size: 40px; letter-spacing: .24em; }
.boot.splash::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(215,25,46,.22), transparent 65%); top: 50%; left: 50%; transform: translate(-50%, -62%); animation: spAura 3s ease-in-out infinite; pointer-events: none; }
@keyframes spAura { 50% { opacity: .55; transform: translate(-50%, -62%) scale(1.12); } }
.boot.splash { position: relative; }
@media (max-width: 520px) { .sp-coroa { width: 180px; } .boot.splash .sp-nome strong { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .sp-brilho, .boot.splash::before { animation: none; } .sp-glow { animation: none; filter: drop-shadow(0 0 14px rgba(227,40,60,.6)); } }
/* barra inferior com coroa correndo */
.sp-barra { position: relative; width: 280px; height: 30px; margin: 14px auto 2px; }
.sp-trilho { position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 4px; background: #1d1d21; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.sp-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--red-deep), var(--red) 60%, #ff5a6a); box-shadow: 0 0 14px rgba(227,40,60,.8); animation: bootFill 10s linear var(--d, 0ms) forwards; }
.sp-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); background-size: 80px 100%; background-repeat: no-repeat; animation: spCorre 1.4s linear infinite; }
@keyframes spCorre { from { background-position: -80px 0; } to { background-position: 280px 0; } }
.sp-mini { position: absolute; top: 50%; left: 0; transform: translate(-50%, -58%); animation: spMini 10s linear var(--d, 0ms) forwards; }
.sp-mini img { width: 30px; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(255,60,80,.95)); animation: mmFlutua 1.2s ease-in-out infinite; }
@keyframes spMini { to { left: 100%; } }