:root{
  --bg:#0f1420; --panel:#161d2e; --panel2:#1c2438; --line:#26304a;
  --txt:#e8ecf5; --muted:#8b95ab; --acc:#ff8a00; --acc2:#ffa733;
  --ok:#2ecc71; --err:#ff5c5c; --blue:#4da3ff;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.5 "Segoe UI", system-ui, sans-serif; min-height:100vh;
}
code{background:var(--panel2); padding:1px 6px; border-radius:6px; font-size:13px}
a{color:var(--blue); text-decoration:none}

/* ---- шапка ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{font-size:19px; font-weight:700; letter-spacing:.4px}
.brand span{color:var(--acc)}
.topbar nav{display:flex; gap:6px}
.topbar nav a{
  color:var(--muted); padding:8px 14px; border-radius:10px; font-weight:500;
}
.topbar nav a:hover{color:var(--txt); background:var(--panel2)}
.topbar nav a.act{color:var(--txt); background:var(--panel2)}
.topbar nav a.exit{color:var(--err)}

.container{max-width:1180px; margin:0 auto; padding:28px}
h1{font-size:24px; margin-bottom:6px}
h2{font-size:17px; margin-bottom:10px}
.muted{color:var(--muted); font-size:13.5px}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px}

/* ---- карточки/формы ---- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:24px; margin-bottom:20px;
}
.card.empty{text-align:center; padding:48px}
.form label{display:block; margin-bottom:14px; font-weight:600; font-size:14px}
.form .hint{background:var(--panel2); border-radius:10px; padding:10px 14px;
  font-size:13.5px; color:var(--muted); margin-bottom:14px}
input, select{
  display:block; width:100%; margin-top:6px; padding:11px 14px;
  background:var(--bg); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; font-size:15px; outline:none;
}
input:focus, select:focus{border-color:var(--acc)}
.form.inline, form.inline{display:flex; gap:10px; align-items:center}
form.inline input{margin-top:0; width:auto; flex:1}

/* ---- кнопки ---- */
.btn{
  display:inline-block; padding:10px 18px; border-radius:10px; cursor:pointer;
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  font-size:14px; font-weight:600;
}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#14100a}
.btn.primary:hover{background:var(--acc2)}
.btn.danger{color:var(--err)}
.btn.small{padding:5px 10px; font-size:12.5px}
.btn.wide{width:100%}

/* ---- таблица ---- */
table.grid{width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
table.grid th{
  text-align:left; padding:12px 14px; font-size:12px; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted); background:var(--panel2);
}
table.grid td{padding:12px 14px; border-top:1px solid var(--line); vertical-align:middle}
table.grid.slim td{padding:8px 10px}
tr.off td{opacity:.45}
td.strong{font-weight:600}
td.actions{white-space:nowrap}
td.actions form{display:inline}
td.actions .btn{margin-left:4px}

