/* --- CSS RESET & VARIABLES --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

:root{
  --bg0:#050507; --bg2:#1b1b22;
  --text:#fff; --muted:rgba(255,255,255,.78); --dim:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.18); --line2:rgba(255,255,255,.10);
  --header-bg:rgba(0,0,0,.55);
  --pill-bg:rgba(255,255,255,.08); --pill-line:rgba(255,255,255,.16);
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --shadow:0 18px 42px rgba(0,0,0,.65);
  --shadowHeavy:0 24px 70px rgba(0,0,0,.85);

  --ok:#22c55e;
  --warn:#eab308;
  --bad:#ef4444;
  --blue:#3b82f6;
  --gray:#6b7280;
}
html[data-theme="light"]{
  --bg0:#f6f7fb; --bg2:#e7e9f2;
  --text:#0b0b10; --muted:rgba(0,0,0,.70); --dim:rgba(0,0,0,.55);
  --line:rgba(0,0,0,.16); --line2:rgba(0,0,0,.10);
  --header-bg:rgba(255,255,255,.75);
  --pill-bg:rgba(0,0,0,.06); --pill-line:rgba(0,0,0,.14);
  --panel:rgba(0,0,0,.04);
  --panel2:rgba(0,0,0,.06);
  --shadow:0 18px 60px rgba(0,0,0,.12);
  --shadowHeavy:0 24px 70px rgba(0,0,0,.18);
}

/* ================================
   NS SHELL (CANONICAL LAYOUT)
   ================================ */

/* Keep native page scrolling & prevent overflow */
html,body{
  width:100%;
  max-width:100%;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  -webkit-text-size-adjust:100%;
}

/* Use your existing body setup, but ensure no custom scroll containers */
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,var(--bg2) 0,var(--bg0) 55%, #000 100%);
  color:var(--text);
  padding:24px 16px 32px; /* Fixed padding */
  overflow-y:auto; /* Allow native scrolling */
}
#root,main{height:auto !important; overflow:visible !important;}

/* Optional wrapper used by ALL patched pages */
.shell{
  width:100%;
  max-width:980px;   /* matches your Maintenance vibe */
  margin:0 auto;
  padding:0;
}

/* For pages that still use <main> directly */
main{max-width:1100px;margin:0 auto;}

/* ================================
   HEADER (MAINTENANCE-STYLE)
   ================================ */

.nsd-header{
  width:100%;
  padding:14px 16px;
  background:var(--header-bg);
  border:1px solid var(--line);
  border-radius:16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative;      /* natural flow */
  margin-bottom:14px;     /* space before pills */
}

.nsd-wrap{
  width:100%;
  max-width:1150px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  font-size:11px;
}
.nsd-title{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.92;}

/* Optional meta cluster (matches your Maintenance header style) */
.nsd-meta{
  opacity:.8;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nsd-badge{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.10);
  color:var(--muted);
  display:inline-flex;
  gap:8px;
  align-items:center;
}

.header-btn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.92;
}
.header-btn:hover{opacity:1;}

/* Mobile header stacking (same behavior as Maintenance) */
@media (max-width:640px){
  .nsd-wrap{flex-direction:column;align-items:flex-start;}
  .nsd-meta{justify-content:flex-start;}
}

/* --- LAYOUT --- */
.page-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.page-head > div:last-child{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
/* Critical: let flex children shrink instead of forcing overflow */
.page-head select,
.page-head button { max-width: 100%; }

.page-title{font-size:22px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;}
.subtitle{font-size:12px;color:var(--muted);margin-bottom:14px;}

/* ================================
   NAV PILLS (CANONICAL)
   ================================ */
.qa-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 22px;   /* slight tune for shell header rhythm */
  overflow-x:visible;
}
.qa-pill{
  padding:8px 14px;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--pill-bg);border:1px solid var(--pill-line);color:var(--text);text-decoration:none;
}
.qa-pill.active{background:var(--text);color:var(--bg0);font-weight:700;border-color:var(--text);}

.dash-layout{display:flex;flex-direction:column;gap:18px;}
@media (min-width:950px){
  .dash-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:flex-start;}
}

/* --- CARDS & INPUT GROUPS --- */
.card{
  border-radius:18px;
  background:radial-gradient(circle at top,var(--panel2) 0,var(--panel) 55%, rgba(0,0,0,0) 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:16px 16px 18px;
}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.card-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}

.input-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap; /* key for preventing overflow */
  width:100%;
}
.input-group .input{ min-width:0; flex:1 1 220px; } /* key for shrinking */
.input-group .btn{ flex:0 0 auto; }

.pill{
  border-radius:999px;
  padding:3px 10px;
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.95;
  background:var(--pill-bg);
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.dot{width:8px;height:8px;border-radius:50%;}
.dot.gray{background:var(--gray)}
.dot.green{background:var(--ok)}
.dot.yellow{background:var(--warn)}
.dot.red{background:var(--bad)}

.bill-active{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.16);color:rgba(34,197,94,.95);}
.bill-inactive{border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.16);color:rgba(248,113,113,.95);}
.bill-checking{border-color:rgba(107,114,128,.45);background:rgba(107,114,128,.16);color:rgba(229,231,235,.95);}

