:root{
  --admin-bg:#17191c;
  --admin-bg-deep:#101215;
  --admin-sidebar:#202328;
  --admin-panel:#24272c;
  --admin-panel-soft:#2a2e33;
  --admin-line:#3a3f46;
  --admin-line-soft:#30343a;
  --admin-text:#f0f2f5;
  --admin-muted:#9ba3ad;
  --admin-cyan:#32b8ea;
  --admin-blue:#2e7ee8;
  --admin-green:#72c995;
  --admin-yellow:#e7b65d;
  --admin-red:#e27676;
}

*{box-sizing:border-box}
body.admin-page{
  margin:0;
  min-height:100vh;
  background:var(--admin-bg);
  color:var(--admin-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.admin-page .hidden{display:none!important}
.admin-page h1,.admin-page h2,.admin-page p{margin-top:0}
.admin-page h1{font-size:1.55rem;margin-bottom:0}
.admin-page h2{font-size:1.05rem;margin-bottom:0}
.admin-page button,.admin-page input,.admin-page select{font:inherit}

.admin-layout{min-height:100vh;display:grid;grid-template-columns:220px minmax(0,1fr)}
.admin-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--admin-sidebar);
  border-right:1px solid var(--admin-line);
}
.admin-brand{
  height:72px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:11px;
  border-bottom:1px solid var(--admin-line);
}
.admin-brand-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  background:url('/app/jpcardlab-mark.svg') center/contain no-repeat;
  filter:drop-shadow(0 4px 12px rgba(50,184,234,.24));
}
.admin-brand strong{display:block;font-size:.85rem;letter-spacing:.06em}
.admin-brand span{display:block;margin-top:2px;color:var(--admin-muted);font-size:.62rem;letter-spacing:.16em}

