@font-face{font-family:Montserrat;font-weight:400;src:url(fonts/Montserrat-400.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:500;src:url(fonts/Montserrat-500.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:600;src:url(fonts/Montserrat-600.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:700;src:url(fonts/Montserrat-700.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:800;src:url(fonts/Montserrat-800.ttf) format("truetype")}
@font-face{font-family:Montserrat;font-weight:900;src:url(fonts/Montserrat-900.woff2) format("woff2")}

/* ---------- tokens (o JS sobrescreve --c1/--c2 com as cores do tema do cliente) ---------- */
:root{--c1:#FF620A;--c1t:#1A0524;--c2:#5711B7;--c2l:#8A4BEA;
  --bg:#1A0524;--bg2:#120219;--panel:#2A0638;--panel2:#3A0B4D;--line:#55286E;--txt:#FFFFFF;--muted:#CDBBE2;--grid:#3B1250;--track:#18031F;
  --ok:#3CCB7F;--warn:#FFB020;--bad:#FF5A5A;--rain:#4FA3FF;--sun:#FFB020;--q1:#FFB020;--q2:#3CCB7F;--q3:#4FA3FF;--q4:#FF5A5A;--q5:#2EC4B6;--q6:#E37BD0;--shadow:0 10px 30px rgba(0,0,0,.35)}
.light{--bg:#F7F3FB;--bg2:#ECE5F3;--panel:#FFFFFF;--panel2:#F4EEFA;--line:#DCCDEB;--txt:#2A0638;--muted:#6B5A80;--grid:#ECE3F4;--track:#EFE7F6;
  --ok:#1E9A59;--warn:#C27C00;--bad:#D63B3B;--shadow:0 6px 20px rgba(42,6,56,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg2);color:var(--txt);font-family:Montserrat,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--c1)}
.mut{color:var(--muted)}.up{color:var(--ok)}.down{color:var(--bad)}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.hidden{display:none!important}

/* ---------- botões e formulários ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 18px;font-weight:800;font-size:15px;cursor:pointer;background:var(--c1);color:var(--c1t);text-decoration:none;white-space:nowrap}
.btn.sec{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.sec:hover{border-color:var(--c1)}
.btn.min{padding:6px 12px;font-size:13px}
.btn.perigo{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.btn:active{transform:scale(.97)}
.inp{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);font-size:15px}
.inp:focus{outline:2px solid var(--c1);outline-offset:1px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.err{background:rgba(255,90,90,.12);border:1px solid var(--bad);color:var(--txt);border-radius:10px;padding:10px 14px;font-size:14px}
.note{background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.5);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.5}

/* ---------- topo do app ---------- */
.topo{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topo img{height:40px}
.topo .ws{font-size:13px;color:var(--muted);line-height:1.3}
.topo .ws b{display:block;color:var(--txt);font-size:15px}
.topo nav{margin-left:auto;display:flex;gap:8px;align-items:center}
.topo nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:700;font-size:14px}
.topo nav a.on,.topo nav a:hover{color:var(--txt);background:var(--panel2)}
main{padding:24px;max-width:1500px;margin:0 auto}
h1.t{font-size:28px;font-weight:900;margin-bottom:6px}
p.st{color:var(--muted);margin-bottom:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card h3{font-size:18px;font-weight:800;margin-bottom:6px}
.card p{font-size:14px;color:var(--muted);line-height:1.45;margin-bottom:12px}
.card .acts{display:flex;gap:8px;flex-wrap:wrap}
.thumb{height:120px;border-radius:10px;background:var(--bg2);margin-bottom:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)}
.thumb .mini{display:grid;gap:3px;padding:6px;width:100%;height:100%}
.thumb .mini i{background:var(--panel2);border-radius:3px;display:block}
.thumb .mini i.c1{background:var(--c1);opacity:.75}.thumb .mini i.c2{background:var(--c2l);opacity:.7}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--panel2);color:var(--muted);margin-right:6px}
.sec-t{font-size:15px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}

/* ---------- tela de conexão ---------- */
.conn{max-width:620px;margin:6vh auto;display:flex;flex-direction:column;gap:16px}
.conn img.lg{height:64px;align-self:flex-start}
.conn h1{font-size:30px;font-weight:900}
.conn p{color:var(--muted);line-height:1.55}
code{background:var(--bg2);padding:1px 6px;border-radius:4px;font-size:.92em;color:var(--c1)}

/* ---------- quadro (board) ---------- */
.stagewrap{position:relative;width:100%;overflow:hidden;display:flex;justify-content:center}
.board{position:absolute;top:0;left:0;transform-origin:0 0;background:radial-gradient(1000px 800px at 95% -5%,color-mix(in srgb,var(--tint,var(--c2)) 40%,transparent) 0%,transparent 60%),var(--bg);overflow:hidden;border-radius:6px}
.light .board{background:radial-gradient(1000px 800px at 95% -5%,color-mix(in srgb,var(--tint,var(--c2)) 12%,transparent) 0%,transparent 60%),var(--bg)}
.bhead{position:absolute;left:28px;right:28px;top:22px;height:84px;display:flex;align-items:center;gap:22px}
.bhead img{max-height:70px;max-width:340px;object-fit:contain}
.bhead .pt{font-size:34px;font-weight:900;line-height:1}
.bhead .pt small{display:block;font-size:17px;color:var(--muted);font-weight:600;margin-top:6px}
.bhead .pill{margin-left:auto;display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--ok) 55%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent);padding:10px 18px;border-radius:999px;font-weight:800;font-size:18px;white-space:nowrap}
.bhead .pill i{width:12px;height:12px;border-radius:50%;background:var(--ok);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(60,203,127,.7)}70%{box-shadow:0 0 0 12px rgba(60,203,127,0)}100%{box-shadow:0 0 0 0 rgba(60,203,127,0)}}
.bfoot{position:absolute;left:28px;right:28px;bottom:10px;height:22px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.bfoot .dots{display:flex;gap:8px}.bfoot .dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}.bfoot .dots i.on{background:var(--c1)}
.wg{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
html:not(.light) .wg{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 92%,transparent),color-mix(in srgb,var(--panel) 92%,transparent))}
.wg .wh{display:flex;align-items:flex-start;gap:8px;padding:14px 18px 4px;min-height:52px}
.wg .wt{font-weight:800;font-size:20px;line-height:1.15;flex:1;min-width:0}
.wg .wt small{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:3px}
.wg .tool{font-size:11px;font-weight:700;color:var(--c1);background:color-mix(in srgb,var(--c1) 10%,transparent);border:1px solid color-mix(in srgb,var(--c1) 40%,transparent);padding:2px 7px;border-radius:5px;font-family:ui-monospace,Consolas,monospace;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.wg .wb{flex:1;position:relative;margin:0 18px 14px;min-height:0}
.wg .wb>*{position:absolute;inset:0}
.wg.destaque{border-color:color-mix(in srgb,var(--c1) 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 16%,var(--panel)),var(--panel) 70%)}
.na{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-weight:600;font-size:16px;padding:10px;line-height:1.4}

