/* Layout: uma coluna estilo Notion — capa, sumário em tabela, e cada conteúdo como linha (mídia à esquerda, legenda à direita); footer escuro da Elev. */
:root{
  --bg:#FBFAF7; --surface:#F3F2EE; --card:#FFFFFF; --ink:#1D1C1A; --muted:#6B6861;
  --line:#E6E4DE; --line-strong:#D3D0C9; --accent:#1D1C1A; --on-accent:#FBFAF7; --hover:#EBE9E4; --side:#F3F2EE;
  --rec:#A84F1A; --rec-bg:#FBEADB; --ok:#2C7A4B; --danger:#B3261E; --danger-bg:#FCE9E7;
  --footer-bg:#0E0C0A; --footer-ink:#EDE6DE; --footer-muted:#8E8478; --footer-line:rgba(237,230,222,.12);
  --overlay:rgba(14,12,10,.55); --overlay-ink:#FFFFFF;
  --font:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#191918; --surface:#232322; --card:#212120; --ink:#EDECE8; --muted:#A3A09A;
  --line:#302F2D; --line-strong:#3E3D3A; --accent:#EDECE8; --on-accent:#191918; --hover:#2B2B29; --side:#1D1D1C;
  --rec:#F0A66F; --rec-bg:#3A2718; --ok:#7CC79A; --danger:#F2867E; --danger-bg:#3A1C19;
  --overlay:rgba(0,0,0,.6); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#191918; --surface:#232322; --card:#212120; --ink:#EDECE8; --muted:#A3A09A;
  --line:#302F2D; --line-strong:#3E3D3A; --accent:#EDECE8; --on-accent:#191918; --hover:#2B2B29; --side:#1D1D1C;
  --rec:#F0A66F; --rec-bg:#3A2718; --ok:#7CC79A; --danger:#F2867E; --danger-bg:#3A1C19;
  --overlay:rgba(0,0,0,.6); color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{max-width:1160px; margin:0 auto; padding-inline:24px}
@media (max-width:600px){ .wrap{padding-inline:16px} }
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0}

/* ---------- barra de edição ---------- */
.ebar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--accent); color:var(--on-accent)}
.ebar .wrap{display:flex; align-items:center; gap:12px; padding-block:10px; flex-wrap:wrap}
.ebar .st{font-size:13px; display:flex; align-items:center; gap:8px; margin-right:auto; min-width:0}
.ebar .dot{width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.45; flex:none}
.ebar .st.dirty .dot{opacity:1; background:#E9A23B}
.ebar .st.saving .dot{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.2}}
.ebtn{border:1px solid color-mix(in srgb, var(--on-accent) 30%, transparent); background:transparent; color:var(--on-accent); padding:6px 14px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:500}
.ebtn:hover{background:color-mix(in srgb, var(--on-accent) 12%, transparent)}
.ebtn.primary{background:var(--on-accent); color:var(--accent); border-color:var(--on-accent)}
.ebtn.primary:hover{opacity:.9}
.ebtn:disabled{opacity:.45; cursor:default}

/* ---------- topo e capa ---------- */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:12px; padding-block:16px}
.elev{height:16px; width:auto; color:var(--ink); display:block}
.top .sep{width:1px; height:14px; background:var(--line-strong)}
.top .t{font-size:13px; color:var(--muted)}
.hero{padding-block:56px 40px}
.hero-row{display:flex; gap:28px; align-items:flex-end; flex-wrap:wrap}
.clogo{width:88px; height:88px; border-radius:16px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; overflow:hidden; flex:none}
.clogo img{width:100%; height:100%; object-fit:contain; padding:10px}
.hero h1{font-size:clamp(34px,6vw,56px); line-height:1.02; letter-spacing:-.035em; font-weight:600; margin:6px 0 0; text-wrap:balance}
.hero h1.ph{color:var(--line-strong)}
.hero .period{font-size:18px; color:var(--muted); margin:10px 0 0; letter-spacing:-.01em}
.stats{display:flex; gap:28px; flex-wrap:wrap; margin:36px 0 0; padding:18px 0 0; border-top:1px solid var(--line)}
.stats div{display:flex; flex-direction:column; gap:2px}
.stats dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.stats dd{margin:0; font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ---------- sumário ---------- */
.idx{padding-block:8px 40px}
.idx h2,.feed>h2{font-size:13px; font-weight:600; margin:0 0 12px; letter-spacing:-.005em}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
th{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface)}
td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface)}
td.n{width:56px; font-family:var(--mono); color:var(--muted)}
td.d{width:120px; font-family:var(--mono); white-space:nowrap}
td.f{width:120px}
td.tm{color:var(--muted); max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* chips de formato */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:2px 9px 2px 7px; border-radius:6px; background:var(--surface); border:1px solid var(--line); white-space:nowrap}
.chip i{width:9px; height:11px; border:1.5px solid currentColor; border-radius:2px; display:inline-block}
.chip.carrossel i{box-shadow:3px -3px 0 -1.5px var(--surface), 3px -3px 0 0 currentColor}
.chip.reels i{width:8px; height:13px; border-radius:2px}
.chip.story i{width:9px; height:13px; border-radius:5px; border-style:dashed}
.thumbs.tall .thumb,.thumbs.tall .drop{aspect-ratio:9/16}
.car-track>video{flex:0 0 100%; scroll-snap-align:start; width:100%; height:100%; object-fit:cover; background:var(--surface)}
.watch-inline{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:600; font-size:14px; padding:11px; border-radius:8px}
.watch-inline:hover{opacity:.9}
.badge-rec{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--rec); background:var(--rec-bg); padding:3px 9px; border-radius:6px; white-space:nowrap}
.badge-rec::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}

