:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070b12;
  color: #eef5ff;
  --panel: #111824;
  --panel-soft: #172131;
  --line: #29384c;
  --muted: #98a8bc;
  --cyan: #31d8f4;
  --blue: #4e9dff;
  --green: #52e49d;
  --amber: #ffca55;
  --red: #ff7886;
}

* { box-sizing: border-box; }
html.modal-open, body.modal-open { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #12253a 0, #070b12 34rem);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(49, 216, 244, .28);
  outline-offset: 2px;
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 18, .9);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #33465d;
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 1.05rem; }
.brand span { color: var(--muted); font-size: .77rem; margin-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 10px; }

.shell { width: min(1500px, calc(100% - 30px)); margin: 22px auto 50px; }
.login-card, .panel, .metric-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(23, 33, 49, .96), rgba(13, 20, 31, .98));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
}
.login-card { width: min(520px, 100%); margin: 8vh auto 0; border-radius: 22px; padding: 30px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.2rem); margin-bottom: 7px; }
h2 { font-size: 1.1rem; margin-bottom: 0; }
h3 { font-size: .94rem; }
.eyebrow { color: var(--cyan); font-weight: 800; font-size: .69rem; letter-spacing: .13em; margin-bottom: 7px; }
.subtle, .footer-note { color: var(--muted); }
.heading-note { margin: 0; font-size: .84rem; }

label { display: grid; gap: 7px; color: #cbd7e5; font-size: .79rem; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #34475f;
  background: #0a1019;
  color: #f7fbff;
  outline: none;
}
textarea { min-height: 82px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(49, 216, 244, .12); }

