:root {
  --sp-font-sans:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --sp-font-mono:Cousine,"SFMono-Regular",Consolas,monospace;
  --sp-primary:#2563eb;
  --sp-primary-dark:#1d4ed8;
  --sp-primary-soft:#eff6ff;
  --sp-primary-border:#93c5fd;
  --sp-text:#374151;
  --sp-title:#0f172a;
  --sp-muted:#64748b;
  --sp-placeholder:#94a3b8;
  --sp-border:#d1dff7;
  --sp-divider:#e4ecf8;
  --sp-dropdown-border:#dbeafe;
  --sp-surface:#fff;
  --sp-page:#f5f8ff;
  --sp-danger:#ef4444;
  --sp-success:#10b981;
  --sp-warning:#f59e0b;
  --sp-info:#2563eb;
  --sp-font-size-caption:11px;
  --sp-font-size-body:13px;
  --sp-font-size-section:15px;
  --sp-line-height-body:1.5;
  --sp-control-height:34px;
  --sp-table-head-height:42px;
  --sp-table-row-height:46px;
  --sp-space-1:4px;
  --sp-space-2:6px;
  --sp-space-3:8px;
  --sp-space-4:10px;
  --sp-space-5:14px;
  --sp-space-6:16px;
  --sp-radius-pill:999px;
  --sp-radius-card:16px;
  --sp-shadow-control:0 1px 2px rgba(0,0,0,.04);
  --sp-shadow-card:0 1px 2px rgba(0,0,0,.04);
  --sp-shadow-primary:0 2px 6px rgba(37,99,235,.3);
  --sp-shadow-floating:0 12px 40px rgba(15,23,42,.16);
  --sp-shadow-dropdown:0 8px 32px rgba(37,99,235,.13),0 2px 8px rgba(0,0,0,.06);
  --sp-focus-ring:0 0 0 3px rgba(37,99,235,.12);
  --sp-gradient-primary:linear-gradient(180deg,#4b8ef1 0%,#2563eb 60%,#1d55d6 100%);
  --sp-gradient-primary-hover:linear-gradient(180deg,#3f82eb 0%,#1f5fe0 60%,#184bc4 100%);
  --sp-gradient-danger:linear-gradient(180deg,#f87171 0%,#ef4444 60%,#dc2626 100%);
}

body {
  color:var(--sp-text);
  font-family:var(--sp-font-sans);
}

/* Reusable control primitives for new and progressively migrated views. */
.sp-button {
  box-sizing:border-box;
  min-width:80px;
  height:var(--sp-control-height);
  padding:0 var(--sp-space-5);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-space-2);
  border:1px solid transparent;
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-font-size-body);
  font-weight:600;
  white-space:nowrap;
}

.sp-button-primary {
  color:#fff;
  border-color:var(--sp-primary);
  background:var(--sp-gradient-primary);
  box-shadow:var(--sp-shadow-primary);
}

.sp-button-primary:hover:not(:disabled) { background:var(--sp-gradient-primary-hover); }
.sp-button:focus-visible {
  outline:0;
  box-shadow:var(--sp-focus-ring);
}
.sp-button:active:not(:disabled) { transform:translateY(1px); }
.sp-button:disabled { cursor:not-allowed; opacity:.5; }

.sp-button-secondary {
  color:var(--sp-muted);
  border-color:var(--sp-border);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-control);
}
.sp-button-secondary:hover:not(:disabled) {
  color:var(--sp-primary-dark);
  border-color:var(--sp-primary-border);
}

.sp-button-danger {
  color:#fff;
  border-color:var(--sp-danger);
  background:var(--sp-gradient-danger);
  box-shadow:0 2px 6px rgba(239,68,68,.22);
}
.sp-button-danger:hover:not(:disabled) {
  background:linear-gradient(180deg,#ef6262 0%,#e63d3d 60%,#c81e1e 100%);
}

.sp-control {
  box-sizing:border-box;
  height:var(--sp-control-height);
  padding:0 var(--sp-space-5);
  color:var(--sp-text);
  border:1.5px solid var(--sp-border);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-control);
  font-size:var(--sp-font-size-body);
}

