/* The Ghouls Vault Admin — Phase 2 (Apple-level UI)
   Keep markup IDs stable for admin.js.
*/

@font-face{
  font-family:'Bitsumishi';
  src: url('/assets/fonts/Bitsumishi.woff2') format('woff2'),
       url('/assets/fonts/Bitsumishi.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg0:#0B0D12;
  --bg1:#0B0D12;
  --surface:#10131A;
  --surface2:#0E1118;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.68);
  --muted2:rgba(234,240,255,.52);
  --accent:#7C5CFF;
  --good:#3EE38A;
  --warn:#FFD166;
  --bad:#FF4D6D;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 28px rgba(0,0,0,.32);
  --r-xl: 16px;
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;
  --pad: 18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)),
    url('/uploads/images/bg.webp');
  background-attachment: fixed;
  overflow-x:hidden;
  height:100%;
}


/* Removed cube/tiled overlay (requested) */
body::before{ display:none; }
body > *{ position: relative; z-index: 1; }

/* ---------- App scroll model ----------
   Sidebar is fixed, main content scrolls (production dashboard behaviour)
*/
body.is-app{overflow:hidden}
body.is-app .app{height:100vh; display:block}
body.is-app .sidebar{
  position:fixed;
  left:0; top:0;
  width:290px;
  height:100vh;
}
body.is-app .main{
  height:100vh;
  overflow:auto;
  margin-left:290px;
  padding:0;
}
body.is-app .main-inner{
  width:100%;
  max-width:1520px;
  margin:0 auto;
  /* Header is fixed (80px). Add top padding so cards don't sit under it. */
  padding:calc(22px + 80px) 22px 48px 22px;
}
@media (max-width: 980px){
  body.is-app .main{margin-left:0; padding:0;}
  body.is-app .main-inner{padding:calc(18px + 80px) 16px 44px 16px;}
}


/* ---------- No-JS fallback ---------- */
html.no-js .view{display:none}
.view.active{display:block}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:34px 16px;
}
.login-card{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  padding:22px;
  border:1px solid var(--stroke);
  border-radius:var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
@media (max-width: 860px){
  .login-card{grid-template-columns:1fr}
}
.login-brand{
  display:flex; gap:14px; align-items:center;
  padding:18px;
  border-radius:var(--r-lg);
  background: radial-gradient(600px 260px at 20% 30%, rgba(124,92,255,.18), transparent 60%),
              radial-gradient(500px 260px at 70% 10%, rgba(35,213,255,.14), transparent 60%),
              rgba(255,255,255,.04);
  border:1px solid var(--stroke);
}
.brand-dot{
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 26px rgba(124,92,255,.28);
}
.brand-title{font-weight:800; letter-spacing:.2px; font-size:18px}
.brand-sub{color:var(--muted); font-size:13px; margin-top:3px}
.login-panel{
  padding:18px;
  border-radius:var(--r-lg);
  background: rgba(0,0,0,.20);
  border:1px solid var(--stroke);
}
.login-panel h1{margin:0 0 8px 0; font-size:22px}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.alert{
  margin:12px 0;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,77,109,.35);
  background: rgba(255,77,109,.12);
}

.alert.success{
  border:1px solid rgba(94,234,212,.35);
  background: rgba(94,234,212,.12);
}
.alert.danger{
  border:1px solid rgba(255,77,109,.35);
  background: rgba(255,77,109,.12);
}
.form{display:grid; gap:12px; margin-top:14px}
.field label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px 2px}
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}

/* Sidebar exact width from your original files + divider */
.sidebar {
    width: 290px;                     /* ← your original width */
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(12,14,18,.95);
    border-right: 1px solid rgba(255,255,255,.07);
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform .24s ease;
}

/* Divider under logo */
.sidebar-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.12), transparent);
    margin: 1.25rem 0 1.75rem 0;
}

/* Make sure logo is same size as your original */
.sidebar-logo img {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Polished dropdowns (avoid bland browser defaults) */
select{
  -webkit-appearance:none;
  appearance:none;
  background-color: rgba(0,0,0,.22) !important;
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.70) 50%),
    linear-gradient(135deg, rgba(234,240,255,.70) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,.10));
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%,
    calc(100% - 40px) 50%;
  background-size:6px 6px, 6px 6px, 1px 18px;
  background-repeat:no-repeat;
}
select:focus{border-color: rgba(124,92,255,.45)}
select:disabled{
  opacity:.75;
  cursor:not-allowed;
  background-color: rgba(0,0,0,.16) !important;
  color: rgba(234,240,255,.78);
}
select option{
  background:#0B1022;
  color:#EAF0FF;
}

textarea{resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 4px rgba(124,92,255,.18);
}
.login-hints{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.pill{
  font-size:12px;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}

/* ---------- App shell ---------- */
.app{
  min-height:100%;
  display:grid;
  grid-template-columns: 290px 1fr;
}
@media (max-width: 980px){
  .app{grid-template-columns:1fr}
}

.sidebar{
  position:sticky; top:0;
  height:100vh;
  padding:14px 14px;
  border-right:1px solid rgba(255,255,255,.07);
  background: rgba(12,14,18,.72);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
}
.sb-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px 14px 10px;
}
.sb-logo{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.sb-brand{display:flex; flex-direction:column; justify-content:center;}
.sb-title{
  display:flex;
  flex-direction:column;
  gap: 2px;
  font-family: 'Bitsumishi', var(--font);
  font-weight: 800;
  line-height: 1.0;
}
.sb-sub{display:none;}
.sb-nav{display:grid; gap:8px; margin-top:10px}
.navbtn{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease;
}
.navbtn:hover{background: rgba(255,255,255,.05);}
.navbtn.active{
  background: rgba(124,92,255,.14);
  border-color: rgba(124,92,255,.26);
}

/* Anchor variant used for simple routed pages (e.g. Admin Panel) */
.navlink{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration:none;
  transition: background .14s ease, border-color .14s ease;
}
.navlink:hover{background: rgba(255,255,255,.05); transform: translateY(-1px)}
.navlink.active{
  background: rgba(124,92,255,.14);
  border-color: rgba(124,92,255,.26);
}
.nav-ico{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.sb-foot{
  margin-top:auto;
  padding-top:14px;
  display:grid;
  gap:10px;
}

.main{
  padding:18px 18px 40px 18px;
}
@media (min-width: 980px){
  .main{padding:28px 26px 44px 26px}
}

/* Mobile sidebar drawer */
.sb-scrim{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(1px);
  z-index:40;
}
@media (max-width: 980px){
  .sidebar{
    position:fixed; left:0; top:0;
    width: 300px;
    transform: translateX(-110%);
    transition: transform .24s ease;
    z-index:50;
  }
  body.sb-open .sidebar{transform: translateX(0)}
  body.sb-open .sb-scrim{display:block}
}

.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.crumb{font-size:14px; color:var(--muted); margin-bottom:4px}
.h1{
  font-size:26px;
  font-weight:920;
  letter-spacing:-.3px;
  margin:0;
}
.sub{color:var(--muted); font-size:13px; margin-top:6px}
.topbar-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.hero{
  margin-top:14px;
  border:1px solid var(--stroke);
  border-radius:var(--r-xl);
  padding:18px;
  background:
    radial-gradient(900px 260px at 20% 40%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(820px 260px at 70% 10%, rgba(35,213,255,.12), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.hero:before{
  content:"";
  position:absolute;
  right:-140px; top:-160px;
  width:420px; height:420px;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.35), transparent 60%);
  filter: blur(2px);
  opacity:.8;
  transform: rotate(10deg);
}
.hero-row{
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  position:relative;
}
.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap:12px;
  width: min(820px, 100%);
}
@media (max-width: 680px){ .stats{grid-template-columns:1fr} }
.stat{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:12px 12px;
  background: rgba(0,0,0,.18);
}
.stat .k{color:var(--muted); font-size:12px}
.stat .v{font-size:22px; font-weight:900; margin-top:6px; letter-spacing:-.3px}
.stat .s{color:var(--muted); font-size:12px; margin-top:4px}

.panel{
  margin-top:14px;
  border:1px solid var(--stroke);
  border-radius:var(--r-xl);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.panel-head{
  padding:16px 16px 10px 16px;
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}
.panel h2{margin:0; font-size:16px; letter-spacing:.2px}
.panel-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.search{min-width: 240px}

/* Views */
.view{display:none; margin-top:14px; animation: fadeUp .22s ease both}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none}}

/* Buttons */
.btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:8px 10px;
  border-radius:14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08)}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(124,92,255,.18);
}
.btn.ghost{background: transparent}
.btn.danger{background: rgba(255,77,109,.14); border-color: rgba(255,77,109,.25)}
.btn.success{background: rgba(62,227,138,.16); border-color: rgba(62,227,138,.22)}
.btn.success:hover{background: rgba(62,227,138,.20)}
.btn.full{width:100%; justify-content:center}
.iconbtn{
  width:38px; height:38px;
  border-radius:14px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.iconbtn.success{background: rgba(62,227,138,.16); border-color: rgba(62,227,138,.22)}
.iconbtn.danger{background: rgba(255,77,109,.14); border-color: rgba(255,77,109,.22)}
.onlyicon{padding:10px; width:42px; height:42px; justify-content:center}

/* Inventory cards (rendered by JS) */
.listings{
  padding: 0 16px 16px 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(0,0,0,.18);
  padding:10px;
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap:12px;
  align-items:center;
}
@media (max-width: 720px){
  .card{grid-template-columns: 54px 1fr; grid-template-rows:auto auto; align-items:start}
  .card .actions{grid-column:1 / -1; justify-content:flex-start}
}
.thumb{
  width:64px; height:64px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.title{font-weight:900; letter-spacing:-.2px}
.meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.chip.good{border-color: rgba(62,227,138,.22); background: rgba(62,227,138,.10); color: rgba(234,240,255,.88)}
.chip.warn{border-color: rgba(255,209,102,.22); background: rgba(255,209,102,.10); color: rgba(234,240,255,.88)}
.chip.bad{border-color: rgba(255,77,109,.22); background: rgba(255,77,109,.10); color: rgba(234,240,255,.88)}
.price{font-weight:900}
.actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

/* Tools grid */
.tools-grid{
  padding: 0 16px 16px 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap:12px;
}
@media (max-width: 860px){ .tools-grid{grid-template-columns:1fr} }
.tool-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(0,0,0,.18);
  padding:14px;
}
.tool-title{font-weight:900}
.setting-card{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(255,255,255,.03);
  padding:12px;
}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.setting-actions{display:flex; gap:8px; align-items:center}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 720px){ .grid2{grid-template-columns:1fr} }
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.checkline{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px}
label{font-size:12px; color:var(--muted); margin-left:2px}

/* Switch */
.switch{position:relative; display:inline-block; width:54px; height:30px}
.switch input{display:none}
.slider{
  position:absolute; inset:0;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  transition: .18s ease;
}
.slider:before{
  content:"";
  position:absolute;
  height:24px; width:24px;
  left:3px; top:2px;
  background: rgba(255,255,255,.85);
  border-radius:999px;
  transition: .18s ease;
}
.switch input:checked + .slider{
  background: rgba(124,92,255,.35);
  border-color: rgba(124,92,255,.45);
}
.switch input:checked + .slider:before{ transform: translateX(24px); background: white }

