:root {
  --bg:#0b0f17; --panel:#141a26; --panel-2:#1b2333;
  --line:#26304a; --text:#e8edf7; --muted:#8b97b0;
  --accent:#4ade80; --accent-ink:#052e16; --danger:#f87171;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:
    radial-gradient(1200px 500px at 80% -10%, #17304a55, transparent),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.wrap { max-width:820px; margin:0 auto; padding:24px 20px 80px; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.brand { font-weight:700; font-size:18px; color:var(--text); text-decoration:none; }
.navlinks { display:flex; align-items:center; gap:16px; font-size:14px; }
.navlinks a { color:var(--accent); text-decoration:none; }
.navlinks .who { color:var(--muted); }
.navlinks .logout { color:var(--muted); }

.badge {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:#0f2417; border:1px solid #1d4d31;
  padding:5px 11px; border-radius:999px; margin-bottom:16px;
}
.badge span { width:6px; height:6px; border-radius:50%; background:var(--accent); }

.pagehead { margin-bottom:28px; }
h1 { margin:0 0 8px; font-size:30px; line-height:1.1; letter-spacing:-0.02em; }
h2 { font-size:18px; margin:0 0 16px; }
.tag { margin:0; color:var(--muted); font-size:15px; }

.list { display:flex; flex-direction:column; gap:12px; }
.app {
  display:flex; align-items:center; gap:16px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:16px 18px;
  transition:border-color .15s, background .15s;
}
.app:hover { border-color:#38507a; background:var(--panel-2); }
.icon {
  width:52px; height:52px; border-radius:13px; flex:0 0 auto;
  background:#223; display:grid; place-items:center;
  font-size:22px; font-weight:700; color:var(--accent);
  border:1px solid var(--line);
}
.info { flex:1 1 auto; min-width:0; }
.info .n { font-size:17px; font-weight:600; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.info .v { font-size:12px; color:var(--muted); font-weight:500; }
.info .d { font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
.info .s { font-size:12px; color:#6b7794; margin-top:5px; }
.dl {
  flex:0 0 auto; text-decoration:none;
  background:var(--accent); color:var(--accent-ink);
  font-weight:650; font-size:14px; padding:11px 18px; border-radius:11px;
  border:none; cursor:pointer;
}
.dl:hover { filter:brightness(1.08); }
.dl.disabled { background:#2a3350; color:var(--muted); cursor:default; }

.empty, .ok, .error {
  border-radius:14px; padding:16px 18px; margin-bottom:18px;
}
.empty { text-align:center; color:var(--muted); border:1px dashed var(--line); background:var(--panel); padding:40px 20px; }
.ok { background:#0f2417; border:1px solid #1d4d31; color:var(--accent); }
.error { background:#2a1416; border:1px solid #52201f; color:var(--danger); }

/* Login */
.login-card {
  max-width:380px; margin:60px auto 0; background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:30px;
}
.login-card form { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
label { font-size:13px; color:var(--muted); margin-top:10px; }
input {
  background:#0e1420; border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:11px 12px; font-size:15px; width:100%;
}
input:focus { outline:none; border-color:var(--accent); }
button {
  margin-top:18px; background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:11px; padding:12px; font-size:15px;
  font-weight:650; cursor:pointer;
}
button:hover { filter:brightness(1.08); }

/* Admin */
.panel {
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:22px; margin-bottom:20px;
}
.userform .row { display:flex; gap:16px; flex-wrap:wrap; align-items:end; }
.userform .row > div { flex:1 1 160px; }
.userform .chk { display:flex; align-items:center; }
.userform .chk label { margin-top:0; color:var(--text); font-size:14px; }
.applist { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.appcheck {
  background:#0e1420; border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:14px; color:var(--text); margin-top:0;
  display:flex; align-items:center; gap:8px; cursor:pointer;
}
.muted { color:var(--muted); font-size:12px; }
.hint { font-size:12.5px; color:var(--muted); margin:12px 0 0; }

.usertable { width:100%; border-collapse:collapse; font-size:14px; }
.usertable th, .usertable td {
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
.usertable th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.del {
  background:#2a1416; color:var(--danger); border:1px solid #52201f;
  border-radius:8px; padding:6px 12px; font-size:13px; margin:0; font-weight:500;
}
.del:hover { filter:brightness(1.15); }

@media (max-width:560px) {
  .app { flex-wrap:wrap; }
  .dl { width:100%; text-align:center; margin-top:4px; }
  .navlinks { gap:12px; }
}