.tag{display:inline-block; padding:3px 10px; border-radius:99px; font-size:12.5px; font-weight:600}
.tag.on{background:rgba(46,204,113,.15); color:var(--ok)}
.tag.blocked{background:rgba(255,92,92,.15); color:var(--err)}
.tag.role-0{background:rgba(255,138,0,.15); color:var(--acc)}
.tag.role-1{background:rgba(77,163,255,.15); color:var(--blue)}
.tag.role-2{background:rgba(186,104,255,.18); color:#c792ff}
.tag.role-3{background:rgba(46,204,113,.15); color:var(--ok)}

/* ---- матрица доступов ---- */
table.matrix th.c, table.matrix td.c{text-align:center}
table.matrix input[type=checkbox]{
  display:inline-block; width:19px; height:19px; margin:0;
  accent-color:var(--acc); cursor:pointer;
}
.matrix-save{margin-top:16px}
.btn-row{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.btn-row form.inline-btn{display:inline}

/* ---- переключатель баз ---- */
.base-card{border-color:var(--acc)}
.base-switch{display:flex; gap:12px; flex-wrap:wrap}
.base-opt{
  flex:1 1 160px; display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); font-weight:600;
}
.base-opt.on{border-color:var(--acc); background:rgba(255,138,0,.12); color:var(--acc)}
.base-opt input{width:18px; height:18px; margin:0; accent-color:var(--acc)}
.edit-tabs{display:flex; align-items:center; gap:8px; margin:0 0 14px 2px; flex-wrap:wrap}
.edit-tabs .tab{
  padding:7px 16px; border-radius:10px; border:1px solid var(--line);
  color:var(--muted); font-weight:600; font-size:14px;
}
.edit-tabs .tab.act{color:var(--txt); background:var(--panel2); border-color:var(--acc)}
.card.base-test{border-left:3px solid var(--blue)}
.card.base-prod{border-left:3px solid var(--err)}

/* ---- кадры ---- */
.pay-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.pay-form label{flex:1 1 120px; margin-bottom:0}
.pay-form label.chk{flex:0 0 auto; display:flex; align-items:center; gap:8px; font-weight:500}
.pay-form label.chk input{width:18px; height:18px; margin:0; accent-color:var(--acc)}
.pay-form button{flex:0 0 auto}
label.chk{display:flex; align-items:center; gap:8px}
label.chk input{width:18px; height:18px; margin:0; accent-color:var(--acc)}

.flash{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px}
.flash.ok{background:rgba(46,204,113,.12); color:var(--ok); border:1px solid rgba(46,204,113,.3)}
.flash.error{background:rgba(255,92,92,.12); color:var(--err); border:1px solid rgba(255,92,92,.3)}
.flash.warn{background:rgba(255,168,46,.12); color:#ffb020; border:1px solid rgba(255,168,46,.35)}
.flash.warn a{color:#ffcf7a; text-decoration:underline}
.env-badge{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:6px; margin-left:9px; vertical-align:middle}
.env-badge.env-server{background:rgba(46,204,113,.16); color:var(--ok); border:1px solid rgba(46,204,113,.35)}
.env-badge.env-local{background:rgba(255,168,46,.16); color:#ffb020; border:1px solid rgba(255,168,46,.4)}
.login-hint{font-size:11.5px; line-height:1.45; margin-top:14px; text-align:center}

/* ---- страница входа ---- */
.login-wrap{display:flex; justify-content:center; padding-top:9vh}
.login-card{width:360px; text-align:center}
.login-card h1{margin:10px 0 2px}
.login-card p{margin-bottom:18px}
.login-card input{margin-bottom:14px; text-align:center}
.logo-badge{
  width:64px; height:64px; margin:0 auto; border-radius:18px;
  background:linear-gradient(135deg, var(--acc), #ff5e00);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:800; color:#14100a;
}

/* ---- макет телефона ---- */
.phone-stage{display:flex; justify-content:center; padding:24px 0}
.phone{
  width:340px; min-height:640px; position:relative;
  background:#0b0f18; border:10px solid #232a3d; border-radius:42px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden;
}
.phone-notch{
  width:120px; height:22px; background:#232a3d; border-radius:0 0 14px 14px;
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
}
.phone-screen{padding:64px 26px 30px; display:flex; flex-direction:column; min-height:620px}
.phone-screen.hidden{display:none}
.app-logo{
  width:72px; height:72px; margin:18px auto 14px; border-radius:20px;
  background:linear-gradient(135deg, var(--acc), #ff5e00);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; color:#14100a;
}
.app-title{text-align:center; font-size:21px; font-weight:700}
.app-sub{text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:26px}
.phone-screen input{margin-bottom:12px; padding:13px 15px; border-radius:12px}
.app-btn{
  margin-top:8px; padding:13px; border:none; border-radius:12px; cursor:pointer;
  background:var(--acc); color:#14100a; font-size:16px; font-weight:700;
}
.app-btn.ghost{background:transparent; border:1px solid var(--line); color:var(--muted); margin-top:auto}
.app-err{color:var(--err); text-align:center; font-size:13.5px; margin-top:12px; min-height:18px}
.app-hello{font-size:19px; font-weight:700; margin:8px 0 10px}
.app-badge{
  display:inline-block; align-self:flex-start; padding:4px 12px; border-radius:99px;
  background:rgba(255,138,0,.15); color:var(--acc); font-weight:600; font-size:13px;
}
.app-wh{color:var(--muted); font-size:14px; margin:8px 0 20px}
.app-menu{display:flex; flex-direction:column; gap:10px; margin-bottom:20px}
.app-item{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px; font-size:15.5px; font-weight:600;
}