:root{
  --verde:#0B6E5B; --verde-2:#0E8A71; --verde-esc:#073E34; --amarelo:#FFC845; --coral:#FF7A59;
  --tinta:#1B2430; --creme:#FFF7EC; --nevoa:#E3F1EC; --cinza:#4F5B66;
  --bg1:#1B2430; --bg2:#11171F; --glass:rgba(27,36,48,.72); --line:rgba(255,255,255,.09);
  --txt:#FFF7EC; --txt2:#A9B6C2;
  --st-andamento:#2BD48A; --st-planejado:#5AA9FF; --st-bloqueado:#FF6B6B; --st-concluido:#FFC845;
  --side-w:372px; --top-h:68px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg2);color:var(--txt);font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
#app{height:100%;display:flex;flex-direction:column;background:
  radial-gradient(1200px 700px at 35% 30%, #0B6E5B33 0%, rgba(11,110,91,0) 60%),
  radial-gradient(900px 600px at 90% 100%, #1B2430 0%, rgba(27,36,48,0) 60%),
  linear-gradient(160deg,var(--bg1),var(--bg2));}

/* top bar */
.topbar{height:var(--top-h);flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;
  background:linear-gradient(180deg,rgba(4,20,17,.85),rgba(4,20,17,.55));border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:5}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.logo{height:34px;width:auto;display:block}
.brand-text{display:flex;align-items:center;gap:12px;border-left:1px solid var(--line);padding-left:16px}
.brand h1{font-family:Poppins,sans-serif;font-weight:600;font-size:19px;margin:0;letter-spacing:.2px;white-space:nowrap}
.live{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 Poppins,sans-serif;letter-spacing:1.4px;color:#fff;background:rgba(255,107,107,.16);border:1px solid rgba(255,107,107,.45);padding:6px 9px;border-radius:99px}
.live i{width:8px;height:8px;border-radius:50%;background:#FF5A5A;box-shadow:0 0 0 0 rgba(255,90,90,.7);animation:live 1.6s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(255,90,90,.65)}70%{box-shadow:0 0 0 9px rgba(255,90,90,0)}100%{box-shadow:0 0 0 0 rgba(255,90,90,0)}}
.clock{text-align:center;line-height:1.1}
.clock-time{font:700 28px/1 Poppins,sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums}
.clock-time small{font-size:15px;opacity:.6;margin-left:2px}
.clock-meta{font-size:12.5px;color:var(--txt2);margin-top:4px}
.clock-meta .sep{margin:0 6px;opacity:.5}
.actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:var(--verde);color:#fff;font:600 14px Poppins,sans-serif;cursor:pointer;transition:transform .15s,background .2s}
.btn:hover{background:var(--verde-2)} .btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.06)} .btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.ghost[aria-pressed="false"]{opacity:.6}
.btn svg,.zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:focus-visible,.zoom button:focus-visible,.team li:focus-visible,.card-close:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

/* layout */
.layout{flex:1;min-height:0;display:flex}
.stage{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:none;cursor:grab}
.stage.dragging{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.world svg{display:block}
.overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.side{width:var(--side-w);flex:none;display:flex;flex-direction:column;gap:12px;padding:14px 14px 10px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,20,17,.55),rgba(4,20,17,.75));overflow:hidden}
.panel{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel h2{font:600 15px Poppins,sans-serif;margin:0;letter-spacing:.2px}
.muted{color:var(--txt2);font-size:12.5px}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--st-andamento);animation:live2 2s infinite}
@keyframes live2{0%{box-shadow:0 0 0 0 rgba(43,212,138,.6)}70%{box-shadow:0 0 0 8px rgba(43,212,138,0)}100%{box-shadow:none}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px}
.stat{text-align:center;padding:6px 2px;border-radius:12px;background:rgba(255,255,255,.03)}
.stat b{display:block;font:700 22px/1.1 Poppins,sans-serif}
.stat span{font-size:11px;color:var(--txt2);line-height:1.15;display:block;margin-top:2px}
.feed-panel{flex:1.25;min-height:0;display:flex;flex-direction:column}
.feed{list-style:none;margin:0;padding:0;overflow:hidden;flex:1;mask-image:linear-gradient(180deg,#000 80%,transparent)}
.feed li{display:flex;gap:10px;padding:8px 2px;border-bottom:1px dashed rgba(255,255,255,.07);font-size:13.5px;line-height:1.35;animation:feedIn .5s ease}
.feed li .ic{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.06)}
.feed li b{font-weight:800;color:#fff}
.feed li time{display:block;font-size:11px;color:var(--txt2);margin-top:1px}
@keyframes feedIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.team-panel{flex:1;min-height:0;display:flex;flex-direction:column}
.team{list-style:none;margin:0;padding:0 4px 0 0;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.team li{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:12px;cursor:pointer;transition:background .15s}
.team li:hover,.team li.active{background:rgba(255,255,255,.07)}
.team .av{width:36px;height:36px;flex:none;border-radius:11px;background:rgba(255,255,255,.07);overflow:hidden}
.team .av svg{width:100%;height:100%}
.team .who{min-width:0;flex:1}
.team .who b{display:block;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .who span{display:block;font-size:12px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 Nunito,sans-serif;padding:5px 8px;border-radius:99px;white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.em_andamento{color:var(--st-andamento);background:rgba(43,212,138,.12)}
.chip.planejado{color:var(--st-planejado);background:rgba(90,169,255,.13)}
.chip.bloqueado{color:var(--st-bloqueado);background:rgba(255,107,107,.13)}
.chip.concluido{color:var(--st-concluido);background:rgba(255,200,69,.13)}
.updated{margin:0;font-size:11.5px;color:var(--txt2);text-align:center}

/* zoom + hint */
.zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:3}
.zoom button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(4,20,17,.7);backdrop-filter:blur(6px);
  font:600 20px Poppins,sans-serif;cursor:pointer;display:grid;place-items:center}
.zoom button:hover{background:rgba(11,110,91,.85)}
.hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(4,20,17,.72);border:1px solid var(--line);padding:9px 14px;border-radius:99px;
  font-size:13px;color:var(--txt2);backdrop-filter:blur(6px);transition:opacity .6s;white-space:nowrap;pointer-events:none}
.hint.hide{opacity:0}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--txt2);font-weight:600;transition:opacity .5s;z-index:4;background:var(--bg2)}
.loading.done{opacity:0;pointer-events:none}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--amarelo);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* overlay: bubbles and name tags */
.tag{position:absolute;left:0;top:0;transform:translate(-50%,0);font:700 11px/1 Nunito,sans-serif;color:#fff;background:rgba(7,30,26,.78);
  padding:4px 7px 4px 6px;border-radius:7px;white-space:nowrap;display:flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.1);will-change:transform;transition:opacity .3s}