/* ---------- componentes ---------- */
svg.vz text{font-family:Montserrat,sans-serif}
.kpi{display:flex;flex-direction:column;justify-content:center;gap:4px}
.kpi.c{align-items:center;text-align:center}
.kpi .kv{font-weight:900;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.kpi .kv small,.alerta .kv small{font-size:.38em;font-weight:800;letter-spacing:0;margin-left:4px}
.kpi .kd{font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpi .sp{margin-top:auto}
.pill{display:inline-block;background:color-mix(in srgb,var(--c1) 14%,transparent);color:var(--c1);border-radius:999px;padding:2px 10px;font-size:.85em;font-weight:800}
.rosca{display:flex;align-items:center;gap:20px}
.rosca .ring{position:relative;flex:none}
.rosca .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rosca .rc b{font-weight:900;line-height:1}.rosca .rc span{color:var(--muted);font-weight:600;margin-top:4px;max-width:70%}
.rosca .rs{display:flex;flex-direction:column;gap:6px;font-weight:600;min-width:0}
.rosca .rs .kv{font-weight:900;line-height:1;white-space:nowrap}
.arc{transition:stroke-dashoffset 1s ease}
.leg2{list-style:none;display:flex;flex-direction:column;gap:6px;min-width:0}
.leg2 li{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg2 li i{width:12px;height:12px;border-radius:3px;flex:none}
.rank{list-style:none;display:flex;flex-direction:column;justify-content:space-around;height:100%}
.rank li{display:grid;grid-template-columns:1.6em minmax(0,1.3fr) 1.6fr auto;align-items:center;gap:.7em;cursor:pointer}
.rank .n{width:1.5em;height:1.5em;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8em}
.rank li.top .n{background:var(--c1);color:var(--c1t);border-color:var(--c1)}
.rank .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .nm small{display:block;font-size:.7em;color:var(--muted);font-weight:600}
.rank .tr{height:.6em;background:var(--track);border-radius:9px;position:relative;overflow:hidden}
.rank .tr i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--c2),var(--c2l));border-radius:9px;animation:growX .8s ease both;transform-origin:left}
.rank .tr em{position:absolute;top:0;bottom:0;width:3px;background:var(--txt)}
.rank .v{text-align:right;font-weight:800;white-space:nowrap}
.rank .v b{font-size:.75em;margin-left:.5em}
.alerta{display:flex;flex-direction:column;gap:6px;justify-content:center}
.alerta .kv{font-weight:900;line-height:1;white-space:nowrap}
.alerta p{color:var(--muted);font-size:.85em;line-height:1.35;font-weight:600}
.days{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5em}
.days .dc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:.4em .2em;cursor:pointer;text-align:center}
.days .dc.chuva{border-color:var(--rain)}.days .dc.calor{border-color:var(--sun)}
.days .dc b{font-weight:800;text-transform:capitalize}.days .dc small{color:var(--muted);font-size:.7em;font-weight:600}
.days .dc .tp{font-weight:900;font-size:1.4em}
.days .dc .mt{border-top:1px solid var(--line);padding-top:.3em;width:90%}
.tbl{overflow:auto}
.tbl table{width:100%;border-collapse:collapse}
.tbl th{text-align:left;color:var(--muted);font-size:.75em;letter-spacing:1px;text-transform:uppercase;padding:.3em .4em;border-bottom:1px solid var(--line)}
.tbl td{padding:.35em .4em;border-bottom:1px solid var(--grid);font-weight:600}
.tbl td.n{text-align:right;font-weight:800;white-space:nowrap}
.bar{transform-box:fill-box;transform-origin:50% 100%;animation:growY .6s cubic-bezier(.2,.8,.2,1) both}
.hbar{transform-box:fill-box;transform-origin:0 50%;animation:growX .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes growY{from{transform:scaleY(0)}to{transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:none}}
.hit{fill:transparent;cursor:pointer}
.hit.sel{fill:color-mix(in srgb,var(--txt) 8%,transparent)}

/* ---------- visualizar ---------- */
.vbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.vbar h1{font-size:24px;font-weight:900;margin-right:10px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--c1);border-color:var(--c1);color:var(--c1t)}
.banner{margin-bottom:12px}