.sp-control::placeholder { color:var(--sp-placeholder); }
.sp-control:hover:not(:disabled) { border-color:var(--sp-primary-border); }
.sp-control:disabled { color:var(--sp-placeholder); background:#f8fafc; cursor:not-allowed; }
.sp-control[aria-invalid="true"] { border-color:var(--sp-danger); }

.sp-control:focus {
  outline:0;
  border-color:var(--sp-primary);
  box-shadow:var(--sp-focus-ring);
}

.sp-card {
  border:1px solid var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-card);
}

.sp-table { width:100%; border-collapse:collapse; }
.sp-table th { height:var(--sp-table-head-height); color:var(--sp-placeholder); background:#f7f9fd; font-size:var(--sp-font-size-caption); font-weight:600; }
.sp-table td { min-height:var(--sp-table-row-height); color:var(--sp-text); border-top:1px solid #f1f6fd; font-size:var(--sp-font-size-body); }
.sp-table :is(th,td) { padding-inline:var(--sp-space-5); }
.sp-data-mono { font-family:var(--sp-font-mono); font-variant-numeric:tabular-nums; }

.sp-page-button {
  box-sizing:border-box;
  width:30px;
  height:30px;
  padding:0;
  color:var(--sp-muted);
  border:1px solid var(--sp-border);
  border-radius:50%;
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-control);
}

.sp-page-button:hover:not(:disabled) {
  color:var(--sp-primary-dark);
  border-color:var(--sp-primary-border);
}

.sp-page-button:focus-visible {
  outline:0;
  border-color:var(--sp-primary);
  box-shadow:var(--sp-focus-ring);
}

.sp-page-button.active,
.sp-page-button[aria-current="page"] {
  color:#fff;
  border-color:var(--sp-primary);
  background:var(--sp-gradient-primary);
  box-shadow:var(--sp-shadow-primary);
}

.sp-page-button:disabled { cursor:not-allowed; opacity:.45; }

.sp-status {
  min-height:24px;
  padding:0 var(--sp-space-3);
  display:inline-flex;
  align-items:center;
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-font-size-caption);
  font-weight:600;
}
.sp-status-success { color:#047857; background:#ecfdf5; }
.sp-status-warning { color:#b45309; background:#fffbeb; }
.sp-status-danger { color:#b91c1c; background:#fef2f2; }
.sp-status-info { color:var(--sp-primary-dark); background:var(--sp-primary-soft); }

.sp-toast {
  min-height:34px;
  padding:var(--sp-space-3) var(--sp-space-5);
  color:#fff;
  border-radius:var(--sp-radius-pill);
  background:var(--sp-title);
  box-shadow:var(--sp-shadow-floating);
  font-size:var(--sp-font-size-body);
  line-height:var(--sp-line-height-body);
}

body:not(.auth-mode) :where(.survey-modal-dialog) {
  border-radius:var(--sp-radius-card);
  box-shadow:var(--sp-shadow-floating);
}

body:not(.auth-mode) :where(.empty-state) {
  color:var(--sp-placeholder);
  font-size:var(--sp-font-size-body);
  line-height:var(--sp-line-height-body);
}

body:not(.auth-mode) :where(.rate-status-badge,.sap-state-tag,.profile-role-badge) {
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-font-size-caption);
  font-weight:600;
}

body:not(.auth-mode) :where(.sp-card) > :is(h2,h3),
body:not(.auth-mode) :where(.sp-card) > header :is(h2,h3) {
  color:var(--sp-title);
}

/* Phase 2: product library and user management now share the component baseline. */
body:not(.auth-mode) #appPanel[data-view="product"] :is(.cart-panel,.filters,.result-meta,.result-wrap,.pagination).sp-card,
body:not(.auth-mode) #adminPanel :is(.user-summary,.user-management-filters,.user-table-shell).sp-card {
  border-color:var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-card);
}

