*{box-sizing:border-box}
:root{--red:#e50914;--red2:#ff2432;--bg:#070a0f;--panel:rgba(11,15,23,.94);--line:rgba(255,255,255,.13)}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg) url("./background.svg") center top / cover fixed no-repeat;color:#fff}
body{min-height:100vh;overflow-x:hidden;position:relative;background-color:#06090e;background-image:url("./background.svg");background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(2,5,9,.10) 0%,rgba(2,5,9,.20) 42%,rgba(7,10,15,.48) 100%);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 50% 12%,rgba(28,42,60,.08),transparent 45%);pointer-events:none}
.backdrop{display:none}
.topbar{width:min(1120px,92%);height:74px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800}.brand b,.top-note b{color:#ff2735}.n-logo{font-family:Arial Black,Impact,sans-serif;font-size:39px;line-height:1;color:var(--red);letter-spacing:-5px;text-shadow:0 5px 18px rgba(229,9,20,.25)}.top-note{font-size:12px;color:#c8c8c8}.wrap{position:relative;z-index:1;width:min(1120px,92%);margin:auto;padding:42px 0 28px}.hero{text-align:center;margin-bottom:34px}.badge{display:inline-flex;padding:7px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.045);font-size:10px;font-weight:900;letter-spacing:.15em;color:#ff6971}.hero h1{font-size:clamp(43px,6vw,72px);line-height:.98;margin:17px 0 16px;letter-spacing:-.055em;text-shadow:0 8px 35px rgba(0,0,0,.65)}.hero h1 span{color:#ff1d2a}.hero p{margin:0;color:#c1c5cb;font-size:15px;line-height:1.55}.device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:920px;margin:0 auto}.device-card{position:relative;text-align:center;padding:30px 28px 25px;border-radius:19px;background:linear-gradient(145deg,rgba(16,20,30,.97),rgba(8,11,17,.97));border:1px solid rgba(255,32,45,.7);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 26px rgba(229,9,20,.08);overflow:hidden}.device-card:before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;background:linear-gradient(120deg,rgba(255,35,49,.8),transparent 35%,transparent 70%,rgba(255,35,49,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.device-icon{width:62px;height:62px;margin:0 auto 17px;border:3px solid #f2f5f8;border-radius:10px;position:relative;filter:drop-shadow(0 0 8px rgba(255,255,255,.08))}.pc-icon:before{content:"";position:absolute;left:10px;right:10px;top:9px;height:30px;border:2px solid #f2f5f8;border-radius:4px}.pc-icon:after{content:"";position:absolute;width:26px;height:3px;left:15px;bottom:9px;background:#f2f5f8;border-radius:3px}.phone-icon{width:42px;border-radius:9px}.phone-icon:before{content:"";position:absolute;inset:6px 5px;border:2px solid #f2f5f8;border-radius:4px}.phone-icon:after{content:"";position:absolute;width:5px;height:3px;left:50%;bottom:8px;transform:translateX(-50%);background:#f2f5f8;border-radius:3px}.device-card h2{font-size:23px;margin:0 0 8px;letter-spacing:-.02em}.device-card>p{color:#b8bdc5;font-size:12px;line-height:1.45;margin:0 0 24px}.primary{width:100%;height:50px;border:0;border-radius:28px;background:linear-gradient(180deg,#ff3a46,#ed0d1b);color:#fff;font-size:13px;font-weight:950;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 28px rgba(229,9,20,.28);transition:transform .2s,filter .2s,box-shadow .2s}.primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 34px rgba(229,9,20,.38)}.primary:disabled{opacity:.7;cursor:wait;transform:none}.button-icon{font-size:18px;vertical-align:-2px;margin-right:5px}.status{min-height:19px;margin-top:9px;font-size:12px;color:#aeb4bd}.status.ok{color:#61e49a}.status.err{color:#ff727a}.notice{margin-top:15px;padding:12px 13px;border-radius:11px;background:rgba(23,31,43,.8);border:1px solid rgba(255,255,255,.04);color:#8f98a5;font-size:10px;line-height:1.4}footer{text-align:center;color:#646b75;font-size:10px;margin-top:30px;padding-bottom:8px}
/* Admin page compatibility */
.card{background:rgba(18,18,18,.9);border:1px solid #272727;border-radius:20px;padding:28px;box-shadow:0 22px 70px rgba(0,0,0,.35);backdrop-filter:blur(16px)}.icon{width:64px;height:64px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:var(--red);font-size:38px;font-weight:900;box-shadow:0 12px 35px rgba(229,9,20,.25)}h2{margin:0 0 8px;font-size:23px}label{display:block;margin:17px 0 7px;color:#bbb;font-size:13px;font-weight:700}input,textarea{width:100%;border:1px solid #303030;background:#0c0c0c;color:#fff;border-radius:13px;padding:13px 14px;outline:none;font:inherit}textarea{resize:vertical;min-height:190px;line-height:1.6}input:focus,textarea:focus{border-color:var(--red)}.ghost,.danger{border:0;border-radius:13px;padding:14px 18px;font-weight:900;cursor:pointer}.ghost{background:#242424;color:#fff}.danger{margin-top:18px;background:#2a1112;color:#ff7b81}.hidden{display:none}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.row{display:flex;gap:14px;align-items:center}.between{justify-content:space-between}.count{font-size:12px;color:#aaa;border:1px solid #303030;border-radius:999px;padding:6px 9px}.list{margin-top:18px;display:grid;gap:10px;max-height:540px;overflow:auto}.item{border:1px solid #292929;background:#0c0c0c;border-radius:13px;padding:12px}.item-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ddd;font-size:12px}.time{color:#777;font-size:11px;margin-top:6px}.del{background:#281012;color:#ff7b81;border:0;border-radius:9px;padding:7px 9px;cursor:pointer}
@media(max-width:760px){.topbar{height:64px}.top-note{display:none}.brand{font-size:15px}.n-logo{font-size:33px}.backdrop{grid-template-columns:repeat(3,1fr);opacity:.17}.poster{height:330px}.poster:nth-child(n+4){display:none}.wrap{padding-top:32px}.hero{margin-bottom:25px}.hero h1{font-size:44px}.hero p{font-size:13px}.device-grid,.grid{grid-template-columns:1fr;gap:16px}.device-card{padding:25px 20px}.card{padding:21px}}
.primary.unavailable,.primary:disabled{background:linear-gradient(180deg,#343434,#242424);box-shadow:none;color:#858585;cursor:not-allowed;opacity:1}.empty-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(9px)}.empty-modal.hidden{display:none}.empty-box{width:min(430px,100%);padding:30px 26px;border-radius:22px;text-align:center;background:linear-gradient(145deg,#181818,#0d0d0d);border:1px solid rgba(229,9,20,.55);box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 35px rgba(229,9,20,.1)}.empty-symbol{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:rgba(229,9,20,.15);border:1px solid rgba(229,9,20,.5);color:#ff4d57;font-size:25px;font-weight:900}.empty-box h3{margin:0 0 9px;font-size:23px}.empty-box p{margin:0 0 21px;color:#aaa;line-height:1.55;font-size:14px}.empty-box .primary{max-width:220px}

/* Final feature update */
body {
  background-image: linear-gradient(rgba(3,6,12,.62), rgba(3,6,12,.82)), url('./background.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
.device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-icon { position: relative; width: 54px; height: 40px; border: 3px solid currentColor; border-radius: 7px; }
.tv-icon:after { content:""; position:absolute; left:50%; bottom:-10px; width:22px; height:3px; transform:translateX(-50%); background:currentColor; border-radius:3px; }
.hint { padding:12px; border-radius:10px; background:rgba(255,255,255,.06); line-height:1.7; }
.admin-notice { line-height:1.7; }
.vip-modal, .empty-modal {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); backdrop-filter:blur(6px); padding:20px;
}
.vip-modal.hidden, .empty-modal.hidden { display:none; }
.vip-box, .empty-box {
  position:relative; width:min(480px,100%); padding:30px; border-radius:20px;
  background:rgba(16,20,29,.98); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.5); text-align:center;
}
.vip-badge { display:inline-block; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.08em; background:rgba(229,9,20,.18); }
.vip-box h2 { margin:14px 0 8px; }
.vip-box p { color:#c7ccd6; line-height:1.6; }
.modal-close { position:absolute; right:12px; top:10px; border:0; background:transparent; color:#fff; font-size:30px; cursor:pointer; }
.vip-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.vip-btn { display:flex; justify-content:center; align-items:center; padding:13px 10px; border-radius:10px; text-decoration:none; color:#fff; font-weight:800; font-size:13px; }
.telegram { background:#229ed9; }
.whatsapp { background:#25d366; }
@media (max-width: 900px) {
  .device-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .vip-actions { grid-template-columns:1fr; }
}

/* Cara Pakai */
.howto-wrap{display:flex;justify-content:center;margin:24px auto 0}
.howto-btn{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:13px 20px;background:rgba(18,18,18,.82);color:#fff;font-size:12px;font-weight:900;letter-spacing:.03em;cursor:pointer;box-shadow:0 12px 35px rgba(0,0,0,.25);transition:transform .2s,background .2s,border-color .2s}
.howto-btn:hover{transform:translateY(-2px);background:rgba(35,35,35,.95);border-color:rgba(255,39,53,.6)}
.howto-icon{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:50%;background:#ff1d2a;color:#fff;font-size:13px}
.howto-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.76);backdrop-filter:blur(10px)}
.howto-modal.hidden{display:none}
.howto-box{position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;padding:30px 27px 25px;border-radius:22px;background:linear-gradient(145deg,#181818,#0d0d0d);border:1px solid rgba(229,9,20,.55);box-shadow:0 30px 100px rgba(0,0,0,.7)}
.howto-box h2{font-size:28px;margin:0 0 18px}
.howto-section{padding:15px 16px;margin:10px 0;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.howto-section h3{margin:0 0 7px;font-size:15px}
.howto-section p,.howto-section li{color:#b7bcc4;font-size:13px;line-height:1.55}
.howto-section p{margin:0}
.howto-section ol{margin:7px 0 0;padding-left:20px}
.howto-section.fail{border-color:rgba(255,39,53,.22)}
.howto-close-btn{margin-top:8px;max-width:220px;display:block;margin-left:auto;margin-right:auto}