/* Общий стиль для login.html и admin.html — тот же визуальный язык, что и kzs-hud.html */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-void:#070a0f; --bg-panel:#0d131b; --bg-panel-2:#111925;
  --line: rgba(140,170,190,0.12); --line-strong: rgba(140,170,190,0.22);
  --core:#49d4d6; --core-dim:#2a6e70; --amber:#ff9d47; --green:#6fe3a0; --red:#ff5d5d;
  --text:#dce7ee; --text-dim:#66808f; --text-faint:#3c4d58;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg-void); color:var(--text); font-family:'JetBrains Mono', monospace;
  min-height:100vh; display:flex; flex-direction:column;
}
.wrap{ max-width:960px; margin:0 auto; padding:32px 20px; width:100%; flex:1; }
.brand{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.brand .insignia{ width:38px; height:38px; }
.brand .wordmark{ font-family:'Rajdhani', sans-serif; font-weight:700; font-size:20px; letter-spacing:3px; }
.brand .sub{ font-size:9px; letter-spacing:2px; color:var(--text-dim); margin-top:2px; }

.panel{ background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2)); border:1px solid var(--line); border-radius:3px; padding:20px; margin-bottom:16px; }
.panel-title{ font-family:'Rajdhani', sans-serif; font-weight:600; font-size:13px; letter-spacing:2.5px; color:var(--text-dim); margin-bottom:14px; }

.gate{ max-width:380px; margin:10vh auto 0; text-align:center; }
.gate .insignia{ width:64px; height:64px; margin:0 auto 18px; }
.gate h1{ font-family:'Rajdhani', sans-serif; font-weight:700; font-size:22px; letter-spacing:4px; margin-bottom:6px; }
.gate .sub{ font-size:10px; color:var(--text-dim); letter-spacing:2px; margin-bottom:28px; }
.input, select, textarea{
  width:100%; background:var(--bg-void); border:1px solid var(--line-strong); color:var(--text);
  font-family:'JetBrains Mono', monospace; font-size:12px; padding:10px 12px; border-radius:2px; margin-bottom:10px;
}
.btn{
  font-family:'Rajdhani', sans-serif; font-weight:600; letter-spacing:1.5px; font-size:13px;
  background:rgba(73,212,214,0.1); border:1px solid var(--core-dim); color:var(--core);
  padding:10px 16px; border-radius:2px; cursor:pointer; transition:.15s;
}
.btn:hover{ background:rgba(73,212,214,0.2); }
.btn.danger{ background:rgba(255,93,93,0.08); border-color:rgba(255,93,93,0.4); color:var(--red); }
.btn.danger:hover{ background:rgba(255,93,93,0.18); }
.btn.small{ font-size:10px; padding:6px 10px; }
.error{ color:var(--red); font-size:11px; margin-top:8px; min-height:14px; }
.notice{ color:var(--text-dim); font-size:10px; margin-top:8px; }

.group-card{ background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:2px; padding:16px; margin-bottom:14px; }
.group-title{ font-family:'Rajdhani', sans-serif; font-weight:700; font-size:15px; letter-spacing:2px; color:var(--text); margin-bottom:12px; }
.links-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.link-tile{
  display:block; background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:2px;
  padding:12px 14px; text-decoration:none; color:var(--text); transition:.15s;
}
.link-tile:hover{ border-color:var(--core-dim); background:rgba(73,212,214,0.05); }
.link-tile .lt-title{ font-family:'Rajdhani', sans-serif; font-weight:600; font-size:13.5px; }
.link-tile .lt-desc{ font-size:9.5px; color:var(--text-faint); margin-top:4px; }

.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row > *{ flex:1; min-width:120px; }
.key-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.key-row:last-child{ border-bottom:none; }
.key-meta{ font-size:10px; color:var(--text-faint); margin-top:3px; }
.role-badge{ font-size:8.5px; letter-spacing:1px; padding:2px 7px; border-radius:2px; }
.role-admin{ color:var(--red); background:rgba(255,93,93,0.1); }
.role-operator{ color:var(--core); background:rgba(73,212,214,0.1); }
.role-viewer{ color:var(--text-dim); background:rgba(255,255,255,0.05); }

.checkbox-list label{ display:flex; align-items:center; gap:8px; font-size:11px; padding:4px 0; cursor:pointer; }

.reveal-box{
  background:var(--bg-void); border:1px solid var(--core-dim); border-radius:2px; padding:14px;
  font-size:12px; word-break:break-all; margin-top:10px; color:var(--core);
}
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
a.plain{ color:var(--core); text-decoration:none; font-size:11px; }
a.plain:hover{ text-decoration:underline; }
.empty{ color:var(--text-faint); font-size:11px; padding:10px 0; }