:root{
    --bg0:#0d0619;
    --bg1:#170b2e;
    --card:rgba(139,92,246,.08);
    --card-br:rgba(167,139,250,.22);
    --track:rgba(255,255,255,.08);
    --txt:#f4f0ff;
    --muted:#a99cc9;
    --violet:#8b5cf6;
    --violet-deep:#6d28d9;
    --red:#ff4d63;
    --orange:#ffa02e;
    --green:#34e39b;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{background:var(--bg0);}
  body{
    min-height:100vh;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--txt);
    -webkit-font-smoothing:antialiased;
    padding:46px 40px 40px;
    background:linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 55%);
    background-attachment:fixed;
    overflow-x:hidden;
  }
  /* ---------- Fundo vivo: orbes flutuando ---------- */
  .orb{position:fixed;border-radius:50%;filter:blur(95px);pointer-events:none;z-index:-1;}
  .orb1{width:540px;height:540px;background:#7c3aed;opacity:.34;top:-170px;left:-140px;animation:drift1 26s ease-in-out infinite alternate;}
  .orb2{width:430px;height:430px;background:#d946ef;opacity:.16;top:-60px;right:-150px;animation:drift2 32s ease-in-out infinite alternate;}
  .orb3{width:640px;height:640px;background:#4c1d95;opacity:.30;bottom:-260px;left:32%;animation:drift3 38s ease-in-out infinite alternate;}
  @keyframes drift1{to{transform:translate(70px,50px) scale(1.08);}}
  @keyframes drift2{to{transform:translate(-60px,70px) scale(1.12);}}
  @keyframes drift3{to{transform:translate(50px,-60px) scale(1.05);}}

  .wrap{max-width:1380px;margin:0 auto;}

  /* ---------- Animação de entrada (só liga com frames ativos: html.anim) ---------- */
  html.anim .reveal{animation:rise .55s cubic-bezier(.22,.8,.28,1) both;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}}

  /* ---------- Cabeçalho ---------- */
  .head{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .head .flag{
    width:44px;height:44px;flex:none;border-radius:12px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--violet),var(--violet-deep));
    box-shadow:0 8px 24px rgba(124,58,237,.45);
  }
  .head .flag svg{width:24px;height:24px;stroke:#fff;}
  .brand{display:flex;flex-direction:column;gap:2px;}
  .brand .eyebrow{
    font-size:11px;font-weight:800;letter-spacing:.28em;color:var(--violet);
    text-transform:uppercase;
  }
  .head h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(21px,2.5vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  }
  .head h1 span{color:var(--muted);font-weight:500;}
  .hint{
    margin-left:auto;display:flex;align-items:center;gap:8px;
    font-size:13px;color:var(--muted);
    background:rgba(139,92,246,.10);border:1px solid var(--card-br);
    padding:8px 14px;border-radius:999px;white-space:nowrap;
  }
  .hint svg{width:14px;height:14px;stroke:var(--muted);flex:none;}
  .mode{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    font:600 13px 'Inter',sans-serif;color:#e6dcff;white-space:nowrap;
    background:rgba(139,92,246,.22);border:1px solid rgba(167,139,250,.5);
    padding:8px 16px;border-radius:999px;
    transition:background .2s, box-shadow .2s;
  }
  .mode:hover{background:rgba(139,92,246,.38);box-shadow:0 4px 18px rgba(124,58,237,.35);}

  .subtitle{color:var(--muted);font-size:14px;margin-bottom:30px;}

  /* ---------- Totais: 3 cards iguais, alinhados no topo ---------- */
  .totals{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    align-items:stretch;margin-bottom:22px;
  }
  .kpi{
    display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
    padding:24px 26px;border-radius:18px;
    background:var(--card);
    border:1px solid var(--card-br);
    backdrop-filter:blur(8px);
    transition:transform .25s, box-shadow .25s;
  }
  .kpi:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(76,29,149,.30);}
  .kpi .label{
    font-size:clamp(13px,1.05vw,17px);color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;
  }
  .kpi .value{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(26px,3.4vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    font-variant-numeric:tabular-nums;
  }
  .kpi.falta{
    background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(109,40,217,.95));
    border:1px solid rgba(196,181,253,.5);
    box-shadow:0 16px 44px rgba(124,58,237,.40);
  }
  .kpi.falta:hover{box-shadow:0 20px 54px rgba(124,58,237,.55);}
  .kpi.falta .label{color:#e9dfff;}
  .kpi.falta .value{color:#fff;}

  /* ---------- Faixa: progresso geral + período + ritmo ---------- */
  .strip{
    background:var(--card);border:1px solid var(--card-br);
    border-radius:18px;padding:20px 24px;margin-bottom:16px;
    backdrop-filter:blur(8px);
  }
  .overall-top{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:10px;
    font-size:13px;color:var(--muted);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .ov-pct{
    font-family:'Space Grotesk',sans-serif;text-transform:none;letter-spacing:-.02em;
    font-size:clamp(18px,1.8vw,26px);font-weight:700;color:var(--c,#ff4d63);
    font-variant-numeric:tabular-nums;
  }
  .ov-track{
    height:14px;background:var(--track);
    border:1px solid rgba(255,255,255,.09);border-radius:999px;
    position:relative;overflow:hidden;
  }
  .ov-fill{
    position:absolute;top:0;left:0;bottom:0;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--c,#ff4d63),var(--c2,#ff2447));
    box-shadow:0 0 14px var(--glow,rgba(255,77,99,.35));
    transition:width .6s cubic-bezier(.22,.8,.28,1), background .3s;
  }
  .strip-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px;}
  .chip{
    font-size:13.5px;color:#d9d0ef;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    padding:7px 13px;border-radius:999px;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .chip b{color:#fff;font-weight:700;}
  .chip b.cv{color:var(--c,#ff4d63);}
  .chip.stamp{margin-left:auto;color:var(--muted);}
  #inPeriodo{font-weight:700;color:#fff;}

  /* ---------- Ações ---------- */
  .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:32px;}
  .ghost{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font:600 13px 'Inter',sans-serif;color:#cbbcf0;
    background:rgba(139,92,246,.10);border:1px solid var(--card-br);
    padding:8px 14px;border-radius:10px;
    transition:background .2s, color .2s, border-color .2s;
  }
  .ghost:hover{background:rgba(139,92,246,.22);color:#fff;border-color:rgba(196,181,253,.5);}
  .ghost.danger:hover{background:rgba(255,77,99,.14);border-color:rgba(255,77,99,.5);color:#ffb3bd;}

  /* ---------- Squads: cards com a mesma dinâmica do Progresso geral ---------- */
  .squad{
    position:relative;
    background:var(--card);border:1px solid var(--card-br);
    border-radius:18px;padding:20px 24px;
    margin-bottom:18px;
    backdrop-filter:blur(8px);
    transition:border-color .25s, box-shadow .25s;
  }
  .squad:hover{border-color:rgba(196,181,253,.42);box-shadow:0 10px 34px rgba(76,29,149,.35);}
  .squad-top{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .in-name{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(18px,1.9vw,27px);font-weight:700;letter-spacing:-.02em;color:var(--txt);
  }
  .squad-meta{
    font-size:clamp(13px,1.2vw,17px);color:var(--muted);font-weight:500;
    display:inline-flex;align-items:baseline;gap:2px;
  }
  .squad-pct{
    margin-left:auto;font-family:'Space Grotesk',sans-serif;
    font-size:clamp(18px,1.9vw,27px);font-weight:700;letter-spacing:-.02em;
    color:var(--c,#ff4d63);
    font-variant-numeric:tabular-nums;
  }
  .rm{
    flex:none;align-self:center;
    width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;
    background:transparent;color:var(--muted);font-size:15px;line-height:1;
    opacity:.3;transition:opacity .2s, background .2s, color .2s;
  }
  .squad:hover .rm{opacity:1;}
  .rm:hover{background:rgba(255,77,99,.15);color:var(--red);}

  /* barra individual (mesma linguagem da geral, com o valor editável dentro) */
  .track{
    position:relative;height:clamp(50px,4.6vw,62px);
    background:var(--track);
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  }
  .fill{
    position:absolute;top:0;left:0;bottom:0;width:0;
    background:var(--c,#ff4d63);
    background:linear-gradient(90deg, var(--c,#ff4d63), var(--c2,#ff2447));
    border-radius:999px;
    box-shadow:0 0 24px var(--glow,rgba(255,77,99,.35));
    transition:width .45s cubic-bezier(.22,.8,.28,1), background .3s;
    z-index:1;
    overflow:hidden;
  }
  .fill::after{ /* brilho no topo */
    content:'';position:absolute;left:0;right:0;top:0;height:45%;
    background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
    border-radius:999px 999px 0 0;
  }
  .fill::before{ /* shimmer passando pela barra */
    content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%);
    background-size:220% 100%;
    animation:shimmer 2.8s linear 1.1s infinite;
  }
  @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
  .st-green .fill{ /* pulso quando a meta é batida */
    animation:glowPulse 2.2s ease-in-out 1s infinite;
  }
  @keyframes glowPulse{
    0%,100%{box-shadow:0 0 22px var(--glow);}
    50%{box-shadow:0 0 42px var(--glow), 0 0 70px var(--glow);}
  }
  .bar-label{
    position:absolute;top:0;left:0;bottom:0;
    display:flex;align-items:center;gap:2px;padding-left:20px;
    white-space:nowrap;z-index:2;
    font-size:clamp(15px,1.5vw,23px);font-weight:700;letter-spacing:-.01em;color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.55);
  }

  /* chips por squad: falta, ritmo diário e participação (mesma dinâmica da faixa geral) */
  .squad-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px;}
  .squad-chips .chip{font-size:14px;}

  /* cores por status */
  .st-red   {--c:var(--red);   --c2:#ff2447;--glow:rgba(255,77,99,.35);}
  .st-orange{--c:var(--orange);--c2:#ff8800;--glow:rgba(255,160,46,.35);}
  .st-green {--c:var(--green); --c2:#0fc97e;--glow:rgba(52,227,155,.40);}

  /* ---------- Inputs editáveis (parecem texto) ---------- */
  input.in{
    font:inherit;color:inherit;letter-spacing:inherit;
    background:transparent;border:none;outline:none;
    border-bottom:1.5px dashed rgba(167,139,250,.5);
    border-radius:6px 6px 0 0;
    padding:0 3px;min-width:2ch;
    transition:background .2s, border-color .2s;
  }
  input.in:hover{background:rgba(139,92,246,.16);}
  input.in:focus{background:rgba(139,92,246,.28);border-bottom-color:var(--violet);border-bottom-style:solid;}
  .bar-label input.in{border-bottom-color:rgba(255,255,255,.6);}
  .bar-label input.in:hover,.bar-label input.in:focus{background:rgba(0,0,0,.30);}

  /* ---------- Modo apresentação: tela limpa para projetar ---------- */
  body.present .hint,
  body.present .subtitle,
  body.present .actions,
  body.present .rm,
  body.present .add,
  body.present .foot{display:none;}
  body.present input.in{border-bottom-color:transparent;pointer-events:none;background:transparent!important;}
  body.present .squad{margin-bottom:22px;}

  /* ---------- Adicionar squad ---------- */
  .add{
    width:100%;padding:16px;border-radius:16px;cursor:pointer;
    background:transparent;color:var(--muted);
    border:1.5px dashed rgba(167,139,250,.35);
    font:600 15px 'Inter',sans-serif;letter-spacing:.02em;
    transition:all .2s;
    margin-top:4px;
  }
  .add:hover{color:#d6c9ff;border-color:var(--violet);background:rgba(139,92,246,.10);}

  /* ---------- Legenda + rodapé ---------- */
  .legend{
    margin-top:44px;
    background:var(--card);border:1px solid var(--card-br);
    border-radius:16px;padding:16px 22px;
    display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;
    font-size:clamp(13px,1.05vw,16px);color:#d9d0ef;
    backdrop-filter:blur(8px);
  }
  .legend svg{width:20px;height:20px;stroke:var(--muted);flex:none;}
  .legend .dot{color:#5a4a85;}
  .r{color:var(--red);font-weight:700}
  .o{color:var(--orange);font-weight:700}
  .g{color:var(--green);font-weight:700}
  .foot{
    margin-top:34px;text-align:center;
    font-size:12.5px;color:#6d5c99;letter-spacing:.04em;
  }

  @media (max-width:900px){
    body{padding:24px 16px 32px;}
    .totals{grid-template-columns:1fr;gap:12px;}
    .kpi{padding:18px 20px;}
    .hint{display:none;}
    .mode{margin-left:auto;}
    .chip.stamp{margin-left:0;}
    .actions{justify-content:flex-start;}
    .squad{padding:16px 16px 18px;}
    .rm{opacity:.6;}
  }
  @media (prefers-reduced-motion:reduce){
    .orb,html.anim .reveal{animation:none;}
    .fill,.st-green .fill{animation:none!important;transition:none;}
    .fill::before{animation:none;display:none;}
  }