:root {
  --crm-shadow-sm: 0 1px 2px color-mix(in oklab, var(--ink) 6%, transparent);
  --crm-shadow-md: 0 8px 24px color-mix(in oklab, var(--ink) 9%, transparent);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.google-mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--card); color: var(--primary); font: 700 .75rem var(--font-display); }
.auth-mobile-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 2.25rem; color: var(--ink); font: 600 1rem var(--font-display); }
.auth-mobile-logo__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--primary); color: var(--primary-foreground); }
.auth-mobile-logo__icon svg { width: 1.25rem; height: 1.25rem; }
.auth-hero__logo { position: relative; display: flex; align-items: center; gap: .75rem; }
.auth-hero__logo-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: var(--primary); }
.auth-hero__logo-icon svg { width: 1.5rem; height: 1.5rem; }
.auth-hero__logo-text { font: 600 1.125rem var(--font-display); }.auth-hero__logo-subtext { color: color-mix(in oklab, var(--primary-foreground) 60%, transparent); font-size: .75rem; }
.auth-hero__content { position: relative; max-width: 32rem; }.auth-hero__tagline { margin-bottom: 1.25rem; color: color-mix(in oklab, var(--primary-foreground) 55%, transparent); font-size: .875rem; font-weight: 600; text-transform: uppercase; }.auth-hero__title { margin: 0; font: 600 2.25rem/1.25 var(--font-display); }.auth-hero__description { max-width: 28rem; margin-top: 1.5rem; color: color-mix(in oklab, var(--primary-foreground) 65%, transparent); line-height: 1.75; }.auth-hero__footer { position: relative; color: color-mix(in oklab, var(--primary-foreground) 45%, transparent); font-size: .75rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; }.auth-divider__line { height: 1px; flex: 1; background: var(--border); }.auth-divider__text { color: var(--mist); font-size: .75rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }.auth-form__field { display: flex; flex-direction: column; gap: .5rem; }.auth-form__label-row { display: flex; align-items: center; justify-content: space-between; }.auth-form__input-wrapper { position: relative; }.auth-form__input-icon { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; color: var(--mist); pointer-events: none; transform: translateY(-50%); }.auth-form__input { height: 2.75rem; background: var(--card); }.auth-form__input--with-icon { padding-left: 2.5rem; }.auth-form__input--password { padding-inline: 2.5rem; }.auth-form__password-toggle { position: absolute; top: 50%; right: .75rem; display: grid; padding: 0; border: 0; background: transparent; color: var(--mist); transform: translateY(-50%); }.auth-form__password-toggle svg, .auth-form__submit svg { width: 1rem; height: 1rem; }.auth-form__submit { width: 100%; height: 2.75rem; }.auth-form__footer { margin-top: 1.75rem; color: var(--inksoft); font-size: .875rem; text-align: center; }.auth-link { border: 0; background: transparent; color: var(--primary); font-size: .75rem; font-weight: 600; }.auth-link:hover { text-decoration: underline; }
.reset-container { width: 100%; max-width: 430px; padding: 1.5rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); box-shadow: var(--crm-shadow-sm); }
.crm-app { min-height: 100vh; width: 100%; background: var(--background); color: var(--ink); }
.crm-layout { display: flex; min-height: 100vh; }
.crm-sidebar { position: sticky; top: 0; width: 4rem; height: 100vh; flex: none; border-right: 1px solid var(--border); background: var(--card); }
.crm-sidebar-inner { display: flex; height: 100%; flex-direction: column; padding: 1rem .5rem; }
.crm-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.crm-brand-mark, .crm-account-icon { display: grid; place-items: center; border-radius: .5rem; }
.crm-brand-mark { width: 2.5rem; height: 2.5rem; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--crm-shadow-sm); }
.crm-brand-mark svg { width: 1.25rem; height: 1.25rem; }
.crm-brand-copy, .crm-nav-link span, .crm-signout span { display: none; }
.crm-brand-name { font: 600 .9375rem/1 var(--font-display); }
.crm-brand-caption { margin-top: .25rem; color: var(--mist); font-size: .6875rem; }
.crm-nav { display: flex; flex-direction: column; gap: .375rem; margin-top: 1.75rem; }
.crm-nav-link { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .625rem .75rem; border-radius: .5rem; color: var(--inksoft); font-size: .8125rem; font-weight: 500; transition: color .18s, background .18s; }
.crm-nav-link:hover { color: var(--ink); background: var(--muted); }
.crm-nav-link-active { color: var(--primary); background: var(--accent); font-weight: 600; }
.crm-nav-link svg, .crm-signout svg { width: 1.125rem; height: 1.125rem; flex: none; }
.crm-account { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.crm-account-info { display: none; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.crm-account-icon { width: 2.25rem; height: 2.25rem; color: var(--inksoft); background: var(--muted); }
.crm-account-icon svg { width: 1rem; height: 1rem; }
.crm-account-copy { min-width: 0; font-size: .8125rem; font-weight: 600; }
.crm-account-copy small { display: block; color: var(--mist); font-size: .6875rem; font-weight: 400; }
.crm-signout { width: 100%; height: 2.5rem; justify-content: center; padding: 0; color: var(--inksoft); }
.crm-signout:hover { color: var(--rose); }
.crm-main { min-width: 0; flex: 1; overflow: hidden; }
.crm-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .75rem; min-height: 4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: var(--card); }
.crm-header-copy { min-width: 0; }
.crm-header-copy h1 { overflow: hidden; margin: 0; color: var(--ink); font: 600 1.125rem/1.4 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.crm-header-copy div { overflow: hidden; color: var(--mist); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.crm-header-actions { display: flex; align-items: center; gap: .5rem; }
.crm-sync { display: none; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--muted); color: var(--inksoft); font-size: .75rem; font-weight: 500; }
.crm-sync svg { width: 1rem; height: 1rem; color: var(--mint); }
.crm-content { padding: 1.25rem 1rem; }
.page-error { padding: 2rem; color: var(--rose); }
.section-heading { margin-bottom: 1.25rem; }
.section-heading h2, .table-heading h2 { margin: 0; color: var(--ink); font: 600 1.5rem/1.3 var(--font-display); }
.section-heading p, .table-heading p { margin: .25rem 0 0; color: var(--mist); font-size: .875rem; }
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.kpi-card { padding: 1.25rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); box-shadow: var(--crm-shadow-sm); transition: box-shadow .2s; }
.kpi-card:hover { box-shadow: var(--crm-shadow-md); }
.kpi-card-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kpi-label { color: var(--inksoft); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.kpi-value { margin-top: .5rem; color: var(--ink); font: 600 2.25rem/1 var(--font-display); }
.kpi-note { margin-top: .75rem; color: var(--mist); font-size: .75rem; font-weight: 500; }
.kpi-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: .5rem; }
.kpi-icon svg { width: 1.25rem; height: 1.25rem; }
.kpi-icon-primary { color: var(--primary); background: var(--accent); }
.kpi-icon-success { color: var(--mint); background: color-mix(in oklab, var(--mint) 10%, transparent); }
.kpi-icon-danger { color: var(--rose); background: color-mix(in oklab, var(--rose) 10%, transparent); }
.table-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.table-heading h2 { font-size: 1.25rem; }.table-heading p { font-size: .75rem; }
.table-heading > span { display: none; color: var(--inksoft); font-size: .75rem; font-weight: 500; }
.data-panel { overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); box-shadow: var(--crm-shadow-sm); }
.table-scroll { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; color: var(--ink); font-size: .8125rem; text-align: left; }
.products-table { min-width: 860px; }.orders-table { min-width: 1380px; }
.data-table thead { position: sticky; top: 0; z-index: 10; background: var(--muted); }
.data-table th { padding: .625rem 1rem; color: var(--inksoft); font-size: .6875rem; font-weight: 500; text-transform: uppercase; }
.data-table td { padding: .75rem 1rem; }
.data-table tbody tr { border-top: 1px solid var(--border); transition: background .18s; }
.data-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }
.align-right { text-align: right; }.numeric { font-variant-numeric: tabular-nums; }.cell-strong { color: var(--ink); font-weight: 500; }.cell-muted { color: var(--inksoft); }
.product-image { width: 2.25rem; height: 2.25rem; border-radius: .5rem; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--ink) 5%, transparent); outline-offset: -1px; }
.product-placeholder { display: grid; place-items: center; background: var(--frost); }.product-placeholder span { color: var(--mist); font-size: .5rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.status-toggle, .status-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border: 0; border-radius: 999px; font-size: .6875rem; font-weight: 500; }
.status-toggle-active, .badge-success { color: var(--mint); background: color-mix(in oklab, var(--mint) 15%, transparent); }
.status-toggle-inactive, .badge-neutral { color: var(--inksoft); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.status-dot { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.badge-warning { color: var(--amber); background: color-mix(in oklab, var(--amber) 15%, transparent); }.badge-danger { color: var(--rose); background: color-mix(in oklab, var(--rose) 15%, transparent); }
.order-filters { display: grid; gap: .5rem; margin-bottom: 1rem; }.search-field { position: relative; min-width: 0; }
.search-field svg { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; color: var(--mist); pointer-events: none; transform: translateY(-50%); }
.crm-input, .crm-select { width: 100%; padding: .625rem .75rem; border: 1px solid var(--input); border-radius: .5rem; outline: 0; background: var(--card); color: var(--ink); font-size: .75rem; }
.search-input { padding-left: 2.5rem; }.crm-input::placeholder { color: var(--mist); }.crm-input:focus, .crm-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 10%, transparent); }.crm-select { color: var(--inksoft); }
.order-actions { display: flex; gap: .375rem; }.order-action { padding: .25rem .625rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--inksoft); font-size: .6875rem; font-weight: 500; transition: background .18s; }.order-action:hover { background: var(--muted); }.order-action-active { border-color: transparent; color: var(--frost); font-weight: 600; }.action-primary { background: var(--brand); }.action-success { background: var(--mint); }.action-danger { background: var(--rose); }.empty-table { padding: 2rem 1rem !important; color: var(--mist); text-align: center; }

