/* Mafê Planner: estilos do protótipo aprovado (iguais) + fontes servidas pelo app + ajustes do PWA no fim. */
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/young-serif-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/figtree-400-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-600.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-700.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/figtree-800.woff2) format("woff2")}

/* Layout: soft UI em camadas (base, elevada, afundada, pressionada) — uma coluna central, barra de navegação flutuante embaixo */
:root{
  --bg:#E7DCE6; --surface:#E9DFE8; --well:#DFD2DE; --hi:#F8F2F7; --lo:rgba(75,46,82,.24);
  --ink:#2E1B33; --muted:#66506B; --faint:#8F7B93; --line:#D6C7D5;
  --accent:#4B2E52; --accent-2:#A78CAB; --on-accent:#FFFFFF; --accent-soft:#D9C8DA;
  --apricot:#F6C3A7; --apricot-ink:#9A4F2B; --lily:#F3E9F2;
  --ok:#2F7D5E; --warn:#9A5E12; --bad:#A63D61; --bad-soft:#F3D9E2;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r1:8px; --r2:12px; --r3:16px; --r4:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#21162A; --surface:#271B30; --well:#1B1121; --hi:rgba(255,235,255,.05); --lo:rgba(0,0,0,.55);
  --ink:#F4ECF4; --muted:#BFAAC3; --faint:#8E7894; --line:#3A2B42;
  --accent:#CDB1D1; --accent-2:#A78CAB; --on-accent:#2A1630; --accent-soft:#3E2C47;
  --apricot:#F6C3A7; --apricot-ink:#F6C3A7; --lily:#3A2A42;
  --ok:#76D0A9; --warn:#E9BC6A; --bad:#EE93B3; --bad-soft:#40222F;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#21162A; --surface:#271B30; --well:#1B1121; --hi:rgba(255,235,255,.05); --lo:rgba(0,0,0,.55);
  --ink:#F4ECF4; --muted:#BFAAC3; --faint:#8E7894; --line:#3A2B42;
  --accent:#CDB1D1; --accent-2:#A78CAB; --on-accent:#2A1630; --accent-soft:#3E2C47;
  --apricot:#F6C3A7; --apricot-ink:#F6C3A7; --lily:#3A2A42;
  --ok:#76D0A9; --warn:#E9BC6A; --bad:#EE93B3; --bad-soft:#40222F;
  color-scheme:dark}
/* temas escolhidos nos Ajustes (vêm depois, vencem o sistema) */
:root[data-skin="lilas"]{
  --bg:#E7DCE6; --surface:#E9DFE8; --well:#DFD2DE; --hi:#F8F2F7; --lo:rgba(75,46,82,.24);
  --ink:#2E1B33; --muted:#66506B; --faint:#8F7B93; --line:#D6C7D5;
  --accent:#4B2E52; --accent-2:#A78CAB; --on-accent:#FFFFFF; --accent-soft:#D9C8DA;
  --apricot:#F6C3A7; --apricot-ink:#9A4F2B; --lily:#F3E9F2;
  --ok:#2F7D5E; --warn:#9A5E12; --bad:#A63D61; --bad-soft:#F3D9E2;
  color-scheme:light}
:root[data-skin="branco"]{
  --bg:#FAF7FA; --surface:#FBF8FB; --well:#F1EAF1; --hi:#FFFFFF; --lo:rgba(75,46,82,.14);
  --ink:#2A1A2F; --muted:#665269; --faint:#958399; --line:#EADFEA;
  --accent:#4B2E52; --accent-2:#A78CAB; --on-accent:#FFFFFF; --accent-soft:#EFE5EF;
  --apricot:#F6C3A7; --apricot-ink:#9A4F2B; --lily:#FFFFFF;
  --ok:#2F7D5E; --warn:#9A5E12; --bad:#A63D61; --bad-soft:#F7E0E8;
  color-scheme:light}
:root[data-skin="escuro"]{
  --bg:#21162A; --surface:#271B30; --well:#1B1121; --hi:rgba(255,235,255,.05); --lo:rgba(0,0,0,.55);
  --ink:#F4ECF4; --muted:#BFAAC3; --faint:#8E7894; --line:#3A2B42;
  --accent:#CDB1D1; --accent-2:#A78CAB; --on-accent:#2A1630; --accent-soft:#3E2C47;
  --apricot:#F6C3A7; --apricot-ink:#F6C3A7; --lily:#3A2A42;
  --ok:#76D0A9; --warn:#E9BC6A; --bad:#EE93B3; --bad-soft:#40222F;
  color-scheme:dark}
