/* =====================================================================
   FOCCUS — ficha técnica
   Território   Luxo silencioso + interface iOS, monocromático
   Decisão      "Agora" ocupa a tela: título 900 gigante + numeral 100.
                Zero cor, zero borda, zero sombra. Hierarquia por tom/espaço.
   Fontes       Switzer (Fontshare, 100–900) · Geist Mono (Google)
   Escala       12 14 16 20 32 64 128 · título >= 3x corpo
   Paleta       Papel #F2F1EE · Névoa #E4E2DD · Grafite #6B6862
                Tinta #161513 · Vidro rgba(255,255,255,.62)
   Grid         base 8 · 4 8 12 16 24 32 48 64 96 128
   Raio/Sombra  20 card · 14 item · pílula · sem sombra
   ===================================================================== */
:root{
  --papel:#F2F1EE; --nevoa:#E4E2DD; --grafite:#6B6862; --tinta:#161513;
  --vidro:rgba(255,255,255,.62); --folha:rgba(242,241,238,.92);
  --brilho:rgba(255,255,255,.8); --funda:rgba(22,21,19,.07); --ponto:rgba(22,21,19,.15);
  --suave:color-mix(in srgb,var(--nevoa) 55%,transparent); --linha:rgba(22,21,19,.12); --mapa:#D8D6D1;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-card:20px; --r-item:14px;
  --d:'Switzer','Helvetica Neue',Arial,sans-serif;
  --m:'Geist Mono',ui-monospace,Consolas,monospace;
}
/* auto segue o sistema; light/black forçam */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --papel:#121110; --nevoa:#1F1E1C; --grafite:#9C988F; --tinta:#F1EFEA;
    --vidro:rgba(36,35,33,.66); --folha:rgba(22,21,19,.94);
    --brilho:rgba(255,255,255,.07); --funda:rgba(0,0,0,.45); --ponto:rgba(241,239,234,.13); --linha:rgba(241,239,234,.12); --mapa:#2B2A28;
  }
}
:root[data-theme="black"]{
  --papel:#050505; --nevoa:#151515; --grafite:#8F8B84; --tinta:#F4F2EE;
  --vidro:rgba(22,22,22,.72); --folha:rgba(8,8,8,.96);
  --brilho:rgba(255,255,255,.04); --funda:rgba(0,0,0,.6); --ponto:rgba(244,242,238,.12); --linha:rgba(244,242,238,.12); --mapa:#262625;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;color:var(--tinta);
  font:400 16px/1.6 var(--d);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 55% at 100% -10%,var(--brilho),transparent 70%),
    radial-gradient(80% 45% at -10% 105%,var(--funda),transparent 70%),
    var(--papel);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grafite);margin:0}
svg{display:block;flex:none}

/* ---------- movimento ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.rise{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- layout ---------- */
#main{position:relative;z-index:1}
.wrap{max-width:560px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 160px max(24px,env(safe-area-inset-left))}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}
.h-view{font-size:clamp(48px,14vw,72px);font-weight:900;letter-spacing:-.04em;line-height:.95;margin:0}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:24px 0 32px}
.view-head .mono{margin-top:12px}
.lead{color:var(--grafite);max-width:34ch;margin:16px 0 0}

/* ---------- capa ---------- */
.cover{position:relative;min-height:264px;border-radius:var(--r-card);overflow:hidden;margin-bottom:48px;display:flex;flex-direction:column;justify-content:space-between;padding:16px;
  background:
    repeating-radial-gradient(circle at 88% 130%,transparent 0 22px,var(--ponto) 22px 23px),
    radial-gradient(120% 90% at 0% 0%,var(--brilho),transparent 70%),
    var(--nevoa)}
.cover.img{color:#fff}
.cover.img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.74) 100%);z-index:1}
.cover.img .mono,.cover.img q{text-shadow:0 1px 10px rgba(0,0,0,.4)}
.cover.img .mono{color:rgba(255,255,255,.85)}
.cover > *{position:relative;z-index:2}
.urg{font-family:var(--m);font-size:10px;letter-spacing:.06em;font-style:normal;background:var(--tinta);color:var(--papel);padding:2px 8px;border-radius:999px;flex:none}
.chip.sq{width:44px;height:44px;padding:0;display:grid;place-items:center}
.cover .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);z-index:0}
.cover-top,.cover-bot{display:flex;justify-content:space-between;align-items:center}
.cover-bot .big{font-size:56px;font-weight:100;letter-spacing:-.04em;line-height:1}
.cbtns{display:flex;gap:4px}
.cbtn.sm{width:30px;height:30px;background:var(--vidro);opacity:.9;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.cover.img .cbtn.sm,.mini.img .cbtn.sm{background:rgba(0,0,0,.42);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover){.cbtn.sm:hover{opacity:1}}
.soft{font-size:11px;opacity:.75}
.gname{text-align:left;cursor:pointer}
@media (hover:hover){.gname:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}}
.cover-id{display:flex;flex-direction:column;gap:2px}
.cover-quote{display:block;text-align:left;margin-top:auto;padding-top:24px;max-width:40ch}
.cover-quote q{quotes:"\201C" "\201D";font-size:15px;font-weight:500;letter-spacing:0;line-height:1.35;opacity:.8;text-wrap:balance}
.preset.ico{display:grid;place-items:center;padding:4px 10px}
.breath{position:relative;width:240px;height:240px;margin:8px auto;display:grid;place-items:center}
.bring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--grafite);opacity:.5}
.bdot{position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--tinta) 14%,transparent);transform:scale(.55);animation:breathe 12s infinite}
.breath.still .bdot{animation-play-state:paused}
#b-word{position:relative;font-size:28px;font-weight:500;letter-spacing:-.02em}
@keyframes breathe{
  0%{transform:scale(.55);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  33.3%{transform:scale(1)}
  50%{transform:scale(1);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  100%{transform:scale(.55)}}
.fit-t{margin:0;font-weight:600;font-size:20px;line-height:1.3}
.sono{padding:8px 24px;border-radius:var(--r-card);background:var(--suave);margin-bottom:32px}
.srow{display:flex;align-items:center;gap:16px;padding:12px 0}
.srow .si{color:var(--grafite)}
.srow b{width:72px;text-align:right;font-size:24px;font-weight:100;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:3px;border-radius:2px;background:color-mix(in srgb,var(--grafite) 35%,transparent);outline:none;margin:0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--tinta);border:0;cursor:pointer}
.range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--tinta);border:0;cursor:pointer}
.range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--tinta);outline-offset:3px}
.plus{width:52px;height:52px;border-radius:50%;background:var(--tinta);color:var(--papel);display:grid;place-items:center;flex:none;transition:transform .2s var(--ease)}
.plus:active{transform:scale(.92)}
@media (hover:hover){.plus:hover{transform:scale(1.06)}}
.cbtn{width:36px;height:36px;border-radius:50%;background:var(--vidro);color:var(--tinta);display:grid;place-items:center;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .2s var(--ease)}
.cbtn:active{transform:scale(.9)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.chiprow .inbox-chip{margin:0}

/* ---------- rotinas (estilo ajustes do iOS) ---------- */
.group{display:flex;flex-direction:column;gap:2px;border-radius:var(--r-card);overflow:hidden;margin-bottom:32px}
.rrow{display:flex;align-items:center;gap:16px;padding:16px;background:var(--suave);transition:background .2s var(--ease),opacity .2s var(--ease)}
.rrow.off .rmain{opacity:.45}
.rmain{flex:1;min-width:0;display:flex;flex-direction:column}
.rmain b{font-weight:600;line-height:1.35}
.rmain .mono{font-size:11px}
@media (hover:hover){.rrow:hover{background:var(--nevoa)}}
.tog{width:51px;height:31px;border-radius:16px;background:var(--nevoa);position:relative;flex:none;transition:background .25s var(--ease)}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:var(--grafite);transition:transform .3s var(--ease),background .25s var(--ease)}
.tog.on{background:var(--tinta)}
.tog.on::after{transform:translateX(20px);background:var(--papel)}
.glabel{margin:0 0 8px 4px}

