:root{
    --bg0:#050B12; --bg1:#07121E; --panel:#0B1622; --panel2:#0E1C2A;
    --stroke:rgba(255,255,255,.07); --stroke2:rgba(255,255,255,.10);
    --text:#EAF2FF; --muted:#9FB0C3; --muted2:#C9D6E8;
    --goldA:#FCE58A; --goldB:#F7D55C; --blueA:#6CE1FF; --blueB:#4A7DFF;
    --limeA:#E4FF2E; --limeB:#6BFF8E;
    --shadow: 0 18px 45px rgba(0,0,0,.55); --shadow2: 0 10px 25px rgba(0,0,0,.35);
    --r16:16px; --r20:20px; --r24:24px;

    /* Mobile bars */
    --appbar-h: 56px;
    --bnav-h: 66px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
  }
  *{ box-sizing:border-box; }
  body{
    margin:0;
    font-family:"Google Sans Flex", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 600px at 25% -10%, rgba(108,225,255,.18), transparent 60%),
      radial-gradient(1100px 700px at 85% 0%, rgba(252,229,138,.14), transparent 60%),
      radial-gradient(900px 700px at 70% 105%, rgba(228,255,46,.10), transparent 55%),
      linear-gradient(180deg, var(--bg0), var(--bg1) 35%, #050B12);
    min-height:100vh;
    font-size:13px;
  }
  body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
    opacity:.06;
    mix-blend-mode:overlay;
  }

  /* Layout */
  .app{ display:flex; min-height:100vh; }

  /* Sidebar (desktop) */
  .sidebar{
    width:250px;
    padding:18px 14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%),
      linear-gradient(180deg, #08121C, #07121E);
    border-right:1px solid var(--stroke);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 12px;
    border-radius:var(--r20);
    border:1px solid var(--stroke);
    background:
      radial-gradient(900px 120px at 30% 0%, rgba(252,229,138,.18), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
  }
  .brand .logo{
    width:38px; height:38px;
    border-radius:14px;
    background:
      radial-gradient(80% 80% at 30% 25%, rgba(255,255,255,.18), transparent 60%),
      linear-gradient(135deg, rgba(108,225,255,.95), rgba(74,125,255,.95));
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 25px rgba(74,125,255,.22);
  }
  .brand strong{
    font-family:"Playwrite NO", cursive;
    font-size:16px;
    letter-spacing:.2px;
  }
  .brand small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
  }

  .user-box{
    margin-top:12px;
    padding:14px;
    border-radius:var(--r24);
    border:1px solid var(--stroke);
    background:
      radial-gradient(900px 220px at 20% 0%, rgba(108,225,255,.12), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  }
  .user-top{ display:flex; align-items:center; gap:10px; }
  .user-avatar{
    width:44px;height:44px;
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;
    background:
      radial-gradient(70% 70% at 30% 20%, rgba(255,255,255,.18), transparent 60%),
      linear-gradient(135deg, rgba(252,229,138,.95), rgba(247,213,92,.95));
    color:#10131A;
    box-shadow:0 10px 25px rgba(252,229,138,.18);
  }
  .user-name{ font-weight:800; letter-spacing:.2px; }
  .user-sub{ color:var(--muted); font-size:11px; margin-top:2px; }
  .user-balance{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background: rgba(15,28,42,.55);
  }
  .user-balance .label{ font-size:11px; color:var(--muted); }
  .user-balance .value{
    font-weight:900;
    letter-spacing:.4px;
    color: var(--goldA);
    text-shadow: 0 0 18px rgba(252,229,138,.15);
  }

  .menu{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
  .menu a{
    text-decoration:none;
    color:var(--muted2);
    border:1px solid transparent;
    background:transparent;
    padding:10px 12px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .menu a:hover{
    border-color:var(--stroke);
    background:rgba(255,255,255,.03);
    color:#fff;
  }
  .menu a.active{
    border-color:rgba(108,225,255,.20);
    background:
      radial-gradient(900px 160px at 10% 0%, rgba(108,225,255,.18), transparent 60%),
      rgba(255,255,255,.03);
    color:#fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.20);
  }
  .pill{
    font-size:10px;
    color:var(--muted);
    padding:3px 9px;
    border-radius:999px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.03);
  }

  /* Main */
  .main{ flex:1; padding:18px; }
  .topbar{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .title-block strong{
    font-family:"Playwrite NO", cursive;
    font-size:22px;
    letter-spacing:.2px;
  }
  .title-block .desc{ margin-top:3px; color:var(--muted); font-size:12px; }

  .controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .search{ position:relative; width:min(320px, 72vw); }
  .search input{
    width:100%;
    padding:10px 12px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background: rgba(15,28,42,.55);
    color:#fff;
    outline:none;
  }
  .search input::placeholder{ color:rgba(195,214,232,.55); }
  .search input:focus{
    border-color:rgba(108,225,255,.35);
    box-shadow: 0 0 0 4px rgba(108,225,255,.10);
  }

  .chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.03);
    color:var(--muted2);
    padding:8px 10px;
    border-radius:999px;
    font-size:12px;
    cursor:pointer;
    user-select:none;
  }
  .chip.active{
    border-color:rgba(252,229,138,.35);
    background: radial-gradient(900px 140px at 20% 0%, rgba(252,229,138,.18), transparent 60%);
    color:#fff;
  }

  .btn-cta{
    border:none;
    padding:10px 12px;
    border-radius:16px;
    font-size:12px;
    font-weight:800;
    color:#06121E;
    background: linear-gradient(90deg, var(--limeA), var(--limeB));
    box-shadow: 0 14px 35px rgba(107,255,142,.12);
  }
  .btn-cta:hover{ filter:brightness(1.03); }

  /* Room Card */
  .room-card{
    position:relative;
    border-radius:var(--r24);
    padding:14px;
    background:
      radial-gradient(900px 260px at 20% 0%, rgba(108,225,255,.11), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    border:1px solid var(--stroke);
    box-shadow: var(--shadow2);
    overflow:hidden;
    height:100%;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .room-card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.12);
    box-shadow: var(--shadow);
  }
  .room-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .room-title{ font-weight:900; letter-spacing:.2px; font-size:13.5px; line-height:1.2; }
  .room-meta{ margin-top:4px; color:var(--muted); font-size:11px; }

  .tag{
    font-size:10px;
    padding:5px 10px;
    border-radius:999px;
    font-weight:900;
    letter-spacing:.08em;
    border:1px solid rgba(255,255,255,.10);
  }
  .tag.weekly{ color:#0a1018; background:linear-gradient(90deg,var(--goldA),var(--goldB)); }
  .tag.daily{ color:#0a1018; background:linear-gradient(90deg,#F2F2F3,#D0D0D5); }
  .tag.special{ color:#06121E; background:linear-gradient(90deg,var(--blueA),var(--blueB)); }
  .tag.vip{ color:#06121E; background:linear-gradient(90deg,var(--limeA),var(--limeB)); }

  .jack-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:12px; }
  .jackpot{
    font-size:20px;
    font-weight:1000;
    letter-spacing:.8px;
    color:#F4FAFF;
    text-shadow: 0 0 18px rgba(108,225,255,.10);
  }
  .jackpot:before{
    content:"Rp";
    font-size:12px;
    opacity:.65;
    margin-right:4px;
    font-weight:900;
    color:rgba(234,242,255,.75);
  }

  .stats{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .stat{
    padding:6px 8px;
    border-radius:14px;
    background: rgba(15,28,42,.55);
    border:1px solid var(--stroke);
    color:var(--muted2);
    font-size:11px;
  }
  .stat b{ color:#fff; font-weight:900; }

  .countdown{ display:flex; gap:8px; margin-top:10px; }
  .time-box{
    flex:0 0 auto;
    min-width:44px;
    text-align:center;
    padding:7px 7px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:
      radial-gradient(120px 60px at 30% 0%, rgba(252,229,138,.08), transparent 60%),
      rgba(15,28,42,.55);
  }
  .time-box strong{ font-size:12px; font-weight:1000; line-height:1; }
  .time-box span{
    display:block;
    margin-top:2px;
    font-size:8px;
    letter-spacing:.14em;
    opacity:.7;
    color:rgba(201,214,232,.9);
  }

  .room-bottom{
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .ticket{ color:var(--muted2); font-size:11px; }
  .ticket b{ color:#fff; font-weight:1000; }

  .btn-enter{
    border:none;
    padding:9px 12px;
    border-radius:16px;
    font-size:12px;
    font-weight:900;
    color:#06121E;
    background: linear-gradient(90deg, rgba(108,225,255,.95), rgba(74,125,255,.95));
    box-shadow: 0 14px 35px rgba(74,125,255,.14);
  }
  .btn-enter:hover{ filter:brightness(1.03); }

  /* ---------------------------
     MOBILE APP BAR + BOTTOM NAV
     --------------------------- */
  .appbar, .bottom-nav{ display:none; }

  .appbar{
    position:fixed;
    left:0; right:0;
    top:0;
    height:calc(var(--appbar-h) + var(--safe-top));
    padding-top:var(--safe-top);
    z-index:1030;
    border-bottom:1px solid var(--stroke);
    background:
      radial-gradient(900px 220px at 20% 0%, rgba(108,225,255,.10), transparent 55%),
      linear-gradient(180deg, rgba(8,18,28,.92), rgba(7,18,30,.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .appbar-inner{
    height:var(--appbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    gap:10px;
  }
  .appbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
  .appbar-logo{
    width:34px; height:34px;
    border-radius:14px;
    background:
      radial-gradient(80% 80% at 30% 25%, rgba(255,255,255,.18), transparent 60%),
      linear-gradient(135deg, rgba(108,225,255,.95), rgba(74,125,255,.95));
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 25px rgba(74,125,255,.18);
    flex:0 0 auto;
  }
  .appbar-title{
    min-width:0;
    line-height:1.1;
  }
  .appbar-title strong{
    display:block;
    font-family:"Playwrite NO", cursive;
    font-size:14px;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .appbar-title small{
    display:block;
    color:var(--muted);
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .appbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
  }
  .appbar-balance{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background: rgba(15,28,42,.55);
    max-width:52vw;
  }
  .appbar-balance .bal{
    font-weight:900;
    color:var(--goldA);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .icon-btn{
    width:40px; height:40px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background: rgba(15,28,42,.55);
    color:var(--muted2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
  }
  .icon-btn:hover{ color:#fff; border-color:rgba(255,255,255,.12); }

  .bottom-nav{
    position:fixed;
    left:0; right:0;
    bottom:0;
    height:calc(var(--bnav-h) + var(--safe-bot));
    padding-bottom:var(--safe-bot);
    z-index:1030;
    border-top:1px solid var(--stroke);
    background:
      radial-gradient(900px 220px at 80% 100%, rgba(252,229,138,.10), transparent 55%),
      linear-gradient(180deg, rgba(7,18,30,.70), rgba(8,18,28,.92));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .bottom-nav-inner{
    height:var(--bnav-h);
    display:flex;
    align-items:center;
    justify-content:space-around;
    padding:6px 10px;
    gap:8px;
  }
  .bnav-item{
    flex:1 1 0;
    border-radius:18px;
    border:1px solid transparent;
    text-decoration:none;
    color:var(--muted2);
    padding:10px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:0;
    cursor:pointer;
    user-select:none;
  }
  .bnav-item i{ font-size:18px; line-height:1; }
  .bnav-item span{
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .bnav-item.active{
    color:#fff;
    border-color:rgba(108,225,255,.20);
    background:
      radial-gradient(900px 160px at 10% 0%, rgba(108,225,255,.16), transparent 60%),
      rgba(255,255,255,.03);
  }

  /* Mobile drawer */
  .drawer-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1040;
    display:none;
  }
  .drawer{
    position:fixed;
    top:0; bottom:0;
    left:0;
    width:min(320px, 86vw);
    z-index:1041;
    transform:translateX(-110%);
    transition: transform .18s ease;
    padding:12px;
  }
  .drawer-panel{
    height:100%;
    border-radius:24px;
    border:1px solid var(--stroke);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%),
      linear-gradient(180deg, #08121C, #07121E);
    box-shadow: var(--shadow);
    overflow:auto;
    padding:14px 12px;
  }
  .drawer.open{ transform:translateX(0); }
  .drawer-backdrop.show{ display:block; }
  
  /* ---- WIN MODAL ---- */
    .win-modal{
      border-radius:24px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(1000px 360px at 20% 0%, rgba(252,229,138,.16), transparent 55%),
        radial-gradient(900px 300px at 85% 10%, rgba(108,225,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(11,22,34,.96), rgba(7,18,30,.96));
      box-shadow: 0 18px 55px rgba(0,0,0,.65);
      overflow:hidden;
    }
    .win-head{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 14px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .win-icon{
      width:44px;height:44px;
      border-radius:16px;
      display:flex;align-items:center;justify-content:center;
      color:#0a1018;
      background: linear-gradient(90deg, var(--goldA), var(--goldB));
      box-shadow: 0 12px 30px rgba(252,229,138,.15);
    }
    .win-icon i{ font-size:20px; }
    .win-title strong{
      display:block;
      font-weight:1000;
      letter-spacing:.12em;
      font-size:14px;
    }
    .win-title small{
      display:block;
      margin-top:2px;
      color:var(--muted);
      font-size:11px;
    }
    .win-body{ padding:12px 14px 14px; }
    .win-summary{
      display:flex;
      gap:10px;
      align-items:stretch;
      justify-content:space-between;
      margin-bottom:12px;
    }
    .win-summary > div{
      flex:1 1 0;
      padding:10px 12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(15,28,42,.55);
    }
    .win-summary .label{ color:var(--muted); font-size:11px; }
    .win-summary .value{
      margin-top:4px;
      font-weight:1000;
      letter-spacing:.4px;
    }
    #winTotalAmount{ color: var(--goldA); text-shadow: 0 0 18px rgba(252,229,138,.12); }
    #winTotalTickets{ color:#fff; }
    
    .win-list{
      display:flex;
      flex-direction:column;
      gap:8px;
      max-height: 48vh;
      overflow:auto;
      padding-right:4px;
    }
    .win-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(600px 120px at 20% 0%, rgba(108,225,255,.10), transparent 60%),
        rgba(15,28,42,.55);
    }
    .win-left{ min-width:0; }
    .win-left .ticketno{
      font-weight:1000;
      color:#fff;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .win-left .meta{
      margin-top:2px;
      color:var(--muted);
      font-size:11px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .win-amt{
      flex:0 0 auto;
      font-weight:1000;
      color: var(--limeA);
      text-shadow: 0 0 18px rgba(107,255,142,.10);
    }
    
    .win-actions{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      margin-top:12px;
    }


  /* Responsive switching */
  @media (max-width: 992px){
    .sidebar{ display:none; }
    .appbar, .bottom-nav{ display:block; }
    .main{
      padding:14px;
      padding-top:calc(14px + var(--appbar-h) + var(--safe-top));
      padding-bottom:calc(14px + var(--bnav-h) + var(--safe-bot));
    }
    .topbar{ align-items:flex-start; flex-direction:column; }
    .controls{ justify-content:flex-start; width:100%; }
    .search{ width:100%; }
  }

  /* Bootstrap modal tweak (keep your modal) */
  .modal-content.bg-transparent{ border:0; }