.auth-page { display: grid; min-height: 100vh; background: var(--background); }.auth-showcase { position: relative; display: none; overflow: hidden; padding: 2.5rem; background: var(--ink); color: var(--primary-foreground); }.auth-grid { position: absolute; inset: 0; opacity: .4; }.auth-showcase > *:not(.auth-grid) { position: relative; }
.auth-brand { display: flex; align-items: center; gap: .75rem; }.auth-brand-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: var(--primary); color: var(--primary-foreground); }.auth-brand-mark svg { width: 1.5rem; height: 1.5rem; }.auth-brand-name { font: 600 1.125rem/1.4 var(--font-display); }.auth-brand-caption { color: color-mix(in oklab, var(--primary-foreground) 60%, transparent); font-size: .75rem; }
.auth-pitch { max-width: 32rem; }.auth-eyebrow { margin: 0 0 1.25rem; color: color-mix(in oklab, var(--primary-foreground) 55%, transparent); font-size: .875rem; font-weight: 600; text-transform: uppercase; }.auth-pitch h1 { margin: 0; font: 600 2.25rem/1.25 var(--font-display); }.auth-pitch > p:last-child { max-width: 28rem; margin: 1.5rem 0 0; color: color-mix(in oklab, var(--primary-foreground) 65%, transparent); line-height: 1.75; }.auth-footnote { color: color-mix(in oklab, var(--primary-foreground) 45%, transparent); font-size: .75rem; }
.auth-form-section { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }.auth-form-wrap { width: 100%; max-width: 430px; }.auth-mobile-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 2.25rem; }.auth-heading { margin-bottom: 2rem; }.auth-heading h1 { margin: 0; color: var(--ink); font: 600 1.875rem/1.3 var(--font-display); }.auth-heading p { margin: .5rem 0 0; color: var(--inksoft); font-size: .875rem; line-height: 1.5rem; }
.auth-google { width: 100%; height: 2.75rem; background: var(--card); }.google-mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--card); color: var(--primary); font: 700 .75rem var(--font-display); }.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; }.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }.auth-divider span { color: var(--mist); font-size: .75rem; }
.auth-form, .reset-form { display: flex; flex-direction: column; gap: 1.25rem; }.auth-field { display: flex; flex-direction: column; gap: .5rem; }.auth-label-row { display: flex; align-items: center; justify-content: space-between; }.auth-control { position: relative; }.auth-control > svg { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; color: var(--mist); pointer-events: none; transform: translateY(-50%); }.auth-control input { height: 2.75rem; padding-left: 2.5rem; background: var(--card); }.auth-control-password input { padding-right: 2.5rem; }
.text-button, .password-toggle { border: 0; background: transparent; color: var(--primary); font-weight: 600; }.text-button { font-size: .75rem; }.text-button:hover { text-decoration: underline; }.password-toggle { position: absolute; top: 50%; right: .75rem; display: grid; padding: 0; color: var(--mist); transform: translateY(-50%); }.password-toggle:hover { color: var(--ink); }.password-toggle svg { width: 1rem; height: 1rem; }.auth-message { padding: .625rem .75rem; border-radius: .5rem; font-size: .75rem; line-height: 1.25rem; }.auth-message-error { color: var(--rose); background: color-mix(in oklab, var(--rose) 10%, transparent); }.auth-message-success { color: var(--mint); background: color-mix(in oklab, var(--mint) 10%, transparent); }.auth-submit { width: 100%; height: 2.75rem; }.auth-submit svg { width: 1rem; height: 1rem; }.auth-switch { margin: 1.75rem 0 0; color: var(--inksoft); font-size: .875rem; text-align: center; }
.reset-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; background: var(--background); }.reset-card { width: 100%; max-width: 430px; padding: 1.5rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); box-shadow: var(--crm-shadow-sm); }.reset-card h1 { margin: 0; color: var(--ink); font: 600 1.5rem/1.3 var(--font-display); }.reset-card > p { margin: .5rem 0 0; color: var(--inksoft); font-size: .875rem; }.reset-form { margin-top: 1.75rem; }
.not-found-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; background: var(--background); }.not-found-content { max-width: 28rem; text-align: center; }.not-found-content h1 { margin: 0; color: var(--foreground); font-size: 4.5rem; font-weight: 700; }.not-found-content h2 { margin: 1rem 0 0; font-size: 1.25rem; }.not-found-content p { margin: .5rem 0 0; color: var(--muted-foreground); font-size: .875rem; }.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }.plain-primary-link, .plain-secondary-link { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; }.plain-primary-link { border: 0; background: var(--primary); color: var(--primary-foreground); }.plain-secondary-link { border: 1px solid var(--input); background: var(--background); color: var(--foreground); }
@media (min-width: 640px) { .crm-header { padding-inline: 1.5rem; }.crm-content { padding-inline: 1.5rem; }.crm-sync { display: flex; }.kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.table-heading > span { display: block; }.order-filters { grid-template-columns: minmax(0,1fr) 190px; }.auth-form-section { padding-inline: 2.5rem; }.reset-card, .reset-container { padding: 2rem; } }
@media (min-width: 1024px) { .crm-sidebar { width: 16rem; }.crm-sidebar-inner { padding: 1.5rem 1.25rem; }.crm-brand { justify-content: flex-start; }.crm-brand-copy, .crm-nav-link span, .crm-signout span { display: block; }.crm-nav { margin-top: 2.25rem; }.crm-nav-link { justify-content: flex-start; }.crm-account-info { display: flex; }.crm-signout { justify-content: flex-start; padding-inline: .75rem; }.crm-header { padding-inline: 2rem; }.crm-header-copy h1 { font-size: 1.25rem; }.crm-content { padding: 1.75rem 2rem; }.auth-page { grid-template-columns: minmax(360px,.9fr) minmax(520px,1.1fr); }.auth-showcase { display: flex; flex-direction: column; justify-content: space-between; }.auth-mobile-brand, .auth-mobile-logo { display: none; } }
@media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.auth-showcase { padding: 3.5rem; }.auth-pitch h1 { font-size: 3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Authentication and status pages */
.auth-hero { position: relative; display: none; overflow: hidden; padding: 2.5rem; background: var(--ink); color: var(--primary-foreground); }
.auth-hero__grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(color-mix(in oklab, var(--primary-foreground) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--primary-foreground) 8%, transparent) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom right, black, transparent 80%); }
.auth-main { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-container { width: 100%; max-width: 430px; }
.auth-form-header { margin-bottom: 2rem; }
.auth-form-header__title { margin: 0; color: var(--ink); font: 600 1.875rem/1.3 var(--font-display); }
.auth-form-header__subtitle { margin: .5rem 0 0; color: var(--inksoft); font-size: .875rem; line-height: 1.5rem; }
.auth-social-btn { width: 100%; height: 2.75rem; background: var(--card); }
.auth-form__message { padding: .625rem .75rem; border-radius: .5rem; font-size: .75rem; line-height: 1.25rem; }
.auth-form__message--error { color: var(--rose); background: color-mix(in oklab, var(--rose) 10%, transparent); }
.auth-form__message--success { color: var(--mint); background: color-mix(in oklab, var(--mint) 10%, transparent); }
.reset-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; background: var(--background); }
.status-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; background: var(--background); }
.status-page__content { max-width: 28rem; text-align: center; }
.status-page__title { margin: 0; color: var(--foreground); font-size: 4.5rem; font-weight: 700; }
.status-page__heading { margin: 1rem 0 0; color: var(--foreground); font-size: 1.25rem; font-weight: 600; }
.status-page__description { margin: .5rem 0 0; color: var(--muted-foreground); font-size: .875rem; }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.status-page__btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; }
.status-page__btn--primary { border: 0; background: var(--primary); color: var(--primary-foreground); }
.status-page__btn--outline { border: 1px solid var(--input); background: var(--background); color: var(--foreground); }
@media (min-width: 640px) { .auth-main { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .auth-hero { display: flex; flex-direction: column; justify-content: space-between; } }
@media (min-width: 1280px) { .auth-hero { padding: 3.5rem; }.auth-hero__title { font-size: 3rem; } }

/* Minimal login */
.login-minimal { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem; background: var(--background); }
.login-minimal__card { width: 100%; max-width: 360px; padding: 2rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); box-shadow: var(--crm-shadow-md); }
.login-minimal__brand { display: flex; justify-content: center; margin-bottom: 2rem; }
.login-minimal__mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .625rem; background: var(--primary); color: var(--primary-foreground); }
.login-minimal__mark svg { width: 1.5rem; height: 1.5rem; }
.login-minimal__form { display: flex; flex-direction: column; gap: 1rem; }
.login-minimal__field { display: flex; flex-direction: column; gap: .5rem; }
.login-minimal__control { position: relative; }
.login-minimal__icon { position: absolute; top: 50%; left: .875rem; width: 1.125rem; height: 1.125rem; color: var(--mist); pointer-events: none; transform: translateY(-50%); }
.login-minimal__input { width: 100%; height: 3rem; padding-left: 2.75rem; border-radius: .5rem; background: var(--card); font-size: .9375rem; }
.login-minimal__input::placeholder { color: var(--mist); }
.login-minimal__submit { width: 100%; height: 3rem; margin-top: .5rem; border-radius: .5rem; font-size: .9375rem; }