body:not(.auth-mode) #appPanel[data-view="product"] .sp-table th,
body:not(.auth-mode) #adminPanel .sp-table th {
  color:var(--sp-placeholder);
  background:#f7f9fd;
  font-size:var(--sp-font-size-caption);
  font-weight:600;
}

body:not(.auth-mode) #appPanel[data-view="product"] .sp-table td,
body:not(.auth-mode) #adminPanel .sp-table td {
  color:var(--sp-text);
  border-color:#f1f6fd;
  font-size:var(--sp-font-size-body);
}

body:not(.auth-mode) #appPanel[data-view="product"] .sp-table :is(
  [data-column="productModel"],
  [data-column="price1To49"],
  [data-column="price50To199"],
  [data-column="price200Plus"],
  [data-column="untaxedCostPrice"],
  [data-column="inventoryQuantity"],
  [data-column="sapCode"]
) {
  font-family:var(--sp-font-mono);
  font-variant-numeric:tabular-nums;
}

/* Phase 3: system settings share cards, controls and data-table states. */
body:not(.auth-mode) .sp-settings-view {
  --settings-gap:var(--sp-space-6);
  color:var(--sp-text);
}

body:not(.auth-mode) .sp-settings-view .sp-card {
  border-color:var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-card);
}

body:not(.auth-mode) .sp-settings-view .sp-table th {
  color:var(--sp-placeholder);
  background:#f7f9fd;
  font-size:var(--sp-font-size-caption);
  font-weight:600;
}

body:not(.auth-mode) .sp-settings-view .sp-table td {
  color:var(--sp-text);
  border-color:#f1f6fd;
  font-size:var(--sp-font-size-body);
}

body:not(.auth-mode) .sp-settings-view :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus-visible {
  outline:0;
  border-color:var(--sp-primary);
  box-shadow:var(--sp-focus-ring);
}

body:not(.auth-mode) .sp-settings-view .sp-button img,
body:not(.auth-mode) .sp-settings-view .sp-button svg {
  width:15px;
  height:15px;
  flex:0 0 15px;
  object-fit:contain;
}

/* Phase 4: customer survey views share one visual foundation. */
body:not(.auth-mode) .sp-survey-view {
  color:var(--sp-text);
}

body:not(.auth-mode) .sp-survey-view :is(
  .figma-survey-card,
  .survey-stat-card,
  .survey-filter-card,
  .survey-table-card,
  .survey-analytics-filters,
  .survey-analytics-card,
  .survey-voc-card,
  .survey-analytics-conclusion
) {
  border-color:var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background-color:var(--sp-surface);
  box-shadow:var(--sp-shadow-card);
}

body:not(.auth-mode) .sp-survey-view .sp-table th {
  color:var(--sp-placeholder);
  background:#f7f9fd;
  font-size:var(--sp-font-size-caption);
  font-weight:600;
}

body:not(.auth-mode) .sp-survey-view .sp-table td {
  color:var(--sp-text);
  border-color:#f1f6fd;
  font-size:var(--sp-font-size-body);
}

body:not(.auth-mode) #surveyRecordsPanel .survey-pagination-controls .sp-page-button {
  width:24px;
  min-width:24px;
  height:24px;
  min-height:24px;
  padding:0;
}

body:not(.auth-mode) .sp-survey-view :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible {
  outline:0;
  border-color:var(--sp-primary);
  box-shadow:var(--sp-focus-ring);
}

body:not(.auth-mode) .sp-survey-view .sp-button img,
body:not(.auth-mode) .sp-survey-view .sp-button svg {
  width:15px;
  height:15px;
  flex:0 0 15px;
  object-fit:contain;
}

body:not(.auth-mode) .sp-survey-view :is(.survey-analytics-grid,.survey-feedback-alert-grid) {
  gap:var(--sp-space-6);
}

body:not(.auth-mode) #surveyRecordDetailModal .survey-record-detail-dialog,
body:not(.auth-mode) #surveyPreviewModal .figma-preview-dialog {
  border:1px solid var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-floating);
}

body:not(.auth-mode) #surveyRecordDetailModal .survey-record-detail-content > *,
body:not(.auth-mode) #surveyRecordDetailModal .survey-detail-section {
  border-color:var(--sp-divider);
}