/* ---------- conteúdos (visualização) ---------- */
.feed{padding-block:8px 72px}
.vcard{padding-block:36px; border-top:1px solid var(--line); scroll-margin-top:72px}
.vmeta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.vnum{font-family:var(--mono); font-size:13px; font-weight:500}
.vdate{font-family:var(--mono); font-size:13px; color:var(--muted)}
.vbody{display:grid; grid-template-columns:minmax(0,500px) minmax(0,1fr); gap:48px; align-items:start}
.vbody.reels,.vbody.story{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
@media (max-width:980px){ .vbody{grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:36px} .vbody.reels,.vbody.story{grid-template-columns:minmax(0,320px) minmax(0,1fr)} }
@media (max-width:760px){ .vbody,.vbody.reels,.vbody.story{grid-template-columns:minmax(0,1fr); gap:24px} .vmedia{max-width:560px} .vbody.reels .vmedia,.vbody.story .vmedia{max-width:400px} }
.frame{position:relative; width:100%; aspect-ratio:4/5; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; max-width:100%}
.frame.tall{aspect-ratio:9/16}
.frame img,.frame video{width:100%; height:100%; object-fit:contain; display:block; background:var(--surface)}
img[src^="data:image/gif"]{background:transparent!important}
.frame:has(img[src^="data:image/gif"]),.thumb:has(img[src^="data:image/gif"]),.single:has(img[src^="data:image/gif"]),.clogo:has(img[src^="data:image/gif"]){background-image:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--line-strong) 55%, transparent) 50%, transparent 70%); background-size:250% 100%; animation:shim 1.3s linear infinite}
@keyframes shim{from{background-position:120% 0} to{background-position:-120% 0}}
.backrow{margin-bottom:18px}
.backbtn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--card); border-radius:7px; padding:5px 12px; font-size:13px; cursor:pointer; color:var(--ink)}
.backbtn:hover{border-color:var(--accent)}
.frame.tall img,.frame.tall video{object-fit:cover}
.frame .empty{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--muted); font-size:13px; padding:20px}
.car-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; height:100%; scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-track>img{flex:0 0 100%; scroll-snap-align:start}
.car-nav{position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:0; background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.18); cursor:pointer; display:grid; place-items:center; font-size:15px}
.car-nav.p{left:10px} .car-nav.n{right:10px}
.car-nav[disabled]{opacity:0; pointer-events:none}
.car-count{position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:11.5px; background:var(--overlay); color:var(--overlay-ink); padding:2px 8px; border-radius:20px}
.car-dots{display:flex; justify-content:center; gap:5px; margin-top:12px}
.car-dots span{width:6px; height:6px; border-radius:50%; background:var(--line-strong); transition:background .2s}
.car-dots span.on{background:var(--ink)}
.watch{position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--overlay); color:var(--overlay-ink); text-decoration:none; font-weight:600; font-size:14px; padding:12px; border-radius:8px; backdrop-filter:blur(6px)}
.watch:hover{background:rgba(14,12,10,.75)}
.play{width:0; height:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.rec-over{position:absolute; top:12px; left:12px}
.vtext{min-width:0; display:flex; flex-direction:column; gap:24px; max-width:620px}
.vtext section{display:flex; flex-direction:column; gap:8px}
.caption{white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.65; margin:0}
.caption .tag{color:var(--muted)}
.script{white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; font-size:14.5px; line-height:1.65; margin:0}
.nocap{color:var(--muted); font-style:italic; margin:0}
.feed-empty{border:1px dashed var(--line-strong); border-radius:var(--r); padding:48px 24px; text-align:center; color:var(--muted)}

/* ---------- edição ---------- */
.setup{padding-block:40px 24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 140px; gap:16px; align-items:end}
@media (max-width:700px){ .setup{grid-template-columns:minmax(0,1fr)} }
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.inp{width:100%; border:1px solid var(--line-strong); background:var(--card); border-radius:8px; padding:9px 12px; font-size:15px}
.inp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent)}
.inp.big{font-size:20px; font-weight:600; letter-spacing:-.02em; padding:10px 12px}
textarea.inp{resize:vertical; min-height:140px; line-height:1.6; font-size:14.5px}
.drop{position:relative; border:1.5px dashed var(--line-strong); border-radius:var(--r); background:var(--surface); display:grid; place-items:center; text-align:center; color:var(--muted); font-size:13px; cursor:pointer; padding:14px; transition:border-color .15s, background .15s; overflow:hidden}
.drop:hover,.drop.over{border-color:var(--accent); color:var(--ink)}
.drop input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.drop strong{display:block; color:var(--ink); font-weight:500; font-size:13.5px}
.logo-drop{height:92px; padding:8px}
.logo-drop img{max-height:76px; object-fit:contain}
.mini-actions{display:flex; gap:6px; margin-top:6px}
.lnk{border:0; background:none; padding:0; font-size:12.5px; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.lnk:hover{color:var(--ink)}
.lnk.danger{color:var(--danger)}
.addbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-block:20px; border-top:1px solid var(--line)}
.addbar .lbl{margin-right:4px}
.abtn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong); background:var(--card); border-radius:8px; padding:8px 14px; font-size:14px; font-weight:500; cursor:pointer}
.abtn:hover{border-color:var(--accent)}
.abtn .plus{font-family:var(--mono); color:var(--muted)}
.abtn.ghost{border-color:transparent; background:none; color:var(--muted); margin-left:auto}
.abtn.ghost:hover{color:var(--ink); border-color:var(--line-strong)}
.ecard{border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:16px; scroll-margin-top:72px; transition:border-color .2s}
.ecard.active{border-color:var(--line-strong); box-shadow:0 2px 14px rgba(0,0,0,.05)}
.ehead{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line)}
.ehead label{display:flex; align-items:center; gap:8px}
.ehead .inp{padding:5px 9px; font-size:14px}
.in-num{width:64px; font-family:var(--mono)}
.in-date{width:118px; font-family:var(--mono)}
.inp.bad{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent)}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:8px; padding:2px; background:var(--surface)}
.seg button{border:0; background:none; padding:4px 11px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--muted)}
.seg button.on{background:var(--card); color:var(--ink); font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.etools{margin-left:auto; display:flex; gap:4px}
.ibtn{width:30px; height:30px; border-radius:7px; border:1px solid transparent; background:none; cursor:pointer; color:var(--muted); font-size:14px; display:grid; place-items:center}
.ibtn:hover{border-color:var(--line-strong); color:var(--ink)}
.ibtn:disabled{opacity:.3; cursor:default; border-color:transparent}
.del-confirm{border:0; background:var(--danger-bg); color:var(--danger); font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:7px; cursor:pointer}
.ebody{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:24px; padding:20px 16px}
@media (max-width:760px){ .ebody{grid-template-columns:minmax(0,1fr)} }
.emedia{display:flex; flex-direction:column; gap:10px; min-width:0}
.single{aspect-ratio:4/5; width:100%}
.single.tall{aspect-ratio:9/16; max-width:220px}
.single img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--surface)}
.single.tall img{object-fit:cover}
.thumbs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.thumb{position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .ti{position:absolute; top:5px; left:5px; font-family:var(--mono); font-size:10.5px; background:var(--overlay); color:var(--overlay-ink); padding:0 6px; border-radius:10px}
.thumb .tb{position:absolute; inset:auto 4px 4px 4px; display:flex; justify-content:space-between; opacity:0; transition:opacity .15s}
.thumb:hover .tb,.thumb:focus-within .tb{opacity:1}
@media (hover:none){ .thumb .tb{opacity:1} }
.thumb .tb button{width:24px; height:24px; border-radius:6px; border:0; background:var(--card); color:var(--ink); cursor:pointer; font-size:12px; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.thumb .tb button:disabled{opacity:.35}
.thumbs .drop{aspect-ratio:4/5; padding:6px; font-size:12px}
.hint{font-size:12.5px; color:var(--muted); margin:0; line-height:1.5}
.hint.err{color:var(--danger)}
.etext{display:flex; flex-direction:column; gap:16px; min-width:0}
.vid{display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.vid .seg{background:var(--card); align-self:flex-start}
.vid .seg button.on{background:var(--surface)}
.vid-file{display:flex; align-items:center; gap:10px; font-size:13px; flex-wrap:wrap}
.empty-edit{border:1px dashed var(--line-strong); border-radius:12px; padding:40px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--muted)}
.empty-edit .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* ---------- footer Elev ---------- */
#app{min-height:100vh; display:flex; flex-direction:column}
.foot{background:var(--footer-bg); color:var(--footer-ink); margin-top:auto}
.foot-in{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; padding-block:56px 40px}
@media (max-width:640px){ .foot-in{grid-template-columns:minmax(0,1fr)} }
.foot .elev{height:26px; color:var(--footer-ink); margin-bottom:18px}
.foot p{color:var(--footer-muted); font-size:14px; max-width:360px; margin:0; line-height:1.6}
.foot-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.fcol{display:flex; flex-direction:column; gap:9px}
.fcol .ft{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--footer-muted)}
.fcol a{color:var(--footer-ink); text-decoration:none; font-size:14px; font-weight:500; width:fit-content; border-bottom:1px solid transparent}
.fcol a:hover{border-bottom-color:var(--footer-ink)}
.foot-bot{border-top:1px solid var(--footer-line); padding-block:20px; text-align:center; font-size:12.5px; color:var(--footer-muted)}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:9px; font-size:14px; z-index:50; max-width:calc(100% - 32px); box-shadow:0 6px 24px rgba(0,0,0,.2)}
.toast.err{background:var(--danger); color:#fff}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }

/* ---------- painel: início e lista ---------- */
.nav{display:flex; gap:4px; margin-left:auto}
.nav button{border:0; background:none; padding:6px 10px; border-radius:7px; font-size:13px; color:var(--muted); cursor:pointer}
.nav button:hover{color:var(--ink); background:var(--surface)}
.nav button.on{color:var(--ink); font-weight:500; background:var(--surface)}
.home{padding-block:56px 64px}
.home h1{font-size:clamp(30px,5vw,44px); letter-spacing:-.03em; line-height:1.05; font-weight:600; margin:6px 0 32px; text-wrap:balance}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:640px){ .tiles{grid-template-columns:minmax(0,1fr)} }
.tile{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; border:1px solid var(--line-strong); background:var(--card); border-radius:14px; padding:24px; cursor:pointer; min-height:150px; transition:border-color .15s, transform .15s}
.tile:hover{border-color:var(--accent)}
.tile.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.tile .ico{font-family:var(--mono); font-size:22px; line-height:1; margin-bottom:auto; opacity:.7}
.tile b{font-size:20px; font-weight:600; letter-spacing:-.02em}
.tile span{font-size:14px; opacity:.72}
.recent{margin-top:48px}
.recent h2,.list h2{font-size:13px; font-weight:600; margin:0 0 12px}
.rows{border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden}
.prow{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 150px auto; gap:16px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .cl{font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .pe{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .cr{font-family:var(--mono); font-size:12.5px; color:var(--muted); white-space:nowrap}
.prow .acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.sbtn{border:1px solid var(--line-strong); background:var(--card); border-radius:7px; padding:5px 11px; font-size:13px; cursor:pointer; white-space:nowrap}
.sbtn:hover{border-color:var(--accent)}
.sbtn.dark{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
@media (max-width:760px){ .prow{grid-template-columns:minmax(0,1fr); gap:4px} .prow .acts{justify-content:flex-start; margin-top:8px} }
.list{padding-block:48px 64px}
.list-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.list-head h1{font-size:30px; letter-spacing:-.03em; font-weight:600; margin:4px 0 0}
.meter{display:flex; flex-direction:column; gap:6px; min-width:220px}
.meter .bar{height:6px; border-radius:6px; background:var(--surface); border:1px solid var(--line); overflow:hidden}
.meter .bar i{display:block; height:100%; background:var(--ink)}
.meter .bar i.warn{background:var(--rec)}
.meter small{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.empty-list{border:1px dashed var(--line-strong); border-radius:var(--r); padding:40px 24px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:14px}
.linkbox{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); margin-bottom:8px}
.linkbox .inp{flex:1 1 260px; font-family:var(--mono); font-size:12.5px; padding:7px 10px; min-width:0}
.modal-bg{position:fixed; inset:0; z-index:60; background:rgba(14,12,10,.45); display:grid; place-items:center; padding:16px; overflow:auto}
.modal{background:var(--card); color:var(--ink); border-radius:14px; width:100%; max-width:560px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:18px; max-height:calc(100vh - 32px); overflow:auto}
.modal h3{margin:0; font-size:20px; letter-spacing:-.02em; font-weight:600}
.modal .mhead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.steps{display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; counter-reset:st}
.steps>li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; counter-increment:st; font-size:14px; line-height:1.5}
.steps>li::before{content:counter(st); width:24px; height:24px; border-radius:50%; background:var(--surface); border:1px solid var(--line-strong); display:grid; place-items:center; font-family:var(--mono); font-size:12px}
.copyfield{display:flex; align-items:center; gap:6px; margin-top:6px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); padding:4px 4px 4px 10px; min-width:0}
.copyfield code{flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cbtn{width:30px; height:30px; flex:none; border:0; border-radius:6px; background:var(--card); color:var(--ink); cursor:pointer; display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.1)}
.cbtn:hover{background:var(--line)}
.cbtn svg{width:15px; height:15px}
.cbtn.ok{color:var(--ok)}
.openw{display:inline-flex; align-items:center; gap:6px; margin-top:6px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-size:13.5px; font-weight:500; padding:7px 14px; border-radius:8px; width:fit-content}
.openw:hover{opacity:.9}
.note{font-size:13px; background:var(--rec-bg); color:var(--rec); border-radius:8px; padding:10px 12px; margin:0}
.mfoot{display:flex; gap:8px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px}
.mfoot .inp{flex:1 1 220px; font-size:14px; padding:8px 10px; min-width:0}
.prune{font-size:12.5px; color:var(--rec); margin:6px 0 0}
.center-msg{padding-block:120px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px}
.center-msg b{color:var(--ink); font-size:18px; font-weight:600}
.ebar .back{border:0; background:none; color:var(--on-accent); font-size:13px; cursor:pointer; padding:6px 4px; opacity:.85}
.ebar .back:hover{opacity:1; text-decoration:underline}

/* ---------- site: base, login e links ---------- */
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.login{padding-block:72px 96px}
.login-card{max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px}
.login-card h1{margin:0 0 4px; font-size:30px; letter-spacing:-.03em; font-weight:600}
.login-btn{padding:10px 16px; font-size:14px; justify-content:center}
.links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:8px}
@media (max-width:700px){ .links{grid-template-columns:minmax(0,1fr)} }
.links .copyfield{margin-top:0; background:var(--card)}

.ecard.moved{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent)}

.vid.main{background:var(--card); border-color:var(--line-strong)}
.video-drop{min-height:150px; padding:16px}
.video-drop span{display:flex; flex-direction:column; gap:4px; align-items:center}
.video-drop strong{font-size:15px}
.cover-drop.single.tall{max-width:180px}
.prow.pick{cursor:pointer; grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto}
.prow.pick input{width:18px; height:18px; accent-color:var(--danger)}
.prow.pick.on{background:var(--danger-bg)}
.sbtn:disabled{opacity:.45; cursor:default}

/* ---------- clientes ---------- */
.combo{position:relative}
.combo-wrap{position:relative}
.combo-wrap .ccard-logo.in{position:absolute; left:10px; top:50%; transform:translateY(-50%)}
.inp.with-logo{padding-left:50px}
.combo-list{position:absolute; z-index:30; left:0; right:0; top:calc(100% - 4px); background:var(--card); border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.14); padding:6px; display:flex; flex-direction:column; gap:2px; max-height:320px; overflow:auto}
.combo-opt{display:flex; align-items:center; gap:10px; border:0; background:none; text-align:left; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:14.5px}
.combo-opt:hover,.combo-opt:focus-visible{background:var(--surface)}
.combo-opt .sw{margin-left:auto}
.combo-opt.add{color:var(--ink); font-weight:600; border-top:1px solid var(--line); border-radius:0 0 7px 7px}
.combo-empty{padding:10px; color:var(--muted); font-size:13px}
.ccard-logo{width:44px; height:44px; flex:none; border-radius:10px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; overflow:hidden}
.ccard-logo img{width:100%; height:100%; object-fit:contain; padding:4px}
.ccard-logo b{font-size:18px; color:var(--muted)}
.ccard-logo.sm{width:30px; height:30px; border-radius:7px}
.ccard-logo.sm b{font-size:13px}
.sw{display:inline-flex; gap:3px}
.sw i{width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.12); display:block}
.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.ccard{display:flex; align-items:center; gap:12px; text-align:left; border:1px solid var(--line); background:var(--card); border-radius:12px; padding:14px; cursor:pointer}
.ccard:hover{border-color:var(--accent)}
.ccard-txt{display:flex; flex-direction:column; min-width:0; flex:1}
.ccard-txt b{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ccard-txt small{color:var(--muted); font-size:12.5px; font-family:var(--mono)}
.brand-toggle{display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); background:var(--card); border-radius:8px; padding:12px; cursor:pointer; font-size:14px; min-height:50px}
.brand-toggle input{width:18px; height:18px; accent-color:var(--accent)}
.modal.cmodal{max-width:900px}
.cm-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:24px; align-items:start}
@media (max-width:760px){ .cm-grid{grid-template-columns:minmax(0,1fr)} }
.cm-form{display:flex; flex-direction:column; gap:16px; min-width:0}
.cm-logo-row{display:flex; align-items:center; gap:12px}
.cm-logo{width:88px; height:88px; padding:6px; flex:none}
.cm-logo img{max-width:100%; max-height:100%; object-fit:contain}
.crows{display:flex; flex-direction:column; gap:8px}
.crow{display:grid; grid-template-columns:44px 104px minmax(0,1fr) 30px; gap:10px; align-items:center}
.cpick{width:44px; height:40px; border:1px solid var(--line-strong); border-radius:8px; padding:3px; background:var(--card); cursor:pointer}
.chex{font-family:var(--mono); font-size:13.5px; padding:8px 10px; text-transform:uppercase}
.crole{display:flex; flex-direction:column; font-size:12.5px; color:var(--muted); line-height:1.3}
.crole b{color:var(--ink); font-size:13px}
.cm-prev{display:flex; flex-direction:column; gap:8px; position:sticky; top:0}
/* mini página de exemplo */
.bp{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); font-size:12px}
.bp-hero{display:flex; gap:10px; align-items:center; padding:16px 14px; border-bottom:1px solid var(--line)}
.bp-hero small{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; color:var(--muted)}
.bp-hero b{display:block; font-size:17px; letter-spacing:-.02em; line-height:1.15}
.bp-hero em{font-style:normal; color:var(--muted); font-size:11.5px}
.bp-logo{width:40px; height:40px; border-radius:9px; border:1px solid var(--line); background:var(--card); overflow:hidden; display:grid; place-items:center; flex:none}
.bp-logo:empty{display:none}
.bp-logo img{width:100%; height:100%; object-fit:contain; padding:3px}
.bp-body{padding:12px 14px; display:flex; flex-direction:column; gap:10px}
.bp-meta{display:flex; align-items:center; gap:8px}
.bp-num{font-family:var(--mono); font-weight:500}
.bp-meta .chip{font-size:11px; padding:1px 7px 1px 6px}
.bp-card{display:grid; grid-template-columns:64px 1fr; gap:10px}
.bp-img{aspect-ratio:9/16; border-radius:6px; background:var(--surface); border:1px solid var(--line)}
.bp-lines{display:flex; flex-direction:column; gap:6px; padding-top:4px}
.bp-lines i{height:6px; border-radius:3px; background:var(--line)}
.bp-watch{display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-weight:600}
.bp-watch .play{border-left-width:7px; border-top-width:4px; border-bottom-width:4px}
.bp-legend{display:flex; flex-direction:column; gap:5px; padding:10px 14px; border-top:1px solid var(--line); color:var(--muted)}
.bp-legend span{display:flex; align-items:center; gap:7px}
.bp-legend i{width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.12)}