/* Modal */
.modal{display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  z-index:80;
}
.modal-card{
  position:fixed;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(760px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow:auto;
  padding:16px;
  border-radius:20px;
  background: rgba(12,16,34,.88);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  z-index:90;
  backdrop-filter: blur(18px);
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.msg{padding:12px 16px; color:var(--muted); font-size:13px}

/* RTE toolbar (existing) */
.rtebar{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
.rtetool{padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:var(--text); cursor:pointer}
.rte{min-height:140px; padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}


/* Backward-compatible inventory row classes (admin.js) */
.listing-head{
  display:grid;
  grid-template-columns: 72px 1fr auto;
  gap:12px;
  padding:8px 10px;
  margin: 0 16px 8px 16px;
  color: var(--muted);
  font-size:12px;
}
.listing-head .head-right{justify-self:end}
.listing-row{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(0,0,0,.18);
  padding:10px;
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap:12px;
  align-items:center;
  margin: 0 16px;
}
.listing-row + .listing-row{margin-top:6px}
.l-title{font-weight:900; letter-spacing:-.2px}
.l-meta{color: var(--muted); font-size:12px}
.l-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
.chip.ok{border-color: rgba(62,227,138,.22); background: rgba(62,227,138,.10); color: rgba(234,240,255,.90)}
.chip.off{border-color: rgba(255,77,109,.22); background: rgba(255,77,109,.10); color: rgba(234,240,255,.90)}
.empty{
  margin: 16px;
  padding: 14px;
  border-radius: 16px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
@media (max-width: 720px){
  .listing-head{display:none}
  .listing-row{grid-template-columns: 54px 1fr; grid-template-rows:auto auto; align-items:start}
  .listing-row .l-actions{grid-column:1/-1; justify-content:flex-start}
}


/* Toast notifications */
.toast-stack{
  position:fixed;
  right:16px;
  bottom:16px;
  display:grid;
  gap:10px;
  z-index:200;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  width:min(360px, calc(100vw - 32px));
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:12px 12px;
  background: rgba(10,14,28,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  transform: translateY(10px);
  opacity:0;
  animation: toast-in .22s ease forwards;
}
.toast .t-title{font-weight:900; letter-spacing:-.2px; margin-bottom:2px}
.toast .t-body{color: var(--muted); font-size:13px; line-height:1.35}
.toast.ok{border-color: rgba(62,227,138,.30)}
.toast.bad{border-color: rgba(255,77,109,.30)}
.toast.warn{border-color: rgba(255,209,102,.30)}
.toast .t-x{
  position:absolute;
  top:8px; right:8px;
  width:30px; height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
@keyframes toast-in{to{transform: translateY(0); opacity:1}}
@keyframes toast-out{to{transform: translateY(10px); opacity:0}}

@media (min-width: 981px){#sbToggle{display:none}}

.panel-head h2{margin:0}
.panel-head .muted.tiny{margin-top:4px}

/* Inventory table layout */
.invtable{margin-top:8px}
.invhead{
  display:grid;
  grid-template-columns: 1.2fr .9fr 90px 90px 270px;
  gap:12px;
  padding:8px 10px;
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size:12px;
}
.invhead .right{text-align:right}
.invrow .right{text-align:right}
.invhead .center{text-align:center}
.invrow .center{text-align:center}
.invrow{
  display:grid;
  grid-template-columns: 1.2fr .9fr 90px 90px 270px;
  gap:12px;
  align-items:center;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.invrow:first-child{border-top:1px solid rgba(255,255,255,.10)}
.invrow:hover{background: rgba(255,255,255,.03)}
.invitem{display:flex; align-items:center; gap:10px; min-width:0}
.invthumb{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  object-fit:cover;
  flex:0 0 auto;
}
.invtitle{font-weight:900; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.invmicro{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.invplat{display:flex; gap:6px; flex-wrap:wrap}
.pltag{
  font-size:12px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(234,240,255,.86);
}
.invnum{text-align:right; font-variant-numeric: tabular-nums}
.invstock{display:flex;justify-content:center;align-items:center;min-height:20px;}
.invactions{display:flex; justify-content:flex-end; gap:8px}
@media (max-width: 860px){
  .invhead{display:none}
  .invrow{
    grid-template-columns: 1fr;
    gap:8px;
    padding:12px;
  }
  .invactions{justify-content:flex-start}
  .invnum{text-align:left}
}

/* Platform buttons in modal */
.platforms{display:flex; flex-wrap:wrap; gap:8px}
.platbtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  user-select:none;
  max-width:100%;
}
.platbtn input{display:none}
.platbtn-icos{display:flex; gap:6px; align-items:center}
.platbtn-icos img{height:28px; width:auto; display:block; opacity:.95}
.platbtn-text{font-size:13px; color: rgba(234,240,255,.90)}
.platbtn.off{opacity:.55; filter:saturate(.7)}

.modal-card{max-width: 980px}
.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
@media (max-width: 820px){ .form-grid{grid-template-columns:1fr} }
.form label{margin-top:10px}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 520px){ .form .two{grid-template-columns:1fr} }

/* Discord-like settings layout */
.settings-layout{display:grid; gap:12px; margin-top:10px}
.setting-group{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
.setting-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
}
.setting-title{font-weight:900; letter-spacing:-.2px}
.setting-right{display:flex; align-items:center; gap:10px}
.collapse{
  max-height:0;
  overflow:hidden;
  transition: max-height .28s ease;
  border-top:1px solid rgba(255,255,255,.08);
}
.collapse.open{max-height: 1000px}
.collapse-inner{padding:14px}
.empty-state.slim{padding:8px 10px; border-radius:14px}

/* System modal (success / activated) */
.sysmodal{display:none; position:fixed; inset:0; z-index:210}
.sysmodal.active{display:block}
.sysmodal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.60); backdrop-filter: blur(3px)}
.sysmodal-card{
  position:relative;
  width:min(520px, calc(100vw - 32px));
  margin: 10vh auto 0 auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,14,28,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.50);
  overflow:hidden;
}
.sysmodal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.sysmodal-title{font-weight:950; letter-spacing:-.2px}
.sysmodal-body{padding:14px 14px; color: var(--muted); line-height:1.4}
.sysmodal-actions{padding:14px 14px; display:flex; justify-content:flex-end; gap:10px}

/* Pagination */
.pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0 2px 0;
  color: var(--muted);
}
.page-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pagepill{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.pagepill.active{border-color: rgba(124,92,255,.40); background: rgba(124,92,255,.14)}
.pagepill:disabled{opacity:.5; cursor:not-allowed}

/* Image tools under dropzone */
.imgtools{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

/* --- Hero v2 (type-led) --- */
.hero2{
  margin-top:10px;
  padding:14px 0 10px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hero2-top{display:grid; gap:6px}
.hero2-kicker{font-size:12px; color:var(--muted2); letter-spacing:.2px}
.hero2-title{font-size:28px; font-weight:950; letter-spacing:-.6px; line-height:1.05}
.hero2-sub{color:var(--muted); font-size:13px; max-width:70ch}
.hero2-stats{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap:10px;
}
.statline{
  padding:10px 0;
  
}
.statlabel{font-size:12px; color:var(--muted2)}
.statvalue{font-size:16px; font-weight:900; letter-spacing:-.2px; margin-top:4px}
@media (max-width: 720px){
  .hero2-stats{grid-template-columns:1fr}
}

/* Panels (structure over containers) */
.panel{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(16,19,26,.55);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.panel-head.compact{padding:12px 14px}
.panel-left{display:grid; gap:4px}
.panel-title{font-weight:950; letter-spacing:-.3px; font-size:16px}
.panel-sub{max-width:70ch}

.search{
  width:min(380px, 100%);
  border-radius:10px;
  background: rgba(0,0,0,.20);
}

/* Inventory table refinements */
.invtable{padding:0 0}
.invhead{
  display:grid;
  grid-template-columns: 1.2fr .9fr 84px 92px 150px;
  gap:12px;
  padding:10px 14px;
  color: var(--muted2);
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.invrow{
  display:grid;
  grid-template-columns: 1.2fr .9fr 84px 92px 150px;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.invrow:hover{background: rgba(255,255,255,.02)}
.invthumb{width:38px;height:38px;border-radius:10px}
.invactions .btn{border-radius:10px}
@media (max-width: 860px){
  .invhead{display:none}
  .invrow{grid-template-columns:1fr; gap:8px}
}

/* Tools (settings list) */
.settings-layout{margin-top:0}
.setting-group{border:none; border-radius:0; background:transparent}
.setting-top{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.setting-group:first-child .setting-top{border-top:none}
.setting-right .btn{border-radius:10px}
.collapse{border-top:none; border-bottom:1px solid rgba(255,255,255,.07)}
.collapse-inner{padding:12px 14px; background: rgba(0,0,0,.10)}

/* Skeletons */
.skel{
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border-radius:10px;
}
.skel:after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer{to{transform: translateX(100%)}}
.skel-row{
  display:grid;
  grid-template-columns: 1.2fr .9fr 84px 92px 150px;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  align-items:center;
}
.skel-block{height:12px}
.skel-thumb{width:38px;height:38px;border-radius:10px}

.invhheadpad{padding:0}
.invheadbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.invh-title{font-size:18px;font-weight:950;letter-spacing:-.3px}
.invh-stats{display:flex; gap:10px; justify-content:center; flex:1}
.kpi{border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); border-radius:12px; padding:8px 10px; min-width:100px}
.kpi .k{font-size:11px;color:var(--muted2)}
.kpi .v{font-size:16px;font-weight:950;margin-top:4px}
.invh-right{display:flex; gap:10px; align-items:center}
.invh-right .search{width:min(320px, 46vw)}
@media (max-width: 980px){
  .invheadbar{flex-direction:column; align-items:stretch}
  .invh-stats{justify-content:flex-start}
  .invh-right{width:100%}
  .invh-right .search{width:100%}
}

.dash{padding:14px}
.dash-metrics{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px}
.mcard{border:1px solid rgba(255,255,255,.08); background: rgba(16,19,26,.45); border-radius:12px; padding:12px}
.mlabel{font-size:12px;color:var(--muted2)}
.mvalue{margin-top:6px;font-size:18px;font-weight:950}
.dash-grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chartcard{border:1px solid rgba(255,255,255,.08); background: rgba(16,19,26,.45); border-radius:12px; padding:12px}
.charthead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.charttitle{font-weight:900}
.chartcard.span2{grid-column:1/-1}
.chip{border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--muted)}
@media (max-width:980px){.dash-metrics{grid-template-columns:1fr 1fr}.dash-grid{grid-template-columns:1fr}}
.topbar-left{display:flex;align-items:center}.topbar-title{font-size:16px;font-weight:950;letter-spacing:-.2px}
.topbar-title.prominent{font-size:20px; line-height:1.1}


/* Settings / Integrations */
.integrations-list{display:grid; gap:10px; padding: 12px 0 4px 0}
.integration-item{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(0,0,0,.18);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.integration-left{display:flex; align-items:center; gap:12px; min-width:0}
.integration-badge{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
}
.integration-badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  display:block;
}
.integration-badge.gf{
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.22);
}
.integration-badge.placeholder{
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(234,240,255,.80);
  background: rgba(255,255,255,.05);
}
.integration-item.is-soon{opacity:.72}
.integration-item.is-soon .integration-badge{position:relative; overflow:hidden}
.integration-item.is-soon .integration-badge::after{
  content:"COMING";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:950;
  letter-spacing:.18em;
  color: rgba(234,240,255,.94);
  background: rgba(0,0,0,.38);
}
.integration-item.is-soon .btn{opacity:.5; cursor:not-allowed}
.integration-title{font-weight:900; letter-spacing:-.2px}
.integration-right{display:flex; align-items:center; gap:10px}

/* Banner compact editor */
.collapse-inner.compact{padding-top:12px}
.collapse-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.banner-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.banner-grid .span2{grid-column: span 2;}
.banner-grid .span3{grid-column: span 3;}
.banner-grid .checkcell{
  display:flex;
  align-items:flex-end;
  padding-bottom:2px;
}
@media (max-width: 860px){
  .banner-grid{grid-template-columns: 1fr}
  .banner-grid .span2,
  .banner-grid .span3{grid-column: auto;}
}

/* Modal sizing */
.modal-card.wide{max-width: 860px}
.modal-card.xl{max-width: 980px}
.nerd-body{
  padding: 0 18px 18px 18px;
  display:grid;
  gap:12px;
}
.nerd-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 860px){
  .nerd-grid{grid-template-columns: 1fr}
}
.nerd-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(0,0,0,.18);
  padding:12px;
}
.nerd-card .title{font-size:14px}


/* Integrations dropdown layout */
.integration-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  padding: 8px 0 2px 0;
}
.integration-grid--soon{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.integration-item.cardish{background: rgba(0,0,0,.16)}
.integration-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0 4px 0;
  margin-top: 2px;
}
.integration-subhead .chip{opacity:.9}
@media (max-width: 980px){
  .integration-grid--soon{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 860px){
  .integration-grid{grid-template-columns:1fr}
  .integration-grid--soon{grid-template-columns:1fr}
}

/* =========================================
   Settings → Integrations (Gemini-style tiles)
   ========================================= */
.integration-tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,.08);
}

.integration-tile{
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.integration-tile:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(0,0,0,0.40);
}
.integration-tile.is-soon{ opacity: .82; }

.integration-tile-imgwrap{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integration-tile-img{ max-width:100%; max-height:100%; object-fit:contain; }

.integration-tile-meta{
  flex-grow: 1;
  min-width: 0;
}
.integration-tile-title{ font-weight: 700; color: var(--text); margin-bottom: 2px; }
.integration-tile-sub{ margin-top: 2px; }

.integration-tile-badges{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Status pills (connected / disconnected) */
.pill{ display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.pill-soon{ background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid rgba(255,255,255,0.10); }
.pill-state{ border: 1px solid transparent; }
.pill-state.good{ background: rgba(62, 227, 138, 0.15); color: var(--good); border-color: rgba(62, 227, 138, 0.30); }
.pill-state.bad{ background: rgba(255, 85, 85, 0.14); color: rgba(255, 180, 180, .95); border-color: rgba(255, 85, 85, 0.30); }

.btn.btn-sm{ padding: 8px 10px; font-size:12px; border-radius: 12px; }

/* Banner modal + rich text editor */
.modal-card.banner-modal{max-width: 980px}
.banner-formgrid{grid-template-columns: repeat(2, minmax(0,1fr))}
.banner-formgrid .span2{grid-column: 1 / -1}
@media (max-width: 860px){
  .banner-formgrid{grid-template-columns:1fr}
}

.colorrow{display:flex; align-items:center; gap:10px}
.colorrow input[type="color"]{
  width:36px; height:36px; padding:0;
  border-radius:10px;
  border:none;
  background: transparent;
  overflow:hidden;
  cursor:pointer;
}

.colorrow input[type="color"]::-webkit-color-swatch-wrapper{padding:0}

.colorrow input[type="color"]::-webkit-color-swatch{border:none; border-radius:10px}

.colorrow input[type="color"]::-moz-color-swatch{border:none; border-radius:10px}


.btnopts{border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:12px; background: rgba(0,0,0,.16)}

.rte{border:1px solid rgba(255,255,255,.12); border-radius:16px; background: rgba(0,0,0,.14); padding:12px}
.rtebar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:10px}
.rtebar select{
  height:36px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: #e9e9ff;
  padding: 0 10px;
}
.rtesep{width:1px; height:22px; background: rgba(255,255,255,.14); margin:0 4px}
.iconbtn.sm{width:36px; height:36px; border-radius:12px}
.rtearea{
  min-height: 140px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  outline: none;
}
.rtearea:focus{border-color: rgba(124,92,255,.45); box-shadow: 0 0 0 3px rgba(124,92,255,.16)}

/* Simple font/size classes used by the banner editor */
.rtearea .font-sans{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.rtearea .font-serif{font-family: ui-serif, Georgia, 'Times New Roman', Times, serif}
.rtearea .font-mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace}
.rtearea .text-sm{font-size: 13px}
.rtearea .text-md{font-size: 15px}
.rtearea .text-lg{font-size: 18px}

.rtebar .iconbtn.sm{color: rgba(234,240,255,.92)}
.rtebar .iconbtn.sm b, .rtebar .iconbtn.sm i, .rtebar .iconbtn.sm u{color: inherit}

.integration-badge img{width:100%; height:100%; object-fit:cover; border-radius:12px}

/* Banner live preview (admin modal) */
.bprev-wrap{margin-top:10px}
.banner-live{
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: var(--bprev-bg, rgba(0,0,0,.22));
  padding: 12px 14px;
  position:relative;
  overflow:hidden;
  min-height:52px;
}
.banner-live.sheen:before{
  content:"";
  position:absolute; inset:-40% -20%;
  background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  transform: rotate(-8deg);
  pointer-events:none;
}
.banner-live.preset-default{background: linear-gradient(90deg, rgba(110,88,255,.22), rgba(30,219,255,.18));}
.banner-live.preset-promotion{background: linear-gradient(90deg, rgba(255,55,161,.18), rgba(91,92,255,.18));}
.banner-live.preset-maintenance{
  background:
    linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
    repeating-linear-gradient(135deg, rgba(255,214,0,.22) 0 10px, rgba(0,0,0,.14) 10px 20px);
}
.banner-live .bprev-solid{display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; flex-wrap:wrap}
.banner-live .bprev-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 12px;
  border-radius:999px;
  color:white;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.banner-live.is-sliding .bprev-track{
  display:flex; gap:40px;
  white-space:nowrap;
  will-change:transform;
  animation: bprev-marq var(--bprev-speed, 14s) linear infinite;
}
.banner-live.is-sliding:hover .bprev-track{animation-play-state: paused}
.banner-live .bprev-inner{display:inline-flex; align-items:center; gap:10px}
@keyframes bprev-marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.banner-formgrid label.row{display:flex; align-items:center; gap:10px; margin:0}

.banner-formgrid input[type=checkbox]{width:16px; height:16px}

/* Disabled control grouping (used for button options in scrolling mode) */
.banner-formgrid .is-disabled{opacity:.55; filter:saturate(.75);}
.banner-formgrid .is-disabled *{cursor:not-allowed;}

input.is-locked, select.is-locked{opacity:.55; filter:saturate(.75)}


/* Modal close button should be visible on dark heads */
.modal-head .iconbtn{color:rgba(255,255,255,.92)}
.modal-head .iconbtn:hover{color:#fff}


/* ---------- Feedback Marquee ---------- */
.gv-marquee{
  position: sticky;
  top: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(16,19,26,0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  margin: 0;
}
.gv-marquee:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px circle at 18% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(124,92,255,.14), rgba(255,255,255,.02));
  pointer-events:none;
  opacity:.75;
}
.gv-marquee-track{
  display:flex;
  gap:12px;
  width:max-content;
  padding: 10px 12px;
  animation: gv-marquee 28s linear infinite;
  position: relative;
  z-index: 1;
  will-change: transform;
}
@keyframes gv-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.gv-pill{
  display:flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.gv-pill .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(124,92,255,.95);
  box-shadow: 0 0 0 4px rgba(124,92,255,.18);
}
.gv-pill b{ font-size: 12px; letter-spacing:.2px; }
.gv-pill span{ font-size: 12px; color: rgba(234,240,255,.72); }
@media (prefers-reduced-motion: reduce){
  .gv-marquee-track{ animation: none; }
}


/* ---------- Dashboard (NexusTools-ish spacing, Ghouls colors) ---------- */
.dash-wrap{ padding: 0; }

.dashboard-hero{ margin-bottom: 14px; }
.dashboard-hero-actions{ display:flex; align-items:stretch; justify-content:flex-end; }
@media (max-width: 980px){
  .dashboard-hero-actions{ width:100%; justify-content:stretch; }
}

.dash-earnings-mini{
  width: min(520px, 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(255,209,102,.10), transparent 55%),
    radial-gradient(520px 220px at 85% 0%, rgba(124,92,255,.18), transparent 55%),
    rgba(0,0,0,.16);
  overflow:hidden;
}
.dash-earnings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dash-earnings-title{
  font-weight: 950;
  letter-spacing: .2px;
}

.dash-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.dash-card{
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  background: rgba(16,19,26,0.70);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  overflow:hidden;
}
.dash-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-card-title{ font-weight: 850; letter-spacing: .2px; }

/* Chart sizing: smoother on mobile */
.dash-chart{
  padding: 10px 12px 14px 12px;
  height: clamp(220px, 32vw, 340px);
  position: relative;
}
.dash-chart canvas{
  width:100% !important;
  height:100% !important;
}

.dash-metrics-compact{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px 16px 0 16px;
}
@media (max-width: 560px){
  .dash-metrics-compact{ grid-template-columns: 1fr; }
}

.dash-card.span-full{ grid-column: 1 / -1; }

.seg{
  display:inline-flex;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  gap:4px;
  flex-shrink:0;
}
.segbtn{
  border:0;
  background: transparent;
  color: rgba(234,240,255,.78);
  padding:7px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}
.segbtn:hover{ background: rgba(255,255,255,.06); color: rgba(234,240,255,.92); }
.segbtn.active{
  background: rgba(124,92,255,.22);
  color: rgba(234,240,255,.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.sales-list{
  padding: 10px 16px 14px 16px;
  display:grid;
  gap:10px;
}

.sales-subhead{
  padding: 0 16px 8px 16px;
  display:flex;
  justify-content:flex-end;
}
.seg.seg-small .segbtn{ padding: 7px 12px; font-size: 12px; border-radius: 999px; }
.sale-row:not(.grid){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.sale-left{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.sale-title{ font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sale-meta{ font-size:12px; color: rgba(234,240,255,.62); display:flex; gap:10px; flex-wrap:wrap; }
.sale-right{ text-align:right; display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.sale-price{ font-weight:900; }
.sale-chan{ font-size:12px; color: rgba(234,240,255,.62); }



/* Recent Sales: table-like layout */
.sales-head{
  display:grid;
  /* thumb | item | sold | platform | note | status | price | chat */
  grid-template-columns: 46px 1.4fr 80px 95px 170px 120px 120px 90px;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: rgba(234,240,255,.55);
  font-size: 12px;
  letter-spacing: .02em;
}
.sale-wrap{ display:block; }
.sale-row.grid{
  display:grid;
  grid-template-columns: 46px 1.4fr 80px 95px 170px 120px 120px 90px;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

/* Compact layout (notes/chat removed) */
.sales-head.no-chat,
.sale-row.grid.no-chat{
  /* thumb | item | date | status | price | actions */
  grid-template-columns: 46px 1.4fr 80px 120px 120px 190px;
}
.sale-thumb{ width:46px; height:46px; border-radius: 12px; overflow:hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.sale-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sale-thumb-ph{ width:100%; height:100%; background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,0,0,.05)); }
.sale-thumb-ph{ position:relative; }
.sale-thumb-ph::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  opacity:.75;
}
.sale-item{ min-width:0; }
.sale-item .sale-title{
  font-weight:900;
  font-size:16px;
  line-height: 1.2;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sale-item .sale-meta{ display:none; }
.sale-age-col, .sale-platform-col{ color: rgba(234,240,255,.70); font-size:12px; }
.sale-note-col{ color: rgba(234,240,255,.72); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sale-status-col{ color: rgba(234,240,255,.72); font-size:12px; }
.ta-r{ text-align:right; }
.pill.tiny{ padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); font-size: 11px; }
.btn.tiny{ padding: 6px 10px; font-size: 12px; border-radius: 10px; }

.sale-price .money-usd{ font-weight: 900; font-size: 14px; }
.sale-price .money-gbp{ margin-top: 3px; font-size: 11px; color: rgba(234,240,255,.62); }

.sale-expand{
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.sale-note{ font-size: 13px; color: rgba(234,240,255,.90); margin-top: 4px; }

/* Responsive: collapse columns on smaller widths */
@media (max-width: 860px){
  .sales-head{
    /* thumb | item | price | chat */
    grid-template-columns: 46px 1fr 120px 90px;
  }
  .sale-row.grid{
    grid-template-columns: 46px 1fr 120px 90px;
  }
  .sales-head.no-chat,
  .sale-row.grid.no-chat{
    /* thumb | item | price | actions */
    grid-template-columns: 46px 1fr 120px 160px;
  }
  .hide-sm{ display:none; }
}

/* Status pills */
.pill.outline-green{ background: transparent; border-color: rgba(72, 255, 149, .55); color: rgba(193,255,223,.96); }
.pill.outline-yellow{ background: transparent; border-color: rgba(255, 214, 66, .55); color: rgba(255,238,186,.96); }

/* Subhead row under Listings tabs */
.sales-subhead{ margin-top: 12px; display:flex; justify-content:flex-end; }
.seg.seg-small .segbtn{ padding: 6px 10px; font-size: 12px; border-radius: 999px; }

/* Earnings card */
.earnings-card{
  padding: 14px 16px 16px 16px;
}
.earnings-primary{
  font-weight: 950;
  font-size: 26px;
  letter-spacing: -.3px;
}
.earnings-secondary{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(234,240,255,.70);
}

/* Chat modal */
.gv-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}
.gv-modal[aria-hidden="false"]{ display:block; }
.gv-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.66);
}
.gv-modal-panel{
  position: relative;
  width: min(760px, calc(100vw - 24px));
  max-height: min(78vh, 760px);
  margin: 10vh auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(16,19,26,.92);
  box-shadow: 0 24px 60px rgba(0,0,0,.52);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
@media (max-width: 560px){
  .gv-modal-panel{ margin: 7vh auto; max-height: 82vh; }
}
.gv-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gv-modal-title{ font-weight: 950; letter-spacing: -.2px; }
.gv-modal-sub{ margin-top:4px; color: rgba(234,240,255,.70); font-size: 12px; }
.gv-modal-close{ width:38px; height:38px; display:grid; place-items:center; border-radius: 12px; }
.gv-modal-body{ padding: 12px 14px 14px 14px; overflow:auto; }

/* ---------- Library (Patrons Tools) tweaks ---------- */
.library-keygen{ padding-top:12px; display:grid; gap:10px; }
.library-keygen-form{ display:grid; gap:10px; }
.library-label{ display:grid; gap:6px; }
.library-label span{ font-size: 12px; color: rgba(234,240,255,.70); }
.library-keygen-form .btn.primary{ height:44px; justify-content:center; }


/* ---------- Admin Library page (Tools -> Library) ---------- */
.lib-topgrid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  align-items:stretch;
}
@media (max-width: 980px){
  .lib-topgrid{ grid-template-columns: 1fr; }
}

.lib-summary .panel-head{ padding-bottom: 10px; }
.lib-summary-title{
  display:flex;
  align-items:center;
  gap: 12px;
}
.lib-summary-title i{ width:18px; height:18px; color: rgba(234,240,255,.92); }
.lib-metrics{
  padding: 0 14px 14px 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lib-metric{
  position:relative;
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.lib-metric:before{
  content:'';
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 180px at 15% 0%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(520px 180px at 85% 0%, rgba(59,130,246,.20), transparent 55%);
  opacity: .85;
  pointer-events:none;
}
.lib-metric .k{ position:relative; font-size:12px; font-weight: 800; color: rgba(234,240,255,.72); }
.lib-metric .v{ position:relative; margin-top: 8px; font-size: 22px; font-weight: 950; letter-spacing: -.3px; color:#fff; }

.lib-keygen .panel-head{ padding-bottom: 10px; }
.kg-form{ padding: 0 14px 14px 14px; }
.kg-row{
  display:flex;
  gap: 12px;
  align-items:flex-end;
}
.kg-field{ flex: 0 0 auto; }
.kg-qty{ width: 120px; height: 44px; }
.kg-generate{ height:44px; flex: 1 1 auto; justify-content:center; gap:10px; }

/* Tools page keygen: keep button inside card and prevent overflow */
#gvKeygenCard .kg-row{ flex-wrap:wrap; }
#gvKeygenCard .kg-field{ flex: 0 0 140px; }
#gvKeygenCard .kg-qty{ width: 140px; }
#gvKeygenCard .kg-generate{ flex: 1 1 220px; width:auto; min-width: 220px; justify-content:center; }

@media (max-width: 520px){
  #gvKeygenCard .kg-field{ flex: 1 1 100%; }
  #gvKeygenCard .kg-generate{ min-width: 0; width:100%; }
}


/* Premium stat rings */
.gv-statgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gv-stat{
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  padding: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.gv-stat:before{
  content:'';
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(520px 220px at 95% 0%, rgba(59,130,246,.20), transparent 55%),
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  opacity: .85;
  pointer-events:none;
}
.gv-stat-ring{ position:relative; width: 44px; height: 44px; flex: 0 0 44px; }
.gv-stat-ring svg{ width:44px; height:44px; transform: rotate(-90deg); filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.gv-stat-ring circle{ fill:none; stroke-width: 4.4; }
.gv-stat-ring circle.bg{ stroke: rgba(255,255,255,.10); }
.gv-stat-ring circle.fg{
  stroke: rgba(124,92,255,.92);
  stroke-linecap: round;
  transition: stroke .2s ease;
}
.gv-stat-meta{ position:relative; min-width: 0; }
.gv-stat-k{ font-size:12px; font-weight: 850; color: rgba(234,240,255,.72); letter-spacing:.2px; }
.gv-stat-v{ margin-top: 6px; font-size: 24px; font-weight: 950; letter-spacing: -.4px; color:#fff; }
.gv-stat:hover .gv-stat-ring circle.fg{ stroke: rgba(160,140,255,.95); }

/* Keygen layout polish */
.panel.lib-keygen{ display:flex; flex-direction:column; }
.kg-form{
  padding: 0 14px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.kg-field{ width:100%; }
.kg-row{ justify-content:space-between; }
.kg-qty{ width: 130px; }
.lib-keygen .muted.tiny{ padding: 0 14px 14px 14px; }
.lib-keygen .kg-pending{ margin-top:auto; }

@media (max-width: 520px){
  .gv-statgrid{ grid-template-columns: 1fr; }
  .gv-stat{ padding: 12px; border-radius: 16px; }
  .gv-stat-ring{ width: 40px; height:40px; flex-basis:40px; }
  .gv-stat-ring svg{ width:40px; height:40px; }
  .gv-stat-v{ font-size: 22px; }
  .kg-row{ flex-direction:column; align-items:stretch; }
  .kg-qty{ width: 100%; }
  .kg-generate{ width:100%; }
}

.kg-pending{
  margin: 0 14px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
}
.kg-pending-title{ font-weight: 950; letter-spacing: -.2px; color:#fff; }
.kg-pending-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.kg-pending-actions .btn{ height: 40px; }

/* Tutorial cards (admin library) */
.admin-tut-grid{
  padding: 12px 14px 14px 14px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.admin-tut-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 280px;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.admin-tut-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.admin-tut-media{
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  height: 150px;
}
.admin-tut-media::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--tut-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.admin-tut-card:hover .admin-tut-media::before{ transform: scale(1.08); }
.admin-tut-media-fade{
  position:absolute; inset:0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    radial-gradient(800px 220px at 10% 0%, rgba(124,92,255,.18), transparent 60%);
}
.admin-tut-media-fallback{
  position:absolute; inset:0;
  z-index: 2;
  display:grid; place-items:center;
  color: rgba(234,240,255,.70);
  font-weight: 900;
  letter-spacing: -.2px;
}
.admin-tut-body{
  padding: 14px 14px 10px 14px;
  display:grid;
  gap: 8px;
  flex: 1 1 auto;
}
.admin-tut-title{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.3px;
  color:#fff;
  line-height: 1.2;
}
.admin-tut-desc{
  color: rgba(234,240,255,.70);
  font-size: 13px;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 36px;
}

.admin-tut-actions{
  padding: 0 14px 14px 14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}
.iconbtn{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  color: rgba(234,240,255,.92);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.iconbtn i{ width:18px; height:18px; }
.iconbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.iconbtn:active{ transform: translateY(0px) scale(.99); }

/* Stats modal */
.gv-stats-modal .gv-modal-body{ padding-top: 14px; }
.stats-hero{
  padding: 10px 0 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.stats-hero-title{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.3px;
  color:#fff;
}
.stats-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.72);
  font-size: 12px;
  font-weight: 800;
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 560px){ .stats-grid{ grid-template-columns: 1fr; } }
.stats-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.stats-k{ color: rgba(234,240,255,.70); font-size: 12px; font-weight: 800; }
.stats-v{ margin-top: 6px; font-size: 20px; font-weight: 950; letter-spacing: -.2px; color:#fff; }
.stats-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.stats-actions .btn{ height: 44px; display:inline-flex; align-items:center; gap:10px; }


.gv-keys-modal .gv-modal-body{ padding-top: 14px; }
.gv-keys-list{ margin-top: 12px; display:grid; gap:10px; }
.gv-key-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.gv-key-row code{ font-weight: 800; }
.chat-thread{ display:grid; gap:10px; }
.chat-bubble{ max-width: 86%; padding: 10px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.chat-bubble.seller{ margin-left:auto; background: rgba(124,92,255,.16); border-color: rgba(124,92,255,.20); }
.chat-meta{ margin-top:6px; font-size: 11px; color: rgba(234,240,255,.62); }
.chat-empty{ padding: 10px 12px; border-radius: 14px; border:1px dashed rgba(255,255,255,.12); color: rgba(234,240,255,.72); }

/* Chat button */
.btn.chatbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn.chatbtn .ico{ font-size: 13px; }

/* --- Patch: signed-in line + allow navbtn anchors --- */
.sb-signedin{
  margin-top:8px;
  font-size:12px;
  color: var(--muted);
}
.sidebar .navbtn{ text-decoration:none; display:flex; }


/* ---------- Sidebar polish (requested) ---------- */
.sidebar{
  background: linear-gradient(180deg, rgba(14,16,20,.98), rgba(6,7,9,.99));
  border-right: 1px solid rgba(255,255,255,.06);
  backdrop-filter: none;
}

.sb-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px 14px 10px;
}
.sb-logo-wrap{
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.sb-logoimg{
  width: 88px;
  height: 88px;
  object-fit: contain;
  display:block;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.sb-brand{display:flex; flex-direction:column; justify-content:center;}
.sb-title{
  font-weight: 950;
  line-height: 1.02;
}
.sb-ghouls{
  font-family: 'Bitsumishi', var(--font);
  color: #7C5CFF;
  font-size: 20px;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
/* subtle blue accent */
.sb-vault{
  font-family: 'Bitsumishi', var(--font);
  color: var(--text);
  font-size: 34px;
  letter-spacing: 0.18em;
  font-weight: 900;
  text-transform: uppercase;
  display:inline-block;
  transform: scaleX(1.08);
  transform-origin: left center;
  white-space: nowrap;
}
.sb-sub{display:none;}
.sb-nav{ margin-top: 12px; gap: 10px; }

.navbtn{
  text-decoration: none;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.navbtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}

.navbtn.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(111,168,255,.32);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.nav-ico{
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}

.nav-txt{
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.96);
  letter-spacing: .2px;
}

.sb-foot{
  padding-top: 14px;
  display: grid;
  gap: 10px;
}

.sb-help{ margin-bottom: 2px; }

.sb-signedin{
  margin-top: 4px;
  text-align: center;
}

.btn.full{ width: 100%; }


/* --- Flicker guard: prevent subpixel shift on nav interactions --- */
.navbtn:hover,.navbtn:active,.navlink:hover,.navlink:active{transform:none !important;}
.navbtn,.navlink{transition: background .14s ease, border-color .14s ease;}
.sidebar{transform: translateZ(0);}














/* Appended from patron style.css - visual match only - updated to remove underlines */

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    background-color: #0f172a; 
    color: #e2e8f0; 
    line-height: 1.6; 
    background: 
        linear-gradient(to bottom, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), 
        url('/media/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

.sidebar {
    width: 280px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #111827; 
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

.sidebar-top {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-top .logo {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 0.5rem;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.sidebar-nav { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 0.4rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.25rem;
    color: #94a3b8;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid transparent;
    text-decoration: none;          /* removes any default underline */
}

.sidebar-link:hover,
.sidebar-link:focus {
    background: rgba(255, 255, 255, 0.03);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;          /* ensures no underline on hover */
}

.sidebar-link.active {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.sidebar-link i {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.sidebar-link:hover i { opacity: 1; }

.sidebar-link.active i { opacity: 1; }

.sidebar-footer { 
    margin-top: auto; 
    padding-top: 1.25rem; 
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
}

.logout-link { 
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff !important; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-decoration: none;
}

.logout-link:hover { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; 
    box-shadow: 0 6px 15px rgba(220, 38, 38, 0.5);
    transform: translateY(-2px);
    text-decoration: none;
}

.user-info { 
    font-size: 0.75rem; 
    color: #475569; 
    text-align: center; 
    font-weight: 500;
}

/* Header and mobile remain unchanged from previous append */
header {
    position: fixed;
    top: 0;
    left: 280px; 
    right: 0;
    height: 80px;
    z-index: 900;
    display: flex;
    align-items: center;
    padding: 0 3rem;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-right { display: flex; align-items: center; gap: 1.5rem; }

.btn-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s;
    gap: 0.5rem;
    border: 1px solid transparent;
}
.btn-header i { width: 16px; height: 16px; }

.btn-header-primary {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 2px 5px rgba(99, 102, 241, 0.3);
}
.btn-header-primary:hover { background: #4f46e5; transform: translateY(-1px); }

.btn-header-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}
.btn-header-secondary:hover { 
    background: rgba(255, 255, 255, 0.1); 
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.hamburger { display: none; font-size: 1.5rem; color: #fff; cursor: pointer; }

@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .sidebar.open { transform: translateX(0); }
    header { left: 0; padding: 0 1.5rem; justify-content: space-between; }
    .main-content { margin-left: 0; padding: 7rem 1.5rem 2rem; }
    .hamburger { display: block; margin-right: 1rem; }
    .header-inner { justify-content: flex-end; }
    .header-right { gap: 1rem; }
}

/* Make Lucide icons white and same size as old emojis */
.sidebar-link i {
  width: 20px;
  height: 20px;
  color: white !important;  /* force white even on hover/active */
}

/* === Patron Parity Overrides START === */

/* These rules map Admin components to the Patron UI look & feel (glass cards, gradients, spacing).
   Logic/IDs remain untouched – styling only. */

/* ---- Shared variables ---- */
:root{
  --gv-bg: #0f172a;
  --gv-fg: #e2e8f0;
  --gv-muted: #94a3b8;
  --gv-card-bg: rgba(30, 41, 59, 0.4);
  --gv-card-border: rgba(255, 255, 255, 0.08);
  --gv-card-shadow: 0 4px 6px -1px rgba(0,0,0,.10);
  --gv-card-radius: 16px;
  --gv-btn-radius: 12px;
  --gv-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

/* ---- Page background + typography ---- */
body{
  background: var(--gv-bg) !important;
  color: var(--gv-fg) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ---- Header (Patron-style) ---- */
.app-header{
  position: fixed;
  top: 0;
  left: 280px;
  right: 0;
  height: 80px;
  z-index: 900;
  display: flex;
  align-items: center;
  padding: 0 3rem;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.header-right{
  display:flex;
  align-items:center;
  gap: 1rem;
}
.hamburger{
  display:none;
  font-size: 1.5rem;
  color:#fff;
  cursor:pointer;
  background: transparent;
  border: 0;
  padding: 10px;
  border-radius: 12px;
}
.hamburger:hover{ background: rgba(255,255,255,0.06); }

/* Header buttons match Patron */
.btn-header{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  transition: all .2s;
  gap: .5rem;
  border: 1px solid transparent;
  text-decoration:none;
}
.btn-header i{ width:16px; height:16px; }

.btn-header-primary{
  background: #6366f1;
  color:#fff;
  box-shadow: 0 2px 5px rgba(99,102,241,0.30);
}
.btn-header-primary:hover{ background:#4f46e5; transform: translateY(-1px); }

.btn-header-secondary{
  background: rgba(255,255,255,0.05);
  color:#cbd5e1;
  border-color: rgba(255,255,255,0.10);
}
.btn-header-secondary:hover{
  background: rgba(255,255,255,0.10);
  color:#fff;
  border-color: rgba(255,255,255,0.20);
}

.user-display{
  text-align:right;
  font-size: .9rem;
  color: #94a3b8;
  line-height: 1.2;
}
.user-display strong{
  display:block;
  color:#fff;
  font-size: 1rem;
}

/* Push main content below fixed header */
.main-inner{ padding-top: 1.25rem; }
.gv-marquee{ margin-top: 92px; } /* sits under header */

@media (max-width: 1024px){
  .app-header{ left: 0; padding: 0 1.25rem; justify-content: space-between; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .gv-marquee{ margin-top: 88px; }
}

/* ---- Sidebar parity (logo/dividers/footer) ---- */
.sidebar{
  background: rgba(15, 23, 42, 0.95) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.sidebar-logo{
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding-bottom: 18px !important;
  margin-bottom: 14px !important;
}
.sidebar-logo img,
.sidebar-logo img.logo{
  max-width: 160px !important;
  width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)) !important;
}
.sidebar-nav{ padding-top: 6px !important; }
.sidebar-link{
  border-radius: 12px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  text-decoration:none !important;
}
.sidebar-link i{ width: 18px !important; height: 18px !important; }
.sidebar-footer{
  border-top: 1px solid rgba(255,255,255,0.08) !important; /* keep divider above logout */
  padding-top: 14px !important;
}
.sidebar-footer .user-info{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(226,232,240,0.65);
  text-align:center;
}
.sidebar .sidebar-footer .sidebar-footer-copy,
.sidebar .sidebar-footer .sidebar-copy,
.sidebar .sidebar-footer .copyright,
.sidebar .sidebar-footer .sidebar-footer-text{
  font-size: 12px !important;
  color: rgba(226,232,240,0.65) !important;
  text-align: center !important;
}

/* Ensure there's NO divider under the page links list */
.sidebar-nav::after,
.sidebar-nav hr,
.sidebar-nav .divider{
  display:none !important;
}

/* ---- Patron glass card style (mapped to Admin containers) ---- */
.card,
.dash-card,
.mcard,
.chartcard,
.panel,
.setting-group,
.kpi,
.table-card,
.widget,
.box,
.container-card{
  background: var(--gv-card-bg) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--gv-card-border) !important;
  border-radius: var(--gv-card-radius) !important;
  box-shadow: var(--gv-card-shadow) !important;
}

.card,
.dash-card,
.panel,
.setting-group,
.table-card,
.widget,
.box,
.container-card{
  padding: 2rem !important;
}

.mcard,
.kpi{
  padding: 1.25rem 1.25rem !important;
}

/* Gentle hover lift like Patron */
.card:hover,
.dash-card:hover,
.panel:hover,
.setting-group:hover,
.table-card:hover,
.widget:hover,
.container-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25) !important;
}
@media (max-width: 900px){
  .card:hover,
  .dash-card:hover,
  .panel:hover,
  .setting-group:hover,
  .table-card:hover,
  .widget:hover,
  .container-card:hover{
    transform:none;
    box-shadow: var(--gv-card-shadow) !important;
  }
}

/* Card headers */
.dash-card-head,
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dash-card-title,
.panel-title{
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}
.muted,
.tiny{
  color: rgba(226,232,240,0.65) !important;
}

/* ---- Buttons parity (all pages) ---- */
.btn,
button.btn,
a.btn,
input[type="button"],
input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.65rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 650;
  border-radius: var(--gv-btn-radius);
  transition: all .2s ease;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--gv-fg);
  text-decoration:none;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

/* sizes */
.btn.sm, .btn.btn-sm, .btn.small{
  padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
  border-radius: 10px;
}
.btn.onlyicon{
  padding: 0.5rem;
  width: 38px;
  height: 38px;
}

.btn-primary,
.btn--primary,
.btn.primary,
button.btn-primary,
a.btn-primary{
  background: var(--gv-grad) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 12px rgba(124,58,237,0.30) !important;
}
.btn-primary:hover,
.btn--primary:hover,
.btn.primary:hover,
button.btn-primary:hover,
a.btn-primary:hover{
  filter: brightness(1.04);
  box-shadow: 0 10px 26px rgba(124,58,237,0.35) !important;
}

.btn.ghost,
.btn--ghost{
  background: rgba(255,255,255,0.04) !important;
}

.btn-danger,
.btn--danger{
  background: linear-gradient(135deg,#ef4444 0%, #b91c1c 100%) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* icon sizing inside buttons */
.btn i,[class*="btn"] i{
  width: 18px;
  height: 18px;
}

/* ---- Forms parity ---- */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
select, textarea{
  background: rgba(2, 6, 23, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--gv-fg) !important;
  border-radius: 12px !important;
  padding: 0.75rem 0.9rem !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.18) !important;
}

/* ---- Tables (listings etc.) parity ---- */
table{
  width: 100%;
  border-collapse: collapse;
}
thead th{
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.70);
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(226,232,240,0.92);
}
tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

/* Make common admin table wrappers look like Patron card containers */
.table-wrap,
.table-container,
.listings-wrap,
#listingsTableWrap,
#inventoryTableWrap{
  background: var(--gv-card-bg) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--gv-card-border) !important;
  border-radius: var(--gv-card-radius) !important;
  box-shadow: var(--gv-card-shadow) !important;
  overflow: hidden !important;
}

/* ---- Small badges/pills ---- */
.badge, .pill, .tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  font-size: .78rem;
  color: rgba(226,232,240,0.9);
}

/* ---- Charts container parity ---- */
.chart-wrap,
#revenueChartWrap,
#earningsChartWrap,
.chartcard canvas{
  border-radius: 12px;
}

/* === Patron Parity Overrides END === */

/* ==============================
   Fixes requested (Admin)
   1) Use Patron background image (bg.webp)
   2) Mobile sidebar drawer: crisp + close button
   ============================== */

/* Ensure page background always uses /uploads/bg.webp */
body{
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)),
    url('/uploads/images/bg.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* Mobile drawer close button */
.sidebar{ position: fixed; }
.sidebar-close{
  display:none;
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.sidebar-close:hover{ background: rgba(255,255,255,.10); }

/* Drawer behavior (matches admin.js: body.sb-open) */
@media (max-width: 1024px){
  .hamburger{ display:block !important; }
  body.is-app .main{ margin-left:0 !important; }
  .sidebar{
    transform: translateX(-110%);
    transition: transform .24s ease;
  }
  body.sb-open .sidebar{ transform: translateX(0); }
  .sb-scrim{
    display:none;
    backdrop-filter: none; /* remove blur (requested) */
  }
  body.sb-open .sb-scrim{ display:block; }
  .sidebar-close{ display:inline-flex; align-items:center; justify-content:center; }
}


/* ===== Members page premium overhaul ===== */
.members-hero{
  /* Make the header content fill the full panel (no "panel inside panel") */
  padding:22px 20px;
  overflow:hidden;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(255,209,102,.10), transparent 55%),
    radial-gradient(700px 260px at 90% 0%, rgba(124,92,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* Members table grid: keep pills aligned even when IP is long */
@media (min-width: 861px){
  .members-grid .invhead,
  .members-grid .invrow{
    width:100%;
    grid-template-columns:
      80px                      /* ID */
      minmax(140px, 1.4fr)      /* Username */
      minmax(220px, 2.2fr)      /* Email */
      110px                     /* Admin */
      110px                     /* Patron */
      140px                     /* Created */
      170px                     /* Last login */
      170px;                    /* Actions */
  }
}
.members-grid .invhead > div,
.members-grid .invrow > div{
  min-width:0; /* allow ellipsis instead of pushing columns */
}
.members-ip{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity:.92;
}
.members-hero-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding:0;
  width:100%;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.members-hero-left{min-width:0}
.members-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(234,240,255,.80);
  font-weight: 700;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size:11px;
}
.members-hero-icon{
  width:26px; height:26px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(255,209,102,.12);
  border: 1px solid rgba(255,209,102,.18);
}
.members-hero-title{
  margin-top:12px;
  font-size:24px;
  font-weight: 800;
  letter-spacing: .2px;
}
.members-hero-sub{
  margin-top:6px;
  color: var(--muted);
  font-size:13px;
  max-width: 64ch;
}
.members-hero-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Library hero mini metrics */
.hero-mini-metrics{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hero-mini-metric{
  min-width: 86px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  text-align:center;
}
.hero-mini-metric .hmm-num{font-weight:800; font-size:16px; letter-spacing:.2px}
.hero-mini-metric .hmm-label{font-size:11px; color: var(--muted); margin-top:2px}


/* Search (now lives in the panel header) */
.members-panel-actions{display:flex; align-items:center; justify-content:flex-end}
.members-search{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.members-search--compact{flex-wrap:nowrap}
.members-searchbox{
  flex:0 1 340px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.members-searchbox .search{
  width:100%;
  min-width: 180px;
  background: transparent;
  border: 0;
  padding: 0;
}
.members-search-ico{
  color: rgba(234,240,255,.55);
  font-weight: 800;
}
.members-search-actions{display:flex; gap:10px; align-items:center}

@media (max-width: 860px){
  .members-search--compact{flex-wrap:wrap}
  .members-searchbox{flex:1 1 260px}
}

/* Center headers for Created / Last login / Last IP */
.members-grid .invhead > div:nth-child(4),
.members-grid .invhead > div:nth-child(5),
.members-grid .invhead > div:nth-child(6),
.members-grid .invhead > div:nth-child(7){
  text-align:center;
}

/* Actions cell layout */
.members-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.members-actions .btn{white-space:nowrap}

/* Kebab menu */
.gv-menu{position:relative; display:inline-flex}
.gv-kebab{width:38px; padding: 0; justify-content:center}
.gv-menu-pop{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: rgba(10,12,18,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display:none;
  z-index: 60;
}
.gv-menu.is-open .gv-menu-pop{display:block}
.gv-menu-item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgba(234,240,255,.88);
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
}
.gv-menu-item:hover{
  background: rgba(124,92,255,.14);
}
.gv-menu-item:active{transform: translateY(1px)}

/* Audit modal list */
.audit-list{display:flex; flex-direction:column; gap:12px}
.audit-card{
  padding:14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 120px at 10% 0%, rgba(255,209,102,.08), transparent 60%),
    rgba(0,0,0,.18);
}
.audit-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.audit-title{font-weight: 900; letter-spacing:.2px}
.audit-meta{margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; color: var(--muted); font-size:12px}
.audit-extra{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.audit-chip{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: rgba(234,240,255,.88);
}
.audit-footer{margin-top:14px}
@media (max-width: 900px){
  .members-hero-inner{align-items:flex-start}
  .members-hero-actions{width:100%; justify-content:flex-start}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}

/* ============================
   Library — Ring Counters + Keygen layout
   ============================ */
.lib-topgrid{align-items:stretch}
.lib-topgrid > .panel{height:100%}

.lib-metrics.lib-metrics-rings{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 2px 2px 6px 2px;
}

.lib-ring-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 10% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.lib-ring{
  width: 56px;
  height: 56px;
  position:relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.lib-ring svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  overflow: visible;
}
.lib-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.4;
}
.lib-ring-fg{
  fill:none;
  stroke: rgba(124,92,255,.95);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.22));
}
.lib-ring-num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.96);
  font-size: 16px;
}
.lib-ring-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.84);
}

.panel.lib-keygen{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.panel.lib-keygen .kg-form{margin-top: 4px}
.panel.lib-keygen .kg-row{
  display:flex;
  gap: 10px;
  align-items:end;
}
.panel.lib-keygen .kg-qty{width: 110px}
.panel.lib-keygen .kg-generate{white-space:nowrap}

@media (max-width: 980px){
  .lib-metrics.lib-metrics-rings{grid-template-columns: 1fr}
  .panel.lib-keygen .kg-row{flex-direction:column; align-items:stretch}
  .panel.lib-keygen .kg-qty{width: 100%}
}

@media (max-width: 520px){
  .lib-ring-card{padding:12px}
  .lib-ring{width:52px; height:52px; flex-basis:52px}
  .lib-ring svg{width:52px; height:52px}
}


/* =========================
   Library polish overrides (fix spacing + alignment)
   ========================= */

/* Don't force equal-height panels (prevents giant empty space) */
.content .lib-topgrid{ align-items:start !important; }
.content .lib-topgrid > .panel{ height:auto !important; }

/* Stats: keep all 4 rings in a single clean row on desktop */
.content .lib-metrics.lib-metrics-rings{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items:stretch;
}

@media (max-width: 1100px){
  .content .lib-metrics.lib-metrics-rings{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  .content .lib-metrics.lib-metrics-rings{ grid-template-columns: 1fr !important; }
}

/* Ring cards: compact, premium row layout */
.content .lib-ring-card{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  padding: 14px !important;
  border-radius: 18px;
}

/* Keygen row: keep button inside panel (no overflow) */
.panel.lib-keygen .kg-row{
  display:grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 12px !important;
  align-items:end;
}
.panel.lib-keygen .kg-field{ width:auto !important; }
.panel.lib-keygen .kg-qty{ width: 140px !important; }
.panel.lib-keygen .kg-generate{ width: 100% !important; }

/* Modal top bar */
.gv-keys-topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.gv-keys-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.gv-keys-topbar .chip.wide{ padding: 10px 12px; }

@media (max-width: 520px){
  .panel.lib-keygen .kg-row{ grid-template-columns: 1fr !important; }
  .panel.lib-keygen .kg-qty{ width: 100% !important; }
}

/* === Library top: make Key Generator match Summary height (premium, no wasted space) === */
.content .lib-topgrid{
  align-items: stretch !important; /* keep both panels equal height */
}
.content .lib-topgrid > .panel{
  height: 100% !important;
}

/* Keygen panel: distribute content vertically so it fills the card cleanly */
.content .panel.lib-keygen{
  display: flex;
  flex-direction: column;
}
.content .panel.lib-keygen .panel-head{ flex: 0 0 auto; }
.content .panel.lib-keygen .alert{ flex: 0 0 auto; }
.content .panel.lib-keygen .kg-form{ flex: 0 0 auto; }

/* Put batch status / helper at the bottom so the card feels 'filled' */
.content .panel.lib-keygen .kg-pending,
.content .panel.lib-keygen .muted.tiny{
  margin-top: auto;
}

/* Make the bottom status box look more 'premium' and intentional */
.content .panel.lib-keygen .kg-pending{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: radial-gradient(120% 120% at 10% 0%, rgba(124,92,255,0.12), rgba(0,0,0,0)) ,
              rgba(255,255,255,0.03);
}

/* Keep both top cards aligned even when content wraps */
@media (max-width: 980px){
  .content .lib-topgrid{ align-items: stretch !important; }
  .content .lib-topgrid > .panel{ height: auto !important; }
}

/* ---------- Settings (premium layout) ---------- */
.settings-grid{ padding: 10px 0 0 0; }
.settings-hero{ margin-bottom: 10px; }
.settings-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.settings-note-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 860px){
  .settings-note-grid{ grid-template-columns: 1fr; }
}
.settings-note{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  padding: 12px;
}
.settings-note-title{ font-weight: 900; letter-spacing: .2px; margin-bottom: 6px; }

/* Settings: Sale alerts (split panel) */
.sa-grid{ display:grid; grid-template-columns: 1.05fr 1.25fr; gap: 14px; }
.sa-card{ border:1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(0,0,0,.18); padding: 14px; }
.sa-card-title{ font-weight: 900; letter-spacing: .2px; }
.sa-row{ margin-top: 12px; display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.sa-toggles{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; }
.sa-toggle{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 10px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background: rgba(3,7,18,.25); }
.sa-toggle.is-disabled{ opacity: .55; }
.sa-label{ font-weight: 700; }
.sa-toggle-all{ background: rgba(124,58,237,.09); border-color: rgba(124,58,237,.22); }
@media (max-width: 980px){
  .sa-grid{ grid-template-columns: 1fr; }
}

/* Modal footer row (used by Settings modals) */
.gv-modal-actions{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Wider nerd stats modal */
.gv-modal-panel.nerd-modal-card,
.gv-modal-panel.nerd-modal{
  width: min(920px, calc(100vw - 24px));
  max-height: min(82vh, 860px);
}



/* =========================================
   NOTIFICATIONS (HEADER BELL)
   ========================================= */
.notify-wrap{ position:relative; display:inline-flex; }
.notify-btn{ position:relative; }
.notify-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  background: rgba(62, 227, 138, 0.18);
  color: var(--good);
  border: 1px solid rgba(62, 227, 138, 0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.notify-panel{
  position:absolute;
  right:0;
  top:44px;
  width:min(420px, calc(100vw - 28px));
  background: rgba(12, 16, 26, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2500;
  overflow:hidden;
  display:none;
}

.notify-panel.open{ display:block; }

.notify-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.notify-title{
  font-family: 'Bitsumishi', sans-serif;
  font-size: 14px;
  letter-spacing: .3px;
}

.notify-list{
  max-height: 340px;
  overflow:auto;
  padding: 10px;
}

.notify-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  margin-bottom: 10px;
}

.notify-x{
  margin-left: 8px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.notify-x:hover{ background: rgba(255,255,255,0.08); border-color: rgba(222,188,122,0.35); }

.notify-item:hover{
  transform: translateY(-1px);
  border-color: rgba(222, 188, 122, 0.35);
  background: rgba(0,0,0,0.28);
}

.notify-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:4px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink:0;
}
.notify-dot.unread{
  background: rgba(222, 188, 122, 0.35);
  border-color: rgba(222, 188, 122, 0.45);
}

.notify-meta{ min-width:0; flex:1; }
.notify-line1{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}
.notify-kind{
  font-weight:800;
  font-size:12px;
  color: rgba(234,240,255,.92);
}
.notify-time{
  font-size:11px;
  color: rgba(234,240,255,.55);
  flex-shrink:0;
}
.notify-line2{
  margin-top:2px;
  font-size:12px;
  color: rgba(234,240,255,.72);
  word-break: break-word;
}


/* Mobile header declutter + notifications dropdown */
@media (max-width: 680px){
  .header-right{ margin-left:auto; gap:12px; flex-wrap:nowrap; }
  .notify-panel{
    top: 52px;
    right: 0;
    width: min(420px, calc(100vw - 16px));
  }
}



/* --- Inventory listing modal: premium layout --- */
.modal-card{
  padding:18px 18px 16px;
  background:
    radial-gradient(1200px 380px at 20% 0%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(900px 360px at 80% 10%, rgba(94,234,212,.14), transparent 55%),
    rgba(12,16,34,.88);
}
.modal-head{padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:14px}
.modal-head h2,.modal-head .title{font-size:18px; font-weight:900; letter-spacing:-.2px}
.modal-head .muted{color:var(--muted2)}

.modal-card .form{
  grid-template-columns: 1fr 1fr;
  gap:14px 16px;
}
@media (max-width: 760px){
  .modal-card .form{grid-template-columns: 1fr;}
}

/* Make long fields span full width */
.modal-card .form textarea,
.modal-card .form .rtewrap,
.modal-card .form .full,
.modal-card .form #descEditor,
.modal-card .form #descRte{
  grid-column: 1 / -1;
}

/* Nicer footer actions */
.modal-card .actions, 
.modal-card .form .form-actions{
  grid-column: 1 / -1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:6px;
}

/* Dropzone */
#dropzone, .dropzone{
  grid-column: 1 / -1;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
}
#dropzone:hover, .dropzone:hover{
  border-color: rgba(124,92,255,.45);
  background: rgba(124,92,255,.08);
}
#dropzone.dragover, .dropzone.dragover{
  border-color: rgba(94,234,212,.55);
  background: rgba(94,234,212,.10);
}

/* Platform selector buttons (slightly tighter in modal) */
.modal-card .platbtn{padding:10px 10px; border-radius:14px}
.modal-card .platbtn-text{font-size:13px}


/* ===== Members table hard override (8-col, full width, centered headers) ===== */
.members-grid .invhead,
.members-grid .invrow{
  width:100%;
  display:grid;
  align-items:center;
  column-gap:18px;
  grid-template-columns:
    70px
    1.4fr
    2.2fr
    110px
    110px
    140px
    170px
    170px;
}
.members-grid .invhead > div{ text-align:center; }
.members-grid .invhead > div:nth-child(2),
.members-grid .invhead > div:nth-child(3),
.members-grid .invrow  > div:nth-child(2),
.members-grid .invrow  > div:nth-child(3){ text-align:left; }
.members-grid .invhead > div:last-child,
.members-grid .invrow  > div:last-child{ justify-self:end; text-align:right; }


/* ===== Inventory: hero + filters (server-side pagination) ===== */
.inventory-hero .inv-kpis{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.inventory-hero .kpi{ min-width: 110px; }

.inv-kpis-inline{
  margin-top:0;
  flex-wrap:nowrap;
}
.inv-kpis-inline .kpi{
  min-width:auto;
  padding:8px 10px;
}
.inventory-hero-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
@media (max-width: 720px){
  .inv-kpis-inline{flex-wrap:wrap; justify-content:flex-end;}
  .inventory-hero-actions{align-items:flex-start;}
}


.inv-filters{ padding: 12px 14px; }
.inv-filters-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.inv-filter{ display:flex; flex-direction:column; gap:6px; }
.inv-filter .select, .inv-filter .search{ height: 40px; }
.inv-filter-search{ flex: 1; min-width: min(340px, 100%); }
.inv-filter-per{ min-width: 140px; }
.inv-filter-meta{ min-width: 180px; }
.inv-showing{ font-weight: 900; letter-spacing: -.2px; }

@media (max-width: 720px){
  .inv-filter-search{ min-width: 100%; }
  .inv-filter-meta{ width: 100%; }
}


/* =========================
   Inventory Listing Modal v2
   (Apple/Stripe-ish)
   ========================= */
#listingModal .gv-listing-modal{
  max-width: 1080px;
  width: min(1080px, calc(100vw - 24px));
  max-height: calc(100vh - 92px);
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(900px 340px at 18% 0%, rgba(124,92,255,.28), transparent 62%),
    radial-gradient(760px 320px at 85% 10%, rgba(94,234,212,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(10,14,30,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* Head */
#listingModal .gv-lm-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
#listingModal .gv-lm-kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(234,240,255,.55);
}
#listingModal .gv-lm-title{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(234,240,255,.96);
  margin-top: 4px;
}
#listingModal .gv-lm-sub{
  font-size: 12px;
  color: rgba(234,240,255,.62);
  margin-top: 4px;
  max-width: 62ch;
}
#listingModal .gv-lm-close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.9);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
#listingModal .gv-lm-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(124,92,255,.35);
}

/* Message area */
#listingModal .gv-lm-msg{
  margin: 12px 18px 0;
}
#listingModal .gv-lm-msg:empty{ display:none; }

/* Form layout */
#listingModal .gv-lm-form{
  padding: 14px 18px 18px;
  display:flex;
  flex-direction:column;
  min-height: 0;
}

/* Scroll region (keeps header + footer visible) */
#listingModal .gv-lm-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 14px;
}
#listingModal .gv-lm-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 920px){
  #listingModal .gv-lm-grid{ grid-template-columns: 1fr; }
}

#listingModal .gv-lm-left{ display:grid; gap: 14px; }
#listingModal .gv-lm-section{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
#listingModal .gv-lm-section-title{
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 13px;
  color: rgba(234,240,255,.92);
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
#listingModal .gv-fields{
  display:grid;
  gap: 12px;
}
#listingModal .gv-fields.two{ grid-template-columns: 1fr 1fr; }
#listingModal .gv-fields.three{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px){
  #listingModal .gv-fields.two,
  #listingModal .gv-fields.three{ grid-template-columns: 1fr; }
}

#listingModal .gv-field label{
  display:block;
  font-size: 12px;
  color: rgba(234,240,255,.68);
  margin-bottom: 6px;
}
#listingModal .gv-hint{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(234,240,255,.48);
}

/* Inputs (make them feel “designed”) */
#listingModal .input,
#listingModal .select,
#listingModal .textarea{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(8,10,22,.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 30px rgba(0,0,0,.22);
}
#listingModal .input:focus,
#listingModal .select:focus,
#listingModal .textarea:focus{
  outline: none;
  border-color: rgba(124,92,255,.45) !important;
  box-shadow:
    0 0 0 4px rgba(124,92,255,.18),
    0 1px 0 rgba(255,255,255,.05) inset;
}

/* Right media card */
#listingModal .gv-media-card{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  position: static;
}
#listingModal .gv-media-card-secondary{
  margin-top: 12px;
}

/* Platforms + tags (right column) */
#listingModal .platwrap{ margin-top: 10px; }
#listingModal .platpills{
  display:grid;
  /* rectangular logos need real width; auto-fit keeps it responsive */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
  margin-top: 10px;
}

#listingModal .platpill{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:8px 10px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,12,20,.40);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
#listingModal .platpill::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120px 60px at 50% 20%, rgba(140,120,255,.18), transparent 60%);
  opacity:.0;
  transition: opacity .15s ease;
}
#listingModal .platpill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(12,14,24,.48);
}
#listingModal .platpill:hover::after{ opacity:1; }
#listingModal .platpill.is-on{
  border-color: rgba(140,120,255,.55);
  background: rgba(90,70,210,.16);
  box-shadow: 0 14px 36px rgba(90,70,210,.18), 0 10px 30px rgba(0,0,0,.30);
}
#listingModal .platpill input{ display:none; }
#listingModal .platlogo{
  width: 100%;
  max-width: 150px;
  height: 38px;
  object-fit: contain;
  display:block;
  opacity: .96;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* Safety: hide any leftover label text if present */
#listingModal .platpill span{ display:none !important; }

#listingModal .platgroups{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
#listingModal .platgroup{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,10,22,.35);
  border-radius: 14px;
  padding: 10px;
}
#listingModal .platgroup-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(234,240,255,.65);
  margin-bottom: 8px;
}
#listingModal .platrow{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
#listingModal .platbtn{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform .08s ease, border-color .14s ease, background .14s ease;
}
#listingModal .platbtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.16); }
#listingModal .platbtn.is-on{
  border-color: rgba(124,92,255,.45);
  background: rgba(124,92,255,.16);
}
#listingModal .platbtn input{ display:none; }
#listingModal .platico{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: 0 0 22px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));
}
#listingModal .platname{
  font-weight: 850;
  color: rgba(234,240,255,.88);
  font-size: 13px;
}

#listingModal .gv-tags-row{ margin-top: 12px; }
#listingModal .gv-tags-label{
  display:block;
  font-size: 12px;
  font-weight: 850;
  color: rgba(234,240,255,.72);
  margin-bottom: 8px;
}

@media (max-width: 920px){
  #listingModal .gv-media-card{ position: static; }
}
#listingModal .gv-media-title{
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: 13px;
  color: rgba(234,240,255,.92);
}
#listingModal .gv-media-sub{
  font-size: 11px;
  color: rgba(234,240,255,.52);
  margin-top: 4px;
}