/* ---------- AGORA ---------- */
.agora{margin-bottom:32px}
.hl{padding-top:24px;border-top:1px solid var(--linha)}
.tag{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--tinta);animation:pulse 2s var(--ease) infinite}
.agora-t{font-size:clamp(44px,13vw,88px);font-weight:900;letter-spacing:-.04em;line-height:.95;margin:0 0 16px;
  word-break:break-word;hyphens:auto;cursor:pointer;text-wrap:balance}
.agora-t.md{font-size:clamp(36px,10vw,64px)}
.agora-t.sm{font-size:clamp(28px,8vw,48px);line-height:1}
.meta{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--linha)}
.timer{font-size:clamp(72px,24vw,144px);font-weight:100;letter-spacing:-.05em;line-height:1;
  color:var(--grafite);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.timer.run{color:var(--tinta)}
.phase{display:flex;align-items:center;gap:12px;margin:8px 0 24px}
.dots{display:flex;gap:8px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--nevoa);transition:background .3s var(--ease)}
.dots i.on{background:var(--tinta)}
.preset{padding:4px 12px;border-radius:999px;background:var(--nevoa);color:var(--grafite);font-family:var(--m);font-size:12px}
.acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;
  background:var(--nevoa);color:var(--tinta);font-weight:600;
  transition:transform .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease)}
.btn.pri{background:var(--tinta);color:var(--papel)}
.btn.ghost{background:transparent;color:var(--grafite);padding:0 16px}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4;cursor:not-allowed}
@media (hover:hover){.btn:hover{background:color-mix(in srgb,var(--nevoa) 80%,var(--tinta))}.btn.pri:hover{background:color-mix(in srgb,var(--tinta) 88%,var(--papel))}.btn.ghost:hover{color:var(--tinta);background:var(--suave)}}

/* ---------- listas / tarefas ---------- */
.sec-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}
.list{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}
.task{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:var(--r-item);background:var(--suave);
  transition:background .2s var(--ease),opacity .2s var(--ease)}
