/* Ari Sistemas Academias: estilo comum de todas as telas */
:root{
  --bg:#f3f4f0;--bg2:#eaece6;--card:#fff;--ink:#141a17;--mut:#5b665f;--line:#e1e5df;--line2:#cfd6cf;
  --forest:#0e5a43;--deep:#0a3f30;--mint:#dcf1e6;--amber:#f2a93b;--red:#d9453b;--side:#0f2a21;--hl:31 160 110;
  --sh1:0 1px 2px rgba(15,25,20,.06),0 1px 1px rgba(15,25,20,.04);--sh2:0 10px 30px -12px rgba(15,25,20,.22),0 2px 6px rgba(15,25,20,.06);
  --r:16px;--r2:12px;--ease:cubic-bezier(.2,.7,.2,1);color-scheme:light;
  /* grade de 8px (DESIGN.md) */
  --s0:4px;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;
  /* estados */
  --ok-bg:var(--mint);--ok-ink:var(--forest);--warn-bg:#fdebc8;--warn-ink:#6b4300;--bad-bg:#fbe0dc;--bad-ink:#8a1f16;--on-accent:#fff;
  /* paleta de apoio (categorias): indicadores, cartões, ícones e gráficos. A cor principal continua sendo a da academia. */
  --c1:#2f6fde;--c2:#7c4ddb;--c3:#e2702a;--c4:#d23f7a;--c5:#139aa8;--c6:#c99400;
  --c1-bg:#e3edfd;--c2-bg:#efe7fd;--c3-bg:#fdeadd;--c4-bg:#fce4ee;--c5-bg:#dcf3f5;--c6-bg:#fbf0cf;
  /* versões claras para fundo escuro (menu lateral) */
  --c1-l:#8fb4ff;--c2-l:#c0a3ff;--c3-l:#ffb27a;--c4-l:#ff9cc3;--c5-l:#7fdbe4;--c6-l:#ffd666
}
@media(prefers-color-scheme:dark){:root{--bg:#0b1411;--bg2:#101b17;--card:#13201b;--ink:#e6efeb;--mut:#9cb0a7;--line:#22332c;--line2:#2c4038;--forest:#37b886;--deep:#2b9b70;--mint:#183b2f;--side:#08110e;--red:#ff8a7a;--sh1:0 1px 2px rgba(0,0,0,.4);--sh2:0 14px 34px -14px rgba(0,0,0,.7);--warn-bg:#3a2c10;--warn-ink:#f5c46b;--bad-bg:#3d1a17;--bad-ink:#ff9d90;--c1:#7aa7ff;--c2:#b393ff;--c3:#ff9f5e;--c4:#ff86b4;--c5:#5fd0dc;--c6:#f2c94c;--c1-bg:#18284a;--c2-bg:#261c44;--c3-bg:#3b2414;--c4-bg:#3c1729;--c5-bg:#0f3237;--c6-bg:#352b0c;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;font:15px/1.5 Archivo,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--forest);text-underline-offset:3px}
h1,h2,h3{margin:0;line-height:1.12;font-stretch:85%}
h1{font-size:clamp(1.55rem,4.4vw,2.05rem);font-weight:800;font-stretch:72%;letter-spacing:-.012em}
h2{font-size:1.1rem;font-weight:700}h3{font-size:.98rem;font-weight:700}
.mut{color:var(--mut)}small{color:var(--mut)}
::selection{background:rgb(var(--hl)/.25)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barra superior */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.topbar b{font-stretch:85%;font-size:1.05rem;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--forest),var(--deep));color:#fff;display:grid;place-items:center;font-weight:800;flex:none;box-shadow:0 4px 10px -4px rgb(var(--hl)/.6)}
.iconbtn{background:none;border:0;color:var(--mut);padding:8px;border-radius:10px;cursor:pointer;display:grid;place-items:center;min-width:40px;min-height:40px}
.iconbtn:hover{background:var(--bg);color:var(--ink)}
.busca{display:none;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:12px;padding:8px 12px;font:inherit;font-size:.9rem;cursor:pointer;min-width:260px;transition:border-color .15s}
.busca:hover{border-color:var(--line2);color:var(--ink)}.busca kbd{margin-left:auto}
kbd{font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;padding:3px 6px;color:var(--mut);background:var(--card)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--forest);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.instalar:not(.on){display:none!important}
.topbar .so-pc{display:none}

/* conteúdo */
main{padding:16px 14px calc(96px + env(safe-area-inset-bottom));max-width:1280px;margin:0 auto;animation:entra .32s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pagehead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin:4px 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0;box-shadow:var(--sh1)}
.ch{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.actions{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding-bottom:2px}

/* botões e campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--forest);color:#fff;border:0;border-radius:var(--r2);padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:42px;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 12px -6px rgb(var(--hl)/.7);transition:background .15s,transform .08s,box-shadow .15s}
.btn:hover{background:var(--deep)}.btn:active{transform:translateY(1px) scale(.99)}
.btn.alt{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest)}.btn.alt:hover{background:var(--mint)}
.btn.sm{padding:6px 11px;font-size:.82rem;border-radius:10px;min-height:34px}
.btn[disabled],.btn.is-loading{opacity:.7;cursor:progress}
.btn.is-loading:before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(1turn)}}
input,select,textarea{font:inherit;padding:10px 12px;border:1.5px solid var(--line2);border-radius:var(--r2);background:var(--card);color:var(--ink);max-width:100%;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--forest) 40%,var(--line2))}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--forest);box-shadow:0 0 0 4px rgb(var(--hl)/.18)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--mut) 75%,transparent)}
label{font-weight:600}

/* selos, avisos e tabelas */
.pill{display:inline-block;border-radius:99px;padding:3px 10px;font-size:.78rem;font-weight:700;background:var(--mint);color:var(--forest);white-space:nowrap}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}.pill.gray{background:var(--bg);color:var(--mut)}
.msg{padding:11px 14px;border-radius:var(--r2);background:var(--card);border:1px solid var(--forest);margin-bottom:10px;box-shadow:var(--sh1)}.msg.error{border-color:var(--red);color:var(--red)}
.trial{background:var(--mint);border:0;color:var(--forest);font-weight:600}
.rt{width:100%;border-collapse:separate;border-spacing:0}
.rt th{text-align:left;font-size:.76rem;color:var(--mut);font-weight:700;padding:9px 8px;letter-spacing:.01em;border-bottom:1px solid var(--line)}
.rt th[data-ord]{cursor:pointer;user-select:none}.rt th[data-ord]:after{content:" ↕";opacity:.35}.rt th[aria-sort=ascending]:after{content:" ↑";opacity:1}.rt th[aria-sort=descending]:after{content:" ↓";opacity:1}
.rt td{padding:11px 8px;border-top:1px solid var(--line);vertical-align:middle}.rt tbody tr:first-child td{border-top:0}
.rt tbody tr{transition:background .12s}.rt tbody tr:hover{background:color-mix(in srgb,var(--mint) 45%,transparent)}
.tfiltro{display:flex;gap:8px;align-items:center;margin:0 0 10px}.tfiltro input{flex:1;min-width:0;padding:8px 12px}.tfiltro small{white-space:nowrap}
@media(max-width:700px){.rt thead{display:none}.rt tr{display:block;border-top:1px solid var(--line);padding:8px 0}.rt td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}.rt td:before{content:attr(data-label);color:var(--mut);font-size:.82rem;text-align:left}.rt td.full{display:block;text-align:left}.rt td.full:before{content:none}}
.wa{display:inline-flex;align-items:center;gap:6px;background:#25d366;color:#073b1d;font-weight:700;border-radius:10px;padding:6px 10px;font-size:.8rem;text-decoration:none;white-space:nowrap}
.sk{background:linear-gradient(90deg,var(--bg) 25%,var(--bg2) 37%,var(--bg) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:10px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* barra inferior (celular) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;padding:4px 6px env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--line)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 7px;font-size:.7rem;color:var(--mut);text-decoration:none;font-weight:600}
.tabbar a svg.i{width:40px;height:28px;padding:4px 10px;border-radius:99px;transition:background .2s}
.tabbar a.on{color:var(--forest);font-weight:800}.tabbar a.on svg.i{background:var(--mint)}

/* menu lateral (computador) */
.side{display:none}
.side .sec{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(207,224,216,.5);padding:14px 12px 4px}
@media(min-width:960px){
  body.app{display:grid;grid-template-columns:248px minmax(0,1fr);transition:grid-template-columns .25s var(--ease)}
  body.app.mini{grid-template-columns:76px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--side);color:#cfe0d8;padding:18px 12px}
  .side .brand{display:flex;gap:10px;align-items:center;color:#fff;font-weight:800;font-stretch:85%;font-size:1.08rem;padding:0 8px 6px;white-space:nowrap}
  .side .gym{font-size:.78rem;color:#8fb0a2;padding:0 10px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side a,.side button{position:relative;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;color:#cfe0d8;text-decoration:none;font:inherit;font-weight:500;background:none;border:0;cursor:pointer;width:100%;white-space:nowrap;transition:background .15s,color .15s}
  .side a:hover,.side button:hover{background:rgba(255,255,255,.08);color:#fff}
  .side a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
  .side a.on:before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--amber)}
  .side .bottom{margin-top:auto;display:grid;gap:2px}
  body.mini .side .lb,body.mini .side .gym,body.mini .side .sec,body.mini .side .brand .lb{display:none}
  body.mini .side a,body.mini .side button{justify-content:center;padding:11px 0}
  body.mini .side .brand{justify-content:center;padding:0 0 12px}
  body.mini .encolhe svg{transform:rotate(180deg)}
  .tabbar,.topbar .so-cel{display:none}
  .busca{display:flex}
  .topbar .so-pc{display:grid}
  .topbar{padding:12px 28px}
  main{padding:24px 28px 44px;width:100%}
}
body.menu-claro .side{background:var(--card);color:var(--ink);border-right:1px solid var(--line)}
body.menu-claro .side a,body.menu-claro .side button{color:var(--mut)}body.menu-claro .side .brand{color:var(--ink)}body.menu-claro .side .gym,body.menu-claro .side .sec{color:var(--mut)}
body.menu-claro .side a.on,body.menu-claro .side a:hover,body.menu-claro .side button:hover{background:var(--mint);color:var(--forest)}
body.menu-cor .side{background:linear-gradient(180deg,var(--forest),var(--deep))}body.menu-cor .side .gym,body.menu-cor .side .sec{color:rgba(255,255,255,.72)}
body.compacto{font-size:14px}body.compacto .card{padding:12px}body.compacto main{padding-top:12px}

/* avisos flutuantes */
.toasts{position:fixed;z-index:80;top:calc(70px + env(safe-area-inset-top));right:16px;left:16px;display:grid;gap:8px;justify-items:end;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;max-width:420px;width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--forest);border-radius:14px;padding:12px 12px 12px 14px;box-shadow:var(--sh2);animation:toastIn .3s var(--ease) both}
.toast.error{border-left-color:var(--red)}.toast.saindo{animation:toastOut .25s ease both}
.toast p{margin:0;flex:1}.toast button{border:0;background:none;color:var(--mut);cursor:pointer;font-size:1.1rem;line-height:1;padding:2px 4px}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}

/* busca rápida (Ctrl + K) */
.pal{position:fixed;inset:0;z-index:90;display:none;background:rgba(8,14,12,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:12vh 14px 14px}
.pal.on{display:block;animation:fade .15s ease both}
@keyframes fade{from{opacity:0}}
.pal-box{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);overflow:hidden;animation:toastIn .2s var(--ease) both}
.pal-in{display:flex;align-items:center;gap:10px;padding:6px 14px;border-bottom:1px solid var(--line)}
.pal-in input{flex:1;border:0;box-shadow:none;font-size:1.05rem;padding:12px 0;background:transparent}.pal-in input:focus{box-shadow:none}
.pal ul{list-style:none;margin:0;padding:6px;max-height:min(60vh,440px);overflow:auto}
.pal li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer}
.pal li[aria-selected=true]{background:var(--mint);color:var(--forest)}
.pal li .tp{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--mut)}
.pal li small{display:block}.pal .vazio{padding:16px;color:var(--mut)}
.pal-pe{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:.75rem;color:var(--mut)}