.tag i{width:6px;height:6px;border-radius:50%}
.overlay.no-names .tag{opacity:0}
.bubble{position:absolute;left:0;top:0;will-change:transform;max-width:230px;width:max-content}
.bubble .in{background:#fff;color:var(--tinta);font:600 13px/1.32 Nunito,sans-serif;padding:8px 11px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.28);
  transform-origin:50% 100%;animation:pop .35s cubic-bezier(.2,1.4,.4,1) both;position:relative}
.bubble .in::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bubble .in b{display:block;font:700 10.5px/1.2 Poppins,sans-serif;letter-spacing:.4px;text-transform:uppercase;margin-bottom:2px}
.bubble.think .in{border-radius:18px;background:#F2F7FF}
.bubble.think .in::after{width:9px;height:9px;border-radius:50%;bottom:-12px;left:46%}
.bubble.think .in::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#F2F7FF;bottom:-19px;left:43%}
.bubble.chat .in{background:var(--amarelo)}
.bubble.out .in{animation:popout .3s ease both}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(6px)}to{opacity:1;transform:none}}
@keyframes popout{to{opacity:0;transform:scale(.85) translateY(4px)}}

/* card */
.card{position:fixed;z-index:20;width:330px;max-width:calc(100vw - 24px);background:rgba(9,30,26,.94);border:1px solid rgba(255,255,255,.14);border-radius:20px;
  padding:16px 16px 14px;box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(14px);animation:cardIn .22s ease}
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.card-close{position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:10px;border:0;background:rgba(255,255,255,.06);font-size:22px;line-height:1;cursor:pointer}
.card-top{display:flex;gap:13px;align-items:center;padding-right:28px}
.card-avatar{width:76px;height:76px;flex:none;border-radius:18px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.16),rgba(255,255,255,.03));overflow:hidden}
.card-avatar svg{width:100%;height:100%}
.card-zone{font:700 10.5px Poppins,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--amarelo)}
.card h3{margin:2px 0 2px;font:700 18px/1.2 Poppins,sans-serif}
.card-role{font-size:13.5px;color:var(--txt2)}
.card-status{margin:12px 0 10px}
.card-task-label{font:600 11px Poppins,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--txt2)}
.card-task{margin:4px 0 8px;font-size:15px;line-height:1.45;font-weight:600}
.card-doing{font-size:12.5px;color:var(--txt2)}