.task .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.task .tt b{font-weight:600;font-size:16px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task .tt .mono{font-size:11px}
.task.done{opacity:.45}.task.done .tt b{text-decoration:line-through}
.task[draggable=true]{cursor:grab}
.col .task,#sheet .task{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.col .task *,#sheet .task *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.task.ov-swap{outline:1.5px solid var(--tinta);outline-offset:-1.5px}
.task.ov-before{box-shadow:0 -3px 0 0 var(--tinta)}
.task.ov-after{box-shadow:0 3px 0 0 var(--tinta)}
.drag-ghost{position:fixed;z-index:400;pointer-events:none;opacity:1;background:var(--nevoa);outline:1.5px solid var(--tinta);margin:0;transform:scale(1.03)}
.pri-dot{width:8px;height:8px;border-radius:50%;background:var(--tinta);flex:none}
@media (hover:hover){.task:hover{background:var(--nevoa)}}
.ck{width:28px;height:28px;border-radius:50%;background:var(--nevoa);color:transparent;display:grid;place-items:center;flex:none;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.ck:active{transform:scale(.9)}
.task.done .ck{background:var(--tinta);color:var(--papel)}
.ck svg{width:16px;height:16px}
.fsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-radius:var(--r-card);overflow:hidden;margin:0 0 32px}
.fsum>div{background:var(--suave);padding:16px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.fsum b{font-weight:600;font-size:15px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fval{font-weight:600;white-space:nowrap;font-size:13px}
.fval.out{color:var(--grafite)}
.fsave{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-card);background:var(--suave);margin:0 0 24px}
.fs-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fs-main{display:flex;flex-direction:column;gap:4px;text-align:left;min-width:0}
.fs-main b{font-size:clamp(20px,6vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.fs-main b em{display:block;font-style:normal;font-weight:400;color:var(--grafite);font-size:.55em;letter-spacing:0}
.fsave .prog{height:6px;border-radius:3px;margin-top:0}
.fsum{margin-bottom:24px}
.mnav{display:flex;align-items:center;justify-content:center;gap:16px;margin:-8px 0 24px}
.mnav .mono{margin:0;min-width:120px;text-align:center}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:88px;gap:8px;margin:0 0 32px}
.mcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px;border-radius:var(--r-card);background:var(--suave);text-align:left;min-width:0;overflow:hidden;transition:background .2s var(--ease)}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard.has::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 65%)}
.mcard b{position:relative;z-index:1;font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.mcard.has b{color:#fff}
.mcard.m1{grid-column:1/-1;grid-row:span 2;background:var(--tinta);color:var(--papel)}
.mcard.m1 b{font-size:clamp(20px,5.5vw,30px);letter-spacing:-.03em;line-height:1.05}
.mcard.m2{grid-row:span 2}
.mcard.ph{align-items:center;justify-content:center;color:var(--grafite);opacity:.55}
.mcard.m1.ph{background:var(--suave);color:var(--grafite)}
@media (hover:hover){.mcard:not(.m1):hover{background:var(--nevoa)}}
.prog{height:4px;border-radius:2px;background:var(--nevoa);overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;background:var(--tinta);transition:width .4s var(--ease)}
.more{display:flex;align-items:center;gap:8px;color:var(--grafite);font-family:var(--m);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:8px 0;margin-bottom:16px}
.inbox-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--nevoa);font-family:var(--m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:32px}
.empty{padding:32px 0;color:var(--grafite)}

/* ---------- semana ---------- */
.wrap.wide{max-width:1280px}
.board{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 16px;scrollbar-width:none}
.board::-webkit-scrollbar{display:none}
.col{flex:0 0 82%;scroll-snap-align:center;background:var(--suave);border-radius:var(--r-card);padding:16px;min-height:320px;display:flex;flex-direction:column;gap:8px;transition:background .2s var(--ease)}
.col.over{background:var(--nevoa)}
.col header{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.col header b{font-size:48px;font-weight:100;letter-spacing:-.04em;line-height:1}
.col.today header b{font-weight:900;background:var(--tinta);color:var(--papel);border-radius:999px;padding:0 16px;font-size:32px;line-height:48px}
.col header em{margin-left:auto;font-style:normal;font-family:var(--m);font-size:11px;color:var(--grafite);text-transform:uppercase;letter-spacing:.06em}
.col .task{background:var(--papel)}
.add{display:flex;align-items:center;gap:8px;color:var(--grafite);padding:12px;border-radius:var(--r-item);margin-top:auto;font-size:14px;transition:background .2s var(--ease),color .2s var(--ease)}
@media (hover:hover){.add:hover{color:var(--tinta);background:var(--nevoa)}}
.nav{display:flex;gap:8px}
.view-head.cal{align-items:center}
.view-head .calseg{margin:0}
.round{width:44px;height:44px;border-radius:50%;background:var(--nevoa);display:grid;place-items:center;transition:transform .2s var(--ease),background .2s var(--ease)}
.round:active{transform:scale(.92)}

/* ---------- mês ---------- */
.dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cell{aspect-ratio:1/1.05;border-radius:var(--r-item);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--suave);font-size:20px;font-weight:400;transition:background .2s var(--ease),transform .2s var(--ease)}
.cell.blank{background:transparent;pointer-events:none}
.cell:active{transform:scale(.94)}
@media (hover:hover){.cell:not(.blank):hover{background:var(--nevoa)}}
.cell.today{background:var(--tinta);color:var(--papel);font-weight:900}
.cell .dts{display:flex;gap:3px;height:6px}
.cell .dts i{width:5px;height:5px;border-radius:50%;background:currentColor}
.cell .dts i.off{opacity:.3}

/* ---------- ideias ---------- */
.tools{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.calseg{margin:24px 0 0}
.calseg + .view-head{margin-top:24px}
.search{flex:1;min-width:160px}
.field{width:100%;background:var(--nevoa);border:0;border-radius:var(--r-item);padding:14px 16px;outline:none;transition:box-shadow .2s var(--ease)}
.field:focus-visible{outline:2px solid var(--tinta);outline-offset:0}
.field.big{font-size:20px;font-weight:600;letter-spacing:-.01em}
textarea.field{resize:vertical;min-height:96px;line-height:1.6}
.seg{display:inline-flex;background:var(--nevoa);border-radius:999px;padding:4px}
.seg button{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--grafite);transition:background .2s var(--ease),color .2s var(--ease)}
.seg button.on{background:var(--tinta);color:var(--papel)}
.map{position:relative;height:calc(100dvh - 360px);min-height:380px;overflow:hidden;border-radius:var(--r-card);touch-action:none;cursor:grab;user-select:none;
  background:radial-gradient(circle,var(--ponto) 1px,transparent 1.3px) var(--bx,0) var(--by,0)/var(--bs,24px) var(--bs,24px),var(--mapa)}
.map.panning{cursor:grabbing}
.canvas{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.canvas svg.lines{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.mapui{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:5}
.lines line{stroke:var(--grafite);stroke-width:1;opacity:.55}
.node{position:absolute;width:176px;padding:16px;border-radius:var(--r-card);background:var(--papel);touch-action:none;user-select:none;cursor:grab;
  transition:opacity .2s var(--ease),transform .2s var(--ease),left .35s var(--ease),top .35s var(--ease)}
#map.dragging .node{transition:none}
.node.drag{cursor:grabbing;transform:scale(1.03);transition:none}
.node b{display:block;font-weight:900;font-size:18px;line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.node p{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--grafite);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.node .mono{font-size:10px}
.dim{opacity:.22}
.irow{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r-card);background:var(--suave);transition:background .2s var(--ease)}
.irow b{font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.irow span.s{color:var(--grafite);font-size:14px}
@media (hover:hover){.irow:hover{background:var(--nevoa)}}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:4px;padding:8px;border-radius:999px;background:var(--vidro);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5)}
.tab{display:flex;flex-direction:column;align-items:center;gap:0;width:clamp(44px,calc((100vw - 132px) / 6),56px);padding:6px 0;border-radius:999px;color:var(--grafite);font-size:9px;font-weight:600;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease)}
.tab.on{color:var(--tinta);background:var(--nevoa)}
.tab span{margin-top:2px}
.fab{width:56px;height:56px;border-radius:50%;background:var(--tinta);color:var(--papel);display:grid;place-items:center;margin:0 4px;
  transition:transform .2s var(--ease)}
.fab:active{transform:scale(.9)}
@media (hover:hover){.tab:hover{color:var(--tinta)}.fab:hover{transform:scale(1.06)}}

/* ---------- mini player ---------- */
#mini{position:fixed;z-index:29;left:16px;right:16px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 88px)}
.mini{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ring side";gap:16px;align-items:center;padding:24px;border-radius:24px;text-align:left;
  background:
    repeating-radial-gradient(circle at 90% 140%,transparent 0 22px,var(--ponto) 22px 23px),
    radial-gradient(120% 100% at 0% 0%,var(--brilho),transparent 70%),
    var(--nevoa);animation:up .4s var(--ease) both}
.mini.img{color:#fff}
.mini.img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(0,0,0,.68),rgba(0,0,0,.42))}
.mini.img .mono{color:rgba(255,255,255,.85)}
.mini>*{position:relative;z-index:2}
.mini .mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.05);z-index:0}
.mini .mx{position:absolute;top:10px;right:10px;z-index:3}
.mring{grid-area:ring;position:relative;flex:none;aspect-ratio:1;width:128px;height:128px;display:grid;place-items:center}
.mring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mring circle{fill:none;stroke-width:9}
.mring .bg{stroke:currentColor;opacity:.22}
.mring .fg{stroke:currentColor;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:276.46}
.mtime{position:relative;font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;opacity:.65;transition:opacity .3s var(--ease)}
.mini.run .mtime{opacity:1}
.mside{grid-area:side;align-self:stretch;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:14px}
.minfo{display:flex;flex-direction:column;gap:8px;text-align:left;min-width:0}
.minfo b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-weight:900;font-size:20px;line-height:1.05;letter-spacing:-.03em}
.minfo .mono{font-size:11px}
.mbtns{display:flex;gap:8px;flex:none}
.mbtn{flex:none;aspect-ratio:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--vidro);color:var(--tinta);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.mbtn.on{background:var(--tinta);color:var(--papel)}
.mbtn:active{transform:scale(.9)}
@media (hover:hover){.mbtn:hover{transform:scale(1.06)}}