/* Phase 5: profile, customer and quotation views use the same primitives. */
body:not(.auth-mode) :is(.sp-profile-view,.sp-business-view) {
  color:var(--sp-text);
}

body:not(.auth-mode) :is(.sp-profile-view,.sp-business-view) .sp-card {
  border-color:var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-card);
}

body:not(.auth-mode) .sp-business-view .sp-table th {
  color:var(--sp-placeholder);
  background:#f7f9fd;
  font-size:var(--sp-font-size-caption);
  font-weight:600;
}

body:not(.auth-mode) .sp-business-view .sp-table td {
  color:var(--sp-text);
  border-color:#f1f6fd;
  font-size:var(--sp-font-size-body);
}

body:not(.auth-mode) :is(.sp-profile-view,.sp-business-view) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus-visible {
  outline:0;
  border-color:var(--sp-primary);
  box-shadow:var(--sp-focus-ring);
}

body:not(.auth-mode) .sp-profile-view :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  min-height:var(--sp-control-height);
}

body:not(.auth-mode) .sp-business-view.quote-builder-panel,
body:not(.auth-mode) .sp-business-view .quote-action-grid {
  gap:var(--sp-space-6);
}

body:not(.auth-mode) #customerEditorModal .survey-modal-dialog {
  border:1px solid var(--sp-divider);
  border-radius:var(--sp-radius-card);
  background:var(--sp-surface);
  box-shadow:var(--sp-shadow-floating);
}

/* Existing semantic classes inherit the unified baseline without page-level !important patches. */
body:not(.auth-mode) :where(.secondary-button) {
  border-color:var(--sp-border);
  border-radius:var(--sp-radius-pill);
  box-shadow:var(--sp-shadow-control);
}

body:not(.auth-mode) :where(.danger-button) {
  border-color:var(--sp-danger);
  border-radius:var(--sp-radius-pill);
  background:var(--sp-gradient-danger);
}

/* Keep nested navigation highlights flush with the parent menu's right edge. */
@media (min-width:700px) {
  body:not(.auth-mode) .dual-sidebar .sidebar-subnav-button.dual-panel-visible:not([hidden]) {
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
    margin-left:0!important;
  }

  body:not(.auth-mode) .dual-sidebar #customerSurveyNavButton.dual-panel-visible.parent-active:not([hidden]) {
    box-shadow:none!important;
  }

  body:not(.auth-mode) .dual-sidebar .sidebar-thirdnav-button.dual-panel-visible:not([hidden]) {
    width:calc(100% - 10px)!important;
    max-width:calc(100% - 10px)!important;
    margin-right:0!important;
    margin-left:10px!important;
  }
}

body:not(.auth-mode) :where(table) th { font-size:var(--sp-font-size-caption); font-weight:600; }
body:not(.auth-mode) :where(table) td { font-size:var(--sp-font-size-body); }

/* Login language links are intentionally independent from the signed-in dropdown. */
.auth-mode #toolbarActions .language-select { display:none!important; }

.auth-language-links {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#1a1a1a;
}

.auth-language-links button {
  width:auto;
  min-width:0;
  height:auto;
  min-height:0;
  padding:0;
  color:#1a1a1a;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:15px;
  font-weight:400;
  line-height:22px;
}

.auth-language-links button:hover {
  color:#1a1a1a;
  background:transparent;
  box-shadow:none;
  transform:none;
}

.auth-language-links button.active {
  color:var(--sp-primary);
  background:transparent;
  box-shadow:none;
  font-weight:700;
}

.auth-language-links i {
  width:1px;
  height:18px;
  display:block;
  background:#1a1a1a;
}

@media (prefers-reduced-motion:reduce) {
  .sp-button,.sp-control,.sp-page-button,
  .sp-settings-view *,
  .sp-survey-view *,
  .sp-profile-view *,
  .sp-business-view * {
    scroll-behavior:auto;
    transition-duration:.01ms;
    animation-duration:.01ms;
    animation-iteration-count:1;
  }
}