:root{
  --bg:#0d0c1d; --bg2:#131230; --panel:#1a1838; --panel2:#232048; --line:#2f2b5c; --line2:#403a78;
  --text:#eeedff; --muted:#948fc4; --accent:#6c5cff; --accent2:#22e0d0; --pink:#ff4fd8;
  --good:#35e08a; --warn:#ffc53d; --bad:#ff5468;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(1200px 600px at 70% -10%,#241d5c 0,transparent 60%),var(--bg);color:var(--text);font:14px/1.5 Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
h3{font:600 15px Inter;margin:0 0 10px;display:flex;gap:8px;align-items:center}
h3::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(var(--accent),var(--pink))}
h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:12px}
.good{color:var(--good)} .warnc{color:var(--warn)} .badc{color:var(--bad)}
button{font:inherit;color:inherit}
input,select,textarea{background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}

/* layout */
.app{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 60px)}
.side{background:rgba(19,18,48,.85);border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{padding:16px 22px 40px;min-width:0}
.brand{display:flex;gap:10px;align-items:center}.brand b{display:block;font-size:14px}.brand small{color:var(--muted);font-size:11px}
.logo{font:11px "Press Start 2P",monospace;background:linear-gradient(135deg,var(--pink),var(--accent2));color:#0d0c1d;padding:9px 7px;border-radius:8px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px}
.side .panel{margin:0}
.accForm{display:flex;gap:6px}.accForm input{flex:1}
.sideProfile{margin-top:10px}
.pcard{display:flex;gap:10px;align-items:center}.pcard img{width:46px;height:46px;image-rendering:pixelated}
.pcard b{display:block;font-size:15px}.pcard .lg{font-size:12px;color:var(--accent2)}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-bottom:10px}
.field span{display:flex;gap:6px;align-items:center;color:var(--text)}
.field input[type=number]{width:110px}
.btn{border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer;background:var(--panel2);transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.15)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#fff}
.btn.teal{background:var(--accent2);color:#0a1a1a}
.btn.ghost{background:transparent;border:1px solid var(--line2)}
.btn.bad{background:rgba(255,84,104,.15);color:var(--bad);border:1px solid rgba(255,84,104,.4)}
.btn.sm{padding:5px 10px;font-size:12px}.btn.icon{padding:8px 11px}
.btn:disabled{opacity:.5;cursor:wait}
.tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px;margin-bottom:16px}
.tabs button{background:none;border:0;padding:9px 14px;border-radius:8px;color:var(--muted);font-weight:600;cursor:pointer}
.tabs button.on{background:var(--accent);color:#fff}
.tab{display:none}.tab.on{display:block}
.empty{padding:40px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:var(--r);margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.rowBetween{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rowBetween h3{margin:0}
.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}.grid2>.panel{margin:0}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chips button{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--muted)}
.chips button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--panel2);color:var(--accent2);white-space:nowrap}
.tag.good{background:rgba(53,224,138,.14);color:var(--good)}.tag.bad{background:rgba(255,84,104,.14);color:var(--bad)}
.tag.warn{background:rgba(255,197,61,.14);color:var(--warn)}.tag.mute{background:var(--bg2);color:var(--muted)}
.search{width:100%;margin-bottom:10px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* medidor lateral */
.meter .big{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.bar{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden;position:relative;margin:8px 0}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.bar.warn i{background:linear-gradient(90deg,var(--warn),#ff9b3d)}.bar.bad i{background:var(--bad)}

/* resumo */
.hero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:linear-gradient(135deg,#2a1f6e,#1a1838 60%);border:1px solid var(--line2);border-radius:16px;padding:20px;margin-bottom:14px}
.hero img{width:72px;height:72px;image-rendering:pixelated}
.hero .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hero .v{font-size:38px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.hero .s{color:var(--muted);font-size:13px}
.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px}
.pill.good{background:rgba(53,224,138,.14);color:var(--good)}.pill.warn{background:rgba(255,197,61,.14);color:var(--warn)}.pill.bad{background:rgba(255,84,104,.16);color:var(--bad)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.cards3>.panel{margin:0}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}.kv:last-child{border:0}
.bigNum{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.zoom{position:relative;height:46px;margin:18px 0 6px}
.zoom .track{position:absolute;left:0;right:0;top:18px;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--bg2),rgba(108,92,255,.35) 80%,rgba(255,84,104,.35))}
.zoom .mk{position:absolute;top:0;transform:translateX(-50%);font-size:10px;white-space:nowrap;text-align:center}
.zoom .mk::after{content:"";display:block;width:2px;height:22px;margin:2px auto 0;background:currentColor}
.zoom .mk.below{top:28px}.zoom .mk.below::after{margin:0 auto 2px;order:-1}
.srcRow{display:grid;grid-template-columns:150px 1fr 110px 90px;gap:10px;align-items:center;padding:6px 0}
.srcRow .b{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}.srcRow .b i{display:block;height:100%;border-radius:99px}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* sala */
.miniStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.miniStats div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.miniStats b{display:block;font-size:20px}.miniStats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.score{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:10px;align-items:stretch;background:rgba(26,24,56,.96);backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:var(--r);padding:10px;margin-bottom:14px}
.score .box{padding:4px 10px;border-right:1px solid var(--line)}
.score .box .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.score .box .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.score.good{box-shadow:inset 0 -3px 0 var(--good)}.score.warn{box-shadow:inset 0 -3px 0 var(--warn)}.score.bad{box-shadow:inset 0 -3px 0 var(--bad);border-color:var(--bad)}
.score .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.plantaWrap{overflow-x:auto;padding-bottom:6px}
.planta{display:grid;gap:6px;min-width:820px}
.rackbox{background:#15132e;border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;position:relative}
.rackbox.chg{border:2px solid var(--good);box-shadow:0 0 16px rgba(53,224,138,.35)}
.rackbox.new{background:rgba(53,224,138,.08)}
.rh{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted);padding:0 2px 2px}
.rh b{font:9px "Press Start 2P",monospace;color:var(--accent2)}.rh span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rh em{font-style:normal;color:var(--text)}
.sh{display:flex;gap:3px;height:44px;background:linear-gradient(#1d1a3f,#1d1a3f) bottom/100% 4px no-repeat,#100f24;border-radius:6px;padding:3px}
.mb,.spot{flex:1;border:1px solid transparent;border-radius:5px;background:transparent;display:grid;place-items:center;cursor:pointer;position:relative;padding:0;min-width:0}
.mb:hover{background:rgba(108,92,255,.15)}
.mb.sel,.spot.sel{border-color:var(--accent2);background:rgba(34,224,208,.12)}
.mb.add{background:rgba(53,224,138,.16);border-color:rgba(53,224,138,.6)}
.mb.move{background:rgba(255,197,61,.14);border-color:rgba(255,197,61,.6)}
.mb.hl{outline:2px solid var(--pink);outline-offset:-2px;background:rgba(255,79,216,.14)}
.mb .x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--bad);color:#fff;font-size:10px;font-style:normal;display:none;place-items:center;line-height:1}
.mb:hover .x{display:grid}
.spot{border:1px dashed var(--line2);color:var(--muted);font-size:10px}
.spot.hl{border-color:var(--pink);color:var(--pink);background:rgba(255,79,216,.08)}
.slotbox{border:1px dashed var(--line2);border-radius:10px;min-height:120px;display:grid;place-items:center;color:var(--muted);font-size:11px;background:transparent;cursor:pointer;text-align:center}
.slotbox b{font:10px "Press Start 2P",monospace;display:block;margin-bottom:4px}
.slotbox.sel{border-color:var(--accent2);color:var(--accent2)}
.slotbox.del{border-color:var(--bad);color:var(--bad);cursor:default}
.rackdel{font-size:10px;padding:2px;border:0;border-radius:4px;background:rgba(255,84,104,.12);color:var(--bad);cursor:pointer}
.selInfo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-top:10px}
.selInfo .nm{flex:1;min-width:200px}
.stockGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px;max-height:560px;overflow-y:auto;padding-right:4px}
.sc{display:flex;gap:10px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px}
.sc .nm{flex:1;min-width:0;font-size:12px}.sc .nm b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .d{font-weight:700;font-size:12px}
.cardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.mc{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;position:relative}
.mc .img{height:56px;display:grid;place-items:center;background:#100f24;border-radius:8px}
.mc .img .spr{transform:scale(1.4)}
.mc b{font-size:14px}.mc .meta{display:flex;gap:6px;flex-wrap:wrap}
.mc .corner{position:absolute;top:8px;right:8px}
.filters,.formRow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}.filters .search{width:auto;flex:1;margin:0;min-width:180px}
.check{display:flex;gap:6px;align-items:center;font-size:13px}
textarea{width:100%;min-height:140px;resize:vertical;font-size:12px;margin-top:10px}
details summary{cursor:pointer}

/* passos */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;max-height:560px;overflow-y:auto}
.steps li{display:flex;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid var(--line);font-size:13px;counter-increment:s}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);font:9px "Press Start 2P",monospace;color:var(--muted);width:22px;flex:none}
.steps li .nm{flex:1;min-width:0}.steps li small{display:block;color:var(--muted);font-size:12px}
.alert{padding:10px 12px;border-radius:10px;margin:10px 0;border:1px solid;font-size:13px}
.alert.bad{border-color:var(--bad);background:rgba(255,84,104,.08)}.alert.good{border-color:var(--good);background:rgba(53,224,138,.08)}.alert.warn{border-color:var(--warn);background:rgba(255,197,61,.08)}

