:root{
  --bg:#f7f7f8; --surface:#ffffff; --text:#111827; --muted:#6b7280;
  --border:#e5e7eb; --brand:#111827; --brand-2:#0ea5e9; --danger:#ef4444;
  --radius:14px;
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:28px}

/* Top bar (solo admin) */
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex; gap:14px; align-items:center; padding:12px 20px}
.nav a{color:var(--text);opacity:.85}
.nav a:hover{opacity:1}
.nav .spacer{margin-left:auto}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted);
}

/* Cards */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:0 1px 1px rgba(0,0,0,.02)}
.card + .card{margin-top:18px}

/* Titles */
h1{font-size:28px; margin:0 0 18px}
h2{font-size:22px; margin:0 0 14px}
h3{font-size:16px; margin:0 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}

/* Table */
.table-wrap{overflow:auto}
.table{
  width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.table th, .table td{padding:12px 14px; text-align:left}
.table thead th{
  background:#fafafa; font-weight:600; color:#374151; border-bottom:1px solid var(--border)
}
.table tbody tr:not(:last-child) td{border-bottom:1px solid var(--border)}
.table tbody tr:hover td{background:#fafafa}

/* Buttons & inputs */
.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:#111827;
  padding:8px 12px; border-radius:10px; cursor:pointer; transition:all .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.06)}
.btn.primary{background:var(--text); color:#fff; border-color:var(--text)}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger); color:var(--danger)}
input[type="text"], input[type="url"]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:0;
  background:#fff; color:var(--text)
}
input:focus{border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(14,165,233,.15)}
label{display:block; margin:8px 0 6px; color:var(--muted)}

/* Toolbar simple */
.toolbar{display:flex; gap:10px; margin-bottom:14px}

/* Modal QR */
.modal{position:fixed; inset:0; background:rgba(17,24,39,.55); display:flex; align-items:center; justify-content:center; padding:24px}
.modal .box{background:#fff; border-radius:16px; padding:18px; box-shadow:0 30px 60px rgba(0,0,0,.2)}
.modal img{display:block; max-width:60vmin; height:auto}

/* Small helpers */
.muted{color:var(--muted)}
.row{display:flex; gap:12px; align-items:center}