:root {
  --brand-teal: #0A8588;
  --brand-teal-dark: #086b6d;
  --brand-teal-soft: #D1FEFF;
  --brand-teal-pale: #F1FEFF;
  --brand-cyan: #49C2C9;
  --brand-gradient: linear-gradient(to right, #006f88, #03607a, #018ba0);
  --brand-gradient-hover: linear-gradient(to right, #005e74, #024f67, #007d91);
  --brand-navy-gradient: linear-gradient(to right, #01284b, #013b5c, #014262);
  --brand-navy-gradient-hover: linear-gradient(to right, #011f3c, #012f4c, #013752);
  --brand-navy-950: #011d3a;
  --brand-navy-900: #022446;
  --brand-navy-800: #022f52;
  --brand-navy-700: #083e62;
  --workspace: #F8F9FC;
  --surface: #FFFFFF;
  --text: #0C090A;
  --text-strong: #172B4D;
  --muted: #69758C;
  --border: rgba(12, 9, 10, 0.15);
  --border-soft: #E8EDF3;
  --danger: #DC3545;
  --success: #198754;
  --warning: #B7791F;
  --radius: 12px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.08);
  --sidebar-width: 250px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--workspace);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-teal); text-decoration: none; }
a:hover { color: var(--brand-teal-dark); }

/* ---------- Shared controls ---------- */
/*
 * Global action-button system. All action buttons use the Genicoder teal/navy
 * palette from the original AutoCoder navigation. Bootstrap semantic button
 * colors are deliberately normalized here so future screens cannot drift into
 * unrelated red/green/blue button palettes.
 */
.btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  border-width: 1px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(10,133,136,.16) !important; }
.btn:disabled, .btn.disabled { transform: none !important; opacity: .58; cursor: not-allowed; }

.btn-sm {
  min-height: 34px;
  padding: 0 12px !important;
  border-radius: 7px;
  font-size: 13px;
}
.btn-lg {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 15px;
}

/* Primary action: mirrors the original active sidebar gradient. */
.btn-brand,
.btn-primary,
.btn-success,
.btn-info {
  background: var(--brand-gradient) !important;
  border-color: #04798d !important;
  color: #fff !important;
}
.btn-brand:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background: var(--brand-gradient-hover) !important;
  border-color: #006f82 !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(1,111,136,.16) !important;
}

/* Secondary / back / cancel action. */
.btn-outline-brand,
.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary {
  color: var(--brand-teal) !important;
  border-color: rgba(10,133,136,.60) !important;
  background: #fff !important;
}
.btn-outline-brand:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
  background: #F0FBFB !important;
  border-color: var(--brand-teal) !important;
  color: var(--brand-teal-dark) !important;
  box-shadow: 0 4px 12px rgba(10,133,136,.09) !important;
}

/* Strong secondary/destructive action: branded navy, never generic Bootstrap red. */
.btn-brand-dark,
.btn-danger,
.btn-outline-danger,
.btn-warning,
.btn-outline-warning {
  background: var(--brand-navy-gradient) !important;
  border-color: #013b5c !important;
  color: #fff !important;
}
.btn-brand-dark:hover,
.btn-danger:hover,
.btn-outline-danger:hover,
.btn-warning:hover,
.btn-outline-warning:hover {
  background: var(--brand-navy-gradient-hover) !important;
  border-color: #012f4c !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(1,40,75,.15) !important;
}

.btn-soft-brand {
  background: #E8F8F8 !important;
  border: 1px solid rgba(10,133,136,.38) !important;
  color: var(--brand-teal) !important;
}
.btn-soft-brand:hover {
  background: #D9F2F2 !important;
  border-color: var(--brand-teal) !important;
  color: var(--brand-teal-dark) !important;
}

.btn img, .btn svg, .btn i {
  flex: 0 0 auto;
  vertical-align: middle;
}