/* ---------- editor ---------- */
.ed{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.ed .canvas{background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:12px}
.ed .side{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto}
.side h3{font-size:16px;font-weight:800}
.side .grp{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.mlist{display:flex;flex-direction:column;gap:6px}
.mlist .mi{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--bg2);border-radius:10px}
.mlist .mi:hover{border-color:var(--c1)}
.mlist .add{flex:1;min-width:0;text-align:left;border:0;background:none;color:inherit;font:inherit;padding:9px 12px;cursor:pointer;font-weight:700;font-size:14px}
.mlist .add small{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist .fav{flex:none;width:38px;border:0;background:none;color:var(--muted);font-size:17px;cursor:pointer;border-radius:0 10px 10px 0}
.mlist .fav:hover{color:var(--c1)}
.mlist .fav.on{color:var(--c1)}
.catf{display:flex;flex-wrap:wrap;gap:6px}
.cchip{border:1px solid var(--line);background:var(--bg2);color:var(--txt);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cchip.on{background:var(--c1);color:var(--c1t);border-color:var(--c1)}
.cat{border-bottom:1px solid var(--line);padding:2px 0 6px}
.cat-h{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:inherit;font:inherit;font-size:14px;padding:8px 2px;cursor:pointer;text-align:left}
.cat.fixa .cat-h{cursor:default;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.cat-h .seta{display:inline-block;transition:transform .15s;color:var(--muted);font-size:12px}
.cat.aberta .cat-h .seta{transform:rotate(90deg)}
.cat-h .n{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--bg2);border-radius:999px;padding:1px 8px}
.cat .mais{margin-top:6px;width:100%}
.vopts{display:grid;grid-template-columns:1fr;gap:10px}
.vopt{border:2px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;background:var(--bg)}
.vopt.on{border-color:var(--c1)}
.vopt .pv{position:relative;height:150px;overflow:hidden}
.vopt .pv>*{position:absolute;inset:0}
.vopt b{display:block;font-size:13px;margin-top:6px}
.board.edit .wg{cursor:move;user-select:none}
.board.edit .wg.sel{outline:4px solid var(--c1);outline-offset:2px;z-index:5}
.board.edit .wg.bad{outline-color:var(--bad)}
.board.edit .gridbg{position:absolute;pointer-events:none}
.board.edit .gridbg i{position:absolute;border:1px dashed color-mix(in srgb,var(--muted) 35%,transparent);border-radius:10px}
.rz{position:absolute;right:0;bottom:0;width:34px;height:34px;cursor:nwse-resize;z-index:6;background:linear-gradient(135deg,transparent 50%,var(--c1) 50%);border-bottom-right-radius:14px}
.save-st{font-size:13px;color:var(--muted)}
.save-st.dirty{color:var(--warn);font-weight:700}

/* ---------- tema ---------- */
.tema-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:start}
.swatch{display:flex;align-items:center;gap:10px}
.swatch input[type=color]{width:54px;height:40px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px;cursor:pointer}
.logo-pv{height:90px;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:8px}
.logo-pv img{max-height:74px;max-width:100%}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:9px 16px;font-weight:700;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--c1);color:var(--c1t)}