/* ===== SVG scene ===== */
.char{cursor:pointer}
.char .hit{fill:transparent}
.char .legs .leg{transform-origin:0 0}
.char.walking .legs .leg.l{animation:legL .5s ease-in-out infinite}
.char.walking .legs .leg.r{animation:legL .5s ease-in-out infinite reverse}
@keyframes legL{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
.char.walking .bob{animation:bob .25s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.char.seated .legs{display:none}
.char.seated .shadow{display:none}
.char.seated .upper{transform:translateY(7px)}
.char .arm{transform-origin:0 0}
.char .arm.l{transform:rotate(9deg)} .char .arm.r{transform:rotate(-9deg)}
.char.typing .arm.l{animation:typeL .32s ease-in-out infinite alternate}
.char.typing .arm.r{animation:typeR .32s ease-in-out infinite alternate-reverse}
@keyframes typeL{from{transform:rotate(-30deg)}to{transform:rotate(-38deg)}}
@keyframes typeR{from{transform:rotate(30deg)}to{transform:rotate(38deg)}}
.char.typing .head{animation:nod 2.6s ease-in-out infinite}
@keyframes nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}}
.char.thinking .arm.r{transform:rotate(-150deg)}
.char.thinking .head{animation:tilt 4s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}}
.char.blocked .head{transform:rotate(6deg)}
.char.blocked .arm.l{transform:rotate(-20deg)} .char.blocked .arm.r{transform:rotate(20deg)}
.char.cheer .arm.l{animation:cheerL 1.2s ease-in-out infinite}
.char.cheer .arm.r{animation:cheerR 1.2s ease-in-out infinite}
@keyframes cheerL{0%,100%{transform:rotate(9deg)}25%,75%{transform:rotate(155deg)}50%{transform:rotate(140deg)}}
@keyframes cheerR{0%,100%{transform:rotate(-9deg)}25%,75%{transform:rotate(-155deg)}50%{transform:rotate(-140deg)}}
.char.coffee .arm.r{transform:rotate(-55deg)}
.char .mug{display:none} .char.coffee .mug{display:inline}
.char .head{transform-origin:0 0}
.char .blink{animation:blink 5s infinite;transform-origin:0 0}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
.char .glow-core{animation:core 2.4s ease-in-out infinite}
@keyframes core{0%,100%{opacity:.55}50%{opacity:1}}
.char .ant{animation:ant 1.4s steps(1) infinite}
@keyframes ant{0%{opacity:1}50%{opacity:.25}}
.char.hover-bot .bob{animation:hover 1.8s ease-in-out infinite alternate}
@keyframes hover{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.char .prop{animation:prop .12s linear infinite;transform-origin:0 0}
@keyframes prop{0%{transform:scaleX(1)}50%{transform:scaleX(.25)}100%{transform:scaleX(1)}}
.char .stbadge{animation:badge 1.6s ease-in-out infinite;transform-origin:0 0}
@keyframes badge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.char:hover .outline, .char.sel .outline{opacity:1}
.char .outline{opacity:0;transition:opacity .2s}
.char .tent{transform-origin:0 0;animation:tent 2.4s ease-in-out infinite alternate}
@keyframes tent{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

.scroll-code{animation:codeUp 9s linear infinite}
@keyframes codeUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.scroll-code.fast{animation-duration:6s}
.barA{transform-box:fill-box;transform-origin:50% 100%;animation:bars 2.8s ease-in-out infinite alternate}
@keyframes bars{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.spin{transform-box:fill-box;transform-origin:50% 50%;animation:spin 6s linear infinite}
.spin.slow{animation-duration:14s}
.spin.rev{animation-direction:reverse}
.sweep{animation:spin 3s linear infinite;transform-origin:0 0}
.blinkled{animation:led 1.1s steps(1) infinite}
@keyframes led{50%{opacity:.2}}
.steam{animation:steam 3s ease-in-out infinite;opacity:0}
@keyframes steam{0%{opacity:0;transform:translateY(0)}30%{opacity:.7}100%{opacity:0;transform:translateY(-16px)}}
.cloud{animation:cloud linear infinite}
@keyframes cloud{from{transform:translateX(-260px)}to{transform:translateX(1500px)}}
.twinkle{animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.25}to{opacity:1}}
.plane-blink{animation:led 1.4s steps(1) infinite}
.holo{animation:holo 3.5s ease-in-out infinite alternate}
@keyframes holo{from{opacity:.82}to{opacity:1}}
.pop-heart{transform-box:fill-box;transform-origin:50% 50%;animation:heart 2.2s ease-out infinite}
@keyframes heart{0%{opacity:0;transform:translateY(4px) scale(.5)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-14px) scale(.9)}}
.typing-line{animation:typeW 3.2s steps(12) infinite}
@keyframes typeW{from{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.kan{animation:kan 7s ease-in-out infinite}
@keyframes kan{0%,30%{transform:translateX(0)}50%,80%{transform:translateX(15px)}100%{transform:translateX(0)}}

@media (prefers-reduced-motion: reduce){ *{animation-duration:0s!important;animation-iteration-count:1!important} }

/* responsive */
@media (max-width:1280px){ :root{--side-w:320px} }
@media (min-width:2200px){ :root{--side-w:440px;--top-h:84px} .clock-time{font-size:34px} .brand h1{font-size:23px} .feed li{font-size:15px} .team .who b{font-size:15px} }
@media (max-width:900px){
  html,body{height:auto;overflow:visible}
  #app{height:auto;min-height:100vh;overflow-x:hidden}
  :root{--top-h:auto}
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:8px 10px;position:sticky;top:0}
  .brand{gap:10px}.logo{height:26px}.brand-text{padding-left:10px;gap:8px}.brand h1{font-size:15px}
  .live{padding:5px 7px;font-size:10px}
  .clock{order:3;width:100%;display:flex;align-items:baseline;justify-content:center;gap:10px}
  .clock-time{font-size:20px}.clock-meta{margin:0}
  .actions .btn span{display:none}.actions .btn{padding:0 11px;height:36px}
  .layout{flex-direction:column}
  .stage{height:62vh;min-height:360px;flex:none}
  .side{width:100%;border-left:0;border-top:1px solid var(--line);overflow:visible}
  .feed-panel{flex:none}.feed{max-height:300px}
  .team-panel{flex:none}.team{overflow:visible}
  .hint{font-size:11.5px;white-space:normal;width:max-content;max-width:calc(100% - 90px);text-align:center;left:12px;transform:none;bottom:12px}
  .card{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
  .bubble{max-width:170px}.bubble .in{font-size:11.5px;padding:6px 9px}
}

/* modo imagem de prévia (?og=1) */
body.og .side,body.og .zoom,body.og .hint,body.og .actions{display:none!important}
body.og .og-title{display:block}
.og-title{display:none;position:absolute;left:28px;bottom:24px;z-index:6;pointer-events:none}
.og-title b{display:block;font:800 40px/1.05 Poppins,sans-serif;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.og-title span{display:inline-block;margin-top:8px;font:700 17px Nunito,sans-serif;color:#1B2430;background:#FFC845;padding:6px 12px;border-radius:99px}

/* ===== app instalável (PWA) ===== */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.live em{font-style:normal}
.live.off{background:rgba(169,194,186,.12);border-color:rgba(169,194,186,.4)}
.live.off i{background:#A9C2BA;animation:none}
.btn.install{background:linear-gradient(135deg,#FFC845,#FFB020);color:#1B2430;border-color:rgba(255,200,69,.6);box-shadow:0 6px 18px rgba(255,200,69,.22)}
.btn.install:hover{background:linear-gradient(135deg,#FFD46B,#FFBE3D)}
.btn.install[hidden]{display:none}
.offline-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;
  background:rgba(27,36,48,.9);border:1px solid rgba(255,255,255,.16);color:#FFF7EC;font:700 12.5px Nunito,sans-serif;padding:8px 14px;border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.3);white-space:nowrap}
.offline-badge i{width:8px;height:8px;border-radius:50%;background:#FFC845}
.offline-badge[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:60;background:#FFF7EC;color:#1B2430;
  font:700 14px Nunito,sans-serif;padding:12px 18px;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:.3s;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast[hidden]{display:none}
.guide-backdrop{position:fixed;inset:0;z-index:50;background:rgba(3,14,12,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));opacity:0;transition:opacity .25s}
.guide-backdrop.show{opacity:1}
.guide-backdrop[hidden]{display:none}
.guide{position:relative;width:min(420px,100%);background:linear-gradient(180deg,#FFFDF8,#FFF7EC);color:#1B2430;border-radius:22px;padding:22px 20px 18px;box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.guide-backdrop.show .guide{transform:none}
.guide .card-close{color:#4F5B66;background:rgba(27,36,48,.06)}
.guide-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding-right:30px}
.guide-head img{border-radius:14px;box-shadow:0 6px 16px rgba(11,110,91,.35);flex:none}
.guide-head h3{margin:0;font:700 19px Poppins,sans-serif;color:#0B6E5B}
.guide-head p{margin:3px 0 0;font-size:14px;color:#4F5B66}
.guide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.guide-steps[hidden]{display:none}
.guide-steps li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #E3F1EC;border-radius:14px;padding:11px 12px;font-size:15px;line-height:1.35}
.guide-steps .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#0B6E5B;color:#fff;font:700 14px Poppins,sans-serif}
.guide-steps b{color:#0B6E5B}
.guide-steps .ico{width:20px;height:20px;vertical-align:-4px;fill:none;stroke:#1F6FEB;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:2px}
.guide-steps #guideOther .ico,.guide-steps .ico circle{fill:#1B2430;stroke:none}
.guide-arrow{display:none}
.guide-backdrop.ios{align-items:flex-end}
.guide-backdrop.ios .guide-arrow{display:block;position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:34px;height:34px;animation:nudge 1.2s ease-in-out infinite}
.guide-arrow svg{width:34px;height:34px;fill:none;stroke:#FFC845;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.guide-backdrop.ios{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* áreas seguras (entalhe / barra inferior) */
.topbar{padding-top:env(safe-area-inset-top);padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));height:calc(var(--top-h) + env(safe-area-inset-top))}
.side{padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom))}
.zoom{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
@media (max-width:900px){
  html,body{overscroll-behavior-y:none}
  .topbar{height:auto;padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}
  .side{padding-left:max(14px,env(safe-area-inset-left));padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .card{bottom:calc(12px + env(safe-area-inset-bottom))}
  .btn.install{padding:0 12px}
  .btn.install span{display:inline}
  .offline-badge{top:10px;font-size:11.5px;padding:6px 11px}
  .stage{height:calc(62vh - env(safe-area-inset-top));height:calc(62dvh - env(safe-area-inset-top))}
}
@media (max-width:380px){ .btn.install span{display:none} }
/* app instalado: tela inteira, sem rolagem da página no paisagem */
html.standalone .topbar{background:linear-gradient(180deg,#06231E,rgba(4,20,17,.75))}
/* celular deitado (paisagem): escritório à esquerda, painel à direita */
@media (max-width:950px) and (max-height:520px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  #app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .topbar{flex-wrap:nowrap;position:relative;padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));gap:10px}
  .clock{order:0;width:auto;display:block}.clock-meta{display:none}.clock-time{font-size:18px}
  .brand h1{font-size:14px}.logo{height:22px}
  .actions .btn{height:32px}
  .layout{flex-direction:row;min-height:0}
  .stage{height:auto;min-height:0;flex:1}
  .side{width:280px;border-top:0;border-left:1px solid var(--line);overflow:auto;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) 10px}
  .feed{max-height:none}
  .card{left:auto!important;right:290px;width:300px;bottom:10px}
  .hint{display:none}
}
@media (max-width:900px) and (orientation:portrait){ .zoom{bottom:14px} }
@media (max-width:440px){ .clock{gap:8px}.clock-meta{white-space:nowrap;font-size:11.5px}.clock-meta .sep{margin:0 4px} }

/* =====================================================================
   PALETA DA MARCA RESOLVIM — fonte: resolvim.com.br (CSS e logo), favicon.svg, logo-branco.svg
   ===================================================================== */
:root{
  --marca-verde:#0B6E5B; --marca-verde-claro:#2F9A80; --marca-amarelo:#FFC845; --marca-coral:#FF7A59;
  --marca-tinta:#1B2430; --marca-creme:#FFF7EC; --marca-nevoa:#E3F1EC; --marca-borda:#C9E2D9;
  --marca-cinza:#4F5B66; --marca-branco:#FFFFFF;
  /* derivados (só para contraste) */
  --marca-verde-esc:#095C4C; --marca-coral-esc:#B0441F; --marca-amarelo-esc:#8A6400;
  --marca-azul:#6B8EBD; --marca-azul-esc:#3B577D; /* matiz da tinta #1B2430 clareado — só p/ "planejado" */
}
/* nomes antigos apontam para as variáveis novas */
:root{
  --verde:var(--marca-verde); --verde-2:var(--marca-verde-claro); --amarelo:var(--marca-amarelo); --coral:var(--marca-coral);
  --tinta:var(--marca-tinta); --creme:var(--marca-creme); --nevoa:var(--marca-nevoa); --cinza:var(--marca-cinza);
  --bg1:var(--ui-fundo-1); --bg2:var(--ui-fundo-2); --line:var(--ui-linha); --txt:var(--ui-txt); --txt2:var(--ui-txt-2);
}
html,body{background:var(--ui-fundo-2);color:var(--ui-txt)}
.feed li b,.card h3{color:var(--ui-txt)}
.chip.em_andamento{color:var(--st-andamento-txt);background:var(--st-andamento-bg)}
.chip.planejado{color:var(--st-planejado-txt);background:var(--st-planejado-bg)}
.chip.bloqueado{color:var(--st-bloqueado-txt);background:var(--st-bloqueado-bg)}
.chip.concluido{color:var(--st-concluido-txt);background:var(--st-concluido-bg)}
#stats .stat:nth-child(1) b{color:var(--st-andamento-num)!important}
#stats .stat:nth-child(2) b{color:var(--st-planejado-num)!important}
#stats .stat:nth-child(3) b{color:var(--st-bloqueado-num)!important}
#stats .stat:nth-child(4) b{color:var(--st-concluido-num)!important}
.btn:focus-visible,.zoom button:focus-visible,.team li:focus-visible,.card-close:focus-visible{outline-color:var(--marca-amarelo)}
/* microanimação de entrada (respeita "reduzir movimento") */
@keyframes entrar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.side .panel{animation:entrar .55s cubic-bezier(.16,1,.3,1) both}
.side .panel:nth-child(2){animation-delay:.08s}.side .panel:nth-child(3){animation-delay:.16s}.side .panel:nth-child(4){animation-delay:.24s}
.team li{transition:background .15s,transform .15s}
.team li:hover{transform:translateX(2px)}

/* =====================================================================
   TEMA AUTOMÁTICO DIA/NOITE (hora de Brasília)
   <html data-tema="dia">  = "Vidro Claro"   (06:00–17:59)
   <html data-tema="noite"> = "Noite Premium" (18:00–05:59)
   O app.js troca o atributo a cada minuto; ?tema=dia|noite fixa para teste.
   ===================================================================== */
/* fundo: o do dia fica embaixo e o da noite aparece por cima com fade */
#app{position:relative;isolation:isolate;background:radial-gradient(700px 520px at 18% 22%, rgba(47,154,128,.28), transparent 70%),
  radial-gradient(620px 460px at 78% 18%, rgba(255,200,69,.30), transparent 70%),
  radial-gradient(680px 520px at 60% 95%, rgba(255,122,89,.20), transparent 70%),
  linear-gradient(160deg,var(--ui-fundo-1),var(--ui-fundo-2))}
#app::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(900px 600px at 30% 30%, rgba(11,110,91,.45), transparent 65%),
  radial-gradient(700px 500px at 85% 95%, rgba(255,200,69,.12), transparent 65%),
  radial-gradient(500px 400px at 5% 95%, rgba(255,122,89,.10), transparent 65%),
  linear-gradient(160deg,var(--ui-fundo-1),var(--ui-fundo-2))}
html[data-tema="noite"] #app::before{opacity:1}
/* transição suave só durante a troca (cores da interface e da cena) */
html.trocando-tema,html.trocando-tema *{transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease,fill 1.2s ease,stroke 1.2s ease,stop-color 1.2s ease!important}

/* ---------- DIA: Vidro Claro ---------- */
html[data-tema="dia"]{--cena-tapete-ops:#F4F7FA; --cena-tapete-ops-borda:#0B6E5B; --cena-rotulo-ops:#0B6E5B;--ui-fundo-1:#FFF7EC; --ui-fundo-2:#F6EEE2; --ui-linha:rgba(27,36,48,.08); --ui-txt:var(--marca-tinta); --ui-txt-2:var(--marca-cinza); --vidro:rgba(255,255,255,.58); --vidro-forte:rgba(255,255,255,.78); --vidro-borda:rgba(255,255,255,.85); --desfoque:blur(18px) saturate(1.4); --sombra-suave:0 1px 2px rgba(27,36,48,.04),0 12px 32px -12px rgba(11,110,91,.22); --raio:22px; --st-andamento:var(--marca-verde-claro); --st-andamento-txt:var(--marca-verde); --st-andamento-bg:rgba(47,154,128,.14); --st-andamento-num:var(--marca-verde); --st-andamento-balao:var(--marca-verde); --st-planejado:var(--marca-azul); --st-planejado-txt:var(--marca-azul-esc); --st-planejado-bg:rgba(107,142,189,.16); --st-planejado-num:var(--marca-azul-esc); --st-planejado-balao:var(--marca-azul-esc); --st-bloqueado:var(--marca-coral); --st-bloqueado-txt:var(--marca-coral-esc); --st-bloqueado-bg:rgba(255,122,89,.16); --st-bloqueado-num:var(--marca-coral-esc); --st-bloqueado-balao:var(--marca-coral-esc); --st-concluido:var(--marca-amarelo); --st-concluido-txt:var(--marca-amarelo-esc); --st-concluido-bg:rgba(255,200,69,.26); --st-concluido-num:var(--marca-amarelo-esc); --st-concluido-balao:var(--marca-amarelo-esc); --cena-parede-a1:#FFFFFF; --cena-parede-a2:#FFF7EC; --cena-parede-b1:#FBF3E6; --cena-parede-b2:#F1E6D4; --cena-parede-topo:#E6DAC7; --cena-parede-lado:#DCCFBA; --cena-rodape:#2F9A80; --cena-piso-1:#F2F8F5; --cena-piso-2:#D6EAE2; --cena-piso-junta:#0B6E5B; --cena-piso-junta-op:.08; --cena-tapete-eng:#FFFFFF; --cena-tapete-mkt:#FFEDE6; --cena-tapete-pes:#FFF4D6; --cena-tapete-pes-borda:#E0B13A; --cena-tapete-atd:#FFFFFF; --cena-tapete-dir:#1B2430; --cena-tapete-dir-borda:#FFC845; --cena-cafe-1:#FFFFFF; --cena-cafe-2:#EFE4D2; --cena-rotulo:#0B6E5B; --cena-rotulo-mkt:#C4532F; --cena-rotulo-pes:#8A6400; --cena-base-1:#2F9A80; --cena-base-2:#0B6E5B; --cena-base-3:#0B6E5B; --cena-base-4:#095C4C; --cena-brilho-lampada:#FFE3A3; --cena-brilho-tela:#9EE6CF; --ui-theme-color:#FFF7EC; color-scheme:light; --cena-noite-min:0; --cena-noite-tinta:.24; --cena-luzes-min:0; --cena-noite-cor:#0A1638;}
html[data-tema="dia"] .topbar,html[data-tema="dia"].standalone .topbar{background:var(--vidro);backdrop-filter:var(--desfoque);-webkit-backdrop-filter:var(--desfoque);border-bottom:1px solid var(--vidro-borda);box-shadow:0 8px 30px -18px rgba(27,36,48,.35);color:var(--ui-txt)}
html[data-tema="dia"] .logo{background:var(--marca-verde);padding:3px 6px;border-radius:12px;box-sizing:content-box;height:32px}
@media (max-width:900px){html[data-tema="dia"] .logo{height:28px;padding:2px 5px}}
html[data-tema="dia"] .brand-text{border-left-color:rgba(27,36,48,.12)}
html[data-tema="dia"] .brand h1{font-weight:700;color:var(--marca-tinta)}
html[data-tema="dia"] .clock-time{color:var(--marca-tinta);font-weight:800}
html[data-tema="dia"] .live{color:var(--marca-coral-esc);background:rgba(255,122,89,.14);border-color:rgba(255,122,89,.4)}
html[data-tema="dia"] .live i{background:var(--marca-coral)}
html[data-tema="dia"] .live.off{color:var(--marca-cinza);background:rgba(79,91,102,.1);border-color:rgba(79,91,102,.3)}
html[data-tema="dia"] .btn{background:var(--marca-verde);color:#fff;border:0;border-radius:14px;box-shadow:0 8px 20px -10px rgba(11,110,91,.6)}
html[data-tema="dia"] .btn:hover{background:var(--marca-verde-esc)}
html[data-tema="dia"] .btn.ghost{background:var(--vidro-forte);color:var(--marca-tinta);border:1px solid var(--vidro-borda);box-shadow:none}
html[data-tema="dia"] .btn.ghost:hover{background:#fff}
html[data-tema="dia"] .side{background:transparent;border-left:0;gap:14px;padding-top:16px}
html[data-tema="dia"] .panel{background:var(--vidro);backdrop-filter:var(--desfoque);-webkit-backdrop-filter:var(--desfoque);border:1px solid var(--vidro-borda);border-radius:var(--raio);box-shadow:var(--sombra-suave);transition:transform .2s,box-shadow .2s}
html[data-tema="dia"] .panel:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(27,36,48,.06),0 18px 40px -14px rgba(11,110,91,.32)}
html[data-tema="dia"] .panel h2{font-weight:700;font-size:16px}
html[data-tema="dia"] .stat{background:rgba(255,255,255,.7);border-radius:16px}
html[data-tema="dia"] .stat b{font-weight:800}
html[data-tema="dia"] .feed li{border-bottom:1px solid rgba(27,36,48,.06)}
html[data-tema="dia"] .feed li .ic{background:rgba(255,255,255,.85);border-radius:12px}
html[data-tema="dia"] .team li:hover,html[data-tema="dia"] .team li.active{background:rgba(255,255,255,.75)}
html[data-tema="dia"] .team .av{background:rgba(255,255,255,.8);border-radius:12px}
html[data-tema="dia"] .team{scrollbar-color:rgba(27,36,48,.15) transparent}
html[data-tema="dia"] .chip{padding:6px 10px;font-weight:800}
html[data-tema="dia"] .pulse-dot{background:var(--marca-verde-claro);animation:none;box-shadow:0 0 0 4px rgba(47,154,128,.18)}
html[data-tema="dia"] .zoom button{background:var(--vidro-forte);backdrop-filter:var(--desfoque);color:var(--marca-verde);border:1px solid var(--vidro-borda);border-radius:50%;box-shadow:var(--sombra-suave)}
html[data-tema="dia"] .zoom button:hover{background:#fff}
html[data-tema="dia"] .hint{background:var(--vidro-forte);border:1px solid var(--vidro-borda);color:var(--marca-cinza);box-shadow:var(--sombra-suave)}
html[data-tema="dia"] .tag{background:rgba(255,255,255,.82);color:var(--marca-tinta);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 12px -4px rgba(27,36,48,.25);backdrop-filter:blur(6px)}
html[data-tema="dia"] .bubble .in{border-radius:16px;box-shadow:0 12px 30px -10px rgba(27,36,48,.35)}
html[data-tema="dia"] .card{background:var(--vidro-forte);backdrop-filter:var(--desfoque);-webkit-backdrop-filter:var(--desfoque);color:var(--ui-txt);border:1px solid var(--vidro-borda);border-radius:26px;box-shadow:0 30px 60px -20px rgba(27,36,48,.35)}
html[data-tema="dia"] .card-close{background:rgba(27,36,48,.06);color:var(--marca-cinza)}
html[data-tema="dia"] .card-avatar{background:linear-gradient(135deg,var(--marca-nevoa),var(--marca-creme))}
html[data-tema="dia"] .card-zone{color:var(--marca-verde)}
html[data-tema="dia"] .loading{background:var(--ui-fundo-1)}
html[data-tema="dia"] .spinner{border-color:var(--marca-borda);border-top-color:var(--marca-verde)}
@media (max-width:900px){html[data-tema="dia"] .side{padding-top:16px}}
/* faixa verde da marca atrás da barra de status do iPhone (app instalado); some onde não há entalhe */
html[data-tema="dia"] .topbar,html[data-tema="dia"].standalone .topbar{background:linear-gradient(var(--marca-verde),var(--marca-verde)) top/100% env(safe-area-inset-top,0px) no-repeat,var(--vidro)}

/* ---------- NOITE: Noite Premium ---------- */
html[data-tema="noite"]{--cena-tapete-ops:#2A3A4C; --cena-tapete-ops-borda:#4FD1A5; --cena-rotulo-ops:#4FD1A5;--ui-fundo-1:#1B2430; --ui-fundo-2:#11171F; --ui-linha:rgba(201,226,217,.12); --ui-txt:#FFF7EC; --ui-txt-2:#A9B6C2; --neon-verde:#4FD1A5; --painel:rgba(27,36,48,.72); --painel-borda:rgba(79,209,165,.18); --st-andamento:var(--neon-verde); --st-andamento-txt:var(--neon-verde); --st-andamento-bg:rgba(79,209,165,.13); --st-andamento-num:var(--neon-verde); --st-andamento-balao:var(--marca-verde); --st-planejado:#8FB0DB; --st-planejado-txt:#9DBBE3; --st-planejado-bg:rgba(143,176,219,.14); --st-planejado-num:#9DBBE3; --st-planejado-balao:var(--marca-azul-esc); --st-bloqueado:var(--marca-coral); --st-bloqueado-txt:#FF9576; --st-bloqueado-bg:rgba(255,122,89,.15); --st-bloqueado-num:#FF9576; --st-bloqueado-balao:var(--marca-coral-esc); --st-concluido:var(--marca-amarelo); --st-concluido-txt:var(--marca-amarelo); --st-concluido-bg:rgba(255,200,69,.14); --st-concluido-num:var(--marca-amarelo); --st-concluido-balao:var(--marca-amarelo-esc); --cena-noite-min:.5; --cena-noite-tinta:.03; --cena-luzes-min:.9; --cena-noite-cor:#0B1220; --cena-brilho-lampada:#FFC845; --cena-brilho-tela:#4FD1A5; --cena-parede-a1:#3A4757; --cena-parede-a2:#324050; --cena-parede-b1:#36424F; --cena-parede-b2:#2D3946; --cena-parede-topo:#4A586A; --cena-parede-lado:#414E5F; --cena-rodape:#4FD1A5; --cena-piso-1:#344456; --cena-piso-2:#263343; --cena-piso-junta:#4FD1A5; --cena-piso-junta-op:.12; --cena-piso-dir:#2A2420; --cena-tapete-eng:#1D4A41; --cena-tapete-mkt:#4A3129; --cena-tapete-pes:#4A4020; --cena-tapete-pes-borda:#FFC845; --cena-tapete-atd:#1D4A41; --cena-tapete-dir:#0E141B; --cena-tapete-dir-borda:#FFC845; --cena-cafe-1:#3E4A5A; --cena-cafe-2:#2E3946; --cena-rotulo:#4FD1A5; --cena-rotulo-mkt:#FF9576; --cena-rotulo-pes:#FFC845; --cena-rotulo-cafe:#E9DCC6; --cena-base-1:#0B6E5B; --cena-base-2:#095C4C; --cena-base-3:#073E34; --cena-base-4:#052E27; --ui-theme-color:#11171F; color-scheme:dark;}
html[data-tema="noite"] .topbar,html[data-tema="noite"].standalone .topbar{background:rgba(17,23,31,.78);backdrop-filter:blur(14px);border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,var(--neon-verde) 25%,var(--marca-amarelo) 75%,transparent) 1;color:var(--ui-txt)}
html[data-tema="noite"] .brand-text{border-left-color:var(--ui-linha)}
html[data-tema="noite"] .clock-time{color:#fff;text-shadow:0 0 18px rgba(79,209,165,.45)}
html[data-tema="noite"] .clock-meta{color:var(--ui-txt-2)}
html[data-tema="noite"] .live{background:rgba(255,122,89,.14);border-color:rgba(255,122,89,.5);box-shadow:0 0 14px rgba(255,122,89,.25)}
html[data-tema="noite"] .live i{background:var(--marca-coral)}
html[data-tema="noite"] .btn{background:var(--marca-verde);border:1px solid rgba(79,209,165,.45);box-shadow:0 0 18px -4px rgba(79,209,165,.55)}
html[data-tema="noite"] .btn:hover{background:var(--marca-verde-claro)}
html[data-tema="noite"] .btn.ghost{background:rgba(255,255,255,.05);border-color:var(--ui-linha);box-shadow:none}
html[data-tema="noite"] .btn.ghost:hover{background:rgba(255,255,255,.1)}
html[data-tema="noite"] .side{background:linear-gradient(180deg,rgba(17,23,31,.6),rgba(17,23,31,.85));border-left-color:var(--ui-linha)}
html[data-tema="noite"] .panel{background:var(--painel);border:1px solid var(--painel-borda);border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 18px 40px -20px rgba(0,0,0,.6),0 0 30px -18px rgba(79,209,165,.5);transition:box-shadow .2s,border-color .2s}
html[data-tema="noite"] .panel:hover{border-color:rgba(79,209,165,.4);box-shadow:0 18px 40px -20px rgba(0,0,0,.6),0 0 36px -12px rgba(79,209,165,.55)}
html[data-tema="noite"] .panel h2{font-weight:700;letter-spacing:.4px}
html[data-tema="noite"] .stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
html[data-tema="noite"] #stats .stat b{text-shadow:0 0 14px currentColor}
html[data-tema="noite"] .pulse-dot{background:var(--neon-verde);box-shadow:0 0 10px var(--neon-verde)}
html[data-tema="noite"] .feed li{border-bottom-color:rgba(255,255,255,.06)}
html[data-tema="noite"] .feed li .ic{background:rgba(79,209,165,.1)}
html[data-tema="noite"] .team li:hover,html[data-tema="noite"] .team li.active{background:rgba(79,209,165,.1)}
html[data-tema="noite"] .team .av{background:rgba(255,255,255,.06)}
html[data-tema="noite"] .chip{border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent)}
html[data-tema="noite"] .chip i{box-shadow:0 0 8px currentColor}
html[data-tema="noite"] .zoom button{background:rgba(17,23,31,.8);border-color:rgba(79,209,165,.3);color:var(--neon-verde)}
html[data-tema="noite"] .zoom button:hover{background:rgba(11,110,91,.9);color:#fff}
html[data-tema="noite"] .hint{background:rgba(17,23,31,.8);border-color:var(--ui-linha);color:var(--ui-txt-2)}
html[data-tema="noite"] .tag{background:rgba(11,18,26,.85);border-color:rgba(79,209,165,.25)}
html[data-tema="noite"] .bubble .in{background:#FFF7EC;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 20px -6px rgba(255,200,69,.35)}
html[data-tema="noite"] .bubble.think .in,html[data-tema="noite"] .bubble.think .in::before{background:#E3F1EC}
html[data-tema="noite"] .card{background:rgba(22,30,40,.95);border:1px solid rgba(79,209,165,.3);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px -14px rgba(79,209,165,.5)}
html[data-tema="noite"] .card-zone{color:var(--marca-amarelo)}
html[data-tema="noite"] .card-role,html[data-tema="noite"] .card-task-label,html[data-tema="noite"] .card-doing{color:var(--ui-txt-2)}
html[data-tema="noite"] .loading{background:var(--ui-fundo-2)}
html[data-tema="noite"] .spinner{border-color:rgba(255,255,255,.1);border-top-color:var(--neon-verde)}

/* =====================================================================
   PORTA DISCRETA + SALINHA (homenagem)
   ===================================================================== */
.porta{cursor:pointer;outline:none}
.porta .porta-folha{transform-box:fill-box;transform-origin:0% 50%;transition:transform .75s cubic-bezier(.3,.7,.2,1),filter .3s}
.porta .porta-brilho{opacity:0;transition:opacity .7s ease}
.porta .porta-fresta{opacity:.5;transition:opacity .4s}
html[data-tema="noite"] .porta .porta-fresta{opacity:.7}
.porta:hover .porta-folha,.porta:focus-visible .porta-folha{filter:brightness(1.12)}
.porta:hover .porta-fresta,.porta:focus-visible .porta-fresta{opacity:.9}
.porta.aberta .porta-folha{transform:scaleX(.14)}
.porta.aberta .porta-brilho{opacity:1}

.sala{--sala-parede-1:#F8EBD6;--sala-parede-2:#EBD3AE;--sala-lambri:#9A6B45;--sala-piso:#B98556;--sala-luz:rgba(255,214,140,.55);--sala-fundo:rgba(27,20,14,.55);
  position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:var(--sala-fundo);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .6s ease}
html[data-tema="noite"] .sala{--sala-parede-1:#5A4230;--sala-parede-2:#3A2A1E;--sala-lambri:#5E3F28;--sala-piso:#6E4A2E;--sala-luz:rgba(255,200,110,.5);--sala-fundo:rgba(5,8,12,.7)}
.sala[hidden]{display:none}
.sala.show{opacity:1}
.sala-quarto{position:relative;width:min(920px,100%);height:min(640px,100%);border-radius:26px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:scale(.96) translateY(10px);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.sala.show .sala-quarto{transform:none}
.sala-parede{position:absolute;inset:0;background:linear-gradient(180deg,var(--sala-parede-1),var(--sala-parede-2))}
.sala-luz{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.8s ease .3s;
  background:radial-gradient(60% 55% at 50% 30%,var(--sala-luz),transparent 70%),radial-gradient(18% 22% at 22% 30%,rgba(255,220,150,.45),transparent 70%),radial-gradient(18% 22% at 78% 30%,rgba(255,220,150,.45),transparent 70%)}
.sala.show .sala-luz{opacity:1}
.sala-arandela{position:absolute;top:24%;width:26px;height:34px;border-radius:13px 13px 6px 6px;background:linear-gradient(180deg,#FFE9B8,#F2C46E);box-shadow:0 0 30px 10px rgba(255,214,140,.45)}
.sala-arandela.l{left:calc(50% - 250px)}.sala-arandela.r{right:calc(50% - 250px)}
.sala-arandela::after{content:"";position:absolute;left:50%;top:100%;width:4px;height:18px;margin-left:-2px;background:#6B4A2F;border-radius:2px}
.sala-quadro{position:absolute;left:50%;top:8%;height:62%;aspect-ratio:554/800;transform:translateX(-50%);margin:0;padding:12px;background:#FFF7EC;
  border:12px solid #6B4A2F;border-radius:4px;box-shadow:0 2px 0 #8A6242 inset,0 18px 40px rgba(40,24,10,.45),0 0 0 1px rgba(0,0,0,.15)}
.sala-quadro img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}
.sala-lambri{position:absolute;left:0;right:0;bottom:16%;height:12%;background:linear-gradient(180deg,var(--sala-lambri),color-mix(in srgb,var(--sala-lambri) 80%,#000));border-top:5px solid color-mix(in srgb,var(--sala-lambri) 70%,#fff)}
.sala-piso{position:absolute;left:0;right:0;bottom:0;height:16%;background:repeating-linear-gradient(90deg,var(--sala-piso) 0 90px,color-mix(in srgb,var(--sala-piso) 88%,#000) 90px 92px)}
.sala-mesinha{position:absolute;right:calc(50% - 390px);bottom:9%;width:120px;height:46%}
.sala-girassol{position:absolute;left:0;right:0;bottom:calc(34% + 10px);height:66%}
.sala-girassol svg{width:100%;height:100%;overflow:visible}
.sala-tampo{position:absolute;left:0;right:0;bottom:34%;height:10px;border-radius:5px;background:#7A5234;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.sala-pe{position:absolute;left:50%;bottom:0;width:10px;height:34%;margin-left:-5px;background:#6B4A2F}
.sala-voltar{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:99px;border:1px solid rgba(255,255,255,.35);
  background:rgba(27,36,48,.55);color:#FFF7EC;font:600 14px Poppins,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.sala-voltar:hover{background:rgba(27,36,48,.75)}
.sala-voltar:focus-visible{outline:3px solid var(--marca-amarelo);outline-offset:2px}
.sala-voltar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .sala-quarto{height:min(720px,100%)}
  .sala-quadro{top:12%;height:52%;padding:8px;border-width:9px}
  .sala-arandela{display:none}
  .sala-mesinha{right:4%;width:66px;height:30%;bottom:8%}
}
@media (prefers-reduced-motion: reduce){ .porta .porta-folha,.sala,.sala-quarto,.sala-luz{transition:none} }

/* imagem de compartilhamento (og.jpg) no tema de dia: título em verde da marca sobre cartão creme */
html[data-tema="dia"] .og-title{background:rgba(255,247,236,.92);border:1px solid #C9E2D9;border-radius:22px;padding:16px 22px 18px;box-shadow:0 12px 36px rgba(11,110,91,.16)}
html[data-tema="dia"] .og-title b{color:#0B6E5B;text-shadow:none}
html[data-tema="dia"] .og-title b::after{content:"";display:inline-block;width:.22em;height:.22em;margin-left:.08em;border-radius:50%;background:#FFC845}