:root{
  --raised:6px 6px 14px var(--lo),-6px -6px 14px var(--hi);
  --raised-sm:3px 3px 8px var(--lo),-3px -3px 8px var(--hi);
  --float:12px 12px 30px var(--lo),-10px -10px 24px var(--hi);
  --inset:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi);
  --pressed:inset 4px 4px 10px var(--lo),inset -4px -4px 10px var(--hi);
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tab{font-variant-numeric:tabular-nums}

/* shell */
.main{min-height:100%;padding-block:24px calc(130px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;width:min(620px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));display:flex;justify-content:space-between;gap:4px;padding:8px;border-radius:26px;background:var(--surface);box-shadow:var(--float)}
.dock button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:18px;color:var(--muted);font-size:11.5px;font-weight:600;min-height:52px;justify-content:center;transition:box-shadow .2s,color .2s}
.dock button:hover{color:var(--ink)}
.dock button[aria-current="page"]{color:var(--accent)}
.dock button{position:relative;z-index:1}
.dock-ind{position:absolute;z-index:0;top:8px;left:0;height:calc(100% - 16px);border-radius:18px;box-shadow:var(--pressed);background:var(--surface);transition:transform .5s cubic-bezier(.34,1.45,.5,1),width .5s cubic-bezier(.34,1.45,.5,1);pointer-events:none}
.dock button[aria-current="page"] svg{animation:pop .45s cubic-bezier(.34,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.7) translateY(3px)}60%{transform:scale(1.15) translateY(-2px)}100%{transform:none}}
.enter>*{animation:rise .5s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.chk.on svg{animation:pop .35s cubic-bezier(.34,1.6,.5,1)}
.veil{animation:fade .25s ease both}
.sheet{animation:sheetIn .38s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes fade{from{opacity:0}}
@keyframes sheetIn{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}}
@media (max-width:620px){@keyframes sheetIn{from{opacity:.4;transform:translate(-50%,100%)}}}
.editor{animation:edIn .42s cubic-bezier(.2,.9,.25,1) both}
@keyframes edIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
.nc,.btn,.ib,.dc,.cd,.subj button{transition:box-shadow .2s,transform .2s}
.nc:hover{transform:translateY(-2px)}
.ring2{position:relative;width:min(290px,74vw);aspect-ratio:1/1;max-width:100%;border-radius:50%;background:var(--surface);box-shadow:var(--raised)}
.ring2 svg{position:absolute;inset:0;width:100%;height:100%}
.ring2 .lbl{position:absolute;inset:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;cursor:pointer;padding-bottom:18%}
.ring2 .lbl b{font-family:var(--serif);font-weight:400;font-size:clamp(40px,10vw,54px);line-height:1;color:var(--ink)}
.pdots{display:flex;gap:8px;justify-content:center}
.pdots i{width:8px;height:8px;border-radius:50%;background:var(--well);box-shadow:var(--inset)}
.pdots i.done{background:var(--accent-2);box-shadow:none}
.pdots i.cur{background:var(--accent);box-shadow:none;width:22px;border-radius:8px}
.scape{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;pointer-events:none}
.count .stems{position:absolute;right:10px;bottom:0;width:120px;height:150px;pointer-events:none}
.stems .flor{position:absolute;inset:0}
.stems .flor svg{position:absolute;inset:0;width:100%;height:100%}
.stems .cab{position:absolute}
.stems .f1{transform-origin:70px 150px;animation:vento 4.6s ease-in-out infinite alternate}
.stems .f2{transform-origin:76px 150px;animation:vento2 3.8s ease-in-out infinite alternate}
.stems .cab .lily{animation:balanca 2.6s ease-in-out infinite alternate}
.stems .f2 .cab .lily{animation-duration:2.1s;animation-delay:-.8s}
@keyframes vento{0%{transform:rotate(-2.5deg)}55%{transform:rotate(3.5deg)}100%{transform:rotate(1deg)}}
@keyframes vento2{0%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}100%{transform:rotate(1.5deg)}}
@keyframes balanca{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
.scape .w1{animation:onda 9s ease-in-out infinite alternate}
.scape .w2{animation:onda 7s ease-in-out infinite alternate-reverse}
.scape .w3{animation:onda 5.5s ease-in-out infinite alternate}
.scape .lua{animation:lua 6s ease-in-out infinite alternate}
@keyframes onda{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes lua{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.lily{display:block;flex:none}
.count .lily{filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.mark .lily{width:46px;height:46px}
.head-lily{display:inline-flex;align-items:center;gap:8px}
.bloom{position:fixed;left:50%;top:42%;z-index:95;pointer-events:none;animation:bloom 1.6s cubic-bezier(.2,.9,.3,1) both}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-60deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(0)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.9)}}
.login .lily-bg{position:absolute;right:-30px;top:-30px;opacity:.9}
.login .box{position:relative;overflow:hidden}
.sobre-lily{display:flex;gap:14px;align-items:center}
.mi{width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.mi svg{width:17px;height:17px}
.mi.lg{width:44px;height:44px;border-radius:14px}
.mi.lg svg{width:22px;height:22px}
.mi.xs{width:20px;height:20px;border-radius:6px}
.mi.xs svg{width:13px;height:13px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;max-height:260px;overflow:auto;padding:6px;border-radius:16px;background:var(--well);box-shadow:var(--inset)}
.igrid button{aspect-ratio:1/1;border-radius:12px;display:grid;place-items:center;color:var(--muted);background:var(--surface);box-shadow:var(--raised-sm)}
.igrid button[aria-pressed="true"]{color:var(--on-accent);background:var(--c,var(--accent));box-shadow:var(--pressed)}
.sw{display:flex;flex-wrap:wrap;gap:10px}
.sw button{width:34px;height:34px;border-radius:12px;box-shadow:var(--raised-sm)}
.sw button[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
.matrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:16px;background:var(--surface);box-shadow:var(--raised-sm);text-align:left;width:100%}
.matrow b{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.ring .lbl{cursor:pointer;border-radius:50%}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{padding:8px 14px;border-radius:99px;font-weight:700;background:var(--surface);box-shadow:var(--raised-sm);min-height:40px}
.presets button[aria-pressed="true"]{box-shadow:var(--pressed);color:var(--accent)}
.bigmin{display:flex;align-items:center;justify-content:center;gap:14px}
.bigmin input{width:140px;text-align:center;font-family:var(--serif);font-size:54px;border:0;border-radius:20px;background:var(--well);box-shadow:var(--inset);padding:6px;outline:none;-moz-appearance:textfield}
.bigmin input::-webkit-outer-spin-button,.bigmin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dock button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:420px){.dock button{font-size:10.5px}.dock svg.i{width:21px;height:21px}}

/* tipografia e blocos */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,40px);line-height:1.08;margin:4px 0 0;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:15px;margin:0;font-weight:700;letter-spacing:.02em}
.muted{color:var(--muted)}
.card{background:var(--surface);border-radius:var(--r4);padding:18px;box-shadow:var(--raised)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.well{background:var(--well);border-radius:var(--r3);box-shadow:var(--inset)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:700;min-height:44px;box-shadow:var(--raised-sm);transition:box-shadow .15s,transform .15s}
.btn:active{box-shadow:var(--pressed);transform:translateY(1px)}
.btn.soft{background:var(--surface);color:var(--accent)}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none}
.btn.danger{background:var(--bad);color:#fff}
.btn.sm{min-height:36px;padding:6px 14px;font-size:14px}
.ib{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--muted);background:var(--surface);box-shadow:var(--raised-sm);flex:none}
.ib:active,.ib[aria-pressed="true"]{box-shadow:var(--pressed);color:var(--accent)}
.ib.flat{box-shadow:none;background:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.inp{width:100%;border:0;background:var(--well);border-radius:var(--r2);padding:11px 14px;min-height:46px;outline:none;box-shadow:var(--inset)}
.inp:focus{box-shadow:var(--inset),0 0 0 2px var(--accent)}
.row{display:flex;align-items:center;gap:10px}
.wrapr{flex-wrap:wrap}
.empty{color:var(--faint);padding:10px 2px}
.tag-ex{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.chk{width:24px;height:24px;border-radius:8px;background:var(--well);box-shadow:var(--inset);display:grid;place-items:center;flex:none;color:transparent;transition:.15s}
.chk svg{width:14px;height:14px;stroke-width:3}
.on>.chk,.chk.on{background:var(--accent);color:var(--on-accent);box-shadow:var(--raised-sm)}

/* hoje */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px}
@media (max-width:820px){.hero{grid-template-columns:1fr}}
.count{background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--on-accent);border-radius:var(--r4);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;position:relative;overflow:hidden;min-height:180px;box-shadow:var(--raised)}
.count .big{font-family:var(--serif);font-size:64px;line-height:.9}
.count small{opacity:.9}
.count .sprig{position:absolute;right:-6px;bottom:-10px;width:120px;opacity:.25}
.count button{position:relative;color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:14px;align-self:flex-start;font-weight:600}
.task{display:flex;align-items:center;gap:12px;padding:10px 6px}
.task+.task{border-top:1px solid var(--line)}
.task .t{flex:1;min-width:0}
.task.on .t{text-decoration:line-through;color:var(--faint)}
.bars{display:flex;flex-direction:column;gap:12px}
.streak{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 12px 5px 8px;border-radius:99px}
.streak.off{color:var(--apricot-ink);background:color-mix(in srgb,var(--apricot) 30%,transparent)}
.qtot{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.qtot .big{font-family:"Young Serif",serif;font-size:44px;line-height:1;color:var(--accent)}.qtot .big small{font-size:22px}
.dica{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:var(--r2);background:color-mix(in srgb,var(--apricot) 26%,transparent);color:var(--ink);font-size:14px}
.dica svg{flex:none;color:var(--apricot-ink);margin-top:1px}
.recado{display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--lily) 22%,var(--card)))}
.recado .rtxt{font-family:"Young Serif",serif;font-size:21px;line-height:1.4;margin:6px 0 0;color:var(--ink)}
.recado .rass{margin:12px 0 0;text-align:right;color:var(--accent);font-weight:700}
.revchk{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--r2);background:var(--well);box-shadow:var(--inset);cursor:pointer;font-size:14.5px}
.revchk input{width:20px;height:20px;accent-color:var(--accent);margin:1px 0 0;flex:none}
.revchk small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
textarea.inp{min-height:90px;resize:vertical;line-height:1.45}
/* simulado */
.simban{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--accent-2) 22%,var(--surface)))}
.simban>div{display:flex;flex-direction:column;gap:4px;min-width:0}.simban .label{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}.simban .label svg{width:15px;height:15px}
.simban b{font-family:var(--serif);font-weight:400;font-size:22px}
.adv{padding:12px 14px;border-radius:var(--r2);background:var(--well);box-shadow:var(--inset)}
.adv summary{cursor:pointer;font-weight:700;color:var(--accent);display:flex;gap:8px;align-items:center;list-style:none;font-size:14.5px}
.adv summary::-webkit-details-marker{display:none}.adv summary svg{width:17px;height:17px}
.adv summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.adv[open] summary::after{transform:rotate(-135deg)}
.adv[open] summary{margin-bottom:10px}
.adv p{margin:0 0 10px;font-size:13.5px}
.fxr{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px 36px;gap:8px;align-items:center;margin-bottom:8px}
.fxr .inp{background:var(--surface);padding:9px 10px;min-height:42px}
.fxh{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px 36px;gap:8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px 4px}
.tempo2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.un{position:relative}.un .inp{padding-right:64px}.un span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13.5px;font-weight:600;color:var(--muted);pointer-events:none}
.simrun .ed-scroll{padding-bottom:60px}
.simbox{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:18px;width:100%}
.simtimer{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.simtimer #simT{font-family:var(--serif);font-weight:400;font-size:clamp(52px,15vw,76px);line-height:1;color:var(--ink)}
.simtimer #simT.pouco{color:var(--bad)}
.simtimer .track{width:100%;max-width:440px;height:8px}
.simmeta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}.simmeta b{color:var(--ink)}
.simdica{margin:0;font-size:13.5px;text-align:center}
.sg+.sg{margin-top:20px}
.sgh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin:0 2px 10px}.sgh span{color:var(--muted);font-weight:600;margin-left:auto;font-size:13px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px}
.q{aspect-ratio:1/1;border-radius:16px;background:var(--surface);box-shadow:var(--raised-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:transform .15s,box-shadow .15s,background .2s;position:relative;-webkit-tap-highlight-color:transparent}
.q b{font-size:18px;font-weight:700;color:var(--ink);line-height:1.1}.q small{font-size:11.5px;color:var(--muted);min-height:14px;font-variant-numeric:tabular-nums}
.q:active{transform:scale(.93)}
.q.on{background:var(--c);box-shadow:0 4px 10px -4px var(--c)}.q.on b,.q.on small{color:#fff}
.q.on.pop{animation:qpop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes qpop{40%{transform:scale(1.12)}}
.q.br{opacity:.5;box-shadow:var(--inset);background:var(--well)}
.q.err{background:var(--bad-soft);box-shadow:inset 0 0 0 2px var(--bad)}.q.err b,.q.err small{color:var(--bad)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--surface);box-shadow:var(--raised-sm);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.stat span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat b{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;color:var(--ink)}.stat small{color:var(--muted);font-size:12.5px}
.sticks{display:flex;align-items:flex-end;gap:3px;height:170px;position:relative;margin-top:6px}
.sticks i{flex:1;min-width:2px;border-radius:5px 5px 2px 2px;background:var(--c);height:var(--h);position:relative;transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--k) * 12ms)}
.sticks i.err{background:repeating-linear-gradient(135deg,var(--c) 0 4px,color-mix(in srgb,var(--c) 45%,transparent) 4px 7px)}
.sticks i.br{background:var(--well);height:4px!important}
@keyframes grow{from{transform:scaleY(0)}}
.sticks .avg{position:absolute;left:0;right:0;border-top:1.5px dashed var(--muted);bottom:var(--a);pointer-events:none}
.sticks .avg em{position:absolute;right:0;top:-20px;font-size:11.5px;font-style:normal;color:var(--muted);background:var(--surface);padding:0 4px;border-radius:6px}
.sticks-x{display:flex;gap:3px;font-size:11px;color:var(--faint);margin-top:6px}.sticks-x span{flex:1;min-width:2px;text-align:center;overflow:visible;white-space:nowrap}
.leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-top:12px}.leg span{display:inline-flex;align-items:center;gap:6px}
.leg i{width:12px;height:12px;border-radius:4px;background:var(--c)}
.leg i.err{background:repeating-linear-gradient(135deg,var(--muted) 0 3px,transparent 3px 5px)}
.mt{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:11px 2px;font-size:14px}
.mt+.mt{border-top:1px solid var(--line)}.mt.h{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-top:0}
.mt>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:520px){.mt{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}.mt .hm{display:none}}
.slow{display:flex;align-items:center;gap:12px;padding:10px 2px;font-size:14.5px}.slow+.slow{border-top:1px solid var(--line)}
.slow .n{width:38px;height:38px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.slow .t{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.tagerr{font-size:11.5px;font-weight:700;color:var(--bad);background:var(--bad-soft);padding:2px 8px;border-radius:99px}
.corr{display:flex;flex-direction:column;gap:14px}
.nc .simtag{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;color:var(--accent)}
.nc.ativo{box-shadow:var(--raised),inset 0 0 0 2px var(--accent-2)}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;font-size:14px}
.bar .track{grid-column:1/-1;height:10px;border-radius:10px;background:var(--well);box-shadow:var(--inset);overflow:hidden}
.bar .fill{height:100%;border-radius:10px}

/* planner: tira de dias + linha do tempo */
.days{display:flex;gap:10px;overflow-x:auto;padding:8px 4px 14px;margin:0 -4px;scrollbar-width:none;scroll-snap-type:x mandatory}
.days::-webkit-scrollbar{display:none}
.dc{flex:0 0 58px;scroll-snap-align:center;height:76px;border-radius:18px;background:var(--surface);box-shadow:var(--raised-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;color:var(--muted);position:relative}
.dc b{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.dc[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:var(--raised)}
.dc[aria-pressed="true"] b{color:var(--on-accent)}
.dc .has{position:absolute;bottom:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.dc[aria-pressed="true"] .has{background:var(--on-accent)}
.dc.today:not([aria-pressed="true"]) b{color:var(--accent)}
.tl{display:flex;flex-direction:column}
.tli{display:grid;grid-template-columns:62px 28px minmax(0,1fr);align-items:stretch;min-height:56px}
.tli .time{font-size:13px;font-weight:700;color:var(--muted);padding-top:16px;text-align:right;line-height:1.2;font-variant-numeric:tabular-nums}
.tli .time small{display:block;font-weight:500;color:var(--faint);font-size:11.5px}
.tli .rail{position:relative;display:flex;justify-content:center}
.tli .rail::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--line)}
.tli:first-child .rail::before{top:22px}
.tli:last-child .rail::before{bottom:calc(100% - 22px)}
.node{position:relative;margin-top:16px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--c,var(--accent));display:grid;place-items:center}
.node.done{background:var(--c,var(--accent));box-shadow:none}
.node.done svg{width:10px;height:10px;stroke:var(--on-accent);stroke-width:3.5}
.node.small{width:12px;height:12px;margin-top:20px;box-shadow:0 0 0 2px var(--line)}
.tli .body{padding:6px 0 10px 8px;min-width:0}
.tc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--raised-sm);min-width:0}
.tc .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--well);box-shadow:var(--inset);color:var(--c,var(--accent))}
.tc .ico svg{width:19px;height:19px}
.tc .tx{flex:1;min-width:0}
.tc .tx b{display:block;font-weight:700;overflow-wrap:anywhere}
.tc .tx small{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font-size:12.5px;margin-top:2px}
.tc .acts2{display:flex;flex-direction:column;gap:6px;align-items:center;flex:none}
.tc .acts2 .ib{width:30px;height:30px}
@media (max-width:520px){.tli,.now{grid-template-columns:48px 24px minmax(0,1fr)}.tli .time{font-size:12px}.tc{padding:10px 12px;gap:10px}.tc .ico{width:34px;height:34px}}
.tc.done .tx b{color:var(--faint);text-decoration:line-through}
.tc.hist{background:transparent;box-shadow:var(--inset)}
.tc.ev{box-shadow:var(--raised-sm),inset 3px 0 0 var(--c)}
.gap{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 10px 8px;padding:9px 14px;border-radius:14px;background:var(--well);box-shadow:var(--inset);font-size:13.5px;color:var(--muted);width:calc(100% - 8px);text-align:left}
.gap b{color:var(--accent);font-weight:700;white-space:nowrap}
.now{display:grid;grid-template-columns:62px 28px minmax(0,1fr);align-items:center;height:22px}
.now .pill{justify-self:end;font-size:11px;font-weight:800;letter-spacing:.04em;background:var(--accent);color:var(--on-accent);padding:3px 7px;border-radius:8px;font-variant-numeric:tabular-nums}
.now .pt{justify-self:center;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.now .ln{height:0;border-top:2px dashed var(--accent);margin-left:8px;opacity:.7}
.fab{position:fixed;right:max(20px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:29;width:58px;height:58px;border-radius:20px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--float)}
.fab svg{width:26px;height:26px;stroke-width:2.4}
@media (min-width:1100px){.fab{right:calc(50% - 470px)}}

/* planner semanal */
.strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.strip .dc{flex:none;width:auto;height:72px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:start}
.day{background:var(--surface);border-radius:20px;padding:12px 10px;display:flex;flex-direction:column;gap:8px;min-height:200px;box-shadow:var(--raised-sm)}
.day.today{box-shadow:var(--raised-sm),0 0 0 2px var(--accent)}
.day-h{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px}
.day-h b{font-family:var(--serif);font-weight:400;font-size:22px}
.day-h span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.pt{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:9px 10px;border-radius:14px;background:var(--well);box-shadow:var(--inset)}
.pt .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.pt .tx small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pt.on .tx{text-decoration:line-through;color:var(--faint)}
.pt .chk{width:20px;height:20px;border-radius:7px;margin-top:1px}
.pt .chk svg{width:12px;height:12px}
.pt .dot{margin-top:6px}
.pt .del{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;color:var(--faint);flex:none}
.pt .del svg{width:15px;height:15px}
.add-mini{font-size:13px;color:var(--muted);text-align:left;padding:8px;border-radius:12px;font-weight:600}
.add-mini:hover{color:var(--accent);box-shadow:var(--pressed)}
@media (max-width:900px){
  .week{grid-template-columns:1fr}
  .week .day{display:none}
  .week .day.sel{display:flex}
  .day .day-h{display:none}
  .pt{font-size:15px;padding:12px}
}
@media (min-width:901px){.strip{display:none}}
.calgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:820px){.calgrid{grid-template-columns:1fr}}