/* Dropzone */
#listingModal .gv-dropzone{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  padding: 14px;
  cursor: pointer;
  position: relative;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
#listingModal .gv-dropzone:hover{
  transform: translateY(-1px);
  border-color: rgba(124,92,255,.45);
  background: rgba(124,92,255,.08);
}
#listingModal .gv-dropzone.dragover,
#listingModal .gv-dropzone.drag{
  border-color: rgba(94,234,212,.55);
  background: rgba(94,234,212,.10);
}
#listingModal .gv-dropzone input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
#listingModal .gv-dropzone-inner{
  display:flex;
  gap:12px;
  align-items:center;
}
#listingModal .gv-drop-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
}
#listingModal .gv-drop-title{
  font-weight: 950;
  font-size: 13px;
  color: rgba(234,240,255,.92);
}
#listingModal .gv-drop-sub{
  font-size: 11px;
  color: rgba(234,240,255,.55);
  margin-top: 2px;
}

/* Preview: contained */
#listingModal .gv-imgtools{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
#listingModal .gv-imgprev{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 10px;
  min-height: 140px;
  max-height: 260px;
  overflow: hidden;
  display:grid;
  place-items:center;
}
#listingModal .gv-imgprev img{
  width: 100%;
  height: 240px;
  object-fit: contain;
  border-radius: 12px;
}

