/* © 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 */
  /* --- Fundo animado de partículas em onda (reutilizável) --- */
  .wave-bg-host{
    position:relative;
    overflow:hidden;
  }
  .wave-bg-host > *:not(.wave-bg-canvas){
    position:relative;
    z-index:1;
  }
  .wave-bg-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    opacity:0.85;
    pointer-events:none;
  }
  .panel[data-layout-id="main-machines"]{
    position:relative;
    overflow:hidden;
  }
  .panel[data-layout-id="main-machines"] > *{
    position:relative;
    z-index:1;
  }
  #machinesBgCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    opacity:0.85;
    pointer-events:none;
  }

  .sidebar{display:flex; flex-direction:column; gap:10px;}
  .gauge{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-radius:10px; background:linear-gradient(135deg, var(--panel-2), var(--deep));
    border:1px solid var(--line); position:relative; overflow:hidden;
    transition: all 0.2s ease;
  }
  .gauge:hover { border-color: var(--line-strong); transform: translateX(2px); }
  .gauge::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green);
    box-shadow: 0 0 10px var(--green); animation: gaugeBarGlow 2.6s ease-in-out infinite;
  }
  @keyframes gaugeBarGlow{
    0%,100%{ opacity:.7; }
    50%{ opacity:1; }
  }
  .gauge.amber-bar::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
  .gauge.cyan-bar::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
  .gauge-left { display: flex; flex-direction: column; gap: 3px; }
  .gauge .label{font-size:9px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-weight: 600;}
  .gauge .unit{font-size:10px; color:var(--muted-2); font-weight: 500;}
  .gauge-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
  .gauge .value{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--green); text-shadow:0 0 12px var(--green-dim); line-height: 1.1;}
  .gauge .value.amber{color:var(--amber); text-shadow:0 0 12px #ffb02055;}
  .gauge .value.red{color:var(--red); text-shadow:0 0 12px #ff5d5d66;}
  .gauge .value.cyan{color:var(--cyan); text-shadow:0 0 12px #4fd6ff55;}

  /* --- Tema "Glass 3D": vidro fosco, reflexos e profundidade -------- */
  /* Só ativo com body[data-theme="glass"] - os restantes temas (Padrão,
     Cyberpunk, Matrix, OLED) ficam exatamente como estavam. */
  body[data-theme="glass"] .panel,
  body[data-theme="glass"] .gauge,
  body[data-theme="glass"] header,
  body[data-theme="glass"] .nav-menu-dropdown,
  body[data-theme="glass"] .sim-card,
  body[data-theme="glass"] .channel-card,
  body[data-theme="glass"] .support-card,
  body[data-theme="glass"] .metric-row{
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -12px #00071fb0, inset 0 1px 0 #ffffff1f;
  }
  body[data-theme="glass"] .panel,
  body[data-theme="glass"] .gauge{
    border-color: #6f9dff33;
  }
  body[data-theme="glass"] .gauge::before{ box-shadow: 0 0 16px currentColor; }
  body[data-theme="glass"] .metric-row{ border-color:#3a5fa03a; }

  .main{display:flex; flex-direction:column; gap:16px;}

  .config{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .config input, .config select{
    background:#081119; border:1px solid var(--line-strong); color:var(--text);
    font-family:inherit; font-size:11px; padding:6px 9px; border-radius:6px; outline: none;
  }
  .config input.ip{width:150px;}
  .config input.name{width:120px;}
  .config button{
    background:#0d2b22; color:var(--green); border:1px solid #21ffb055;
    font-family:inherit; font-size:11px; padding:6px 12px; border-radius:6px; cursor:pointer;
  }
  .config button:hover{background:#0f3a2c;}
  .config button.ghost{background:transparent; color:var(--muted); border:1px solid var(--line-strong);}
  .config button.cyan-outline{background:transparent; color:var(--cyan); border:1px solid #4fd6ff55;}
  .config button.cyan-outline:hover{background:#0d2530;}
  .config button:disabled{opacity:.5; cursor:not-allowed;}
  .hint{font-size:10px; color:var(--muted-2);}

  .scan-modal-overlay{
    position:fixed; inset:0; z-index:10000; background:#020608cc;
    display:none; align-items:center; justify-content:center; padding:20px;
    backdrop-filter: blur(4px);
  }
  .scan-modal-overlay.open{display:flex; animation: scan-overlay-in .25s ease both;}
  @keyframes scan-overlay-in{ from{ opacity:0; } to{ opacity:1; } }
  .scan-modal{
    background:linear-gradient(180deg, var(--panel), var(--panel-2));
    border:1px solid var(--line-strong); border-radius:14px;
    width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column;
    box-shadow:0 24px 70px #000c, 0 0 0 1px #4fd6ff11, 0 0 40px -10px #4fd6ff22;
    position:relative; overflow:hidden;
  }
  .scan-modal-overlay.open .scan-modal{ animation: scan-modal-in .32s cubic-bezier(.2,.9,.25,1.15) both; }
  @keyframes scan-modal-in{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }
  .scan-modal::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--cyan), transparent);
    background-size:200% 100%; animation: scan-topline 2.4s linear infinite;
  }
  @keyframes scan-topline{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
  .scan-modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--line);
  }
  .scan-modal-header .title{
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); font-weight:600;
    display:flex; align-items:center; gap:9px;
  }
  .scan-title-icon{
    position:relative; width:16px; height:16px; flex:0 0 auto;
  }
  .scan-title-icon svg{ width:16px; height:16px; display:block; color:var(--cyan); }
  .scan-title-icon::after{
    content:''; position:absolute; inset:-5px; border-radius:50%;
    border:1px solid var(--cyan); opacity:0; animation: scan-icon-ping 2s ease-out infinite;
  }
  @keyframes scan-icon-ping{
    0%{ transform:scale(.4); opacity:.7; }
    70%{ transform:scale(1.6); opacity:0; }
    100%{ opacity:0; }
  }
  .scan-modal-close{
    background:transparent; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;
    padding:2px 6px; border-radius:6px; transition:color .15s, background .15s, transform .15s;
  }
  .scan-modal-close:hover{color:var(--text); background:var(--panel-2); transform:rotate(90deg);}
  .scan-modal-subnet{
    padding:12px 18px; border-bottom:1px solid var(--line);
  }
  .scan-modal-subnet label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px;}
  .scan-modal-subnet-row{display:flex; gap:8px;}
  .scan-modal-subnet-row .scan-input-wrap{
    flex:1; position:relative; display:flex; align-items:center;
  }
  .scan-modal-subnet-row .scan-input-wrap svg{
    position:absolute; left:10px; width:13px; height:13px; color:var(--muted); pointer-events:none;
    transition:color .15s;
  }
  .scan-modal-subnet-row .scan-input-wrap:focus-within svg{ color:var(--cyan); }
  .scan-modal-subnet-row input{
    width:100%; background:var(--panel-2); border:1px solid var(--line-strong); border-radius:8px;
    color:var(--text); padding:8px 10px 8px 30px; font-family:'JetBrains Mono', monospace; font-size:12px;
    transition:border-color .15s, box-shadow .15s;
  }
  .scan-modal-subnet-row input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px #4fd6ff1f;}
  .scan-modal-subnet-row button{
    background:var(--panel-2); border:1px solid var(--line-strong); border-radius:8px;
    color:var(--cyan); padding:8px 14px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap;
    transition:background .15s, border-color .15s, transform .1s;
  }
  .scan-modal-subnet-row button:hover{background:#0d2530; border-color:var(--cyan);}
  .scan-modal-subnet-row button:active{transform:scale(.96);}
  .scan-modal-subnet-row button:disabled{opacity:.5; cursor:default; transform:none;}
  .scan-modal-subnet .hint{font-size:10px; color:var(--muted); margin-top:6px; line-height:1.4;}
  .scan-modal-body{padding:14px 18px; overflow-y:auto; flex:1;}
  .scan-modal-footer{
    padding:12px 18px; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .scan-status{font-size:11px; color:var(--muted);}

  /* --- Radar animado enquanto pesquisa --- */
  .scan-radar-wrap{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:30px 8px 22px;
  }
  .scan-radar{
    position:relative; width:96px; height:96px; margin-bottom:16px;
    border-radius:50%;
    background:radial-gradient(circle at center, #0d2530 0%, var(--panel-2) 70%);
    border:1px solid var(--line-strong);
    overflow:hidden;
  }
  .scan-radar-ring{
    position:absolute; border:1px solid #4fd6ff33; border-radius:50%;
  }
  .scan-radar-ring.r1{ inset:8px; }
  .scan-radar-ring.r2{ inset:22px; }
  .scan-radar-ring.r3{ inset:36px; }
  .scan-radar-cross{
    position:absolute; inset:0;
    background:
      linear-gradient(#4fd6ff22 1px, transparent 1px) center / 100% 50%,
      linear-gradient(90deg, #4fd6ff22 1px, transparent 1px) center / 50% 100%;
    background-repeat:no-repeat;
  }
  .scan-radar-sweep{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 0deg, #4fd6ffcc, #4fd6ff00 32%, transparent 100%);
    animation: scan-radar-spin 1.6s linear infinite;
    mix-blend-mode:screen;
  }
  @keyframes scan-radar-spin{ to{ transform:rotate(360deg); } }
  .scan-radar-dot{
    position:absolute; width:5px; height:5px; border-radius:50%;
    background:var(--green); box-shadow:0 0 8px var(--green);
    animation: scan-radar-dot-pulse 1.6s ease-in-out infinite;
  }
  .scan-radar-dot.d1{ top:30%; left:62%; animation-delay:.2s; }
  .scan-radar-dot.d2{ top:65%; left:38%; animation-delay:.9s; }
  .scan-radar-dot.d3{ top:48%; left:24%; animation-delay:1.4s; }
  @keyframes scan-radar-dot-pulse{
    0%, 100%{ opacity:0; transform:scale(.4); }
    15%, 60%{ opacity:1; transform:scale(1); }
  }
  .scan-radar-text{ font-size:11px; color:var(--muted); text-align:center; }
  .scan-radar-text .scan-dots span{ animation: scan-dots-fade 1.4s infinite; opacity:0; }
  .scan-radar-text .scan-dots span:nth-child(1){ animation-delay:0s; }
  .scan-radar-text .scan-dots span:nth-child(2){ animation-delay:.2s; }
  .scan-radar-text .scan-dots span:nth-child(3){ animation-delay:.4s; }
  @keyframes scan-dots-fade{
    0%, 80%, 100%{ opacity:0; }
    40%{ opacity:1; }
  }

  .scan-spinner{
    display:inline-block; width:12px; height:12px; border-radius:50%;
    border:2px solid var(--line-strong); border-top-color:var(--cyan);
    animation: scan-spin 0.8s linear infinite; vertical-align:middle; margin-right:6px;
  }
  @keyframes scan-spin{ to { transform:rotate(360deg); } }
  .scan-device-list{display:flex; flex-direction:column; gap:8px;}
  .scan-device-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
    animation: scan-row-in .38s cubic-bezier(.2,.8,.3,1.1) both;
    animation-delay: calc(var(--row-i, 0) * 60ms);
    transition: border-color .2s, box-shadow .2s;
  }
  .scan-device-row:hover{ border-color:#4fd6ff55; box-shadow:0 0 0 1px #4fd6ff22; }
  @keyframes scan-row-in{
    from{ opacity:0; transform:translateY(6px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .scan-device-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .scan-device-name{font-size:12px; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px;}
  .scan-device-name .scan-live-dot{
    width:6px; height:6px; border-radius:50%; background:var(--green); flex:0 0 auto;
    box-shadow:0 0 6px var(--green); animation: scan-live-pulse 1.8s ease-in-out infinite;
  }
  @keyframes scan-live-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
  .scan-device-meta{font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .scan-device-added{font-size:10px; color:var(--green); border:1px solid var(--green-dim); border-radius:6px; padding:5px 10px; white-space:nowrap;}
  .scan-empty, .scan-error{font-size:11px; color:var(--muted); text-align:center; padding:24px 8px; animation: scan-fade-in .3s ease both;}
  @keyframes scan-fade-in{ from{ opacity:0; } to{ opacity:1; } }
  .scan-error{color:var(--red);}
  .scan-addall-btn{
    background:#0d2b22; color:var(--green); border:1px solid #21ffb055;
    font-family:inherit; font-size:11px; padding:6px 12px; border-radius:6px; cursor:pointer;
    transition:background .15s, transform .1s;
  }
  .scan-addall-btn:hover{background:#0f3a2c;}
  .scan-addall-btn:active{transform:scale(.96);}
  .scan-device-add-btn{
    background:transparent; color:var(--cyan); border:1px solid #4fd6ff55;
    font-family:inherit; font-size:10px; padding:5px 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
    transition:background .15s, transform .1s;
  }
  .scan-device-add-btn:hover{background:#0d2530;}
  .scan-device-add-btn:active{transform:scale(.94);}