/* COLORS: change here */
:root{--bg:#0B1020;--gold:#D4AF37;--blue:#3B82F6;--glass:rgba(255,255,255,.06);--bd:rgba(255,255,255,.12)}
*{box-sizing:border-box;margin:0}
body{min-height:100vh;font:16px/1.5 Inter,sans-serif;color:#e8ecf8;background:linear-gradient(120deg,#0B1020,#142050,#0B1020,#1b1736);background-size:300% 300%;animation:bg 20s ease infinite,fade .6s both;overflow-x:hidden}
h1,h2,h3,.btn{font-family:Poppins,sans-serif}
.glass{background:var(--glass);border:1px solid var(--bd);border-radius:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.box{width:100%;max-width:400px;padding:32px;animation:up .7s both;box-shadow:0 0 60px rgba(59,130,246,.15)}
.box img{width:72px;display:block;margin:0 auto 12px}.box h1{text-align:center;font-size:22px;color:var(--gold);margin-bottom:4px}.box p{text-align:center;color:#9aa5c4;margin-bottom:18px;font-size:14px}
label{font-size:13px;color:#b8c1dc}
input{width:100%;padding:14px;margin:6px 0 14px;border-radius:12px;border:1px solid var(--bd);background:rgba(0,0,0,.3);color:#fff;font:inherit}
input:focus,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pw{position:relative}.pw button{position:absolute;right:6px;top:12px;background:none;border:0;color:#9aa5c4;font-size:18px;padding:6px;cursor:pointer}
.btn{position:relative;overflow:hidden;width:100%;min-height:48px;border:0;border-radius:12px;font-weight:600;font-size:15px;background:linear-gradient(135deg,var(--gold),#f0d472);color:#0B1020;cursor:pointer;transition:transform .15s,box-shadow .2s}
.btn:hover{box-shadow:0 0 24px rgba(212,175,55,.45)}.btn:active{transform:scale(.97)}.btn.g{background:var(--blue);color:#fff}.btn.sm{width:auto;padding:0 16px;min-height:42px;background:rgba(255,255,255,.1);color:#fff}
.err{color:#ff8080;min-height:22px;font-size:14px;text-align:center;margin-top:8px}
.rip{position:absolute;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rp .6s ease-out;pointer-events:none}
.spin{width:30px;height:30px;margin:12px auto 0;border:3px solid var(--bd);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite}
.wrap{max-width:1200px;margin:auto;padding:20px}
header.top{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:28px;flex-wrap:wrap}
header img{width:44px}header .t{flex:1;min-width:180px}header h2{font-size:18px}header small{color:#9aa5c4}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{--c:#3B82F6;text-align:left;color:inherit;font:inherit;padding:24px;cursor:pointer;position:relative;overflow:hidden;animation:up .6s both;transition:transform .25s,box-shadow .25s,border-color .25s;min-height:220px;display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 14px 40px color-mix(in srgb,var(--c) 40%,transparent)}
.card img{width:64px;height:64px;margin-bottom:14px;transition:transform .25s}.card:hover img{transform:scale(1.12)}
.card h3{font-size:18px;margin-bottom:6px}.card p{color:#9aa5c4;font-size:14px;flex:1}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px}.go{color:var(--c);font-weight:600;font-family:Poppins}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}.dot.off{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.add{align-items:center;justify-content:center;text-align:center;border-style:dashed}.plus{font-size:44px;color:var(--gold)}
#viewer{position:fixed;inset:0;z-index:9;background:var(--bg);display:flex;flex-direction:column;animation:fade .3s}
.bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bd)}iframe{flex:1;width:100%;border:0;background:#fff}
dialog{margin:auto;padding:24px;max-width:420px;color:#e8ecf8;background:#141b34;border:1px solid var(--bd);border-radius:20px}dialog::backdrop{background:rgba(0,0,0,.6)}
body.lock .wrap{visibility:hidden}[hidden]{display:none!important}
@keyframes bg{50%{background-position:100% 50%}}@keyframes fade{from{opacity:0}}@keyframes up{from{opacity:0;transform:translateY(24px)}}@keyframes rp{to{transform:scale(10);opacity:0}}@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}