/* Shared product foundations. Every surface resolves from the same theme. */
:root {
  --surface-page:#f6f7fa; --surface-panel:#fff; --surface-raised:#fff; --surface-muted:#edf0f5;
  --surface-editorial:#f5f4f0; --surface-editorial-muted:#eeece7; --surface-accent:#eae7f1;
  --text-primary:#1b2030; --text-secondary:#596476; --text-muted:#646d7f; --border-subtle:#dce0e9;
  --accent:#6954cc; --accent-hover:#5541b3; --accent-soft:#eeeafa; --on-accent:#fff;
  --status-success:#286344; --status-warning:#815319; --status-danger:#ac3544;
  --status-success-bg:#e7f3ec; --status-warning-bg:#fbf0db; --status-danger-bg:#fbe9ec;
  --brand-accent:var(--accent); --brand-ink:var(--text-primary);
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,'Segoe UI',sans-serif;
  --font-display:Manrope,var(--font-ui); --type-display:clamp(40px,5.2vw,76px);
  --type-h1:clamp(26px,2.5vw,34px); --type-h2:24px; --type-h3:20px; --type-h4:17px;
  --type-body-lg:17px; --type-body:15px; --type-body-sm:14px; --type-caption:12px; --type-label:13px;
  --type-button:14px; --type-data:clamp(24px,2.4vw,32px);
  --shadow-panel:0 2px 8px #1b203006; --shadow-overlay:0 20px 72px #10152224;
}
html[data-theme=dark] {
  --surface-page:#101522; --surface-panel:#1d2433; --surface-raised:#252d3e; --surface-muted:#252d3e;
  --surface-editorial:#101522; --surface-editorial-muted:#171e2c; --surface-accent:#24253b;
  --text-primary:#f1f2f7; --text-secondary:#b6bdcd; --text-muted:#aab2c3; --border-subtle:#343f54;
  --accent:#b5a1ff; --accent-hover:#c8b8ff; --accent-soft:#302c4d; --on-accent:#1d1539;
  --status-success:#8ed8ad; --status-warning:#eac582; --status-danger:#ffa4b1;
  --status-success-bg:#203b32; --status-warning-bg:#3d3426; --status-danger-bg:#412c39;
  --shadow-panel:0 2px 8px #00000012; --shadow-overlay:0 20px 72px #0006;
}
html {background:var(--surface-page);color:var(--text-primary);color-scheme:light}
html[data-theme=dark] {color-scheme:dark}
html[data-theme] body {
  --color-bg:var(--surface-page); --color-bg-secondary:var(--surface-panel); --color-bg-tertiary:var(--surface-muted);
  --color-bg-hover:var(--surface-muted); --color-bg-active:var(--accent-soft); --color-text:var(--text-primary);
  --color-text-secondary:var(--text-secondary); --color-text-tertiary:var(--text-muted); --color-border:var(--border-subtle);
  --color-primary:var(--accent); --color-primary-dark:var(--accent-hover); --color-primary-light:var(--accent);
  --color-success:var(--status-success); --color-warning:var(--status-warning); --color-danger:var(--status-danger); --color-error:var(--status-danger);
  --font-sans:var(--font-ui); --shadow-card:var(--shadow-panel); --shadow-dialog:var(--shadow-overlay);
  background:var(--surface-page);color:var(--text-primary);font-family:var(--font-ui);
}
/* The brand is a symbol and a carefully spaced, exact-case wordmark. */
.brand-lockup {display:inline-flex;gap:10px;align-items:center;line-height:1;white-space:nowrap;color:var(--brand-ink)}
.brand-symbol {width:32px;height:32px;flex-shrink:0;color:var(--brand-accent);fill:currentColor;transition:color .16s ease}
.brand-wordmark {font-family:var(--font-display);font-size:23px;font-weight:600;letter-spacing:-.055em}
.brand-home {display:inline-flex;align-items:center;border:0;background:none;text-decoration:none;padding:0;min-height:44px;cursor:pointer}
.brand-home:hover .brand-symbol,.pw-brand:hover .brand-symbol {color:var(--accent-hover)}
.sidebar-brand {display:flex;align-items:center;padding:0 16px 20px;gap:10px;border-bottom:1px solid var(--border-subtle);margin-bottom:16px;color:var(--text-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.sidebar-brand .brand-symbol {width:24px;height:24px}
.theme-control {display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;padding:10px!important;border:1px solid var(--border-subtle)!important;border-radius:10px!important;background:var(--surface-panel)!important;color:var(--text-secondary)!important;flex-shrink:0}
.theme-control svg,#theme-toggle svg {width:20px;height:20px;fill:none;stroke:currentColor}
.theme-setting {display:flex;flex-direction:column;gap:8px;padding:12px 16px;font-size:12px;color:var(--text-secondary)}
.theme-setting select {min-height:40px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface-panel);color:var(--text-primary);padding:6px 8px;font:inherit}
.appearance-note {font-size:12px;color:var(--text-muted);text-align:center;margin-top:20px}
/* Public pages retain their editorial compositions in both appearances. */
html[data-theme] .public-site {
  --pw-bg:var(--surface-editorial); --pw-surface:var(--surface-panel); --pw-elevated:var(--surface-raised);
  --pw-ink:var(--text-primary); --pw-secondary:var(--text-secondary); --pw-muted:var(--text-muted);
  --pw-line:var(--border-subtle); --pw-accent:var(--accent); --pw-hover:var(--accent-hover); --pw-focus:var(--accent);
  --pw-success:var(--status-success); --pw-warning:var(--status-warning); --pw-error:var(--status-danger);
  --pw-shadow:var(--shadow-overlay); color-scheme:inherit;
}
.public-site .pw-brand {letter-spacing:normal}
.public-site .pw-brand .brand-wordmark {font-size:23px}
.public-site .pw-preview-brand .brand-symbol {width:20px;height:20px}
.public-site .pw-header {background:color-mix(in srgb,var(--surface-editorial) 94%,transparent);border-color:var(--border-subtle)}
.public-site .pw-nav {gap:20px}
.public-site .pw-mobile-menu,.public-site .pw-step-icon {background:var(--surface-editorial);border-color:var(--border-subtle)}
.public-site .pw-mobile-menu>a[aria-current],.public-site .pw-guide-choices button[aria-pressed=true] {background:var(--accent-soft);color:var(--accent)}
.public-site :is(.pw-pos-section,.pw-workflow-section,.pw-feature-inventory,.pw-feature-anchor,.pw-project-note) {background:var(--surface-editorial-muted)}
.public-site :is(.pw-reports-section,.pw-about-visual,.pw-guide-section,.pw-account-section) {background:var(--surface-accent)}
.public-site .pw-hero-visual::before {background:var(--surface-accent)}
.public-site :is(.pw-hero h1 span,.pw-page-hero h1 span,.pw-about-hero h1 span) {color:var(--text-muted)}
.public-site .pw-button {background:var(--accent);color:var(--on-accent)!important}
.public-site .pw-button:hover {background:var(--accent-hover)}
.public-site :is(.pw-overview,.pw-shift-section,.pw-cta) {--pw-secondary:#c4c9d5;--pw-muted:#b7bdd0;--pw-accent:#c3b2ff;--pw-focus:#c3b2ff;background:#202634;color:#f1f2f7;--brand-ink:#f1f2f7;--brand-accent:#c3b2ff}
.public-site .pw-cta .pw-button {background:#ece7fa;color:#211b35!important}
.public-site .pw-cta .pw-button:hover {background:#d9cff5}
.public-site .pw-cta-actions small {color:#c4c9d5}
html[data-theme=dark] .pw-standalone {background:var(--surface-page)}
html[data-theme=dark] .public-site .pw-window {--pw-secondary:var(--text-secondary);--pw-muted:var(--text-muted);--pw-line:var(--border-subtle);--pw-accent:var(--accent);background:var(--surface-panel);color:var(--text-primary);border-color:var(--border-subtle);color-scheme:dark}
html[data-theme=dark] .public-site :is(.pw-window-bar,.pw-preview-nav,.pw-chat-preview) {background:var(--surface-panel);border-color:var(--border-subtle);color:var(--text-secondary)}
html[data-theme=dark] .public-site :is(.pw-stat,.pw-preview-chart,.pw-top-product,.pw-product,.pw-preview-search) {background:var(--surface-raised);border-color:var(--border-subtle);color:var(--text-primary)}
html[data-theme=dark] .public-site :is(.pw-preview-nav>span,.pw-stat>span,.pw-stat small,.pw-preview-title>span,.pw-chart-heading span,.pw-top-product small,.pw-sample,.pw-product-table th,.pw-cart-empty,.pw-demo-item small,.pw-cart-summary small,.pw-chat-title small) {color:var(--text-secondary)}
html[data-theme=dark] .public-site :is(.pw-preview-nav .is-active,.pw-chat-answer,.pw-preview-tag,.pw-product button,.pw-quantity button,.pw-chat-title>.pw-icon) {background:var(--accent-soft);border-color:var(--border-subtle);color:var(--accent)!important}
html[data-theme=dark] .public-site .pw-chat-question {background:var(--accent);color:var(--on-accent)}
html[data-theme=dark] .public-site :is(.pw-demo-instruction,.pw-demo-status,.pw-guide-label) {color:var(--text-secondary)!important}
html[data-theme=dark] .public-site :is(.pw-guide-choices button,.pw-chart-data summary) {color:var(--accent);border-color:var(--border-subtle)}
html[data-theme=dark] .public-site .pw-guide-choices button:hover {background:var(--accent-soft)}
html[data-theme=dark] .public-site :is(.pw-product-table td,.pw-cart-header,.pw-demo-cart,.pw-demo-item,.pw-cart-summary,.pw-chart-data,.pw-chat-title,.pw-chart-data td,.pw-chart-data th) {border-color:var(--border-subtle)}
html[data-theme=dark] .public-site .pw-stock {background:var(--status-success-bg);color:var(--status-success)}
html[data-theme=dark] .public-site .pw-stock-low {background:var(--status-warning-bg);color:var(--status-warning)}
html[data-theme=dark] .public-site .pw-workflow-visual {background:var(--surface-raised);border-color:var(--border-subtle)}
html[data-theme=dark] .public-site .pw-workflow-visual>.pw-icon {background:var(--accent-soft);color:var(--accent)}
html[data-theme=dark] .public-site .pw-workflow-visual span {color:var(--text-secondary)}
.public-site .pw-chart {color:var(--text-secondary)}
/* Operational density, shared type scale, and financial alignment. */
.content-area :is(h2,h3,h4),.modal-content :is(h2,h3,h4) {font-weight:550}
.content-area h2 {font-size:var(--type-h1)}
.stat-value {font-size:var(--type-data);font-weight:550}
:is(.stat-value,.cart-totals,.data-table,.timer-value,.shift-stat-value,.detail-value,.receipt-total-row,.pw-stat,.pw-chart-data,.pw-product-table) {font-variant-numeric:tabular-nums lining-nums}
.app-header {background:var(--surface-panel);border-color:var(--border-subtle)}
.app-header .header-left {min-width:0}
.app-header .brand-home {margin:0}
.main-content .sidebar {background:var(--surface-panel);border-color:var(--border-subtle)}
.primary-button,.add-to-cart-btn,.chatbot-send-btn,.chatbot-toggle-btn {background:var(--accent)!important;color:var(--on-accent)!important;box-shadow:none}
.primary-button:hover,.add-to-cart-btn:hover,.chatbot-send-btn:hover {background:var(--accent-hover)!important}
.secondary-button {background:var(--surface-panel);border:1px solid var(--border-subtle);color:var(--text-primary)}
.form-input,.date-input,.date-filter-input,.date-filter,.period-select,.search-input,#analytics-period {background:var(--surface-panel);color:var(--text-primary);border-color:var(--border-subtle)}
.form-input::placeholder,.search-input::placeholder {color:var(--text-muted);opacity:1}
.data-table thead,.data-table th {background:var(--surface-muted);color:var(--text-secondary)}
.data-table td {border-color:var(--border-subtle)}
.data-table tbody tr:hover {background:var(--surface-muted)}
.stat-card,.chart-container,.analytics-card,.cart-panel,.active-shift-card,.shift-card,.table-wrapper,.receipt-card {background:var(--surface-panel);border-color:var(--border-subtle)}
.stock-badge.in-stock,.stock-badge.stock-ok {background:var(--status-success-bg);color:var(--status-success)}
.stock-badge.low-stock,.stock-badge.stock-low {background:var(--status-warning-bg);color:var(--status-warning)}
.stock-badge.out-of-stock,.stock-badge.stock-out {background:var(--status-danger-bg);color:var(--status-danger)}
.workspace-context {display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:12px;color:var(--text-muted)}
.workspace-context .brand-symbol {width:16px;height:16px}
.workspace-context strong {font-weight:500;color:var(--text-secondary)}
.dashboard-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.dashboard-actions button {min-height:44px;padding:10px 14px;font-size:13px}
.catalog-toolbar {display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;padding:20px;border-bottom:1px solid var(--border-subtle)}
.catalog-toolbar .product-search-box {padding:0!important;border:0!important;flex:1 1 220px;min-width:0;margin:0!important}
.catalog-toolbar label {display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary);flex:1 1 140px}
.catalog-toolbar select {min-height:44px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--surface-panel);color:var(--text-primary);font:inherit}
.catalog-result-count {font-size:12px;color:var(--text-muted);padding:12px 20px;margin:0}
.no-shift-alert,.shift-status-panel {background:var(--surface-panel)!important;border:1px solid var(--border-subtle);border-radius:12px;box-shadow:var(--shadow-panel)}
.shift-status-content {gap:16px;flex-wrap:wrap}
.shift-control-btn {min-height:44px}
.shift-control-btn.pause {background:var(--accent-soft);color:var(--accent);border-color:var(--border-subtle)}
.shift-control-btn.stop {background:var(--status-danger-bg);color:var(--status-danger);border-color:var(--border-subtle)}
.modal-content,.modal-header,.modal-form,.modal-body,.chatbot-modal-content {background:var(--surface-panel);color:var(--text-primary);border-color:var(--border-subtle)}
.modal-header {padding:20px 24px}
.modal-header :is(h2,h3) {font-size:22px;font-weight:550}
.modal-close {color:var(--text-secondary);min-width:44px;min-height:44px;flex-shrink:0}
.modal-overlay,.modal-backdrop {background:#080d18a6;backdrop-filter:blur(3px)}
.product-info-section,.report-section,.shift-detail-section,.product-stat-card,.cash-summary,.end-shift-summary {background:var(--surface-muted);border-color:var(--border-subtle)}
.user-dropdown {background:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-overlay)}
.dropdown-item {color:var(--text-primary)}
.dropdown-item:hover {background:var(--surface-muted)}
.dropdown-item.danger {color:var(--status-danger)}
.loading-overlay {background:color-mix(in srgb,var(--surface-page) 94%,transparent);color:var(--text-primary)}
.toast {background:var(--surface-raised);color:var(--text-primary);border-color:var(--border-subtle);box-shadow:var(--shadow-overlay)}
.toast.error {border-left:3px solid var(--status-danger)}
.toast.success {border-left:3px solid var(--status-success)}
.empty-state {color:var(--text-secondary)}
.empty-icon {color:var(--text-muted);opacity:1}
#auth-container .auth-card,.verification-card {background:var(--surface-panel);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-overlay);backdrop-filter:none}
.auth-logo-mark {display:none}
#auth-container .app-logo {background:none;-webkit-text-fill-color:currentColor;display:flex;justify-content:center;margin-top:12px}
#auth-container .app-logo .brand-wordmark {font-size:30px}
#auth-container .app-logo .brand-symbol {width:40px;height:40px}
.auth-subtitle {text-transform:none;letter-spacing:0;color:var(--text-secondary);font-size:14px}
.verification-container {background:var(--surface-page);align-items:flex-start;overflow-y:auto;padding:32px 16px}
.verification-container .verification-card {flex-shrink:0;margin-block:auto}
.verification-header h2 {background:none;-webkit-text-fill-color:currentColor;color:var(--text-primary);font-family:var(--font-display);font-size:26px;letter-spacing:-.04em}
.verification-icon {display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;margin-inline:auto;color:var(--brand-accent);background:var(--accent-soft);animation:none}
.verification-timer {background:var(--surface-muted);border-color:var(--border-subtle)}
.timer-display {font:600 24px var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:0}
.verification-icon .brand-symbol {width:48px;height:48px}
.pin-input-group {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pin-input {width:100%;min-width:0;background:var(--surface-muted);border-color:var(--border-subtle);color:var(--text-primary)}
.password-requirements,.password-strength-container {background:var(--surface-muted);border-color:var(--border-subtle)}
.phone-input-group,.phone-prefix {background:var(--surface-muted);border-color:var(--border-subtle);color:var(--text-secondary)}
.chatbot-header {background:var(--surface-panel);color:var(--text-primary);border-bottom:1px solid var(--border-subtle)}
.chatbot-header h3 {color:var(--text-primary)}
.chatbot-header p {color:var(--text-secondary)}
.assistant-brand {display:flex;align-items:center;gap:10px}
.assistant-brand .brand-symbol {width:28px;height:28px}
.chatbot-messages {background:var(--surface-page)}
.message-assistant .message-content {background:var(--surface-panel);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:none}
.message-user .message-content {background:var(--accent);color:var(--on-accent);border:0;box-shadow:none}
.chatbot-input-area,.chat-suggestions {background:var(--surface-panel);border-color:var(--border-subtle)}
.chatbot-input {background:var(--surface-muted);color:var(--text-primary);border:1px solid var(--border-subtle)}
.chatbot-request-error {padding:12px 16px;background:var(--status-danger-bg);color:var(--status-danger);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.chatbot-request-error button {color:inherit;border:1px solid currentColor;border-radius:6px;min-height:44px;padding:8px 12px;background:transparent;font:inherit;flex-shrink:0;cursor:pointer}
.receipt-print-note {color:var(--text-secondary);font-size:12px;padding:0 24px 16px}
.receipt-content .brand-lockup {--brand-ink:#111;--brand-accent:#111;justify-content:center}
.receipt-content .brand-symbol {width:26px;height:26px}
.receipt-content .brand-wordmark {font-size:20px}
@media(max-width:1200px){.main-content{grid-template-columns:minmax(0,1fr)}.sidebar-brand{padding-top:8px}.workspace-context{margin-bottom:16px}}
.sidebar-scrim{position:fixed;inset:70px 0 0;background:#080d1870;z-index:39;border:0}
.sidebar-scrim[hidden]{display:none}
button.transaction-item{width:100%;font:inherit;text-align:left;color:var(--text-primary)}
.shift-status-indicator.active{background:var(--status-success-bg);color:var(--status-success);border:0}
.shift-timer-display{display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-width:0}
.shift-timer-display .timer-label{background:none;padding:0;text-transform:none;font-size:12px;color:var(--text-secondary)}
.shift-timer-display .timer-value{font-size:18px;color:var(--text-primary);background:none;padding:0;white-space:nowrap}
.shift-status-controls{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:768px){
  .shift-status-content{display:grid!important;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center;gap:24px}
  .shift-status-indicator{width:auto}.shift-timer-display{justify-content:flex-end;background:none!important;padding:0!important}
  .shift-status-controls{width:auto;flex-direction:row}.shift-status-controls button{flex:0 0 auto;min-width:110px}
}
.auth-appearance{position:absolute;right:16px;top:16px;z-index:3}
#auth-container .auth-header{padding-top:40px}
.verification-card{position:relative}.verification-card>.verification-header{padding-top:28px}
@media(max-width:600px){
  .public-site .pw-nav{gap:8px}.public-site .pw-brand .brand-wordmark{font-size:20px}.public-site .pw-brand .brand-symbol{width:28px;height:28px}
  .public-site .pw-menu-toggle{margin-left:0}.public-site .pw-theme{margin-left:auto}
  .app-header .brand-wordmark{font-size:20px}.app-header .brand-symbol{width:28px;height:28px}
  .sidebar-brand{display:none}.workspace-context{font-size:11px}.catalog-toolbar{padding:16px;gap:12px}
  .catalog-toolbar .product-search-box{flex-basis:100%}.catalog-toolbar label{flex-basis:calc(50% - 6px)}
  .catalog-result-count{padding-inline:16px}.modal-header{padding:16px}.modal-header :is(h2,h3){font-size:20px}
  .dashboard-actions{gap:8px}.dashboard-actions button{flex:1 1 auto;font-size:12px}
  .verification-card{padding:24px 16px;max-width:calc(100% - 24px)}.pin-input{font-size:20px;height:44px}
  .chatbot-request-error{font-size:12px;gap:8px}.receipt-print-note{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){.brand-symbol{transition:none}.public-site *,#main-app *, .modal *{animation:none!important;transition:none!important}}
@media print {
  :root,html[data-theme=dark]{--text-primary:#000;--surface-panel:#fff;--brand-accent:#000;--brand-ink:#000}
  .theme-control,.workspace-context,.receipt-print-note,.brand-home,.loading-overlay,.chatbot-request-error{display:none!important}
  #receipt-modal .brand-lockup,#receipt-modal .brand-symbol,#receipt-modal .brand-wordmark{color:#000!important;fill:currentColor!important;visibility:visible!important}
  #receipt-modal .brand-lockup{display:inline-flex!important}#receipt-modal .brand-symbol{display:block!important}
  #receipt-content{background:white!important;color:black!important}#receipt-content *{color:black!important}
}