/* © 2026 bladept696 — Centro de Comando / Hash Commander. Todos os direitos reservados.
   é proibido copiar, modificar, redistribuir ou publicar este ficheiro, no todo ou em parte, sem autorização escrita do autor.
   https://github.com/bladept696/centro-de-comando-v3 */
/* ---------- Topo do Dashboard Geral em 3D (topo-3d.js): relógio/tempo e destaque da Molepool ---------- */

/* ===== Relógio e tempo ===== */
#wxPanel.t3d{--rx:0deg;--ry:0deg;--px:0;--py:0;--mx:50%;--my:50%;--sky1:#0b1f3f;--sky2:#050b1a;--sky3:#1a1446;
  overflow:hidden;isolation:isolate;padding:14px 24px;border-radius:22px;border:1px solid #8fd8ff33;
  background:radial-gradient(120% 140% at 15% 0%,var(--sky3) 0%,transparent 55%),linear-gradient(135deg,var(--sky1),var(--sky2));
  box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -30px 60px -40px #000,0 30px 60px -30px #000,0 0 0 1px #00000040;
  transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:flat;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
#wxPanel.t3d[data-sky="day"]{--sky1:#0d3a5c;--sky2:#071a2c;--sky3:#1d6f9a}
#wxPanel.t3d[data-sky="dusk"]{--sky1:#3a1d47;--sky2:#0c0b1f;--sky3:#a2453d}
#wxPanel.t3d[data-sky="dawn"]{--sky1:#2a2550;--sky2:#0a0f22;--sky3:#c27a4a}
#wxPanel.t3d.t3d-on{transition:transform .08s linear;box-shadow:inset 0 1px 0 #ffffff26,0 40px 70px -30px #000,0 0 50px -18px #4fd6ff88}
/* estrelas em paralaxe e luz que passa */
.t3d-stars{position:absolute;inset:-20px;z-index:-1;pointer-events:none;transform:translate(calc(var(--px) * -24px),calc(var(--py) * -16px));transition:transform .4s}
.t3d-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px #bfe8ff;animation:t3d-twinkle var(--d) ease-in-out infinite}
#wxPanel[data-sky="day"] .t3d-stars i{opacity:.25}
@keyframes t3d-twinkle{50%{opacity:.25;transform:scale(.6)}}
.t3d-sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(500px circle at var(--mx) var(--my),#ffffff14,transparent 50%);opacity:0;transition:opacity .4s}
#wxPanel.t3d-on .t3d-sweep{opacity:1}
/* camadas a alturas diferentes */
#wxPanel.t3d .wx-globe{transform:translateZ(60px);filter:drop-shadow(0 18px 18px #000a)}
#wxPanel.t3d .wx-clock{transform:translateZ(46px)}
#wxPanel.t3d .wx-weather{transform:translateZ(34px)}
#wxPanel.t3d .wx-gear{transform:translateZ(20px)}
/* globo: halo da atmosfera, anel em órbita com satélite e anel dos segundos */
#wxPanel.t3d .wx-globe::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;box-shadow:0 0 24px 4px #4fd6ff55,inset 0 0 18px #4fd6ff44}
.t3d-orbit{position:absolute;inset:-14px;border-radius:50%;border:1px solid #9fdcff55;transform:rotateX(72deg) rotateZ(0);animation:t3d-orbit 9s linear infinite;pointer-events:none}
.t3d-orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#ffd27a;box-shadow:0 0 10px 2px #ffb020}
@keyframes t3d-orbit{to{transform:rotateX(72deg) rotateZ(360deg)}}
.t3d-secring{position:absolute;inset:-12px;pointer-events:none}
.t3d-secring svg{width:100%;height:100%;transform:rotate(-90deg)}
.t3d-secring circle{fill:none;stroke-width:2.5}
.t3d-secring .bg{stroke:#ffffff10}
.t3d-secring .fg{stroke:#4fd6ff;stroke-linecap:round;filter:drop-shadow(0 0 4px #4fd6ff);transition:stroke-dasharray .95s linear}
/* relógio com mais volume (sem o balanço, que lutava com a inclinação) */
#wxPanel.t3d .wx-time{animation:none;transform:none;font-size:48px;
  text-shadow:1px 1px 0 #2b8ab4,2px 2px 0 #23759a,3px 3px 0 #1c6080,4px 4px 0 #154b66,5px 5px 0 #0f3a50,8px 12px 20px #000c,0 0 30px #4fd6ff66}
#wxPanel.t3d .wx-sec{font-size:22px;text-shadow:0 0 14px #4fd6ff}
#wxPanel.t3d .wx-temp{font-size:34px;text-shadow:1px 1px 0 #8aa6c4,2px 2px 0 #6b87a6,3px 3px 0 #4d6988,6px 9px 16px #000b}
#wxPanel.t3d #wxIcon{display:inline-block;animation:t3d-bob 4s ease-in-out infinite;filter:drop-shadow(0 6px 6px #0008)}
@keyframes t3d-bob{50%{transform:translateY(-4px) rotate(-4deg)}}
#wxPanel.t3d .wx-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#wxPanel.t3d .wx-meta > span{padding:5px 10px;border-radius:999px;background:#ffffff0d;border:1px solid #ffffff1a;box-shadow:inset 0 1px 0 #ffffff14,0 6px 14px -8px #000;backdrop-filter:blur(6px)}

/* ===== Destaque da Molepool ===== */
#gpSpotlight.t3d{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;isolation:isolate;padding:16px 24px 16px 108px;border-radius:22px;border:1px solid transparent;
  background:radial-gradient(120% 160% at 0% 0%,#5a3b0a 0%,transparent 55%),linear-gradient(135deg,#21180a,#0d1018 60%,#141018);
  box-shadow:inset 0 1px 0 #ffe2a330,inset 0 -24px 50px -36px #000,0 30px 60px -30px #000;
  transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:flat;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;overflow:visible}
#gpSpotlight.t3d:has(.gp-spot-setup){padding-left:24px}
#gpSpotlight.t3d.t3d-on{transition:transform .08s linear;box-shadow:inset 0 1px 0 #ffe2a340,0 40px 70px -30px #000,0 0 50px -16px #ffb02099}
#gpSpotlight.t3d::before{background:radial-gradient(420px circle at var(--mx) var(--my),#ffcf7a26,transparent 55%);border-radius:22px}
/* contorno dourado a rodar */
.t3d-edge{position:absolute;inset:-1px;border-radius:22px;padding:1.5px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--t3da,0deg),#ffb02033,#ffd27a 20%,#ffb02033 40%,#7a4a0055 60%,#ffd27a 80%,#ffb02033);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:t3d-edge 6s linear infinite}
@property --t3da{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes t3d-edge{to{--t3da:360deg}}
/* moeda 3D a rodar */
.t3d-coin{position:absolute;left:24px;top:50%;width:62px;height:62px;margin-top:-31px;transform-style:preserve-3d;animation:t3d-spin 5s linear infinite;z-index:2}
.t3d-coin > div{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 28px/1 'Space Grotesk',sans-serif;color:#fff4d6;backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#ffe08a,#f7a21a 50%,#9a5600);box-shadow:inset 0 0 0 4px #ffcf6a,inset 0 0 14px #6a3500;text-shadow:0 2px 0 #7a4200}
.t3d-coin .f{transform:translateZ(3px)}
.t3d-coin .b{transform:rotateY(180deg) translateZ(3px)}
.t3d-coin .e{transform:translateZ(var(--z));background:linear-gradient(90deg,#8a4b00,#ffcf6a 50%,#8a4b00);box-shadow:none;backface-visibility:visible}
/* os dois painéis ficam planos (o Chrome deixava de os desenhar por instantes com profundidade em camadas); a moeda tem a sua própria perspetiva */
@keyframes t3d-spin{from{transform:perspective(320px) rotateY(0)}to{transform:perspective(320px) rotateY(360deg)}}
#gpSpotlight.t3d::after{content:"";position:absolute;left:28px;top:calc(50% + 38px);width:54px;height:10px;border-radius:50%;background:radial-gradient(closest-side,#ffb02088,transparent);pointer-events:none}
/* blocos de valores em relevo */
#gpSpotlight.t3d .gp-spot-item{transform:translateZ(36px);border-right-color:#ffcf7a26}
#gpSpotlight.t3d .gp-spot-item .lbl{color:#c9a96a;letter-spacing:.12em}
#gpSpotlight.t3d .gp-spot-item .val{font-size:24px;background:linear-gradient(180deg,#fff2c8,#ffc04d 60%,#d98a10);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #6a3d00) drop-shadow(0 6px 10px #000a)}
#gpSpotlight.t3d .gp-spot-item .val.addr{font-size:13px;background:none;color:#f3e6c8;filter:none}
/* barra de progresso em tubo */
#gpSpotlight.t3d .gp-spot-bar{transform:translateZ(46px)}
#gpSpotlight.t3d .gp-spot-track{height:16px;border-radius:10px;overflow:visible;position:relative;
  background:linear-gradient(180deg,#05070c,#1a1f2b 60%,#0b0e15);box-shadow:inset 0 2px 4px #000c,inset 0 -1px 0 #ffffff12,0 1px 0 #ffffff10}
#gpSpotlight.t3d .gp-spot-fill{position:relative;border-radius:10px;
  background:linear-gradient(180deg,#ffffff55 0%,transparent 40%,#0003 100%),repeating-linear-gradient(115deg,#ffffff1c 0 10px,transparent 10px 20px),linear-gradient(90deg,#3fc9ff,#7fe0c0 45%,#ffc04d 80%,#ff9a1a);
  background-size:auto,40px 100%,auto;animation:t3d-stripes 1.6s linear infinite;box-shadow:0 0 18px #ffb02077}
@keyframes t3d-stripes{to{background-position:0 0,40px 0,0 0}}
.t3d-head{position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff6d8;box-shadow:0 0 14px 5px #ffb020,0 0 30px 8px #ffb02066;animation:t3d-pulse 1.4s ease-in-out infinite}
@keyframes t3d-pulse{50%{transform:scale(1.3)}}
#gpSpotlight.t3d .gp-spot-pct{font:700 15px 'Space Grotesk',sans-serif;color:#ffd27a;margin-top:7px;text-shadow:0 0 12px #ffb02088}

@media (max-width:700px){#gpSpotlight.t3d{padding-left:24px}.t3d-coin,#gpSpotlight.t3d::after{display:none}}
@media (prefers-reduced-motion:reduce){.t3d-stars i,.t3d-orbit,.t3d-coin,.t3d-edge,#gpSpotlight.t3d .gp-spot-fill,.t3d-head,#wxPanel.t3d #wxIcon{animation:none}}
body.perf-mode .t3d-stars,body.perf-mode .t3d-orbit{display:none}

/* ===== Indicadores do lado em 3D ===== */
.gauge.g3d{--gc:#21ffb0;--rx:0deg;--ry:0deg;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px 14px 14px;border-radius:16px;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--gc) 28%,transparent);
  background:radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--gc) 16%,transparent),transparent 55%),linear-gradient(160deg,#0f1c2b,#080f18);
  box-shadow:inset 0 1px 0 #ffffff14,0 16px 30px -18px #000;
  transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.gauge.g3d[data-hot="1"]{--gc:#ff5d6c}
.gauge.g3d::before{display:none}
.gauge.g3d.g3d-on{transition:transform .08s linear,box-shadow .3s;border-color:color-mix(in srgb,var(--gc) 60%,transparent);
  box-shadow:inset 0 1px 0 #ffffff1f,0 22px 40px -20px #000,0 0 28px -10px var(--gc)}
.gauge.g3d:hover{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry))}
/* ícone em relevo */
.g3d-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;transform:translateZ(26px);
  background:linear-gradient(145deg,color-mix(in srgb,var(--gc) 45%,#0b1220),color-mix(in srgb,var(--gc) 12%,#05080e));
  box-shadow:inset 0 1px 0 #ffffff33,inset 0 -3px 6px #0006,0 8px 16px -6px color-mix(in srgb,var(--gc) 70%,transparent)}
.gauge.g3d .gauge-left{transform:translateZ(14px)}
.gauge.g3d .label{color:color-mix(in srgb,var(--gc) 55%,#cfe3ee);letter-spacing:.14em}
/* número com volume */
.gauge.g3d .gauge-right{transform:translateZ(30px)}
.gauge.g3d .value{font-size:28px;letter-spacing:-.01em;
  text-shadow:1px 1px 0 color-mix(in srgb,currentColor 55%,#000),2px 2px 0 color-mix(in srgb,currentColor 40%,#000),3px 3px 0 color-mix(in srgb,currentColor 28%,#000),5px 7px 12px #000c,0 0 18px color-mix(in srgb,currentColor 45%,transparent)}
/* barra com o valor em relação ao máximo */
.g3d-meter{position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:2px;background:#ffffff10;overflow:hidden}
.g3d-meter i{display:block;height:100%;width:2%;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 40%,transparent),var(--gc));box-shadow:0 0 8px var(--gc);transition:width 1s ease}
/* brilho que passa de vez em quando */
.gauge.g3d::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;z-index:-1;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,#ffffff0f,transparent);animation:g3d-shine 7s ease-in-out infinite}
.gauge.g3d:nth-child(2)::after{animation-delay:1s}.gauge.g3d:nth-child(3)::after{animation-delay:2s}.gauge.g3d:nth-child(4)::after{animation-delay:3s}
.gauge.g3d:nth-child(5)::after{animation-delay:4s}.gauge.g3d:nth-child(6)::after{animation-delay:5s}
@keyframes g3d-shine{0%,75%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.gauge.g3d::after{animation:none;display:none}}

/* ===== Painel "Máquinas": campos em baixo-relevo, teclas 3D e consola de ações rápidas ===== */
.panel[data-layout-id="main-machines"]{border-radius:20px;border:1px solid #4fd6ff2e;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#123a4a55,transparent 55%),linear-gradient(160deg,#0d1a28,#070e17);
  box-shadow:inset 0 1px 0 #ffffff17,0 26px 50px -30px #000}
.panel[data-layout-id="main-machines"] .panel-title{display:flex;align-items:center;justify-content:flex-start !important;gap:10px;font-size:12px;letter-spacing:.18em;color:#bfe9ff}
.panel[data-layout-id="main-machines"] .panel-title::before{content:"🖥️";display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-size:15px;letter-spacing:0;
  background:linear-gradient(145deg,#1f5a72,#0b2230);box-shadow:inset 0 1px 0 #ffffff30,0 6px 12px -6px #4fd6ff}
/* campos */
.panel[data-layout-id="main-machines"] .config{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.panel[data-layout-id="main-machines"] .config input{height:40px !important;padding:0 14px !important;border-radius:12px !important;font-size:13px;color:#e6f6ff;
  background:linear-gradient(180deg,#050a12,#0c1622) !important;border:1px solid #4fd6ff26 !important;
  box-shadow:inset 0 2px 6px #000c,inset 0 -1px 0 #ffffff0d !important;transition:border-color .2s,box-shadow .2s}
.panel[data-layout-id="main-machines"] .config input:focus{outline:none;border-color:#4fd6ff !important;box-shadow:inset 0 2px 6px #000c,0 0 0 3px #4fd6ff2e,0 0 18px -4px #4fd6ff !important}
/* teclas 3D (adicionar e localizar) */
.panel[data-layout-id="main-machines"] #addBtn,.panel[data-layout-id="main-machines"] #scanBtn{position:relative;height:40px;padding:0 18px !important;border-radius:12px !important;font-weight:700 !important;font-size:13px;
  transform:translateY(0);transition:transform .12s,box-shadow .12s,filter .2s;cursor:pointer}
.panel[data-layout-id="main-machines"] #addBtn{color:#022014 !important;border:1px solid #6dffcf !important;
  background:linear-gradient(180deg,#5dffc6,#18c98a) !important;box-shadow:0 5px 0 #0b7a52,0 10px 20px -6px #21ffb0aa,inset 0 1px 0 #ffffffaa !important}
.panel[data-layout-id="main-machines"] #scanBtn{color:#dff6ff !important;border:1px solid #4fd6ff99 !important;
  background:linear-gradient(180deg,#1c4a63,#0f2c3d) !important;box-shadow:0 5px 0 #08202d,0 10px 20px -8px #4fd6ff88,inset 0 1px 0 #ffffff33 !important}
.panel[data-layout-id="main-machines"] #addBtn:hover,.panel[data-layout-id="main-machines"] #scanBtn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.panel[data-layout-id="main-machines"] #addBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #0b7a52,0 4px 10px -6px #21ffb0aa,inset 0 1px 0 #ffffffaa !important}
.panel[data-layout-id="main-machines"] #scanBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #08202d,inset 0 1px 0 #ffffff33 !important}
/* consola de ações rápidas */
.panel[data-layout-id="main-machines"] .quick-actions-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;padding:14px 16px 16px;border-radius:16px;
  background:linear-gradient(180deg,#04080e,#0a121c);border:1px solid #ffffff12;box-shadow:inset 0 3px 10px #000d,inset 0 -1px 0 #ffffff0f}
.panel[data-layout-id="main-machines"] .quick-actions-label{font-size:10.5px;letter-spacing:.16em;color:#ffcf7a;text-shadow:0 0 10px #ffb02066;margin-right:4px}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-action-btn{--k:#9fb6c8;--kd:#2a3846;position:relative;height:34px;padding:0 14px;border-radius:10px !important;font-size:12px;font-weight:700;cursor:pointer;
  color:#eaf6ff !important;border:1px solid color-mix(in srgb,var(--k) 55%,transparent) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k) 30%,#1a2533),color-mix(in srgb,var(--k) 10%,#0b121b)) !important;
  box-shadow:0 4px 0 var(--kd),0 8px 14px -8px var(--k),inset 0 1px 0 #ffffff2a !important;transform:translateY(0);transition:transform .1s,box-shadow .1s,filter .2s}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-action-btn.green{--k:#21ffb0;--kd:#0a5a3e}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-action-btn.amber{--k:#ffb020;--kd:#6a4400}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-action-btn.red{--k:#ff5d6c;--kd:#6a1520}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-action-btn:hover{filter:brightness(1.18);transform:translateY(-1px);box-shadow:0 5px 0 var(--kd),0 10px 22px -8px var(--k),inset 0 1px 0 #ffffff33 !important}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-action-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--kd),inset 0 1px 0 #ffffff22 !important}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-edit{width:34px;padding:0;margin-left:-4px;font-size:0 !important;display:inline-flex;align-items:center;justify-content:center}
.panel[data-layout-id="main-machines"] .quick-actions-bar button.quick-edit::before{content:"✏️";font-size:14px;line-height:1;filter:drop-shadow(0 1px 1px #000a)}
/* luz de estado */
.panel[data-layout-id="main-machines"] .quick-action-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:11.5px;color:#bff5dd;
  background:#21ffb012;border:1px solid #21ffb033}
.panel[data-layout-id="main-machines"] .quick-action-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#21ffb0;box-shadow:0 0 10px #21ffb0;animation:m3d-led 2s ease-in-out infinite}
@keyframes m3d-led{50%{opacity:.35}}
.panel[data-layout-id="main-machines"] > .hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:#7f98ab}
.panel[data-layout-id="main-machines"] > .hint::before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font:700 10px 'Space Grotesk',sans-serif;color:#0a1622;background:#7f98ab}
@media (prefers-reduced-motion:reduce){.panel[data-layout-id="main-machines"] .quick-action-status::before{animation:none}}

/* ===== Cartões de resumo em 3D ===== */
#mcSummary{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px;perspective:1000px}
#mcSummary .mc-tile.s3d{--sc:#4fd6ff;--rx:0deg;--ry:0deg;position:relative;overflow:hidden;isolation:isolate;padding:12px 14px 12px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--sc) 26%,transparent);
  background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--sc) 15%,transparent),transparent 55%),linear-gradient(165deg,#0f1c2b,#070e17);
  box-shadow:inset 0 1px 0 #ffffff14,0 16px 30px -18px #000;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
#mcSummary .mc-tile.s3d.s3d-on{transition:transform .08s linear,box-shadow .3s;border-color:color-mix(in srgb,var(--sc) 60%,transparent);box-shadow:inset 0 1px 0 #ffffff1f,0 22px 40px -20px #000,0 0 26px -10px var(--sc)}
#mcSummary .mc-tile.s3d::before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sc),transparent);opacity:.8}
.s3d-ic{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;font-style:normal;transform:translateZ(24px);
  background:linear-gradient(145deg,color-mix(in srgb,var(--sc) 40%,#0b1220),color-mix(in srgb,var(--sc) 10%,#05080e));box-shadow:inset 0 1px 0 #ffffff30,0 6px 12px -6px var(--sc)}
#mcSummary .mc-tile.s3d > span{padding-right:36px;color:color-mix(in srgb,var(--sc) 55%,#cfe3ee);letter-spacing:.12em;font-size:9.5px}
/* números com volume e sem cortar o texto */
#mcSummary .mc-tile.s3d > b{white-space:normal;overflow:visible;text-overflow:clip;font-size:21px;line-height:1.15;margin:6px 0 3px;transform:translateZ(18px);color:#f1f8ff;
  text-shadow:1px 1px 0 color-mix(in srgb,var(--sc) 35%,#000),2px 2px 0 color-mix(in srgb,var(--sc) 22%,#000),4px 6px 10px #000b,0 0 16px color-mix(in srgb,var(--sc) 35%,transparent)}
#mcSummary .mc-tile.s3d[data-s3d="profit"] > b{color:var(--sc)}
#mcSummary .mc-tile.s3d small{transform:translateZ(10px)}
#mcSummary .mc-tile.s3d input{background:#050a12;border:1px solid color-mix(in srgb,var(--sc) 35%,transparent);border-radius:7px;box-shadow:inset 0 2px 4px #000a;padding:2px 6px}
#mcSummary .mc-tile.s3d .mc-goalbar,#mcSummary .mc-tile.s3d .mc-luckbar{height:8px;border-radius:5px;background:linear-gradient(180deg,#04070c,#141b26);box-shadow:inset 0 2px 3px #000c;overflow:hidden}
#mcSummary .mc-tile.s3d .mc-luckbar i{background:linear-gradient(180deg,#ffffff44,transparent 50%),linear-gradient(90deg,#3fc9ff,#21ffb0);box-shadow:0 0 12px #21ffb088}
/* cartões grandes (contagem e sorte) ocupam mais espaço */
#mcSummary .mc-tile.s3d.mc-count,#mcSummary .mc-tile.s3d.mc-luck{grid-column:span 2}
@media (max-width:640px){#mcSummary .mc-tile.s3d.mc-count,#mcSummary .mc-tile.s3d.mc-luck{grid-column:span 2}}
#mcSummary .mc-tile.s3d.mc-count .mc-ct-row{margin-top:12px}

/* ===== Janela "Best Diff ao Vivo" em 3D ===== */
.bd-panel.bdx{border-radius:20px;border:1px solid #ffb02033;overflow:hidden;
  background:radial-gradient(120% 60% at 50% -10%,#3a2808cc,transparent 60%),linear-gradient(180deg,#121a26f7,#080d15f7) !important;
  box-shadow:inset 0 1px 0 #ffe2a326,0 30px 70px -20px #000,0 0 0 1px #00000060}
.bd-panel.bdx .bd-panel-header{padding:14px 16px;border-bottom:1px solid #ffffff0f;background:linear-gradient(180deg,#ffffff08,transparent)}
.bd-panel.bdx .bd-panel-title{font:700 15px 'Space Grotesk',sans-serif;letter-spacing:.02em;color:#fff3dc}
.bd-panel.bdx .bd-dot{box-shadow:0 0 10px 2px #ffb020;animation:m3d-led 2s ease-in-out infinite}
/* 4 números do topo em relevo, com ícone */
.bd-panel.bdx .bdx-hero{gap:8px;padding:12px}
.bd-panel.bdx .bdx-k{--kc:#ffb020;position:relative;overflow:hidden;padding:10px 6px 9px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--kc) 30%,transparent);
  background:radial-gradient(100% 100% at 50% 0%,color-mix(in srgb,var(--kc) 16%,transparent),transparent 65%),linear-gradient(170deg,#121c29,#070c13);
  box-shadow:inset 0 1px 0 #ffffff17,0 10px 18px -12px #000;transition:transform .25s,box-shadow .25s}
.bd-panel.bdx .bdx-k:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff22,0 14px 22px -12px #000,0 0 18px -8px var(--kc)}
.bd-panel.bdx .bdx-k:nth-child(1){--kc:#ffb020}.bd-panel.bdx .bdx-k:nth-child(2){--kc:#ffd76a}.bd-panel.bdx .bdx-k:nth-child(3){--kc:#4fd6ff}.bd-panel.bdx .bdx-k:nth-child(4){--kc:#21ffb0}
.bd-panel.bdx .bdx-k::before{display:block;font-size:15px;margin-bottom:3px;filter:drop-shadow(0 3px 4px #000a)}
.bd-panel.bdx .bdx-k:nth-child(1)::before{content:"🏆"}.bd-panel.bdx .bdx-k:nth-child(2)::before{content:"👑"}
.bd-panel.bdx .bdx-k:nth-child(3)::before{content:"⚡"}.bd-panel.bdx .bdx-k:nth-child(4)::before{content:"✅"}
.bd-panel.bdx .bdx-k span{color:color-mix(in srgb,var(--kc) 45%,#cfe0ea);min-height:18px}
.bd-panel.bdx .bdx-k b{font:700 17px/1.25 'Space Grotesk',sans-serif;color:var(--kc) !important;
  text-shadow:1px 1px 0 color-mix(in srgb,var(--kc) 35%,#000),2px 2px 0 color-mix(in srgb,var(--kc) 20%,#000),3px 5px 8px #000c,0 0 14px color-mix(in srgb,var(--kc) 45%,transparent)}
/* filtro e "Ver tudo" */
.bd-panel.bdx .ls-filter-select{height:36px;border-radius:12px !important;background:linear-gradient(180deg,#05090f,#0c141f) !important;border:1px solid #ffffff1a !important;box-shadow:inset 0 2px 5px #000c}
.bd-panel.bdx .ls-viewall-btn{height:36px;border-radius:12px !important;font-weight:700;color:#fff3dc !important;border:1px solid #ffb02066 !important;
  background:linear-gradient(180deg,#3a2a0e,#1c1408) !important;box-shadow:0 4px 0 #120c03,inset 0 1px 0 #ffe2a333;transition:transform .1s,box-shadow .1s}
.bd-panel.bdx .ls-viewall-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #120c03,inset 0 1px 0 #ffe2a333}
/* separadores como teclas */
.bd-panel.bdx .bdx-chips{gap:8px;padding:10px 12px}
.bd-panel.bdx .bdx-chips button{padding:6px 14px;border-radius:10px;color:#c9d6e2;border:1px solid #ffffff1f;background:linear-gradient(180deg,#1a2433,#0d141e);
  box-shadow:0 3px 0 #05080d,inset 0 1px 0 #ffffff1a;transition:transform .1s,box-shadow .1s,filter .2s}
.bd-panel.bdx .bdx-chips button:hover{filter:brightness(1.2)}
.bd-panel.bdx .bdx-chips button.on{color:#2a1a00;border-color:#ffd27a;background:linear-gradient(180deg,#ffd27a,#f7931a);box-shadow:0 3px 0 #7a4600,0 6px 16px -6px #ffb020,inset 0 1px 0 #ffffffaa}
/* uma linha por máquina */
.bd-panel.bdx .bdx-m{position:relative;overflow:hidden;padding:11px 12px 10px 14px;border-radius:14px;border:1px solid #ffffff14;
  background:linear-gradient(90deg,#ffb0200d,transparent 60%),linear-gradient(170deg,#121b28,#080d15);box-shadow:inset 0 1px 0 #ffffff12,0 10px 18px -14px #000}
.bd-panel.bdx .bdx-m::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#ffd27a,#f7931a);box-shadow:0 0 10px #ffb020}
.bd-panel.bdx .bdx-mh b{font:700 14px 'Space Grotesk',sans-serif}
.bd-panel.bdx .bdx-bars{height:10px;border-radius:6px;margin:8px 0;background:linear-gradient(180deg,#03060a,#121822);box-shadow:inset 0 2px 3px #000c,0 1px 0 #ffffff0d}
.bd-panel.bdx .bdx-bar{border-radius:6px;background:linear-gradient(180deg,#ffffff55,transparent 45%),linear-gradient(90deg,#c46a00,#f7931a 60%,#ffd76a);box-shadow:0 0 12px #ffb02088}
.bd-panel.bdx .bdx-bar.all{background:linear-gradient(180deg,#ffffff22,transparent 50%),#ffffff1a;box-shadow:none}
/* feed de eventos */
.bd-panel.bdx .bdx-feed{gap:6px}
.bd-panel.bdx .bdx-ev{padding:8px 10px;border-radius:11px;border:1px solid #ffffff0f;border-left-width:3px;background:linear-gradient(170deg,#101824,#0a1019);
  box-shadow:inset 0 1px 0 #ffffff0d;animation:bdx3-in .35s cubic-bezier(.2,.8,.2,1) both}
.bd-panel.bdx .bdx-ev.rec{background:linear-gradient(90deg,#ffb02024,#ffb02008 60%,transparent),linear-gradient(170deg,#141a22,#0a0f17);border-color:#ffb02033;border-left-color:#ffb020;box-shadow:inset 0 1px 0 #ffe2a31f,0 0 16px -10px #ffb020}
.bd-panel.bdx .bdx-ev.share{border-left-color:#21ffb0}
.bd-panel.bdx .bdx-ev.rej{border-left-color:#ff5d6c;background:linear-gradient(90deg,#ff5d6c14,transparent 60%),linear-gradient(170deg,#101824,#0a1019)}
.bd-panel.bdx .bdx-ev .ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:#ffffff0d;box-shadow:inset 0 1px 0 #ffffff14}
@keyframes bdx3-in{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.bd-panel.bdx .bdx-ev,.bd-panel.bdx .bd-dot{animation:none}}

/* ===== Simulador em 3D ===== */
#tab-simulator .sim-container{border-radius:22px;border:1px solid #4fd6ff26;
  background:radial-gradient(90% 50% at 50% -5%,#103a52aa,transparent 60%),linear-gradient(180deg,#0c1724,#060c14);box-shadow:inset 0 1px 0 #ffffff14,0 30px 60px -30px #000}
#tab-simulator .sim-title{font:800 24px 'Space Grotesk',sans-serif;letter-spacing:.06em;background:linear-gradient(180deg,#ffffff,#7fdcff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #0d4a66) drop-shadow(0 8px 18px #4fd6ff44)}
#tab-simulator .sim-divider{height:2px;background:linear-gradient(90deg,transparent,#4fd6ff44,transparent)}
/* rótulo de secção com a cor dela */
#tab-simulator .sim-section-label.s3dl{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.16em;
  color:color-mix(in srgb,var(--sc) 70%,#fff);background:color-mix(in srgb,var(--sc) 12%,transparent);border:1px solid color-mix(in srgb,var(--sc) 35%,transparent)}
#tab-simulator .sim-section-label.s3dl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sc);box-shadow:0 0 8px var(--sc)}
/* cartões */
#tab-simulator .sim-grid.s3dg{gap:14px}
#tab-simulator .s3dg .sim-card{position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--sc) 28%,transparent) !important;
  background:radial-gradient(110% 100% at 100% 0%,color-mix(in srgb,var(--sc) 15%,transparent),transparent 55%),linear-gradient(165deg,#101c2b,#070d16) !important;
  box-shadow:inset 0 1px 0 #ffffff15,0 18px 32px -20px #000 !important;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
#tab-simulator .s3dg .sim-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--sc) 60%,transparent) !important;box-shadow:inset 0 1px 0 #ffffff20,0 24px 40px -20px #000,0 0 26px -10px var(--sc) !important}
#tab-simulator .s3dg .sim-card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--sc),transparent);opacity:.8}
#tab-simulator .s3dg .s3d-ic{top:12px;right:12px}
#tab-simulator .s3dg .sim-label{padding-right:38px;color:color-mix(in srgb,var(--sc) 45%,#c9d8e4)}
#tab-simulator .s3dg .sim-value{color:#f2f8ff;text-shadow:1px 1px 0 color-mix(in srgb,var(--sc) 35%,#000),2px 2px 0 color-mix(in srgb,var(--sc) 20%,#000),4px 6px 10px #000b,0 0 16px color-mix(in srgb,var(--sc) 30%,transparent)}
/* barras de progresso em tubo */
#tab-simulator .sim-progress-wrap.s3dl .sim-progress-label{color:color-mix(in srgb,var(--sc) 55%,#cfe0ea)}
#tab-simulator .sim-progress-bar{height:14px;border-radius:8px;background:linear-gradient(180deg,#03060a,#131a24);box-shadow:inset 0 2px 4px #000c,0 1px 0 #ffffff0d;border:none;overflow:hidden}
#tab-simulator .sim-progress-fill,#tab-simulator .sim-progress-fill-halving{position:relative;border-radius:8px;
  background-image:linear-gradient(180deg,#ffffff55,transparent 45%,#0003),repeating-linear-gradient(115deg,#ffffff18 0 10px,transparent 10px 20px),var(--pfill,linear-gradient(90deg,#3fc9ff,#21ffb0)) !important;
  background-size:auto,40px 100%,auto;animation:t3d-stripes 1.8s linear infinite;box-shadow:0 0 14px color-mix(in srgb,var(--sc) 60%,transparent)}
#tab-simulator .sim-progress-fill-halving{--pfill:linear-gradient(90deg,#ff9a1a,#ffd27a 60%,#21ffb0)}
@media (prefers-reduced-motion:reduce){#tab-simulator .sim-progress-fill,#tab-simulator .sim-progress-fill-halving{animation:none}}
#tab-simulator .s3dg .sim-card{min-width:0}

/* ===== Conversor em 3D ===== */
#tab-converter .blocks-container > .panel{border-radius:22px;border:1px solid #4fd6ff26;
  background:radial-gradient(70% 60% at 0% 0%,#123a4a77,transparent 60%),radial-gradient(60% 60% at 100% 100%,#3a2a0855,transparent 60%),linear-gradient(170deg,#0c1724,#060c14);
  box-shadow:inset 0 1px 0 #ffffff14,0 30px 60px -30px #000}
#tab-converter #ratesRefreshBtn{padding:6px 14px !important;font-size:11px !important;font-weight:700;border-radius:10px !important;color:#dff6ff !important;border:1px solid #4fd6ff88 !important;
  background:linear-gradient(180deg,#1c4a63,#0f2c3d) !important;box-shadow:0 3px 0 #08202d,inset 0 1px 0 #ffffff33;transition:transform .1s,box-shadow .1s}
#tab-converter #ratesRefreshBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #08202d}
/* cotações */
#tab-converter .rates-status-row{gap:12px}
#tab-converter .rate-chip{--rc:#4fd6ff;position:relative;overflow:hidden;padding:12px 16px 12px 52px;border-radius:14px;min-width:150px;
  border:1px solid color-mix(in srgb,var(--rc) 30%,transparent);background:radial-gradient(100% 120% at 0% 0%,color-mix(in srgb,var(--rc) 16%,transparent),transparent 60%),linear-gradient(165deg,#101c2b,#070d16);
  box-shadow:inset 0 1px 0 #ffffff15,0 14px 26px -16px #000;transition:transform .25s,box-shadow .25s}
#tab-converter .rate-chip:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff20,0 18px 30px -16px #000,0 0 22px -10px var(--rc)}
#tab-converter .rate-chip:nth-child(1){--rc:#f7931a}#tab-converter .rate-chip:nth-child(2){--rc:#26a17b}#tab-converter .rate-chip:nth-child(3){--rc:#4f8bff}
#tab-converter .rate-chip::before{position:absolute;left:12px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 15px/1 'Space Grotesk',sans-serif;color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rc) 55%,#fff),var(--rc) 55%,color-mix(in srgb,var(--rc) 60%,#000));
  box-shadow:inset 0 0 0 2px #ffffff40,0 6px 12px -4px var(--rc)}
#tab-converter .rate-chip:nth-child(1)::before{content:"₿"}#tab-converter .rate-chip:nth-child(2)::before{content:"₮"}#tab-converter .rate-chip:nth-child(3)::before{content:"€"}
#tab-converter .rate-chip .rate-label{color:color-mix(in srgb,var(--rc) 50%,#cfe0ea)}
#tab-converter .rate-chip .rate-value{font-size:18px;color:#f2f8ff;text-shadow:1px 1px 0 color-mix(in srgb,var(--rc) 40%,#000),3px 4px 8px #000b,0 0 14px color-mix(in srgb,var(--rc) 40%,transparent)}
/* campos de conversão: rótulo junto, ícone em moeda e caixa em baixo-relevo */
#tab-converter .converter-grid{gap:16px;margin-top:18px}
#tab-converter .converter-field{--fc:#f7931a;position:relative;padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--fc) 26%,transparent);
  background:linear-gradient(165deg,#101c2b,#070d16);box-shadow:inset 0 1px 0 #ffffff12,0 14px 26px -18px #000}
#tab-converter .converter-field:nth-child(2){--fc:#4f8bff}#tab-converter .converter-field:nth-child(3){--fc:#26a17b}
#tab-converter .converter-field label{justify-content:flex-start !important;gap:4px;font-size:12px;color:color-mix(in srgb,var(--fc) 45%,#d6e4ee);white-space:nowrap}
#tab-converter .converter-field label .btc-unit-toggle{margin-left:auto}
#tab-converter .converter-field input{height:52px;padding:0 16px !important;border-radius:12px !important;font:700 22px 'Space Grotesk',sans-serif !important;color:#f2f8ff !important;
  background:linear-gradient(180deg,#03070c,#0b131d) !important;border:1px solid #ffffff14 !important;box-shadow:inset 0 3px 8px #000d,inset 0 -1px 0 #ffffff0d !important;transition:border-color .2s,box-shadow .2s}
#tab-converter .converter-field input:focus{outline:none;border-color:var(--fc) !important;box-shadow:inset 0 3px 8px #000d,0 0 0 3px color-mix(in srgb,var(--fc) 22%,transparent),0 0 22px -6px var(--fc) !important}
#tab-converter .btc-unit-toggle{padding:3px;border-radius:10px;background:#05090f;box-shadow:inset 0 2px 4px #000c}
#tab-converter .btc-unit-btn{border-radius:7px !important;padding:3px 10px !important}
#tab-converter .btc-unit-btn.active{background:linear-gradient(180deg,#ffd27a,#f7931a) !important;color:#2a1a00 !important;box-shadow:0 2px 0 #7a4600,0 4px 10px -4px #ffb020}
#tab-converter .converter-field label{display:block !important;line-height:26px}
#tab-converter .converter-field label .btc-unit-toggle{float:right;margin-top:-1px}

/* ===== Renting em 3D ===== */
#tab-renting .panel{border-radius:20px;border:1px solid #b48cff2e;
  background:radial-gradient(70% 80% at 0% 0%,#2a1a4a66,transparent 60%),linear-gradient(170deg,#0e1726,#070c15);box-shadow:inset 0 1px 0 #ffffff14,0 26px 50px -30px #000}
#tab-renting .panel-title{color:#e2d6ff}
#tab-renting .power-mqtt-form input{height:40px;border-radius:12px !important;background:linear-gradient(180deg,#05090f,#0c141f) !important;border:1px solid #b48cff2e !important;box-shadow:inset 0 2px 6px #000c !important}
#tab-renting .power-mqtt-form input:focus{outline:none;border-color:#b48cff !important;box-shadow:inset 0 2px 6px #000c,0 0 0 3px #b48cff2e !important}
#tab-renting .power-save-btn{height:38px;padding:0 18px;border-radius:12px !important;font-weight:700;color:#022014 !important;border:1px solid #6dffcf !important;
  background:linear-gradient(180deg,#5dffc6,#18c98a) !important;box-shadow:0 4px 0 #0b7a52,0 10px 18px -8px #21ffb0aa,inset 0 1px 0 #ffffffaa;transition:transform .1s,box-shadow .1s}
#tab-renting .power-save-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0b7a52}
#tab-renting #mrrLastUpdate{font:700 15px 'Space Grotesk',sans-serif;color:#4fd6ff;text-shadow:0 0 12px #4fd6ff77}
/* cartão de cada rental */
#tab-renting .renting-card{position:relative;overflow:hidden;padding:16px 18px;border-radius:18px;border:1px solid #b48cff33;
  background:radial-gradient(90% 120% at 0% 0%,#3a245a55,transparent 55%),linear-gradient(165deg,#111b2b,#070d16);box-shadow:inset 0 1px 0 #ffffff17,0 18px 34px -20px #000;transition:transform .3s,box-shadow .3s}
#tab-renting .renting-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff22,0 24px 40px -20px #000,0 0 28px -12px #b48cff}
#tab-renting .renting-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#d6c2ff,#8a5cff);box-shadow:0 0 12px #b48cff}
#tab-renting .renting-card-title{font-size:17px;color:#fff;display:flex;align-items:center;gap:10px}
#tab-renting .renting-card-title::before{content:"⛏️";display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;font-size:16px;
  background:linear-gradient(145deg,#4a2f7a,#1a1030);box-shadow:inset 0 1px 0 #ffffff30,0 6px 12px -6px #b48cff}
#tab-renting .renting-status-pill{padding:5px 12px;border-radius:999px;font-weight:700;font-size:11.5px;display:inline-flex;align-items:center;gap:7px;box-shadow:inset 0 1px 0 #ffffff1a}
#tab-renting .renting-status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
#tab-renting .renting-status-pill.active::before{animation:m3d-led 1.6s ease-in-out infinite}
#tab-renting .renting-grid{margin-top:14px;gap:10px}
#tab-renting .renting-grid > div{padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,#05090f,#0b121c);border:1px solid #ffffff0f;box-shadow:inset 0 2px 4px #000a}
#tab-renting .renting-field-label{color:#a996d6;letter-spacing:.1em}
#tab-renting .renting-field-val{font:700 14px 'Space Grotesk',sans-serif;color:#f2f8ff;margin-top:4px}
/* barra de tempo de aluguer */
.renting-progress{margin-top:14px}
.renting-progress-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:#a996d6;letter-spacing:.08em;text-transform:uppercase}
.renting-progress-head b{font:700 13px 'Space Grotesk',sans-serif;color:#e2d6ff;letter-spacing:0;text-transform:none}
.renting-progress-bar{height:12px;margin-top:6px;border-radius:7px;background:linear-gradient(180deg,#03060a,#131a24);box-shadow:inset 0 2px 4px #000c;overflow:hidden}
.renting-progress-bar i{display:block;height:100%;border-radius:7px;background:linear-gradient(180deg,#ffffff55,transparent 45%),repeating-linear-gradient(115deg,#ffffff1a 0 10px,transparent 10px 20px),linear-gradient(90deg,#8a5cff,#d6c2ff);
  background-size:auto,40px 100%,auto;animation:t3d-stripes 1.8s linear infinite;box-shadow:0 0 12px #b48cff99}
.renting-progress-pct{margin-top:4px;font-size:10.5px;color:#7f6fa8;text-align:right}
@media (prefers-reduced-motion:reduce){.renting-progress-bar i,#tab-renting .renting-status-pill.active::before{animation:none}}

/* ===== OC em 3D ===== */
#tab-oc .oc-grid{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:18px}
#tab-oc .oc-card{position:relative;overflow:hidden;padding:18px;border-radius:20px;border:1px solid #b48cff33;
  background:radial-gradient(90% 80% at 0% 0%,#2e1d4e66,transparent 60%),linear-gradient(165deg,#111b2b,#070d16);box-shadow:inset 0 1px 0 #ffffff15,0 24px 44px -26px #000;transition:transform .3s,box-shadow .3s}
#tab-oc .oc-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff20,0 30px 50px -26px #000,0 0 30px -14px #b48cff}
#tab-oc .oc-card.offline{border-left:1px solid #ff5d6c66;opacity:.75}
#tab-oc .oc-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#d6c2ff,#8a5cff);box-shadow:0 0 12px #b48cff}
#tab-oc .oc-card .name{display:flex;align-items:center;gap:10px;font:700 17px 'Space Grotesk',sans-serif;color:#fff}
#tab-oc .oc-card .name::before{content:"🔧";display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;font-size:16px;
  background:linear-gradient(145deg,#4a2f7a,#1a1030);box-shadow:inset 0 1px 0 #ffffff30,0 6px 12px -6px #b48cff}
#tab-oc .oc-card .ip{margin:4px 0 0 44px;font-size:11px;color:#8aa0b4}
/* valores atuais como duas pastilhas */
#tab-oc .oc-card-current{display:flex;flex-direction:column;gap:6px}
#tab-oc .oc-card-current > div{padding:4px 10px;border-radius:999px;background:#ffffff0a;border:1px solid #ffffff14;font-size:10.5px}
#tab-oc .oc-card-current b{font-size:13px;color:#4fd6ff;text-shadow:0 0 10px #4fd6ff66}
#tab-oc .oc-card-current > div:nth-child(2) b{color:#ffd23f;text-shadow:0 0 10px #ffd23f55}
/* campos */
#tab-oc .oc-field-row{gap:12px;margin-top:16px}
#tab-oc .oc-field label{color:#a996d6;letter-spacing:.1em}
#tab-oc .oc-field input{height:46px;padding:0 14px !important;border-radius:12px !important;font:700 20px 'Space Grotesk',sans-serif !important;color:#f2f8ff !important;
  background:linear-gradient(180deg,#03070c,#0b131d) !important;border:1px solid #b48cff2e !important;box-shadow:inset 0 3px 8px #000d,inset 0 -1px 0 #ffffff0d !important}
#tab-oc .oc-field input:focus{outline:none;border-color:#b48cff !important;box-shadow:inset 0 3px 8px #000d,0 0 0 3px #b48cff2e,0 0 20px -6px #b48cff !important}
#tab-oc .oc-field-row .oc-field:first-child input{border-color:#4fd6ff33 !important}
#tab-oc .oc-field-row .oc-field:nth-child(2) input{border-color:#ffd23f33 !important}
/* botões como teclas 3D, numa só linha */
#tab-oc .oc-card-actions{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:10px;margin-top:16px}
#tab-oc .oc-card-actions button{--k:#21ffb0;--kd:#0a5a3e;height:44px;padding:0 10px;border-radius:12px !important;font-weight:700;font-size:12.5px;line-height:1.15;cursor:pointer;
  color:#f2f8ff !important;border:1px solid color-mix(in srgb,var(--k) 55%,transparent) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k) 32%,#1a2533),color-mix(in srgb,var(--k) 10%,#0b121b)) !important;
  box-shadow:0 4px 0 var(--kd),0 10px 18px -10px var(--k),inset 0 1px 0 #ffffff2a !important;transition:transform .1s,box-shadow .1s,filter .2s}
#tab-oc .oc-card-actions button.oc-btn-restart{--k:#ffb020;--kd:#6a4400}
#tab-oc .oc-card-actions button.sw-open-btn{--k:#b48cff;--kd:#3a2470}
#tab-oc .oc-card-actions button:hover{filter:brightness(1.18);transform:translateY(-1px)}
#tab-oc .oc-card-actions button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--kd),inset 0 1px 0 #ffffff22 !important}
#tab-oc .oc-card-actions button:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed}
#tab-oc .oc-card-status{margin-top:10px}

/* ===== Barra de cima (idioma, tema, som, kiosk, widgets, desempenho, mini, ajuda, fechar, conta, estado) em 3D ===== */
header .header-actions{gap:10px;padding:8px 10px;border-radius:18px;background:linear-gradient(180deg,#04080e,#0a121c);border:1px solid #ffffff12;
  box-shadow:inset 0 3px 10px #000d,inset 0 -1px 0 #ffffff0f}
header .header-actions > .theme-select,header .header-actions > button:not(.acct-av){--k:#9fb6c8;--kd:#1c2834;height:36px;padding:0 14px;border-radius:11px !important;
  font:700 12px 'Space Grotesk',sans-serif !important;color:#eaf6ff !important;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--k) 45%,transparent) !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k) 24%,#1a2533),color-mix(in srgb,var(--k) 8%,#0b121b)) !important;
  box-shadow:0 4px 0 var(--kd),0 8px 14px -8px color-mix(in srgb,var(--k) 80%,transparent),inset 0 1px 0 #ffffff26 !important;
  transform:translateY(0);transition:transform .1s,box-shadow .1s,filter .2s}
header .header-actions > button:not(.acct-av):hover,header .header-actions > .theme-select:hover{filter:brightness(1.18);transform:translateY(-1px)}
header .header-actions > button:not(.acct-av):active{transform:translateY(3px);box-shadow:0 1px 0 var(--kd),inset 0 1px 0 #ffffff22 !important}
header #langSelect{--k:#7aa8ff;--kd:#13284a}
header #themeSelect{--k:#b48cff;--kd:#2a1a4e;min-width:170px}
header #soundToggleBtn{--k:#21ffb0;--kd:#0a5a3e}
header #soundToggleBtn.muted{--k:#8aa0b4;--kd:#1c2834}
header #kioskToggleBtn{--k:#4fd6ff;--kd:#0c3a4f}
header #wgBtn{--k:#3dffc2;--kd:#0a4a38}
header #perfBtn{--k:#ffb020;--kd:#5a3a00}
header #miniWinBtn{--k:#7aa8ff;--kd:#13284a}
header #helpBtn{--k:#ff7ab6;--kd:#5a1a3a}
header #shutdownBtn{--k:#ff5d6c;--kd:#5a1520}
/* conta e estado */
header #authUserPill .acct-av{box-shadow:0 4px 0 #0a3a30,0 0 16px -4px #21ffb0,inset 0 1px 0 #ffffff40}
header .header-actions .status-pill{height:36px;padding:0 14px;border-radius:999px;background:linear-gradient(180deg,#0b2a20,#071a14);border:1px solid #21ffb055;
  box-shadow:inset 0 1px 0 #ffffff1a,0 0 18px -8px #21ffb0}
header .header-actions .status-pill .dot{box-shadow:0 0 10px #21ffb0;animation:m3d-led 2s ease-in-out infinite}
header .subtitle{font-size:11.5px;color:#8fb3c4}
header #versionTag{padding:2px 8px;border-radius:999px;background:#4fd6ff14;border:1px solid #4fd6ff33;color:#9fe2ff}