/* Footer */
#listingModal .gv-lm-footer{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* RTE inside modal: match input surfaces */
#listingModal .rte{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,10,22,.55);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 30px rgba(0,0,0,.22);
}
#listingModal .rtebar{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#listingModal .rtearea{
  min-height: 160px;
}
#listingModal .rtearea:empty:before{
  content: attr(data-placeholder);
  color: rgba(234,240,255,.42);
}
#listingModal .gv-lm-footer-right{
  display:flex;
  gap: 10px;
  align-items:center;
}
@media (max-width: 520px){
  #listingModal .gv-lm-footer{
    flex-direction: column;
    align-items: stretch;
  }
  #listingModal .gv-lm-footer-right{ justify-content: space-between; }
}


/* AI Description Generator (Inventory modal) */
.rte-ai{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-left:auto;
  align-items:flex-end;
}
.rte-ai .ai-gen-btn{
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(10px);
}
.rte-ai .ai-gen-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.rte-ai .ai-powered{
  font-size:11px;
  color:rgba(226,232,240,.72);
  line-height:1;
}

.ai-confirm{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(15,23,42,.55);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.ai-confirm-text{
  font-size:13px;
  color:rgba(226,232,240,.92);
}
.ai-confirm-actions{ display:flex; gap:8px; }

.ai-panel{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.55));
}
.ai-panel-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ai-panel-title{
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
}
.ai-panel-sub{
  font-size:12px;
  color:rgba(226,232,240,.72);
  margin-top:2px;
}
.ai-panel-actions{ display:flex; gap:8px; }
.ai-preview{
  max-height:220px;
  overflow:auto;
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(2,6,23,.55);
  color:rgba(226,232,240,.95);
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px;
  line-height:1.5;
}

