*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Segoe UI',system-ui,sans-serif;
    }

    body{
      background:
        radial-gradient(circle at top left,rgba(0,229,255,.08),transparent 28%),
        radial-gradient(circle at bottom right,rgba(212,175,55,.08),transparent 30%),
        linear-gradient(145deg,#020507,#05080d,#000);
      color:#e8faff;
      padding:20px;
      min-height:100vh;
    }

    .main-container{
      display:flex;
      gap:24px;
      max-width:1600px;
      margin:0 auto;
      align-items:stretch;
    }

    .dashboard{
      flex:1;
      background:
        linear-gradient(145deg,rgba(4,12,18,.98),rgba(2,5,8,.98));
      border:2px solid #d4af37;
      border-radius:16px;
      padding:20px;
      display:flex;
      flex-direction:column;
      box-shadow:
        0 0 18px rgba(0,229,255,.22),
        0 0 35px rgba(212,175,55,.12),
        inset 0 0 25px rgba(0,229,255,.04);
    }

    .dash-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:18px;
      height:50px;
    }

    .dash-title{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .dash-title .icon{
      width:42px;
      height:42px;
      background:
        linear-gradient(135deg,#00d9ff,#0077b6 55%,#d4af37);
      border:1px solid rgba(255,215,0,.65);
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      box-shadow:
        0 0 18px rgba(0,229,255,.45),
        inset 0 0 10px rgba(255,255,255,.15);
    }

    .dash-title h1{
      font-size:20px;
      font-weight:700;
      color:#ffd700;
      text-shadow:0 0 8px rgba(212,175,55,.35);
    }

    .dash-title p{
      font-size:11px;
      color:#9db2c7;
      margin-top:2px;
    }

    .live-badge{
      background:rgba(5,12,18,.95);
      border:1.5px solid #00d9ff;
      color:#ffd700;
      padding:6px 14px;
      border-radius:20px;
      font-size:11px;
      font-weight:600;
      display:flex;
      align-items:center;
      gap:6px;
      box-shadow:
        0 0 12px rgba(0,229,255,.25),
        inset 0 0 8px rgba(212,175,55,.08);
      white-space:nowrap;
    }

    .live-badge::before{
      content:'';
      width:8px;
      height:8px;
      background:#00e5ff;
      border-radius:50%;
      box-shadow:0 0 8px #00e5ff;
      animation:pulse 1.5s infinite;
    }

    @keyframes pulse{
      0%,100%{
        opacity:1;
        transform:scale(1);
      }
      50%{
        opacity:.45;
        transform:scale(.85);
      }
    }

    .stats-bar{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      margin-bottom:18px;
    }

    .stat-box{
      background:
        linear-gradient(145deg,#081018,#05090d);
      border:1.5px solid rgba(0,229,255,.65);
      border-radius:10px;
      padding:10px 8px;
      text-align:center;
      box-shadow:
        0 0 10px rgba(0,229,255,.16),
        inset 0 0 10px rgba(212,175,55,.04);
    }

    .stat-box .label{
      font-size:10px;
      color:#7e95a8;
      margin-bottom:4px;
    }

    .stat-box .value{
      font-size:16px;
      font-weight:700;
      color:#fff;
    }

    .stat-box .value.green{
      color:#ffd700;
      text-shadow:0 0 8px rgba(255,215,0,.4);
    }

    .search-bar{
      display:flex;
      gap:10px;
      margin-bottom:20px;
      height:38px;
    }

    .search-bar input,
    .search-bar select{
      background:#081018;
      border:1.5px solid #00bcd4;
      color:#ffffff;
      padding:0 14px;
      border-radius:8px;
      font-size:12px;
      outline:none;
      box-shadow:0 0 8px rgba(0,229,255,.15);
      transition:.25s;
    }

    .search-bar input:focus,
    .search-bar select:focus{
      border-color:#ffd700;
      box-shadow:
        0 0 10px rgba(255,215,0,.22),
        0 0 16px rgba(0,229,255,.15);
    }

    .search-bar input{
      flex:1;
    }

    .search-bar select{
      width:130px;
    }

    .btn-update{
      background:
        linear-gradient(135deg,#00d9ff 0%,#0077b6 55%,#d4af37 100%);
      border:1px solid #ffd700;
      color:#061018;
      padding:0 16px;
      border-radius:8px;
      font-weight:700;
      cursor:pointer;
      font-size:12px;
      display:flex;
      align-items:center;
      gap:6px;
      transition:.25s;
      white-space:nowrap;
      box-shadow:
        0 0 15px rgba(0,229,255,.35),
        0 0 10px rgba(212,175,55,.2);
    }

    .btn-update:hover{
      transform:translateY(-2px);
      box-shadow:
        0 0 22px rgba(0,229,255,.5),
        0 0 18px rgba(255,215,0,.3);
      filter:brightness(1.08);
    }

    .section-title{
      font-size:15px;
      font-weight:600;
      margin-bottom:14px;
      color:#ffd700;
      height:22px;
      text-shadow:0 0 6px rgba(212,175,55,.22);
    }

    .cards-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
    }

    .card{
      background:
        radial-gradient(circle at top right,rgba(0,229,255,.05),transparent 30%),
        linear-gradient(145deg,#070d13,#04080c);
      border:2px solid rgba(0,229,255,.55);
      border-radius:12px;
      padding:14px;
      height:240px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:.25s;
      box-shadow:
        0 0 12px rgba(0,229,255,.18),
        inset 0 0 12px rgba(212,175,55,.03);
    }

    .card:hover{
      border-color:#ffd700;
      transform:translateY(-2px);
      box-shadow:
        0 0 22px rgba(0,229,255,.28),
        0 0 18px rgba(212,175,55,.22);
    }

    .card-header{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:6px;
    }

    .card-logo{
      width:34px;
      height:34px;
      background:
        linear-gradient(145deg,#0b1b26,#061018);
      border:1px solid #ffd700;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:700;
      color:#00e5ff;
      flex-shrink:0;
      box-shadow:0 0 8px rgba(255,215,0,.18);
    }

    .card-info h4{
      font-size:13px;
      font-weight:600;
      color:#ffffff;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .card-info span{
      font-size:10px;
      color:#8ea4b8;
    }

    .rtp-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin:4px 0;
    }

    .rtp-value{
      font-size:20px;
      font-weight:700;
      color:#00e5ff;
      text-shadow:0 0 8px rgba(0,229,255,.4);
    }

    .badge{
      font-size:9px;
      font-weight:700;
      padding:3px 6px;
      border-radius:4px;
      text-transform:uppercase;
    }

    .badge.sangat{
      background:rgba(0,229,255,.08);
      color:#00e5ff;
      border:1px solid #00e5ff;
    }

    .badge.result{
      background:rgba(212,175,55,.10);
      color:#ffd700;
      border:1px solid #d4af37;
    }

    .progress-bar{
      height:5px;
      background:#111820;
      border-radius:3px;
      overflow:hidden;
      margin-bottom:6px;
      border:1px solid rgba(255,255,255,.04);
    }

    .progress-bar .fill{
      height:100%;
      background:
        linear-gradient(90deg,#00e5ff,#0088ff 55%,#ffd700);
      border-radius:3px;
      box-shadow:0 0 8px rgba(0,229,255,.45);
    }

    .pola-box{
      background:#081018;
      border:1px solid rgba(0,229,255,.18);
      border-radius:8px;
      padding:6px 8px;
      font-size:10px;
    }

    .pola-box .label{
      color:#7f96aa;
      margin-bottom:2px;
      display:flex;
      justify-content:space-between;
    }

    .pola-box .value{
      color:#e8faff;
      font-weight:500;
      font-size:10px;
    }

    .togel-number{
      font-size:26px;
      font-weight:800;
      letter-spacing:2px;
      color:#ffd700;
      margin:2px 0;
      text-shadow:0 0 10px rgba(212,175,55,.3);
    }

    .bbfs-row{
      display:flex;
      gap:6px;
      margin-top:4px;
      flex-wrap:wrap;
    }

    .bbfs-item{
      background:#0a1118;
      border:1px solid rgba(0,229,255,.16);
      padding:3px 6px;
      border-radius:4px;
      font-size:10px;
      color:#9cb0c0;
    }

    .bbfs-item span{
      color:#ffd700;
      font-weight:600;
    }

    .card-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:10px;
      color:#6f8494;
      margin-top:auto;
      padding-top:6px;
    }

    .btn-cek{
      background:#09131c;
      border:1.5px solid #00d9ff;
      color:#ffffff;
      padding:4px 10px;
      border-radius:6px;
      font-size:11px;
      cursor:pointer;
      transition:.2s;
      box-shadow:0 0 8px rgba(0,229,255,.12);
    }

    .btn-cek:hover{
      background:
        linear-gradient(135deg,#00d9ff,#0077b6);
      border-color:#ffd700;
      color:#061018;
      box-shadow:
        0 0 14px rgba(0,229,255,.35),
        0 0 10px rgba(255,215,0,.2);
    }

    .disclaimer{
      margin-top:16px;
      font-size:11px;
      color:#70879a;
      line-height:1.5;
      border-top:1px solid rgba(212,175,55,.28);
      padding-top:12px;
    }

    .popup-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.82);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:999;
      backdrop-filter:blur(4px);
    }

    .popup-overlay.show{
      display:flex;
    }

    .popup{
      background:
        radial-gradient(circle at top,rgba(0,229,255,.08),transparent 40%),
        linear-gradient(145deg,#081018,#030609);
      border:2px solid #d4af37;
      border-radius:14px;
      padding:24px;
      width:90%;
      max-width:380px;
      text-align:center;
      box-shadow:
        0 0 35px rgba(0,229,255,.22),
        0 0 22px rgba(212,175,55,.2);
    }

    .popup h3{
      color:#ffd700;
      margin-bottom:12px;
      font-size:18px;
      text-shadow:0 0 8px rgba(212,175,55,.3);
    }

    .popup p{
      font-size:14px;
      color:#dcecf7;
      line-height:1.6;
      margin-bottom:18px;
    }

    .popup button{
      background:
        linear-gradient(135deg,#00d9ff,#0077b6 60%,#d4af37);
      border:1px solid #ffd700;
      color:#061018;
      padding:10px 24px;
      border-radius:8px;
      font-weight:700;
      cursor:pointer;
      box-shadow:
        0 0 15px rgba(0,229,255,.3),
        0 0 8px rgba(212,175,55,.2);
      transition:.25s;
    }

    .popup button:hover{
      filter:brightness(1.1);
      transform:translateY(-1px);
    }

    @media (max-width:1100px){
      .main-container{
        flex-direction:column;
      }
    }

    @media (max-width:600px){
      body{
        padding:12px;
      }

      .dashboard{
        padding:14px;
      }

      .dash-title h1{
        font-size:17px;
      }

      .stats-bar{
        grid-template-columns:repeat(2,1fr);
      }

      .cards-grid{
        grid-template-columns:1fr;
      }

      .card{
        height:auto;
        min-height:220px;
      }

      .search-bar{
        flex-wrap:wrap;
        height:auto;
      }

      .search-bar input{
        width:100%;
        flex:none;
        height:40px;
      }

      .search-bar select{
        flex:1;
        height:40px;
      }

      .btn-update{
        height:40px;
      }
    }