:root{
  --bg: #0f1222;
  --panel: #161a33;
  --ink: #f3f4f8;
  --ink-dim: #b8bfd8;
  --accent: #6ea8fe;
  --accent-2: #8bd3a5;
  --danger: #ff7171;
  --muted: #23274d;
  --chip: #1d2244;
  --card: #121633;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
h1,h2{margin:0}
h2{font-size:1.1rem;color:var(--ink)}
p{margin:.25rem 0}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.small{font-size:.85rem}
.right{display:flex;align-items:flex-end;justify-content:flex-end}

/* Global error banner for the Billing Dashboard */
#billing-global-error{
  display:none;
  background:var(--danger);
  color:#fff;
  padding:10px 16px;
  margin:8px 16px 0;
  border-radius:var(--radius);
  font-size:.9rem;
}
#billing-global-error.show{display:block}


.topbar{position:sticky;top:0;background:linear-gradient(90deg,#14183a,#181d45);padding:14px 18px;border-bottom:1px solid #22254a;z-index:2}
.topbar h1{font-size:1.25rem;letter-spacing:.3px}

.panel{background:var(--panel);margin:16px auto;padding:16px;border-radius:var(--radius);max-width:1100px;box-shadow:var(--shadow);border:1px solid #22254a}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-actions{display:flex;gap:8px}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label{font-size:.9rem;color:var(--ink-dim)}
input{background:#0f1333;border:1px solid #262a52;color:var(--ink);border-radius:10px;padding:10px 12px;min-width:340px;outline:none}
button{background:var(--muted);color:var(--ink);border:1px solid #394080;padding:10px 14px;border-radius:10px;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.ghost{background:transparent;border-color:#2a2f61}
button.badge{padding:4px 8px;font-size:.75rem;border-radius:999px;border:none}
.badge.recurring{background:var(--chip);color:#9bc1ff}
.badge.topoff{background:#1c2f25;color:#9be2b4}
.badge.idcopy{background:#2a2f61;color:#c7cff6}

.grid{display:grid;gap:12px}
.grid.form-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width: 900px){
  .grid.form-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .grid.form-grid{grid-template-columns:1fr}
}

#catalogGrid{grid-template-columns:repeat(3,1fr)}
@media (max-width: 1100px){
  #catalogGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  #catalogGrid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  #catalogGrid{ gap:16px; } /* add a touch more space on narrow screens */
}
.card{
  background:var(--card);
  border:1px solid #232757;
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card h3{
  margin:0;
  font-size:1rem;
}
.card .meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.card .line{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Price stack: main price + tiny "/mo" or "/year" */
.card .price{
  font-weight:700;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.card .price-period{
  font-size:.75rem;
  color:var(--ink-dim);
  margin-top:2px;
}

/* Seat + per-student query info */
.card .credits{
  color:var(--ink-dim);
}
.card .per-seat{
  font-size:.8rem;
  color:var(--ink-dim);
  margin-top:2px;
}

.card .orgtype{
  color:#9bc1ff;
}
.card .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Cart panel */
.cart-list{
  margin-top:8px;
}
.cart-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:4px 0;
  border-top:1px solid #232757;
  font-size:.9rem;
}
.cart-row:first-child{
  border-top:none;
}
.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  font-weight:600;
}
button.small{
  padding:6px 10px;
  font-size:.8rem;
}
button.primary{
  background:#6b5cff;
  border-color:#6b5cff;
  color:#fff;
}

.copy{background:#1b1f47;border:none}
.primary{background:var(--accent);border:1px solid #4779d6;color:#051028}
.secondary{background:var(--accent-2);border:1px solid #1b7b42;color:#00180b}
.danger{background:#462126;border:1px solid #79343b;color:#ffb3b3}

.footer{opacity:.7;text-align:center;padding:20px 8px}
/* View My Orgs — clean card list */
.org-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
  margin-top:12px;
}
.org-card{
  background:var(--card);
  border:1px solid #232757;
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
}
.org-card h4{
  margin:0 0 8px;
  font-size:1.05rem;
}

/* key/value chips inside org cards */
.kv{display:flex;flex-wrap:wrap;gap:8px}
.kv span{
  background:#0f1333;
  border:1px solid #262a52;
  color:var(--ink);
  border-radius:8px;
  padding:6px 8px;
  font-size:.8rem;
  opacity:.95;
}

/* balances/stat blocks */
.stat{
  background:#0f1333;
  border:1px solid #262a52;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:var(--shadow);
}
.stat .label{font-size:.8rem;color:var(--ink-dim)}
.stat .value{font-weight:700;font-size:1.1rem}

/* consistency: selects & textareas match inputs */
select, textarea{
  background:#0f1333;
  border:1px solid #262a52;
  color:var(--ink);
  border-radius:10px;
  padding:10px 12px;
}
select:focus, textarea:focus, input:focus{
  outline:2px solid #2b4fb6;
  outline-offset:1px;
}

/* utility */
.hidden{display:none!important}