@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--gold:#ffc928;--gold2:#e6a900;--gold3:#ffe37a;--bg:#080909;--panel:#111212;--line:rgba(255,200,35,.55);--muted:#b8b8b8}
*{box-sizing:border-box}
body{margin:0;background:#080909;color:#f4f4f4;font-family:Inter,Arial,sans-serif;font-size:14px;background-image:radial-gradient(ellipse at 78% 18%,rgba(139,91,0,.12),transparent 35%),linear-gradient(135deg,#090909,#101010 55%,#080808)}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:252px;flex:0 0 252px;min-height:100vh;position:fixed;inset:0 auto 0 0;z-index:20;overflow:hidden;background:linear-gradient(145deg,#151515,#080808 65%);border-right:1px solid #b98a16;box-shadow:inset -1px 0 12px rgba(255,190,20,.18),8px 0 28px #000}
.brand{height:151px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,201,40,.16);position:relative}
.brand:after{content:"";position:absolute;width:230px;height:130px;top:-65px;border:1px solid rgba(255,196,35,.22);border-radius:50%;box-shadow:0 0 20px rgba(255,185,0,.12)}
.brand-crown{font-size:62px;line-height:1;color:#ffd54b;text-shadow:0 0 15px #d18c00,2px 3px 2px #6d4300}
.brand-name{font-size:25px;font-weight:900;letter-spacing:-.7px;color:#ffda58;text-shadow:0 0 10px rgba(255,190,0,.5)}
.nav-menu{padding:12px 7px;position:relative;z-index:1}
.nav-item{height:57px;display:flex;align-items:center;gap:18px;padding:0 22px;color:#eee;text-decoration:none;font-size:15px;border:1px solid transparent;border-radius:10px;margin:2px 0;transition:.2s}
.nav-icon{width:25px;text-align:center;color:#ffd044;font-size:27px;font-weight:700;line-height:1;text-shadow:0 0 8px rgba(255,193,0,.35)}
.nav-item.active{background:linear-gradient(100deg,#ffcf24,#b87a00);border-color:#ffdc54;color:#211600;font-weight:700;box-shadow:0 0 15px rgba(255,190,0,.55),inset 0 1px rgba(255,255,255,.3)}
.nav-item.active .nav-icon{color:#fff0a4;text-shadow:0 1px 3px #704600}
.nav-item:not(.active):hover{background:#25221a;border-color:rgba(255,197,36,.35)}
.sidebar-art{position:absolute;bottom:-80px;left:-50px;width:360px;height:220px;transform:rotate(-28deg);border-top:2px solid rgba(255,184,0,.45);border-bottom:1px solid rgba(255,184,0,.25);box-shadow:0 -8px 20px rgba(255,183,0,.08)}
.sidebar-art:after{content:"";position:absolute;top:20px;left:0;width:100%;border-top:1px solid rgba(255,184,0,.35)}
.main-area{margin-left:252px;width:calc(100% - 252px);min-width:0}
.topbar{height:86px;border:1px solid rgba(255,195,30,.45);border-left:0;border-radius:0 0 0 20px;display:flex;align-items:center;justify-content:space-between;padding:0 25px 0 58px;background:linear-gradient(90deg,#111,#090909);box-shadow:0 4px 22px rgba(0,0,0,.5);position:relative;z-index:5}
.admin-title{display:flex;align-items:center;gap:18px;color:#ffd54a;font-size:22px;font-weight:800}
.shield{width:36px;height:40px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe879,#d89a00);clip-path:polygon(50% 0,94% 18%,88% 70%,50% 100%,12% 70%,6% 18%);color:#211600;font-size:20px}
.admin-profile{display:flex;align-items:center;gap:13px;border:1px solid #34302a;border-radius:30px;background:#090909;color:#fff;padding:5px 14px 5px 5px;min-width:194px;text-align:left}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#ffe08a;font-size:29px;background:radial-gradient(circle at 40% 35%,#ffdf6b,#bd8000 65%,#4b3100);border:2px solid #d6a51e;box-shadow:0 0 10px #a97900}
.profile-copy{display:flex;flex-direction:column;gap:2px;font-size:16px}.profile-copy small{font-size:13px;color:#ddd}.profile-copy i{display:inline-block;width:10px;height:10px;background:#00d52b;border-radius:50%;margin-right:4px;box-shadow:0 0 7px #00d52b}.chevron{margin-left:auto;color:#ffd44b;font-size:23px}
.mobile-menu{display:none}
.content{padding:29px 20px 24px;max-width:1600px;margin:auto}
.hero-banner{height:119px;border:1px solid #ffdc43;border-radius:12px;overflow:hidden;display:flex;align-items:center;padding:15px 22px;position:relative;background:linear-gradient(100deg,#ffca16 0%,#f6b900 48%,#a96c00 100%);color:#171000;box-shadow:0 0 16px rgba(255,190,0,.22),inset 0 1px rgba(255,255,255,.6)}
.hero-banner:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 40%,rgba(255,255,255,.35),transparent 22%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.16),transparent 72%);pointer-events:none}
.hero-icon{font-size:67px;line-height:1;margin-right:20px;filter:drop-shadow(2px 4px 2px #885200);z-index:1}
.hero-copy{z-index:1}.hero-copy h1{font-size:34px;line-height:1.15;margin:0 0 7px;font-weight:900;letter-spacing:-1px}.hero-copy p{font-size:17px;margin:0;color:#211800}
.hero-treasure{position:absolute;right:12px;top:-30px;width:38%;height:180px;opacity:.85;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff0a2;text-shadow:0 4px 5px #8b5100}
.hero-crown{font-size:100px;filter:drop-shadow(0 4px 3px #7b4a00)}.coin{font-size:48px;color:#ffe06a;text-shadow:0 0 9px #fff1a6,2px 4px #925500}.coin-one{transform:translateY(25px) rotate(-20deg)}.coin-two{font-size:34px;transform:translateY(48px)}.coin-three{transform:translateY(35px) rotate(20deg)}
.top-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr);gap:19px;margin-top:17px}
.panel{background:linear-gradient(145deg,rgba(26,26,26,.98),rgba(9,10,10,.98));border:1px solid var(--line);border-radius:13px;box-shadow:0 0 12px rgba(255,180,0,.07),inset 0 1px rgba(255,255,255,.035);overflow:hidden}
.form-panel{min-height:376px}.panel-heading{height:56px;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:19px}.panel-heading>span{font-size:27px;color:#ffcf36}.panel-heading h2{font-size:19px;margin:0;font-weight:700}.gold-heading{color:#ffda51}.gold-heading>span{color:#ffca25}
#jackpotForm{padding:16px 18px 12px}
.form-row{display:grid;grid-template-columns:39% 61%;align-items:center;gap:8px;margin-bottom:14px;min-width:0}
.form-row label{font-size:16px;color:#f0f0f0}
.input-wrap{height:43px;display:flex;align-items:center;position:relative;border:1px solid #b88a18;border-radius:10px;background:linear-gradient(90deg,#25231c,#090909 24%);overflow:hidden;box-shadow:inset 0 1px 5px #000}
.input-icon{height:100%;min-width:44px;display:grid;place-items:center;color:#ffd449;font-size:23px;border-right:1px solid rgba(255,203,45,.25);font-weight:700}
.input-wrap input,.input-wrap select{width:100%;height:100%;border:0;outline:0;background:transparent;color:#f7f7f7;padding:0 12px;font-size:14px;min-width:0}
.input-wrap input::placeholder{color:#999}.input-wrap select{appearance:none;padding-right:30px}.input-wrap select option{background:#171717;color:#fff}.select-arrow{position:absolute;right:11px;color:#ffcf36;font-size:21px;pointer-events:none}
.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}
.btn{height:52px;border-radius:11px;font-weight:800;font-size:15px;border:1px solid transparent;box-shadow:inset 0 1px rgba(255,255,255,.25);transition:.18s}
.btn span{font-size:23px;vertical-align:-2px;margin-right:7px}
.btn-gold{background:linear-gradient(110deg,#ffd32a,#eaa900);color:#171000;border-color:#ffe26b;text-shadow:0 1px rgba(255,255,255,.2)}.btn-gold:hover{filter:brightness(1.12);box-shadow:0 0 14px rgba(255,198,30,.35)}
.btn-reset{background:linear-gradient(#343434,#1d1d1d);color:#f4f4f4;border-color:#aaa}.btn-reset:hover{background:#414141}
.form-hint{margin:9px 0 0;color:#888;font-size:11px;min-height:13px}
.info-panel{min-height:376px}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:8px 19px 20px}
.stat-card{height:171px;border:1px solid;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:linear-gradient(145deg,rgba(40,32,13,.9),rgba(12,12,12,.95));min-width:0}
.stat-gold{border-color:#c99a19;box-shadow:inset 0 0 24px rgba(255,183,0,.08)}.stat-blue{border-color:#4296d5;background:linear-gradient(145deg,#142232,#0c1016);box-shadow:inset 0 0 20px rgba(34,139,226,.08)}.stat-green{border-color:#b8a324;background:linear-gradient(145deg,#24250e,#10120d)}
.stat-icon{font-size:43px;line-height:1;color:#ffca27;text-shadow:0 0 12px rgba(255,198,0,.5)}.stat-blue .stat-icon{color:#3fa5f7}.stat-green .stat-icon{color:#e9c92b}
.stat-label{font-size:16px;text-align:center;white-space:nowrap}.stat-card strong{font-size:23px;color:#ffd21e;white-space:nowrap}.stat-blue strong{color:#48adff}.stat-green strong{color:#42e943;font-size:21px}
.history-heading{height:60px;border-top:1px solid rgba(255,194,28,.4);border-bottom:1px solid rgba(255,194,28,.25);display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#ffda4b;font-size:17px;font-weight:700}.history-heading>div span{font-size:25px;margin-right:10px}.history-heading button{background:#111;border:1px solid #c69a22;border-radius:10px;color:#fff;padding:8px 13px;font-size:13px}.history-heading button b{color:#ffd348;font-size:20px;margin-left:8px}.history-list{padding:0 16px;max-height:88px;overflow:auto}.history-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #292929;font-size:12px;color:#ddd}.history-item strong{color:#ffd34a}.history-item small{color:#888}.empty-history{height:58px;display:grid;place-items:center;color:#777;font-size:12px}
.table-panel{margin-top:18px}
.table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 17px;border-bottom:1px solid rgba(255,195,30,.2)}
.table-title{font-weight:800;color:#ffdb50;letter-spacing:.6px}
.search-box{height:34px;display:flex;align-items:center;gap:8px;border:1px solid #765d20;border-radius:8px;padding:0 10px;background:#0c0c0c;color:#ffcf3e}.search-box span{font-size:21px}.search-box input{border:0;outline:0;background:transparent;color:#fff;width:210px;font-size:12px}.search-box input::placeholder{color:#888}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
thead{background:linear-gradient(100deg,#ffd02b,#e9ad08)}th{height:50px;color:#161000;font-size:15px;font-weight:800;text-align:center;border-right:1px solid rgba(100,67,0,.18);padding:0 10px;white-space:nowrap}
td{height:44px;text-align:center;padding:7px 10px;border-right:1px solid #343434;border-bottom:1px solid #383838;color:#eee;font-size:14px;white-space:nowrap}
tbody tr:nth-child(odd){background:#101010}tbody tr:nth-child(even){background:#202020}tbody tr:hover{background:#302818}
.status-pill{display:inline-block;min-width:66px;padding:5px 11px;border-radius:18px;font-size:12px;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.25)}
.status-Aktif,.status-Berhasil{background:linear-gradient(#16b83b,#087b22);border:1px solid #20d94d}.status-Nonaktif,.status-Ditolak{background:linear-gradient(#e53b32,#a81515);border:1px solid #fa5b50}.status-Pending{background:linear-gradient(#e99b16,#a75a00);border:1px solid #ffc04c}
.row-actions{display:flex;justify-content:center;gap:8px}.action-btn{width:36px;height:34px;border:0;border-radius:8px;color:#fff;font-size:17px;box-shadow:inset 0 1px rgba(255,255,255,.25)}.edit-btn{background:linear-gradient(#1685ff,#0053c8)}.delete-btn{background:linear-gradient(#f34b43,#bd1717)}.action-btn:hover{filter:brightness(1.2)}
.empty-table{height:110px;color:#888;text-align:center}
.table-footer{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#bdbdbd;font-size:13px}
.pagination{display:flex;align-items:center;gap:9px}.pagination button{width:39px;height:38px;border-radius:8px;border:1px solid #555;background:linear-gradient(#333,#171717);color:#fff;font-size:24px;line-height:1}.pagination button:disabled{opacity:.35;cursor:not-allowed}.pagination span{height:37px;min-width:39px;display:grid;place-items:center;background:linear-gradient(#ffd42b,#e6a700);border-radius:8px;color:#1b1300;font-weight:800}
.footer-note{text-align:center;color:#686868;font-size:11px;padding:18px 0 2px}.footer-note span{color:#b68a1a;margin:0 6px}
.toast{position:fixed;right:24px;bottom:24px;z-index:50;background:#151515;border:1px solid #d7a91c;color:#ffe17a;padding:13px 18px;border-radius:10px;box-shadow:0 8px 28px #000;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}
.sidebar-overlay{display:none}
@media(max-width:1150px){.sidebar{width:220px;flex-basis:220px}.main-area{margin-left:220px;width:calc(100% - 220px)}.top-grid{grid-template-columns:1fr}.form-panel,.info-panel{min-height:auto}.info-panel{padding-bottom:4px}.stats-grid{padding-top:14px}.content{padding:22px 16px}.hero-copy h1{font-size:29px}}
@media(max-width:700px){.sidebar{transform:translateX(-105%);transition:transform .25s;width:260px}.sidebar.open{transform:translateX(0)}.sidebar-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:19}.main-area{margin-left:0;width:100%}.topbar{height:68px;padding:0 13px;border-left:1px solid rgba(255,195,30,.4);border-radius:0}.mobile-menu{display:block;background:transparent;border:0;color:#ffd44a;font-size:25px;padding:4px 8px}.admin-title{font-size:16px;gap:9px;margin-right:auto;margin-left:8px}.shield{width:28px;height:31px;font-size:16px}.admin-profile{min-width:0;padding:3px 8px 3px 3px;gap:7px}.avatar{width:37px;height:37px;font-size:21px}.profile-copy{font-size:13px}.profile-copy small{font-size:10px}.chevron{font-size:18px}.content{padding:15px 11px}.hero-banner{height:auto;min-height:105px;padding:14px 12px}.hero-icon{font-size:45px;margin-right:10px}.hero-copy h1{font-size:20px;letter-spacing:-.5px}.hero-copy p{font-size:11px;line-height:1.4;max-width:270px}.hero-treasure{right:-30px;width:34%;opacity:.35}.hero-crown{font-size:70px}.coin{font-size:28px}.top-grid{gap:12px;margin-top:12px}.panel-heading{height:49px;padding:0 12px}.panel-heading h2{font-size:16px}.panel-heading>span{font-size:23px}#jackpotForm{padding:13px 12px 10px}.form-row{grid-template-columns:1fr;gap:6px;margin-bottom:11px}.form-row label{font-size:13px}.input-wrap{height:42px}.form-actions{margin-top:15px;gap:8px}.btn{height:47px;font-size:12px}.btn span{font-size:19px;margin-right:4px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:12px 9px 14px}.stat-card{height:125px;gap:5px;border-radius:9px}.stat-icon{font-size:30px}.stat-label{font-size:10px;white-space:normal;min-height:24px;display:grid;place-items:center}.stat-card strong{font-size:14px}.stat-green strong{font-size:12px}.history-heading{height:53px;padding:0 10px;font-size:12px}.history-heading>div span{font-size:19px;margin-right:4px}.history-heading button{font-size:10px;padding:7px 8px}.table-panel{margin-top:12px}.table-toolbar{padding:10px;gap:8px;flex-wrap:wrap}.table-title{font-size:12px}.search-box{height:31px;margin-left:auto}.search-box input{width:155px}.table-footer{padding:0 10px;font-size:11px}.pagination button{width:33px;height:33px}.pagination span{height:33px;min-width:33px}.footer-note{font-size:9px}}
@media(max-width:390px){.admin-title{font-size:14px}.profile-copy{display:none}.admin-profile{border:0;background:transparent}.hero-copy h1{font-size:17px}.hero-icon{font-size:39px}.stats-grid{gap:5px}.stat-card strong{font-size:12px}.stat-green strong{font-size:10px}.stat-label{font-size:9px}}


/* === PORTRAIT: KEEP THE DESKTOP LANDSCAPE COMPOSITION === */
@media (max-width: 700px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background: #080909;
  }
  .app-shell {
    width: 1200px !important;
    min-width: 1200px !important;
    display: flex !important;
    align-items: stretch !important;
    transform: scale(var(--portrait-fit, .327)) !important;
    transform-origin: top left !important;
  }
  .sidebar {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 252px !important;
    min-width: 252px !important;
    height: 100% !important;
    min-height: 100% !important;
    transform: none !important;
    display: block !important;
    z-index: 20 !important;
  }
  .sidebar-overlay, .mobile-menu { display: none !important; }
  .main-area {
    width: 948px !important;
    min-width: 948px !important;
    margin-left: 252px !important;
  }
  .topbar {
    height: 86px !important;
    padding: 0 25px 0 58px !important;
    border-radius: 0 0 0 20px !important;
  }
  .admin-title { font-size: 22px !important; gap: 18px !important; margin: 0 !important; }
  .shield { width: 36px !important; height: 40px !important; font-size: 20px !important; }
  .admin-profile { min-width: 194px !important; padding: 5px 14px 5px 5px !important; gap: 13px !important; }
  .avatar { width: 48px !important; height: 48px !important; font-size: 29px !important; }
  .profile-copy { display: flex !important; font-size: 16px !important; }
  .profile-copy small { font-size: 13px !important; }
  .content { padding: 29px 20px 24px !important; max-width: none !important; }
  .hero-banner { height: 119px !important; min-height: 119px !important; padding: 15px 22px !important; }
  .hero-icon { font-size: 67px !important; margin-right: 20px !important; }
  .hero-copy h1 { font-size: 34px !important; }
  .hero-copy p { font-size: 17px !important; max-width: none !important; }
  .hero-treasure { right: 12px !important; width: 38% !important; opacity: .85 !important; }
  .top-grid {
    display: grid !important;
    grid-template-columns: minmax(0,.92fr) minmax(0,1.25fr) !important;
    gap: 19px !important;
    margin-top: 17px !important;
  }
  .form-panel, .info-panel { min-height: 376px !important; }
  #jackpotForm { padding: 16px 18px 12px !important; }
  .form-row {
    display: grid !important;
    grid-template-columns: 39% 61% !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .form-row label { font-size: 16px !important; }
  .input-wrap { height: 43px !important; }
  .input-wrap input, .input-wrap select { font-size: 14px !important; }
  .form-actions { grid-template-columns: 1fr 1fr !important; gap: 13px !important; margin-top: 20px !important; }
  .btn { height: 52px !important; font-size: 15px !important; }
  .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 18px !important; padding: 8px 19px 20px !important; }
  .stat-card { height: 171px !important; }
  .stat-icon { font-size: 43px !important; }
  .stat-label { font-size: 16px !important; white-space: nowrap !important; }
  .stat-card strong { font-size: 23px !important; }
  .stat-green strong { font-size: 21px !important; }
  .history-heading { height: 60px !important; padding: 0 16px !important; font-size: 17px !important; }
  .history-heading button { font-size: 13px !important; padding: 8px 13px !important; }
  .table-panel { margin-top: 18px !important; }
  .table-toolbar { padding: 12px 17px !important; flex-wrap: nowrap !important; }
  .table-title { font-size: 14px !important; }
  .search-box { height: 34px !important; margin-left: 0 !important; }
  .search-box input { width: 220px !important; }
  .table-footer { height: 58px !important; padding: 0 16px !important; font-size: 13px !important; }
  .pagination button { width: 39px !important; height: 38px !important; }
  .pagination span { height: 37px !important; min-width: 39px !important; }
  .footer-note { font-size: 11px !important; }
}