@media (max-width: 760px){
  .rte-ai{ align-items:flex-start; margin-left:0; }
  .ai-panel-top{ flex-direction:column; align-items:stretch; }
  .ai-panel-actions{ justify-content:flex-start; }
}


.pill.outline-amber {
  border: 1px solid rgba(255,176,32,.5);
  color: #ffb020;
  background: rgba(255,176,32,.08);
}

.pill.outline-red {
  border: 1px solid rgba(239,68,68,.5);
  color: #ef4444;
  background: rgba(239,68,68,.08);
}

.pill.outline-green {
  border: 1px solid rgba(34,197,94,.5);
  color: #22c55e;
  background: rgba(34,197,94,.08);
}


/* =========================
   Listing Modal — AI inline loader (replaces replace/preview flow)
   ========================= */
#listingModal .ai-inline{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#listingModal .ai-inline-left{ display:flex; align-items:center; gap:10px; min-width:0; }
#listingModal .ai-inline-text{ min-width:0; }
#listingModal .ai-inline-title{
  font-weight: 800;
  font-size: 12px;
  color: rgba(234,240,255,.92);
  line-height: 1.2;
}
#listingModal .ai-inline-sub{
  font-size: 12px;
  color: rgba(234,240,255,.65);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52ch;
}
#listingModal .ai-inline-time{
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: rgba(234,240,255,.70);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
#listingModal .ai-spinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(234,240,255,.20);
  border-top-color: rgba(124,92,255,.95);
  animation: gvSpin .9s linear infinite;
}
@keyframes gvSpin { to { transform: rotate(360deg); } }