/* página com as cores do cliente */
.branded .hero,.branded .bp-hero{background:color-mix(in srgb, var(--brand2) 14%, var(--bg)); border-top:4px solid var(--brand)}
.branded .chip{background:color-mix(in srgb, var(--brand) 12%, var(--card)); border-color:color-mix(in srgb, var(--brand) 40%, var(--line))}
.branded .vnum,.branded .stats dd,.branded .bp-num{color:color-mix(in srgb, var(--brand) 78%, var(--ink))}
.branded .watch,.branded .watch-inline,.branded .bp-watch{background:var(--brand); color:var(--brand-ink)}
.branded .car-dots span.on{background:var(--brand)}
.branded .clogo{border-color:color-mix(in srgb, var(--brand) 35%, var(--line))}
.branded th{background:color-mix(in srgb, var(--brand2) 10%, var(--surface))}

.trello-box{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:14px; padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--card)}
.trello-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 280px; font-size:13.5px}
.trello-txt span{color:var(--muted)}
.trello-act{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.tprog{display:flex; flex-direction:column; gap:6px; min-width:240px; font-size:13px}
.tprog .bar{height:6px; border-radius:6px; background:var(--surface); border:1px solid var(--line); overflow:hidden}
.tprog .bar i{display:block; height:100%; background:var(--ink); transition:width .3s}

/* ================= ELEV HUB ================= */
.hub{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh}
.hub.has-aside{grid-template-columns:232px minmax(0,1fr) 320px}
.hub.mini{grid-template-columns:64px minmax(0,1fr)}
.hub.mini.has-aside{grid-template-columns:64px minmax(0,1fr) 320px}
.hside{position:sticky; top:0; height:100vh; background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; padding:16px 12px; overflow:hidden; z-index:25}
.hbrand{display:flex; align-items:center; gap:10px; padding:6px 10px 20px; white-space:nowrap}
.hmark .hlogo{height:16px; width:auto; display:block; color:var(--ink)}
.hbrand b{font-size:15px; font-weight:600}
.hnav{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; color:var(--muted); font-size:14px; background:none; border:0; cursor:pointer; text-align:left; width:100%; white-space:nowrap; transition:background .15s, color .15s}
.hnav svg{flex:none}
.hnav:hover{background:var(--hover); color:var(--ink)}
.hnav.on{background:var(--hover); color:var(--ink); font-weight:500}
.hnav.soon{cursor:default; opacity:.55}
.hnav.soon:hover{background:none; color:var(--muted)}
.hnav em{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; margin-left:auto; border:1px solid var(--line-strong); border-radius:4px; padding:0 5px}
.hside-foot{margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:12px; border-top:1px solid var(--line)}
.hub.mini .hnav span,.hub.mini .hnav em,.hub.mini .hbrand b{display:none}
.hub.mini .hnav{justify-content:center; padding:9px}
.hub.mini .hbrand{justify-content:center; padding:6px 0 20px}
.hub.mini .hmark .hlogo{height:12px}
.hmain{min-width:0}
.haside{position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--card); border-left:1px solid var(--line); padding:32px 24px}
@media (max-width:1180px){ .hub.has-aside,.hub.mini.has-aside{grid-template-columns:232px minmax(0,1fr)} .hub.mini.has-aside{grid-template-columns:64px minmax(0,1fr)} .haside{grid-column:2; position:static; height:auto; border-left:0; border-top:1px solid var(--line)} }
@media (max-width:820px){
  .hub,.hub.has-aside,.hub.mini,.hub.mini.has-aside{grid-template-columns:minmax(0,1fr)}
  .hside{position:sticky; top:0; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:8px 10px; border-right:0; border-bottom:1px solid var(--line)}
  .hbrand{padding:0 8px 0 4px}
  .hbrand b,.hnav span,.hnav em,.hnav.soon{display:none}
  .hnav{width:auto; padding:9px}
  .hside-foot{margin:0 0 0 auto; flex-direction:row; padding:0; border:0}
  .hside-foot .hnav[data-a="hub-side"]{display:none}
  .haside{grid-column:1}
}
.hpage{padding:36px 44px 64px; display:flex; flex-direction:column; gap:22px; max-width:1180px}
@media (max-width:820px){ .hpage{padding:22px 16px 48px} }
.hhead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.hhead h1{margin:0; font-size:30px; font-weight:600; letter-spacing:-.02em}
.hhead-act{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.hsub{color:var(--muted); font-size:13px; margin:0}
.hbtn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--ink); font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s}
.hbtn:hover{background:var(--hover)}
.hbtn.dark{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.hbtn.dark:hover{opacity:.88; background:var(--ink)}
.hbtn.sm{height:30px; padding:0 10px; font-size:13px}
.hbtn.ghost{background:none}
.hlink{background:none; border:0; padding:0; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.hlink:hover{color:var(--ink)}
.hstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:700px){ .hstats{grid-template-columns:minmax(0,1fr)} }
.hstats>div,.hstat-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:4px}
.hstats span,.hstat-box span{font-size:13px; color:var(--muted)}
.hstats b,.hstat-box b{font-size:28px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.hcard{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0}
.hcard-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.hcard-h h2{margin:0; font-size:15px; font-weight:600}
.hgrid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.hgrid2.tight{gap:12px}
@media (max-width:900px){ .hgrid2{grid-template-columns:minmax(0,1fr)} }
.hrows{display:flex; flex-direction:column}
.hrow{display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:8px; background:none; border:0; text-align:left; color:var(--ink); width:100%; font-size:14px}
.hrow+.hrow{border-top:1px solid var(--line)}
.hrow.click{cursor:pointer}
.hrow.click:hover{background:var(--hover)}
.hrow .grow,.grow{flex:1; min-width:0; display:flex; flex-direction:column}
.hrow small,.hq-item small{color:var(--muted); font-size:12.5px}
.hrow b{font-weight:500}
.hpct{font-family:var(--mono); font-size:13px; color:var(--muted)}
.hav{flex:none; display:grid; place-items:center; overflow:hidden; background:var(--ink); color:var(--bg); border-radius:10px; width:44px; height:44px}
.hav img{width:100%; height:100%; object-fit:contain; padding:4px}
.hav.haslogo{background:var(--card); border:1px solid var(--line)}
.hav.lg img{padding:7px}
.hav b{font-size:14px; font-weight:600}
.hav.sm{width:32px; height:32px; border-radius:8px}
.hav.sm b{font-size:11.5px}
.hav.lg{width:64px; height:64px; border-radius:14px}
.hav.lg b{font-size:20px}
.nf{font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:4px; border:1px solid var(--muted); color:var(--muted); line-height:1.3}
.tag{font-size:11px; padding:1px 7px; border-radius:20px; background:var(--hover); color:var(--muted); white-space:nowrap}
/* fila de vencimentos */
.hq{display:flex; flex-direction:column; gap:18px}
.hq-h h2{margin:0 0 4px; font-size:16px; font-weight:600}
.hq-g{display:flex; flex-direction:column; gap:4px}
.hq-date{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:0 6px 4px}
.hq-g.soon .hq-date{color:var(--danger)}
.hq-item{display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:14px}
.hq-item:hover{border-color:var(--muted)}
.hq-open{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; text-align:left; color:inherit; font:inherit; cursor:pointer; min-width:0}
.hq-open .grow{min-width:0}
.hq-open b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hq-g.soon .hq-item{border-color:color-mix(in srgb, var(--danger) 35%, var(--line))}
.hq-g.late .hq-date{color:var(--danger); font-weight:600}
.hq-g.late .hq-item{border-color:color-mix(in srgb, var(--danger) 55%, var(--line)); background:var(--danger-bg)}
.hq-st{position:relative; display:flex; align-items:center; align-self:flex-start; margin-left:40px}
.hq-st select{appearance:none; -webkit-appearance:none; font:inherit; font-size:12px; font-weight:500; color:var(--ink); background:var(--hover); border:1px solid var(--line); border-radius:999px; padding:4px 26px 4px 10px; cursor:pointer}
.hq-st select:hover{border-color:var(--muted)}
.hq-st svg{position:absolute; right:8px; pointer-events:none; color:var(--muted)}
.hq-item.st-lembrete .hq-st select{background:var(--rec-bg); color:var(--rec); border-color:transparent}
.hq-item.st-enviada .hq-st select{background:color-mix(in srgb, #2F6FD6 14%, var(--card)); color:color-mix(in srgb, #2F6FD6 80%, var(--ink)); border-color:transparent}
.hq-item.st-paga .hq-st select{background:color-mix(in srgb, var(--ok) 16%, var(--card)); color:var(--ok); border-color:transparent}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* blocos de clientes */
.hsearch{display:flex; align-items:center; gap:8px; padding:0 12px; height:38px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--muted); width:260px; max-width:100%}
.hsearch input{border:0; outline:none; background:transparent; width:100%; color:var(--ink)}
.hblocks{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.hblock{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:16px; text-align:left; color:var(--ink); cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s}
.hblock:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.07); border-color:var(--muted)}
.hblock.off{opacity:.6}
.hblock-top{display:flex; justify-content:space-between; align-items:flex-start}
.hblock-tags{display:flex; gap:6px; align-items:center}
.hblock-name{display:flex; flex-direction:column; gap:4px}
.hblock-name b{font-size:16px; font-weight:600}
.hblock-name small{font-size:13px; color:var(--muted)}
.hblock-meta{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.hblock-pct{display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--line)}
.hblock-pct>span:first-child{display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}
.hblock-pct b{color:var(--ink); font-weight:500}
.bar{display:block; height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--ink); border-radius:2px}
.hblock.add{border-style:dashed; background:transparent; align-items:center; justify-content:center; color:var(--muted); font-size:14px; min-height:230px}
/* ficha */
.hcrumb{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.hcrumb .hback{margin:0}
.hback{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin:0 0 4px -8px; padding:6px 10px 6px 8px; border:0; border-radius:8px; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:500; cursor:pointer}
.hback:hover{background:var(--hover); color:var(--ink)}
.phead{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.phead-txt{display:flex; flex-direction:column; gap:6px; min-width:0; flex:1}
.phead h1{margin:0; font-size:28px; font-weight:600; letter-spacing:-.02em}
.phead-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.phead-act{display:flex; align-items:center; gap:10px}
.st-dot{width:7px; height:7px; border-radius:50%; background:var(--muted); margin-right:-4px}
.st-dot.ativo{background:#2E8B4B}
.st-dot.pausado{background:#C98A1B}
.prof-st{font-size:12.5px; color:var(--muted); font-family:var(--mono)}
.prof-st.ok{color:var(--ok)}
.prof-st.err{color:var(--danger)}
.ptabs{display:flex; gap:18px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.ptab{background:none; border:0; border-bottom:2px solid transparent; padding:10px 2px; color:var(--muted); font-size:13.5px; cursor:pointer; white-space:nowrap}
.ptab:hover{color:var(--ink)}
.ptab.on{color:var(--ink); border-bottom-color:var(--ink); font-weight:500}
.ptab small{font-family:var(--mono); font-size:11px; color:var(--muted)}
.pbody{display:flex; flex-direction:column; gap:16px}
.kv{display:grid; grid-template-columns:120px minmax(0,1fr); row-gap:11px; column-gap:12px; margin:0; font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; overflow-wrap:anywhere}
.kv em{color:var(--line-strong); font-style:normal}
.svc{display:flex; flex-direction:column; font-size:14px}
.svc>div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.svc .tot{font-weight:600; border-bottom:0}
.hcard.form{gap:16px}
.pf{display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; align-items:center; font-size:14px}
.pf>span{color:var(--muted)}
.pf textarea{min-height:0; resize:vertical}
@media (max-width:700px){ .pf{grid-template-columns:minmax(0,1fr); gap:6px} }
.pills{display:flex; gap:6px; flex-wrap:wrap}
.pill{border:1px solid var(--line-strong); background:var(--card); border-radius:20px; padding:5px 13px; font-size:13.5px; cursor:pointer; color:var(--ink)}
.pill:hover{border-color:var(--ink)}
.pill.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.lrow{display:grid; grid-template-columns:minmax(0,1fr) 150px 34px; gap:8px; align-items:center}
.lrow.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 34px 34px}
.lrow.dates{grid-template-columns:minmax(0,1fr) 90px 150px 34px}
.lrow.links{grid-template-columns:170px minmax(0,1fr) 34px 34px}
@media (max-width:700px){ .lrow,.lrow.three,.lrow.dates,.lrow.links{grid-template-columns:minmax(0,1fr) 34px} .lrow .inp:not(:first-child){grid-column:1} }
.lrow .inp,.pf .inp{padding:8px 11px; font-size:14px}
.lrow .ibtn{width:34px; height:34px}
.money{text-align:right; font-variant-numeric:tabular-nums}
.note-line{font-size:13px; color:var(--muted); background:var(--hover); border-radius:8px; padding:10px 14px; margin:0}
.tl{display:flex; flex-direction:column; gap:14px}
.tl-item{display:flex; gap:12px; align-items:flex-start; font-size:14px}
.tl-item.done .tl-txt>span:last-child{color:var(--muted); text-decoration:line-through}
.tl-av{width:26px; height:26px; border-radius:50%; background:var(--hover); display:grid; place-items:center; font-size:11px; font-weight:600; flex:none}
.tl-txt{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; overflow-wrap:anywhere}
.hist-act{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.hist-who{display:flex; align-items:center; gap:6px}
.hist-who .inp{padding:6px 8px; width:auto}
.doc{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px}
.doc small{color:var(--muted); font-size:12.5px}
.doc-drop{display:flex; gap:12px; align-items:center; justify-content:center; padding:26px; flex-direction:row}
.doc-drop span{display:flex; flex-direction:column; text-align:left}
.links.one{grid-template-columns:minmax(0,1fr)}
/* painel lateral da ficha */
.pa{display:flex; flex-direction:column; gap:20px}
.pa-top{display:flex; flex-direction:column; gap:8px}
.pa-top b{font-size:36px; font-weight:600; letter-spacing:-.02em}
.pa-top .bar{height:6px; border-radius:3px}
.pa-miss{display:flex; flex-direction:column; gap:2px; padding-top:16px; border-top:1px solid var(--line)}
.pa-miss h3{margin:0 0 8px; font-size:14px; font-weight:600}
.pa-row{display:flex; justify-content:space-between; align-items:center; padding:9px 8px; border-radius:6px; background:none; border:0; color:var(--ink); font-size:14px; cursor:pointer; text-align:left}
.pa-row:hover{background:var(--hover)}
.pa-row span{color:var(--muted); font-size:13px}
/* o editor e a lista de planejamentos dentro do Hub */
.hmain .ebar{top:0}
.hmain .list{padding-block:36px 64px}

/* lista de planejamentos e prospecção */
.list-foot{display:flex; gap:24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.hpage.wide{max-width:1400px}
.lstats{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
@media (max-width:1000px){ .lstats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .lstats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lstat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer; color:var(--ink)}
.lstat b{font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.lstat span{font-size:12px; color:var(--muted)}
.lstat:hover{border-color:var(--muted)}
.lstat.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.lstat.s-call b{color:#B76E0A} .lstat.s-fechado b{color:var(--ok)} .lstat.s-perdido b{color:var(--danger)} .lstat.s-respondeu b{color:#1F6FA3}
.lcontrols{display:flex; gap:10px; flex-wrap:wrap}
.lcontrols .grow-s{flex:1 1 260px; width:auto}
.lsel{width:auto; max-width:240px; padding:8px 10px; font-size:14px; height:38px}
.ltable-wrap{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow-x:auto}
.ltable{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.ltable th{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); white-space:nowrap}
.ltable td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.ltable tr:last-child td{border-bottom:0}
.ltable tbody tr:hover td{background:color-mix(in srgb, var(--hover) 55%, transparent)}
.ltable td small{display:block; color:var(--muted); font-size:12.5px}
.lname{background:none; border:0; padding:0; font-weight:500; color:var(--ink); cursor:pointer; text-align:left; font-size:14px}
.lname:hover{text-decoration:underline}
.tag.link{border:0; cursor:pointer; margin-top:3px; display:inline-block}
.lpill{border:0; border-radius:20px; padding:5px 24px 5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center; color:var(--ink); max-width:190px}
.lpill.s-nao{color:var(--muted)}
.lpill.s-contatado{background-color:color-mix(in srgb, #2F55D4 14%, var(--card)); color:color-mix(in srgb, #2F55D4 80%, var(--ink))}
.lpill.s-respondeu{background-color:color-mix(in srgb, #1F8FC0 15%, var(--card)); color:color-mix(in srgb, #1F8FC0 75%, var(--ink))}
.lpill.s-call{background-color:color-mix(in srgb, #E08A12 18%, var(--card)); color:color-mix(in srgb, #B76E0A 85%, var(--ink))}
.lpill.s-fechado{background-color:color-mix(in srgb, var(--ok) 18%, var(--card)); color:var(--ok)}
.lpill.s-perdido{background-color:var(--danger-bg); color:var(--danger)}
.lpill.f-none{color:var(--muted); background-color:transparent; border:1px dashed var(--line-strong)}
.lcontact{display:flex; gap:6px; flex-wrap:wrap}
.ltable .ibtn{width:30px; height:30px}
@media (max-width:820px){ .ltable .hm{display:none} .ltable{min-width:0} }
.lform{display:flex; flex-direction:column; gap:14px}
.lform2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:520px){ .lform2{grid-template-columns:minmax(0,1fr)} }
.lform .fld{display:flex; flex-direction:column; gap:6px}
.lform .inp{padding:9px 11px; font-size:14px}
.lconvert{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}

/* ---------- Financeiro ---------- */
:root{--fs:#A8A49B}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--fs:#66635D} }
:root[data-theme="dark"]{--fs:#66635D}
:root[data-theme="light"]{--fs:#A8A49B}
.fmonth{display:flex; align-items:center; gap:10px}
.fmonth b{font-size:15px; font-weight:600; min-width:140px; text-align:center}
.fmonth .ibtn{font-size:18px; line-height:1}
.fstats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:1000px){ .fstats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .fstats{grid-template-columns:minmax(0,1fr)} }
.fstats b{font-size:24px}
.neg{color:var(--danger)}
.fdelta{font-size:12px; color:var(--muted)}
.fgrid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:1000px){ .fgrid{grid-template-columns:minmax(0,1fr)} }
.fcol{display:flex; flex-direction:column; gap:16px; min-width:0}
.flist{display:flex; flex-direction:column}
.frow{display:flex; align-items:center; gap:12px; padding:10px 8px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; border-radius:0}
.frow:last-child{border-bottom:0}
.frow:hover{background:var(--hover)}
.frow .grow{min-width:0; display:flex; flex-direction:column; gap:2px}
.frow b{font-weight:500; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.frow small{font-size:12.5px; color:var(--muted)}
.fdate{font-family:var(--mono); font-size:12px; color:var(--muted); width:40px; flex:none}
.fval{font-variant-numeric:tabular-nums; font-weight:500; font-size:14px; white-space:nowrap}
.fval.entrada{color:var(--ok)}
.ftag{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase}
.ftotal{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:12px; font-size:14px}
.ftotal b{font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}
.fpro{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fpro>div{display:flex; flex-direction:column; gap:2px; padding:12px; border:1px solid var(--line); border-radius:10px}
.fpro b{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}
.fcats{display:flex; flex-direction:column; gap:12px}
.fcat-t{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin-bottom:5px}
.fcat-t b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.fcat-t small{color:var(--muted); font-weight:400; margin-left:4px}
.fbar{display:block; height:6px; background:var(--hover); border-radius:3px; overflow:hidden}
.fbar i{display:block; height:100%; background:var(--ink); border-radius:3px}
.fchart .hcard-h{align-items:flex-start}
.flegend{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.flegend span,.ftip span{display:inline-flex; align-items:center; gap:6px}
.flegend i,.ftip i{width:10px; height:10px; border-radius:3px; display:inline-block}
i.fb-e{background:var(--ink)} i.fb-s{background:var(--fs)}
.fsvg{position:relative}
.fsvg svg{width:100%; height:auto; display:block; overflow:visible}
path.fb-e{fill:var(--ink)} path.fb-s{fill:var(--fs)}
.fgrid-l{stroke:var(--line); stroke-width:1}
.fax{fill:var(--muted); font-size:11px; font-family:var(--mono)}
.fax.on{fill:var(--ink); font-weight:600}
.fhit{fill:transparent; cursor:pointer}
.fgrp:hover .fhit,.fgrp.sel .fhit{fill:var(--hover); opacity:.6}
.ftip{position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:5px; font-size:12.5px; min-width:190px; z-index:2}
.ftip[hidden]{display:none}
.ftip span{justify-content:flex-start}
.ftip em{font-style:normal; margin-left:auto; padding-left:14px; font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink)}
.ftip .fr{border-top:1px solid var(--line); padding-top:5px; color:var(--muted)}
.ftable{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.ftable th{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:500; text-align:right; padding:6px 8px; border-bottom:1px solid var(--line)}
.ftable td{text-align:right; padding:8px; border-bottom:1px solid var(--line)}
.ftable th:first-child,.ftable td:first-child{text-align:left}
.fmoney{display:flex; align-items:center; gap:0; border:1px solid var(--line-strong, var(--line)); border-radius:8px; overflow:hidden; background:var(--card)}
.fmoney span{padding:0 10px; color:var(--muted); font-size:14px; border-right:1px solid var(--line)}
.fmoney .inp{border:0; border-radius:0; flex:1; min-width:0; font-variant-numeric:tabular-nums}
@media (max-width:700px){ .fsvg{overflow-x:auto} .fsvg svg{min-width:600px} }

/* fundo da logo */
.cm-logo img{background:none}
.lbg{display:flex; flex-wrap:wrap; gap:6px}
.lbg-opt{display:inline-flex; align-items:center; gap:7px; padding:5px 10px 5px 5px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer}
.lbg-opt i{width:20px; height:20px; border-radius:50%; border:1px solid var(--line-strong, var(--line)); display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:700; color:#888}
.lbg-opt.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.fparc{display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.fparc .seg{align-self:flex-start}
.fparc-sum{margin:0; font-variant-numeric:tabular-nums}
.fval .fsub{display:block; text-align:right; font-size:11.5px; font-weight:400; color:var(--muted)}

/* serviços avulsos */
.avul{border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px; background:var(--bg)}
.avul-top{display:grid; grid-template-columns:minmax(0,1fr) 170px 34px; gap:8px; align-items:center}
@media (max-width:700px){ .avul-top{grid-template-columns:minmax(0,1fr) 34px} .avul-top .fmoney{grid-column:1} }
.avul-top .inp{padding:8px 11px; font-size:14px}
.avul-top .ibtn{width:34px; height:34px}
.avul-prog{display:flex; flex-direction:column; gap:6px}
.avul-nums{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.avul-nums b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.avul-nums b.ok{color:var(--ok); display:inline-flex; align-items:center; gap:4px}
.avul .bar{display:block; height:6px; background:var(--hover); border-radius:3px; overflow:hidden}
.avul .bar i{display:block; height:100%; background:var(--ink); border-radius:3px}
.avul.done .bar i{background:var(--ok)}
.avul-pays{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.avul-pays>div{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line)}
.avul-pays b{font-weight:500; font-variant-numeric:tabular-nums}
.avul-pays .grow{flex:1; color:var(--muted)}
.ibtn.sm{width:26px; height:26px}
.avul-payform{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.avul-payform .fmoney{width:170px}
.avul-payform .inp{padding:7px 10px; font-size:14px}
.avul-payform input[type=date]{width:auto}
.ibtn.armed{color:var(--danger)}
.tag.open{background:var(--rec-bg); color:var(--rec); border-color:transparent}

/* ---------- Agenda ---------- */
:root{--k-comp:var(--ink); --k-pub:#2F6FD6; --k-venc:#C26A1E; --k-cli:#2C7A4B; --k-saz:#8A857C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--k-pub:#7FA8EE; --k-venc:#E9A15F; --k-cli:#7CC79A; --k-saz:#8F8B84} }
:root[data-theme="dark"]{--k-pub:#7FA8EE; --k-venc:#E9A15F; --k-cli:#7CC79A; --k-saz:#8F8B84}
:root[data-theme="light"]{--k-pub:#2F6FD6; --k-venc:#C26A1E; --k-cli:#2C7A4B; --k-saz:#8A857C}
.k-comp{--k:var(--k-comp)} .k-pub{--k:var(--k-pub)} .k-venc{--k:var(--k-venc)} .k-cli{--k:var(--k-cli)} .k-saz{--k:var(--k-saz)}
.agbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.agfilters{display:flex; gap:6px; flex-wrap:wrap}
.agf{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer}
.agf i{width:8px; height:8px; border-radius:50%; background:var(--k)}
.agf.off{color:var(--muted); background:none; text-decoration:line-through}
.agf.off i{background:none; border:1px solid var(--k)}
.agcal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line); gap:1px}
.agwd{background:var(--side); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px}
.agcell{background:var(--card); min-height:112px; border:0; padding:6px 6px 8px; text-align:left; display:flex; flex-direction:column; gap:4px; cursor:pointer; color:var(--ink); font:inherit; min-width:0}
.agcell:hover{background:var(--hover)}
.agcell.out{background:var(--bg); color:var(--muted)}
.agcell.out .agchips{opacity:.6}
.agcell.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.agnum{font-size:12.5px; font-weight:500; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-variant-numeric:tabular-nums}
.agcell.today .agnum{background:var(--ink); color:var(--bg)}
.agchips{display:flex; flex-direction:column; gap:3px; min-width:0}
.agchip{display:block; font-size:11.5px; line-height:1.3; padding:2px 6px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:color-mix(in srgb, var(--k) 13%, var(--card)); color:var(--ink); border-left:3px solid var(--k)}
.agchip em{font-style:normal; font-family:var(--mono); font-size:10.5px; margin-right:4px; color:var(--muted)}
.agchip.done{opacity:.55; text-decoration:line-through}
.agmore{font-size:11px; color:var(--muted); padding-left:6px}
.aglist{display:flex; flex-direction:column; gap:6px}
.agitem{display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; text-align:left; width:100%}
button.agitem{cursor:pointer} button.agitem:hover{border-color:var(--muted)}
.agitem>i{width:4px; align-self:stretch; border-radius:2px; background:var(--k); flex:none}
.agitem .grow{display:flex; flex-direction:column; gap:2px; min-width:0}
.agitem b{font-weight:500; font-size:14px}
.agitem b em{font-style:normal; font-family:var(--mono); font-size:12px; color:var(--muted)}
.agitem small{font-size:12.5px; color:var(--muted)}
.agitem .agobs{white-space:pre-wrap}
.agitem.done b{text-decoration:line-through; color:var(--muted)}
.agitem svg{color:var(--ok); flex:none}
.agform3{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px}
@media (max-width:520px){ .agform3{grid-template-columns:1fr 1fr} .agform3 .fld:first-child{grid-column:1/-1} }
@media (max-width:760px){
  .agcell{min-height:64px; padding:4px}
  .agchip{font-size:0; padding:0; height:6px; border-left:0; background:var(--k); border-radius:3px}
  .agchip em{display:none}
  .agwd{padding:6px 4px; text-align:center}
}

/* =====================================================================
   Elev Hub · acabamento premium
   Menu e painéis flutuantes, cantos mais arredondados, botões em pílula,
   sombras suaves no lugar de linhas duras e um fundo com luz difusa.
   Continua preto e branco: a cor fica só para estados (pago, atraso…).
   ===================================================================== */
:root{
  --hub-bg:#F1F0EC; --hub-glow1:rgba(255,255,255,.95); --hub-glow2:rgba(226,223,215,.9);
  --glass:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.9);
  --sh-sm:0 1px 2px rgba(28,27,24,.04), 0 2px 6px -2px rgba(28,27,24,.06);
  --sh:0 1px 2px rgba(28,27,24,.04), 0 10px 30px -14px rgba(28,27,24,.16);
  --sh-lg:0 2px 4px rgba(28,27,24,.04), 0 24px 60px -20px rgba(28,27,24,.28);
  --soft-line:rgba(28,27,24,.06);
  --rr:22px; --rr-sm:14px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --hub-bg:#121211; --hub-glow1:rgba(58,57,53,.55); --hub-glow2:rgba(36,35,33,.9);
  --glass:rgba(33,33,32,.78); --glass-line:rgba(255,255,255,.06);
  --sh-sm:0 1px 2px rgba(0,0,0,.3); --sh:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6); --sh-lg:0 24px 60px -20px rgba(0,0,0,.75);
  --soft-line:rgba(255,255,255,.06);
}}
:root[data-theme="dark"]{
  --hub-bg:#121211; --hub-glow1:rgba(58,57,53,.55); --hub-glow2:rgba(36,35,33,.9);
  --glass:rgba(33,33,32,.78); --glass-line:rgba(255,255,255,.06);
  --sh-sm:0 1px 2px rgba(0,0,0,.3); --sh:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6); --sh-lg:0 24px 60px -20px rgba(0,0,0,.75);
  --soft-line:rgba(255,255,255,.06);
}
:root[data-theme="light"]{
  --hub-bg:#F1F0EC; --hub-glow1:rgba(255,255,255,.95); --hub-glow2:rgba(226,223,215,.9);
  --glass:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.9);
  --sh-sm:0 1px 2px rgba(28,27,24,.04), 0 2px 6px -2px rgba(28,27,24,.06);
  --sh:0 1px 2px rgba(28,27,24,.04), 0 10px 30px -14px rgba(28,27,24,.16);
  --sh-lg:0 2px 4px rgba(28,27,24,.04), 0 24px 60px -20px rgba(28,27,24,.28);
  --soft-line:rgba(28,27,24,.06);
}

/* fundo */
.hub{background:
  radial-gradient(900px 600px at 12% -10%, var(--hub-glow1), transparent 60%),
  radial-gradient(1000px 700px at 100% 0%, var(--hub-glow2), transparent 65%),
  radial-gradient(800px 600px at 60% 110%, var(--hub-glow1), transparent 60%),
  var(--hub-bg);
  background-attachment:fixed;
  grid-template-columns:248px minmax(0,1fr)}
.hub.has-aside{grid-template-columns:248px minmax(0,1fr) 340px}
.hub.mini{grid-template-columns:88px minmax(0,1fr)}
.hub.mini.has-aside{grid-template-columns:88px minmax(0,1fr) 340px}

/* menu lateral flutuante */
.hside{top:16px; height:calc(100vh - 32px); margin:16px 0 16px 16px; border:1px solid var(--glass-line); border-radius:26px; background:var(--glass); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:var(--sh); padding:18px 12px; gap:4px}
.hbrand{padding:6px 12px 22px}
.hnav{border-radius:999px; padding:10px 14px; font-size:14px; transition:background .15s, color .15s}
.hnav.on{background:var(--ink); color:var(--bg); font-weight:500; box-shadow:var(--sh-sm)}
.hnav.on:hover{background:var(--ink); color:var(--bg)}
.hside-foot{border-top:1px solid var(--soft-line)}
.hub.mini .hnav{width:48px; height:48px; padding:0; margin:0 auto; justify-content:center}
.hub.mini .hside{align-items:stretch}

/* painel da direita flutuante */
.haside{top:16px; height:calc(100vh - 32px); margin:16px 16px 16px 0; border:1px solid var(--glass-line); border-radius:26px; background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:var(--sh); padding:28px 22px}

/* página */
.hpage{padding:40px 44px 72px; gap:24px}
.hhead h1{font-size:34px; font-weight:700; letter-spacing:-.035em; line-height:1.1}
.hhead .hsub{font-size:14.5px}
.hback{border-radius:999px; padding:7px 14px 7px 10px; background:var(--glass); box-shadow:var(--sh-sm); border:1px solid var(--glass-line); color:var(--ink)}
.hback:hover{background:var(--card)}
.hcrumb .hback{margin-right:4px}

/* botões em pílula */
.hbtn{height:42px; padding:0 18px; border-radius:999px; border:1px solid var(--glass-line); background:var(--card); box-shadow:var(--sh-sm); font-weight:500; transition:transform .15s, box-shadow .15s, background .15s}
.hbtn:hover{background:var(--card); box-shadow:var(--sh); transform:translateY(-1px)}
.hbtn.dark{background:var(--ink); color:var(--bg); border-color:transparent; box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.hbtn.dark:hover{opacity:1; background:var(--ink); box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.hbtn.sm{height:32px; padding:0 13px; font-size:13px}
.hbtn.ghost{background:transparent; box-shadow:none}
.hbtn:disabled{opacity:.45; transform:none; box-shadow:none; cursor:not-allowed}
.hlink{text-decoration:none; font-weight:500; padding:4px 10px; border-radius:999px; background:var(--hover)}
.hlink:hover{background:var(--line)}
.ibtn{border-radius:999px}

/* cartões */
.hcard,.hstats>div,.hstat-box,.hblock,.lstat,.ltable-wrap{border-radius:var(--rr); border:1px solid var(--glass-line); background:var(--card); box-shadow:var(--sh)}
.hcard{padding:22px 24px}
.hcard-h h2{font-size:16px; letter-spacing:-.01em}
.hstats b,.hstat-box b{font-weight:700; letter-spacing:-.03em}
.hstats>div,.hstat-box{padding:18px 20px}
.hblock{padding:22px; transition:transform .2s, box-shadow .2s}
.hblock:hover{transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--glass-line)}
.hblock.add{box-shadow:none; background:transparent; border:1.5px dashed var(--line-strong)}
.hblock-pct{border-top:1px solid var(--soft-line)}
.hrow{border-radius:12px}
.hrow+.hrow{border-top:1px solid var(--soft-line)}

/* avatares e logos */
.hav{border-radius:14px}
.hav.sm{border-radius:10px}
.hav.lg{border-radius:20px; box-shadow:var(--sh-sm)}
.hav.haslogo{border-color:var(--soft-line)}

/* campos */
.inp{border-radius:12px; border-color:var(--line); background:var(--card)}
.inp:focus{border-color:var(--ink); box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent)}
.hsearch{height:42px; border-radius:999px; border:1px solid var(--glass-line); background:var(--card); box-shadow:var(--sh-sm); padding:0 16px}
.fmoney{border-radius:12px}

/* abas e seletores em pílula */
.ptabs{gap:4px; border-bottom:0; padding:5px; background:var(--glass); border:1px solid var(--glass-line); border-radius:999px; box-shadow:var(--sh-sm); align-self:flex-start; max-width:100%}
.ptab{border:0; border-radius:999px; padding:8px 14px; font-size:13.5px}
.ptab:hover{background:var(--hover)}
.ptab.on{background:var(--ink); color:var(--bg); border:0}
.ptab.on small{color:inherit; opacity:.7}
.seg{border-radius:999px; padding:4px; border:1px solid var(--glass-line); background:var(--hover)}
.seg button{border-radius:999px; padding:6px 14px}
.seg button.on{box-shadow:var(--sh-sm)}
.pill{border-radius:999px}
.tag,.nf{border-radius:999px}

/* fila de vencimentos e listas da lateral */
.hq-item{border-radius:var(--rr-sm); border:1px solid var(--soft-line); background:var(--card); box-shadow:var(--sh-sm); padding:10px}
.hq-item:hover{border-color:var(--soft-line); box-shadow:var(--sh)}
.hq-g.late .hq-item{border-color:color-mix(in srgb, var(--danger) 30%, transparent)}
.agitem{border-radius:var(--rr-sm); border:1px solid var(--soft-line); background:var(--card); box-shadow:var(--sh-sm)}
button.agitem:hover{border-color:var(--soft-line); box-shadow:var(--sh)}

/* agenda */
.agcal{border-radius:var(--rr); border:1px solid var(--glass-line); box-shadow:var(--sh); background:var(--soft-line)}
.agwd{background:var(--card)}
.agchip{border-radius:7px}
.agf{border:1px solid var(--glass-line); box-shadow:var(--sh-sm)}
.agf.off{box-shadow:none}

/* financeiro e prospecção */
.frow{border-radius:12px; border-bottom-color:var(--soft-line)}
.fpro>div{border-radius:var(--rr-sm); border-color:var(--soft-line); background:var(--bg)}
.fmonth b{font-size:16px}
.fmonth .ibtn{background:var(--card); box-shadow:var(--sh-sm); width:34px; height:34px}
.avul{border-radius:var(--rr-sm); border-color:var(--soft-line)}
.lstat{border-radius:var(--rr-sm)}

/* janelas */
.modal{border-radius:28px; padding:28px; box-shadow:var(--sh-lg)}
.modal-bg{backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.sbtn{border-radius:999px}
.mfoot{border-top-color:var(--soft-line)}

/* responsivo */
@media (max-width:1180px){
  .hub.has-aside{grid-template-columns:248px minmax(0,1fr)} .hub.mini.has-aside{grid-template-columns:88px minmax(0,1fr)}
  .haside{position:static; height:auto; margin:0 44px 40px; border-top:1px solid var(--glass-line)}
}
@media (max-width:820px){
  .hub,.hub.has-aside,.hub.mini,.hub.mini.has-aside{grid-template-columns:minmax(0,1fr)}
  .hside{top:10px; height:auto; margin:10px 10px 0; border-radius:999px; padding:6px 8px}
  .hnav{padding:9px; border-radius:999px}
  .hub.mini .hnav{width:auto; height:auto; padding:9px; margin:0}
  .haside{margin:0 12px 24px; padding:22px 18px}
  .hpage{padding:24px 16px 40px}
  .hhead h1{font-size:28px}
  .ptabs{border-radius:16px}
}
@media (max-width:820px){
  .hside{gap:0; padding:5px 6px; scrollbar-width:none}
  .hside::-webkit-scrollbar{display:none}
  .hnav{padding:8px}
  .hside-foot{gap:0}
}
@media (max-width:440px){
  .hbrand{display:none}
  .hside{justify-content:space-between}
  .hrow .hsub{display:none}
}

/* ---------- Início vivo ---------- */
.hhero{position:relative; min-height:150px; border-radius:var(--rr); background:var(--ink); color:var(--bg); box-shadow:var(--sh-lg); overflow:hidden; isolation:isolate}
.hhero::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(500px 220px at 85% -20%, color-mix(in srgb, var(--bg) 22%, transparent), transparent 70%), radial-gradient(400px 200px at 0% 120%, color-mix(in srgb, var(--bg) 12%, transparent), transparent 70%)}
.hhero-slide{position:absolute; inset:0; display:flex; align-items:center; gap:22px; padding:26px 30px 34px; opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s ease; pointer-events:none}
.hhero-slide.on{opacity:1; transform:none; pointer-events:auto; position:relative}
.hhero-slide:not(.on){position:absolute}
.hhero-ic{flex:none}
.hhero-ic .hav.lg{width:68px; height:68px; box-shadow:none}
.hhero-icn{width:68px; height:68px; border-radius:20px; display:grid; place-items:center; background:color-mix(in srgb, var(--bg) 12%, transparent)}
.hhero-txt{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.hhero-k{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.7}
.hhero-t{font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.2}
.hhero-s{font-size:14px; opacity:.75; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.hhero-btn{flex:none; background:var(--bg); color:var(--ink); border-color:transparent}
.hhero-btn:hover{background:var(--bg)}
.hhero-dots{position:absolute; left:30px; bottom:14px; display:flex; gap:6px}
.hhero-dots button{width:7px; height:7px; border-radius:999px; border:0; padding:0; background:color-mix(in srgb, var(--bg) 35%, transparent); cursor:pointer; transition:width .3s, background .3s}
.hhero-dots button.on{width:22px; background:var(--bg)}
.hhero.calm{background:var(--card); color:var(--ink); min-height:0}
.hhero.calm .hhero-slide{position:relative; flex-direction:column; align-items:flex-start; gap:4px; padding:22px 26px}
.hfeed{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:900px){ .hfeed{grid-template-columns:minmax(0,1fr)} }
.hfc{display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:var(--rr-sm); border:1px solid var(--soft-line); background:var(--bg); color:var(--ink); font:inherit; text-align:left; animation:hfIn .5s ease both}
button.hfc{cursor:pointer; transition:box-shadow .2s, transform .2s}
button.hfc:hover{box-shadow:var(--sh); transform:translateY(-1px)}
.hfc-ic{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--hover); color:var(--ink)}
.hfc-ic .hav{width:32px; height:32px}
.hfc .grow{display:flex; flex-direction:column; gap:2px; min-width:0}
.hfc-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.hfc b{font-weight:600; font-size:14px}
.hfc small{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hfc.k-late .hfc-ic{background:var(--danger-bg); color:var(--danger)}
.hfc.k-late .hfc-k{color:var(--danger)}
.hcount{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--muted); margin-left:4px}
@keyframes hfIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (max-width:640px){
  .hhero-slide{flex-wrap:wrap; padding:22px 20px 34px; gap:14px}
  .hhero-t{font-size:20px}
  .hhero-ic .hav.lg,.hhero-icn{width:52px; height:52px}
  .hhero-dots{left:20px}
}

/* previsão */
path.fb-e.prev{fill:var(--ink); opacity:.28}
path.fb-s.prev{fill:var(--fs); opacity:.45}
i.fb-p{background:repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 4px); opacity:.7}
.fnow{stroke:var(--muted); stroke-dasharray:3 4; stroke-width:1}
.fnow-t{font-size:10px}
.fax.fut{opacity:.6}
.frow.prev b,.frow.prev .fval{opacity:.7}
.frow.prev .fdate{opacity:.6}
.fprev-note{display:flex; align-items:center; gap:8px; margin:0; padding:10px 12px; border-radius:12px; background:var(--hover); font-size:13px; color:var(--muted)}
.fstats.prev{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){ .fstats.prev{grid-template-columns:minmax(0,1fr)} }
.fstats.prev .hstat-box{border-style:dashed}
.ftip .fsubl{font-size:11.5px; color:var(--muted); padding-left:16px}
.ftable tr.fut td{color:var(--muted)}
.ftable small{font-size:11px; color:var(--muted)}
.fdelta b{font-weight:600; color:var(--ink)}

/* ---------- página do cliente: conteúdos em cartões + resposta ---------- */
.feed .vcard{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px 30px; margin-bottom:22px; box-shadow:0 1px 2px rgba(28,27,24,.04), 0 12px 32px -18px rgba(28,27,24,.18); transition:border-color .25s, box-shadow .25s}
.feed .vcard:first-child{border-top:1px solid var(--line)}
@media (max-width:600px){ .feed .vcard{padding:20px 16px; border-radius:18px} }
.feed .vcard.is-ok{border-color:color-mix(in srgb, var(--ap-ok) 45%, var(--line))}
.feed .vcard.is-adj{border-color:color-mix(in srgb, var(--ap-adj) 55%, var(--line))}
:root{--ap-ok:#1E9E57; --ap-ok-bg:#E6F6EC; --ap-adj:#C77712; --ap-adj-bg:#FCF1E1; --wa:#1FA855}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ap-ok:#5FCB8A; --ap-ok-bg:#16301F; --ap-adj:#F0B062; --ap-adj-bg:#36260F} }
:root[data-theme="dark"]{--ap-ok:#5FCB8A; --ap-ok-bg:#16301F; --ap-adj:#F0B062; --ap-adj-bg:#36260F}
.vappr{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.ap-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ap-q{font-size:14px; font-weight:500}
.ap-btn{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s}
.ap-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(0,0,0,.25)}
.ap-btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.ap-btn.ok{background:var(--ap-ok); border-color:var(--ap-ok); color:#fff}
.ap-btn.dark{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.ap-btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.ap-btn.ghost:hover{background:var(--hover); color:var(--ink); box-shadow:none}
.ap-btn.wa{background:var(--wa); border-color:var(--wa); color:#fff}
.ap-note{font-size:14.5px; border-radius:14px}
.ap-done{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; flex-wrap:wrap}
.ap-done.ok{background:var(--ap-ok-bg)} .ap-done.adj{background:var(--ap-adj-bg)}
.ap-done .grow{display:flex; flex-direction:column; gap:2px; min-width:180px; flex:1}
.ap-done b{font-size:14.5px}
.ap-done.ok b{color:var(--ap-ok)} .ap-done.adj b{color:var(--ap-adj)}
.ap-done small{font-size:13px; color:var(--ink); opacity:.8; white-space:pre-wrap}
.ap-ic{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; flex:none}
.ap-done.ok .ap-ic{background:var(--ap-ok)} .ap-done.adj .ap-ic{background:var(--ap-adj)}
body:has(.apbar){padding-bottom:110px}
.apbar{position:fixed; left:0; right:0; bottom:16px; z-index:30; display:flex; justify-content:center; padding:0 16px; pointer-events:none}
.apbar-in{pointer-events:auto; width:100%; max-width:980px; display:flex; align-items:center; gap:20px; padding:14px 16px 14px 22px; border-radius:22px; background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); box-shadow:0 20px 50px -18px rgba(0,0,0,.35)}
.apbar-info{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0}
.apbar-info b{font-size:15px}
.apbar-info>span:not(.apbar-track){font-size:12.5px; color:var(--muted)}
.apbar-track{display:flex; height:8px; border-radius:999px; background:var(--hover); overflow:hidden; margin-top:4px}
.apbar-track i{display:block; height:100%; transition:width .4s ease}
.apbar-track i.ok{background:var(--ap-ok)} .apbar-track i.adj{background:var(--ap-adj)}
.apbar-act{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.apbar-warn{font-size:13px; color:var(--ap-adj); font-weight:500}
@media (max-width:720px){
  .apbar{bottom:8px; padding:0 8px}
  .apbar-in{flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px}
  .apbar-act{justify-content:stretch} .apbar-act .ap-btn.wa{flex:1; justify-content:center}
  body:has(.apbar){padding-bottom:170px}
}
@media print{ .apbar,.vappr{display:none} }

/* Financeiro com cor: entrada verde, saída vermelha (validado para daltonismo; a posição e a legenda também identificam) */
:root{--fin-in:#0E7C66; --fin-out:#F07A5A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--fin-in:#1C8A6F; --fin-out:#F58668} }
:root[data-theme="dark"]{--fin-in:#1C8A6F; --fin-out:#F58668}
:root[data-theme="light"]{--fin-in:#0E7C66; --fin-out:#F07A5A}
path.fb-e{fill:var(--fin-in)} path.fb-s{fill:var(--fin-out)}
path.fb-e.prev{fill:var(--fin-in); opacity:.32} path.fb-s.prev{fill:var(--fin-out); opacity:.38}
i.fb-e{background:var(--fin-in)} i.fb-s{background:var(--fin-out)}
.fbar i{background:var(--fin-out)}
.fval.entrada{color:var(--fin-in)} .fval.saida{color:color-mix(in srgb, var(--fin-out) 70%, var(--ink))}
.fstats .hstat-box>span:first-child{display:flex; align-items:center; gap:8px}
.fstats .hstat-box:nth-child(1)>span:first-child::before,.fstats .hstat-box:nth-child(2)>span:first-child::before{content:""; width:8px; height:8px; border-radius:3px; background:var(--fin-in)}
.fstats .hstat-box:nth-child(2)>span:first-child::before{background:var(--fin-out)}
.fstats .hstat-box:nth-child(1){background:linear-gradient(180deg, color-mix(in srgb, var(--fin-in) 7%, var(--card)), var(--card) 70%)}
.fstats .hstat-box:nth-child(2){background:linear-gradient(180deg, color-mix(in srgb, var(--fin-out) 8%, var(--card)), var(--card) 70%)}
.fstats .hstat-box:nth-child(3) b:not(.neg){color:var(--fin-in)}
.hstat-box .fdelta b{font-size:inherit; font-weight:600; letter-spacing:0}
body:has(.apbar) .toast{bottom:120px}
@media (max-width:720px){ body:has(.apbar) .toast{bottom:175px} }
.hstat-box.click{cursor:pointer; transition:transform .15s, box-shadow .15s}
.hstat-box.click:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}
.hstat-box.click:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.fs-modal{max-width:620px}
.fs-body{display:flex; flex-direction:column; gap:18px}
.fs-block{display:flex; flex-direction:column; gap:6px}
.fs-h{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; padding-bottom:6px; border-bottom:1px solid var(--soft-line, var(--line))}
.fs-h span{font-variant-numeric:tabular-nums; font-weight:600}
.fs-modal .frow{cursor:default} .fs-modal button.frow{cursor:pointer}
.fs-line{display:flex; justify-content:space-between; gap:12px; padding:8px 2px; font-size:14px}
.fs-line b{font-variant-numeric:tabular-nums; font-weight:500}
.fs-line.sub{border-top:1px solid var(--line); font-weight:500}
.fs-line.tot{border-top:2px solid var(--ink); margin-top:4px; padding-top:12px; font-size:15.5px}
.fs-line.tot b{font-weight:700; font-size:17px}
.fs-calc{display:flex; flex-direction:column}
.fs-cats .fs-line{padding:5px 2px; font-size:13.5px}
.ftag.late{color:var(--danger)}
.aghint{margin:-2px 0 0; font-size:12px; color:var(--muted)}
.agitem.done{opacity:.72}
.agitem.done>i{background:var(--ok)}
.agmenu{position:fixed; z-index:60; min-width:210px; padding:6px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:0 18px 40px -12px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:2px; animation:hfIn .15s ease both}
.agm-i{display:flex; align-items:center; gap:10px; padding:9px 12px; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer}
.agm-i:hover,.agm-i:focus-visible{background:var(--hover); outline:none}
.agm-i.off{color:var(--muted); cursor:default}
.agm-i svg{color:var(--ok)}
/* reserva */
:root{--res:#3E63C8}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--res:#8EA8F0} }
:root[data-theme="dark"]{--res:#8EA8F0}
:root[data-theme="light"]{--res:#3E63C8}
.fval.res{color:var(--res); font-weight:500}
.fres-act{display:flex; gap:6px}
.fres-top{display:flex; justify-content:space-between; gap:16px; align-items:flex-end; flex-wrap:wrap}
.fres-top>div{display:flex; flex-direction:column; gap:2px}
.fres-top b{font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--res); font-variant-numeric:tabular-nums}
.fres-cover{align-items:flex-end; text-align:right}
.fres-cover b{font-size:18px; color:var(--ink)}
.fbar.res i{background:var(--res)}
.fres-goal{font-size:12px; margin-top:-6px}
.fres{background:linear-gradient(180deg, color-mix(in srgb, var(--res) 7%, var(--card)), var(--card) 55%)}
.fconv{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:space-between}

/* ---------- Orçamentos: lista e editor ---------- */
.pfilter{align-self:flex-start; flex-wrap:wrap}
.pfilter small{font-family:var(--mono); font-size:11px; opacity:.7}
.plist{display:flex; flex-direction:column}
.prow-o{display:grid; grid-template-columns:minmax(0,1fr) auto auto 150px; align-items:center; gap:16px; padding:12px 10px; border:0; border-bottom:1px solid var(--soft-line, var(--line)); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; border-radius:12px}
.prow-o:last-child{border-bottom:0}
.prow-o:hover{background:var(--hover)}
.prow-o .grow{display:flex; flex-direction:column; gap:2px; min-width:0}
.prow-o b{font-weight:600; font-size:14.5px}
.prow-o small{font-size:12.5px; color:var(--muted)}
.prow-v{font-variant-numeric:tabular-nums; font-weight:500; font-size:14px; white-space:nowrap}
.prow-d{font-size:12.5px; text-align:right}
@media (max-width:760px){ .prow-o{grid-template-columns:minmax(0,1fr) auto} .prow-v,.prow-d{display:none} }
.lpill.ps-rascunho{background:var(--hover); color:var(--muted)}
.lpill.ps-enviada{background:color-mix(in srgb, #2F6FD6 14%, var(--card)); color:color-mix(in srgb, #2F6FD6 80%, var(--ink))}
.lpill.ps-aceita{background:color-mix(in srgb, var(--ok) 16%, var(--card)); color:var(--ok)}
.lpill.ps-recusada{background:var(--danger-bg); color:var(--danger)}
.hhead .lpill{display:inline-flex; vertical-align:middle; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:500}
.psel{max-width:240px; font-size:13px; padding:6px 10px}
.pf-row{display:flex; gap:24px; flex-wrap:wrap}
.pf-row .pf{grid-template-columns:auto; gap:6px}
.petapa{display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--soft-line, var(--line)); border-radius:14px; background:var(--bg)}
.petapa-h{display:flex; gap:8px; align-items:center}
.petapa-h .inp{font-weight:600}
.popts{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.popts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.popts.n3,.popts.n4{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ .popts.n2,.popts.n3,.popts.n4{grid-template-columns:minmax(0,1fr)} }
.popt{display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--soft-line, var(--line)); border-radius:18px; background:var(--bg)}
.popt.rec{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.popt-h{display:flex; gap:8px; align-items:center}
.popt-h .inp{font-weight:600; font-size:15px}
.popt-h .pill{white-space:nowrap}
.popt-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.popt-row .fmoney{width:200px}
.popt-row>.inp{flex:1 1 260px}
.popt-items{display:flex; flex-direction:column; gap:6px}
.pitem{display:grid; grid-template-columns:70px minmax(0,1fr) 30px; gap:6px; align-items:center}
.pitem .inp{padding:7px 10px; font-size:14px}
.pitem .qty{text-align:center; font-variant-numeric:tabular-nums}
.padd{font-size:13.5px; color:var(--muted); padding:7px 10px}
.pchecks{display:flex; flex-direction:column; gap:6px}
.pcheck{display:flex; align-items:flex-start; gap:10px; font-size:14px; cursor:pointer; padding:4px 2px}
.pcheck input{margin-top:3px; accent-color:var(--ink); width:16px; height:16px}
.pcheck-add{display:flex; gap:8px; margin-top:4px}
.pcheck-add .inp{max-width:420px; padding:7px 10px; font-size:14px}
.pfoot{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pchoose{display:flex; flex-direction:column; gap:8px}
.pchoose-o{display:flex; flex-direction:column; gap:2px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.pchoose-o.on{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.pchoose-o span{font-variant-numeric:tabular-nums; font-weight:600}
.pchoose-o small{font-size:12.5px; color:var(--muted)}

/* ---------- Orçamentos: página do cliente ---------- */
.oo{--oo-ink:#1D1C1A; --oo-muted:#6B6861; --oo-line:#E6E4DE; --oo-bg:#FBFAF7; --oo-card:#FFFFFF; --oo-acc:#1D1C1A; background:var(--oo-bg); color:var(--oo-ink); min-height:100vh}
.oo-wrap{max-width:980px; margin:0 auto; padding:0 24px}
.oo-top{padding:22px 0; border-bottom:1px solid var(--oo-line)}
.oo-top .oo-wrap{display:flex; align-items:center; gap:14px}
.oo-top .elev{height:22px; color:var(--oo-ink)}
.oo-top .hsub{color:var(--oo-muted); font-size:13px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.oo-hero{padding:72px 0 56px; background:radial-gradient(700px 300px at 85% 0%, #ECEAE4, transparent 70%)}
.oo-k{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--oo-muted); margin:0}
.oo-hero h1{font-size:clamp(38px,6.4vw,68px); line-height:1.02; letter-spacing:-.04em; font-weight:700; margin:10px 0 0; max-width:14ch; text-wrap:balance}
.oo-for{font-size:18px; margin:22px 0 0; color:var(--oo-muted)}
.oo-for b{color:var(--oo-ink)}
.oo-sec{padding:48px 0; border-top:1px solid var(--oo-line)}
.oo-sec h2{font-size:13px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--oo-muted); font-weight:500; margin:0 0 20px}
.oo-sec .oo-lead{font-size:clamp(22px,3vw,30px); line-height:1.3; letter-spacing:-.02em; font-weight:500; margin:0 0 16px; max-width:30ch}
.oo-sec p{font-size:16.5px; line-height:1.65; max-width:62ch; margin:0}
.oo-steps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:720px){ .oo-steps{grid-template-columns:minmax(0,1fr)} }
.oo-step{display:flex; gap:16px; padding:22px; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:20px}
.oo-n{font-family:var(--mono); font-size:13px; color:var(--oo-muted); padding-top:3px}
.oo-step h3{margin:0 0 10px; font-size:17px; letter-spacing:-.01em}
.oo-step ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:14.5px; line-height:1.5; color:#3a3936}
.oo-inv .hsub{color:var(--oo-muted); margin:-8px 0 20px}
.oo-cards{display:grid; gap:16px; grid-template-columns:minmax(0,520px)}
.oo-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.oo-cards.n3,.oo-cards.n4{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .oo-cards.n2,.oo-cards.n3,.oo-cards.n4{grid-template-columns:minmax(0,1fr)} }
.oo-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:28px; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:24px; box-shadow:0 1px 2px rgba(28,27,24,.04), 0 18px 40px -24px rgba(28,27,24,.25)}
.oo-card.rec{background:var(--oo-ink); color:#fff; border-color:var(--oo-ink); box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.oo-badge{position:absolute; top:-12px; left:24px; background:#fff; color:var(--oo-ink); border:1px solid var(--oo-line); font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px}
.oo-name{font-size:15px; font-weight:600; margin:0}
.oo-price{margin:4px 0 0; display:flex; align-items:baseline; gap:4px}
.oo-price b{font-size:40px; letter-spacing:-.04em; font-weight:700; font-variant-numeric:tabular-nums}
.oo-price b.tbd{font-size:26px}
.oo-price span{font-size:16px; opacity:.7}
.oo-rec{margin:0; font-size:13.5px; opacity:.7}
.oo-items{list-style:none; margin:8px 0 6px; padding:14px 0 0; border-top:1px solid color-mix(in srgb, currentColor 14%, transparent); display:flex; flex-direction:column; gap:9px; font-size:15px}
.oo-items li{display:flex; gap:10px; align-items:baseline}
.oo-ck{font-weight:700; opacity:.6}
.oo-btn{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:999px; border:0; background:#1FA855; color:#fff; font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:transform .15s, box-shadow .15s}
.oo-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(31,168,85,.6)}
.oo-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px}
@media (max-width:720px){ .oo-two{grid-template-columns:minmax(0,1fr)} }
.oo-list{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:15.5px; line-height:1.5}
.oo-end{padding:64px 0 72px; border-top:1px solid var(--oo-line); text-align:center}
.oo-close{font-size:clamp(20px,2.6vw,26px); line-height:1.4; letter-spacing:-.015em; max-width:34ch; margin:0 auto 28px; text-wrap:balance}
.oo-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px}
.oo-ghost{display:inline-flex; align-items:center; height:42px; padding:0 18px; border-radius:999px; border:1px solid var(--oo-line); background:var(--oo-card); color:var(--oo-ink); font:inherit; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer}
.oo-logo{height:30px; color:var(--oo-ink)}
@media print{
  @page{size:A4; margin:14mm}
  .oo{background:#fff}
  .oo-actions,.oo-btn,.ebar{display:none!important}
  .oo-hero{padding:120px 0 80px; background:none; break-after:page}
  .oo-sec{padding:28px 0; break-inside:avoid}
  .oo-inv{break-before:page}
  .oo-card,.oo-step{box-shadow:none; break-inside:avoid}
  .oo-card.rec{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .oo-end{break-before:avoid}
}

/* ---------- Quadro ---------- */
:root{--k-task:#7A5AF8}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--k-task:#A897FA} }
:root[data-theme="dark"]{--k-task:#A897FA}
.k-task{--k:var(--k-task)}
.hpage.qpage{max-width:none; padding-right:0; gap:18px}
.qhead{padding-right:44px}
.qhead .hhead-act{gap:8px}
.qsel{max-width:200px; height:42px; border-radius:999px; padding:0 14px; font-size:13.5px}
.qboard{display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding:2px 44px 24px 2px; min-height:calc(100vh - 220px)}
.qboard::-webkit-scrollbar{height:10px} .qboard::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px}
.qlist{flex:0 0 288px; max-height:calc(100vh - 210px); display:flex; flex-direction:column; background:color-mix(in srgb, var(--card) 70%, transparent); border:1px solid var(--glass-line, var(--line)); border-radius:20px; box-shadow:var(--sh-sm); backdrop-filter:blur(10px); transition:opacity .15s}
.qlist.dragging{opacity:.4}
.qlist.drop-before{box-shadow:-4px 0 0 0 var(--ink)}
.qboard.drop-end .qnewlist{box-shadow:-4px 0 0 0 var(--ink)}
.qlist-h{display:flex; align-items:center; gap:6px; padding:12px 10px 8px 14px; cursor:grab}
.qlist-name{flex:1; min-width:0; text-align:left; border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); cursor:pointer; padding:4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qrename{flex:1; padding:5px 8px; font-size:13px; font-weight:600}
.qcount{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.qcards{display:flex; flex-direction:column; gap:8px; padding:4px 10px 6px; overflow-y:auto; min-height:12px}
.qcard{display:flex; flex-direction:column; gap:7px; padding:11px 12px; background:var(--card); border:1px solid var(--soft-line, var(--line)); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.05); cursor:pointer; transition:box-shadow .15s, transform .15s; user-select:none}
.qcard:hover{box-shadow:var(--sh); transform:translateY(-1px)}
.qcard.dragging{opacity:.35; transform:rotate(2deg)}
.qcard.done .qtitle{color:var(--muted)}
.qph{height:46px; border-radius:14px; border:2px dashed var(--line-strong); background:var(--hover); flex:none}
.qlabs{display:flex; gap:4px; flex-wrap:wrap}
.qlabs i{width:34px; height:7px; border-radius:999px}
.qclient{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:500}
.hav.xs{width:18px; height:18px; border-radius:6px} .hav.xs b{font-size:8px} .hav.xs img{padding:1px}
.qtitle{font-size:14px; line-height:1.35; font-weight:500; color:var(--ink); word-break:break-word; display:flex; gap:6px; align-items:flex-start}
.qok{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--ok); color:#fff; flex:none; margin-top:1px}
.qbadges{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.qdue{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; padding:2px 7px; border-radius:7px; background:var(--hover); color:var(--muted); font-weight:500}
.qdue.late{background:var(--danger); color:#fff}
.qdue.soon{background:#E2B203; color:#1D1C1A}
.qdue.done{background:var(--ok); color:#fff}
.qb{display:inline-flex; align-items:center; gap:3px; font-size:11.5px; color:var(--muted)}
.qb.full{color:var(--ok)}
.qmem{display:flex; margin-left:auto}
.qmem i{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10.5px; font-weight:700; background:var(--ink); color:var(--bg); border:2px solid var(--card); margin-left:-6px}
.qadd-btn{display:flex; align-items:center; gap:6px; margin:4px 10px 10px; padding:9px 10px; border:0; border-radius:12px; background:none; color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer; text-align:left}
.qadd-btn:hover{background:var(--hover); color:var(--ink)}
.qadd{padding:4px 10px 10px; display:flex; flex-direction:column; gap:6px}
.qadd textarea{font-size:14px; border-radius:12px; resize:none}
.qadd-act{display:flex; gap:6px; align-items:center}
.qnewlist{flex:0 0 272px; border-radius:20px; background:color-mix(in srgb, var(--card) 45%, transparent); border:1px dashed var(--line-strong)}
.qnewlist .qadd-btn{margin:6px}
.qnewlist .inp{margin:10px; width:calc(100% - 20px)}
.qempty{align-items:flex-start}
.qmodal{max-width:900px; padding:24px 26px}
.qm-head{display:flex; gap:10px; align-items:flex-start}
.qm-title{flex:1; border:1px solid transparent; background:transparent; font:inherit; font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--ink); resize:none; padding:4px 8px; margin-left:-8px; border-radius:10px; overflow:hidden; line-height:1.3}
.qm-title:hover{background:var(--hover)} .qm-title:focus{outline:none; border-color:var(--ink); background:var(--card)}
.qm-sub{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:-8px}
.qm-list{width:auto; padding:3px 8px; font-size:13px; border-radius:8px}
.qm-grid{display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:24px}
@media (max-width:760px){ .qm-grid{grid-template-columns:minmax(0,1fr)} }
.qm-main{display:flex; flex-direction:column; gap:20px; min-width:0}
.qm-meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:600px){ .qm-meta{grid-template-columns:minmax(0,1fr)} }
.qm-f{display:flex; flex-direction:column; gap:6px}
.qm-f .inp{padding:7px 10px; font-size:14px}
.qm-due{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.qm-due input[type=date]{width:150px} .qm-due input[type=time]{width:100px}
.qm-labels{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.qlab{min-width:44px; height:28px; padding:0 10px; border-radius:8px; border:2px solid transparent; background:color-mix(in srgb, var(--lc) 30%, var(--card)); color:var(--ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; opacity:.55}
.qlab.on{background:var(--lc); color:#1D1C1A; opacity:1}
.qlab.add{--lc:var(--hover); background:var(--hover); opacity:1; color:var(--muted)}
.qlab-new{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.qlab-new .inp{width:120px; padding:5px 8px; font-size:13px}
.qsw{width:22px; height:22px; border-radius:6px; border:2px solid transparent; cursor:pointer}
.qsw.on{border-color:var(--ink)}
.qm-sec{display:flex; flex-direction:column; gap:8px}
.qm-sec h3{margin:0; font-size:14.5px; display:flex; align-items:center; gap:6px}
.qm-sec-h{display:flex; align-items:center; gap:10px} .qm-sec-h h3{flex:1}
.qm-sec textarea{font-size:14.5px; line-height:1.55; border-radius:12px}
.qm-bar{display:block; height:6px; background:var(--hover); border-radius:999px; overflow:hidden} .qm-bar i{display:block; height:100%; background:var(--ok)}
.qm-items{display:flex; flex-direction:column}
.qm-item{align-items:center; padding:5px 6px; border-radius:8px}
.qm-item:hover{background:var(--hover)}
.qm-item span{flex:1}
.qm-item.done span{text-decoration:line-through; color:var(--muted)}
.qm-item .ibtn{opacity:0} .qm-item:hover .ibtn{opacity:1}
.qm-anx{display:flex; flex-direction:column; gap:6px}
.qm-anx-i{display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px; border:1px solid var(--soft-line, var(--line))}
.qm-anx-i img{width:56px; height:40px; object-fit:cover; border-radius:6px}
.qm-anx-ic{width:56px; text-align:center}
.qm-anx-i a{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:13.5px}
.qm-comment{display:flex; gap:8px; align-items:flex-end}
.qm-comment textarea{flex:1}
.qm-c{display:flex; gap:10px; align-items:flex-start}
.qm-c p{margin:2px 0 0; font-size:14px; white-space:pre-wrap; word-break:break-word}
.qm-c>div{flex:1}
.qm-side{display:flex; flex-direction:column; gap:6px}
.qm-side .hbtn{justify-content:flex-start}
.qm-file{position:relative; overflow:hidden; cursor:pointer}
.qm-file input{position:absolute; inset:0; opacity:0; cursor:pointer}
.qm-when{font-size:11.5px; margin-top:10px}
@media (max-width:820px){ .hpage.qpage{padding-right:16px} .qhead{padding-right:0} .qboard{padding-right:16px} .qlist{flex-basis:84vw} }
.qm-comment textarea{min-height:0; height:46px; resize:vertical}

/* ---------- Equipe ---------- */
.eqlist{display:flex; flex-direction:column}
.eqrow{display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:1px solid var(--soft-line, var(--line)); flex-wrap:wrap}
.eqrow:last-child{border-bottom:0}
.eqrow.off{opacity:.55}
.eq-av{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-weight:700; flex:none}
.eqrow .grow{display:flex; flex-direction:column; gap:2px; min-width:160px; flex:1}
.eqrow b{font-weight:600; font-size:14.5px}
.eqrow small{font-size:12.5px; color:var(--muted)}
.eqrow .lpill{padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500}
.eq-st{font-size:12.5px; color:var(--muted); width:80px}
.eq-act{display:flex; gap:6px; flex-wrap:wrap}
.eqgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:700px){ .eqgrid{grid-template-columns:minmax(0,1fr)} }
.eqgrid p{margin:4px 0 0}
.eqcred{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:14px; background:var(--hover)}
.eqcred>div{display:flex; flex-direction:column; gap:2px}
.eqcred b{font-size:15px; word-break:break-all}
.eqcred b.mono{font-family:var(--mono); font-size:17px; letter-spacing:.04em}
.eq-act{min-width:390px; justify-content:flex-end} @media (max-width:900px){ .eq-act{min-width:0; justify-content:flex-start} }

/* Quadro: recursos estilo Trello */
.qlist.tint{background:color-mix(in srgb, var(--lc) 16%, var(--card)); border-color:color-mix(in srgb, var(--lc) 35%, transparent)}
.qlist.tint .qlist-h{border-top:4px solid var(--lc); border-radius:20px 20px 0 0; padding-top:9px}
.qcol-btn{opacity:0; transition:opacity .15s} .qlist-h:hover .qcol-btn{opacity:1}
.qhid{font-size:12px}
.qlist.mini{flex:0 0 48px; min-height:220px; align-items:center; padding:6px 0; cursor:pointer}
.qlist.mini.tint,.qlist.mini[style]{background:color-mix(in srgb, var(--lc, var(--card)) 22%, var(--card))}
.qlist.mini .qcards{display:none}
.qmini{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; height:100%; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; padding:8px 0}
.qmini-n{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.qmini-t{writing-mode:vertical-rl; transform:rotate(180deg); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; max-height:60vh; overflow:hidden; text-overflow:ellipsis}
.qcard.cover{padding-top:0; overflow:hidden}
.qcover{display:block; height:30px; margin:0 -12px 2px; background:var(--cv)}
.qcard.sel{outline:2px solid var(--ink); outline-offset:1px}
.agm-h{display:block; padding:6px 12px 4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.agm-i kbd,.qk kbd{margin-left:auto; font-family:var(--mono); font-size:10.5px; padding:1px 6px; border-radius:5px; border:1px solid var(--line); color:var(--muted); background:var(--bg)}
.agm-i:disabled{opacity:.5; cursor:not-allowed}
.agm-back{color:var(--muted)}
.agm-dot{width:10px; height:10px; border-radius:3px; display:inline-block}
.agm-lab{width:28px; height:10px; border-radius:999px; display:inline-block}
.agm-colors{display:flex; flex-wrap:wrap; gap:5px; padding:6px 10px}
.qcmenu{min-width:240px; max-height:80vh; overflow:auto}
.qkeys{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 18px}
@media (max-width:560px){ .qkeys{grid-template-columns:minmax(0,1fr)} }
.qk{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--soft-line, var(--line)); font-size:13.5px}
.qk span:first-child{display:flex; gap:4px; flex-wrap:wrap} .qk kbd{margin:0}
.qm-cover{padding:0}
.qtable-wrap{overflow-x:auto}
.qtable{width:100%; border-collapse:collapse; font-size:13.5px}
.qtable th{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
.qtable th button{border:0; background:none; font:inherit; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); cursor:pointer; padding:0}
.qtable td{padding:10px; border-bottom:1px solid var(--soft-line, var(--line)); vertical-align:middle}
.qtable tbody tr{cursor:pointer} .qtable tbody tr:hover{background:var(--hover)}
.qtable tr.done b{color:var(--muted); text-decoration:line-through}
.qtl{display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600; background:color-mix(in srgb, var(--lc, #8590A2) 22%, var(--card))}
/* mini calendário */
.qd-bg{position:fixed; inset:0; z-index:58}
.qdate{position:fixed; z-index:59; width:290px; padding:14px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:0 22px 50px -14px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:10px; animation:hfIn .15s ease both}
.qd-h{display:flex; justify-content:space-between; align-items:center} .qd-h b{font-size:14px}
.qd-nav{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:600}
.qd-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.qd-wd{font-size:10.5px; text-align:center; color:var(--muted); font-family:var(--mono); padding:2px 0}
.qd-day{height:32px; border:0; border-radius:8px; background:none; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; font-variant-numeric:tabular-nums}
.qd-day:hover{background:var(--hover)}
.qd-day.out{color:var(--muted); opacity:.55}
.qd-day.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.qd-day.on{background:var(--ink); color:var(--bg); font-weight:700}
.qd-fields{display:grid; grid-template-columns:1.4fr 1fr; gap:8px}
.qd-fields .inp{padding:6px 8px; font-size:13.5px}
.qd-act{display:flex; gap:8px}
.qm-cal{width:36px; height:36px}
.qd-tip{margin:-2px 0 0; font-size:11.5px; color:var(--muted)}
.qlv-note{margin:-6px 0 0; padding:9px 14px; border-radius:12px; background:var(--hover); font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-right:44px}
/* fundo do Quadro: pontilhado sutil + logo da Elev em marca d'água */
.hmain:has(.qpage){position:relative; background-image:radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px); background-size:22px 22px; background-attachment:fixed}
.qwm{position:fixed; right:-2vw; bottom:-6vh; width:min(62vw, 980px); pointer-events:none; z-index:0; color:var(--ink); opacity:.045; transform:rotate(-8deg)}
.qwm .elev{width:100%; height:auto; display:block}
.qpage{position:relative; z-index:1}
@media (max-width:820px){ .qwm{width:90vw; bottom:-2vh} }

/* ===== Foto de perfil ===== */
.eq-av, .qmem i, .tl-av, .me-av, .acc-av{overflow:hidden}
.eq-av img, .qmem i img, .tl-av img, .me-av img, .acc-av img{width:100%; height:100%; object-fit:cover; display:block}
.me-av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-size:10.5px; font-weight:700; flex:none}
.acc-photo{display:flex; align-items:center; gap:16px; padding:4px 0 6px}
.acc-photo > div{display:flex; flex-direction:column; gap:4px; min-width:0}
.acc-av{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-size:26px; font-weight:700; flex:none; box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--line)}
.acc-btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}

/* ===== Concluir card no hover (como no Trello) ===== */
.qchk{flex:none; width:0; height:16px; margin:1px 0 0 -6px; padding:0; border-radius:50%; border:1.5px solid var(--muted); background:transparent; color:transparent; display:inline-grid; place-items:center; cursor:pointer; opacity:0; overflow:hidden; transition:width .15s, margin .15s, opacity .15s, background .15s, border-color .15s}
.qchk svg{width:10px; height:10px}
.qcard:hover .qchk, .qcard.sel .qchk, .qchk:focus-visible, .qchk.on{width:16px; margin-left:0; opacity:1}
.qchk:hover{border-color:var(--ok); color:var(--ok)}
.qchk.on{background:var(--ok); border-color:var(--ok); color:#fff}
.qchk.on:hover{filter:brightness(.92); color:#fff}
.qm-mems{display:flex; flex-wrap:wrap; gap:8px}
.qm-mem{display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:3px 10px 3px 3px; border-radius:999px; background:var(--hover)}
.qm-mem i{width:22px; height:22px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-style:normal; font-size:10.5px; font-weight:700; background:var(--ink); color:var(--bg)}
.qm-mem i img{width:100%; height:100%; object-fit:cover}

/* ===== Recorte da foto ===== */
.crop-box{position:relative; width:260px; height:260px; margin:6px auto 0; border-radius:16px; overflow:hidden; background:#111; cursor:grab; touch-action:none; user-select:none}
.crop-box.drag{cursor:grabbing}
.crop-box img{position:absolute; max-width:none; pointer-events:none}
.crop-ring{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 400px rgba(0,0,0,.55); outline:2px solid rgba(255,255,255,.9); outline-offset:-2px; pointer-events:none}
.crop-zoom{display:flex; align-items:center; gap:10px; max-width:260px; width:100%; margin:4px auto 0; color:var(--muted); font-weight:600}
.crop-zoom input{flex:1; accent-color:var(--ink)}

/* ===== Histórico do card ===== */
.qh-list{display:flex; flex-direction:column; gap:2px; position:relative}
.qh-i{display:flex; gap:10px; align-items:flex-start; padding:6px 0}
.qh-i .tl-av{width:24px; height:24px; font-size:10.5px}
.qh-i p{margin:2px 0 0; font-size:13px; line-height:1.45; color:var(--muted)}
.qh-i p b{color:var(--ink); font-weight:600}
.qh-i small{display:block; font-size:11.5px; color:var(--muted); opacity:.8; margin-top:1px}
.eq-pw{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}
.login-forgot-btn{align-self:center; font-size:13px; margin-top:-4px}
.login-forgot{background:var(--hover); padding:10px 12px; border-radius:10px; line-height:1.5}
.sbtn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.sbtn.danger:hover{filter:brightness(.93)}
.eq-warn{background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--ink); padding:10px 12px; border-radius:10px}
/* botão Entrar bem visível: preto (no tema escuro, claro) */
.login-btn, .ebtn.primary.login-btn{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600; padding:12px 16px}
.login-btn:hover{opacity:.88}
.login-btn:disabled{opacity:.6}
.login-forgot-btn{background:none !important; border:0; padding:2px 6px}