:root{
  --bg:#222831;
  --surface:#393E46;
  --ink:#EEEEEE;
  --ink-muted:#B7BEC4;
  --accent:#00ADB5;
  --accent-tint:#EEEEEE;
  --line:#4A5058;
  --line-strong:#00ADB5;
  --radius:14px;
  --danger:#FF6B57;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px;}
.display{font-family:'Plus Jakarta Sans',sans-serif;}

.wrap{max-width:960px;margin:0 auto;padding:0 24px;width:100%;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(34,40,49,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:960px;margin:0 auto;padding:18px 24px;
}
.logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;}
.logo-mark{height:38px;width:auto;display:block;filter:brightness(0) invert(1);}
.logo-tag{
  font-size:11px;font-weight:700;color:var(--accent);
  border:1px solid var(--line-strong);border-radius:999px;
  padding:2px 9px;letter-spacing:0.03em;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:11px 20px;border-radius:999px;
  font-size:14.5px;font-weight:600;border:none;cursor:pointer;
  transition:background .15s ease,transform .15s ease;
  font-family:'Inter',sans-serif;
}
.btn:hover{background:#00888E;}
.btn:active{transform:scale(0.97);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(255,107,87,0.4);}
.btn-danger:hover{border-color:var(--danger);background:rgba(255,107,87,0.08);}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn[disabled]{opacity:0.5;cursor:not-allowed;}

main{flex:1;padding:48px 0 72px;}
footer{border-top:1px solid var(--line);padding:24px 0;margin-top:auto;}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--ink-muted);flex-wrap:wrap;gap:10px;
}

/* ---------- Page head ---------- */
.page-head{max-width:600px;margin:0 0 32px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--accent);
  margin-bottom:14px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.page-head h1{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(24px,3.4vw,32px);font-weight:700;margin:0 0 10px;
}
.page-head p{color:var(--ink-muted);font-size:15.5px;margin:0;}

/* ---------- Alerts ---------- */
.alert{
  border-radius:12px;padding:14px 18px;margin-bottom:24px;
  font-size:14.5px;font-weight:500;border:1px solid transparent;
}
.alert-success{background:rgba(0,173,181,0.1);border-color:rgba(0,173,181,0.35);color:var(--ink);}
.alert-error{background:rgba(255,107,87,0.1);border-color:rgba(255,107,87,0.4);color:var(--ink);}

/* ---------- Cards / forms ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;
}
.card + .card{margin-top:20px;}
.card h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:19px;font-weight:700;margin:0 0 18px;
}

.fields{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;}
.field input,.field textarea{
  font-family:'Inter',sans-serif;font-size:15px;font-weight:400;
  background:var(--bg);border:1.5px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--ink);width:100%;
}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none;}
.field input::placeholder{color:#767C84;}
.field .hint{font-size:12.5px;color:var(--ink-muted);font-weight:400;}

.form-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.form-row .field{flex:1;min-width:220px;}

/* ---------- Login ---------- */
.login-shell{max-width:380px;margin:60px auto;}
.login-shell .card{text-align:center;}
.login-logo{margin-bottom:20px;}
.login-logo img{height:46px;filter:brightness(0) invert(1);}
.login-shell h1{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:700;margin:0 0 8px;
}
.login-shell p.lede{color:var(--ink-muted);font-size:14.5px;margin:0 0 24px;}
.login-shell form{text-align:left;}
.login-shell .btn{width:100%;justify-content:center;margin-top:6px;}

/* ---------- QR list ---------- */
.qr-list{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.qr-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;
}
@media (max-width:720px){.qr-card{grid-template-columns:1fr;}}
.qr-thumb{
  width:96px;height:96px;border-radius:10px;background:#fff;padding:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.qr-thumb img{width:100%;height:100%;object-fit:contain;}
.qr-thumb.inactive{opacity:0.35;filter:grayscale(1);}

.qr-main{min-width:0;}
.qr-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.qr-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px;font-weight:700;}
.badge{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  padding:3px 9px;border-radius:999px;
}
.badge-active{background:rgba(0,173,181,0.12);color:var(--accent);}
.badge-inactive{background:rgba(255,107,87,0.12);color:var(--danger);}
.badge-type{background:var(--bg);color:var(--ink-muted);border:1px solid var(--line);}

.qr-link-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.qr-link{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:var(--ink-muted);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;word-break:break-all;
}
.copy-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-muted);
  border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer;
  font-family:'Inter',sans-serif;transition:border-color .15s ease,color .15s ease;
}
.copy-btn:hover{border-color:var(--accent);color:var(--ink);}

.qr-meta{font-size:13px;color:var(--ink-muted);margin-bottom:14px;}
.qr-meta span:not(:last-child)::after{content:"·";margin:0 8px;}

.qr-edit{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.qr-edit .field{flex:1;min-width:180px;margin-bottom:0;}
.qr-edit input{padding:9px 12px;font-size:14px;}

.qr-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:150px;}
.qr-actions form{display:contents;}
.qr-actions .btn{width:100%;justify-content:center;}

.empty-state{
  text-align:center;padding:48px 24px;color:var(--ink-muted);
  border:1.5px dashed var(--line);border-radius:var(--radius);margin-top:24px;
}

/* ---------- Public gone/notfound page ---------- */
.status-shell{max-width:420px;margin:80px auto;text-align:center;}
.status-shell .icon{
  width:56px;height:56px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;color:var(--accent);
}
.status-shell h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:700;margin:0 0 10px;}
.status-shell p{color:var(--ink-muted);font-size:15px;margin:0;}