@import url("tokens.css");
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--c-navy-950);color:var(--c-ink-100);font-family:"SF Pro Text",-apple-system,"Segoe UI",Inter,system-ui,sans-serif;font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased}
.mesh{position:fixed;inset:0;z-index:-2;overflow:hidden}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.mesh::before{width:60vw;height:60vw;left:-18vw;top:-22vw;background:radial-gradient(circle,var(--c-violet-500),transparent 65%)}
.mesh::after{width:55vw;height:55vw;right:-16vw;bottom:-24vw;background:radial-gradient(circle,var(--c-cyan-400),transparent 62%);opacity:.32}
h1{font-size:22px;letter-spacing:-.02em}h2{font-size:15px;color:var(--c-ink-200);letter-spacing:.02em}
.hint{color:var(--c-ink-500);font-size:12px}
code{font-family:ui-monospace,monospace;font-size:.9em;background:rgba(255,255,255,.07);padding:2px 6px;border-radius:6px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--c-glass-fill);border:1px solid var(--c-glass-border);font-size:12px;color:var(--c-ink-200)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--c-mint-400);box-shadow:0 0 10px var(--c-mint-400)}
.dot.warn{background:var(--c-amber-400);box-shadow:0 0 10px var(--c-amber-400)}
.dot.bad{background:var(--c-red-500);box-shadow:0 0 10px var(--c-red-500)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);font-weight:600;font-size:13px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform var(--m-fast) var(--m-spring),background var(--m-fast)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--c-blue-500),var(--c-violet-500));color:#fff;box-shadow:0 10px 28px rgba(61,126,255,.35)}
.btn-ghost{background:var(--c-glass-fill);border-color:var(--c-glass-border);color:var(--c-ink-100)}
.btn-danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#FFB4B4}
.btn-sm{padding:6px 11px;font-size:12px}
input,select{width:100%;padding:10px 13px;border-radius:var(--r-xs);background:rgba(0,0,0,.32);border:1px solid var(--c-glass-border);color:var(--c-ink-100);font-size:14px;outline:none}
input:focus{border-color:var(--c-blue-400);box-shadow:0 0 0 3px rgba(61,126,255,.18)}
.field{margin-top:14px}.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-ink-500);margin-bottom:6px}

/* gate */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.gate-card{width:min(430px,94vw);background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--c-glass-border-strong);border-radius:var(--r-xl);padding:32px;backdrop-filter:blur(24px);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.05em;font-size:14px}
.logo small{color:var(--c-ink-500);font-weight:500;letter-spacing:.16em;font-size:10px}
.mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c-blue-500),var(--c-violet-500));box-shadow:0 6px 22px rgba(61,126,255,.45)}
.msg{margin-top:14px;padding:10px 13px;border-radius:var(--r-xs);font-size:13px;display:none}
.msg.err{display:block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#FFB4B4}
.msg.ok{display:block;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#A7F3C4}

/* layout */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{border-right:1px solid var(--c-glass-border);padding:20px 14px;display:flex;flex-direction:column;gap:22px;background:rgba(8,10,18,.55);backdrop-filter:blur(18px)}
#nav{display:flex;flex-direction:column;gap:4px}
#nav button{text-align:left;padding:10px 12px;border-radius:11px;background:transparent;border:0;color:var(--c-ink-400);font-size:13.5px;cursor:pointer;transition:background var(--m-fast),color var(--m-fast)}
#nav button:hover{background:var(--c-glass-fill);color:var(--c-ink-100)}
#nav button.on{background:linear-gradient(135deg,rgba(61,126,255,.22),rgba(109,91,255,.16));color:#fff;border:1px solid var(--c-glass-border)}
.side-foot{margin-top:auto;display:grid;gap:10px}
.main{padding:24px 28px 60px;overflow-x:hidden}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.top-actions{display:flex;gap:10px;align-items:center}
.view{display:grid;gap:16px}
.grid{display:grid;gap:14px}
.kpi{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.two{grid-template-columns:1fr 1fr}
@media(max-width:1100px){#app{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--c-glass-border)}#nav{flex-direction:row;flex-wrap:wrap}.two{grid-template-columns:1fr}}
.panel{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--c-glass-border);border-radius:var(--r-lg);padding:18px 20px;backdrop-filter:blur(16px)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.card-kpi{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--c-glass-border);border-radius:var(--r-md);padding:16px}
.card-kpi b{display:block;font-size:26px;letter-spacing:-.02em}
.card-kpi span{color:var(--c-ink-500);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--c-ink-500);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--c-glass-border)}
td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;border:1px solid var(--c-glass-border)}
.tag.ok{background:rgba(34,197,94,.14);color:#9BE7B4;border-color:rgba(34,197,94,.35)}
.tag.pend{background:rgba(255,176,32,.14);color:#FFD79A;border-color:rgba(255,176,32,.35)}
.tag.off{background:rgba(239,68,68,.14);color:#FFB4B4;border-color:rgba(239,68,68,.35)}
.row-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.row-form input{max-width:260px}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--c-ink-400)}
.chk input{width:auto}
.qr-card{display:flex;gap:20px;align-items:center;margin-top:16px;flex-wrap:wrap}
#qrimg{width:190px;height:190px;border-radius:16px;background:#fff;padding:10px;border:1px solid var(--c-glass-border)}
.checks{list-style:none;display:grid;gap:9px;margin-top:6px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--c-ink-200)}
.checks li::before{content:"✓";color:var(--c-mint-400);font-weight:700}
.hidden{display:none!important}