:root{
  --navy:#0A1F44; --blue:#00A3FF; --blue-soft:#2D9CDB; --yellow:#FFD200;
  --white:#fff; --muted:#9fb3d1; --card:rgba(255,255,255,.04); --card-bd:rgba(0,163,255,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--white);background:var(--navy);min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

/* animated background (matches landing) */
.bg-fx{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(0,163,255,.20),transparent 60%),
  radial-gradient(900px 500px at 0% 20%,rgba(45,156,219,.16),transparent 55%),
  linear-gradient(160deg,#081a3a 0%,#0A1F44 45%,#0b2350 100%);}
.bg-fx::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle at 50% 50%,rgba(0,163,255,.07),transparent 45%);
  animation:pulse 7s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.grid-lines{position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(rgba(0,163,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,163,255,.10) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);}

/* card */
.card{position:relative;z-index:2;width:min(420px,100%);
  background:linear-gradient(135deg,rgba(0,163,255,.10),rgba(10,31,68,.72));
  border:1px solid var(--card-bd);border-radius:22px;padding:40px 34px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.logo-ring{width:92px;height:92px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,rgba(0,163,255,.18),rgba(10,31,68,0) 70%)}
.logo-ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(0,163,255,.35);border-top-color:var(--yellow);border-right-color:transparent;
  animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-ring img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,163,255,.6))}
.card h1{text-align:center;font-size:24px;font-weight:800;letter-spacing:-.3px}
.card .sub{text-align:center;color:var(--muted);font-size:14px;margin-top:6px;margin-bottom:26px}

/* form */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.input-wrap{position:relative}
.field input{width:100%;padding:13px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--card-bd);color:#fff;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#5f7aa0}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,163,255,.18)}
.toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px}
.btn{width:100%;padding:14px;border:none;border-radius:12px;font-weight:700;font-size:16px;cursor:pointer;
  background:linear-gradient(135deg,var(--yellow),#ffb800);color:#1a1300;
  box-shadow:0 10px 30px rgba(255,210,0,.28);transition:transform .2s,box-shadow .2s;margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:9px}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,210,0,.42)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.msg{display:none;margin-bottom:16px;padding:12px 14px;border-radius:10px;font-size:14px;text-align:center}
.msg.error{display:block;background:rgba(255,68,68,.12);border:1px solid rgba(255,68,68,.4);color:#ffb3b3}
.msg.ok{display:block;background:rgba(0,200,120,.12);border:1px solid rgba(0,200,120,.4);color:#9ff0c8}
.back{display:block;text-align:center;margin-top:20px;color:var(--muted);font-size:13px}
.back:hover{color:var(--blue)}

/* dashboard */
.dash{width:min(640px,100%)}
.dash .row{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:6px}
.dash .row img{width:44px;height:44px;object-fit:contain}
.dash .brand{font-weight:800;font-size:20px}
.dash .hi{text-align:center;font-size:28px;font-weight:800;margin-top:18px}
.dash .hi span{color:var(--yellow)}
.dash .note{text-align:center;color:var(--muted);margin:10px auto 26px;max-width:420px}
.dash .btn{max-width:220px;margin:0 auto;background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--card-bd);box-shadow:none}
.dash .btn:hover{background:rgba(0,163,255,.16)}
.spinner{width:18px;height:18px;border:2px solid rgba(26,19,0,.35);border-top-color:#1a1300;border-radius:50%;animation:spin .7s linear infinite;display:none}

/* ---- dashboard page (management) ---- */
body.dash-page{display:block;align-items:initial;justify-content:initial;padding:0}
.page{position:relative;z-index:2;width:min(960px,94%);margin:0 auto;padding:28px 0 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 2px 22px}
.topbar .left{display:flex;align-items:center;gap:12px}
.topbar img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(0,163,255,.5))}
.topbar .title{font-weight:800;font-size:18px;line-height:1.1}
.topbar .who{color:var(--muted);font-size:12px}
.btn-sm{padding:9px 16px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--card-bd);
  background:rgba(255,255,255,.06);color:#fff;transition:background .2s,transform .15s}