/* transição suave entre páginas (navegadores compatíveis) */
@view-transition{navigation:auto}
.side{view-transition-name:menu}.tabbar{view-transition-name:abas}.topbar{view-transition-name:topo}main{view-transition-name:conteudo}
::view-transition-old(conteudo){animation:.14s ease both vtSai}::view-transition-new(conteudo){animation:.24s var(--ease) both vtEntra}
@keyframes vtSai{to{opacity:0}}@keyframes vtEntra{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.side,.tabbar,.topbar,.toasts,.pal{display:none!important}body.app{display:block}main{padding:0}}


/* indicadores (KPIs) e barras: componentes compartilhados (DESIGN.md) */
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-bottom:var(--s2)}
.strip>*{background:var(--card);padding:calc(var(--s1) + var(--s0)) var(--s2);display:flex;flex-direction:column;gap:0;min-width:0}
.strip small{font-size:.78rem}.strip b{font-size:clamp(1.25rem,5vw,1.6rem);font-weight:800;font-stretch:75%;font-variant-numeric:tabular-nums;white-space:nowrap}
.strip span{font-size:.78rem;color:var(--mut)}.strip .st-bad b{color:var(--red)}.strip .st-warn b{color:var(--warn-ink)}.strip .st-ok b{color:var(--forest)}
.strip a{color:inherit;text-decoration:none}.strip>a:hover{background:var(--bg)}
@media(max-width:619px){.strip>*:last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:620px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.strip.c6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.bars{display:flex;align-items:stretch;gap:var(--s0);height:150px;margin-top:var(--s1)}
.bar{flex:1;display:flex;flex-direction:column;gap:var(--s0);min-width:0}.bar b{flex:1;display:flex;align-items:flex-end}
.bar i{display:block;width:100%;background:rgb(var(--hl)/.28);border-radius:var(--s0) var(--s0) 2px 2px;min-height:3px}
.bar.hot i{background:var(--forest)}.bar span{font-size:.62rem;color:var(--mut);text-align:center;height:12px;overflow:visible;white-space:nowrap}
.bars.tall{height:130px}.bar em{font-style:normal;font-size:.66rem;color:var(--mut);text-align:center;white-space:nowrap}

/* formulário em grade e seletor segmentado (DESIGN.md) */
.fgrid{display:grid;gap:calc(var(--s1) + var(--s0));grid-template-columns:1fr}.fgrid label{display:block;font-weight:600;font-size:.88rem;margin-bottom:var(--s0)}.fgrid input,.fgrid select,.fgrid textarea{width:100%}
.fgrid .full{grid-column:1/-1}
@media(min-width:760px){.fgrid.two{grid-template-columns:1fr 1fr}}
.seg{display:flex;flex-wrap:wrap;gap:var(--s0);background:var(--bg);border-radius:var(--r2);padding:var(--s0)}
.seg button{border:0;background:transparent;font:inherit;font-weight:700;font-size:.82rem;padding:6px var(--s1);border-radius:var(--s1);cursor:pointer;color:var(--ink);display:inline-flex;gap:var(--s0);align-items:center}
.seg button[aria-pressed=true]{background:var(--card);box-shadow:var(--sh1)}
.seg button .n{font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}

/* grade de painéis em 12 colunas (DESIGN.md) */
.dgrid{display:grid;gap:var(--s2);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1100px){.dgrid{grid-template-columns:repeat(12,minmax(0,1fr))}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}}
.dgrid>.card{margin:0}