.pipbody{margin:0;padding:0;overflow:hidden;background:var(--papel)}
.pipbody::before{display:none}
.pipbody #mini{position:absolute;left:0;top:0;width:340px;display:block;transform-origin:0 0}

/* ---------- sheet (folha iOS) ---------- */
#sheet{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100dvh);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:rgba(22,21,19,.34);animation:fade .3s var(--ease) both}
.panel{position:relative;width:100%;max-width:560px;max-height:min(90dvh,calc(var(--vvh,100dvh) - 12px));overscroll-behavior:contain;overflow:auto;border-radius:28px 28px 0 0;background:var(--folha);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  padding:0 24px max(24px,env(safe-area-inset-bottom));animation:up .4s var(--ease) both;transition:transform .3s var(--ease)}
.grab{position:absolute;top:0;left:0;right:0;height:28px;z-index:3;touch-action:none;cursor:grab}
.grab::after{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--grafite);opacity:.45}
.sh{margin:40px 0 24px;font-size:32px;font-weight:900;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.pbody{display:flex;flex-direction:column;gap:16px}
.verdict,.cluster{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-radius:var(--r-card);background:var(--tinta);color:var(--papel)}
.verdict .mono,.cluster .mono{color:var(--papel);opacity:.6}
.verdict b{font-size:32px;font-weight:900;letter-spacing:-.03em;line-height:1}
.verdict span{opacity:.75;font-size:15px}
.verdict .btn.pri,.cluster .btn.pri{background:var(--papel);color:var(--tinta)}
.verdict .capline{width:100%;margin-top:8px}
.verdict{flex-direction:row;align-items:center;justify-content:space-between;padding:12px 12px 12px 24px}
.verdict b{font-size:20px;letter-spacing:-.02em}
.cluster{margin-bottom:16px}
.deck{display:grid;margin-bottom:32px;padding-bottom:20px;cursor:pointer}
.dk{--dy:0px;--ds:1;--do:1;grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-radius:var(--r-card);background:var(--tinta);color:var(--papel);
  transform:translateY(var(--dy)) scale(var(--ds));opacity:var(--do);transform-origin:50% 100%;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.dk[data-p="0"]{z-index:3}
.dk[data-p="1"]{--dy:10px;--ds:.96;--do:.55;z-index:2;pointer-events:none}
.dk[data-p="2"]{--dy:20px;--ds:.92;--do:.3;z-index:1;pointer-events:none}
.dk:not([data-p="0"]):not([data-p="1"]):not([data-p="2"]){--dy:20px;--ds:.92;--do:0;pointer-events:none}
@keyframes toss{
  0%{transform:translateY(0) scale(1) rotate(0);opacity:1;z-index:4}
  45%{transform:translate(72px,-16px) scale(1) rotate(6deg);opacity:1;z-index:4}
  46%{z-index:0}
  100%{transform:translateY(var(--dy)) scale(var(--ds)) rotate(0);opacity:var(--do);z-index:0}}
.dk.toss{animation:toss .6s var(--ease) both}
.dkh{display:flex;justify-content:space-between;width:100%}
.dk .mono{color:var(--papel);opacity:.6}
.dk b{font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dk .btn.pri{background:var(--papel);color:var(--tinta)}
.cluster b{font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.dur-in{width:120px;padding:8px 16px;border-radius:999px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lab2{display:flex;flex-direction:column;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border-radius:999px;background:var(--nevoa);font-size:14px;font-weight:600;color:var(--grafite);transition:background .2s var(--ease),color .2s var(--ease)}
.chip.on{background:var(--tinta);color:var(--papel)}
.switch{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:var(--r-item);background:var(--nevoa);font-weight:600}
.switch i{width:44px;height:26px;border-radius:13px;background:var(--grafite);opacity:.5;position:relative;transition:background .2s var(--ease),opacity .2s var(--ease)}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--papel);transition:transform .25s var(--ease)}
.switch.on i{background:var(--tinta);opacity:1}.switch.on i::after{transform:translateX(18px)}
.gaps{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-card);background:var(--nevoa)}
.gaps li{list-style:none;font-size:14px;line-height:1.5;padding-left:16px;position:relative}
.gaps li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--tinta)}
.gaps ul{margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hint{font-size:13px;color:var(--grafite);margin:0}
.capline{display:flex;gap:8px;flex-wrap:wrap}
.capline .btn{flex:1 1 auto;justify-content:center;padding:0 16px}

#toast{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));transform:translate(-50%,-24px);z-index:80;padding:12px 24px;border-radius:999px;
  background:var(--tinta);color:var(--papel);font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}