.btn-sm:hover{background:rgba(0,163,255,.16);transform:translateY(-1px)}
.btn-sm.warn:hover{background:rgba(255,68,68,.18)}
.btn-sm.go{background:linear-gradient(135deg,var(--yellow),#ffb800);color:#1a1300;border:none}

.panel{background:linear-gradient(135deg,rgba(0,163,255,.08),rgba(10,31,68,.6));
  border:1px solid var(--card-bd);border-radius:18px;padding:22px;margin-bottom:22px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.panel h2{font-size:18px;font-weight:800;margin-bottom:4px}
.panel .desc{color:var(--muted);font-size:13px;margin-bottom:18px}

.addgrid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
.addgrid .field{margin:0}
.addgrid .field input{padding:11px 12px}
@media(max-width:760px){.addgrid{grid-template-columns:1fr 1fr}}

table.admins{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
table.admins th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  padding:10px 12px;border-bottom:1px solid var(--card-bd)}
table.admins td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06)}
table.admins tr:hover td{background:rgba(0,163,255,.05)}
.badge2{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.badge2.on{background:rgba(0,200,120,.15);color:#7ef0bb;border:1px solid rgba(0,200,120,.4)}
.badge2.off{background:rgba(255,68,68,.14);color:#ffb3b3;border:1px solid rgba(255,68,68,.4)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions button{padding:6px 10px;font-size:12px;border-radius:8px;cursor:pointer;border:1px solid var(--card-bd);
  background:rgba(255,255,255,.05);color:#cfe0f5;transition:background .2s}
.actions button:hover{background:rgba(0,163,255,.18)}
.actions button.danger{color:#ffb3b3}
.actions button.danger:hover{background:rgba(255,68,68,.18)}
.empty{color:var(--muted);text-align:center;padding:24px;font-size:14px}

/* ---- menu / tabs ---- */
.menu{display:flex;gap:8px;margin:0 2px 20px;border-bottom:1px solid var(--card-bd);padding-bottom:0}
.menu-item{background:none;border:none;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;
  padding:12px 18px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.menu-item:hover{color:#fff}
.menu-item.active{color:var(--yellow);border-bottom-color:var(--yellow)}
.tab[hidden]{display:none}
.filebtn{display:flex;flex-direction:column;gap:6px}
.filebtn input[type=file]{color:var(--muted);font-size:13px}
.muted{color:var(--muted);font-size:12px}
.mono{font-variant-numeric:tabular-nums}

/* ---- error logs ---- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select,.filters input{padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--card-bd);color:#fff;font-size:13px;outline:none}
.filters input{flex:1;min-width:160px}
.filters select option{color:#0A1F44}
.lvl{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.lvl.fatal{background:rgba(180,0,60,.22);color:#ff9bb5;border:1px solid rgba(255,68,68,.5)}
.lvl.error{background:rgba(255,68,68,.14);color:#ffb3b3;border:1px solid rgba(255,68,68,.4)}
.lvl.warning{background:rgba(255,210,0,.14);color:#ffe27a;border:1px solid rgba(255,210,0,.4)}
.lvl.info{background:rgba(0,163,255,.14);color:#8fd0ff;border:1px solid rgba(0,163,255,.4)}
.src{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.src.android{background:rgba(0,200,120,.14);color:#8ff0c4;border:1px solid rgba(0,200,120,.4)}
.src.api{background:rgba(0,163,255,.14);color:#8fd0ff;border:1px solid rgba(0,163,255,.4)}
.src.admin{background:rgba(160,120,255,.16);color:#cdb8ff;border:1px solid rgba(160,120,255,.4)}
.msgcell{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.overlay{position:fixed;inset:0;z-index:50;background:rgba(4,12,28,.66);display:none;align-items:center;justify-content:center;padding:24px}
.overlay.show{display:flex}
.modal{width:min(760px,96%);max-height:86vh;overflow:auto;background:linear-gradient(135deg,rgba(0,163,255,.10),rgba(10,31,68,.92));
  border:1px solid var(--card-bd);border-radius:18px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal h3{font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.modal .kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:13px;margin-bottom:14px}
.modal .kv .k{color:var(--muted)}
.modal pre{background:#06122b;border:1px solid var(--card-bd);border-radius:10px;padding:14px;overflow:auto;
  font-size:12px;line-height:1.5;color:#c9dbf2;white-space:pre-wrap;word-break:break-word;max-height:340px}
.modal .x{margin-top:16px;text-align:right}
.qrbox{position:relative;background:#fff;padding:14px;border-radius:12px;display:inline-block;margin-top:10px}
.qrbox img,.qrbox canvas{display:block}
.qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;object-fit:contain;background:#fff;padding:4px;border-radius:8px;
  box-shadow:0 0 0 3px #fff}

/* ---- login activity event badges ---- */
.evt{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.evt.login{background:rgba(0,200,120,.15);color:#7ef0bb;border:1px solid rgba(0,200,120,.4)}
.evt.failed{background:rgba(255,68,68,.14);color:#ffb3b3;border:1px solid rgba(255,68,68,.4)}
.evt.logout{background:rgba(160,170,190,.14);color:#c7d2e3;border:1px solid rgba(160,170,190,.35)}