@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

:root{
  --ink:#16202B; --paper:#EDF0F3; --surface:#FFFFFF; --line:#D7DDE4;
  --steel:#5F6E7D; --blue:#1B4B8F; --blue-soft:#E7EDF7;
  --green:#166A48; --green-soft:#E3F1EA; --amber:#8A5A06; --amber-soft:#FAEFDA;
  --red:#9B2C2C; --brass:#C8A96A;
}
*{box-sizing:border-box; margin:0;}
body{font-family:'Golos Text',-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ink);
     background:var(--paper); min-height:100vh; font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;}
button{font:inherit; cursor:pointer;}
input,select,textarea{font:inherit; color:inherit;}
.num{font-variant-numeric:tabular-nums;}
.hidden{display:none !important;}

/* ---------- вход ---------- */
#gate{position:relative; overflow:hidden; background:var(--ink); color:#F4F1EC;
      display:flex; align-items:center; justify-content:center; min-height:100vh; padding:32px 20px;}
#gate .art{position:absolute; left:0; right:0; bottom:0; width:100%; pointer-events:none;}
#gate .box{position:relative; z-index:1; width:100%; max-width:430px;}
#gate h1{font-size:30px; font-weight:600; letter-spacing:-0.02em; line-height:1.2;}
#gate p.sub{color:#A8B4BF; margin-top:8px;}
#gate form{margin-top:26px;}
#gate label{display:block; margin-bottom:13px;}
#gate label span{display:block; font-size:13px; color:#A8B4BF; margin-bottom:4px;}
#gate input{width:100%; padding:10px 12px; border:1px solid rgba(255,255,255,.2); border-radius:3px;
            background:rgba(255,255,255,.06); color:#F4F1EC;}
#gate input:focus{outline:2px solid var(--brass); outline-offset:-1px;}
#gate button{width:100%; background:var(--brass); color:var(--ink); border:0; border-radius:3px;
             padding:11px; font-weight:600; margin-top:6px;}
#gate button:hover{background:#D9BC7E;}
#gate .err{color:#F0B4B4; font-size:14px; min-height:20px; margin-top:10px;}
#gate .foot{margin-top:24px; font-size:12.5px; color:#8E9BA7; border-top:1px solid rgba(255,255,255,.12); padding-top:12px;}
#gate .foot a{color:#A8B4BF;}