/* ---------- desktop ---------- */
@media (min-width:900px) and (orientation:landscape){
  /* rodapé vira menu lateral no PC */
  .tabbar{left:24px;top:0;bottom:0;margin:auto 0;height:fit-content;transform:none;flex-direction:column;gap:6px;padding:12px;border-radius:32px}      /* centralizada na altura da tela */
  .tab{width:64px;padding:10px 0}
  .fab{order:-1;margin:0 0 8px}
  #main{padding-left:112px}
  #sheet{align-items:center}
  .wrap{max-width:720px;padding-top:48px;padding-bottom:64px}
  .wrap.wide{max-width:1360px}
  .wrap.hoje,.wrap.rot{max-width:1200px}
  .wrap.mes{max-width:900px}
  .cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0 80px;align-items:start}
  .wrap.rot .cols{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:0 64px}
  .wrap.rot.duo .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px}
  .mosaic{grid-auto-rows:clamp(96px,10vw,150px)}
  .col-r > .hl:first-child{border-top:0;padding-top:0}
  .wrap.hoje .cover{min-height:220px;margin-bottom:56px}
  .deck{max-width:560px}
  .board{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible;margin:0;padding:0}
  .col{flex:none;min-height:420px;padding:16px 12px}
  .col header b{font-size:40px}
  .col.today header b{font-size:28px}
  .col header{flex-wrap:wrap;gap:4px 8px}
  .col header em{margin-left:0;width:100%}
  #mini{left:24px;right:auto;bottom:24px;width:340px}
  .panel{border-radius:28px;margin-bottom:0}
  .map{height:calc(100dvh - 280px);min-height:480px}
}

/* páginas de termos e privacidade */
.lg{max-width:1120px;margin:0 auto;padding:max(32px,env(safe-area-inset-top)) 24px 96px;position:relative;z-index:1}
.lg-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:64px}
.lg-brand{display:flex;align-items:center;gap:10px;height:28px;text-decoration:none}
.lg-brand img{height:28px;width:auto;display:block}
.lg-brand span{font-family:'Unbounded','Switzer',sans-serif;font-weight:600;font-size:35.5px;line-height:1;letter-spacing:-.01em;color:var(--tinta)}
.lg-other{color:var(--grafite);font-size:14px;text-decoration:none;transition:color .2s var(--ease)}
@media (hover:hover){.lg-other:hover{color:var(--tinta)}}
.lg-h{margin:16px 0 24px}
.lg-lead{max-width:62ch;font-size:18px;line-height:1.6;margin:0 0 48px;color:var(--grafite)}
.lg a{color:var(--tinta)}
.lg-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:64px}
.lg-sum > div{background:var(--suave);border-radius:var(--r-card);padding:24px}
.lg-sum .mono{margin-bottom:8px}
.lg-sum p:last-child{margin:0;font-size:15px;line-height:1.55}
.lg-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
.lg-toc{position:sticky;top:32px;display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.lg-toc a{padding:12px 0;border-bottom:1px solid var(--linha);color:var(--grafite);font-size:14px;text-decoration:none;transition:color .2s var(--ease)}
@media (hover:hover){.lg-toc a:hover{color:var(--tinta)}}
.lg-body section{padding:0 0 48px;margin:0 0 48px;border-bottom:1px solid var(--linha);scroll-margin-top:32px}
.lg-body section:last-child{border-bottom:0;margin-bottom:0}
.lg-body h2{font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:0 0 24px}
.lg-body p{margin:0 0 16px;line-height:1.7}
.lg-body p,.lg-body li{color:var(--grafite)}
.lg-body b,.lg-body td:first-child{color:var(--tinta)}
.lg-body ul{margin:0 0 16px;padding:0 0 0 20px}
.lg-body li{margin:0 0 10px;line-height:1.65}
.lg-tw{overflow-x:auto;margin:0 0 24px}
.lg-body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55;min-width:560px}
.lg-body th{text-align:left;font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grafite);font-weight:400;padding:0 16px 12px 0}
.lg-body td{padding:16px 16px 16px 0;border-top:1px solid var(--linha);vertical-align:top;color:var(--grafite)}
.lg-body td:first-child{font-weight:600;width:26%}
@media (max-width:899px),(orientation:portrait){
  .lg-sum{grid-template-columns:1fr}
  .lg-grid{grid-template-columns:1fr;gap:32px}
  .lg-toc{position:static}
  .lg-body h2{font-size:24px}
}

/* ---------- capas prontas (sem imagem) ---------- */
.cover.cv-aneis,.mini.cv-aneis,.cvp.cv-aneis{background:repeating-radial-gradient(circle at 88% 130%,transparent 0 22px,var(--ponto) 22px 23px),radial-gradient(120% 90% at 0% 0%,var(--brilho),transparent 70%),var(--nevoa)}
.cover.cv-linhas,.mini.cv-linhas,.cvp.cv-linhas{background:repeating-linear-gradient(115deg,transparent 0 13px,var(--ponto) 13px 14px),radial-gradient(120% 90% at 100% 0%,var(--brilho),transparent 65%),var(--nevoa)}
.cover.cv-pontos,.mini.cv-pontos,.cvp.cv-pontos{background:radial-gradient(circle,var(--ponto) 1.3px,transparent 1.7px) 0 0/16px 16px,radial-gradient(120% 90% at 0% 0%,var(--brilho),transparent 70%),var(--nevoa)}
.cover.cv-grade,.mini.cv-grade,.cvp.cv-grade{background:linear-gradient(var(--ponto) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,var(--ponto) 1px,transparent 1px) 0 0/26px 26px,radial-gradient(120% 90% at 0% 0%,var(--brilho),transparent 70%),var(--nevoa)}
.cover.cv-ondas,.mini.cv-ondas,.cvp.cv-ondas{background:repeating-radial-gradient(ellipse 140% 100% at 8% 175%,transparent 0 24px,var(--ponto) 24px 25px),radial-gradient(120% 90% at 100% 0%,var(--brilho),transparent 65%),var(--nevoa)}
.cover.cv-raios,.mini.cv-raios,.cvp.cv-raios{background:repeating-conic-gradient(from 195deg at 92% 115%,var(--ponto) 0 .8deg,transparent .8deg 7deg),radial-gradient(120% 90% at 0% 0%,var(--brilho),transparent 70%),var(--nevoa)}
.cover.cv-nevoa,.mini.cv-nevoa,.cvp.cv-nevoa{background:radial-gradient(60% 90% at 12% 15%,var(--brilho),transparent 72%),radial-gradient(70% 100% at 95% 105%,var(--funda),transparent 72%),radial-gradient(40% 60% at 60% 30%,var(--brilho),transparent 70%),var(--nevoa)}
.cover.cv-xadrez,.mini.cv-xadrez,.cvp.cv-xadrez{background:conic-gradient(var(--ponto) 25%,transparent 0 50%,var(--ponto) 0 75%,transparent 0) 0 0/30px 30px,radial-gradient(120% 90% at 0% 0%,var(--brilho),transparent 70%),var(--nevoa)}
.cvgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:520px){.cvgrid{grid-template-columns:repeat(4,1fr)}}
.cvp{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;padding:8px 10px;transition:transform .2s var(--ease)}
.cvp:active{transform:scale(.96)}
.cvp .mono{font-size:10px;color:var(--tinta);opacity:.85}
.cvp.on{outline:2px solid var(--tinta);outline-offset:3px}
@media (hover:hover){.cvp:hover{transform:scale(1.03)}}

