/* Licensing Admin Panel - modern UI (no dependencies) */

:root{
  --bg0:#070a14;
  --bg1:#0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --text:#e5e7eb;
  --muted: rgba(229,231,235,.65);
  --muted2: rgba(229,231,235,.78);
  --accent1:#7c3aed;
  --accent2:#22d3ee;
  --danger:#ef4444;
  --ok:#22c55e;
  --shadow: 0 18px 70px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 18% 12%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 500px at 82% 18%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 500px at 60% 82%, rgba(249,115,22,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1040px;margin:0 auto;padding:24px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand strong{font-size:15px;letter-spacing:.2px}
.brand .sub{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.55);
  color:var(--text);
  text-decoration:none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{background: rgba(15,23,42,.70); border-color: rgba(255,255,255,.20); text-decoration:none}
.btn:active{transform: translateY(1px)}
.btnPrimary{
  border:0;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#fff;
  font-weight:700;
  box-shadow: 0 12px 30px rgba(124,58,237,.18), 0 14px 34px rgba(34,211,238,.12);
}
.btnPrimary:hover{filter:saturate(1.06) brightness(1.03)}
.btnDanger{
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color:#fecaca;
}
.btnDanger:hover{background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45)}

.card{
  margin-top:16px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.cardHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.h2{margin:0;font-size:18px;letter-spacing:.2px}
.muted{color:var(--muted);font-size:12px}
.muted b{color:var(--muted2)}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 920px){
  .grid2{grid-template-columns:1.1fr .9fr}
}

label{display:block;margin:12px 0 6px;color: rgba(229,231,235,.84);font-size:13px}
input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.55);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder,textarea::placeholder{color: rgba(229,231,235,.42)}
input:focus,textarea:focus{
  border-color: rgba(34,211,238,.50);
  box-shadow: 0 0 0 4px rgba(34,211,238,.12);
  background: rgba(2,6,23,.68);
}
textarea{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.spacer{flex:1}
.hint{margin-top:8px;color: rgba(229,231,235,.55);font-size:12px}

.alert{
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.alertErr{border-color: rgba(239,68,68,.40); background: rgba(239,68,68,.10); color:#fecaca}
.alertOk{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color:#bbf7d0}

.tableWrap{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:auto;
  background: rgba(2,6,23,.35);
}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px}
th,td{padding:12px 12px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left;font-size:13px;vertical-align:top}
thead th{
  position:sticky;top:0;
  background: rgba(11,16,32,.92);
  backdrop-filter: blur(10px);
  color: rgba(229,231,235,.78);
  font-weight:700;
  z-index:1;
}
tbody tr:hover td{background: rgba(255,255,255,.03)}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;font-size:12px;
  border:1px solid rgba(255,255,255,.14);
}
.pillOk{border-color: rgba(34,197,94,.30); color:#bbf7d0; background: rgba(34,197,94,.10)}
.pillBad{border-color: rgba(239,68,68,.35); color:#fecaca; background: rgba(239,68,68,.10)}

.footerNote{margin-top:14px;color:var(--muted);font-size:12px}

/* login page layout */
.loginWrap{max-width:520px;margin:40px auto 0}
.loginHero{
  padding:18px 18px 0;
  margin-bottom:10px;
}
.loginHero h1{margin:0;font-size:22px;letter-spacing:.2px}
.loginHero p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5}