.button {
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 14px;
  font-weight: 800;
}
.button.primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #03101a; }
.button.secondary { background: #182334; border-color: #354961; color: #e7f1ff; }
.button.danger { background: #401923; border-color: #7d3342; color: #ffd6dc; }
.button.warning { background: #3a2b12; border-color: #725321; color: #ffe0a1; }
.button.compact { min-height: 32px; padding: 5px 9px; font-size: .74rem; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #34475f;
  border-radius: 10px;
  background: #111a27;
  color: #e7f1ff;
  font-size: 1.35rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  border: 1px solid #3b526d;
  color: #b9ddff;
  font-size: .76rem;
  font-weight: 800;
}
.badge.muted { color: var(--muted); }
.message {
  margin: 13px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #42556e;
  background: #111c2a;
  color: #dbeaff;
}
.message.error { border-color: #814451; color: #ffb7c0; background: #251319; }
.message.success { border-color: #27634a; color: #a5f4cb; background: #0d2119; }
.security-note { margin-top: 20px; padding: 14px; border-left: 3px solid var(--cyan); background: #0b131e; color: #aebdd0; font-size: .82rem; line-height: 1.5; }

.section-heading, .panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.section-heading { margin-bottom: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.metric-card { border-radius: 15px; padding: 15px; }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card strong { display: block; font-size: 1.75rem; margin: 6px 0 3px; }
.panel { border-radius: 17px; padding: 17px; min-width: 0; margin-bottom: 15px; }

.quick-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 10px; }
.filter-chip {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #34475f;
  border-radius: 999px;
  background: #101925;
  color: #c6d7e8;
  font-size: .76rem;
  font-weight: 800;
}
.filter-chip:hover, .filter-chip.active { border-color: var(--cyan); background: #123047; color: #c9f5ff; }
.search-row { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 13px; }
.search-field input { min-width: 0; }
.more-filters { min-width: 140px; }
.more-filters > summary {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 13px;
  border: 1px solid #34475f;
  border-radius: 10px;
  background: #182334;
  color: #e7f1ff;
  font-size: .79rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters[open] { grid-column: 1 / -1; }
.more-filters[open] > summary { width: max-content; margin-left: auto; }
.filter-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid #2c3d52; border-radius: 12px; background: #0c131e; }

.user-layout { display: grid; grid-template-columns: minmax(560px, 1.2fr) minmax(390px, .8fr); gap: 14px; align-items: start; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.list-toolbar p { margin: 0; }
.pager { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--muted); }
.table-wrap { overflow: auto; border: 1px solid #2c3d52; border-radius: 12px; }
.user-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.user-table th, .user-table td { padding: 10px 11px; text-align: left; border-bottom: 1px solid #253448; vertical-align: top; }
.user-table th { position: sticky; top: 0; background: #111a27; color: #9fb3c9; font-size: .69rem; text-transform: uppercase; letter-spacing: .05em; }
.user-table tbody tr { cursor: pointer; background: #0c131e; }
.user-table tbody tr:hover, .user-table tbody tr.active { background: #102032; }
.user-table tbody tr.active { box-shadow: inset 3px 0 0 var(--cyan); }
.user-name strong, .user-name span { display: block; }
.user-name span { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.status-pill { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: .66rem; font-weight: 800; background: #1a2b3f; color: #acd9ff; margin: 1px 3px 1px 0; }
.status-pill.good { background: #143526; color: #89edbd; }
.status-pill.warn { background: #3a2b12; color: #ffdc8b; }
.status-pill.bad { background: #3d1820; color: #ff9daa; }

.detail-panel { position: sticky; top: 88px; }
.empty-state { min-height: 220px; display: grid; place-items: center; text-align: center; color: var(--muted); border: 1px dashed #34475c; border-radius: 12px; padding: 20px; }
.detail-stack { display: grid; gap: 10px; }
.detail-section, .worker-card, .compact-item, .technical-block { border: 1px solid #2c3d52; background: #0c131e; border-radius: 12px; padding: 12px; }
.detail-section h3 { margin: 0 0 9px; color: #dcecff; }
.customer-summary-card { border-color: #34536b; background: linear-gradient(145deg, #102033, #0b131e); }
.customer-summary-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 11px; }
.customer-summary-header strong, .customer-summary-header span { display: block; }
.customer-summary-header strong { font-size: 1rem; overflow-wrap: anywhere; }
.customer-summary-header span { color: var(--muted); font-size: .76rem; margin-top: 3px; overflow-wrap: anywhere; }
.customer-action-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.action-menu { position: relative; }
.action-menu > summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #03101a;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-list {
  position: absolute;
  right: 0;
  z-index: 8;
  width: min(290px, 82vw);
  margin-top: 7px;
  padding: 7px;
  border: 1px solid #354961;
  border-radius: 12px;
  background: #101925;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.action-menu-list button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: #e7f1ff;
  text-align: left;
}
.action-menu-list button:hover { background: #1a2a3d; }
.action-menu-list button:disabled { opacity: .45; cursor: not-allowed; }
.action-menu-separator { height: 1px; background: #29384c; margin: 5px; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv span { display: block; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.kv strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: .82rem; }
.licence-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.licence-highlight .kv { padding: 9px; border: 1px solid #2c3d52; border-radius: 9px; background: #09111a; }
.technical summary { cursor: pointer; color: #cfe2f7; font-weight: 800; }
.technical pre, .worker-card pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #bcd0e5; font-size: .71rem; }

.technical-dashboard > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.technical-dashboard > summary::-webkit-details-marker { display: none; }
.technical-dashboard > summary strong, .technical-dashboard > summary small { display: block; }
.technical-dashboard > summary small { color: var(--muted); margin-top: 3px; }
.summary-caret { color: var(--cyan); transition: transform .18s ease; }
.technical-dashboard[open] .summary-caret { transform: rotate(180deg); }
.technical-dashboard[open] > summary { margin-bottom: 14px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.worker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.worker-card h3 { margin: 0 0 7px; }
.compact-list { display: grid; gap: 8px; }
.compact-item strong { display: block; font-size: .83rem; }
.compact-item span, .compact-item small { color: var(--muted); display: block; margin-top: 3px; overflow-wrap: anywhere; }
.audit-panel { margin-top: 12px; }
.footer-note { text-align: center; font-size: .76rem; line-height: 1.5; }
.danger-note { color: #ffb7c0; font-size: .74rem; }
.success-note { color: #a5f4cb; font-size: .74rem; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 12, .8);
  backdrop-filter: blur(7px);
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  width: min(620px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid #3a4d65;
  border-radius: 18px;
  background: linear-gradient(145deg, #172131, #0c131e);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .58);
}
.invoice-modal-card { width: min(780px, 100%); }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; }
.modal-header { border-bottom: 1px solid #29384c; }
.modal-header h2 { font-size: 1.2rem; }
.modal-footer { border-top: 1px solid #29384c; justify-content: flex-end; position: sticky; bottom: 0; background: #111a27; }
.modal-body { display: grid; gap: 12px; padding: 17px; }
.modal-body p { margin-bottom: 0; color: #b7c5d5; line-height: 1.5; }
.modal-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.modal-choice-grid button { min-height: 38px; border: 1px solid #34475f; border-radius: 9px; background: #111a27; color: #e7f1ff; font-weight: 800; }
.modal-choice-grid button.active { border-color: var(--cyan); background: #143148; color: #c9f5ff; }
.preview-box { padding: 11px; border: 1px solid #3b536d; border-radius: 10px; background: #09121d; color: #c8d9e9; line-height: 1.5; }
.preview-box.good { border-color: #27634a; color: #a5f4cb; }
.preview-box.warn { border-color: #725321; color: #ffe0a1; }
.modal-warning { padding: 10px 11px; border-left: 3px solid var(--amber); background: #211a0d; color: #f2d48d; font-size: .78rem; line-height: 1.45; }
.invoice-form-note { font-size: .75rem; color: var(--muted); }
.invoice-preview-card { padding: 13px; border: 1px solid #34475f; border-radius: 12px; background: #f7f9fc; color: #16202b; }
.invoice-preview-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 2px solid #1d2b3a; }
.invoice-preview-head img { width: 68px; height: 68px; object-fit: cover; }
.invoice-preview-head strong { display: block; font-size: 1.35rem; }
.invoice-preview-head span { color: #405369; font-size: .8rem; }
.invoice-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; }
.invoice-preview-grid .kv span { color: #63758a; }
.invoice-preview-grid .kv strong { color: #16202b; }

@media (max-width: 1250px) {
  .filter-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .user-layout { grid-template-columns: 1fr; }
  .detail-panel { position: static; }
}
@media (max-width: 950px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 12px; }
  .brand span { display: none; }
  .shell { width: min(100% - 16px, 1500px); margin-top: 10px; }
  .card-grid, .filter-grid, .worker-grid, .kv-grid, .licence-highlight, .modal-field-grid, .modal-choice-grid { grid-template-columns: 1fr; }
  .login-card, .panel { padding: 14px; }
  .list-toolbar, .section-heading, .panel-heading, .customer-summary-header { align-items: flex-start; flex-direction: column; }
  .search-row { grid-template-columns: 1fr; }
  .more-filters[open] { grid-column: auto; }
  .more-filters[open] > summary { margin-left: 0; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .button { flex: 1; }
}

/* PHASE10 Gate 4 — read-only abuse/security signal review */
.abuse-review-panel {
  border-color: #36536c;
  background:
    radial-gradient(circle at top right, rgba(49, 216, 244, .08), transparent 24rem),
    linear-gradient(145deg, rgba(19, 31, 47, .98), rgba(10, 17, 27, .99));
}
.abuse-heading { align-items: flex-start; }
.abuse-heading .subtle { max-width: 780px; margin: 7px 0 0; line-height: 1.5; }
.signal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 15px 0 12px;
}
.signal-metrics article {
  border: 1px solid #2d4258;
  border-radius: 12px;
  padding: 11px 12px;
  background: #0b141f;
}
.signal-metrics span, .signal-metrics small { display: block; color: var(--muted); }
.signal-metrics strong { display: block; margin: 4px 0 2px; font-size: 1.45rem; }
.signal-metrics small { font-size: .68rem; }
.signal-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(230px, 1.5fr);
  gap: 9px;
  margin-bottom: 12px;
}
.signal-search { min-width: 0; }
.signal-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1.3fr) minmax(360px, .7fr);
  gap: 14px;
  align-items: start;
}
.signal-table { min-width: 790px; }
.signal-table td:nth-child(2) strong,
.signal-table td:nth-child(2) span { display: block; }
.signal-table td:nth-child(2) span { color: var(--muted); margin-top: 3px; font-size: .7rem; }
.signal-detail-panel { position: sticky; top: 88px; }
.signal-detail-panel .detail-title strong,
.signal-detail-panel .detail-title span { display: block; }
.signal-detail-panel .detail-title span { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.signal-detail-panel .status-row { margin-top: 9px; }
.signal-detail-panel .footer-note { text-align: left; margin: 0; }
.status-pill.muted { background: #1a2635; color: #a9bacd; }

@media (max-width: 1250px) {
  .signal-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .signal-search { grid-column: span 2; }
  .signal-layout { grid-template-columns: 1fr; }
  .signal-detail-panel { position: static; }
}
@media (max-width: 700px) {
  .signal-metrics, .signal-filter-grid { grid-template-columns: 1fr; }
  .signal-search { grid-column: auto; }
}


/* PHASE10 Gate 5 — time-limited Owner controls only. */
.gate5-policy-panel { border-color: rgba(65, 175, 128, .42); }
.gate5-control-section { border-color: rgba(95, 146, 255, .36); }
.gate5-control-list { display: grid; gap: 12px; margin-top: 10px; }
.gate5-control-card { border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: rgba(255,255,255,.025); }
.gate5-control-card.active { border-color: rgba(231, 92, 92, .55); background: rgba(231, 92, 92, .065); }
.gate5-control-card.inactive { opacity: .82; }
.gate5-control-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gate5-control-card .button { margin-top: 10px; }
@media (max-width: 760px) { .gate5-control-head { align-items: flex-start; flex-direction: column; } }


/* PHASE10 Gate 6 — Owner notifications and manual IP-hash network controls. */
.gate6-network-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gate6-network-list { display: grid; gap: 8px; margin-top: 12px; }
.gate6-network-card { display: grid; gap: 5px; padding: 11px; border: 1px solid #2f435a; border-radius: 10px; background: #0a121d; }
.gate6-network-card.active { border-color: rgba(255, 190, 84, .58); background: rgba(255, 190, 84, .055); }
.gate6-network-card.inactive { opacity: .78; }
.gate6-network-card span { color: var(--muted); font-size: .76rem; }
.gate6-network-card .button { width: max-content; margin-top: 4px; }


/* PHASE11 Account, Free Export & Owner Admin Sales Reliability FIX1 */
.owner-account-display {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid #34475f;
  border-radius: 9px;
  background: #0c1420;
}
.owner-account-display span { color: var(--muted); font-size: .72rem; }
.owner-account-display strong { overflow-wrap: anywhere; }
.sales-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 8px; }
.sales-toolbar label { min-width: 145px; }
.sales-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.sales-metrics article { padding: 12px; border: 1px solid #29384c; border-radius: 12px; background: #0d1724; }
.sales-metrics span, .sales-metrics small { display: block; color: var(--muted); }
.sales-metrics strong { display: block; margin: 5px 0 2px; font-size: 1.35rem; }
.sales-breakdowns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.sales-breakdowns > section { padding: 12px; border: 1px solid #29384c; border-radius: 12px; background: #0d1724; }
.sales-breakdowns h3 { margin: 0 0 9px; font-size: .9rem; }
.sales-breakdown-list { display: grid; gap: 7px; }
.sales-breakdown-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.sales-breakdown-item small { color: var(--muted); }
.sales-table td { vertical-align: top; }
.payment-field-grid[hidden] { display: none; }
.payment-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; border: 1px solid #29384c; border-radius: 10px; }
.payment-field-grid .full { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .sales-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sales-breakdowns { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sales-metrics, .payment-field-grid { grid-template-columns: 1fr; }
  .sales-toolbar { justify-content: stretch; }
  .sales-toolbar label, .sales-toolbar button { width: 100%; }
}


/* PHASE11 Reliability FIX1A - compact tabbed Owner Admin. */
#adminPanel .compact-heading {
  margin-bottom: 10px;
}
#adminPanel .compact-heading h1 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  margin-bottom: 4px;
}
#adminPanel .compact-heading .heading-note {
  max-width: 780px;
  font-size: .79rem;
}
#adminPanel .compact-metric-grid {
  gap: 8px;
  margin-bottom: 10px;
}
#adminPanel .compact-metric-grid .metric-card {
  min-height: 78px;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
#adminPanel .compact-metric-grid .metric-card span {
  font-size: .78rem;
}
#adminPanel .compact-metric-grid .metric-card strong {
  margin: 2px 0 1px;
  font-size: 1.45rem;
  line-height: 1.05;
}
#adminPanel .compact-metric-grid .metric-card small {
  font-size: .7rem;
}
.admin-tabs {
  display: flex;
  gap: 7px;
  margin: 0 0 10px;
  padding: 5px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #2b3c51;
  border-radius: 12px;
  background: rgba(9, 15, 24, .82);
}
.admin-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #aebed0;
  font-size: .76rem;
  font-weight: 800;
}
.admin-tab:hover {
  color: #eaf5ff;
  background: #142033;
}
.admin-tab.active,
.admin-tab[aria-selected="true"] {
  border-color: #3b7ca5;
  background: linear-gradient(135deg, #153b52, #172c49);
  color: #d7f8ff;
  box-shadow: inset 0 0 0 1px rgba(49, 216, 244, .12);
}
.admin-tab-panel[hidden] {
  display: none !important;
}
.admin-tab-panel > .panel:first-child,
.admin-tab-panel > details:first-child {
  margin-top: 0;
}
#adminPanelCustomers .users-panel {
  padding-top: 14px;
}
#adminPanelSales .sales-panel,
#adminPanelSecurity .abuse-review-panel {
  margin-top: 0;
}
@media (max-width: 700px) {
  .admin-tabs {
    width: 100%;
  }
  .admin-tab {
    flex: 1 0 auto;
  }
}

/* PHASE11 Reliability FIX3: give password managers an explicit Owner username
   target without exposing another editable field or disturbing layout. */
.owner-password-manager-identity {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.payment-action-button {
  white-space: nowrap;
}


/* PHASE11 Reliability FIX3-FIX3 — Owner unlock and sales analytics polish. */
.owner-unlock-note {
  padding: 10px 11px;
  border: 1px solid rgba(56, 211, 159, .45);
  border-radius: 9px;
  background: rgba(56, 211, 159, .08);
  color: #b8ffe3;
  font-size: .75rem;
  line-height: 1.45;
}
.badge.good { border-color: rgba(56, 211, 159, .55); background: rgba(56, 211, 159, .11); color: #b8ffe3; }
.metric-trend { display: block; margin-top: 7px; font-style: normal; font-size: .69rem; font-weight: 800; }
.metric-trend.up { color: #6ff0b8; }
.metric-trend.down { color: #ff9b9b; }
.metric-trend.neutral { color: var(--muted); }
.sales-analytics { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 12px; margin: 12px 0; }
.sales-chart-card, .sales-status-card { padding: 12px; border: 1px solid #29384c; border-radius: 12px; background: #0d1724; }
.sales-chart-card h3, .sales-status-card h3 { margin: 0; font-size: .9rem; }
.sales-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sales-chart-heading p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; }
.sales-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sales-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .68rem; }
.sales-legend-item i { width: 9px; height: 9px; border-radius: 999px; background: #31d8f4; }
.sales-legend-item.collected i { background: #6ff0b8; }
.sales-legend-item.outstanding i { background: #ffbd66; }
.sales-trend-chart { min-height: 240px; margin-top: 10px; }
.sales-trend-svg { width: 100%; height: 240px; overflow: visible; }
.chart-grid-line { stroke: rgba(139, 160, 185, .18); stroke-width: 1; }
.chart-axis-label { fill: #91a4ba; font-size: 10px; }
.chart-series { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-series.gross, .chart-point.gross { stroke: #31d8f4; fill: #31d8f4; }
.chart-series.collected, .chart-point.collected { stroke: #6ff0b8; fill: #6ff0b8; }
.chart-series.outstanding, .chart-point.outstanding { stroke: #ffbd66; fill: #ffbd66; }
.sales-status-chart { margin-top: 13px; }
.sales-status-bar { display: flex; width: 100%; height: 14px; overflow: hidden; border-radius: 999px; background: #172333; }
.sales-status-segment { min-width: 2px; }
.status-paid { background: #49d99b; }
.status-overpaid { background: #8c7bff; }
.status-partially_paid { background: #31d8f4; }
.status-pending { background: #ffbd66; }
.status-refunded { background: #ff8b9e; }
.status-cancelled { background: #66768a; }
.sales-status-list { display: grid; gap: 8px; margin-top: 12px; }
.sales-status-list > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.sales-status-list > div small { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 1050px) { .sales-analytics { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .sales-chart-heading { flex-direction: column; }
  .sales-chart-legend { justify-content: flex-start; }
}


/* PHASE12A — modern sales analytics and transaction-linked invoice preview. */
.sales-panel { --sales-blue: #36a8ff; --sales-cyan: #31d8f4; --sales-green: #55e0aa; --sales-amber: #ffb84d; }
.sales-metrics article { position: relative; overflow: hidden; min-height: 112px; background: linear-gradient(145deg, rgba(18,32,49,.98), rgba(10,19,31,.98)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 14px 30px rgba(0,0,0,.16); }
.sales-metrics article::after { content: ''; position: absolute; width: 82px; height: 82px; right: -34px; top: -34px; border-radius: 50%; background: radial-gradient(circle, rgba(49,216,244,.13), transparent 68%); }
.sales-analytics { grid-template-columns: minmax(0, 1.75fr) minmax(290px, .75fr); }
.sales-chart-card, .sales-status-card, .sales-breakdowns > section { background: linear-gradient(145deg, rgba(14,27,43,.98), rgba(9,18,30,.98)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 38px rgba(0,0,0,.18); }
.sales-chart-tools { display: grid; justify-items: end; gap: 8px; }
.sales-compare-label { padding: 6px 9px; border: 1px solid #30445d; border-radius: 8px; color: #b8c9da; background: #101c2b; font-size: .68rem; font-weight: 700; }
.sales-trend-chart { min-height: 270px; }
.sales-trend-svg { height: 270px; }
.chart-bar { opacity: .94; }
.chart-bar.gross { fill: url(#grossGradient); fill: #36a8ff; }
.chart-bar.collected { fill: #55e0aa; }
.chart-series.outstanding { stroke: #ffb84d; stroke-width: 2.5; }
.chart-point.outstanding { stroke: #ffb84d; fill: #0d1724; stroke-width: 2.5; }
.sales-legend-item.average i { width: 14px; height: 3px; border-radius: 3px; background: #657bff; }
.chart-series.average { stroke: #657bff; stroke-width: 2.2; opacity: .9; }
.chart-point.average { stroke: #657bff; fill: #0d1724; stroke-width: 2; }
.sales-performance-chart { margin-top: 14px; }
.collection-rate-wrap { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 18px; }
.collection-rate-ring { --collection-rate: 0deg; width: 142px; height: 142px; padding: 14px; border-radius: 50%; background: conic-gradient(#31d8f4 0 var(--collection-rate), #24364b var(--collection-rate) 360deg); box-shadow: 0 0 28px rgba(49,216,244,.14); }
.collection-rate-center { display: grid; place-content: center; justify-items: center; width: 100%; height: 100%; border-radius: 50%; background: #0d1724; text-align: center; }
.collection-rate-center strong { font-size: 1.75rem; }
.collection-rate-center span, .collection-rate-center small { color: var(--muted); font-size: .72rem; }
.collection-rate-details { display: grid; gap: 9px; }
.collection-rate-details > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(139,160,185,.13); }
.collection-rate-details span { color: var(--muted); font-size: .72rem; }
.collection-rate-details strong { font-size: .78rem; }
.collection-rate-details .good strong { color: #55e0aa; }
.collection-rate-details .warn strong { color: #ffb84d; }
.collection-rate-note { margin-top: 14px; padding: 10px 11px; border: 1px solid #293d55; border-radius: 9px; background: rgba(22,38,58,.72); color: #b9c9da; font-size: .72rem; }
.collection-rate-note.good { border-color: rgba(85,224,170,.35); color: #aaffdf; background: rgba(85,224,170,.07); }
.sales-breakdowns-modern { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sales-table-heading h3 { margin: 0 0 3px; font-size: .92rem; }
.invoice-connection-note { padding: 9px 11px; border-radius: 9px; font-size: .75rem; }
.invoice-connection-note.good { border: 1px solid rgba(85,224,170,.35); background: rgba(85,224,170,.07); color: #b8ffe3; }
.invoice-connection-note.warn { border: 1px solid rgba(255,184,77,.38); background: rgba(255,184,77,.08); color: #ffe0aa; }
.invoice-readonly { color: #d9e8f6; background: #0a1420 !important; border-style: dashed !important; cursor: default; }
.invoice-payment-grid { margin-top: 2px; }
@media (max-width: 1150px) { .sales-breakdowns-modern { grid-template-columns: 1fr 1fr; } }
@media (max-width: 780px) { .sales-breakdowns-modern { grid-template-columns: 1fr; } .collection-rate-wrap { grid-template-columns: 1fr; justify-items: center; } .collection-rate-details { width: 100%; } }

/* PHASE12A FIX2 — chart integrity: line series must never fill and low-value data gets full chart use. */
.chart-series.outstanding,
.chart-series.average {
  fill: none !important;
}