/* =========================
   AuthNexus — CLEAN (no duplicates)
   ========================= */

:root{
  --bg:#050507;
  --glass1:rgba(18,18,22,.62);
  --glass2:rgba(18,18,22,.46);
  --stroke:rgba(255,255,255,.11);
  --stroke2:rgba(255,255,255,.16);

  --t1:rgba(255,255,255,.95);
  --t2:rgba(255,255,255,.78);
  --t3:rgba(255,255,255,.60);

  --good:rgba(60,220,160,.95);
  --bad:rgba(255,80,90,.95);

  --p1:rgba(140,120,255,.95);
  --p2:rgba(50,210,170,.78);

  --r-lg:22px;
  --r-md:16px;
  --r-sm:14px;
  --ease:140ms ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* readability veil (starfield-ready) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 700px at 40% 30%, rgba(120,110,255,.10), transparent 55%),
    radial-gradient(900px 600px at 70% 55%, rgba(50,210,170,.08), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.62));
  z-index:0;
}
.app-shell{position:relative; z-index:1; min-height:100vh; display:flex}

/* =========================
   SIDEBAR
   ========================= */
.sidebar{
  width:280px; height:100vh; position:sticky; top:0;
  padding:18px;
  display:flex; flex-direction:column; gap:16px;
  background:rgba(10,10,12,.60);
  border-right:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.sidebar-brand{display:flex; align-items:center; gap:12px; padding:10px; border-radius:var(--r-md)}
.logo-dot{
  width:12px; height:12px; border-radius:999px;
  background:linear-gradient(90deg,var(--p1),var(--p2));
  box-shadow:0 0 18px rgba(140,120,255,.40);
}
.brand-name{
  font-weight:900; letter-spacing:-.03em; font-size:16px;
  background:linear-gradient(90deg,var(--p1),var(--p2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-sub{font-size:12px; color:rgba(255,255,255,.45); margin-top:2px}
.side-nav{display:flex; flex-direction:column; gap:8px}
.side-link{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:var(--r-md);
  text-decoration:none;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  transition:var(--ease);
}
.side-link:hover{color:rgba(255,255,255,.92); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); transform:translateY(-1px)}
.side-link.active{color:#fff; background:rgba(140,120,255,.12); border-color:rgba(140,120,255,.24); box-shadow:0 0 0 4px rgba(140,120,255,.10)}
.sidebar-footer{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.user-pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.user-dot{width:10px;height:10px;border-radius:999px;background:var(--good);box-shadow:0 0 16px rgba(60,220,160,.22)}
.user-email{font-size:12px;font-weight:800}
.user-role{font-size:12px;color:rgba(255,255,255,.50);margin-top:2px}
.btn-logout{
  text-decoration:none; text-align:center;
  padding:10px 12px; border-radius:var(--r-md);
  font-size:13px; font-weight:900; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:var(--ease);
}
.btn-logout:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.20); box-shadow:0 14px 40px rgba(0,0,0,.40)}

/* =========================
   MAIN / HEADERS
   ========================= */
.main{flex:1; padding:26px 28px}
.content{max-width:1250px}
.page-head{margin-bottom:18px}
.page-title{font-size:38px; line-height:1.05; letter-spacing:-.03em; margin:6px 0 10px; text-shadow:0 16px 60px rgba(120,110,255,.20)}
.page-subtitle{margin:0; color:var(--t2); font-size:14px}

/* =========================
   GLASS PRIMITIVES (single source of truth)
   ========================= */
.glass{
  background:linear-gradient(180deg, rgba(22,22,28,.70), rgba(14,14,18,.52));
  border:1px solid var(--stroke);
  box-shadow:0 28px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.panel{border-radius:var(--r-lg); padding:18px}
.card{border-radius:var(--r-lg); padding:18px}
.panel,.card{ composes: glass; } /* if no CSS modules, ignore — see note below */

/* If you are NOT using CSS modules, use this instead of composes: */
.panel,.card{
  background:linear-gradient(180deg, rgba(22,22,28,.70), rgba(14,14,18,.52));
  border:1px solid var(--stroke);
  box-shadow:0 28px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}

/* Cards grid */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:22px 0 20px}
.card{background:rgba(18,18,22,.52); box-shadow:0 22px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); transition:160ms ease}
.card:hover{transform:translateY(-4px); border-color:rgba(140,120,255,.25); box-shadow:0 28px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(140,120,255,.22), 0 0 30px rgba(120,110,255,.14)}
.card-label{font-size:11px; color:rgba(255,255,255,.42); letter-spacing:.14em}
.card-value{margin-top:8px; font-size:28px; font-weight:900}
.card-value.ok{color:var(--good); text-shadow:0 0 18px rgba(60,220,160,.22)}

/* Panel head */
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.panel-head h2{margin:0; font-size:16px; font-weight:900}
.panel-sub{color:var(--t2); font-size:13px}

/* =========================
   FORMS / INPUTS
   ========================= */
.form-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; align-items:end}
.field{display:flex; flex-direction:column; gap:6px}
.label{font-size:12px; color:var(--t2); font-weight:700}

input[type="text"],input[type="email"],input[type="password"],input[type="number"],select{
  width:100%; height:44px;
  padding:11px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--stroke2);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.42));
  color:var(--t1);
  outline:none;
  transition:150ms ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px rgba(0,0,0,.28);
}
input::placeholder{color:rgba(255,255,255,.40)}
input:focus,select:focus{
  border-color:rgba(140,120,255,.75);
  box-shadow:0 0 0 4px rgba(140,120,255,.18), 0 16px 60px rgba(0,0,0,.38);
  transform:translateY(-1px);
}
input[disabled]{opacity:.75; cursor:not-allowed}

