@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#081426;--navy2:#0d2038;--panel:#10243b;--panel2:#142b45;--line:#263d57;--blue:#1675f9;--cyan:#62d8ff;--gold:#f8c96a;--text:#f2f7ff;--muted:#91a5bd;--green:#48dfa0;--danger:#ff7e8a}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;background:#f3f6fb;color:#18283d}button,input,textarea,select{font:inherit}button{cursor:pointer;transition:transform .15s,background .15s,border-color .15s}button:disabled{opacity:.45;cursor:not-allowed}.hidden{display:none!important}.topbar{height:76px;background:#0a172a;color:white;display:flex;align-items:center;gap:14px;padding:0 clamp(18px,4vw,64px);border-bottom:1px solid #20364e}.brand-mark{height:39px;width:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2388ff,#5bd5ff);color:#06172a;font-size:25px;font-weight:800;box-shadow:0 5px 20px #1683ff44}.topbar b,.display-brand b{display:block;letter-spacing:1.5px;font:800 13px Manrope,sans-serif}.topbar small,.display-brand small{display:block;color:#91a5bd;font-size:10px;letter-spacing:2px;margin-top:4px}.top-spacer{flex:1}.ghost-link{color:#dceaff;text-decoration:none;font-size:13px;padding:10px 14px;border:1px solid #344b65;border-radius:9px}.live-pill{display:flex;align-items:center;gap:8px;border:1px solid #245646;border-radius:30px;padding:8px 12px;font-size:10px;letter-spacing:1px;color:#9af3c8;background:#0b2d2b}.live-pill i{width:7px;height:7px;border-radius:50%;background:#47e7a2;box-shadow:0 0 10px #47e7a2;animation:pulse 1.6s infinite}.admin-layout{max-width:1440px;margin:30px auto;padding:0 22px 36px;display:grid;grid-template-columns:minmax(340px,.88fr) minmax(420px,1.12fr);gap:22px;align-items:start}.panel{background:white;border:1px solid #e0e8f1;border-radius:16px;box-shadow:0 8px 30px #1a3b5c08;padding:26px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:24px}.section-heading h1,.section-heading h2{font:800 23px Manrope,sans-serif;margin:4px 0 7px;color:#10223a}.section-heading h2{font-size:21px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#2679df;margin:0 0 8px}.muted{color:#8292a7;font-size:12px;line-height:1.6;margin:0}.btn{border-radius:9px;padding:10px 13px;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap}.btn-quiet{background:#f5f8fc;border-color:#e1e8f1;color:#51647b}.btn-primary{background:linear-gradient(110deg,#1267e8,#178af7);color:#fff;box-shadow:0 6px 15px #1478f52b}.btn-primary:hover{background:linear-gradient(110deg,#075bd6,#0678e8);transform:translateY(-1px)}.btn-full{width:100%;padding:15px;margin-top:9px}.btn-full span{float:right}.btn-outline{background:white;border-color:#dbe5f0;color:#3c5a79}.btn-danger-ghost{background:#fff7f7;color:#c94c5c;border-color:#f7d9dd}.field{margin:0 0 20px}.field label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#30455e;margin-bottom:9px}.field input:not([type=range]),.field textarea,.field select{width:100%;padding:12px 13px;border:1px solid #dbe5f0;border-radius:9px;background:#fbfcfe;color:#1a2c43;outline:none;font-size:13px}.field input:focus,.field textarea:focus,.field select:focus{border-color:#2684f7;box-shadow:0 0 0 3px #1681f51a}.field textarea{resize:vertical;line-height:1.7}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.segmented{display:flex;gap:7px;background:#f2f6fb;padding:4px;border-radius:10px}.segmented button{flex:1;border:1px solid transparent;border-radius:7px;background:transparent;padding:10px 7px;color:#63758a;font-size:12px;font-weight:600}.segmented button.active{background:#fff;border-color:#dce7f2;color:#126be6;box-shadow:0 2px 5px #163a5c0a}.range-wrap{display:flex;align-items:center;gap:14px}.range-wrap input{flex:1;accent-color:#1675f9}.range-wrap b{font-size:12px;color:#176ee3;min-width:40px}.hint{font-size:11px;line-height:1.6;color:#8a9aae;margin:12px 0 0}.session-banner{display:flex;align-items:center;gap:11px;background:#effaf5;border:1px solid #ccefe0;padding:15px;border-radius:11px;margin-bottom:20px}.session-banner b,.session-banner small{display:block}.session-banner b{font-size:13px;color:#176b4e}.session-banner small{font-size:11px;color:#568574;margin-top:4px}.status-dot{width:8px;height:8px;border-radius:50%;background:#36c78a;box-shadow:0 0 0 4px #36c78a20;flex-shrink:0}.badge,.count-badge{margin-left:auto;border-radius:20px;background:#e6f2ff;color:#176bd6;padding:7px 10px;font-size:10px;font-weight:700;white-space:nowrap}.config-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.summary-cell{padding:13px;border:1px solid #e6edf5;border-radius:10px}.summary-cell small{display:block;color:#8393a7;font-size:10px;margin-bottom:6px}.summary-cell b{font-size:14px;color:#172d48}.btn-run{padding:18px;font-size:14px;letter-spacing:.6px}.btn-run.running{background:linear-gradient(100deg,#e09a27,#e45c4b);box-shadow:0 6px 20px #e77c3440}.action-row{display:flex;gap:10px;margin-top:16px}.action-row button{flex:1}.table-wrap{overflow:auto;border:1px solid #e7edf4;border-radius:10px}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{padding:13px 14px;background:#f7f9fc;color:#7a8ba0;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700}td{padding:13px 14px;border-top:1px solid #edf1f6;color:#344a63}td:first-child{color:#96a4b5;width:40px}.item-chip{display:inline-block;background:#edf5ff;border:1px solid #d7e8ff;color:#1269d8;padding:6px 10px;border-radius:7px;font-weight:700}.time-label{font-size:10px;color:#8190a4}.table-action{border:0;background:#fff0f1;color:#c74c5c;border-radius:6px;padding:7px 9px;font-size:11px;font-weight:700}.empty-cell{text-align:center;padding:45px 15px;color:#9aa8b9}.history-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;color:#8594a7;font-size:11px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:13px 18px;border-radius:10px;background:#122840;color:white;font-size:12px;box-shadow:0 8px 30px #07172a35;opacity:0;pointer-events:none;transition:.25s;z-index:10;max-width:calc(100% - 32px)}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Public display */.display-page{min-height:100vh;overflow-x:hidden;color:var(--text);background:radial-gradient(ellipse at 50% 22%,#15375b 0,#0b1b30 42%,#06101e 100%);position:relative}.display-glow{position:fixed;pointer-events:none;width:40vw;height:40vw;border-radius:50%;filter:blur(90px);opacity:.14}.glow-one{background:#137bff;top:-20vw;left:-10vw}.glow-two{background:#e3a938;bottom:-25vw;right:-10vw}.display-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:25px clamp(20px,5vw,76px);border-bottom:1px solid #ffffff12}.display-brand{display:flex;align-items:center;gap:13px}.display-brand .brand-mark{width:42px;height:42px}.display-main{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:clamp(28px,5vh,58px) clamp(20px,5vw,76px) 34px;text-align:center}.display-kicker{font-size:11px;font-weight:700;letter-spacing:4px;color:var(--gold)}.display-main h1{font:800 clamp(28px,4vw,54px) Manrope,sans-serif;letter-spacing:-1.5px;margin:13px 0 9px}.display-subtitle{margin:0;color:#9bb1ca;font-size:clamp(12px,1.2vw,16px)}.winner-stage{margin:34px auto 20px;min-height:clamp(210px,37vh,410px);display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;position:relative}.waiting-state{color:#a4b8ce;padding:35px}.waiting-icon{font-size:44px;color:var(--gold);animation:float 2s ease-in-out infinite}.waiting-state h2{font:700 20px Manrope,sans-serif;color:#e9f2ff;margin:14px 0 8px}.waiting-state p{font-size:13px;color:#8da4be}.waiting-pulse{display:block;width:70px;height:2px;margin:23px auto;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:shimmer 2s infinite}.winner-card{position:relative;overflow:hidden;min-width:min(220px,80vw);flex:0 1 28%;max-width:360px;padding:clamp(24px,3vw,45px) 18px;border-radius:19px;border:1px solid #d6b35e66;background:linear-gradient(150deg,#203b58,#11263f 65%,#15233a);box-shadow:0 16px 55px #0004,inset 0 1px #ffffff18;animation:reveal .6s cubic-bezier(.16,1,.3,1) both}.winner-card:before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#fff1,transparent 35%,#e7bd4b0a 75%);pointer-events:none}.winner-card .winner-label{font-size:10px;letter-spacing:2px;color:#d8b65f;font-weight:700}.winner-value{position:relative;z-index:1;font:800 clamp(40px, var(--winner-size, 7vw), 100px)/1.1 Manrope,sans-serif;letter-spacing:-3px;color:#fff;text-shadow:0 0 35px #4ba5ff2b;overflow-wrap:anywhere;margin:18px 0}.winner-card .winner-caption{font-size:11px;color:#91a9c4}.winner-card .winner-star{position:absolute;right:14px;top:12px;color:#f7cc6c;font-size:18px}.winner-stage.is-drawing .winner-card{animation:shuffle .22s linear infinite;border-color:#60cfff}.draw-status{display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;letter-spacing:.5px;color:#8ba6c2;min-height:28px}.draw-status .status-dot{background:var(--cyan);box-shadow:0 0 0 4px #62d8ff20}.display-history{margin:30px auto 0;text-align:left;max-width:1100px;border:1px solid #ffffff18;border-radius:15px;background:#0d2038a6;backdrop-filter:blur(12px);padding:20px 22px}.display-history-heading{display:flex;align-items:center;gap:15px;margin-bottom:15px}.display-history-heading .eyebrow{color:#8fb8ed;margin-bottom:5px}.display-history-heading h2{font:700 18px Manrope,sans-serif;margin:0}.winner-history-list{display:flex;gap:8px;flex-wrap:wrap;max-height:115px;overflow:auto}.history-tag{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;background:#ffffff08;border:1px solid #ffffff13;font-size:12px;color:#d9e8f8}.history-tag .tag-number{color:#7892af;font-size:10px}.history-tag b{color:#f2f7ff}.history-empty{font-size:12px;color:#8299b4;margin:3px 0}.display-footer{position:relative;z-index:1;display:flex;justify-content:space-between;padding:18px clamp(20px,5vw,76px);font-size:9px;letter-spacing:2px;color:#627b98;border-top:1px solid #ffffff0c}.display-footer span:first-child{color:#b1c5da}.confetti{position:absolute;width:7px;height:13px;top:0;left:50%;background:var(--gold);animation:confetti 1.8s ease-out forwards;pointer-events:none}@keyframes pulse{50%{opacity:.45}}@keyframes float{50%{transform:translateY(-7px) rotate(10deg)}}@keyframes shimmer{50%{opacity:.3;transform:scaleX(.6)}}@keyframes reveal{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shuffle{0%{transform:translateY(1px) rotate(-.4deg)}50%{transform:translateY(-2px) rotate(.4deg)}100%{transform:translateY(1px) rotate(0)}}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(540deg);opacity:0}}@media(max-width:900px){.admin-layout{grid-template-columns:1fr;max-width:720px}.display-main{padding-top:35px}.winner-stage{min-height:260px}.winner-card{flex-basis:42%}}@media(max-width:520px){.topbar{padding:0 14px}.topbar .live-pill{display:none}.admin-layout{padding:14px;gap:14px;margin:0 auto}.panel{padding:18px}.section-heading{flex-wrap:wrap}.two-col{grid-template-columns:1fr;gap:0}.display-header{padding:16px 18px}.display-brand b{font-size:10px}.display-brand small{font-size:8px}.display-header .live-pill{font-size:8px;padding:7px}.display-main{padding:30px 15px}.display-main h1{letter-spacing:-.5px}.winner-stage{gap:10px;margin:24px auto}.winner-card{flex-basis:44%;min-width:130px;padding:25px 9px}.winner-value{letter-spacing:-1px}.display-history{padding:15px}.display-footer{font-size:8px;letter-spacing:1px}.action-row{flex-direction:column}.section-heading h1{font-size:20px}}
/* Display audio controls */
.display-header-actions{display:flex;align-items:center;gap:12px}.sound-toggle{appearance:none;border:1px solid #ffffff30;border-radius:999px;padding:10px 14px;background:#ffffff0b;color:#d7e8fb;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}.sound-toggle:hover,.sound-toggle.sound-enabled{background:#1d6b52;border-color:#48dfa0;color:#fff}.rolling-mask{letter-spacing:8px!important;color:#8ca9c7!important;text-shadow:0 0 24px #4ba5ff35!important}@media(max-width:520px){.display-header-actions{gap:6px}.sound-toggle{font-size:9px;padding:8px 9px}.display-header-actions .live-pill{display:none}}
/* Slot kosong pada putaran terakhir live draw */
.winner-empty-slot{border-style:dashed;border-color:#ffffff28;background:linear-gradient(150deg,#17283a,#101e30);box-shadow:none;opacity:.72}.winner-empty-slot .winner-label,.winner-empty-slot .winner-caption{color:#7e91a7}.winner-empty-slot .winner-value{color:#8192a6;text-shadow:none}