:root{
  --blue:#0b5cad; --blue-d:#084a8c; --bg:#eef3f8; --card:#fff;
  --ink:#16242e; --muted:#6b7c8a; --ok:#1a9d5a; --warn:#d9772b; --err:#c8372f; --line:#e2e9f0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:480px;margin:0 auto;padding:18px 16px 40px;min-height:100vh}
.view{display:flex;flex-direction:column;gap:14px}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:.86rem}
h1{font-size:1.18rem;margin:0}
h3{margin:0 0 4px;font-size:1.04rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 1px 3px rgba(16,40,64,.05)}
.brand-card{margin-top:6vh}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--blue),#1c8fe0);
  color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.05rem;letter-spacing:.5px}

label{display:block;font-size:.9rem;font-weight:600;margin-bottom:12px}
input,select{
  width:100%;margin-top:6px;padding:13px 12px;font-size:1rem;border:1.5px solid var(--line);
  border-radius:11px;background:#fbfdff;color:var(--ink);font-weight:500;
}
input:focus,select:focus{outline:none;border-color:var(--blue);background:#fff}
.pw-wrap{position:relative}
.pw-wrap input{margin-top:0;padding-right:46px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.1rem;cursor:pointer;padding:6px}

.btn{display:block;width:100%;padding:13px;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:12px}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:active{background:var(--blue-d)}
.btn.warn{background:#fff;color:var(--warn);border:1.5px solid var(--warn)}
.btn.ghost{background:#fff;color:var(--muted);border:1.5px solid var(--line)}
.btn.small{width:auto;padding:8px 14px;font-size:.85rem;margin:0}
.btn:disabled{opacity:.55;cursor:not-allowed}

.results{margin:6px 0 0;display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto}
.result-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:12px;background:#fbfdff;cursor:pointer;transition:.12s}
.result-item:active{background:#eef5ff;border-color:var(--blue)}
.result-item .r-name{font-weight:700;color:var(--ink)}
.result-item .r-addr{font-size:.8rem;color:var(--muted)}
.results-empty{font-size:.85rem;color:var(--muted);padding:10px 2px}

.selected-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#eef5ff;border:1.5px solid #cfe2fb;border-radius:12px;padding:11px 13px;margin-bottom:12px}
.sel-info{min-width:0}
.sel-name{font-weight:700}
.selected-row .muted{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hint{font-size:.78rem;color:var(--muted);margin:10px 2px 0}
.msg{margin-top:10px;font-size:.9rem;font-weight:600;min-height:1px}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.footer-note{text-align:center;font-size:.76rem;color:var(--muted);margin-top:8px}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 2px}
.hello{font-weight:800;font-size:1.1rem}
.status-card .status-row{display:flex;align-items:center;gap:12px}
.dot{width:12px;height:12px;border-radius:50%;background:#c2ccd4;flex:none}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px rgba(26,157,90,.15)}
.dot.off{background:var(--err);box-shadow:0 0 0 4px rgba(200,55,47,.12)}
.status-title{font-weight:700}

.live-card{background:linear-gradient(135deg,#0b5cad,#1c8fe0);color:#fff;border:none}
.live-title{font-weight:700;font-size:.9rem;margin-bottom:10px;opacity:.95}
.live-rates{display:flex;gap:10px}
.live-rate{flex:1;background:rgba(255,255,255,.14);border-radius:12px;padding:10px 12px}
.live-rate span{display:block;font-size:.74rem;opacity:.9}
.live-rate b{font-size:1.18rem;font-weight:800;letter-spacing:.3px}
.usage-status{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:.86rem;font-weight:700;text-align:center;display:none}
.usage-status.show{display:block}
.usage-status.safe{background:rgba(255,255,255,.18);color:#eafff2}
.usage-status.over{background:#fff3e0;color:#b5530a;border:1px solid #ffd9a8}

.info-title{font-weight:700;margin-bottom:8px}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.info-row:last-child{border-bottom:none}
.info-row span{color:var(--muted);flex:none}
.info-row b{text-align:right;font-weight:600;word-break:break-word}

.action h3{display:flex;align-items:center;gap:6px}

.devices-card h3{display:flex;align-items:center;gap:6px}
.devices-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.dev-count{font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:2px}
.dev-item{display:flex;flex-direction:column;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fbfdff}
.dev-name{font-weight:600}
.dev-meta{font-size:.76rem;color:var(--muted);word-break:break-all}
.dev-empty{font-size:.85rem;color:var(--muted);padding:6px 2px}
.action select{margin-top:6px}

.overlay{position:fixed;inset:0;background:rgba(12,28,42,.55);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;color:#fff;font-weight:600;z-index:50;backdrop-filter:blur(2px)}
.spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);max-width:90%;
  background:#16242e;color:#fff;padding:12px 16px;border-radius:12px;font-size:.9rem;font-weight:600;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.ok{background:var(--ok)} .toast.err{background:var(--err)}

.modal{position:fixed;inset:0;background:rgba(12,28,42,.5);display:flex;align-items:center;justify-content:center;z-index:55;padding:20px}
.modal-box{background:#fff;border-radius:16px;padding:20px;max-width:360px;width:100%}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-actions .btn{margin-top:0}

/* ===================== LOGIN — TEMA TEKNOLOGI ===================== */
#view-login{ position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:24px 0; }

/* latar futuristik full-screen */
.login-bg{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, #103a6b 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 20%, #0a2f5c 0%, transparent 55%),
    linear-gradient(160deg, #060d1c 0%, #081b38 55%, #050a16 100%); }
/* grid perspektif (lantai cyber) */
.lb-grid{ position:absolute; left:-25%; right:-25%; bottom:-10%; height:75%;
  background-image:
    linear-gradient(rgba(64,160,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,160,255,.18) 1px, transparent 1px);
  background-size:46px 46px; transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom center; mask-image:linear-gradient(to top, #000 5%, transparent 80%);
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 80%);
  animation:gridmove 9s linear infinite; }
@keyframes gridmove{ from{background-position:0 0} to{background-position:0 46px} }
/* glow mengambang */
.lb-glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.lb-glow-a{ width:340px; height:340px; left:-60px; top:8%;
  background:radial-gradient(circle,#1f6bff,transparent 70%); animation:floatA 14s ease-in-out infinite; }
.lb-glow-b{ width:300px; height:300px; right:-50px; bottom:6%;
  background:radial-gradient(circle,#19c6ff,transparent 70%); animation:floatB 16s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes floatB{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,-30px)} }
/* sapuan scanline tipis */
.lb-scan{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(transparent 0%, rgba(70,170,255,.06) 50%, transparent 100%);
  background-size:100% 6px; }

/* kartu glassmorphism */
#view-login .login-card{ position:relative; z-index:1; width:min(92vw,420px); margin:0;
  background:rgba(15,28,52,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(90,170,255,.28); border-radius:22px; padding:26px 22px;
  box-shadow:0 20px 60px rgba(0,10,30,.55), 0 0 0 1px rgba(120,200,255,.06) inset,
    0 0 50px rgba(31,110,255,.18); animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardIn{ from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none} }

/* logo dgn cincin animasi */
#view-login .brand{ margin-bottom:14px; }
#view-login .brand-logo{ position:relative; width:54px; height:54px; border-radius:15px;
  background:linear-gradient(135deg,#1f6bff,#19c6ff); display:grid; place-items:center;
  box-shadow:0 0 24px rgba(31,150,255,.55); }
#view-login .brand-logo span{ font-weight:800; color:#fff; letter-spacing:.5px; font-size:1.05rem; z-index:1; }
#view-login .brand-logo::before{ content:""; position:absolute; inset:-5px; border-radius:19px;
  background:conic-gradient(from 0deg,#19c6ff,#1f6bff,#19c6ff,#1f6bff,#19c6ff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  animation:spin 4s linear infinite; opacity:.9; }
@keyframes spin{ to{transform:rotate(360deg)} }
#view-login h1{ color:#eaf3ff; font-size:1.16rem; letter-spacing:.2px; }
#view-login .muted{ color:#8fb0dd; }
.login-tagline{ font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:#5fd0ff;
  margin:-4px 0 16px; font-weight:700; }

/* label & input neon */
#view-login label{ color:#bcd4f5; font-size:.86rem; }
#view-login input, #view-login select{ background:rgba(8,18,38,.7); color:#eaf3ff;
  border:1.5px solid rgba(90,150,220,.3); border-radius:12px; }
#view-login input::placeholder{ color:#5d7aa6; }
#view-login input:focus, #view-login select:focus{ border-color:#19c6ff; background:rgba(10,24,48,.92);
  box-shadow:0 0 0 3px rgba(25,198,255,.16), 0 0 18px rgba(25,198,255,.25); outline:none; }
#view-login .pw-toggle{ color:#7fd6ff; }

/* tombol Masuk neon */
#view-login .btn.primary{ background:linear-gradient(135deg,#1f6bff,#19c6ff); color:#04122b;
  font-weight:800; letter-spacing:.4px; border-radius:12px;
  box-shadow:0 8px 22px rgba(25,140,255,.4), 0 0 0 1px rgba(120,210,255,.3) inset; position:relative; overflow:hidden; }
#view-login .btn.primary::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); animation:shine 3.2s ease-in-out infinite; }
@keyframes shine{ 0%,60%{left:-60%} 100%{left:130%} }
#view-login .btn.primary:active{ transform:translateY(1px); }

/* hasil pencarian — kartu gelap */
#view-login .result-item{ background:rgba(10,22,44,.7); border:1.5px solid rgba(90,150,220,.25); }
#view-login .result-item:active{ background:rgba(20,60,110,.8); border-color:#19c6ff; }
#view-login .result-item .r-name{ color:#eaf3ff; }
#view-login .result-item .r-addr{ color:#8fb0dd; }
#view-login .results-empty{ color:#8fb0dd; }
#view-login .selected-row{ background:rgba(25,120,220,.16); border:1.5px solid rgba(90,180,255,.35); }
#view-login .sel-name{ color:#eaf3ff; }
#view-login .selected-row .muted{ color:#9fc0ea; }
#view-login .btn.ghost.small{ background:rgba(8,18,38,.6); color:#9fc7f5; border-color:rgba(90,150,220,.35); }

#view-login .hint{ color:#7e9bc4; }
#view-login .msg.err{ color:#ff8a8a; }
#view-login .footer-note{ position:relative; z-index:1; color:#7e9bc4; }
@media (prefers-reduced-motion: reduce){ .lb-grid,.lb-glow-a,.lb-glow-b,.brand-logo::before,#view-login .btn.primary::after,.login-card{ animation:none !important; } }