/* calendário */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal .wd{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;text-align:center;padding:4px 0}
.cd{aspect-ratio:1/1;max-width:100%;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:15px;font-weight:600;background:var(--surface);box-shadow:var(--raised-sm)}
.cd.out{opacity:.4;box-shadow:none}
.cd.today{color:var(--accent)}
.cd[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:var(--pressed)}
.cd .dots{display:flex;gap:3px;height:6px}
.cd .dots i{width:6px;height:6px;border-radius:50%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.ev{display:flex;gap:12px;align-items:center;padding:10px 4px}
.ev+.ev{border-top:1px solid var(--line)}
.ev .when{width:56px;flex:none;font-weight:700;font-size:14px}
.ev .bc{width:4px;align-self:stretch;border-radius:4px;flex:none}

/* foco */
.focus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:820px){.focus{grid-template-columns:1fr}}
.timer{display:flex;flex-direction:column;align-items:center;gap:20px;padding:26px 18px}
.ring{position:relative;width:min(270px,70vw);aspect-ratio:1/1;max-width:100%;border-radius:50%;box-shadow:var(--raised);padding:16px;background:var(--surface)}
.ring .in{position:absolute;inset:18px;border-radius:50%;box-shadow:var(--inset);background:var(--well)}
.ring svg{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);transform:rotate(-90deg)}
.ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ring .lbl b{font-family:var(--serif);font-weight:400;font-size:clamp(44px,11vw,60px);line-height:1}
.seg{display:flex;border-radius:16px;padding:5px;gap:5px;background:var(--well);box-shadow:var(--inset);flex-wrap:wrap}
.seg button{padding:8px 14px;border-radius:12px;font-weight:700;font-size:14px;color:var(--muted);min-height:38px;flex:1}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:var(--raised-sm)}
.subj{display:flex;flex-wrap:wrap;gap:8px}
.subj button{font-size:13.5px;padding:7px 12px;border-radius:99px;background:var(--surface);box-shadow:var(--raised-sm);display:inline-flex;align-items:center;gap:7px;min-height:36px;font-weight:600}
.subj button[aria-pressed="true"]{box-shadow:var(--pressed);color:var(--accent)}
.log{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;font-size:14px}
.log+.log{border-top:1px solid var(--line)}

