:root {
  --brand:#1f6feb; --brand-d:#1a5fd0; --bg:#0f1420; --bg2:#0b0f17;
  --card:#171d2b; --card2:#1c2333; --line:#283044; --txt:#e8ecf5; --muted:#9aa5b8; --ok:#245c34;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 50% -15%, #1b2740, var(--bg)); color:var(--txt);
  min-height:100vh;
}
a { color:inherit; }

/* top nav */
.nav { display:flex; align-items:center; gap:16px; padding:14px 22px; border-bottom:1px solid var(--line);
  background:#131926cc; backdrop-filter:blur(6px); position:sticky; top:0; z-index:5; }
.nav .brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.nav .brand .mk { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--brand),#4f9bff);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.nav .sp { flex:1; }
.nav a.link { color:var(--muted); text-decoration:none; font-size:14px; padding:6px 10px; border-radius:8px; }
.nav a.link:hover, .nav a.link.active { color:var(--txt); background:#22304a; }
.nav .who { font-size:13px; color:var(--muted); }
.nav a.out { font-size:13px; color:var(--muted); text-decoration:none; }
.nav a.out:hover { color:#ffb3c0; }

.wrap { max-width:1040px; margin:0 auto; padding:28px 22px 60px; }
h1 { font-size:20px; margin:4px 0 2px; }
.sub { color:var(--muted); font-size:13.5px; margin-bottom:22px; }

/* app grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.app { display:flex; gap:13px; align-items:flex-start; text-decoration:none; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:16px; transition:transform .12s, border-color .12s, background .12s; }
.app:hover { transform:translateY(-2px); border-color:#3b4a66; background:var(--card2); }
.app .ic { width:42px; height:42px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:18px; }
.app .bd { min-width:0; }
.app .nm { font-weight:650; font-size:15px; margin-bottom:3px; }
.app .ds { color:var(--muted); font-size:12.5px; line-height:1.35; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.app .loc { margin-top:8px; font-size:11px; color:#8391a8; }
.badge { display:inline-block; font-size:10.5px; padding:2px 7px; border-radius:20px; background:#22304a; color:#bcd4f5; }
.badge.legacy { background:#3a3320; color:#f0dca0; }

.empty { color:var(--muted); background:var(--card); border:1px dashed var(--line); border-radius:12px;
  padding:34px; text-align:center; }

/* admin tables/forms */
.tabs { display:flex; gap:8px; margin-bottom:18px; }
.tabs a { text-decoration:none; color:var(--muted); font-size:14px; padding:8px 14px; border-radius:9px; border:1px solid transparent; }
.tabs a.active { color:var(--txt); background:var(--card); border-color:var(--line); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:18px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th,td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:12px; }
input,select,textarea { padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#0f1522;
  color:var(--txt); font-size:13px; font-family:inherit; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,111,235,.22); }
button { padding:8px 13px; border:0; border-radius:8px; cursor:pointer; background:var(--brand); color:#fff; font-size:13px; font-weight:600; }
button:hover { background:var(--brand-d); }
button.ghost { background:#22304a; }
button.danger { background:#5a2330; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.row .f { display:flex; flex-direction:column; gap:5px; }
.row .f label { font-size:11.5px; color:var(--muted); }
.msg { background:#13233a; border:1px solid #244063; color:#bcd4f5; padding:10px 12px; border-radius:8px; margin-bottom:16px; font-size:13px; }
.pw { background:#132a1c; border:1px solid var(--ok); color:#b6f0c6; padding:10px 12px; border-radius:8px; margin-bottom:16px; font-size:13px; }
.pw code { background:#0d1a12; padding:2px 8px; border-radius:6px; font-size:14px; }
form.inline { display:inline; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; background:#0f1522; border:1px solid var(--line);
  padding:4px 8px; border-radius:20px; margin:2px; }