:root{
  --bg:#0b0f14; --panel:#10161d; --muted:#7c8da0; --text:#e7eef7; --accent:#3aa3ff; --border:#1b2530;
  --ok:#2ecc71; --warn:#f39c12; --danger:#c0392b; --accent-weak:#233142;
  --radius:14px;
  --btn-radius:10px; --btn-h:38px; --btn-pad-x:14px; --btn-pad-y:10px;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){
  :root{scroll-behavior:smooth}
}
body{
  margin:0; font:14px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.wrap{max-width:1400px; margin:32px auto; padding:0 20px;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.25);}
header.app{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.title{font-weight:650; letter-spacing:.2px; font-size:20px}
.muted{color:var(--muted)}
.form-row,
form.search{display:flex; gap:10px; align-items:center}
input[type="text"]{
  background:#0e141b; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; min-width:280px; outline:none
}
input[type="text"]::placeholder{color:#6b7a8a}

/* ---------- Buttons (unified for <a> and <button>) ---------- */
.btn, a.btn, button.btn{
  font: inherit;
  -webkit-appearance: none; appearance: none;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); min-height:var(--btn-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer; user-select:none;
  line-height:1; font-weight:600;
  transition:transform .04s ease, filter .12s ease, box-shadow .12s ease;
  color:#fff; background:var(--accent);
}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(58,163,255,.35)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6; cursor:default}
a.btn:visited{color:#fff}

/* Variants */
.btn--primary{background:var(--accent)}
.btn--success{background:var(--ok)}
.btn--danger{background:var(--danger)}
.btn--muted{background:var(--accent-weak); color:#e0ecff}

/* Optional equal width buttons */
.btn--wide{min-width:110px}

/* Button groups */
.btn-group{display:flex; gap:8px; align-items:center}

/* ---------- Table ---------- */
.table-wrap{overflow:auto; border-top:1px solid var(--border)}
table{width:100%; border-collapse:separate; border-spacing:0}
thead th{
  position:sticky; top:0; background:#0f151c; color:#9fb1c6; text-align:left;
  font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  padding:12px 14px; border-bottom:1px solid var(--border)
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
tbody tr:hover{background:#0f141b}
code.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; color:#d6e2f1}
.pill{display:inline-block; padding:3px 8px; font-size:12px; border-radius:999px; border:1px solid var(--border); background:#0e141b}
.grid{display:grid; grid-template-columns:1fr auto; gap:14px; padding:16px}
.footer{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; color:var(--muted)}
.pager{display:flex; gap:8px; align-items:center}
.pager a, .pager span{padding:6px 10px; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text)}
.pager .current{background:#0e141b; color:#a7c7ff}
.count{font-variant-numeric:tabular-nums}
@media (max-width: 700px){
  .grid{grid-template-columns:1fr}
  input[type=text]{min-width:0; width:100%}
}

/* ---------- Icons & status ---------- */
.osicon{height:14px;vertical-align:middle;display:inline-block;margin-right:2px}

.owner-cell{display:flex; align-items:center; gap:8px; min-width:220px}
.owner-input{
  background:#0e141b; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; outline:none; width:100%;
}
.owner-input:focus{border-color:#2b77ff}
.owner-status{width:8px; height:8px; border-radius:50%; display:inline-block; opacity:.6}

.status{display:inline-block; width:14px; height:14px; border-radius:50%}
.status.green{background:#27ae60}
.status.red{background:#c0392b}
.status.amber{background:#f39c12}

/* ---------- Utilities ---------- */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}