.admin-nav{padding:14px 10px;display:grid;gap:3px}
.admin-nav-item{
  width:100%;
  min-height:40px;
  display:grid;
  grid-template-columns:26px 1fr auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:0;
  border-left:3px solid transparent;
  border-radius:2px;
  background:transparent;
  color:#b8bec7;
  text-decoration:none;
  text-align:left;
  font-size:.84rem;
  font-weight:650;
  cursor:pointer;
}
.admin-nav-item:hover{background:#292d32;color:#fff}
.admin-nav-item.active{
  color:#fff;
  background:#2b3036;
  border-left-color:var(--admin-cyan);
}
.admin-nav-icon{color:#7f8995;text-align:center;font-size:.9rem}
.admin-nav-item.active .admin-nav-icon{color:var(--admin-cyan)}
.admin-nav-count{
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:grid;
  place-items:center;
  background:#38404a;
  border:1px solid #48515c;
  color:#dce2e8;
  border-radius:3px;
  font-size:.68rem;
}
.admin-sidebar-foot{margin-top:auto;padding:10px;border-top:1px solid var(--admin-line)}
.admin-nav-link{display:grid}

.admin-main{min-width:0;padding:0 28px 48px}
.admin-topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--admin-line);
  margin-bottom:24px;
}
.admin-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--admin-cyan);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.admin-identity{display:flex;align-items:center;gap:10px;color:var(--admin-muted);font-size:.8rem}
.admin-role-chip,.admin-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid var(--admin-line);
  border-radius:3px;
  background:#2b2f34;
  color:#cbd1d7;
  font-size:.7rem;
  font-weight:750;
}
.admin-role-chip{border-color:#30566a;color:#8fdcf8}

.admin-view{display:none}
.admin-view.active{display:grid;gap:16px}

.admin-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.admin-metric{
  min-height:112px;
  padding:16px;
  border:1px solid var(--admin-line);
  border-radius:3px;
  background:var(--admin-panel);
}
.admin-metric>span{display:block;color:var(--admin-muted);font-size:.72rem}
.admin-metric>strong{display:block;margin:7px 0 3px;font-size:1.75rem;line-height:1}
.admin-metric>small{color:#7f8791;font-size:.68rem}

.admin-panel{
  border:1px solid var(--admin-line);
  border-radius:3px;
  background:var(--admin-panel);
  padding:18px;
  box-shadow:none;
}
.admin-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.admin-copy{max-width:820px;color:var(--admin-muted);font-size:.8rem;line-height:1.55;margin-bottom:16px}
.admin-note{
  display:grid;
  gap:4px;
  padding:11px 12px;
  margin-bottom:14px;
  border-left:3px solid var(--admin-cyan);
  background:#202a2f;
  color:#cad1d8;
  font-size:.77rem;
  line-height:1.45;
}
.admin-note strong{color:#eef6fa}

.admin-inline-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.admin-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.admin-span-2{grid-column:span 2}
.admin-field{display:grid;gap:6px}
.admin-field>span{
  color:#c6ccd3;
  font-size:.72rem;
  font-weight:650;
}
.admin-field small{color:#7f8791;font-size:.67rem;line-height:1.4}
.admin-field input,.admin-field select{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid #444a52;
  border-radius:2px;
  background:#1d2024;
  color:var(--admin-text);
  outline:none;
  box-shadow:none;
}
.admin-field input::placeholder{color:#68717c}
.admin-field input:focus,.admin-field select:focus{
  border-color:#4384a0;
  box-shadow:0 0 0 1px #4384a0;
}
.grow{min-width:0}

.admin-button{
  min-height:36px;
  padding:7px 13px;
  border:1px solid #474d54;
  border-radius:2px;
  background:#30343a;
  color:#e4e8ec;
  font-weight:700;
  font-size:.75rem;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
.admin-button:hover:not(:disabled){background:#383d43;border-color:#59616a}
.admin-button.primary{
  border-color:#2a84ab;
  background:#187fa9;
  color:#fff;
}
.admin-button.primary:hover:not(:disabled){background:#1d8bb8}
.admin-button.danger{
  border-color:#7a4141;
  background:#482626;
  color:#ffcccc;
}
.admin-button:disabled{opacity:.45;cursor:not-allowed}

.admin-switch{display:flex;align-items:center;gap:8px;color:#c4cbd2;font-size:.72rem;cursor:pointer}
.admin-switch input{position:absolute;opacity:0;pointer-events:none}
.admin-switch span{
  width:32px;
  height:16px;
  position:relative;
  border:1px solid #4a5058;
  border-radius:2px;
  background:#1b1e22;
}
.admin-switch span:after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:10px;
  height:10px;
  border-radius:1px;
  background:#737b85;
  transition:transform .15s ease,background .15s ease;
}
.admin-switch input:checked+span{border-color:#247ea3;background:#173c4c}
.admin-switch input:checked+span:after{transform:translateX(16px);background:var(--admin-cyan)}

.admin-form-actions{display:flex;gap:8px;padding-top:2px}
.admin-message{min-height:20px;margin-top:10px;font-size:.75rem;color:var(--admin-muted)}
.admin-message.success{color:var(--admin-green)}
.admin-message.error{color:var(--admin-red)}

.admin-badge.admin-status-pending{border-color:#6c5730;color:#f0c979}
.admin-badge.admin-status-active{border-color:#355c45;color:#9bdab2}
.admin-badge.admin-status-blocked{border-color:#6d3a3a;color:#ef9b9b}

.admin-summary{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.admin-summary span{
  padding:5px 8px;
  border:1px solid var(--admin-line);
  border-radius:2px;
  background:#202328;
  color:var(--admin-muted);
  font-size:.69rem;
}

.admin-users{display:grid;border-top:1px solid var(--admin-line)}
.admin-user{
  display:grid;
  grid-template-columns:minmax(240px,1.6fr) minmax(270px,1.3fr) auto;
  gap:16px;
  align-items:center;
  padding:13px 4px;
  border-bottom:1px solid var(--admin-line-soft);
}
.admin-user:hover{background:#272b30}
.admin-user-name{display:grid;gap:3px;min-width:0}
.admin-user-name strong{font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-name span{color:var(--admin-muted);font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-meta{display:flex;gap:5px;flex-wrap:wrap}
.admin-user-meta span{
  padding:3px 5px;
  border:1px solid #373c42;
  border-radius:2px;
  color:#8f98a2;
  font-size:.65rem;
}
.admin-user-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.admin-user-actions select{
  min-height:32px;
  padding:5px 7px;
  border:1px solid #444a52;
  border-radius:2px;
  background:#1d2024;
  color:#dfe3e7;
  font-size:.7rem;
}
.admin-user-actions .admin-button{min-height:32px;padding:6px 9px;font-size:.69rem}

.admin-task-list{display:grid;border-top:1px solid var(--admin-line)}
.admin-task{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  width:100%;
  padding:13px 4px;
  border:0;
  border-bottom:1px solid var(--admin-line-soft);
  background:transparent;
  color:#dce1e6;
  text-align:left;
  cursor:pointer;
}
.admin-task:hover{background:#292d32}
.admin-task>span:first-child{display:grid;gap:3px}
.admin-task strong{font-size:.8rem}
.admin-task small{color:var(--admin-muted);font-size:.68rem}

.admin-dialog{
  width:min(560px,calc(100% - 24px));
  border:1px solid #4a5058;
  border-radius:3px;
  background:#23262b;
  color:var(--admin-text);
  padding:0;
}
.admin-dialog::backdrop{background:rgba(0,0,0,.72)}
.admin-dialog-body{padding:20px}
.admin-dialog-body p{color:var(--admin-muted);font-size:.8rem;line-height:1.5}
.admin-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

@media(max-width:1050px){
  .admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-user{grid-template-columns:1fr auto}
  .admin-user-meta{grid-column:1/-1}
}
@media(max-width:760px){
  .admin-layout{display:block}
  .admin-sidebar{
    position:sticky;
    z-index:10;
    height:auto;
    top:0;
    border-right:0;
    border-bottom:1px solid var(--admin-line);
  }
  .admin-brand{height:56px}
  .admin-nav{display:flex;overflow-x:auto;padding:6px 8px}
  .admin-nav-item{min-width:max-content;width:auto;grid-template-columns:20px auto auto;border-left:0;border-bottom:2px solid transparent;padding:7px 9px}
  .admin-nav-item.active{border-left:0;border-bottom-color:var(--admin-cyan)}
  .admin-sidebar-foot{display:none}
  .admin-main{padding:0 12px 32px}
  .admin-topbar{min-height:62px;margin-bottom:14px}
  .admin-identity{max-width:48%;justify-content:flex-end}
  .admin-identity>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .admin-metric{min-height:96px;padding:12px}
  .admin-panel{padding:14px}
  .admin-form-grid{grid-template-columns:1fr}
  .admin-span-2{grid-column:auto}
  .admin-inline-form{grid-template-columns:1fr}
  .admin-inline-form .admin-button{width:100%}
  .admin-user{grid-template-columns:1fr;padding:12px 0}
  .admin-user-meta{grid-column:auto}
  .admin-user-actions{justify-content:flex-start;flex-wrap:wrap}
  .admin-form-actions{flex-direction:column}
  .admin-form-actions .admin-button{width:100%}
}


.admin-checkbox-field{align-content:end}
.admin-check{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid #444a52;
  border-radius:2px;
  background:#1d2024;
  color:#cfd5db;
  font-size:.74rem;
  cursor:pointer;
}
.admin-check input{width:15px;height:15px;margin:0;accent-color:var(--admin-cyan)}
.admin-invite-result{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--admin-line-soft);
}
.admin-invites{display:grid;border-top:1px solid var(--admin-line)}
.admin-invite{
  display:grid;
  grid-template-columns:minmax(260px,1.4fr) minmax(200px,.8fr) auto;
  gap:16px;
  align-items:center;
  padding:13px 4px;
  border-bottom:1px solid var(--admin-line-soft);
}
.admin-invite:hover{background:#272b30}
.admin-invite-main{display:grid;gap:3px;min-width:0}
.admin-invite-main strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-invite-main span,.admin-invite-meta>span:not(.admin-badge){color:var(--admin-muted);font-size:.68rem}
.admin-invite-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.admin-invite-actions{display:flex;justify-content:flex-end}
.admin-empty{padding:16px 4px;color:var(--admin-muted);font-size:.76rem}

@media(max-width:760px){
  .admin-invite-result{grid-template-columns:1fr}
  .admin-invite-result .admin-button{width:100%}
  .admin-invite{grid-template-columns:1fr;gap:8px}
  .admin-invite-actions{justify-content:flex-start}
}


/* Global app theme selector */
.admin-theme-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.admin-theme-option{
  position:relative;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:12px;
  border:1px solid var(--admin-line);
  border-radius:3px;
  background:#202328;
  cursor:pointer;
}
.admin-theme-option:hover{border-color:#4a5964;background:#252a2f}
.admin-theme-option:has(input:checked){
  border-color:#4384a0;
  box-shadow:inset 3px 0 0 var(--admin-cyan);
}
.admin-theme-option>input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.admin-theme-preview{
  height:76px;
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:18px 1fr;
  gap:5px;
  padding:6px;
  border:1px solid #4a5058;
  overflow:hidden;
}
.admin-theme-preview i{display:block}
.admin-theme-preview i:nth-child(1){grid-row:1/-1}
.admin-theme-preview i:nth-child(2){grid-column:2}
.admin-theme-preview i:nth-child(3){grid-column:2}
.admin-theme-preview.classic{
  border-radius:12px;
  background:#070b12;
}
.admin-theme-preview.classic i:nth-child(1){border-radius:8px;background:#0d1420}
.admin-theme-preview.classic i:nth-child(2),
.admin-theme-preview.classic i:nth-child(3){border-radius:7px;background:#111b2a}
.admin-theme-preview.graphite{
  border-radius:2px;
  background:#17191c;
}
.admin-theme-preview.graphite i:nth-child(1){background:#202328}
.admin-theme-preview.graphite i:nth-child(2),
.admin-theme-preview.graphite i:nth-child(3){background:#24272c}
.admin-theme-preview.graphite i:nth-child(2){border-left:2px solid #32b8ea}
.admin-theme-copy{display:grid;gap:5px}
.admin-theme-copy strong{font-size:.86rem;color:#eef2f5}
.admin-theme-copy small{color:var(--admin-muted);font-size:.7rem;line-height:1.45}

@media(max-width:760px){
  .admin-theme-grid{grid-template-columns:1fr}
  .admin-theme-option{grid-template-columns:108px minmax(0,1fr)}
}