@import url('../mascote.css?v=20260910-bipi1');
  @font-face{ font-family:"Fredoka"; src:url("../fontes/fredoka.woff2") format("woff2-variations"); font-weight:300 700; font-display:swap }
  @font-face{ font-family:"Nunito"; src:url("../fontes/nunito.woff2") format("woff2-variations"); font-weight:200 1000; font-display:swap }
  :root{
    /* papel / tinta */
    --ground:#F4F6FA; --surface:#FFFFFF; --surface-2:#EAEFF6; --line:#DDE2EC; --line-2:#C2CBDB;
    --ink:#1B2440; --ink-2:#46536F; --muted:#626B82;
    /* Bipi (teal). O par btn/on-brand é o fundo e o texto do botão cheio, com contraste AA nos dois modos */
    --brand:#2B9AA3; --brand-deep:#1F7B83; --brand-soft:#D9EFF1; --brand-ink:#1B6E75;
    --brand-btn:#1F7B83; --on-brand:#FFFFFF;
    /* atenção (âmbar) */
    --sun:#F2B441; --sun-soft:#FFF3D6; --sun-ink:#7C5312;
    /* fim do tempo (coral) */
    --coral:#E0865E; --coral-soft:#FBE6DC; --coral-ink:#9C4726;
    /* positivo (verde) */
    --leaf:#4FA872; --leaf-soft:#E3F3EA; --leaf-ink:#2C6B48;
    /* cores fixas da marca, iguais nos dois modos */
    --teal:#2B9AA3; --teal-escuro:#1F7B83; --ambar:#F2B441; --tinta:#1B2440; --lilas:#7C5CC4;
    --fonte-titulo:"Fredoka","Nunito",system-ui,sans-serif;
    --shadow:0 1px 2px rgba(27,36,64,.05), 0 16px 40px rgba(27,36,64,.10);
    --shadow-lg:0 -8px 50px rgba(27,36,64,.22);
    --r:22px; --r-sm:14px; --tap:48px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ground:#14213A; --surface:#1B2A4A; --surface-2:#23375C; --line:#2C3A58; --line-2:#3F5279;
      --ink:#EDF1F8; --ink-2:#B9C4DA; --muted:#9CA5B8;
      --brand:#47B5BE; --brand-deep:#2B9AA3; --brand-soft:#1A3F48; --brand-ink:#A8E3E8;
      --brand-btn:#47B5BE; --on-brand:#14213A;
      --sun:#F2B441; --sun-soft:#3E3218; --sun-ink:#FFD98F;
      --coral:#E8996F; --coral-soft:#40291E; --coral-ink:#FFC3A6;
      --leaf:#5FBC86; --leaf-soft:#1C3A2A; --leaf-ink:#A9E4C2;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.38);
      --shadow-lg:0 -8px 50px rgba(0,0,0,.5);
    }
  }
  *{ box-sizing:border-box } html{ -webkit-text-size-adjust:100% }
  body{ margin:0; background:var(--ground); color:var(--ink); font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:600; font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; min-height:100dvh }
  button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
  button:active{ transform:scale(.97) } button:disabled{ opacity:.4; pointer-events:none }
  h1,h2,h3{ margin:0; font-family:var(--fonte-titulo); font-weight:700; letter-spacing:-.02em; text-wrap:balance }
  p{ margin:0 }

  /* ---------- topo ---------- */
  .topo{ position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); padding:calc(env(safe-area-inset-top) + 10px) 20px 10px; display:flex; align-items:center; gap:10px }
  .topo .logo{ width:34px; height:34px; font-size:34px; flex:none; margin-top:4px; box-shadow:inset 0 -.055em 0 rgba(0,0,0,.16), 0 6px 14px rgba(43,154,163,.32) }
  .topo h1{ font-size:19px } .topo .sub{ font-size:12px; color:var(--muted); margin-top:-2px; font-weight:600 }
  .topo .liga{ margin-left:auto; display:flex; gap:6px }
  .dot{ width:8px; height:8px; border-radius:50%; background:var(--line-2); display:inline-block } .dot.on{ background:var(--leaf); box-shadow:0 0 0 3px var(--leaf-soft) } .dot.off{ background:var(--coral); box-shadow:0 0 0 3px var(--coral-soft) }
  .liga span{ display:flex; align-items:center; gap:5px; font-family:var(--fonte-titulo); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em }

  main{ max-width:560px; margin:0 auto; padding:6px 16px calc(env(safe-area-inset-bottom) + 92px) }
  .tela{ display:none; animation:fade .25s ease } .tela.on{ display:grid; gap:14px }
  @keyframes fade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
  @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }

  /* ---------- hero ---------- */
  .hero{ background:var(--surface); border:1.5px solid var(--line); border-radius:26px; box-shadow:var(--shadow); padding:22px 20px 18px; display:grid; gap:16px; position:relative; overflow:hidden }
  .hero:before{ content:""; position:absolute; inset:-40% -20% auto; height:70%; background:radial-gradient(60% 60% at 50% 0%, var(--brand-soft), transparent 70%); pointer-events:none }
  .hero .estado{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; position:relative }
  /* ---------------- o rosto do Bipi ----------------
     Quadrado arredondado. As medidas são em "em", então basta dar width = height = font-size
     ao elemento (.logo, .anel .cara) para o rosto inteiro crescer junto. */
  .rosto{ position:relative; border-radius:28%; background:var(--teal); box-shadow:inset 0 -.055em 0 rgba(0,0,0,.16); animation:respira 4s ease-in-out infinite }
  @keyframes respira{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }
  .rosto .olho{ position:absolute; top:34%; width:.17em; height:.24em; border-radius:50%; background:var(--tinta); transition:height .3s, top .3s }
  .rosto .olho.e{ left:25% } .rosto .olho.d{ right:25% }
  .rosto .brilho{ position:absolute; top:.03em; left:.026em; width:.055em; height:.055em; border-radius:50%; background:#fff; opacity:.92 }
  .rosto i{ position:absolute; left:33%; right:33%; bottom:21%; height:.12em; border:0 solid var(--tinta); border-bottom-width:.036em; border-radius:0 0 50% 50% / 0 0 100% 100%; transition:all .3s }
  .rosto .chapeu{ position:absolute; left:50%; top:-.15em; width:.15em; height:.16em; margin-left:-.075em }
  .rosto .chapeu .haste{ position:absolute; left:50%; top:.07em; width:.066em; height:.15em; margin-left:-.033em; border-radius:.03em; background:var(--ambar) }
  .rosto .chapeu .bola{ position:absolute; left:0; top:0; width:.15em; height:.15em; border-radius:50%; background:var(--coral) }
  .rosto.feliz .olho{ height:.09em; top:36%; border-radius:.09em .09em 0 0 }
  .rosto.feliz .brilho{ opacity:0 }
  .rosto.feliz i{ left:29%; right:29%; height:.16em }
  .anel{ position:relative; width:128px; height:128px }
  .anel svg{ width:100%; height:100%; transform:rotate(-90deg) }
  .anel .tr{ fill:none; stroke:var(--surface-2); stroke-width:10 }
  .anel .ar{ fill:none; stroke:var(--brand); stroke-width:10; stroke-linecap:round; stroke-dasharray:339.3; stroke-dashoffset:339.3; transition:stroke-dashoffset .9s ease, stroke .5s }
  .anel .cara{ position:absolute; left:50%; top:50%; width:60px; height:60px; font-size:60px; margin:-30px 0 0 -30px; border-radius:28%; background:var(--brand); transition:background .5s }
  /* dormindo: olhos viram tracinhos e o sorriso fica pequeno — o Bipi nunca faz cara triste */
  .anel.dorme .cara .olho{ top:43%; height:.04em; border-radius:.04em } .anel.dorme .cara .brilho{ opacity:0 }
  .anel.dorme .cara i{ left:38%; right:38%; bottom:24%; height:.09em; border-bottom-width:.03em }
  .anel .num{ position:absolute; left:0; right:0; bottom:-22px; text-align:center; font-family:var(--fonte-titulo); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; color:var(--ink-2) }
  .chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fonte-titulo); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--surface-2); color:var(--ink-2) }
  .chip.on{ background:var(--leaf-soft); color:var(--leaf-ink) } .chip.mid{ background:var(--sun-soft); color:var(--sun-ink) } .chip.off{ background:var(--coral-soft); color:var(--coral-ink) } .chip.brand{ background:var(--brand-soft); color:var(--brand-ink) }
  .hero .txt{ display:grid; gap:6px; min-width:0; justify-items:start } .hero .txt h2{ font-size:22px; line-height:1.15; text-wrap:balance } .hero .txt p{ color:var(--ink-2); font-size:14px }
  .acoes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; position:relative }
  .acao{ display:grid; justify-items:center; gap:6px; padding:10px 4px 8px; border-radius:18px; background:var(--surface-2); font-size:12px; font-weight:800; color:var(--ink-2); min-height:var(--tap); transition:background .15s }
  .acao b{ width:38px; height:38px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-size:17px; box-shadow:0 1px 2px rgba(0,0,0,.08) }
  .acao.primaria{ background:var(--brand-soft); color:var(--brand-ink) } .acao.perigo{ color:var(--coral-ink) } .acao.perigo b{ background:var(--coral-soft) }

  /* ---------- resumo do dia ---------- */
  .painel{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; display:grid; gap:12px }
  .painel header{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
  .painel h3{ font-size:16px } .painel header span{ font-size:12px; color:var(--muted); font-weight:700 }
  .usos{ display:grid; gap:10px }
  .uso{ display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center }
  .uso .ico{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-size:18px }
  .uso .n{ font-size:14px; font-weight:800 } .uso .barra{ height:7px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-top:5px } .uso .barra i{ display:block; height:100%; border-radius:999px; background:var(--brand); width:0; transition:width .6s ease }
  .uso .v{ font-family:var(--fonte-titulo); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap } .uso .v small{ color:var(--muted); font-weight:600 }

  /* ---------- cartões ---------- */
  .grade{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .tile{ text-align:left; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-rows:96px auto; transition:transform .15s, box-shadow .15s; position:relative }
  .tile:active{ transform:scale(.98) } .tile.inativo{ opacity:.55 }
  .tile .capa{ display:grid; place-items:center; font-size:44px; position:relative }
  .tile .capa:after{ content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(to top, rgba(0,0,0,.18), transparent) }
  .tile .info{ padding:10px 12px 12px; display:grid; gap:6px }
  .tile .info b{ font-family:var(--fonte-titulo); font-weight:600; letter-spacing:-.02em; font-size:16px; line-height:1.2; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .tile .meta{ display:flex; gap:6px; flex-wrap:wrap } .tile .meta span{ font-size:11px; font-weight:700; color:var(--muted) }
  .tile .barra{ height:5px; background:var(--surface-2); border-radius:999px; overflow:hidden } .tile .barra i{ display:block; height:100%; background:var(--brand); width:0; border-radius:999px }
  .tile .tocando{ position:absolute; top:8px; left:8px }
  .tile.novo{ grid-template-rows:none; border:2px dashed var(--line-2); box-shadow:none; background:transparent; display:grid; place-items:center; min-height:150px; color:var(--brand-ink); font-weight:800; gap:6px; text-align:center }
  .tile.novo b{ font-family:var(--fonte-titulo); font-weight:600; font-size:30px; line-height:1 }
  .aprender{ background:var(--sun-soft); color:var(--sun-ink); border-radius:var(--r-sm); padding:12px 14px; display:none; align-items:center; gap:10px; font-weight:700; font-size:14px }
  .aprender.on{ display:flex } .aprender .pulso{ width:12px; height:12px; border-radius:50%; background:var(--sun); animation:pulso 1.2s infinite }
  @keyframes pulso{ 0%,100%{ box-shadow:0 0 0 0 rgba(242,180,65,.5) } 70%{ box-shadow:0 0 0 10px rgba(242,180,65,0) } }
  .linha-acoes{ display:flex; gap:8px; justify-content:flex-end }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:0 20px; border-radius:999px; font-weight:800; font-size:15px; text-decoration:none; background:var(--surface-2); color:var(--ink) }
  .btn.primario{ background:var(--brand-btn); color:var(--on-brand); box-shadow:0 6px 16px rgba(43,154,163,.32) } .btn.perigo{ background:var(--coral-soft); color:var(--coral-ink) } .btn.fantasma{ background:transparent; color:var(--ink-2) }
  .btn.cheio{ width:100% }
  .nota{ font-size:12px; color:var(--muted) }

  /* ---------- hoje ---------- */
  .linha-tempo{ display:grid; gap:0 }
  .ev{ display:grid; grid-template-columns:52px 14px 1fr; gap:10px; align-items:start; padding:9px 0 }
  .ev time{ font-size:13px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:2px }
  .ev .p{ width:14px; display:grid; justify-items:center } .ev .p:before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--brand); margin-top:6px; box-shadow:0 0 0 3px var(--brand-soft) }
  .ev.fim .p:before{ background:var(--muted); box-shadow:0 0 0 3px var(--surface-2) } .ev.alerta .p:before{ background:var(--sun); box-shadow:0 0 0 3px var(--sun-soft) } .ev.pais .p:before{ background:var(--coral); box-shadow:0 0 0 3px var(--coral-soft) }
  .ev .t{ font-size:14px } .ev .t b{ font-weight:800 } .ev .t small{ display:block; color:var(--muted); font-size:12px }

  /* ---------- vazio / esqueleto ---------- */
  .vazio{ display:grid; justify-items:center; gap:8px; padding:26px 14px; text-align:center; color:var(--ink-2) } .vazio .ico{ font-size:38px } .vazio b{ font-family:var(--fonte-titulo); font-weight:600; letter-spacing:-.02em; font-size:17px; color:var(--ink) } .vazio p{ font-size:14px }
  .esq{ background:linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:esq 1.2s infinite; border-radius:12px; height:14px }
  @keyframes esq{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

  /* ---------- navegação ---------- */
  nav{ position:fixed; left:0; right:0; bottom:0; z-index:6; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); padding:8px 12px calc(env(safe-area-inset-bottom) + 8px); display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:560px; margin:0 auto }
  nav button{ display:grid; justify-items:center; gap:3px; padding:6px 4px; border-radius:16px; font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.03em }
  nav button i{ font-style:normal; font-size:20px; line-height:1 } nav button.on{ color:var(--brand-ink); background:var(--brand-soft) }

  /* ---------- folha (bottom sheet) ---------- */
  dialog.folha{ border:0; padding:0; background:transparent; max-width:none; width:100%; margin:auto 0 0; position:fixed; inset:auto 0 0; max-height:92dvh }
  dialog.folha::backdrop{ background:rgba(20,33,58,.55); backdrop-filter:blur(2px) }
  dialog.folha .caixa{ background:var(--surface); border-radius:26px 26px 0 0; padding:8px 20px calc(env(safe-area-inset-bottom) + 20px); max-width:560px; margin:0 auto; box-shadow:var(--shadow-lg); animation:sobe .28s cubic-bezier(.2,.9,.3,1.1); max-height:92dvh; overflow:auto }
  @keyframes sobe{ from{ transform:translateY(30px); opacity:.6 } to{ transform:none; opacity:1 } }
  .puxador{ width:40px; height:5px; border-radius:3px; background:var(--line-2); margin:6px auto 14px }
  form{ display:grid; gap:14px }
  .campo{ display:grid; gap:6px } .campo label{ font-size:13px; font-weight:800; color:var(--ink-2) }
  .campo input,.campo select{ font:inherit; font-weight:600; min-height:var(--tap); padding:0 16px; border:1.5px solid var(--line); border-radius:16px; background:var(--surface-2); color:var(--ink); width:100%; outline:0; transition:border-color .15s, background .15s }
  .campo input:focus{ border-color:var(--brand); background:var(--surface) } .campo input[readonly]{ color:var(--muted) }
  .campo .dica{ font-size:12px; color:var(--muted) }
  .dois{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .segmento{ display:grid; grid-template-columns:1fr 1fr; background:var(--surface-2); border-radius:999px; padding:4px; gap:4px } .segmento.tres{ grid-template-columns:1fr 1fr 1fr }
  .segmento.quatro{ grid-template-columns:repeat(4,1fr) } .segmento.quatro button{ font-size:13px; padding:8px 4px }
  .opcoes{ display:grid; gap:8px }
  #porta{ border:0; border-radius:22px; padding:26px 22px; max-width:340px; width:calc(100% - 40px); background:var(--surface); color:var(--ink); box-shadow:var(--shadow) }
  #porta::backdrop{ background:rgba(20,33,58,.72); backdrop-filter:blur(3px) }
  #porta h3{ font-family:var(--fonte-titulo); font-size:21px; text-align:center; margin:0 0 4px } #porta .nota{ text-align:center; margin:0 0 16px }
  .chips{ display:flex; gap:8px; flex-wrap:wrap } .chips button{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:var(--surface-2); font-weight:800; font-size:14px; border:1.5px solid transparent }
  .chips button.on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink) } .chips button .f{ font-size:18px }
  .onde{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px } .onde .rotulo{ font-weight:800; font-size:14px; opacity:.75 }
  .onde .seg{ display:flex; background:var(--surface-2); border-radius:999px; padding:3px } .onde .seg button{ padding:8px 14px; border-radius:999px; font-weight:800; font-size:13px; background:transparent } .onde .seg button.on{ background:var(--brand-btn); color:var(--on-brand) } .onde .seg button.apagado{ opacity:.45 }
  .opcao{ display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; text-align:left; padding:10px 12px; border:1.5px solid var(--line); border-radius:16px; background:var(--surface) }
  .opcao.on{ border-color:var(--brand); background:var(--brand-soft) } .opcao .e{ font-size:24px; text-align:center } .opcao b{ display:block; font-family:var(--fonte-titulo); font-weight:600; letter-spacing:-.02em; font-size:16px } .opcao small{ color:var(--ink-2); font-size:12.5px; display:block; line-height:1.3 }
  .opcao .n{ font-size:11px; color:var(--muted); font-weight:700 }
  .opcao.fora{ opacity:.62 } .opcao[tabindex]{ cursor:pointer }
  .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px } .tag{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2) }
  .tag.ver{ background:var(--brand-soft); color:var(--brand-ink); border:0; font:inherit; font-size:11px; font-weight:800; padding:3px 9px; min-height:0 }
  .series-lista{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px } .series-lista[hidden]{ display:none } .series-lista span{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink) }
  .tipos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px } .tipos button{ display:grid; gap:3px; justify-items:center; text-align:center; padding:12px 6px 10px; border:1.5px solid var(--line); border-radius:16px; background:var(--surface); min-height:0 }
  .tipos button .e{ font-size:26px; line-height:1.1 } .tipos button b{ font-family:var(--fonte-titulo); font-weight:600; font-size:15px; letter-spacing:-.02em; color:var(--ink) } .tipos button small{ font-size:11px; color:var(--muted); line-height:1.25; font-weight:700 }
  .tipos button.on{ border-color:var(--brand); background:var(--brand-soft) } .tipos button.on b{ color:var(--brand-ink) }
  .segmento button{ min-height:40px; border-radius:999px; font-weight:800; color:var(--muted) } .segmento button.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(27,36,64,.14) }
  .passos{ display:flex; gap:6px } .passos button{ flex:1; min-height:40px; border-radius:999px; background:var(--surface-2); font-weight:800; color:var(--ink-2) } .passos button.on{ background:var(--brand-btn); color:var(--on-brand) }
  .rodape{ display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:4px }
  .cores{ display:flex; gap:8px; flex-wrap:wrap } .cores button{ width:34px; height:34px; border-radius:50%; border:3px solid transparent } .cores button.on{ border-color:var(--ink) }

  #toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 84px); transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--surface); padding:11px 18px; border-radius:999px; font-size:14px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9; max-width:90vw; text-align:center }
  #toast.on{ opacity:1; transform:translateX(-50%) }