/* =========================
   Arc Raiders Blueprint Studio (matches sandbox blueprint card)
   ========================= */
#listingModal .gv-bpstudio{
  border: 1px solid rgba(59,130,246,.18);
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(2,6,23,.70);
}
#listingModal .gv-bp-pill{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.30);
  padding: 6px 10px;
  border-radius: 999px;
}
#listingModal .gv-bp-drop{
  margin-top: 12px;
  border-radius: 16px;
  padding: 14px;
  border: 1px dashed rgba(59,130,246,.35);
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(59,130,246,.12), transparent 58%),
    rgba(0,0,0,.22);
  position: relative;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#listingModal .gv-bp-drop:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.55);
}
#listingModal .gv-bp-drop.is-drag{
  border-color: rgba(255,255,255,.55);
  background: rgba(59,130,246,.12);
}
#listingModal .gv-bp-drop input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
#listingModal .gv-bp-drop-inner{
  display:flex;
  align-items:center;
  gap:12px;
}
#listingModal .gv-bp-ico{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.25);
  color: rgba(255,255,255,.92);
}
#listingModal .gv-bp-drop-title{
  font-weight: 900;
  color: rgba(234,240,255,.95);
  letter-spacing: -.01em;
}
#listingModal .gv-bp-drop-sub{
  font-size: 12px;
  color: rgba(234,240,255,.65);
  margin-top: 2px;
}
#listingModal .gv-bp-preview{
  margin-top: 12px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  padding: 10px;
}
#listingModal #bpPreviewCanvas{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 14px;
  background: radial-gradient(600px 260px at 50% 40%, rgba(23,37,84,.40), rgba(2,6,23,.82));
}
#listingModal .gv-bp-actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}


