:root{
  --bg:#f4f2ef; --surf:#ffffff; --surf2:#ebe6e0; --borda:#ddd5cc;
  --txt:#1f1a16; --mudo:#6e655c;
  --accent:#6a3fd0; --on-accent:#ffffff;
  --ok:#16803f; --alerta:#a56500; --perigo:#c0301f; --on-c:#ffffff;
  --fn:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fd:'Barlow Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141110; --surf:#1e1a17; --surf2:#2c2622; --borda:#3d352f;
    --txt:#f4efea; --mudo:#ab9f94;
    --accent:#a98bff; --on-accent:#160b33;
    --ok:#4cc884; --alerta:#f0b94a; --perigo:#ff7d6b; --on-c:#140d08;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141110; --surf:#1e1a17; --surf2:#2c2622; --borda:#3d352f;
  --txt:#f4efea; --mudo:#ab9f94;
  --accent:#a98bff; --on-accent:#160b33;
  --ok:#4cc884; --alerta:#f0b94a; --perigo:#ff7d6b; --on-c:#140d08;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root.tv{font-size:clamp(15px,1.45vw,30px)}
body{margin:0;background:var(--bg);color:var(--txt);font:400 1rem/1.4 var(--fn);min-height:100dvh;font-variant-numeric:tabular-nums;overflow-x:hidden}
button,input,summary{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding:16px 16px 40px}
.st-ok{--c:var(--ok)} .st-alerta{--c:var(--alerta)} .st-perigo{--c:var(--perigo)} .st-nd{--c:var(--mudo)}

/* topo */
.topo{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;padding:8px 0 16px;border-bottom:3px solid var(--accent);margin-bottom:20px}
h1{margin:0;font:700 clamp(2rem,7vw,3.4rem)/1 var(--fd);letter-spacing:.01em;text-transform:uppercase}
.sub{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;color:var(--mudo);font-weight:500}
.sub b{color:var(--txt);font-weight:700;display:inline-block}.sub b::first-letter{text-transform:uppercase}
.controles{display:flex;flex-wrap:wrap;gap:8px}
.btn{border:2px solid var(--borda);background:var(--surf);border-radius:8px;padding:10px 16px;font-weight:600;min-height:44px}
.btn:hover{border-color:var(--accent)}
.btn.prim{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.perigo{background:var(--perigo);border-color:var(--perigo);color:var(--on-c)}
.btn.peq{padding:6px 12px;min-height:36px}
.btn[disabled]{opacity:.5;cursor:default}

/* layout */
.cols{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.cols.dois{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
.tv .cols.dois{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.card{background:var(--surf);border:1px solid var(--borda);border-radius:12px;padding:16px}
.card h2{margin:0 0 4px;font:700 1.9rem/1.05 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.card .leg{margin:0 0 14px;color:var(--mudo);font-size:.85rem}
.cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.leg i.k{display:inline-block;width:3px;height:.9em;background:var(--txt);vertical-align:-.1em;margin-right:5px}

/* funil */
.funil{container-type:inline-size}
.etapa{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nome num" "barra barra";gap:6px 12px;align-items:center}
.e-nome{grid-area:nome}
.e-nome b{display:block;font:700 1.5rem/1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.e-nome small{color:var(--mudo);font-weight:600;font-size:.85rem}
.e-num{grid-area:num;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 10px}
.real{font:700 2.6rem/1 var(--fd)}
.pill{display:inline-flex;align-items:baseline;gap:6px;background:var(--c);color:var(--on-c);border-radius:999px;padding:3px 12px;font-weight:700;font-size:1rem;white-space:nowrap}
.pill em{font-style:normal;font-weight:600;font-size:.75rem;opacity:.95}
.det{flex-basis:100%;text-align:right;color:var(--mudo);font-size:.82rem;font-weight:500}
.e-barra{grid-area:barra}
.barra{position:relative;height:1.7rem;margin:0 auto;background:var(--surf2);border-radius:6px;overflow:visible}
.barra i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:6px;transition:width .5s ease}
.barra u{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:var(--txt);border-radius:2px;text-decoration:none}
.conv{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0;font-size:.85rem;font-weight:600;color:var(--mudo);flex-wrap:wrap;text-align:center}
.conv::before{content:"";border:7px solid transparent;border-top:9px solid var(--c);border-bottom:0}
.conv b{color:var(--txt)}
.conv .v{color:var(--c);font-weight:700;filter:brightness(.92)}
@container (min-width:34rem){
  .etapa{grid-template-columns:7.5rem minmax(0,1fr) 14.5rem;grid-template-areas:"nome barra num"}
  .barra{height:2.3rem}
  .det{text-align:right}
}

/* ranking */
.tabw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0 4px;width:100%}
.rk{min-width:480px}
.rk th,.rk td{padding:6px 6px;text-align:center}
.rk thead th{font:700 1rem/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--mudo);padding-bottom:4px}
.rk th[scope=row]{text-align:left}
.rk .pos{color:var(--mudo);font-weight:700;width:1.6rem}
.rk .c{background:color-mix(in srgb,var(--c) 20%,var(--surf));border-radius:6px;min-width:3.4rem}
.rk .c b{display:block;font:700 1.7rem/1 var(--fd);color:var(--txt)}
.rk .c small{display:block;font-weight:700;font-size:.75rem;color:color-mix(in srgb,var(--c) 70%,var(--txt))}
.rk tfoot th,.rk tfoot td{border-top:2px solid var(--borda)}
.lnk{background:none;border:0;padding:6px 0;font-weight:700;font-size:1rem;text-align:left;text-decoration:underline;text-decoration-color:var(--borda);text-underline-offset:3px;min-height:36px}
.lnk:hover{text-decoration-color:var(--accent);color:var(--accent)}
.tv .lnk{text-decoration:none;cursor:default}

/* seletor de mes */
.selmes{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--mudo)}
.selmes select{border:2px solid var(--borda);background:var(--surf);color:var(--txt);border-radius:8px;padding:8px 10px;min-height:44px;font:inherit;font-weight:600;max-width:100%}
.selmes select:hover{border-color:var(--accent)}
.selo{display:inline-block;border:1px solid var(--borda);background:var(--surf2);color:var(--mudo);border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* TV */
.so-tv{display:none}
.tv .so-tv{display:block}
.tv .nao-tv{display:none!important}
.tv .wrap{padding:12px 24px 16px;max-width:none}
.tv .topo{padding-bottom:10px;margin-bottom:14px}
.tv .solo{max-width:62rem;margin:0 auto}
.tvbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tvpos{font:700 1.4rem/1 var(--fd);text-transform:uppercase;color:var(--accent);letter-spacing:.05em}
.tvsair{opacity:.7}
.tvsair:hover,.tvsair:focus-visible{opacity:1}
.prog{height:5px;background:var(--surf2);border-radius:3px;overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;animation:prog 15s linear forwards}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* painel de edicao */
.ov{position:fixed;inset:0;background:rgba(20,12,6,.62);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto;z-index:50}
.modal{background:var(--surf);border:1px solid var(--borda);border-radius:14px;width:100%;max-width:920px;padding:18px;margin:auto}
.modal h2{margin:0 0 4px;font:700 2rem/1 var(--fd);text-transform:uppercase}
.etl{list-style:none;margin:6px 0;padding:0;display:grid;gap:8px}
.etl li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.etl .ord{font-weight:700;color:var(--mudo);min-width:1.4rem}
.etl input.nome{flex:1 1 10rem;min-width:8rem;padding:8px 6px;border:2px solid var(--borda);border-radius:8px;background:var(--bg);min-height:42px}
.etl .res{color:var(--mudo);flex-basis:100%;padding-left:1.8rem}
.cfg{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 0}
.cfg label{display:flex;flex-direction:column;gap:4px;font-weight:600;flex:1 1 14rem}
.cfg input{padding:8px 10px;border:2px solid var(--borda);border-radius:8px;background:var(--bg);min-height:42px}
.modal p.ajuda{margin:0 0 12px;color:var(--mudo);font-size:.9rem}
.grade{min-width:560px}
.grade th{font:700 .95rem/1 var(--fd);text-transform:uppercase;letter-spacing:.05em;color:var(--mudo);text-align:center;padding:2px 4px}
.grade td{padding:2px 4px;text-align:center;vertical-align:middle}
.grade td.nm{text-align:left;min-width:11rem}
.grade input{width:100%;min-width:3.6rem;max-width:5.5rem;padding:8px 6px;border:2px solid var(--borda);border-radius:8px;background:var(--bg);text-align:center;min-height:42px}
.grade input.nome{max-width:none;text-align:left}
.grade input:focus{border-color:var(--accent)}
.rem{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:.85rem;font-weight:600}
.dias{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0;font-weight:600}
.dias input{width:5.5rem;padding:8px 6px;border:2px solid var(--borda);border-radius:8px;background:var(--bg);text-align:center;min-height:42px}
details{margin:10px 0;border:1px solid var(--borda);border-radius:10px;padding:8px 12px}
summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center}
.rodape{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
#msg{min-height:1.4em;margin:10px 0 0;font-weight:600}
#msg.erro{color:var(--perigo)} #msg.info{color:var(--mudo)}
#aviso{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:34rem;background:var(--txt);color:var(--bg);padding:12px 16px;border-radius:10px;font-weight:600;z-index:60;display:none;text-align:center}
#aviso.on{display:block}
.vazio{padding:24px;text-align:center;color:var(--mudo)}
/* ---- topo novo: HOJE + placar + o que falta (prefixo tp-) ---- */
.tp-hoje{background:var(--surf);border:1px solid var(--borda);border-left:8px solid var(--accent);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.tp-rot{margin:0;font:700 .95rem/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tp-data{margin:2px 0 0;font:700 clamp(2rem,9vw,3.6rem)/1 var(--fd);text-transform:uppercase;letter-spacing:.01em}
.tp-info{display:flex;flex-wrap:wrap;gap:2px 16px;margin:6px 0 0;font-weight:600}
.tp-info span:last-child{color:var(--mudo)}
.tp-mesbar{height:10px;background:var(--surf2);border-radius:5px;overflow:hidden;margin-top:8px}
.tp-mesbar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.tp-card{background:var(--surf);border:1px solid var(--borda);border-radius:12px;padding:16px;margin-bottom:16px}
.tp-pl{border-left:8px solid var(--c);padding:12px 14px 14px}
.tp-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin-bottom:6px}
.tp-nome{font:700 1.8rem/1 var(--fd);text-transform:uppercase;letter-spacing:.03em}
.tp-pill{display:inline-flex;align-items:center;gap:6px;background:var(--c);color:var(--on-c);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.9rem;white-space:nowrap}
.tp-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tp-nm{min-width:0;padding:0 8px;border-left:2px solid var(--borda)}
.tp-nm:first-child{border-left:0;padding-left:0}
.tp-nm .l{display:block;font:700 .95rem/1 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--mudo)}
.tp-nm .v{display:block;font:700 clamp(3.2rem,15vw,5.6rem)/.95 var(--fd)}
.tp-nm .u{display:block;font-weight:700;font-size:.9rem;line-height:1.2}
.tp-nm .s{display:block;color:var(--mudo);font-size:.78rem;line-height:1.25;margin-top:2px}
.tp-nm.falta .v{color:var(--c)}
.tp-nm.ok .v{color:var(--ok)}
.tp-barra{position:relative;height:1.5rem;margin:14px 0 4px;background:var(--surf2);border-radius:6px}
.tp-barra i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:6px;transition:width .5s ease}
.tp-barra u{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;background:var(--txt);border-radius:2px;text-decoration:none}
.tp-leg{position:relative;height:1.1rem;font-size:.78rem;color:var(--mudo);font-weight:600}
.tp-leg span{position:absolute;white-space:nowrap}
.tp-sem{margin:6px 0 0;font-weight:700;font-size:1.02rem}
.tp-sem b{color:var(--c);filter:brightness(.92)}
:root[data-theme="dark"] .tp-sem b{filter:none}
.tp-card h2{margin:0 0 8px;font:700 1.7rem/1.05 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.tp-et{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome falta" "feito falta" "barra barra";gap:0 12px;align-items:center;padding:8px 0;border-top:1px solid var(--borda)}
.tp-et.p1{border-top:0}
.tp-et .n{grid-area:nome;font:700 1.4rem/1.1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.tp-et .f{grid-area:feito;color:var(--mudo);font-size:.85rem;font-weight:600}
.tp-et .q{grid-area:falta;text-align:right;font:700 2rem/1 var(--fd);color:var(--txt)}
.tp-et .q small{display:block;font:600 .75rem/1.2 var(--fn);color:var(--mudo);text-transform:uppercase;letter-spacing:.06em}
.tp-et.feito .q{color:var(--ok)}
.tp-et .b{grid-area:barra;height:8px;background:var(--surf2);border-radius:4px;overflow:hidden;margin-top:6px}
.tp-et .b i{display:block;height:100%;background:var(--c);border-radius:4px}
@media (prefers-reduced-motion: reduce){.tp-barra i{transition:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .prog i{transform:none}
}
@media (max-width:520px){
  .real{font-size:2.3rem}
  .card{padding:12px}
}

/* ---- meta do trimestre (prefixo tq-) ---- */
.tq{background:var(--surf);border:1px solid var(--borda);border-left:8px solid var(--c);border-radius:12px;padding:12px 16px 14px;margin-bottom:16px}
.tq-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.tq-rot{margin:0;font:700 1.7rem/1.05 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.tq-pill{display:inline-flex;align-items:center;gap:6px;background:var(--c);color:var(--on-c);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.95rem;white-space:nowrap}
.tq-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:6px 0 0}
.tq-pct{font:700 clamp(3rem,13vw,4.8rem)/.95 var(--fd);color:var(--c)}
.tq-de{font-weight:700;font-size:1.1rem}
.tq-de small{display:block;color:var(--mudo);font-weight:600;font-size:.82rem}
.tq-barra{position:relative;height:1.4rem;margin:10px 0 6px;background:var(--surf2);border-radius:6px;overflow:hidden}
.tq-barra i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:6px;transition:width .5s ease}
.tq-meses{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;color:var(--mudo);font-size:.85rem;font-weight:600}
.tq-meses b{color:var(--txt)}

/* ---------- Conversão entre etapas ---------- */
.cv-lista{container-type:inline-size;margin:0}
.cv-leg{margin:0 0 10px;color:var(--mudo);font-size:.85rem}
.cv-passos{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin:0;padding:0;list-style:none}
.cv-p{position:relative;min-width:0;background:var(--surf2);border:1px solid var(--borda);border-left:6px solid var(--c);border-radius:10px;padding:10px 12px;font-variant-numeric:tabular-nums}
.cv-p:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-15px;width:12px;height:12px;margin-left:-6px;border-right:3px solid var(--mudo);border-bottom:3px solid var(--mudo);transform:rotate(45deg);opacity:.8}
.cv-nome{display:block;font:700 1.15rem/1.1 var(--fd);letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.cv-linha{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.cv-v{font:700 clamp(2.6rem,12vw,3.6rem)/1 var(--fd);font-variant-numeric:tabular-nums}
.cv-v.sd{font-size:1.6rem}
.cv-ic{display:inline-flex;align-items:center;gap:5px;background:var(--c);color:var(--on-c);border-radius:999px;padding:2px 10px;font-weight:700;font-size:.8rem;white-space:nowrap}
.cv-de{display:block;margin:2px 0 0;font-size:.82rem;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.cv-esp{display:block;margin:0;color:var(--mudo);font-size:.82rem;font-weight:600}
.cv-b{position:relative;height:8px;margin-top:8px;background:var(--bg);border:1px solid var(--borda);border-radius:4px}
.cv-b i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:3px}
.cv-b u{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--txt);border-radius:2px;text-decoration:none}
@container (min-width:880px){
  .cv-passos{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
  .cv-p:not(:last-child)::after{left:auto;right:-16px;top:50%;bottom:auto;margin:-6px 0 0;transform:rotate(-45deg)}
}

/* ---------- etapa 3: login, barra do usuário, usuários ---------- */
.login{max-width:380px;margin:12vh auto 0;background:var(--surf);border:1px solid var(--borda);border-radius:16px;padding:24px}
.login h1{margin:0 0 4px;font-size:1.4rem}
.login p{color:var(--mudo);margin:0 0 16px}
.login label{display:block;font-weight:600;margin:12px 0 4px}
.login input{width:100%;box-sizing:border-box;padding:10px 12px;border:2px solid var(--borda);border-radius:10px;font:inherit;min-height:44px;background:var(--surf);color:var(--txt)}
.login input:focus{outline:none;border-color:var(--accent)}
.login .btn{width:100%;margin-top:18px;min-height:44px}
.login .erro,.erro-msg{color:#b3261e;font-weight:600;min-height:1.3em;margin-top:10px}
.barra-user{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:flex-end;padding:8px 0;color:var(--mudo);font-size:.9rem}
.barra-user b{color:var(--txt)}
.barra-user .btn{min-height:36px}
.tv .barra-user{display:none}
.usr-l{list-style:none;margin:12px 0;padding:0}
.usr-l li{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--borda)}
.usr-l .off{opacity:.55}
.usr-l small{color:var(--mudo);display:block}
.usr-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.usr-form label{font-weight:600;display:block}
.usr-form input,.usr-form select{width:100%;box-sizing:border-box;padding:8px 10px;border:2px solid var(--borda);border-radius:10px;font:inherit;min-height:40px;background:var(--surf);color:var(--txt)}
.senha-prov{background:var(--surf2);border:2px dashed var(--accent);border-radius:12px;padding:12px;margin:12px 0}
.senha-prov code{font-size:1.3rem;font-weight:700;letter-spacing:.06em;user-select:all}

body{margin:0}
[hidden]{display:none!important}