/* notas: grade de páginas */
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.nc{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px;border-radius:var(--r4);background:var(--surface);box-shadow:var(--raised);min-height:150px;transition:box-shadow .15s}
.nc:active{box-shadow:var(--pressed)}
.nc b{font-size:17px;font-weight:700;overflow-wrap:anywhere}
.nc p{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nc small{margin-top:auto;color:var(--faint);font-size:12px;font-weight:600}
.nc.new{align-items:center;justify-content:center;color:var(--accent);font-weight:700;box-shadow:var(--inset);background:var(--well)}

/* editor de nota em tela cheia */
.editor{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.ed-top{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.ed-top .sp{flex:1;min-width:0;font-size:13px;color:var(--faint);text-align:center;font-weight:600}
.ed-scroll{flex:1;overflow:auto;padding:8px max(16px,env(safe-area-inset-right,0px)) 160px max(16px,env(safe-area-inset-left,0px))}
.ed-page{max-width:760px;margin:0 auto;background:var(--surface);border-radius:var(--r4);box-shadow:var(--raised);padding:28px clamp(16px,5vw,48px) 40px;min-height:60vh}
.ttl{font-family:var(--serif);font-size:clamp(28px,5vw,38px);border:0;background:transparent;width:100%;outline:none;padding:0;margin:0 0 14px;line-height:1.15}
.blk{display:flex;gap:6px;align-items:flex-start;padding:2px 0;position:relative}
.blk .handle{opacity:0;width:26px;height:28px;flex:none;border-radius:8px;color:var(--faint);display:grid;place-items:center;margin-left:-30px}
.blk:hover .handle,.blk:focus-within .handle{opacity:1}
@media (max-width:620px){.blk .handle{display:none}}
.blk .handle svg{width:16px;height:16px}
.ce{flex:1;min-width:0;outline:none;padding:4px 2px;min-height:30px;white-space:pre-wrap;word-break:break-word;font-size:17px;line-height:1.55}
.ce:empty::before{content:attr(data-ph);color:var(--faint)}
.ce mark{background:color-mix(in srgb,var(--accent) 22%,transparent);color:inherit;border-radius:4px;padding:0 2px}
.blk.h .ce{font-family:var(--serif);font-size:27px;padding-top:14px;line-height:1.2}
.blk.h2 .ce{font-weight:700;font-size:20px;padding-top:10px;line-height:1.3}
.blk.lei .ce{border-left:3px solid var(--accent);background:var(--well);box-shadow:var(--inset);border-radius:0 12px 12px 0;padding:10px 14px;font-style:italic}
.blk.callout .ce{background:var(--accent-soft);border-radius:14px;padding:12px 14px 12px 44px;position:relative}
.blk.callout .ce::after{content:"!";position:absolute;left:14px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:800 12px/20px var(--sans);text-align:center}
.blk.todo .chk{margin-top:6px;width:22px;height:22px}
.blk.todo.on .ce{text-decoration:line-through;color:var(--faint)}
.blk.li .bul{width:7px;height:7px;border-radius:50%;background:var(--accent);margin:13px 6px 0 8px;flex:none}
.blk.ol .num{width:24px;flex:none;text-align:right;color:var(--accent);font-weight:700;padding-top:5px;font-variant-numeric:tabular-nums}
.blk.div .ce{display:none}
.blk.div .hr{flex:1;height:2px;border-radius:2px;background:var(--line);margin:16px 2px}
.toolbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:55;width:min(760px,calc(100% - 24px));display:flex;gap:4px;padding:8px;border-radius:22px;background:var(--surface);box-shadow:var(--float);overflow-x:auto;scrollbar-width:none}
.toolbar::-webkit-scrollbar{display:none}
.toolbar button{flex:none;min-width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--muted);font-weight:800;font-size:15px;padding:0 10px}
.toolbar button:hover{color:var(--ink)}
.toolbar button[aria-pressed="true"]{box-shadow:var(--pressed);color:var(--accent)}
.toolbar .sep{width:2px;flex:none;margin:8px 4px;border-radius:2px;background:var(--line)}
.toolbar svg.i{width:20px;height:20px}
.slash{position:absolute;left:0;top:36px;z-index:6;background:var(--surface);border-radius:18px;box-shadow:var(--float);padding:8px;display:flex;flex-direction:column;min-width:230px}
.slash .sh{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:800;padding:6px 10px 4px}
.slash button{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;text-align:left;font-size:14px;font-weight:600}
.slash button[aria-selected="true"],.slash button:hover{box-shadow:var(--pressed);color:var(--accent)}
.slash svg{width:18px;height:18px}
.slash small{color:var(--faint);margin-left:auto;font-size:12px}

/* ajustes */
.set{display:flex;flex-direction:column;gap:14px}
.mrow{display:flex;gap:10px;align-items:center}
.swatch{width:44px;height:44px;border-radius:14px;flex:none;box-shadow:var(--raised-sm);display:grid;place-items:center}
.swatch span{width:22px;height:22px;border-radius:8px}

/* folhas e login */
.veil{position:fixed;inset:0;background:rgba(25,12,45,.32);z-index:60;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));background:var(--surface);border-radius:26px;padding:22px;box-shadow:var(--float);display:flex;flex-direction:column;gap:14px;max-height:88vh;overflow:auto}
.sheet h2{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:0}
@media (max-width:620px){.sheet{top:auto;bottom:0;transform:translateX(-50%);width:100%;border-radius:26px 26px 0 0;padding:22px max(18px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}}
.acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.login{position:fixed;inset:0;z-index:80;background:var(--bg);display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));overflow:auto}
.login .box{width:min(400px,100%);display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:30px;background:var(--surface);box-shadow:var(--float)}
.mark{width:64px;height:64px;border-radius:22px;background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--on-accent);display:grid;place-items:center;font-family:var(--serif);font-size:34px;box-shadow:var(--raised)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:90;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:14px;font-weight:700;font-size:14px;transition:opacity .2s;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- PWA ---------- */
/* status bar translúcida no iPhone: o conteúdo começa abaixo do relógio/notch */
.main{padding-top:calc(24px + env(safe-area-inset-top,0px))}
.login{padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
#instalar{z-index:85}
.erro{margin:0;color:var(--bad);font-size:14px;font-weight:600}
.erro:empty{display:none}
.sync{margin:0;font-size:13.5px;color:var(--muted)}
.passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.passos li{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.35}
.passos .pn{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--well);box-shadow:var(--inset);color:var(--accent)}
.btn:disabled{opacity:.6;cursor:default}