/* --- Parky admin rebuild additions --- */
:root{
  --parky-sidebar-width:280px;
}

body{
  background:
    linear-gradient(to bottom, rgba(15,23,42,.88), rgba(15,23,42,.96)),
    url('/uploads/images/bg.webp') center/cover fixed !important;
}

body.is-app .sidebar,
.sidebar{
  width: var(--parky-sidebar-width) !important;
}
body.is-app .main{
  margin-left: var(--parky-sidebar-width) !important;
}
.app-header{
  left: var(--parky-sidebar-width) !important;
}
@media (max-width:980px){
  .app-header{ left: 0 !important; }
  body.is-app .main{ margin-left:0 !important; }
}

.sidebar-logo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 2px 18px;
}
.sidebar-logo-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display:grid;
  place-items:center;
  font-weight:900;
  color:white;
  box-shadow: 0 10px 30px rgba(99,102,241,.35);
}
.sidebar-logo-copy{
  display:flex;
  flex-direction:column;
  line-height:1.12;
}
.sidebar-logo-copy strong{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.2px;
}
.sidebar-logo-copy span{
  color:rgba(234,240,255,.62);
  font-size:12px;
}
.sidebar-nav{
  gap:8px !important;
}
.sidebar-link{
  min-height:48px;
}
.sidebar-footer .user-info{
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:18px;
}
.sidebar-footer .user-info .k{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(234,240,255,.52);
  margin-bottom:8px;
}
.sidebar-footer .user-info .v{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.3px;
}
.sidebar-footer .user-info .s{
  margin-top:6px;
  color:rgba(234,240,255,.58);
  font-size:12px;
}

