:root{
  --bg:#fbf6f0; --bg2:#f5ede4; --surface:#ffffff; --surface2:#fffaf4;
  --ink:#241d18; --muted:#9c8f83; --hair:#efe5da;
  --orange:#ff7a18; --orange2:#ff9d4d; --orange-soft:#fff1e3;
  --cyan:#06b6d4; --cyan-soft:#e2fbff;
  --green:#1fb46a; --red:#ef5b5b; --gold:#ffbd80;
  --shadow:0 10px 30px rgba(60,40,20,.08); --shadow-sm:0 4px 14px rgba(60,40,20,.06); --r:18px;
}
[data-theme="dark"]{
  --bg:#15110d; --bg2:#1d1712; --surface:#211a14; --surface2:#261e17;
  --ink:#f3ece4; --muted:#a89a8c; --hair:#352a20; --orange-soft:#3a2413; --cyan-soft:#0c2b31;
  --shadow:0 12px 34px rgba(0,0,0,.4); --shadow-sm:0 4px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box} html,body{margin:0}
body{background:radial-gradient(1200px 500px at 90% -10%,color-mix(in srgb,var(--orange) 10%,transparent) 0%,transparent 60%),radial-gradient(900px 500px at -10% 10%,color-mix(in srgb,var(--cyan) 8%,transparent) 0%,transparent 55%),var(--bg);
  color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--hair)}