/* --- BUSINESS CARD ELEMENTS --- */
.biz-header{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.biz-logo{
  width:46px;height:46px;border-radius:14px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;overflow:hidden;
}
/* img rules are still safe here due to global guardrails, but left intact for specificity */
.biz-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.biz-main{display:flex;flex-direction:column;gap:2px;}
#bizName{font-size:17px;font-weight:700;}
#bizMeta{font-size:12px;opacity:.8;color:var(--muted);}

.link-row{display:flex;flex-direction:column;gap:10px;margin-top:10px;font-size:12px;color:var(--muted);}
.link-row a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line2);word-break:break-all;}

#bizBio{margin-top:8px;font-size:13px;opacity:.92;line-height:1.45;white-space:pre-wrap;}
.empty{font-size:12px;opacity:.75;color:var(--muted);margin-top:4px;}

#dashMsg{margin:6px 0 14px;font-size:12px;min-height:16px;opacity:.9;transition: opacity 0.3s ease;}
#dashMsg.ok{color:#9be7c4;}
#dashMsg.err{color:#ff9e9e;}

.row-label{margin:10px 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.35);
  color:var(--text);
  font-size:16px;
  outline:none;
  appearance:none;
  margin-top:4px;
}
html[data-theme="light"] .select{
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.90);
  color:var(--text);
}

/* --- TEAM & MENU LISTS --- */
.list{display:flex;flex-direction:column;gap:6px;font-size:12px;margin-top:6px;}
.team-row{
  border-radius:12px;border:1px solid var(--line2);
  background:rgba(0,0,0,.20);
  padding:7px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px;
}
html[data-theme="light"] .team-row{background:rgba(0,0,0,.03);}
.team-left{display:flex;align-items:center;gap:8px;}
.team-avatar{
  width:32px;height:32px;border-radius:999px;overflow:hidden;border:1px solid var(--line2);
  background:rgba(0,0,0,.25);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.team-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.team-main{display:flex;flex-direction:column;gap:2px;}
.team-main strong{font-size:12px;}
.team-meta{font-size:11px;opacity:.78;color:var(--muted);}

table{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px;}
th,td{padding:6px 6px;text-align:left;}
th{opacity:.78;font-weight:700;border-bottom:1px solid var(--line);}
tr + tr td{border-top:1px solid var(--line2);}

.menu-section{margin-top:8px;padding-top:6px;border-top:1px solid var(--line2);}
.menu-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.85;margin-bottom:4px;color:var(--muted);}
.menu-item-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;font-size:12px;}
.menu-item-name{font-weight:500;}
.menu-item-price{font-size:11px;opacity:.9;white-space:nowrap;color:var(--muted);}

/* ----- MONEY CARD ----- */
.moneyBig{margin-top:8px;font-size:26px;font-weight:900;letter-spacing:-.02em;}
.moneyRow{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2);font-size:12px;opacity:.92;}
.moneyHint{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.45;}
.btnRow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.btn{
  flex:1;min-width:170px;padding:12px 12px;border-radius:999px;
  border:1px solid var(--pill-line);background:transparent;color:var(--text);
  cursor:pointer;font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;user-select:none;
}
.btn.primary{background:var(--blue);border-color:rgba(59,130,246,.55);}
.btn:disabled{opacity:.55;cursor:not-allowed}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:none;animation:spin .8s linear infinite;}
.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

/* payout list */
.payoutTableWrap{margin-top:12px;border-top:1px solid var(--line2);padding-top:10px;}
.pillStatus{
  border-radius:999px;
  padding:3px 10px;
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--pill-bg);
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.pillStatus.paid{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.14);color:rgba(34,197,94,.95);}
.pillStatus.pending{border-color:rgba(234,179,8,.50);background:rgba(234,179,8,.14);color:rgba(234,179,8,.95);}
.pillStatus.failed{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.14);color:rgba(239,68,68,.95);}
.pillStatus.other{border-color:rgba(107,114,128,.45);background:rgba(107,114,128,.14);color:rgba(229,231,235,.92);}

/* ================================
   BOTTOM ACTIONS & MODALS
   ================================ */

.bottom-actions{
  position: fixed;
  left: 0;
  right: 0;
  width: auto;
  padding: 12px 14px;
  box-sizing: border-box;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.bottom-actions > *{ min-width:0; }

/* LOCK MODAL */
#nsdLockOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:none;align-items:center;justify-content:center;z-index:100000;padding:18px;
}
#nsdLockCard{
  width:100%;max-width:460px;border-radius:20px;background:var(--bg0);
  border:1px solid var(--line);box-shadow:var(--shadowHeavy);
  padding:16px 16px 14px;font-size:13px;color:var(--text);
}
#nsdLockHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
#nsdLockTitle{font-size:14px;text-transform:uppercase;letter-spacing:.16em;margin:0;}
#nsdLockCloseX{border:none;background:transparent;color:var(--text);font-size:18px;cursor:pointer;line-height:1;padding:0 2px;}
#nsdLockText{opacity:.92;line-height:1.55;margin-bottom:12px;color:var(--muted);}
#nsdLockBtns{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.nsdLockBtn{
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;
  background:transparent;color:var(--text);flex:1;min-width:160px;
}
.nsdLockBtnPrimary{background:var(--text);color:var(--bg0);border:none;font-weight:600;}