/* ---------- modo TV ---------- */
#tv{position:fixed;inset:0;z-index:50;background:#000;display:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#tv.on{display:block}
#tv .stagewrap{height:100%;align-items:center}
#tv .tvbar{position:absolute;right:12px;top:12px;z-index:60;display:flex;gap:8px;opacity:.55;transition:opacity .3s}
#tv .tvbar:hover,#tv .tvbar:focus-within{opacity:1}
.btn.modo{padding:6px 9px;line-height:0}
.btn.modo svg{width:20px;height:20px}
#tv .tvbar .btn{background:var(--panel);font-size:14px}
#tv .guia{position:absolute;left:28px;bottom:10px;z-index:4;font-weight:800;font-size:16px;color:var(--txt);display:flex;align-items:center;gap:8px}
#tv .guia svg{width:22px;height:22px;color:var(--c1);animation:tap 1s ease-in-out infinite}
@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(4px) scale(.92)}}
.board.tv .wg{cursor:pointer;transition:transform .15s,border-color .2s}
.board.tv .wg:active,.board.tv .wg.pressed{transform:scale(.985);border-color:var(--c1)}
.board.tv .wg.hint{border-color:var(--c1);animation:glow 1.4s ease-in-out 2}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 35%,transparent),0 0 40px color-mix(in srgb,var(--c1) 45%,transparent)}}
.ripple{position:absolute;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;z-index:40;border:4px solid var(--c1);background:radial-gradient(circle,color-mix(in srgb,var(--c1) 35%,transparent) 0,transparent 65%);animation:rip .65s ease-out forwards}
@keyframes rip{from{transform:scale(.15);opacity:1}to{transform:scale(1);opacity:0}}
.board .screen-in{animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- dica e painel "Entenda este quadro" ---------- */
.tip{position:fixed;z-index:80;pointer-events:none;min-width:180px;max-width:360px;background:var(--panel);border:2px solid var(--c1);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);animation:pop .2s ease-out both}
.tip b{display:block;font-size:16px;font-weight:800;color:var(--c1);margin-bottom:3px}
.tip span{display:block;font-size:14px;font-weight:600;line-height:1.45}
@keyframes pop{from{transform:translateY(8px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(10,1,16,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:20px;z-index:75;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;border-radius:22px;background:var(--panel);border:2px solid var(--c1);box-shadow:0 -10px 60px rgba(0,0,0,.5);
  transform:translate(-50%,120%);transition:transform .38s cubic-bezier(.2,.8,.2,1);padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.sheet.on{transform:translate(-50%,0)}
.sheet .k{font-size:13px;font-weight:800;letter-spacing:3px;color:var(--c1);text-transform:uppercase}
.sheet h2{font-size:30px;font-weight:900;line-height:1.1}
.sheet .now{background:color-mix(in srgb,var(--c1) 10%,transparent);border:1px solid color-mix(in srgb,var(--c1) 45%,transparent);border-radius:14px;padding:14px 18px;font-size:18px;line-height:1.45}
.sheet .now b{color:var(--c1)}
.sheet .g2{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
.sheet .bx{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.sheet .bx h4{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sheet .bx p,.sheet .bx li{font-size:16px;line-height:1.45}
.sheet .bx ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.sheet .ask{display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--c2) 25%,transparent);border:1px solid var(--c2l);border-radius:14px;padding:14px 16px}
.sheet .ask .ai{flex:none;width:44px;height:44px;border-radius:12px;background:var(--c2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px}
.sheet .ask p{font-size:18px;font-style:italic;font-weight:600;line-height:1.4}
.sheet .ask code{font-style:normal;font-size:12px;display:inline-block;margin-top:6px}

/* ---------- carregando ---------- */
.loading{display:flex;align-items:center;gap:14px;color:var(--muted);font-weight:600;padding:20px 0}
.spin{width:28px;height:28px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--c1);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- página do callback (servidor) ---------- */
body.pg{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:#1A0524;color:#fff}
.pgbox{width:100%;max-width:620px;background:#2A0638;border:1px solid #55286E;border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:14px}
.pglogo{height:56px;align-self:flex-start}
.pgbox h1{font-size:26px;font-weight:900}
.pgbox p{font-size:16px;color:#CDBBE2;line-height:1.5}
.pgbox textarea{background:#120219;color:#fff;border:1px solid #55286E;border-radius:10px;padding:10px;font-size:13px;width:100%}

@media (max-width:1000px){.ed,.tema-grid{grid-template-columns:1fr}.ed .side{position:static;max-height:none}.sheet .g2{grid-template-columns:1fr}}

/* botão claro/escuro dentro do painel (ao lado do selo de dados) */
.bmodo{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--line);background:var(--panel);color:var(--c1);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bmodo svg{width:28px;height:28px}
.bmodo:active{transform:scale(.92)}

/* ---- componentes adicionais ---- */
.bmeta{display:flex;flex-direction:column;justify-content:center;gap:.7em;height:100%}
.bmeta .bm-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bmeta .kv{font-weight:900;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.bmeta .bm-top b{font-weight:900;white-space:nowrap}
.bm-tr{position:relative;height:1.1em;border-radius:999px;background:var(--track);margin-top:1.4em}
.bm-tr i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;animation:grow .9s ease-out}
.bm-tr em{position:absolute;top:-.45em;bottom:-.45em;width:3px;background:var(--txt);border-radius:2px}
.bm-tr em span{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);font-style:normal;font-size:.75em;font-weight:800;white-space:nowrap;color:var(--muted)}
.bm-sub{font-weight:700;font-size:.85em;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
@keyframes grow{from{width:0}}
.lst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em;height:100%;overflow:hidden}
.lst li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8em;padding:.45em .6em;border-radius:10px;background:var(--panel2);border:1px solid var(--line);cursor:pointer}
.lst .st{font-size:.75em;font-weight:800;padding:.3em .7em;border-radius:999px;white-space:nowrap;background:color-mix(in srgb,var(--c2l) 18%,transparent);color:var(--c2l)}
.lst .st.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.lst .st.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.lst .st.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.lst .tt{display:flex;flex-direction:column;min-width:0}
.lst .tt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.lst .tt small{color:var(--muted);font-size:.75em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst .pr{color:var(--muted);font-weight:700;font-size:.8em;white-space:nowrap}
.lst li.mais{display:block;text-align:center;color:var(--muted);font-weight:700;background:none;border:0}

/* ---- linha de navegação: abas das páginas e filtro de lojas ---- */
.bhead .pt{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navrow{position:absolute;left:28px;right:28px;top:116px;height:50px;display:flex;align-items:center;gap:18px}
.navrow.inerte{pointer-events:none;opacity:.75}
.ptabs{display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line);flex:0 0 auto;max-width:62%;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar,.lscroll::-webkit-scrollbar{display:none}
.ptab{flex:none;border:0;background:none;color:var(--muted);border-radius:999px;padding:8px 20px;font:inherit;font-weight:800;font-size:18px;white-space:nowrap;cursor:pointer}
.ptab.on{background:var(--c1);color:var(--c1t)}
.lojas{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
.lscroll{display:flex;gap:8px;min-width:0;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x proximity;touch-action:pan-x}
.lojas.ovf .lscroll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);padding:0 20px}
.nseta{display:none;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:26px;font-weight:900;line-height:1;cursor:pointer}
.nseta:disabled{opacity:.3;cursor:default}
.lojas.ovf .nseta{display:block}
.fchip{flex:none;scroll-snap-align:center;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:999px;padding:9px 16px;font:inherit;font-weight:800;font-size:17px;white-space:nowrap;cursor:pointer}
.fchip.on{background:var(--c1);color:var(--c1t);border-color:var(--c1)}
.fchip.pad{background:none;color:var(--muted)}
.board.ret .ptab{padding:8px 14px;font-size:16px}
.board.ret .fchip{padding:8px 13px;font-size:15px}
.wt small.flt{color:var(--c1)}

/* ---- arrastar para trocar de página ---- */
.board.view,.board.tv{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.entra-dir{animation:entraDir .35s ease-out}
.entra-esq{animation:entraEsq .35s ease-out}
@keyframes entraDir{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes entraEsq{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}

/* ---- cores dos gráficos e aviso de salvo ---- */
.cgraf{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel2)}
.cgraf summary{cursor:pointer;font-weight:800}
.cg-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:12px 0 4px}
.row.cg{flex-wrap:wrap}
.row.cg .swatch{font-size:13px}
.row.cg .swatch.alt{color:var(--c1)}
.toast-ok{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ok);color:#06210f;font-weight:800;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);z-index:99;transition:opacity .4s,transform .4s}
.toast-ok.sai{opacity:0;transform:translate(-50%,12px)}

/* ---- páginas dentro do quadro ---- */
.vzw{height:100%}
.wb .vzw{flex:1;min-height:0}
.pgq{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:10px;height:30px;font-size:14px;font-weight:800;color:var(--muted)}
.pgq button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:18px;font-weight:900;line-height:1;cursor:pointer}
.pgq i{display:flex;gap:4px;margin-left:6px}
.pgq i b{width:6px;height:6px;border-radius:50%;background:var(--line)}
.pgq i b.on{background:var(--c1)}
.board.edit .pgq{pointer-events:none}
.wg .wb>.pgq{top:auto;bottom:0;height:30px}
.wg .wb>.vzw[style]{bottom:auto}

/* ---- quadro indisponível por MCP desatualizado ---- */
.na.mcp{flex-direction:column;gap:6px;font-size:14px;border:1px dashed var(--line);border-radius:12px}
.na.mcp b{color:var(--warn);font-size:15px}
.mlist .mi.nd{opacity:.6}
.mlist .mi.nd small{color:var(--warn)}

/* ---- compartilhar e visitante ---- */
.share-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:24px;align-items:start}
@media (max-width:900px){.share-grid{grid-template-columns:1fr}}
.share-form{display:flex;flex-direction:column;gap:14px}
.share-form .aviso,.conn .aviso{border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:12px;padding:12px 14px;font-size:13px}
.share-form .aviso ul{margin:6px 0 0 18px;display:flex;flex-direction:column;gap:4px}
.card.lk{margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.lk-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lk .st{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent)}
.lk p{font-size:13px;margin:0}
.lk-url{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lk-url .inp{flex:1;min-width:220px;font-size:13px}
.visitante #tvSair,.visitante .tvbar{display:none!important}
.vis-erro{max-width:520px;margin:15vh auto;text-align:center;display:flex;flex-direction:column;gap:10px}

/* ---- editor: adicionar quadro ---- */
.board.edit .gridbg i.alvo{border:3px solid var(--c1);background:color-mix(in srgb,var(--c1) 22%,transparent);animation:pulse 1.4s infinite}
.side details.cfg{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.side details.cfg summary{cursor:pointer;font-weight:800;font-size:14px}
.side .cfg-in{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.add-bar{position:sticky;bottom:-16px;background:var(--panel);padding:10px 0 4px;display:flex;flex-direction:column;gap:8px}
.aviso-ed{border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:12px;padding:10px 12px;font-size:13px}

/* ---- menu Compartilhados ---- */
.lk-filtros{flex-wrap:wrap;gap:8px;margin:6px 0 18px;align-items:center}
.lk-grupo{margin-bottom:22px}
.lk-gt{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.lk-gt h3{font-size:18px;font-weight:800}
.lk-gt .btn{margin-left:auto}

/* ---- senha do link ---- */
.lk .st.s2{color:var(--c2l)}
.lk-senha{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:4px}
.lk-senha.hidden{display:none}
.lk-senha .inp{max-width:260px}
.vis-senha{gap:14px}
.vis-senha .vs-logo{max-height:56px;margin:0 auto;object-fit:contain}
html.light .vis-senha .vs-logo{content:url(logo.png)}

.vis-senha .vs-erro{color:var(--bad);font-weight:700}
.spin.mini{display:inline-block;width:16px;height:16px;border-width:2px;margin:0 6px 0 0;vertical-align:-3px}

/* ---- componentes e comunidade ---- */
.cp-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1.35fr);gap:20px;align-items:start}
@media (max-width:1100px){.cp-grid{grid-template-columns:1fr}}
.cp-esq{display:flex;flex-direction:column;gap:16px;min-width:0}
.cp-esq .card{display:flex;flex-direction:column;gap:12px}
.cp-dir{position:sticky;top:76px;min-width:0}
textarea.codigo,pre.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;white-space:pre;tab-size:2}
textarea.codigo{min-height:440px;resize:vertical}
pre.codigo{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;max-height:360px;overflow:auto;margin-top:8px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.4}
.chk input{margin-top:2px;flex:none}
.cp-info{margin-top:12px;font-size:14px}
.cp-info h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cp-info ul{margin:6px 0 6px 18px}
.card.cp{display:flex;flex-direction:column;gap:8px}
.card.cp .acts{margin-top:auto}
.lk .st.mut{color:var(--muted)}
.passos-pub{margin:8px 0 8px 18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.rev details summary{cursor:pointer;font-weight:700;font-size:13px}
.cx-proprio,.cx-proprio>svg{width:100%;height:100%}
/* histórico de versões e itens excluídos */
table.tb{width:100%;border-collapse:collapse;font-size:14px}
table.tb th{text-align:left;color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:8px;border-bottom:1px solid var(--line)}
table.tb td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.tb td.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:640px){table.tb th:nth-child(3),table.tb td:nth-child(3){display:none}}
.us-dashs{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px}
.share-grid.lista-larga{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}
.share-grid.lista-larga .card{overflow-x:auto}
@media (max-width:900px){.share-grid.lista-larga{grid-template-columns:1fr}}
.deps{font-size:13px;margin:6px 0}.deps ul{margin:4px 0 0;padding-left:18px}.deps li{margin:3px 0}

/* menu recolhido com as ferramentas da HR Tech */
.menu-ht{position:relative}
.menu-ht summary{list-style:none}
.menu-ht summary::-webkit-details-marker{display:none}
.menu-ht .menu-in{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.menu-ht .menu-in a{padding:9px 12px;border-radius:8px;color:var(--txt);text-decoration:none;font-size:14px;font-weight:600}
.menu-ht .menu-in a:hover{background:var(--bg2)}
details.cp-json summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
details.cp-json[open] summary{margin-bottom:10px}
/* seção recolhível (modelos) */
details.sec-d>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details.sec-d>summary::-webkit-details-marker{display:none}
details.sec-d>summary::before{content:'▸';display:inline-block;transition:transform .15s;font-size:13px}
details.sec-d[open]>summary::before{transform:rotate(90deg)}
.sub-t{margin:22px 0 10px;font-size:14px}
.tag.pop{background:var(--c1);color:var(--c1t)}