/* medidor, listas, definições e ações em linha (DESIGN.md) */
.meter{display:block;height:6px;background:var(--bg2);border-radius:99px;overflow:hidden;min-width:48px}
.meter i{display:block;height:100%;background:var(--forest);border-radius:inherit}
.meter.warn i{background:var(--amber)}.meter.bad i{background:var(--red)}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;justify-content:space-between;padding:calc(var(--s1) + var(--s0)) 0;border-top:1px solid var(--line)}
.lista li:first-child{border-top:0}.lista .quem{min-width:0;flex:1}.lista .quem b{display:block}
.hrow{display:grid;grid-template-columns:minmax(80px,140px) 1fr 32px;gap:var(--s1);align-items:center;font-size:.86rem;padding:var(--s0) 0}
.hrow .meter{height:8px}.hrow b{text-align:right;font-variant-numeric:tabular-nums}
.dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:var(--s1) var(--s2);margin:0}
.dl dt{color:var(--mut);font-size:.86rem}.dl dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.acts{display:flex;flex-wrap:wrap;gap:var(--s0);align-items:center}.acts form{display:contents}
.vazio{color:var(--mut);padding:var(--s2) 0;margin:0}
.fora{display:none!important}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pilha>*+*{margin-top:var(--s2)}
.sub{margin:var(--s2) 0 var(--s1)}.lista .quem small{display:block}
@keyframes brilho{from{background:var(--mint)}}tr.brilho{animation:brilho .9s var(--ease)}
.cel{display:grid;gap:var(--s0);justify-items:start}.cel .meter{width:100%}
@media(max-width:700px){.cel{justify-items:end}.cel .meter{width:96px}}
/* campos de formulário: opções, caixa de seleção, ajuda e erro (DESIGN.md) */
.rotulo{display:block;font-weight:600;font-size:.88rem;margin-bottom:var(--s0)}
.opcoes{display:flex;flex-wrap:wrap;gap:var(--s1)}
.opcao{position:relative;display:inline-flex;cursor:pointer}.opcao input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opcao span{display:inline-flex;align-items:center;min-height:42px;padding:0 var(--s2);border:1.5px solid var(--line2);border-radius:var(--r2);font-weight:600;background:var(--card);transition:border-color .15s,background .15s}
.opcao input:checked+span{border-color:var(--forest);background:var(--mint);color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.opcao input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.check{display:flex;gap:var(--s1);align-items:center;cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--forest);flex:none}
.ajuda{display:block;margin-top:var(--s0);font-size:.8rem}
.erro{display:block;margin-top:var(--s0);color:var(--red);font-weight:600;font-size:.82rem}
.copiar{display:flex;gap:var(--s1)}.copiar input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}
.sucesso{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mint);color:var(--forest);margin-bottom:var(--s2)}
.sucesso svg.i{width:28px;height:28px}
.cred{display:grid;gap:var(--s1);margin:var(--s2) 0}.cred div{display:flex;justify-content:space-between;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);background:var(--bg);border-radius:var(--r2)}
.cred small{display:block}.cred b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;overflow-wrap:anywhere}
.passos{margin:0;padding-left:1.2em;display:grid;gap:var(--s1)}.passos li::marker{color:var(--forest);font-weight:800}
details.card>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s1)}
details.card>summary::-webkit-details-marker{display:none}details.card[open]>summary{margin-bottom:var(--s2)}
.card>h2+.passos{margin-top:var(--s1)}