.form-label, label { font-weight: 600; color: #344054; margin-bottom: 7px; }
.form-control,
.form-select,
.genicoder-form input:not([type="checkbox"]):not([type="radio"]),
.genicoder-form select,
.genicoder-form textarea {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  border: 1px solid var(--border) !important;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  box-shadow: none !important;
  outline: none;
}
.genicoder-form textarea { min-height: 88px; resize: vertical; }
.form-control:focus,
.form-select:focus,
.genicoder-form input:not([type="checkbox"]):not([type="radio"]):focus,
.genicoder-form select:focus,
.genicoder-form textarea:focus {
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(10, 133, 136, 0.12) !important;
}
.form-check-input:checked { background-color: var(--brand-teal); border-color: var(--brand-teal); }
.form-check-input:focus { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(10, 133, 136, 0.14); }
.helptext, .form-text { color: var(--muted); font-size: 12px; margin-top: 5px; }
.errorlist { list-style: none; padding: 0; margin: 5px 0 0; color: #B42318; font-size: 12px; }

.card, .panel-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel-card { padding: 20px; }

.page-title { color: #101828; font-size: 26px; font-weight: 700; margin: 0; }
.page-subtitle { color: var(--muted); margin: 5px 0 0; }
.section-heading { color: #172B4D; font-size: 17px; font-weight: 700; margin: 0; }
.muted { color: var(--muted); }

.alert { border-radius: 10px; border-width: 1px; }
.alert-success { color: #05603A; background: #ECFDF3; border-color: #ABEFC6; }
.alert-info { color: #075985; background: #F0F9FF; border-color: #BAE6FD; }
.alert-warning { color: #854D0E; background: #FFFBEB; border-color: #FDE68A; }
.alert-danger, .alert-error { color: #912018; background: #FEF3F2; border-color: #FECDCA; }

.badge-soft-success { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#ECFDF3; color:#067647; font-weight:600; font-size:12px; }
.badge-soft-warning { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#FFFAEB; color:#B54708; font-weight:600; font-size:12px; }
.badge-soft-danger { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#FEF3F2; color:#B42318; font-weight:600; font-size:12px; }
.badge-soft-brand { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#E8F8F8; color:var(--brand-teal); font-weight:600; font-size:12px; }

.table-responsive { border-radius: 10px; }
.table { margin-bottom: 0; color: #344054; }
.table thead th {
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: #F8F9FC;
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 14px;
  white-space: nowrap;
}
.table tbody td { padding: 13px 14px; border-color: #EEF2F6; vertical-align: middle; }
.table tbody tr:hover { background: #FCFEFE; }

/* ---------- Authentication pages: ported from original AutoCoder ---------- */
.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #f7fafc;
}
.auth-background {
  position: fixed;
  inset: 0;
  background: url("../assets/Signup12.png") center / cover no-repeat;
  z-index: 0;
}
.auth-header {
  position: relative;
  z-index: 2;
  min-height: 72px;
  padding: 12px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.brand-logo { width: 142px; height: auto; display: block; }
.language-pill {
  min-width: 46px;
  background: #fff;
  border: 1px solid rgba(12,9,10,.08);
  border-radius: 8px;
  padding: 5px 10px;
  color: #344054;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.auth-main {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 34px;
}
.auth-card {
  width: min(540px, 100%);
  padding: 34px 36px;
  background: rgba(255,255,255,.985);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
}
.auth-card.auth-card-wide { width: min(820px, 100%); }
.auth-title { margin: 0; text-align: center; color: #101828; font-size: 28px; font-weight: 750; }
.auth-subtitle { margin: 7px 0 24px; text-align: center; color: var(--muted); font-size: 14px; }
.auth-field { margin-bottom: 17px; }
.auth-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  border: 1px solid #CED4DA;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input-wrap:focus-within { border-color: rgba(10, 133, 136, .55); box-shadow: 0 0 0 3px rgba(10,133,136,.14); }
.auth-input-icon { width: 45px; display:flex; justify-content:center; color:#98A2B3; font-size: 16px; flex:0 0 45px; }
.auth-input-wrap input,
.auth-input-wrap select {
  width: 100%;
  min-height: 44px;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  padding: 9px 15px 9px 0;
  outline: none;
  box-shadow: none !important;
}
.auth-input-wrap select { padding-left: 14px; }
.auth-card .auth-plain-input,
.auth-card textarea.auth-plain-input {
  width:100%; border:1px solid #CED4DA !important; border-radius:12px; min-height:44px; padding:9px 13px; background:#fff; outline:none;
}
.auth-card .auth-plain-input:focus { border-color:var(--brand-teal) !important; box-shadow:0 0 0 3px rgba(10,133,136,.12) !important; }
.auth-submit {
  width: 100%;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 50px;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.auth-submit:hover { background: var(--brand-gradient-hover); box-shadow: 0 5px 16px rgba(1,111,136,.18); }
.auth-submit:active { transform: translateY(1px); }
.auth-links { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; font-weight:500; }
.auth-links a { color:#4CC3C9; text-decoration:underline; text-underline-offset:2px; }
.auth-footer {
  position: relative;
  z-index: 2;
  padding: 11px 20px 18px;
  display:flex;
  justify-content:center;
  gap:38px;
  color:#667085;
  font-size:12px;
}
.auth-message-wrap { position:relative; z-index:2; width:min(760px,calc(100% - 40px)); margin:0 auto; }
.auth-account-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:20px; }
.account-tab {
  min-height:42px; border:1px solid rgba(10,133,136,.28); background:#fff; color:#344054; border-radius:10px; padding:0 12px; text-align:center; font-weight:600; display:flex; align-items:center; justify-content:center; line-height:1.15;
}
.account-tab:hover { border-color:var(--brand-teal); color:var(--brand-teal); background:#F4FBFB; }
.account-tab.active { background:var(--brand-gradient); border-color:#04798d; color:#fff; }
.auth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.auth-grid .full-width { grid-column:1/-1; }

/* ---------- Logged-in shell ---------- */
.app-shell { min-height: 100vh; display:flex; background: var(--workspace); }
.app-sidebar {
  position: fixed;
  left:0; top:0; bottom:0;
  width: var(--sidebar-width);
  padding: 16px 14px;
  display:flex;
  flex-direction:column;
  background: linear-gradient(to bottom, var(--brand-navy-950), var(--brand-navy-900), var(--brand-navy-800));
  color:#fff;
  z-index:1040;
  overflow-y:auto;
}
.sidebar-brand { display:flex; align-items:center; min-height:52px; padding:0 6px; }
.sidebar-brand img { width:122px; height:auto; }
.sidebar-divider { border:0; border-top:1px solid rgba(226,232,240,.18); margin:10px 0; }
.sidebar-section-title { color:#AFC0D2; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.07em; margin:7px 10px 6px; }
.sidebar-nav { display:flex; flex-direction:column; gap:3px; }
.sidebar-link {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:42px;
  padding:9px 11px;
  border-radius:8px;
  color:#E2E8F0;
  font-size:14px;
  font-weight:500;
  transition: background .15s ease,color .15s ease;
}
.sidebar-link img { width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; }
.sidebar-link:hover { color:#fff; background:rgba(255,255,255,.08); }
.sidebar-link.active { background:var(--brand-gradient); color:#fff; border-radius:10px; }
.sidebar-spacer { flex:1; min-height:18px; }

.app-main { width:100%; min-width:0; padding-left:var(--sidebar-width); }
.app-topbar {
  position:sticky; top:0; z-index:1030;
  height:70px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.topbar-context { color:#344054; font-weight:650; }
.topbar-user { display:flex; align-items:center; gap:11px; }
.topbar-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid #E4E7EC; }
.topbar-name { color:#030304; font-weight:600; line-height:1.2; }
.topbar-role { color:#8F9093; font-size:12px; margin-top:3px; }
.app-content { padding:26px 28px 38px; max-width:1600px; margin:0 auto; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }

.metric-card { padding:18px 20px; min-height:118px; }
.metric-label { color:#69758C; font-size:13px; margin-bottom:9px; }
.metric-value { color:#172B4D; font-size:26px; line-height:1.1; font-weight:750; }
.metric-meta { color:#98A2B3; font-size:12px; margin-top:9px; }

.detail-list { margin:0; }
.detail-row { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px dashed rgba(12,9,10,.15); }
.detail-row:last-child { border-bottom:0; }
.detail-label { color:#69758C; }
.detail-value { color:#172B4D; font-weight:600; text-align:right; }

.package-card { padding:20px; height:100%; position:relative; }
.package-name { font-size:18px; color:#172B4D; font-weight:750; }
.package-price { font-size:28px; color:var(--brand-teal); font-weight:750; margin:10px 0 2px; }
.package-credit { color:#475467; }
.service-fee-table input[type="number"] { min-width:130px; }

.empty-state { padding:38px 20px; text-align:center; color:#69758C; }
.empty-state-icon { width:46px; height:46px; border-radius:50%; background:#EAF8F8; display:grid; place-items:center; margin:0 auto 11px; color:var(--brand-teal); font-size:20px; }

/* Responsive */
@media (max-width: 991px) {
  :root { --sidebar-width: 210px; }
  .app-content { padding:22px 20px 32px; }
  .app-topbar { padding:0 20px; }
  .auth-card.auth-card-wide { width:min(700px,100%); }
}
@media (max-width: 767px) {
  :root { --sidebar-width: 0px; }
  .app-sidebar { position:static; width:100%; min-height:auto; height:auto; padding:12px; }
  .app-shell { display:block; }
  .app-main { padding-left:0; }
  .sidebar-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sidebar-section-title,.sidebar-divider,.sidebar-spacer { display:none; }
  .sidebar-brand { justify-content:center; margin-bottom:8px; }
  .app-topbar { height:auto; min-height:62px; padding:10px 16px; }
  .app-content { padding:18px 14px 28px; }
  .page-header { flex-direction:column; }
  .auth-header { padding:12px 16px; }
  .auth-card { padding:28px 22px; }
  .auth-grid { grid-template-columns:1fr; }
  .auth-grid .full-width { grid-column:auto; }
  .auth-footer { gap:14px; flex-wrap:wrap; text-align:center; }
}
@media (max-width: 520px) {
  .auth-title { font-size:24px; }
  .auth-main { padding-left:12px; padding-right:12px; }
  .auth-card { border-radius:13px; padding:24px 18px; }
  .auth-links { flex-direction:column; gap:10px; }
  .sidebar-nav { grid-template-columns:1fr; }
  .topbar-role { display:none; }
}

/* ---------- Global Genicoder DataTable standard ---------- */
.listing-card {
  padding: 18px;
  overflow: hidden;
}

.genicoder-tabs {
  gap: 8px;
  border-bottom: 1px solid #EAECF0;
}
.genicoder-tabs .nav-link {
  color: #667085;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  border-radius: 9px 9px 0 0;
  padding: 9px 15px;
  background: transparent;
  border-bottom: 2px solid transparent;
}
.genicoder-tabs .nav-link:hover {
  color: var(--brand-teal);
  background: #F4FBFB;
}
.genicoder-tabs .nav-link.active {
  color: var(--brand-teal);
  background: #F4FBFB;
  border-bottom-color: var(--brand-teal);
}

.dt-container {
  width: 100%;
  color: #344054;
}
.dt-container .dt-layout-row {
  margin: 0;
  align-items: center;
}
.dt-container .dt-layout-row:first-child {
  min-height: 42px;
  margin-bottom: 12px;
  gap: 12px;
}
.dt-container .dt-layout-row:last-child {
  min-height: 42px;
  margin-top: 12px;
  gap: 12px;
}
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging {
  margin: 0 !important;
}
.dt-container .dt-search label,
.dt-container .dt-length label {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}
.dt-container .dt-input,
.dt-container .form-select,
.dt-container .form-control {
  min-height: 36px;
  border: 1px solid #D0D5DD !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: #344054 !important;
  font-size: 13px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
.dt-container .dt-search .dt-input {
  width: 230px;
  margin-left: 0 !important;
  padding: 7px 11px;
}
.dt-container .dt-length .dt-input {
  min-width: 76px;
  margin: 0 5px;
  padding: 5px 28px 5px 10px;
}
.dt-container .dt-input:focus,
.dt-container .form-select:focus,
.dt-container .form-control:focus {
  border-color: rgba(10, 133, 136, .72) !important;
  box-shadow: 0 0 0 3px rgba(10, 133, 136, .10) !important;
  outline: none !important;
}

/* DataTables creates its own fixed-height body when scrollY is enabled. */
.dt-container .dt-scroll {
  border: 1px solid #EAECF0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.dt-container .dt-scroll-head {
  background: #F8F9FC;
  border-bottom: 1px solid #EAECF0 !important;
}
.dt-container .dt-scroll-headInner,
.dt-container .dt-scroll-headInner table,
.dt-container .dt-scroll-body table {
  width: 100% !important;
}
.dt-container .dt-scroll-body {
  overflow-y: auto !important;
  overflow-x: auto !important;
  border-bottom: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 133, 136, .50) #F2F4F7;
  overscroll-behavior: contain;
}
.dt-container .dt-scroll-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.dt-container .dt-scroll-body::-webkit-scrollbar-track {
  background: #F2F4F7;
  border-radius: 999px;
}
.dt-container .dt-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(10, 133, 136, .50);
  border-radius: 999px;
  border: 2px solid #F2F4F7;
}
.dt-container .dt-scroll-body::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 133, 136, .78);
}

/* Mirror the original AutoCoder DataTable visual language. */
table.genicoder-datatable.dataTable {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.genicoder-datatable.dataTable thead th {
  background: #F8F9FC !important;
  color: #475467 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(12, 9, 10, .08) !important;
  white-space: nowrap;
}
table.genicoder-datatable.dataTable thead th:last-child {
  border-right: 0 !important;
}
table.genicoder-datatable.dataTable tbody td {
  padding: 12px 14px !important;
  font-size: 14px;
  color: #475467;
  vertical-align: middle;
  border-top: 0 !important;
  border-right: 1px solid #F2F4F7 !important;
  border-bottom: 1px solid #EAECF0 !important;
  background: #fff;
}
table.genicoder-datatable.dataTable tbody td:last-child {
  border-right: 0 !important;
}
table.genicoder-datatable.dataTable tbody tr:hover td {
  background: #F8FCFC !important;
}
table.genicoder-datatable.dataTable tbody tr:last-child td {
  border-bottom: 0 !important;
}

.dt-container .dt-info {
  color: #667085;
  font-size: 12px;
  padding-top: 0 !important;
}
.dt-container .pagination {
  gap: 5px;
  margin: 0;
  flex-wrap: wrap;
}
.dt-container .pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid #EAECF0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #475467 !important;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none !important;
}
.dt-container .pagination .page-link:hover {
  color: var(--brand-teal) !important;
  border-color: rgba(10, 133, 136, .35) !important;
  background: #F4FBFB !important;
}
.dt-container .pagination .page-item.active .page-link {
  color: #fff !important;
  background: var(--brand-gradient) !important;
  border-color: #04798d !important;
}
.dt-container .pagination .page-item.disabled .page-link {
  color: #98A2B3 !important;
  background: #F9FAFB !important;
}

.dt-container div.dt-processing {
  border: 1px solid #D5EEEE !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #344054 !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10) !important;
  padding: 12px 16px !important;
}
.dt-loading-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid #D5EEEE;
  border-top-color: var(--brand-teal);
  border-radius: 50%;
  animation: genicoder-dt-spin .7s linear infinite;
}
@keyframes genicoder-dt-spin { to { transform: rotate(360deg); } }

@media (max-width: 767.98px) {
  .listing-card { padding: 12px; }
  .dt-container .dt-layout-row:first-child,
  .dt-container .dt-layout-row:last-child {
    align-items: stretch;
  }
  .dt-container .dt-search .dt-input {
    width: 100%;
  }
  .dt-container .dt-search,
  .dt-container .dt-length {
    width: 100%;
  }
}

/* Compact row actions keep the same geometry across every listing. */
.genicoder-datatable .btn-sm {
  min-width: 68px;
  min-height: 34px;
}
.genicoder-datatable td.text-end .btn + .btn { margin-left: 6px; }

/* Button groups align to a common baseline and never stretch unexpectedly. */
.action-buttons,
.page-actions,
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- DataTable resilient fallback ---------- */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EEF2F6;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}
.genicoder-tabs .nav-link.active .tab-count {
  background: rgba(10, 133, 136, .12);
  color: var(--brand-teal);
}
.gdt-fallback { width: 100%; color: #344054; }
.gdt-toolbar, .gdt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}
.gdt-toolbar { margin-bottom: 12px; }
.gdt-footer { margin-top: 12px; }
.gdt-length {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}
.gdt-page-size, .gdt-search {
  height: 36px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  outline: none;
}
.gdt-page-size { min-width: 74px; padding: 0 28px 0 10px; }
.gdt-search { width: 230px; padding: 0 11px; }
.gdt-page-size:focus, .gdt-search:focus {
  border-color: rgba(10,133,136,.72);
  box-shadow: 0 0 0 3px rgba(10,133,136,.10);
}
.gdt-scroll {
  overflow: auto;
  border: 1px solid #EAECF0;
  border-radius: 10px;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,133,136,.50) #F2F4F7;
  overscroll-behavior: contain;
}
.gdt-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.gdt-scroll::-webkit-scrollbar-track { background: #F2F4F7; border-radius: 999px; }
.gdt-scroll::-webkit-scrollbar-thumb { background: rgba(10,133,136,.50); border-radius: 999px; border: 2px solid #F2F4F7; }
.gdt-scroll::-webkit-scrollbar-thumb:hover { background: rgba(10,133,136,.78); }
.gdt-fallback-table { width: 100%; margin: 0 !important; border-collapse: separate; border-spacing: 0; }
.gdt-fallback-table thead { position: sticky; top: 0; z-index: 2; }
.gdt-fallback-table thead th {
  background: #F8F9FC !important;
  color: #475467 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(12,9,10,.08) !important;
  white-space: nowrap;
}
.gdt-fallback-table tbody td {
  padding: 12px 14px !important;
  font-size: 14px;
  color: #475467;
  vertical-align: middle;
  border-top: 0 !important;
  border-right: 1px solid #F2F4F7 !important;
  border-bottom: 1px solid #EAECF0 !important;
  background: #fff;
}
.gdt-fallback-table tbody tr:hover td { background: #F8FCFC !important; }
.gdt-sortable { cursor: pointer; position: relative; padding-right: 29px !important; user-select: none; }
.gdt-sortable::after { content: '↕'; position: absolute; right: 10px; color: #98A2B3; font-size: 11px; }
.gdt-sort-asc::after { content: '↑'; color: var(--brand-teal); }
.gdt-sort-desc::after { content: '↓'; color: var(--brand-teal); }
.gdt-info { color: #667085; font-size: 12px; }
.gdt-paging { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.gdt-page-btn {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 600;
}
.gdt-page-btn:hover:not(:disabled) { color: var(--brand-teal); border-color: rgba(10,133,136,.35); background: #F4FBFB; }
.gdt-page-btn.active { color: #fff; background: var(--brand-gradient); border-color: #04798d; }
.gdt-page-btn:disabled { color: #98A2B3; background: #F9FAFB; cursor: default; }
.gdt-empty, .gdt-error { height: 100px; text-align: center !important; color: #667085 !important; }
.gdt-error { color: #344054 !important; background: #FBFCFD !important; }
.gdt-fallback.is-loading .gdt-scroll { opacity: .72; }
@media (max-width: 767.98px) {
  .gdt-toolbar, .gdt-footer { flex-direction: column; align-items: stretch; }
  .gdt-search { width: 100%; }
  .gdt-paging { justify-content: flex-start; }
}

/* ========================================================================== */
/* GENICODER DESKTOP DENSITY STANDARD                                         */
/* Target: native 100% browser zoom should feel like the previously preferred */
/* compact/zoomed-out reference. Do not replace this with CSS zoom/transform.  */
/* ========================================================================== */
@media (min-width: 992px) {
  :root {
    --sidebar-width: 220px;
    --radius: 10px;
  }

  body {
    font-size: 12.5px;
    line-height: 1.38;
  }

  /* Shell */
  .app-sidebar {
    padding: 12px 10px;
  }
  .sidebar-brand {
    min-height: 44px;
    padding: 0 6px;
  }
  .sidebar-brand img {
    width: 108px;
  }
  .sidebar-divider {
    margin: 7px 0;
  }
  .sidebar-section-title {
    font-size: 9.5px;
    letter-spacing: .065em;
    margin: 6px 9px 5px;
  }
  .sidebar-nav {
    gap: 2px;
  }
  .sidebar-link {
    gap: 9px;
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 12.25px;
    line-height: 1.2;
  }
  .sidebar-link.active {
    border-radius: 8px;
  }
  .sidebar-link img {
    width: 16px;
    height: 16px;
  }

  .app-topbar {
    height: 58px;
    padding: 0 22px;
  }
  .topbar-context {
    font-size: 12.5px;
  }
  .topbar-user {
    gap: 9px;
  }
  .topbar-avatar {
    width: 32px;
    height: 32px;
  }
  .topbar-name {
    font-size: 12.25px;
  }
  .topbar-role {
    font-size: 10.5px;
    margin-top: 1px;
  }

  .app-content {
    padding: 18px 22px 26px;
  }
  .page-header {
    gap: 14px;
    margin-bottom: 14px;
  }
  .page-title {
    font-size: 21px;
    line-height: 1.15;
  }
  .page-subtitle {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
  }
  .section-heading {
    font-size: 14.5px;
  }

  /* Cards / panels */
  .panel-card {
    padding: 14px;
  }
  .listing-card {
    padding: 14px;
  }
  .card,
  .panel-card {
    border-radius: 10px;
  }
  .metric-card {
    min-height: 92px;
    padding: 14px 16px;
  }
  .metric-label {
    font-size: 11.5px;
    margin-bottom: 6px;
  }
  .metric-value {
    font-size: 21px;
  }
  .metric-meta {
    font-size: 10.5px;
    margin-top: 6px;
  }
  .detail-row {
    padding: 8px 0;
  }
  .package-card {
    padding: 14px;
  }
  .package-name {
    font-size: 15px;
  }
  .package-price {
    font-size: 22px;
    margin: 7px 0 2px;
  }
  .empty-state {
    padding: 26px 16px;
  }

  /* Forms */
  .form-label,
  label {
    margin-bottom: 5px;
    font-size: 12px;
  }
  .form-control,
  .form-select,
  .genicoder-form input:not([type="checkbox"]):not([type="radio"]),
  .genicoder-form select,
  .genicoder-form textarea {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
  }
  .genicoder-form textarea {
    min-height: 72px;
  }
  .helptext,
  .form-text,
  .errorlist {
    font-size: 10.5px;
  }

  /* Buttons */
  .btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12.25px;
    gap: 5px;
  }
  .btn-sm {
    min-height: 30px;
    padding: 0 10px !important;
    border-radius: 6px;
    font-size: 11.25px;
  }
  .btn-lg {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
  }
  .action-buttons,
  .page-actions,
  .form-actions {
    gap: 7px;
  }

  /* Alerts / badges */
  .alert {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12px;
  }
  .badge-soft-success,
  .badge-soft-warning,
  .badge-soft-danger,
  .badge-soft-brand {
    padding: 4px 7px;
    font-size: 10.5px;
  }

  /* Tabs */
  .genicoder-tabs {
    gap: 5px;
  }
  .genicoder-tabs .nav-link {
    padding: 7px 11px;
    border-radius: 7px 7px 0 0;
    font-size: 12px;
  }
  .tab-count {
    min-width: 20px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 9.5px;
  }

  /* DataTables toolbar */
  .dt-container .dt-layout-row:first-child,
  .gdt-toolbar {
    min-height: 34px;
    margin-bottom: 9px;
    gap: 9px;
  }
  .dt-container .dt-layout-row:last-child,
  .gdt-footer {
    min-height: 34px;
    margin-top: 9px;
    gap: 9px;
  }
  .dt-container .dt-search label,
  .dt-container .dt-length label,
  .gdt-length {
    font-size: 11.5px;
  }
  .dt-container .dt-input,
  .dt-container .form-select,
  .dt-container .form-control,
  .gdt-page-size,
  .gdt-search {
    min-height: 31px;
    border-radius: 7px !important;
    font-size: 11.5px !important;
  }
  .dt-container .dt-search .dt-input,
  .gdt-search {
    width: 210px;
    padding: 5px 9px;
  }
  .dt-container .dt-length .dt-input,
  .gdt-page-size {
    min-width: 67px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* DataTables grid density */
  table.genicoder-datatable.dataTable thead th,
  .gdt-fallback table.genicoder-datatable thead th {
    padding: 8px 11px !important;
    font-size: 10.75px !important;
    line-height: 1.2;
  }
  table.genicoder-datatable.dataTable tbody td,
  .gdt-fallback table.genicoder-datatable tbody td {
    padding: 8px 11px !important;
    font-size: 11.75px !important;
    line-height: 1.25;
  }
  .genicoder-datatable .btn-sm {
    min-width: 58px;
    min-height: 29px;
  }
  .genicoder-datatable td.text-end .btn + .btn {
    margin-left: 4px;
  }

  /* DataTables footer/pagination */
  .dt-container .dt-info,
  .gdt-info {
    font-size: 10.5px;
  }
  .dt-container .pagination,
  .gdt-paging {
    gap: 4px;
  }
  .dt-container .pagination .page-link,
  .gdt-page-btn {
    min-width: 29px;
    height: 29px;
    padding: 3px 7px;
    border-radius: 6px !important;
    font-size: 10.5px;
  }
  .dt-container .dt-scroll,
  .gdt-scroll {
    border-radius: 8px;
  }
  .dt-container .dt-scroll-body::-webkit-scrollbar,
  .gdt-scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  /* Authentication pages use the same compact density without changing branding. */
  .auth-header {
    min-height: 60px;
    padding: 9px 20px;
  }
  .brand-logo {
    width: 124px;
  }
  .language-pill {
    min-width: 42px;
    padding: 4px 8px;
    font-size: 11.5px;
  }
  .auth-main {
    padding: 20px 18px 26px;
  }
  .auth-card {
    width: min(500px, 100%);
    padding: 27px 30px;
    border-radius: 14px;
  }
  .auth-card.auth-card-wide {
    width: min(760px, 100%);
  }
  .auth-title {
    font-size: 23px;
  }
  .auth-subtitle {
    margin: 5px 0 18px;
    font-size: 12.25px;
  }
  .auth-field {
    margin-bottom: 13px;
  }
  .auth-input-wrap {
    min-height: 40px;
  }
  .auth-input-icon {
    width: 40px;
    flex-basis: 40px;
    font-size: 14px;
  }
  .auth-input-wrap input,
  .auth-input-wrap select {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12.5px;
  }
  .auth-card .auth-plain-input,
  .auth-card textarea.auth-plain-input {
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12.5px;
  }
  .auth-submit {
    min-height: 40px;
    padding: 0 18px;
    font-size: 13px;
  }
  .auth-links {
    margin-top: 15px;
    font-size: 12px;
  }
  .auth-footer {
    padding: 9px 18px 13px;
    gap: 28px;
    font-size: 10.5px;
  }
  .auth-account-tabs {
    gap: 7px;
    margin-bottom: 15px;
  }
  .account-tab {
    min-height: 36px;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 11.75px;
  }
}


/* ==========================================================================
   GENICODER SHARED FORM SYSTEM
   Never allow browser-default/native-looking controls into application pages.
   ========================================================================== */
.genicoder-control,
.genicoder-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.genicoder-form select,
.genicoder-form textarea {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #D7DEE8 !important;
  border-radius: 7px !important;
  background-color: #FFFFFF !important;
  color: #1D2939 !important;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: none !important;
  outline: 0 !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.genicoder-form select,
.form-select.genicoder-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
}

.genicoder-form textarea,
.genicoder-textarea {
  min-height: 72px;
  resize: vertical;
}

.genicoder-control::placeholder,
.genicoder-form input::placeholder,
.genicoder-form textarea::placeholder {
  color: #98A2B3;
  opacity: 1;
}

.genicoder-control:hover:not(:disabled),
.genicoder-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
.genicoder-form select:hover:not(:disabled),
.genicoder-form textarea:hover:not(:disabled) {
  border-color: #B7C2D0 !important;
}

.genicoder-control:focus,
.genicoder-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.genicoder-form select:focus,
.genicoder-form textarea:focus {
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 2.5px rgba(10, 133, 136, .12) !important;
}

.genicoder-control:disabled,
.genicoder-form input:disabled,
.genicoder-form select:disabled,
.genicoder-form textarea:disabled,
.genicoder-control[readonly] {
  background: #F5F7FA !important;
  color: #667085 !important;
  cursor: not-allowed;
}

/* Number fields should not expose browser-specific spinner chrome. */
.genicoder-form input[type="number"] {
  -moz-appearance: textfield;
}
.genicoder-form input[type="number"]::-webkit-outer-spin-button,
.genicoder-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Checkbox styling follows the Genicoder brand rather than OS defaults. */
.genicoder-check,
.genicoder-form .form-check-input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin-top: 0;
  border: 1.5px solid #B7C2D0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none !important;
}
.genicoder-check:checked,
.genicoder-form .form-check-input:checked {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
}
.genicoder-check:focus,
.genicoder-form .form-check-input:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 2.5px rgba(10,133,136,.12) !important;
}

/* File inputs inherit the same field frame and get a branded selector button. */
.genicoder-form input[type="file"] {
  padding: 0 !important;
  overflow: hidden;
}
.genicoder-form input[type="file"]::file-selector-button {
  height: 34px;
  margin-right: 10px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid #D7DEE8;
  background: linear-gradient(135deg, #0A8588 0%, #087477 100%);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.genicoder-form .form-label,
.genicoder-form label:not(.form-check-label) {
  display: inline-block;
  margin-bottom: 5px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.genicoder-form .form-check-label {
  color: #475467;
  font-size: 12px;
  line-height: 1.4;
}

.form-hint {
  color: #667085;
  font-size: 10.5px;
  line-height: 1.4;
}

.genicoder-form .errorlist {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: #9B2C2C;
  font-size: 10.5px;
  font-weight: 500;
}
.genicoder-form .errorlist + .genicoder-control,
.genicoder-form .is-invalid {
  border-color: #D08A8A !important;
}

.trial-extension-form .genicoder-textarea {
  min-height: 62px;
}
.trial-extension-form .row {
  align-items: start;
}

/* ---------- Branded compact toggle / package option system ---------- */
.setting-field {
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: #FBFCFD;
}
.genicoder-switch-row,
.genicoder-switch-inline,
.package-addon-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.genicoder-switch-row {
  width: 100%;
  margin: 0;
  cursor: pointer;
}
.genicoder-switch-row.is-disabled { cursor: not-allowed; opacity: .58; }
.genicoder-switch-copy,
.package-addon-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.genicoder-switch-label { color: #344054; font-size: 13px; font-weight: 650; line-height: 1.25; }
.genicoder-switch-note { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.3; }
.genicoder-switch-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}
.genicoder-switch-clickable { cursor: pointer; }
.genicoder-switch-control input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
  margin: 0 !important;
}
.genicoder-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #C9D2DD;
  background: #E6EBF0;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.genicoder-switch-thumb {
  position: absolute;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.22);
  transition: transform .18s ease;
}
.genicoder-switch-control input[type="checkbox"]:checked + .genicoder-switch-track {
  background: var(--brand-gradient);
  border-color: #04798d;
}
.genicoder-switch-control input[type="checkbox"]:checked + .genicoder-switch-track .genicoder-switch-thumb {
  transform: translateX(16px);
}
.genicoder-switch-control input[type="checkbox"]:focus-visible + .genicoder-switch-track {
  box-shadow: 0 0 0 3px rgba(10,133,136,.15);
}
.genicoder-switch-control input[type="checkbox"]:disabled + .genicoder-switch-track {
  opacity: .55;
  cursor: not-allowed;
}
.genicoder-switch-inline {
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  cursor: pointer;
}

.package-choice-card {
  padding: 16px;
  height: 100%;
  border-color: #E5EBF1;
}
.package-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.package-price-cycle { color: var(--muted); font-size: 12px; font-weight: 500; }
.package-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 11px;
}
.package-addon-line { color: var(--brand-teal-dark); font-weight: 600; }
.package-addon-option {
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(10,133,136,.22);
  border-radius: 9px;
  background: #F5FCFC;
}
.package-addon-unavailable {
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: #F8FAFC;
  color: var(--muted);
  font-size: 12px;
}
.active-package-card .package-price { font-size: 25px; }

@media (max-width: 767.98px) {
  .package-addon-option { align-items: flex-start; }
  .package-addon-option > .d-flex { width: 100%; justify-content: space-between; }
}


/* Global branded request loader */
.global-loader{position:fixed;inset:0;z-index:99999;background:rgba(4,26,38,.48);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease}.global-loader.is-visible{opacity:1;visibility:visible}.global-loader-card{min-width:180px;padding:22px 28px;border-radius:16px;background:#fff;box-shadow:0 18px 60px rgba(2,20,31,.28);display:flex;flex-direction:column;align-items:center;gap:10px}.global-loader-logo-wrap{height:42px;display:flex;align-items:center;justify-content:center}.global-loader-logo-wrap img{max-width:150px;max-height:42px}.global-loader-ring{width:34px;height:34px;border-radius:50%;border:3px solid rgba(10,133,136,.16);border-top-color:#0A8588;animation:genicoderSpin .72s linear infinite}.global-loader-text{font-size:12px;font-weight:700;letter-spacing:.02em;color:#475569}@keyframes genicoderSpin{to{transform:rotate(360deg)}}
.nav-count-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc3545;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.10)}
.package-change-card{border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#fff}.package-change-warning{font-size:12px;line-height:1.55;color:#64748b}.badge-upgrade{background:rgba(10,133,136,.12);color:#087174}.badge-downgrade{background:rgba(100,116,139,.13);color:#475569}


/* Billing Company Fix 1: restore branded loader logo motion. */
.global-loader-logo-wrap img {
  animation: genicoderLogoPulse 1.05s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform, opacity;
}
@keyframes genicoderLogoPulse {
  0%, 100% { transform: scale(0.96); opacity: .72; }
  50% { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .global-loader-logo-wrap img,
  .global-loader-ring { animation: none; }
}

/* Phase 3 - Code Recommendation */
.permission-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(12,9,10,.12);background:#f8ffff;border-radius:10px;padding:12px 14px}
.code-rec-limit-box{border:1px solid rgba(10,133,136,.28);background:#f1feff;border-radius:10px;padding:10px 12px;font-size:.84rem;color:#46515b}
.code-rec-upload{border:2px dashed #0a8588;border-radius:12px;background:#fff;padding:26px;text-align:center;transition:.16s ease}
.code-rec-upload.drag-over{background:#f1feff;box-shadow:0 0 0 3px rgba(10,133,136,.08)}
.code-rec-upload-icon{width:42px;height:42px;object-fit:contain}
.code-rec-file-picker{display:flex;align-items:stretch;width:100%;max-width:620px;margin:0;border:1px solid #D7DEE8;border-radius:8px;background:#fff;overflow:hidden;min-height:40px;text-align:left}
.code-rec-file-picker-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0;padding:0 18px;border:0;border-right:1px solid #D7DEE8;background:linear-gradient(135deg,#0A8588 0%,#087477 100%);color:#fff;font:inherit;font-size:12.5px;font-weight:650;line-height:1;cursor:pointer}
.code-rec-file-picker-button:hover{filter:brightness(.97)}
.code-rec-file-picker-button:focus-visible{outline:2px solid rgba(10,133,136,.35);outline-offset:-2px}
.code-rec-file-picker-copy{min-width:0;display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;padding:7px 11px;color:#667085;font-size:11.5px;line-height:1.25}
.code-rec-file-picker-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#344054;font-size:12px;font-weight:600}
.selected-file-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.selected-file-card{min-width:0;padding:9px 11px;border:1px solid rgba(12,9,10,.1);border-radius:9px;background:#f8f9fa;font-size:.8rem;text-align:left}
.selected-file-name{font-weight:650;color:#344054;overflow-wrap:anywhere}
.selected-file-meta{display:flex;justify-content:space-between;gap:14px;margin-top:4px;color:#667085;font-size:11.5px}
.selected-file-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:8px 11px;border:1px solid rgba(10,133,136,.22);border-radius:9px;background:#f1feff;color:#46515b;font-size:12px}
.selected-file-total strong{color:#087477}
@media(max-width:575.98px){.code-rec-file-picker{flex-direction:column}.code-rec-file-picker-button{min-height:38px;border-right:0;border-bottom:1px solid #D7DEE8}.code-rec-file-picker-copy{align-items:flex-start;flex-direction:column;gap:3px}.selected-file-meta,.selected-file-total{align-items:flex-start;flex-direction:column;gap:3px}}
.code-rec-charge-summary{border:1px solid rgba(10,133,136,.2);background:#f1feff;border-radius:9px;padding:9px 11px;font-size:.82rem}
.code-rec-table .code-row{cursor:grab}
.code-rec-table .code-row.dragging{opacity:.45}
.code-rec-table textarea{min-height:68px}
.code-rec-table .evidence-value{white-space:pre-wrap}
.code-rec-table .btn-link-teal{color:#0A8588;text-decoration:none;font-weight:600}.code-rec-table .btn-link-teal:hover{color:#087477;text-decoration:underline}.code-rec-table .code-edit-input{min-width:92px}

/* Phase 3 Build 2 - existing-style Tools navigation */
.sidebar-tool-parent{border-radius:8px;padding:7px 8px 8px;background:rgba(255,255,255,.035)}
.sidebar-tool-parent.active{background:rgba(255,255,255,.075)}
.sidebar-tool-parent-label{display:flex;align-items:center;gap:10px;color:#fff;font-size:13px;font-weight:650;padding:3px 4px 6px}
.sidebar-tool-parent-label img{width:18px;height:18px;object-fit:contain}
.sidebar-tool-children{display:flex;flex-direction:column;gap:2px;padding-left:30px}
.sidebar-sublink{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:12px;font-weight:550;padding:6px 8px;border-radius:6px}
.sidebar-sublink:hover,.sidebar-sublink.active{color:#fff;background:rgba(255,255,255,.1)}
.tool-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:768px){.tool-config-grid{grid-template-columns:1fr}}

/* Phase 3 Build 4 - Code Recommendation live processing */
.code-rec-processing{border:1px solid rgba(10,133,136,.24);background:linear-gradient(180deg,#fff 0%,#f8ffff 100%);overflow:hidden}
.code-rec-processing-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.code-rec-processing-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(10,133,136,.15);border-top-color:#0A8588;animation:genicoderSpin .75s linear infinite}
.code-rec-processing-percent{font-size:19px;font-weight:750;color:#087477;min-width:48px;text-align:right}
.code-rec-progress-track{height:8px;border-radius:999px;background:#e8f0f3;overflow:hidden}
.code-rec-progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,#0A8588,#1aa2a6);transition:width .35s ease}
.code-rec-processing-detail{min-height:20px;color:#667085;font-size:12.5px}
.code-rec-processing-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.code-rec-processing-steps span{position:relative;padding:9px 9px 9px 27px;border:1px solid #e3e8ef;border-radius:9px;background:#fff;color:#667085;font-size:11.5px;font-weight:600;line-height:1.3;transition:.2s ease}
.code-rec-processing-steps span:before{content:'';position:absolute;left:10px;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);background:#cbd5e1}
.code-rec-processing-steps span.is-active{border-color:rgba(10,133,136,.38);background:#ecfbfb;color:#087477}
.code-rec-processing-steps span.is-active:before{background:#0A8588;box-shadow:0 0 0 4px rgba(10,133,136,.12)}
.code-rec-processing-steps span.is-complete{color:#344054;background:#f8fafc}
.code-rec-processing-steps span.is-complete:before{background:#12b76a}
.code-rec-processing.has-error{border-color:rgba(180,35,24,.3);background:#fffafa}
.code-rec-processing.has-error .code-rec-processing-spinner{animation:none;border-color:#fecdca;border-top-color:#b42318}
@media(max-width:900px){.code-rec-processing-steps{grid-template-columns:1fr 1fr}.code-rec-processing-head{grid-template-columns:auto 1fr}.code-rec-processing-percent{grid-column:2;text-align:left}}
@media(max-width:575.98px){.code-rec-processing-steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.code-rec-processing-spinner{animation:none}.code-rec-progress-bar{transition:none}}

/* Phase 3 Build 5 - Code Recommendation History / HCFA */
.code-history-note{border-left:4px solid #0A8588}
.code-history-table{font-size:12px}.code-history-table th{white-space:nowrap}.code-history-codes{max-width:240px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:991.98px){.code-history-table{min-width:1180px}}

/* Phase 3 Build 6 - History placement/actions and HCFA preview polish */
.code-history-actions-head{min-width:330px}
.code-history-actions-cell{white-space:nowrap}
.code-history-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:318px}
.code-history-actions form{display:inline-flex;align-items:center;margin:0;padding:0;flex:0 0 auto}
.code-history-action-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;line-height:1;white-space:nowrap;margin:0}
.code-history-actions form:nth-child(1) .code-history-action-btn{min-width:104px}
.code-history-actions form:nth-child(2) .code-history-action-btn{min-width:86px}
.code-history-actions form:nth-child(3) .code-history-action-btn{min-width:92px}