/* select arrow + dark options */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:42px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.70) 50%),
    linear-gradient(135deg, rgba(255,255,255,.70) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.38));
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
}
select option{background:#0b0b10; color:rgba(255,255,255,.92)}

/* =========================
   BUTTONS (single base + variants)
   ========================= */
.btn,button,input[type="submit"]{-webkit-tap-highlight-color:transparent}
.btn, .btn-primary, .btn-danger, .btn-ghost, button, input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:10px 14px;
  border-radius:var(--r-sm);
  font-size:13px; font-weight:900; color:#fff;
  cursor:pointer; user-select:none;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  transition:var(--ease);
  box-shadow:0 16px 52px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn:hover,.btn-primary:hover,.btn-danger:hover,.btn-ghost:hover,button:hover,input[type="submit"]:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 18px 55px rgba(0,0,0,.40);
}
.btn:active,.btn-primary:active,.btn-danger:active,.btn-ghost:active,button:active,input[type="submit"]:active{
  transform:translateY(0) scale(.985);
}
.btn-primary{
  border-color:rgba(140,120,255,.36);
  background:linear-gradient(90deg,var(--p1),var(--p2));
  box-shadow:0 18px 65px rgba(120,110,255,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-danger{
  border-color:rgba(255,90,90,.42);
  background:linear-gradient(90deg, rgba(255,80,90,.92), rgba(255,160,80,.62));
}
.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

/* ripple */
.ripple{
  position:absolute;
  border-radius:999px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:rgba(255,255,255,.35);
  animation:ripple 520ms ease-out forwards;
}
@keyframes ripple{from{width:0;height:0;opacity:.45}to{width:360px;height:360px;opacity:0}}

/* =========================
   TABLE (grid table) + helpers
   ========================= */
.table{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.20));
  box-shadow:0 22px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

.trow{
  display:grid;
  align-items:center;
  gap:14px;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:var(--ease);
  min-width:0;
}
.trow:hover{
  background: radial-gradient(1200px 400px at 20% 50%, rgba(140,120,255,.12), transparent 60%), rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(140,120,255,.12);
  transform:translateY(-1px);
}
.trow.head{
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-weight:900;
  font-size:12px;
}
.trow > *{min-width:0}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.muted{color:var(--t3)}

.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.25);
}
.pill.ok{background:linear-gradient(180deg, rgba(60,220,160,.20), rgba(60,220,160,.10)); color:var(--good)}
.pill.bad{background:linear-gradient(180deg, rgba(255,80,90,.20), rgba(255,80,90,.10)); color:var(--bad)}

.row-details{
  padding:10px 16px 16px;
  font-size:12px;
  color:rgba(255,255,255,.60);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.14);
}

/* column presets */
.licenses-cols{grid-template-columns:2.7fr 1fr 1fr .9fr 2.2fr 1.2fr}
.apikeys-cols{grid-template-columns:1.2fr 3.2fr 1fr .9fr .9fr 1.2fr}
.users-cols{grid-template-columns:2.2fr 1fr 1.1fr 1.8fr 2.4fr}
.recent-licenses-cols{grid-template-columns:3.1fr 1.2fr 1.1fr 1fr 1.1fr}
.recent-apikeys-cols{grid-template-columns:1.2fr 3.2fr 1fr .9fr .9fr}