/* ---------- каркас ---------- */
#app{display:flex; flex-direction:column; min-height:100vh;}
header.bar{background:var(--ink); color:#fff; padding:12px 28px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
header.bar .head{display:flex; align-items:center; gap:13px; padding-right:22px; border-right:1px solid #35485B;}
header.bar .brand{font-size:15px; font-weight:600; letter-spacing:-0.01em; line-height:1.2;}
header.bar .who{font-size:13px; color:#9BA9B7; line-height:1.3;}
.mark{display:block; width:78px; height:auto; flex:0 0 78px;}
nav.tabs{display:flex; gap:4px;}
nav.tabs button{background:none; border:0; color:#C6D0DA; padding:8px 13px; border-radius:3px; font-size:14.5px;}
nav.tabs button:hover{background:#22303F; color:#fff;}
nav.tabs button[aria-current="true"]{background:#fff; color:var(--ink); font-weight:500;}
header.bar .out{margin-left:auto; background:none; border:1px solid #35485B; color:#C6D0DA;
                padding:7px 14px; border-radius:3px; font-size:14px;}
header.bar .out:hover{border-color:#7C8FA1; color:#fff;}
main{flex:1; min-width:0; padding:28px 32px 60px;}
@media(max-width:860px){
  header.bar{padding:12px 16px; gap:12px;}
  header.bar .head{border-right:0; padding-right:0;}
  nav.tabs{order:3; width:100%; flex-wrap:wrap;}
  main{padding:20px 16px 48px;}
}

.h{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.h h2{font-size:23px; font-weight:600; letter-spacing:-0.015em;}
.h .hint{color:var(--steel); font-size:13.5px; margin-top:3px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:4px;}
.card > h3{font-size:15px; font-weight:600; padding:14px 16px; border-bottom:1px solid var(--line);}
.pad{padding:16px;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
@media(max-width:1100px){.two{grid-template-columns:1fr;}}

.btn{background:var(--blue); color:#fff; border:0; border-radius:3px; padding:9px 16px; font-weight:500;}
.btn:hover{background:#153A6E;}
.btn.ghost{background:none; color:var(--blue); border:1px solid var(--line);}
.btn.ghost:hover{background:var(--blue-soft); border-color:var(--blue);}
.btn.admit{background:var(--green); padding:10px 22px;}
.btn.admit:hover{background:#0F5236;}
.btn.small{padding:5px 10px; font-size:13.5px;}
.link{background:none; border:0; color:var(--steel); text-decoration:underline; padding:0; font-size:13px;}
.link:hover{color:var(--red);}

.field{display:block; margin-bottom:13px;}
.field span{display:block; font-size:13px; color:var(--steel); margin-bottom:4px;}
.field input,.field select,.field textarea{width:100%; padding:8px 10px; border:1px solid var(--line);
  border-radius:3px; background:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue); outline-offset:-1px;}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0 14px;}
.search{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:3px; font-size:16px;}
.search:focus{outline:2px solid var(--blue); outline-offset:-1px;}
.person{display:flex; gap:8px; margin-bottom:8px;}
.person input{flex:1;}

table.t{width:100%; border-collapse:collapse; font-size:14.5px;}
.t th{text-align:left; font-weight:500; font-size:12.5px; color:var(--steel);
      padding:9px 16px; border-bottom:1px solid var(--line); white-space:nowrap;}
.t td{padding:11px 16px; border-bottom:1px solid #EBEFF3; vertical-align:top;}
.t tr:last-child td{border-bottom:0;}
.t .muted, .muted{color:var(--steel); font-size:13px;}
.empty{padding:34px 16px; text-align:center; color:var(--steel); font-size:14px;}

.tag{display:inline-block; padding:2px 8px; border-radius:2px; font-size:12.5px; font-weight:500; white-space:nowrap;}
.tag.wait{background:var(--amber-soft); color:var(--amber);}
.tag.in{background:var(--green-soft); color:var(--green);}
.tag.off{background:#EEF1F4; color:var(--steel);}
.badge{display:inline-block; min-width:19px; margin-left:7px; padding:1px 6px; border-radius:9px;
       background:var(--brass); color:var(--ink); font-size:12px; font-weight:600; font-style:normal;
       font-variant-numeric:tabular-nums; text-align:center;}

.guard-row{display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid #EBEFF3;}
.guard-row:last-child{border-bottom:0;}
.guard-row .fio{font-size:16.5px; font-weight:500;}
.guard-row .meta{color:var(--steel); font-size:13px; margin-top:2px;}
.guard-row .grow{flex:1; min-width:0;}
.stat{display:flex; gap:26px; margin-bottom:18px;}
.stat div b{display:block; font-size:26px; font-weight:600; line-height:1.1;}
.stat div span{font-size:13px; color:var(--steel);}

.notice{background:var(--blue-soft); border:1px solid #C3D3EA; border-radius:3px;
        padding:12px 14px; margin-bottom:14px; font-size:14px;}
.notice code{font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff; padding:1px 6px;
             border:1px solid var(--line); border-radius:2px;}
.notice.bad{background:#FBEAEA; border-color:#E7C4C4; color:#7A2222;}

.check{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:14px; cursor:pointer;}
.check input{margin-top:3px; width:17px; height:17px; accent-color:var(--blue); flex:0 0 17px;}
.check.pay{background:var(--amber-soft); border:1px solid #E6D3AE; border-radius:3px; padding:12px 14px; margin-bottom:16px;}
.filters{display:flex; gap:4px;}
.filters button{background:none; border:0; color:var(--steel); font-size:14px; padding:6px 11px; border-radius:3px;}
.filters button:hover{background:#E4E9EE; color:var(--ink);}
.filters button[aria-current="true"]{background:var(--ink); color:#fff;}
tr.fresh td{background:#FFFBF3;}