/* ---------- cores do sistema (DESIGN.md: paleta de apoio) ---------- */
.strip>*:nth-child(6n+1),.dgrid>.card:nth-child(6n+1),.pilha>.card:nth-of-type(6n+1),.hrow:nth-of-type(6n+1),.side a:nth-of-type(6n+1),.tabbar a:nth-of-type(6n+1),.cfg>.card:nth-child(6n+1){--k:var(--c1);--k-bg:var(--c1-bg);--k-l:var(--c1-l)}
.strip>*:nth-child(6n+2),.dgrid>.card:nth-child(6n+2),.pilha>.card:nth-of-type(6n+2),.hrow:nth-of-type(6n+2),.side a:nth-of-type(6n+2),.tabbar a:nth-of-type(6n+2),.cfg>.card:nth-child(6n+2){--k:var(--c2);--k-bg:var(--c2-bg);--k-l:var(--c2-l)}
.strip>*:nth-child(6n+3),.dgrid>.card:nth-child(6n+3),.pilha>.card:nth-of-type(6n+3),.hrow:nth-of-type(6n+3),.side a:nth-of-type(6n+3),.tabbar a:nth-of-type(6n+3),.cfg>.card:nth-child(6n+3){--k:var(--c3);--k-bg:var(--c3-bg);--k-l:var(--c3-l)}
.strip>*:nth-child(6n+4),.dgrid>.card:nth-child(6n+4),.pilha>.card:nth-of-type(6n+4),.hrow:nth-of-type(6n+4),.side a:nth-of-type(6n+4),.tabbar a:nth-of-type(6n+4),.cfg>.card:nth-child(6n+4){--k:var(--c4);--k-bg:var(--c4-bg);--k-l:var(--c4-l)}
.strip>*:nth-child(6n+5),.dgrid>.card:nth-child(6n+5),.pilha>.card:nth-of-type(6n+5),.hrow:nth-of-type(6n+5),.side a:nth-of-type(6n+5),.tabbar a:nth-of-type(6n+5),.cfg>.card:nth-child(6n+5){--k:var(--c5);--k-bg:var(--c5-bg);--k-l:var(--c5-l)}
.strip>*:nth-child(6n+6),.dgrid>.card:nth-child(6n+6),.pilha>.card:nth-of-type(6n+6),.hrow:nth-of-type(6n+6),.side a:nth-of-type(6n+6),.tabbar a:nth-of-type(6n+6),.cfg>.card:nth-child(6n+6){--k:var(--c6);--k-bg:var(--c6-bg);--k-l:var(--c6-l)}
/* indicadores: faixa colorida no topo e ponto na legenda */
.strip>*{position:relative;box-shadow:inset 0 3px 0 var(--k,transparent)}
.strip>* small:first-child{display:inline-flex;align-items:center;gap:6px}
.strip>* small:first-child:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k,var(--forest));flex:none}
/* cartões em grade: borda superior na cor e marcador no título */
.dgrid>.card,.pilha>.card,.cfg>.card{border-top:3px solid var(--k,var(--line))}
.card>.ch h2,.card>h2{display:flex;align-items:center;gap:var(--s1)}
.dgrid>.card>.ch h2:before,.pilha>.card>.ch h2:before,.cfg>.card>.ch h2:before,.dgrid>.card>h2:before{content:"";width:4px;height:18px;border-radius:2px;background:var(--k,var(--forest));flex:none}
/* barras horizontais e medidores das listas */
.hrow .meter i{background:var(--k,var(--forest))}
/* menu lateral: cada item com sua cor */
.side a svg.i{color:var(--k-l,currentColor);transition:transform .15s var(--ease)}
.side a:hover svg.i{transform:scale(1.08)}
.side a.on{background:color-mix(in srgb,var(--k-l,#fff) 16%,transparent)}
.side a.on:before{background:var(--k-l,var(--amber))}
body.menu-claro .side a svg.i{color:var(--k,currentColor)}
body.menu-claro .side a.on{background:var(--k-bg,var(--mint));color:var(--k,var(--forest))}
body.menu-cor .side a svg.i{color:#fff}
/* barra inferior do celular */
.tabbar a.on{color:var(--k,var(--forest))}
.tabbar a.on svg.i{background:var(--k-bg,var(--mint))}
/* selos coloridos */
.pill.info{background:var(--c1-bg);color:var(--c1)}.pill.roxo{background:var(--c2-bg);color:var(--c2)}
.pill.laranja{background:var(--c3-bg);color:var(--c3)}.pill.rosa{background:var(--c4-bg);color:var(--c4)}
.pill.ciano{background:var(--c5-bg);color:var(--c5)}
/* filtros segmentados: botão ativo com a cor de destaque */
.seg button[aria-pressed=true]{color:var(--forest)}.seg button[aria-pressed=true] .n{color:var(--forest)}
/* avatar e marca */
.avatar{background:var(--c2-bg);color:var(--c2)}
/* atalhos do portal do aluno com ícones coloridos */
a.card:nth-of-type(3n+1) .ico{background:var(--c1-bg);color:var(--c1)}
a.card:nth-of-type(3n+2) .ico{background:var(--c3-bg);color:var(--c3)}
a.card:nth-of-type(3n+3) .ico{background:var(--c2-bg);color:var(--c2)}
/* gráficos de barras na cor do cartão */
.dgrid>.card .bar i{background:color-mix(in srgb,var(--k,var(--forest)) 26%,transparent)}
.dgrid>.card .bar.hot i{background:var(--k,var(--forest))}
/* trilhas, ranking e funil também na cor do cartão */
.dgrid>.card .track i{background:var(--k,var(--forest))}
.dgrid>.card .rank .pos{background:var(--k-bg,var(--mint));color:var(--k,var(--forest))}
.dgrid>.card .rank li:nth-child(-n+3) .pos{background:var(--k,var(--forest));color:var(--on-accent)}
.funnel>div:nth-child(1) .track i{background:var(--c1)}.funnel>div:nth-child(2) .track i{background:var(--c2)}
.funnel>div:nth-child(3) .track i{background:var(--c3)}.funnel>div:nth-child(4) .track i{background:var(--forest)}
.funnel>div:nth-child(5) .track i{background:var(--red)}