:root{
      --primary:#3B82F6;
      --bg-body:#F8FAFC;
      --bg-sidebar:#0F172A;
      --surface-card:#ffffff;
      --text-main:#334155;
      --text-secondary:#64748B;
      --border-color:#E2E8F0;
      --success:#10B981;
      --danger:#EF4444;
      --warning:#F59E0B;
      --shadow:0 4px 6px -1px rgba(0,0,0,0.05);
    }
    body.dark-mode{
      --bg-body:#0B1120;
      --surface-card:#1E293B;
      --text-main:#F1F5F9;
      --text-secondary:#94A3B8;
      --border-color:#334155;
      --shadow:0 4px 6px -1px rgba(0,0,0,0.3);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Inter',sans-serif;
      background:var(--bg-body);
      color:var(--text-main);
      height:100vh;
      display:flex;
      overflow:hidden;
      transition:.3s;
    }
    .sidebar{
      width:260px;
      background:var(--bg-sidebar);
      color:#fff;
      display:flex;
      flex-direction:column;
      flex-shrink:0;
      z-index:50;
    }
    .logo-area{
      height:70px;
      display:flex;
      align-items:center;
      padding:0 25px;
      font-weight:700;
      font-size:1.2rem;
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .logo-area i{margin-right:12px;color:var(--primary);font-size:1.4rem}
    .nav-links{list-style:none;padding:20px 0;flex-grow:1;overflow-y:auto}
    .nav-item{
      padding:14px 25px;
      cursor:pointer;
      color:#94A3B8;
      display:flex;
      align-items:center;
      transition:.2s;
      border-left:4px solid transparent;
      font-weight:500;
    }
    .nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
    .nav-item.active{background:rgba(59,130,246,.1);color:#fff;border-left-color:var(--primary)}
    .nav-item i{margin-right:12px;font-size:1.1rem}
    .main-content{
      flex-grow:1;
      padding:30px;
      overflow-y:auto;
      height:100vh;
      padding-bottom:80px;
    }
    .hidden{display:none!important}
    .card{
      background:var(--surface-card);
      padding:25px;
      border-radius:12px;
      border:1px solid var(--border-color);
      margin-bottom:25px;
      box-shadow:var(--shadow);
    }
    .grid-3{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:20px;
      margin-bottom:20px;
    }
    .input-group{display:flex;gap:10px;flex-wrap:wrap}
    .input-field{
      flex-grow:1;
      padding:12px 16px;
      border-radius:8px;
      border:1px solid var(--border-color);
      background:var(--bg-body);
      color:var(--text-main);
      font-size:1rem;
      outline:none;
      min-width:200px;
    }
    .input-field:focus{border-color:var(--primary)}
    .btn-primary{
      background:var(--primary);
      color:#fff;border:none;
      padding:12px 24px;
      border-radius:8px;
      cursor:pointer;
      font-weight:600;
      white-space:nowrap;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
      width:100%;
    }
    @media(min-width:768px){.btn-primary{width:auto}}
    .intel-list{list-style:none;margin-top:12px}
    .intel-list li{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      padding:10px 0;
      border-bottom:1px solid var(--border-color);
      font-size:.9rem;
      line-height:1.4;
      gap:16px;
    }
    .intel-list li span:first-child{
      color:var(--text-secondary);
      font-weight:600;
      min-width:170px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:700;
      border:1px solid var(--border-color);
      background:rgba(59,130,246,.06);
      color:var(--text-main);
      margin:4px 6px 0 0;
    }
    .pill i{font-size:1.1rem}
    .ok{color:var(--success);font-weight:800}
    .bad{color:var(--danger);font-weight:800}
    .warn{color:var(--warning);font-weight:800}

    .switch-container{display:flex;align-items:center;gap:12px;cursor:pointer;}
    .switch-container input{display:none;}
    .switch{
      position:relative;width:50px;height:26px;
      background:#CBD5E1;border-radius:25px;transition:.3s;
    }
    .switch::after{
      content:'';
      position:absolute;top:3px;left:3px;
      width:20px;height:20px;background:#fff;border-radius:50%;
      transition:.3s;
    }
    input:checked + .switch{background:var(--primary)}
    input:checked + .switch::after{transform:translateX(24px)}

    #loading{
      position:fixed;top:0;left:0;width:100%;height:100%;
      background:rgba(0,0,0,.5);
      z-index:100;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      backdrop-filter:blur(4px);
      color:#fff;
    }
    @media(max-width:768px){
      body{flex-direction:column}
      .sidebar{
        position:fixed;bottom:0;left:0;width:100%;height:65px;
        flex-direction:row;justify-content:space-around;align-items:center;
        box-shadow:0 -2px 10px rgba(0,0,0,.2);
      }
      .logo-area{display:none}
      .nav-links{display:flex;padding:0;width:100%;justify-content:space-around}
      .nav-item{
        flex-direction:column;padding:8px 0;border-left:none;border-top:3px solid transparent;
        font-size:.75rem;justify-content:center;width:100%;
      }
      .nav-item i{margin-right:0;margin-bottom:4px;font-size:1.2rem}
      .nav-item.active{border-top-color:var(--primary);background:transparent}
      .main-content{padding:15px;padding-bottom:80px}
      .intel-list li{flex-direction:column;gap:6px}
    }