:root { --blue:#1f4e8c; --blue2:#163a69; --bg:#f5f7fb; --me:#dfeafc; --bot:#fff; --warn:#fff4e5; --border:#d5dbe5; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:#1d2433; }
a { color: var(--blue); }
.muted { color:#667; font-size:.9rem; }
.err { color:#c62828; min-height:1.2em; margin-top:6px; }
.ok { color:#2e7d32; }
button { font:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--border); background:#fff; padding:6px 12px; }
button.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
button.danger { color:#c62828; border-color:#e6b4b4; }
button:disabled { opacity:.5; cursor:default; }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.card { background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.07); padding:20px; }
.center-page { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login { width:340px; display:flex; flex-direction:column; gap:12px; text-align:center; }
.login label { display:flex; flex-direction:column; text-align:left; gap:4px; font-size:.9rem; }
.login h1 { margin:0; color:var(--blue); }
.bsd { font-size:.8rem; color:#888; text-align:right; }
header.top { background:var(--blue); color:#fff; padding:10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
header.top h1 { font-size:1.2rem; margin:0; }
header.top .spacer { flex:1; }
header.top a, header.top .who { color:#fff; font-size:.85rem; }
header.top select, header.top button { font-size:.85rem; padding:4px 6px; border-radius:6px; border:none; }
header.top .bsd { color:#fff; opacity:.8; }
.pwmeter { height:6px; background:#e5e8ee; border-radius:3px; overflow:hidden; margin:-4px 0 4px; }
.pwmeter span { display:block; height:100%; width:0; transition:width .2s; }

/* login: phones */
.center-page { min-height:100dvh; padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); box-sizing:border-box; }
.login { max-width:100%; }
@media (max-width: 480px) {
  .login { width:100%; }
  .login input { font-size:16px; min-height:44px; }
  .login button { min-height:46px; }
  .login .langseg button { min-height:38px; min-width:40px; }
}