.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--bg)), var(--bg) 70%), var(--bg); }
.login-theme { position: fixed; top: 14px; right: 16px; }
.login-card { width: min(380px, 100%); display: grid; gap: 12px; padding: 26px; box-shadow: var(--glow); }
.login-card .brand-logo { margin: 0 auto 4px; max-width: 260px; }
.login-card h2, .login-card > .small { text-align: center; }
.topbar { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand .brand-logo { width: auto; height: 38px; border-radius: 8px; }
#nav { display: flex; gap: 2px; flex-wrap: wrap; }
#nav button { background: none; border: 0; padding: 7px 12px; border-radius: 7px; color: var(--muted); cursor: pointer; display: flex; gap: 6px; align-items: center; }
#nav button:hover { background: var(--panel-2); color: var(--text); }
#nav button.active { background: var(--grad); color: #fff; font-weight: 600; box-shadow: var(--glow); }
.badge { font-size: 10px; font-weight: 700; background: var(--warn); color: #000; padding: 0 6px; border-radius: 999px; }
.who { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
main { padding: 20px; max-width: 1500px; margin: 0 auto; }
.page-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-h h1 { font-size: 24px; letter-spacing: -.01em; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.map-lg { height: 460px; border-radius: 10px; }
.tabs-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs-row button { background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; cursor: pointer; color: var(--muted); }
.tabs-row button.active { border-color: var(--accent); color: var(--text); }
.form-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.secret { font-family: var(--mono); background: var(--panel-2); padding: 10px 12px; border-radius: 8px; border: 1px dashed var(--warn); margin-top: 10px; }
td .btn + .btn { margin-left: 6px; }
td input, td select { padding: 4px 6px; min-width: 60px; }
td input.params { min-width: 260px; font-family: var(--mono); font-size: 12px; }
.review { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.review input { width: 260px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } main { padding: 12px 16px; } }