/* ---------- dicas guiadas ---------- */
.tour{position:fixed;z-index:70;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 96px);padding:20px 20px 12px;border-radius:var(--r-card);
  background:color-mix(in srgb,var(--nevoa) 84%,transparent);-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);      /* translúcido: dá para ver, atrás, o que a explicação pede para fazer */
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tour.on{opacity:1;transform:none;pointer-events:auto}
.tour.sheet{bottom:auto;top:max(16px,env(safe-area-inset-top))}
.tour p{margin:0}
.tour b,.tour p,.tour .mono,.tour .alink{text-shadow:0 1px 2px rgba(0,0,0,.14),0 0 10px rgba(0,0,0,.08)}      /* leve sombra atrás do texto: separa das coisas que aparecem por trás do cartão translúcido */
.tour .mono{margin-bottom:8px}
.tour b{display:block;font-size:18px;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
.tour p:not(.mono){font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--tinta) 84%,transparent)}
.tour-a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.btn.sm{height:38px;padding:0 18px;font-size:14px}
.tour-hl{outline:1.5px solid var(--tinta);outline-offset:8px;border-radius:14px;transition:outline-color .3s var(--ease)}
@media (min-width:900px) and (orientation:landscape){.tour{left:auto;right:24px;bottom:24px;width:380px}.tour.sheet{top:auto;bottom:24px}}
/* tela em pé e larga (monitor girado): mantém a barra de baixo, mas usa a largura em duas colunas em vez de deixar as laterais vazias */
@media (orientation:portrait) and (min-width:700px){
  .wrap{max-width:min(94vw,1100px);padding-top:48px}
  .wrap.mes{max-width:min(94vw,900px)}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:start}
  .wrap.rot .cols{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0 48px}
  .wrap.rot.duo .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}
  .col-r > .hl:first-child{border-top:0;padding-top:0}
  .wrap.hoje .cover{min-height:220px;margin-bottom:48px}
  .board{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));overflow:visible;margin:0;padding:0}
  .board .col{flex:none;min-height:clamp(340px,calc(100dvh - 300px),900px);padding:16px 12px}
  .mosaic{grid-auto-rows:clamp(96px,12vw,170px)}
  .map{height:calc(100dvh - 300px);min-height:520px}
  #sheet{align-items:center}
  .panel{border-radius:28px;margin-bottom:0}
}
.nw{white-space:nowrap}
@media (min-width:1000px){.fsum b{font-size:18px}}

/* saudação da capa: 22px, peso 900 */
.cover .gname{font:900 22px/1.1 var(--d);text-transform:none;letter-spacing:-.03em;color:var(--tinta);opacity:1}
.cover.img .gname{color:#fff}
.cover .cover-id span:last-child{font-size:12px}

/* ---------- aviso de instalação (PWA) ---------- */
.pwa-bar{position:fixed;z-index:34;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 8px);
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 20px;border-radius:var(--r-card);
  background:color-mix(in srgb,var(--nevoa) 96%,transparent);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);animation:up .4s var(--ease) both}
.pwa-bar p{margin:0;flex:1;font-size:14px;line-height:1.45;color:var(--grafite)}
.pwa-bar b{color:var(--tinta);font-weight:600}
.pwa-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--grafite);flex:none;transition:color .2s var(--ease),background .2s var(--ease)}
@media (hover:hover){.pwa-x:hover{color:var(--tinta);background:var(--nevoa)}}
body.locked .pwa-bar{display:none}
@media (min-width:900px) and (orientation:landscape){.pwa-bar{left:auto;top:auto;right:24px;bottom:24px;width:400px}}

/* ---------- guia de instalação ---------- */
.instdl{display:grid;gap:12px;margin-top:8px;padding-top:24px}
.instdl.first{margin:0 0 32px;padding:0}
.instdl p{margin:0;font-size:15px;line-height:1.5;color:var(--tinta)}
.instdl .instp{color:var(--grafite)}
.instdl .btn{justify-content:center;width:100%;text-decoration:none}
.instp{margin:0}
.instopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.instopt{display:flex;align-items:center;gap:12px;min-width:0;min-height:56px;padding:0 16px;border-radius:var(--r-item);background:var(--nevoa);color:var(--grafite);font-size:15px;font-weight:600;line-height:1.2;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.instopt svg{flex:none}
.instopt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:520px){.instopts{grid-template-columns:repeat(4,minmax(0,1fr))}.instopt{flex-direction:column;justify-content:center;gap:8px;min-height:88px;padding:0 8px;font-size:14px}}
.instopt.on{background:var(--tinta);color:var(--papel)}
.instopt:active{transform:scale(.96)}
.instopt:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media (hover:hover){.instopt:not(.on):hover{color:var(--tinta)}}
.inststeps{margin:0 0 8px;padding:0;list-style:none;counter-reset:s;display:grid;gap:16px}
.inststeps li{counter-increment:s;position:relative;padding-left:36px;overflow-wrap:anywhere;font-size:15px;line-height:1.5;color:var(--tinta)}
.inststeps li::before{content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--nevoa);display:grid;place-items:center;font:500 12px/1 var(--m);color:var(--grafite)}

/* ---------- dentro do programa de desktop (Windows/Mac): sem barra de título e sem rolagem visível ---------- */
html.desk,html.desk *{scrollbar-width:none}
html.desk::-webkit-scrollbar,html.desk *::-webkit-scrollbar{display:none;width:0;height:0}
html.desk body::before{content:'';position:fixed;top:0;left:0;right:0;height:36px;z-index:60;-webkit-app-region:drag}
html.desk .wrap{padding-top:56px}
html.desk .auth{padding-top:64px}
html.desk #toast,html.desk .tour,html.desk .pwa-bar,html.desk #sheet{-webkit-app-region:no-drag}