/* right align actions column (6th) */
.licenses-cols>div:nth-child(6),
.apikeys-cols>div:nth-child(6){display:flex; justify-content:flex-end}

/* =========================
   TABS (segmented control)
   ========================= */
.tabs{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  margin-top:12px;
}
.tab{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  border-radius:var(--r-sm);
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  transition:var(--ease);
  user-select:none;
}
.tab:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.92)}
.tab.active{background:rgba(140,120,255,.14); border-color:rgba(140,120,255,.30); box-shadow:0 0 0 4px rgba(140,120,255,.10); color:#fff}

/* docs helpers */
.codeblock{
  padding:14px;
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.24));
  border:1px solid rgba(255,255,255,.10);
  overflow-x:auto;
  white-space:pre;
  line-height:1.35;
  font-size:13px;
  color:rgba(255,255,255,.86);
}
.codeblock code{white-space:pre; display:block}
.copy-src{position:absolute!important; left:-9999px!important; top:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important}
.copy-ok{outline:2px solid rgba(50,210,170,.30); box-shadow:0 0 0 6px rgba(50,210,170,.12)}

/* =========================
   USERS PAGE (clean layout)
   ========================= */
.users-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start}
.users-form{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; align-items:end}
.users-form .field{min-width:0}
.users-form .col-12{grid-column:span 12}
.users-form .col-6{grid-column:span 6}
.users-form .col-4{grid-column:span 4}
.users-form .col-3{grid-column:span 3}
.users-form .col-2{grid-column:span 2}

.users-side{
  border-radius:var(--r-lg);
  padding:16px;
  background:rgba(18,18,22,.46);
  border:1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
.users-side h3{margin:0 0 10px; font-size:14px; font-weight:900; color:rgba(255,255,255,.92)}
.users-checks{display:grid; gap:10px}
.check-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
}
.check-row:hover{border-color:rgba(140,120,255,.22); background:rgba(140,120,255,.06)}
.check-left{display:flex; align-items:center; gap:10px; min-width:0}
.check-title{font-size:13px; font-weight:900; color:rgba(255,255,255,.90)}
.check-sub{font-size:12px; color:rgba(255,255,255,.55); margin-top:2px}

/* checkbox */
input[type="checkbox"]{width:18px;height:18px;accent-color:rgba(140,120,255,.95)}

/* =========================
   AUTH PAGES (login no sidebar)
   ========================= */
body.auth{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(140,120,255,.16), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(50,210,170,.12), transparent 55%),
    var(--bg);
}
.auth-shell{min-height:100vh; display:grid; place-items:center; padding:28px}
.auth-card{
  width:min(480px,100%);
  border-radius:26px;
  padding:22px;
  background:var(--glass1);
  border:1px solid var(--stroke);
  box-shadow:0 30px 120px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.auth-title{font-size:32px; margin:4px 0 6px; letter-spacing:-.03em}
.auth-subtitle{margin:0 0 18px; color:rgba(255,255,255,.66); font-size:14px}
.auth-form{display:flex; flex-direction:column; gap:12px}
.auth-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px}
.auth-btn{width:100%; border-color:rgba(140,120,255,.32); background:linear-gradient(90deg,var(--p1),var(--p2))}
.auth-btn:hover{transform:translateY(-2px)}
.alert{
  margin-top:14px; padding:12px;
  border-radius:var(--r-md);
  background:rgba(255,80,90,.12);
  border:1px solid rgba(255,80,90,.25);
  color:rgba(255,210,210,.95);
  font-weight:800;
}
.hint{margin-top:14px; color:rgba(255,255,255,.55); font-size:12px}
.hint code{padding:2px 6px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08)}

/* =========================
   RESPONSIVE TABLE SCROLL
   ========================= */
@media (max-width: 980px){
  .users-grid{grid-template-columns:1fr}
  .users-form .col-6,.users-form .col-4,.users-form .col-3,.users-form .col-2{grid-column:span 12}
  .table{overflow-x:auto}
  .trow{min-width:980px}
}
@media (max-width: 720px){
  .table{overflow-x:auto}
  .trow{min-width:900px}
}