.hbar{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.3px;white-space:nowrap}
.brand .logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(255,122,24,.35)}
.brand b{color:var(--orange)} .brand .dotc{color:var(--cyan)}
.hnav{display:flex;gap:4px}
.hnav a{padding:8px 15px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:.2s}
.hnav a:hover{color:var(--ink)} .hnav a.active{color:var(--ink);background:var(--surface);box-shadow:var(--shadow-sm);border-bottom:2px solid var(--cyan)}
.acct{display:flex;align-items:center;gap:10px}
.chip{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--hair);padding:7px 12px 7px 9px;border-radius:40px;box-shadow:var(--shadow-sm);cursor:pointer}
.chip .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ffb877,#ff7a18);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.chip .who{font-size:13px;font-weight:700;line-height:1.1}
.chip .st{font-size:11px;display:flex;align-items:center;gap:4px}
.chip .st i{width:7px;height:7px;border-radius:50%}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--hair);background:var(--surface);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);font-size:16px;color:var(--cyan)}
.iconbtn:hover{border-color:var(--cyan)} .iconbtn.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wrap{max-width:1180px;margin:0 auto;padding:22px 24px 70px}
.sec{margin:30px 0 14px;display:flex;align-items:center;justify-content:space-between}
.sec h2{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);font-weight:800}
.sec .line{height:1px;background:var(--hair);flex:1;margin-left:16px}
.btn{background:var(--orange);color:#fff;border:none;border-radius:10px;padding:9px 15px;font-weight:700;cursor:pointer;font-size:13px;box-shadow:0 6px 16px rgba(255,122,24,.28)}
.btn:hover{background:var(--orange2)} .btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--hair);box-shadow:none}
.btn.ghost:hover{color:var(--ink);border-color:var(--cyan)}
.btn.cyan{background:var(--cyan);box-shadow:0 6px 16px rgba(6,182,212,.28)}
.btn.red{background:transparent;color:var(--red);border:1px solid color-mix(in srgb,var(--red) 40%,transparent);box-shadow:none}
.btn.sm{padding:6px 11px;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi.click{cursor:pointer;transition:transform .2s,box-shadow .2s}
.kpi.click:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(60,40,20,.14);border-color:var(--cyan)}
.kpi .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;margin-bottom:12px}
.kpi.o .ic{background:var(--orange-soft);color:var(--orange)} .kpi.c .ic{background:var(--cyan-soft);color:var(--cyan)}
.kpi.g .ic{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.kpi.y .ic{background:color-mix(in srgb,var(--gold) 25%,transparent);color:#d99a26}
.kpi .val{font-size:29px;font-weight:800;letter-spacing:-1px;line-height:1}
.kpi .lab{color:var(--muted);font-size:13px;margin-top:6px;font-weight:600}
.kpi .hint{position:absolute;bottom:14px;right:16px;font-size:11px;font-weight:700;color:var(--cyan)}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 2px;font-size:15px;font-weight:800;letter-spacing:-.2px}
.card .subt{color:var(--muted);font-size:12px;margin-bottom:12px}
.lowrow{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.lowcard{min-width:210px;background:var(--surface);border:1px solid var(--hair);border-left:4px solid var(--red);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm);display:flex;gap:12px;align-items:center;cursor:pointer}
.lowcard .sw{width:34px;height:34px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.lowcard .n{font-weight:700;font-size:13px}.lowcard .m{color:var(--red);font-size:12px;font-weight:700}
.palette{display:flex;flex-wrap:wrap;gap:10px}
.pchip{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hair);padding:6px 12px 6px 6px;border-radius:30px;box-shadow:var(--shadow-sm);font-size:12px;font-weight:600}
.pchip .d{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.matgroup{margin-bottom:26px}
.mathead{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.matbadge{font-size:12px;font-weight:800;letter-spacing:.5px;color:#fff;padding:5px 12px;border-radius:30px}
.matcount{color:var(--muted);font-size:12px;font-weight:600}
.spools{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
.spool{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:16px 14px 14px;box-shadow:var(--shadow);text-align:center;position:relative;transition:transform .25s,box-shadow .25s;cursor:pointer}
.spool:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,40,20,.16)}
.spool.active{border-color:var(--orange)}
.spool .nm{font-weight:800;font-size:14px;letter-spacing:-.2px}
.spool .br{font-size:11px;color:var(--muted);margin-top:1px;margin-bottom:8px}
.spool svg{display:block;margin:0 auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.10))}
.spoolart{position:relative;display:inline-block}
.spoolart .sheen{position:absolute;inset:8px;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen}
.spool:hover .spoolart[data-finish="Silk"] .sheen,
.spool:hover .spoolart[data-finish="Brilhante"] .sheen{opacity:1;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%);background-size:260% 100%;animation:sweep .9s ease}
.spool:hover .spoolart[data-finish="Fibra de Carbono"] .sheen{opacity:1;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);background-size:260% 100%;animation:sweep 1.1s ease}
.spool:hover .spoolart[data-finish="Translúcido"]{filter:drop-shadow(0 0 12px rgba(140,200,255,.55))}
.spool:hover .spoolart[data-finish="Matte"] .sheen{opacity:1;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.14),transparent 55%)}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}
.spool .g{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:12px}
.spool .g b{font-size:18px;font-weight:800}.spool .g span{font-size:12px;color:var(--muted)}
.bar{height:8px;border-radius:6px;background:var(--bg2);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;border-radius:6px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.spool .tag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;color:var(--cyan);background:var(--cyan-soft);padding:2px 7px;border-radius:20px}
.spool .grp{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;color:var(--muted);background:var(--bg2);padding:2px 7px;border-radius:20px}
.gwarn{background:color-mix(in srgb,var(--gold) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--hair));border-left:4px solid var(--orange);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-sm);display:flex;gap:12px;align-items:center;margin-top:8px}
.gwarn .gi{font-size:20px}
/* estado da maquina */
.machine{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);margin-top:8px}
.machine .mst{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex:none}
.machine .mnm{font-weight:800;font-size:16px}
.machine .msub2{color:var(--muted);font-size:13px;margin-top:2px}
.mdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.mstatus{font-weight:800}
/* pilha de rolos iguais */
.stack{position:relative;width:120px;height:124px;margin:4px auto 0}
.stack .layer{position:absolute;top:2px;left:0;right:0;display:flex;justify-content:center;animation:layerin .5s both}
@keyframes layerin{from{opacity:0;transform:translateY(12px) scale(.9)}}
.minis{display:flex;gap:7px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.mini{cursor:pointer;text-align:center}
.mini .sq{width:26px;height:32px;border-radius:6px;background:var(--bg2);border:1px solid var(--hair);position:relative;overflow:hidden;margin:0 auto;transition:transform .15s}
.mini:hover .sq{transform:translateY(-2px)}
.mini .fill{position:absolute;left:0;right:0;bottom:0;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.mini .n{font-size:10px;font-weight:800;color:var(--muted);margin-top:3px}
.mini.uso .sq{outline:2px solid var(--orange);border-color:var(--orange)} .mini.uso .n{color:var(--orange)}
.mini.addm .sq{border-style:dashed;display:grid;place-items:center;font-size:16px;color:var(--muted)} .mini.addm:hover .sq{border-color:var(--cyan);color:var(--cyan)}
.spool .badge{position:absolute;top:11px;right:11px;font-size:9px;font-weight:800;color:#fff;background:var(--orange);padding:2px 7px;border-radius:20px;z-index:2}
.spool .cnt{position:absolute;top:11px;right:11px;font-size:11px;font-weight:800;color:var(--ink);background:var(--surface2);border:1px solid var(--hair);padding:2px 9px;border-radius:20px;z-index:2}
.spool .warn{position:absolute;bottom:70px;right:12px;font-size:15px;animation:pulse 1.4s infinite;z-index:2}
/* etiquetas de acabamento (design por tipo) */
.etqbar{margin-top:9px;text-align:center}
.etq{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.7px;padding:3px 11px;border-radius:6px;text-transform:uppercase;line-height:1;transition:transform .2s}
.spool:hover .etq{animation:etqpulse 1s ease}
.spool:hover .etq-silk{animation:silkshine 1s linear}
@keyframes etqpulse{0%,100%{transform:scale(1);box-shadow:none}45%{transform:scale(1.14);box-shadow:0 4px 12px rgba(0,0,0,.2)}}
@keyframes silkshine{from{background-position:0 0}to{background-position:200% 0}}
.etq-basic{background:var(--bg2);color:var(--muted)}
.etq-matte{background:#e7e3dd;color:#6b6259;box-shadow:inset 0 0 0 1px #00000012}
:root:not([data-theme="light"]) .etq-matte,[data-theme="dark"] .etq-matte{background:#2b2620;color:#b7ab9c}
.etq-silk{background:linear-gradient(90deg,#ffd86b,#ff9d4d,#ff7ab0,#8b7bff,#ffd86b);background-size:200% 100%;color:#3a2600;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.etq-bri{background:linear-gradient(90deg,#eaf6ff,#bfe4ff);color:#0b6ea8;box-shadow:inset 0 0 0 1px #fff}
.etq-trans{background:rgba(255,255,255,.4);color:var(--ink);border:1px dashed var(--muted)}
.etq-cf{color:#dcdcdc;background-image:repeating-linear-gradient(45deg,#232323 0 3px,#161616 3px 6px);font-family:ui-monospace,Consolas,monospace}
/* hover: leve zoom + reflexo; apos 2s -> giro 3D (CSS puro: a face E o proprio svg) */
.spoolart{transition:transform .25s;perspective:1000px}
.spool:hover .spoolart{transform:scale(1.04)}
.s3d{position:absolute;transform-style:preserve-3d;transform-origin:50% 50%}
.s3d>svg{position:absolute;left:0;top:0;margin:0;backface-visibility:hidden}
.s3d-rim{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(90deg)}
.s3d-rim i{position:absolute;left:0;top:0;display:block}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.filterrow{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.fbtn{padding:6px 13px;border-radius:20px;border:1px solid var(--hair);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.fbtn.active{background:var(--orange);color:#fff;border-color:var(--orange)}
.tlrow{display:flex;gap:14px;align-items:center;padding:11px 6px;border-bottom:1px solid var(--hair)}
.tlrow:last-child{border:none}
.thumb{width:46px;height:46px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:20px;color:#fff;box-shadow:var(--shadow-sm)}
.tlname{font-weight:700;font-size:14px}.tlmeta{color:var(--muted);font-size:12px}
.tlg{margin-left:auto;font-weight:800}
.pill{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:700}
.pill.ok{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.pill.fail{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.repbar{display:flex;align-items:center;gap:12px;margin:10px 0}
.repbar .lb{width:90px;font-size:13px;font-weight:700}
.repbar .track{flex:1;height:14px;border-radius:8px;background:var(--bg2);overflow:hidden}
.repbar .track i{display:block;height:100%;width:0;border-radius:8px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.repbar .vv{width:80px;text-align:right;font-weight:800;font-size:13px}
/* ---- historico ---- */
.histsum{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}
.hsbox{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:14px;text-align:center;box-shadow:var(--shadow-sm)}
.hsv{font-size:20px;font-weight:800;letter-spacing:-.5px}
.hsl{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.histdia{display:flex;justify-content:space-between;align-items:center;padding:14px 6px 8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.histdiag{font-weight:600;text-transform:none;letter-spacing:0}
.histrow{cursor:pointer;border-radius:10px;transition:background .15s}
.histrow:hover{background:var(--surface2)}
.histthumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg2);box-shadow:var(--shadow-sm)}
.histrow.selmode{cursor:pointer}
.histrow.selmode:hover{outline:1px dashed color-mix(in srgb,var(--cyan) 55%,transparent)}
.histrow.sel{background:color-mix(in srgb,var(--cyan) 12%,transparent);outline:2px solid var(--cyan)}
.histrow.sel::after{content:'✓';position:absolute;right:10px;top:8px;color:var(--cyan);font-weight:800;font-size:13px}
.histrow{position:relative}
.tlrs{font-weight:700;color:var(--muted);min-width:74px;text-align:right;font-size:13px}
/* ---- orcamento ---- */
.minilink{color:var(--cyan);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:700}
.minilink:hover{text-decoration:underline}
.hint2{color:var(--muted);font-size:12px;margin-top:8px}
.orcrow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hair)}
.orcrow span:first-child{color:var(--muted)}
.orcbig{margin-top:14px;padding:16px;border-radius:14px;background:var(--orange-soft);text-align:center}
.orcbigl{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.orcbigv{font-size:34px;font-weight:800;color:var(--orange);letter-spacing:-1.5px}
.orcbigs{font-size:12px;color:var(--green);font-weight:700}
.orcwarn{margin-top:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font-size:12px;font-weight:700}
.orcmini{margin-top:10px;text-align:center;color:var(--muted);font-size:12px}
.itemhead,.itemrow{display:grid;grid-template-columns:1fr 76px 70px 84px 58px 34px;gap:8px;align-items:center}
.itemhead{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;padding:0 2px 6px}
.itemhead span:not(:first-child){text-align:center}
.itemrow{margin-bottom:8px}
.itemrow input{padding:8px}
.itemrow input[type=number]{text-align:center}
.itemthumb{width:32px;height:32px;border-radius:7px;object-fit:cover;flex:none;background:var(--bg2)}
.pickrow{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--hair);cursor:pointer}
.pickrow:hover{background:var(--surface2)}
/* selecao no historico */
.hchk{width:auto;flex:none;margin-right:2px}
.histtools{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 8px}
.hselbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(24px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.35);font-size:14px;z-index:40;transition:.25s}
.hselbar.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
/* itens do orcamento */
.itemcard{background:var(--surface2);border:1px solid var(--hair);border-radius:14px;padding:12px;margin-bottom:10px}
.itemtop{display:flex;align-items:center;gap:8px}
.itemtop .itnome{flex:1;min-width:0;font-weight:700}
.itnum{display:flex;align-items:center;gap:4px}
.itnum input{width:62px;text-align:center;padding:8px}
.itnum span{font-size:11px;color:var(--muted);font-weight:700}
.itemfils{margin-top:10px;padding-top:10px;border-top:1px dashed var(--hair);position:relative}
.filrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.filnome{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filrow input{width:74px;text-align:center;padding:7px}
.filu{font-size:11px;color:var(--muted);font-weight:700}
.filrs{width:78px;text-align:right;font-weight:700;font-size:13px}
.itemtot{position:absolute;right:2px;bottom:6px;font-size:12px;font-weight:800;color:var(--muted)}
/* ---- catalogo ---- */
.modelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:16px}
.modelcard{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,box-shadow .2s}
.modelcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,40,20,.16)}
.modelfoto{width:100%;aspect-ratio:1;background:var(--bg2);display:grid;place-items:center;font-size:40px;overflow:hidden;border-radius:12px}
.modelfoto img{width:100%;height:100%;object-fit:cover;display:block}
.modelbody{padding:12px 14px 14px}
.modelnome{font-weight:800;font-size:14px;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modelcat{font-size:11px;color:var(--muted);margin-top:2px}
.modelstats{display:flex;gap:10px;margin-top:8px;font-size:12px;color:var(--muted);font-weight:600}
.modelprice{margin-top:6px;font-size:12px}
.arqrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--hair)}
.arqtipo{font-size:9px;font-weight:800;background:var(--bg2);color:var(--muted);padding:3px 7px;border-radius:5px;min-width:44px;text-align:center}
.arqnome{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arqtam{font-size:11px;color:var(--muted);white-space:nowrap}
.qst{width:auto;padding:5px 8px;font-size:12px}
@media(max-width:900px){.itemhead,.itemrow{grid-template-columns:1fr 60px 56px 68px 46px 30px}}
@media(max-width:900px){.histsum{grid-template-columns:repeat(2,1fr)}}
/* pendentes */
.pendwrap{border:1px solid color-mix(in srgb,var(--gold) 45%,var(--hair));background:color-mix(in srgb,var(--gold) 8%,var(--surface));border-radius:var(--r);padding:6px 18px 14px;box-shadow:var(--shadow)}
.pendrow{padding:14px 0;border-bottom:1px solid var(--hair)}
.pendthumb{width:96px;height:96px;border-radius:12px;object-fit:cover;flex:none;background:var(--bg2);box-shadow:var(--shadow-sm);cursor:zoom-in;transition:transform .2s}
.pendthumb:hover{transform:scale(1.06)}
.pickbtn{width:100%;display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--hair);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--ink);font-size:14px;font-family:inherit;text-align:left}
.pickbtn:hover{border-color:var(--cyan)}
.pickdot{width:26px;height:26px;border-radius:7px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)} .pendrow:last-child{border:none}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.f{flex:1;min-width:120px} .f.narrow{max-width:120px} .f.tiny{max-width:92px}
/* modal */
.overlay{position:fixed;inset:0;background:rgba(20,12,4,.5);backdrop-filter:blur(3px);z-index:50;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.on{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--hair);border-radius:22px;width:640px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:pop .28s cubic-bezier(.2,.9,.3,1.3)}
.modal.wide{width:820px}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.mhead{display:flex;gap:18px;align-items:center;padding:22px;border-bottom:1px solid var(--hair);position:relative}
.mhead .x{position:absolute;top:16px;right:18px;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.mtitle{font-size:20px;font-weight:800;letter-spacing:-.3px} .msub{color:var(--muted);font-size:13px;margin-top:2px}
.mbody{padding:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.info{background:var(--surface2);border:1px solid var(--hair);border-radius:12px;padding:11px 13px}
.info .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.info .v{font-weight:700;margin-top:3px;font-size:14px}
label{display:block;font-size:11px;color:var(--muted);margin:0 0 4px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--hair);color:var(--ink);border-radius:10px;padding:10px;font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
.mh3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800;margin:20px 0 10px}
.usebar{display:flex;gap:10px;align-items:center;margin:6px 0 2px}
.dlgfoot{display:flex;justify-content:space-between;gap:8px;padding:16px 22px;border-top:1px solid var(--hair);position:sticky;bottom:0;background:var(--surface)}
.calwrap{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.calnav{display:flex;align-items:center;gap:10px}
.calnav button{border:1px solid var(--hair);background:var(--surface);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--ink);font-size:15px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.caldow{font-size:11px;color:var(--muted);text-align:center;font-weight:800;text-transform:uppercase;padding-bottom:2px}
.calcell{aspect-ratio:1;border-radius:10px;border:1px solid var(--hair);padding:6px;position:relative;font-size:12px;font-weight:800;background:var(--surface2)}
.calcell.empty{border:none;background:transparent}
.calcell.has{cursor:pointer;transition:transform .12s}
.calcell.has:hover,.calcell.sel{transform:scale(1.06);outline:2px solid var(--orange);z-index:1}
.calcell .dg{position:absolute;bottom:4px;right:6px;font-size:9px;font-weight:800;opacity:.85}
.daypanel{background:var(--surface2);border:1px solid var(--hair);border-radius:14px;padding:16px;min-height:260px}
.daypanel .dt{font-weight:800;font-size:16px} .daypanel .tot{color:var(--muted);font-size:13px;margin-bottom:12px}
.dayp-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair)} .dayp-row:last-child{border:none}
.dayp-row .dot{width:22px;height:22px;border-radius:6px;flex:none}
.calhint{color:var(--muted);font-size:13px;text-align:center;margin-top:60px}
.emptymsg{color:var(--muted);text-align:center;padding:24px}
.msg{font-size:12px;margin-top:10px;min-height:16px}
/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:.3s;z-index:90;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.rise{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
[hidden]{display:none!important}

/* ===================== CARTOES DE CONTA ===================== */
.ctcard{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--hair);
  border-radius:14px;padding:14px}
.ctcard.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--hair))}
.ctico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:var(--bg2);flex:none}
.ctnome{font-weight:800;font-size:14px}
.ctsub{color:var(--muted);font-size:12px;margin-top:2px}

/* ===================== NAVEGACAO DO CELULAR ===================== */
.mnav{display:none}
@media(max-width:820px){
  .mnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--hair);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:10px;
    font-weight:700;color:var(--muted);text-decoration:none;border-radius:10px}
  .mnav a span{font-size:19px;line-height:1}
  .mnav a.active{color:var(--orange);background:var(--orange-soft)}
}

/* ===================== CELULAR ===================== */
@media(max-width:820px){
  .hnav{display:none}
  .wrap{padding:14px 12px 92px}                 /* espaco para a barra de baixo */
  .hbar{padding:10px 12px;gap:8px}
  .brand{font-size:16px}.brand .logo{width:30px;height:30px;font-size:16px}
  .chip .who{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .iconbtn{width:34px;height:34px}

  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:14px}.kpi .val{font-size:22px}.kpi .ic{width:34px;height:34px;font-size:16px;margin-bottom:8px}
  .kpi .hint{position:static;display:block;margin-top:6px}
  .grid2,.grid3{grid-template-columns:1fr}
  .calwrap{grid-template-columns:1fr}
  .sec{margin:20px 0 10px;flex-wrap:wrap;gap:8px}
  .sec h2{font-size:12px}

  /* modais ocupam a tela toda */
  .overlay{padding:0;align-items:flex-end}
  .modal,.modal.wide{width:100%;max-width:100%;max-height:94vh;border-radius:20px 20px 0 0}
  .mhead{padding:16px}.mbody{padding:16px}
  .dlgfoot{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .dlgfoot>div{display:flex;gap:8px;flex:1;justify-content:flex-end}

  /* listas e cards */
  .spools{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .modelgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .histsum{grid-template-columns:repeat(2,1fr);gap:8px}
  .hsv{font-size:17px}
  .tlrow{flex-wrap:wrap;gap:8px;padding:12px 4px}
  .tlrow .tlg,.tlrow .tlrs{margin-left:0}
  .tlrs{min-width:auto}
  .histthumb{width:46px;height:46px}
  .pendthumb{width:70px;height:70px}
  .row{gap:8px}
  .f,.f.narrow,.f.tiny{min-width:0;max-width:none;flex:1 1 46%}
  .btn{padding:10px 14px}
  .itemhead{display:none}
  .itemrow{grid-template-columns:1fr 1fr;gap:6px}
  .filrow{flex-wrap:wrap}
  .filnome{flex:1 1 100%}
  .arqrow{flex-wrap:wrap}
  .arqnome{flex:1 1 100%}
  .hselbar{left:12px;right:12px;bottom:80px;transform:none;flex-wrap:wrap;justify-content:center}
  .hselbar.on{transform:none}
  .machine{flex-wrap:wrap}
  .lowcard{min-width:170px}
  .cal{gap:3px}.calcell{padding:3px;font-size:11px}
  .calcell .dg{font-size:8px}
}

/* telas bem pequenas */
@media(max-width:400px){
  .kpis{grid-template-columns:1fr}
  .spools,.modelgrid{grid-template-columns:repeat(2,1fr)}
  .mnav a{font-size:9px}
}

/* passos do "como instalar" */
.passos{margin:0;padding-left:20px;font-size:14px;line-height:1.75;color:var(--text)}
.passos li{margin-bottom:6px}
.passos b{color:var(--orange)}