/* placa animada (folha de sprites do jogo: 6 quadros, 4 de animação) */
.spr{display:inline-block;flex:none;width:70px;height:30px;background-repeat:no-repeat;background-size:600% 100%;image-rendering:pixelated;background-position:0% 0}
/* anima só com o mouse em cima */
.spr:hover,.mb:hover .spr,.sc:hover .spr,.mc:hover .spr,.steps li:hover .spr,.selInfo:hover .spr{animation:spr .8s steps(4) infinite}
.spr.c1{width:36px}
.sh .spr{width:62px}.sh .spr.c1{width:32px}
@keyframes spr{from{background-position:0% 0}to{background-position:80% 0}}
img.gif{width:58px;height:26px;object-fit:contain;image-rendering:pixelated;flex:none}
.ph{width:58px;height:26px;display:grid;place-items:center;background:var(--panel2);border-radius:4px;font-size:10px;color:var(--muted);flex:none}
.rimg{height:34px;image-rendering:pixelated;flex:none}

.tableWrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.tbl tr:hover td{background:rgba(108,92,255,.06)}
.tbl tr.best td{background:rgba(53,224,138,.08)}.tbl tr.best td:first-child{box-shadow:inset 3px 0 0 var(--good)}
.coin{display:inline-flex;gap:8px;align-items:center;font-weight:700}.coin img{width:22px;height:22px}
.steps2 li{margin-bottom:8px}.steps2 .btn{margin:6px 6px 0 0;display:inline-block;text-decoration:none}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px;font-family:Inter}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .lim{stroke:var(--bad);stroke-dasharray:6 5;stroke-width:1.5}.chart .limT{fill:var(--bad)}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .pt{fill:var(--accent2);stroke:#0d0c1d;stroke-width:1.5}.chart .pt.over{fill:var(--bad)}
.logItem{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--bg2);font-size:13px}
.logItem .when{font-weight:700;font-size:12px}.logItem small{color:var(--muted);font-weight:400}
.foot{grid-column:1/-1;text-align:center;color:var(--muted);font-size:12px;padding:18px 16px 26px;border-top:1px solid var(--line)}
.landing{background:linear-gradient(135deg,#2a1f6e,#1a1838 60%);border:1px solid var(--line2);border-radius:16px;padding:28px;margin-bottom:14px}
.landing h1{font-size:30px;line-height:1.2;margin:0 0 10px}.landing h1 span{background:linear-gradient(90deg,var(--pink),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.landing .lead{font-size:16px;margin:0 0 18px}
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:10px;margin-bottom:14px}
.feat div{background:rgba(13,12,29,.45);border:1px solid var(--line);border-radius:12px;padding:12px}
.feat b{display:block;margin-bottom:4px}.feat span{color:var(--muted);font-size:13px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:10px 16px;border-radius:10px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.4)}

@media (max-width:1100px){.grid2,.cards3{grid-template-columns:1fr}.score{grid-template-columns:repeat(2,1fr)}.score .acts{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:820px){.app{grid-template-columns:1fr}.side{position:static;height:auto}.main{padding:12px 16px}.hero{grid-template-columns:1fr}.miniStats{grid-template-columns:repeat(2,1fr)}.srcRow{grid-template-columns:110px 1fr 90px}.srcRow .t{display:none}}