/* o aviso de instalar não aparece por cima das explicações guiadas */
body:has(#tour.on) .pwa-bar{display:none}

/* ---------- contador fixo no celular: compacto, acima da barra de abas, em todas as telas enquanto há um foco ---------- */
@media (max-width:899px),(orientation:portrait){
  body:not(.pipbody) .mini{padding:10px 40px 10px 12px;gap:12px;border-radius:22px}
  body:not(.pipbody) .mring{width:60px;height:60px}
  body:not(.pipbody) .mring circle{stroke-width:11}
  body:not(.pipbody) .mtime{font-size:13px}
  body:not(.pipbody) .mside{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  body:not(.pipbody) .minfo{gap:2px}
  body:not(.pipbody) .minfo b{font-size:15px;-webkit-line-clamp:1;line-clamp:1}
  body:not(.pipbody) .mbtn{width:36px;height:36px}
  body:not(.pipbody) .mini .mx{top:8px;right:8px;width:24px;height:24px}
  body:has(#mini > .mini) .wrap{padding-bottom:260px}
}

/* aviso do nome no popup: caixa clara e legível, principalmente no celular */
.nerr{margin:0;padding:12px 16px;border-radius:14px;background:var(--tinta);color:var(--papel);font-size:14px;font-weight:600;line-height:1.4}
.nerr[hidden]{display:none}
.field[aria-invalid=true]{outline:2px solid var(--tinta);outline-offset:0}

/* ---------- captura por voz ---------- */
.btn.rec{background:var(--tinta);color:var(--papel)}
.btn.rec svg{animation:recp 1.1s var(--ease) infinite}
@keyframes recp{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.btn.rec svg{animation:none}}
#c-voice{display:grid;gap:12px}
#c-voice[hidden]{display:none}
#c-voice p{margin:0}
.vlist{display:grid;gap:8px}
.vitem{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-item);background:var(--nevoa);cursor:pointer}
.vitem input{margin-top:4px;accent-color:var(--tinta);width:18px;height:18px;flex:none}
.vitem span{display:grid;gap:4px;min-width:0}
.vitem b{font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.vitem em{font-style:normal;font-size:11px;color:var(--grafite)}

/* ---------- modo relógio (celular deitado, foco ativo) ---------- */
#clockmode{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;justify-content:space-between;
  padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  background:radial-gradient(120% 100% at 0% 0%,var(--brilho),transparent 70%),var(--papel);color:var(--tinta);animation:fade .3s var(--ease) both}
body.cm-on{overflow:hidden}
.cm-top,.cm-bot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cm-top .mono{font-size:12px;color:var(--grafite)}
.cm-time{align-self:center;font-weight:200;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums;font-size:min(30vw,58vh);opacity:.6;transition:opacity .3s var(--ease)}
#clockmode.run .cm-time{opacity:1}
.cm-bar{height:2px;border-radius:2px;background:var(--linha);overflow:hidden}
.cm-bar i{display:block;height:100%;width:0;background:var(--tinta);transition:width 1s linear}
.cm-bot b{font-weight:900;font-size:clamp(16px,4.6vh,28px);letter-spacing:-.03em;line-height:1.05;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){#clockmode{animation:none}.cm-bar i{transition:none}}

.vnote{margin:0;font-size:14px;line-height:1.5;color:var(--tinta)}
.vnote a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

.cm-l{display:flex;align-items:center;gap:12px;min-width:0}

/* posições do cartão das explicações (escolhidas em placeTour para não cobrir o elemento explicado) */
.tour.top{top:max(16px,env(safe-area-inset-top));bottom:auto}
@media (min-width:900px) and (orientation:landscape){
  .tour.top{top:56px;bottom:auto}
  .tour.left{left:112px;right:auto}
}

.tour .btn[disabled]{opacity:.55;cursor:default}

/* ---------- metas, cápsula e financeiro (v2) ---------- */
.wcard{background:var(--tinta);color:var(--papel)}
.wcard .mono,.wcard .mono span{color:color-mix(in srgb,var(--papel) 58%,var(--tinta))}
.wcard b,.wcard .fval{color:var(--papel)}
.glist{display:flex;flex-direction:column;gap:8px}
.gcard{display:flex;align-items:center;gap:16px;min-height:96px;padding:20px 20px 20px 16px;border-radius:var(--r-card)}
.gcard .ck{width:32px;height:32px;background:color-mix(in srgb,var(--papel) 16%,var(--tinta));color:transparent}
.gcard.done .ck{background:var(--papel);color:var(--tinta)}
.gtt{flex:1;min-width:0;text-align:left}
.gtt b{display:block;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.gcard.done .gtt b{text-decoration:line-through;opacity:.45}
.mcard img{filter:grayscale(1)}
.mframe{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--nevoa);touch-action:none;cursor:grab;width:100%;max-height:46dvh}
.mframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);pointer-events:none}
.wrap.cap{max-width:720px}
.sv{position:relative;background:var(--suave);border-radius:var(--r-card);margin:0 0 8px}
.sv-main{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;padding:20px 20px 60px}
.sv-ends{display:flex;justify-content:space-between;align-items:baseline;font:900 clamp(40px,11vw,64px)/.95 var(--d);letter-spacing:-.05em}
.sv-ends b{font-weight:900}
.sv-bar{display:block;height:10px;border-radius:5px;background:var(--nevoa);overflow:hidden}
.sv-bar i{display:block;height:100%;background:var(--tinta);transition:width .4s var(--ease)}
.sv-got{display:flex;justify-content:space-between}
.sv-why{font-size:15px;line-height:1.45;color:var(--tinta)}
.sv-dates{display:block}
.sv-add{position:absolute;right:16px;bottom:14px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.more.fxbtn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;margin:0;border-radius:16px;background:var(--suave);color:var(--tinta);transition:background .2s var(--ease)}
@media (hover:hover){.more.fxbtn:hover{background:var(--nevoa)}}
.fsum>.wcard{background:var(--tinta)}

.mcard.bg-preto{background:#0B0B0A;color:#F2F1EE}
.mcard.bg-cinza{background:#4A4945;color:#F2F1EE}
.mcard.bg-branco{background:#F7F6F2;color:#121110}
.mcard.m1.bg-preto{background:#0B0B0A;color:#F2F1EE}
.mcard.m1.bg-cinza{background:#4A4945;color:#F2F1EE}
.mcard.m1.bg-branco{background:#F7F6F2;color:#121110}
.gcard.cap-row{height:88px;min-height:88px;padding:0 20px}
.cap-row .gtt b{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-row .gtt .mono{display:block;margin-top:4px}
.mcard.bg-preto,.mcard.m1.bg-preto{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wrap.cap .glist{margin-bottom:28px}

.mcard:not(.has):not(.ph){justify-content:center}
.mcard:not(.has):not(.ph) b{display:block;overflow:visible;-webkit-line-clamp:unset;line-height:.94;letter-spacing:-.03em;font-weight:600;word-break:break-word;hyphens:auto}

.mcard.bg-claro,.mcard.m1.bg-claro{background:#A8A69F;color:#121110}
.mcard.bg-claro .mono{color:#121110}
.mcard.ph,.mcard.m1.ph{opacity:1}
.mcard.bg-preto svg,.mcard.bg-cinza svg{color:#F2F1EE;opacity:.55}
.mcard.bg-claro svg,.mcard.bg-branco svg{color:#121110;opacity:.5}

.mcard.emp{align-items:center;justify-content:center}
.nmot>.glabel{font:900 clamp(24px,7vw,34px)/1 var(--d);letter-spacing:-.04em;text-transform:none;color:var(--tinta);margin:0 0 16px 0}
@media (max-width:699px){.nmot{margin-top:56px}.nmot>.glabel{margin-bottom:24px}}

.sv-main{padding-bottom:20px}
.sv-dates{padding-right:140px}
.sv-add{bottom:16px}
.sv-main{padding-bottom:28px}
.sv-dates{margin-top:8px}
.sv-dates{padding-right:112px;white-space:nowrap}
.sv-main{padding-bottom:22px}
.sv-dates{margin-top:22px}

/* ---------- varredura de responsividade ---------- */
.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
input[type=date],input[type=month],input[type=time],input[type=number]{min-width:0;max-width:100%}
.view-head{flex-wrap:wrap}
.task .tt b{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.fsum b{font-size:clamp(13px,2vw,15px)}
.fsum>div{padding:14px 10px}
@media (orientation:portrait) and (min-width:700px){.timer{font-size:clamp(72px,11vw,130px)}}
@media (min-width:1000px){.fsum b{font-size:18px}}
.cap-row .gtt b{white-space:normal;text-overflow:clip;-webkit-line-clamp:2;line-clamp:2;line-height:1.15}
@media (min-width:900px) and (orientation:landscape){.board{grid-template-columns:repeat(7,minmax(0,1fr))}}
.board .nw{white-space:normal}
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){.board{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* o cartão da meta é um bloco (não um botão): o Safari do iPhone encolhe o conteúdo de botões e some com a barra */
.sv-main{display:block;box-sizing:border-box;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-main>span{display:block}
.sv-main>.sv-ends,.sv-main>.sv-got{display:flex;width:100%}
.sv-main>.sv-bar{display:block;width:100%;min-height:10px;margin:14px 0 10px}
.sv-main>.sv-ends{margin-top:12px}
.sv-main>.sv-why,.sv-main>.sv-dates{margin-top:0}
.sv-main>.sv-dates{margin-top:22px}
.more.fxbtn{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
@media (hover:hover){.more.fxbtn:hover{background:var(--nevoa)}}
.more.fxbtn:active{background:var(--nevoa)}

/* prazo e botão na mesma linha; se não couber, o botão desce sozinho (sem sobrepor) */
.sv-main>.sv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:18px;width:100%}
.sv-main>.sv-foot .sv-dates{margin:0;padding:0;white-space:nowrap}
.sv-main>.sv-foot .sv-add{position:static;margin-left:auto}
.sv-main{padding-bottom:20px}

/* nunca hifenizar nem quebrar em travessão */
html{hyphens:manual;-webkit-hyphens:manual}
.mcard:not(.has):not(.ph) b{hyphens:manual;-webkit-hyphens:manual}
/* metas e cápsula: banners em cinza suave (inverso do layout), em vez de branco forte */
.gcard.wcard{background:color-mix(in srgb,var(--tinta) 74%,var(--papel));color:var(--papel)}
.gcard.wcard .mono{color:color-mix(in srgb,var(--papel) 72%,transparent)}
.gcard .ck{background:color-mix(in srgb,var(--papel) 18%,transparent)}
.gcard.done .ck{background:var(--papel);color:color-mix(in srgb,var(--tinta) 74%,var(--papel))}
/* frase da motivação: mais respiro nas bordas */
.mcard:not(.has):not(.ph).m1,.mcard:not(.has):not(.ph).m2{padding:28px}
.mcard:not(.has):not(.ph).m3,.mcard:not(.has):not(.ph).m4{padding:16px 22px}
/* programa de desktop em tela em pé: o topo só precisa do espaço da barra de botões da janela */
@media (orientation:portrait){html.desk .wrap{padding-top:calc(env(titlebar-area-height,36px) + 12px)}}

/* ---------- agenda em monitor deitado: usa a largura toda e o cartão se adapta à coluna ---------- */
.wrap.wide{max-width:2200px}
@media (min-width:900px) and (orientation:landscape){.wrap.wide{max-width:2200px}}
.board .col{container-type:inline-size}
.col .tt .mono{display:flex;flex-direction:column}
.col .tcat{display:block}
.col .tsep{display:none}
@container (max-width:190px){
  .tcat{display:none}
  .task{padding:10px 8px;gap:8px}
  .task .ck{width:22px;height:22px}
  .task .tt b{font-size:14px}
}
@container (max-width:190px){
  .col .tcat{display:none}
  .col .tt .mono{font-size:10px}
  .col .nw{white-space:nowrap}
}
@container (max-width:190px){
  .col .task{position:relative}
  .col .pri-dot,.col .urg{position:absolute;top:8px;right:8px;margin:0}
}

/* menu lateral (computador deitado): só os ícones; o nome aparece ao passar o mouse (title) */
@media (min-width:900px) and (orientation:landscape){
  .tabbar .tab span{display:none}
  .tabbar .tab{width:56px;height:56px;padding:0;justify-content:center}
  .tabbar .tab svg{width:24px;height:24px}
}
/* barra de abas (celular e tela em pé): só os ícones; o nome fica no aria-label/title */
.tabbar .tab span{display:none}
.tabbar .tab{height:48px;padding:0;justify-content:center}
.tabbar .tab svg{width:24px;height:24px}