.page-stack{
  display:grid;
  gap:18px;
}
.hero-actions-right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(234,240,255,.88);
  font-size:13px;
  font-weight:700;
}
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1180px){
  .metrics-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .metrics-grid{ grid-template-columns:1fr; }
}
.metric-card{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.metric-label{
  color:rgba(234,240,255,.64);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.metric-value{
  margin-top:10px;
  font-size:32px;
  font-weight:900;
  letter-spacing:-1px;
}
.metric-sub{
  margin-top:8px;
  color:rgba(234,240,255,.56);
  font-size:13px;
}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:18px;
}
@media (max-width:1180px){
  .content-grid{ grid-template-columns:1fr; }
}

.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.data-table thead th{
  text-align:left;
  padding:12px 14px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(234,240,255,.5);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.data-table tbody td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.data-table tbody tr:hover td{
  background:rgba(255,255,255,.02);
}
.data-table tbody tr:last-child td{
  border-bottom:none;
}
.cell-title{
  font-weight:800;
}
.cell-sub{
  margin-top:4px;
  color:rgba(234,240,255,.56);
  font-size:12px;
}
.row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.panel-body{
  padding:16px 18px 18px;
}
.panel-body.no-top{
  padding-top:0;
}
.panel-head.with-divider{
  border-bottom:1px solid rgba(255,255,255,.08);
}

.searchbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.searchbar .search{
  min-width:0;
  flex:1 1 240px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.form-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.form-grid.cols-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:900px){
  .form-grid,
  .form-grid.cols-3,
  .form-grid.cols-4{
    grid-template-columns:1fr;
  }
}
.field-stack{
  display:grid;
  gap:6px;
}
.field-stack label{
  font-size:12px;
  color:rgba(234,240,255,.62);
  font-weight:700;
}
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:18px 0;
}
.kv-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
}
@media (max-width:760px){
  .kv-list{ grid-template-columns:1fr; }
}
.kv{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kv:last-child{
  border-bottom:none;
}
.kv .k{
  color:rgba(234,240,255,.58);
  font-size:13px;
}
.kv .v{
  font-weight:800;
  text-align:right;
}
.switch{
  position:relative;
  display:inline-flex;
  width:auto;
  height:auto;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
}
.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch-ui{
  width:48px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
  transition:.2s ease;
  flex:0 0 auto;
}
.switch-ui::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:white;
  transition:.2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.switch input:checked + .switch-ui{
  background:linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color:rgba(124,92,255,.7);
}
.switch input:checked + .switch-ui::after{
  left:23px;
}
.switch-copy{
  display:grid;
  gap:2px;
}
.switch-copy strong{
  font-size:14px;
}
.switch-copy span{
  font-size:12px;
  color:rgba(234,240,255,.54);
}
.segmented{
  display:inline-flex;
  padding:4px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  gap:4px;
}
.segmented a,
.segmented button{
  border:0;
  background:transparent;
  color:rgba(234,240,255,.7);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}
.segmented a.active,
.segmented button.active{
  background:linear-gradient(135deg, rgba(99,102,241,.28), rgba(139,92,246,.24));
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(124,92,255,.35);
}
.tag-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mutedline{
  color:rgba(234,240,255,.56);
  font-size:13px;
}
.empty{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.14);
  color:rgba(234,240,255,.58);
  background:rgba(255,255,255,.02);
  text-align:center;
}
.pokemon-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width:1080px){
  .pokemon-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .pokemon-grid{ grid-template-columns:1fr; }
}
.pokemon-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  padding:16px;
  display:grid;
  gap:10px;
}
.pokemon-sprite{
  width:76px;
  height:76px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
}
.pokemon-sprite img{
  width:72px;
  height:72px;
  object-fit:contain;
  image-rendering:pixelated;
}
.pokemon-title{
  font-weight:900;
  letter-spacing:-.2px;
}
.pokemon-meta{
  color:rgba(234,240,255,.58);
  font-size:13px;
  line-height:1.5;
}

.species-picker{
  display:grid;
  gap:10px;
}
.species-search{
  width:100%;
}
.species-select{
  min-height:260px;
  font-size:14px;
}
.flash-wrap{
  margin-bottom:16px;
}
.toast-inline{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  font-weight:700;
}
.toast-inline.success{
  background:rgba(62,227,138,.12);
  border-color:rgba(62,227,138,.25);
  color:#d8ffeb;
}
.toast-inline.error{
  background:rgba(255,77,109,.12);
  border-color:rgba(255,77,109,.25);
  color:#ffd6de;
}
.toast-inline.info{
  background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.25);
  color:#e1e4ff;
}
.list-clean{
  display:grid;
}
.list-clean .item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.list-clean .item:last-child{
  border-bottom:none;
}
.right-quiet{
  color:rgba(234,240,255,.56);
  font-size:12px;
}
.page-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-tab{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(234,240,255,.8);
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.page-tab.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(99,102,241,.26), rgba(139,92,246,.22));
  box-shadow: inset 0 0 0 1px rgba(124,92,255,.34);
}
.tab-panel[hidden]{
  display:none !important;
}

.login-card.clean-login{
  max-width:1080px;
}
.login-brand-hero{
  display:grid;
  gap:16px;
}
.login-brand-hero h2{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-1px;
}
.login-points{
  display:grid;
  gap:12px;
}
.login-point{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.login-point strong{
  display:block;
  margin-bottom:4px;
}


/* === April 2026 members hero/search cleanup === */
.members-hero-inner-search{
  align-items:flex-end;
  gap:18px;
}
.hero-searchbar{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:min(100%, 520px);
  justify-content:flex-end;
}
.hero-searchbar .search{
  min-width:260px;
  flex:1 1 300px;
}
@media (max-width:980px){
  .members-hero-inner-search{
    align-items:flex-start;
  }
  .hero-searchbar{
    width:100%;
    min-width:0;
    margin-left:0;
    justify-content:flex-start;
  }
  .hero-searchbar .search{
    width:100%;
    min-width:0;
  }
}


/* === April 2026 economy page cleanup === */
.economy-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:16px 0 18px;
}
.economy-search-wrap{
  position:relative;
  flex:1 1 340px;
  max-width:520px;
}
.economy-search-wrap i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:rgba(234,240,255,.48);
  pointer-events:none;
}
.economy-search-wrap .search{
  width:100%;
  padding-left:42px;
}
.economy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}
.economy-card{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(11,18,42,.78), rgba(9,15,36,.66));
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.economy-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.economy-card-category{
  flex:0 0 auto;
  max-width:48%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(234,240,255,.72);
  font-size:12px;
  line-height:1.2;
  text-align:right;
}
.economy-card-body{
  display:grid;
  gap:14px;
}
.economy-price-field{
  gap:8px;
}
.economy-price-field > span{
  font-size:12px;
  color:rgba(234,240,255,.56);
}
.economy-price-input{
  width:100%;
  max-width:100%;
  height:44px;
}
.economy-switch{
  width:100%;
  min-height:48px;
  justify-content:flex-start;
}
.economy-empty{
  margin-top:16px;
  padding:16px 18px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  color:rgba(234,240,255,.68);
  background:rgba(255,255,255,.03);
}
.economy-more-wrap{
  margin-top:18px;
}
@media (max-width: 700px){
  .economy-toolbar{
    align-items:stretch;
  }
  .economy-search-wrap{
    max-width:none;
  }
  .economy-card-top{
    flex-direction:column;
  }
  .economy-card-category{
    max-width:100%;
    text-align:left;
  }
}