:root {
  color-scheme: light;
  --nav-purple: #5b35a5;
  --nav-deep: #432584;
  --magento-orange: #ff7043;
  --action-orange: #bf360c;
  --canvas: #eef1f5;
  --panel: #ffffff;
  --ink: #343a40;
  --muted: #6b7280;
  --line: #d7dce4;
  --warning: #fff4d7;
  --focus: #206fbb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-size: 14px; }
button { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: flex; }
.navigation-rail { position: fixed; z-index: 5; width: 64px; min-height: 100vh; background: var(--nav-purple); color: white; display: flex; flex-direction: column; align-items: center; }
.brand-mark { width: 64px; height: 64px; display: grid; place-items: center; background: var(--nav-deep); color: white; text-decoration: none; font-weight: 800; letter-spacing: -0.08em; }
.rail-button { width: 64px; min-height: 64px; border: 0; color: white; background: transparent; font-size: 24px; cursor: pointer; border-left: 4px solid transparent; }
.rail-button.is-active { background: rgb(255 255 255 / 0.12); border-left-color: var(--magento-orange); }
.customer-menu { position: absolute; top: 64px; left: 64px; width: 228px; padding: 16px 0 18px; background: #fff; color: var(--ink); box-shadow: 4px 6px 18px rgb(36 27 57 / 0.22); }
.customer-menu[hidden] { display: none; }
.menu-label { margin: 0; padding: 0 20px 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; }
.menu-item { width: 100%; border: 0; background: transparent; padding: 11px 20px; text-align: left; color: inherit; cursor: pointer; }
.menu-item.is-current { color: var(--nav-purple); font-weight: 700; border-left: 3px solid var(--magento-orange); padding-left: 17px; background: #f7f5fc; }

.workspace { width: 100%; padding-left: 64px; }
.top-chrome { background: white; border-bottom: 1px solid var(--line); }
.warning-bar { min-height: 33px; padding: 8px 30px; display: flex; align-items: center; gap: 8px; background: var(--warning); color: #73580f; font-size: 12px; }
.warning-bar span:first-child { font-weight: 800; }
.toolbar { min-height: 58px; display: flex; align-items: center; padding: 0 30px; gap: 9px; }
.toolbar-spacer { flex: 1; }
.store-switcher, .admin-button, .language-button { border: 0; color: #4b5563; background: transparent; cursor: pointer; }
.store-switcher { padding: 7px; }
.training-videos { display: flex; align-items: center; gap: 7px; margin-left: 6px; padding-left: 13px; border-left: 1px solid #d6d9df; }
.vc-select-link { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin-right: 5px; border-radius: 999px; padding: 6px 14px 6px 8px; background: #29283a; color: white; box-shadow: 0 2px 4px rgb(29 28 44 / .24); font-size: 11px; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.vc-select-link:hover { background: #201f31; box-shadow: 0 4px 9px rgb(29 28 44 / .3); transform: translateY(-1px); }
.vc-select-link strong { font-weight: 800; }
.vc-select-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #18d8c8; color: #29283a; }
.vc-select-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.training-videos-label { display: grid; min-width: 78px; line-height: 1.1; }
.training-videos-label strong { color: #26364c; font-size: 11px; text-transform: uppercase; letter-spacing: .055em; }
.training-videos-label small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.video-link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; border: 0; border-radius: 6px; padding: 6px 10px 6px 7px; background: #e62117; color: white; box-shadow: 0 3px 8px rgb(180 27 19 / .22); cursor: pointer; white-space: nowrap; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.video-link:hover { background: #bd1911; box-shadow: 0 5px 12px rgb(180 27 19 / .3); transform: translateY(-1px); }
.video-play-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: white; color: #e62117; font-size: 11px; }
.video-link-copy { display: grid; gap: 2px; text-align: left; }
.video-link-copy strong { font-size: 11px; line-height: 1.1; }
.video-link-copy small { color: rgb(255 255 255 / .78); font-size: 9px; font-weight: 600; }
.admin-button { display: inline-flex; gap: 7px; align-items: center; padding: 7px; }
.language-switcher { display: inline-flex; border-left: 1px solid var(--line); padding-left: 10px; gap: 2px; }
.language-button { padding: 5px; border-radius: 6px; line-height: 1; opacity: .58; }
.language-button.is-selected { background: #f0ecf9; opacity: 1; }

#screen-root { padding: 29px 30px 54px; }
.screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.screen-heading h1 { margin: 0; font-size: 25px; font-weight: 500; letter-spacing: -0.02em; }
.pagination-summary { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.primary-button { border: 0; border-radius: 6px; padding: 11px 16px; background: var(--action-orange); color: white; box-shadow: 0 1px 1px rgb(0 0 0 / .08); font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #9f2d0a; }
.grid-card { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(44 55 75 / .05); }
.grid-toolbar { display: flex; align-items: center; min-height: 57px; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.grid-toolbar .toolbar-spacer { flex: 1; }
.grid-action { border: 1px solid #cbd2dd; border-radius: 6px; padding: 7px 10px; color: #4b5563; background: white; cursor: pointer; font-size: 12px; }
.grid-action:hover { border-color: var(--nav-purple); color: var(--nav-purple); }
.table-wrap { overflow-x: auto; }
.customer-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.customer-table th { padding: 12px 14px; background: #f7f8fa; border-bottom: 1px solid var(--line); color: #5f6672; font-size: 10px; text-align: left; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
.customer-table td { padding: 13px 14px; border-bottom: 1px solid #e7eaf0; vertical-align: middle; white-space: nowrap; }
.customer-table tbody tr:hover { background: #fbfafc; }
.customer-table tbody tr.is-new-customer { background: #f3effb; box-shadow: inset 5px 0 0 var(--magento-orange); }
.customer-table tbody tr.is-new-customer:hover { background: #eee8f8; }
.new-customer-label { display: block; width: fit-content; margin-top: 5px; padding: 2px 5px; border: 1px solid #9b82cb; border-radius: 99px; color: var(--nav-deep); background: white; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.customer-table a { color: #1769aa; text-decoration: none; }
.customer-table a:hover { text-decoration: underline; }
.filter-row td { padding: 8px 10px; background: #fbfcfd; }
.filter-row input, .filter-row select { width: 100%; min-width: 70px; height: 29px; border: 1px solid #cfd5df; border-radius: 6px; padding: 4px 7px; color: var(--ink); background: white; }
.row-actions { border: 0; border-radius: 6px; padding: 5px 8px; color: var(--nav-purple); background: #f0ecf9; cursor: pointer; font-weight: 700; }
.loading-copy { color: var(--muted); }

.customer-editor { display: grid; grid-template-columns: 285px minmax(0, 1fr); min-height: calc(100vh - 91px); margin: -29px -30px -54px; background: #f1f1f1; }
.customer-editor-nav { padding: 18px 16px; border-right: 1px solid #cfd1d4; background: white; }
.customer-editor-nav h2 { margin: 0 0 34px; color: #26364c; font-size: 22px; }
.customer-editor-nav button { display: block; width: 100%; border: 0; border-radius: 4px; padding: 8px 10px; background: transparent; color: var(--nav-purple); text-align: left; cursor: pointer; }
.customer-editor-nav button.is-current { background: #e3e3e3; }
.customer-editor-main { min-width: 0; padding: 17px 30px 70px; }
.form-heading { align-items: center; margin-bottom: 17px; padding-bottom: 16px; border-bottom: 1px solid #d5d5d5; }
.form-heading h1 { color: #26364c; font-size: 25px; font-weight: 700; }
.editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.editor-actions button { border: 0; border-radius: 4px; padding: 9px 12px; color: white; cursor: pointer; font-weight: 700; }
.editor-actions .secondary-button { background: #bfc1c4; }
.reset-button { background: #ff7043; }
.save-button { background: #48aab5; }
.customer-form { width: 100%; }
.form-section-title { margin: 0; padding: 10px 0 8px; color: #26364c; font-size: 17px; }
.form-guide-group { border-radius: 4px; }
.magento-form-row { min-height: 69px; padding: 15px 16px; border-bottom: 1px solid #cfd1d4; background: white; }
.magento-form-row + .magento-form-row { border-top: 4px solid #f1f1f1; }
.magento-form-row .form-field { display: grid; grid-template-columns: 100px minmax(220px, 280px); align-items: start; gap: 0; }
.form-field { min-width: 0; }
.form-field label { padding-top: 9px; color: #4a5059; font-size: 12px; line-height: 1.35; }
.required-mark { color: #9f2d0a; }
.form-field input, .form-field select { width: 100%; height: 33px; border: 1px solid #b8bec6; border-radius: 4px; padding: 6px 9px; color: var(--ink); background: #f8f9fa; font: inherit; }
.field-control { min-width: 0; }
.field-help { display: block; margin-top: 5px; color: #7a7f87; font-size: 11px; line-height: 1.4; }
.form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"] { border-color: #a92525; box-shadow: inset 4px 0 0 #a92525; }
.field-error { grid-column: 2; min-height: 0; margin: 3px 0 0; color: #8d1d1d; font-size: 11px; }
.with-extra .inline-check { display: block; margin: 3px 0 0 100px; }
.inline-check { color: #4a5059; font-size: 12px; }
.inline-check input { vertical-align: -2px; }
.compact-row { display: grid; grid-template-columns: 100px auto; align-items: center; justify-content: start; }
.row-label { color: #4a5059; font-size: 12px; }
.toggle-control { position: relative; display: inline-flex; align-items: center; width: 82px; height: 34px; border-radius: 5px; overflow: hidden; background: #eee; box-shadow: inset 0 0 0 1px #c9cdd2; }
.toggle-control input { position: absolute; opacity: 0; }
.toggle-control span { display: grid; place-items: center; width: 49px; height: 100%; background: #72c914; color: white; }
.password-row .field-help { color: #999; }
.separator-row { min-height: 48px; padding-left: 116px; }
.address-workspace { display: grid; grid-template-columns: 335px minmax(0, 1fr); gap: 22px; }
.address-list h2 { margin: 8px 0 12px; color: #26364c; font-size: 16px; }
.add-address-button { display: block; margin-left: auto; border: 0; border-radius: 4px; padding: 9px 12px; background: #ff7043; color: white; cursor: pointer; }
.address-card { display: grid; gap: 8px; margin-top: 3px; padding: 14px; background: #e8f6f7; color: #46515e; font-size: 12px; }
.address-card label { display: block; }
.address-form { min-width: 0; }
.stacked-address { display: grid; gap: 6px; }
.stacked-address .form-field { border: 0; }
.file-row { display: grid; grid-template-columns: 100px minmax(220px, 1fr); align-items: center; }
.file-row input { max-width: 420px; }
.address-cancel { display: flex; justify-content: flex-end; padding-top: 20px; }
.ai-address-callout { display: flex; gap: 10px; margin: 0 0 8px; padding: 12px 14px; border-left: 5px solid #3f8f9d; background: #e8f6f7; color: #244d55; line-height: 1.45; }
.ai-address-callout strong { color: #16717f; white-space: nowrap; }
.is-corporate-mode .corporate-row { border-left: 6px solid var(--nav-purple); background: #f4f0fb; }
.is-corporate-mode .corporate-row .field-help { color: var(--nav-deep); font-weight: 700; }
.cancel-button { border: 0; border-radius: 4px; padding: 9px 12px; background: #ff3151; color: white; cursor: pointer; font-weight: 700; }
.success-notice { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #8bb79b; border-left: 5px solid #377d4d; border-radius: 6px; color: #215d34; background: #edf8f0; font-weight: 700; }
.success-notice button, .transient-notice button { margin-left: auto; border: 0; padding: 1px 5px; color: inherit; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }

.guide-panel { position: fixed; z-index: 10; right: 26px; bottom: 25px; width: 304px; padding: 20px; border: 1px solid #d8d1ec; border-radius: 6px; background: white; box-shadow: 0 13px 35px rgb(31 24 51 / .18); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.guide-panel.is-collapsed { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px); }
.guide-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.guide-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 12px 0 4px; }
.guide-catalog button { border: 1px solid #d8d1ec; border-radius: 5px; padding: 7px; background: #fff; color: var(--nav-purple); cursor: pointer; font-size: 11px; font-weight: 700; }
.guide-catalog button.is-active { border-color: var(--nav-purple); background: var(--nav-purple); color: #fff; }
.guide-kicker { color: var(--nav-purple); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide-close { border: 0; padding: 0; background: transparent; color: #5f6672; font-size: 22px; line-height: .7; cursor: pointer; }
.guide-progress { margin: 15px 0 4px; color: var(--muted); font-size: 12px; }
.guide-progress-bar { height: 5px; overflow: hidden; border-radius: 99px; background: #ece8f5; }
.guide-progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--nav-purple); transition: width .18s ease; }
.guide-panel h2 { margin: 0; font-size: 18px; font-weight: 650; }
.guide-description { line-height: 1.5; color: #505967; }
.guide-actions { display: flex; gap: 7px; }
.guide-actions .primary-button { margin-left: auto; padding: 7px 10px; font-size: 12px; }
.secondary-button { border: 1px solid #bfb4db; border-radius: 6px; padding: 7px 10px; color: var(--nav-purple); background: white; cursor: pointer; font-size: 12px; font-weight: 700; }
.secondary-button:disabled { cursor: not-allowed; opacity: .45; }
.guide-collapsed-control { position: fixed; z-index: 9; right: 26px; bottom: 25px; display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--nav-purple); color: white; font-weight: 800; box-shadow: 0 5px 14px rgb(31 24 51 / .24); cursor: pointer; }
.guide-collapsed-control.is-visible { display: block; }
.tutorial-veil { display: none; }
.tutorial-spotlight { position: fixed; z-index: 7; border: 3px solid var(--magento-orange); border-radius: 8px; box-shadow: 0 0 0 4px rgb(255 255 255 / .85), 0 7px 22px rgb(91 53 165 / .18); pointer-events: none; }
.tutorial-arrow { position: fixed; z-index: 9; display: flex; flex-direction: column; align-items: center; max-width: 280px; color: var(--magento-orange); pointer-events: none; transform: translateX(-50%); animation: tutorial-arrow-bob 1.1s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgb(0 0 0 / .16)); }
.tutorial-arrow span { font-size: 58px; font-weight: 950; line-height: .72; }
.tutorial-arrow strong { margin-top: 4px; padding: 7px 10px; border-radius: 6px; background: var(--magento-orange); color: white; font-size: 12px; line-height: 1.2; text-align: center; }
.tutorial-arrow[hidden] { display: none; }
.is-guide-target { position: relative; z-index: 8; }
.demo-filled { animation: demo-filled-pulse 1.05s ease both; }
.transient-notice { position: fixed; z-index: 20; right: 26px; top: 108px; display: flex; align-items: center; gap: 10px; max-width: 350px; padding: 11px 14px; border-radius: 6px; background: #343a40; color: white; box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.transient-notice[hidden] { display: none; }
.noscript-message { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 30px; background: white; color: #343a40; text-align: center; }

.detail-screen { display: grid; grid-template-columns: 270px 1fr; min-height: calc(100vh - 150px); margin: -29px -30px -54px; background: #f1f1f1; }
.detail-nav { padding: 24px 16px; border-right: 1px solid var(--line); background: white; }
.detail-nav h2 { margin: 0 0 25px; font-size: 22px; }
.detail-nav button { display: block; width: 100%; border: 0; padding: 8px; background: transparent; color: var(--nav-purple); text-align: left; }
.detail-nav button.is-current { background: #e4e4e4; }
.detail-main { padding: 20px 30px; }
.customer-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 18px; background: white; }
.customer-summary dl { display: grid; grid-template-columns: 180px 1fr; margin: 0; }
.customer-summary dt { font-weight: 700; }.customer-summary dd { margin: 0; }
.sales-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 10px; padding: 18px; background: white; }
.order-screen h2, .products-screen h2 { color: #26364c; font-size: 17px; }
.currency-strip { margin-bottom: 20px; padding: 16px; border-radius: 4px; background: var(--nav-purple); color: white; }
.currency-strip select { padding: 8px; }
.order-section { margin-bottom: 18px; }.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.order-items, .product-table { width: 100%; border-collapse: collapse; background: white; }.order-items th, .order-items td, .product-table th, .product-table td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; }.order-items small, .product-table small { display: block; margin-top: 4px; color: var(--muted); }
.empty-cell { padding: 28px !important; color: var(--muted); text-align: center !important; }
.required-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px; padding: 16px; background: white; }.required-grid label { display: grid; grid-template-columns: 120px 1fr; align-items: center; }.required-grid input { padding: 9px; border: 1px solid #c5cad1; }.required-grid b { color: #b42318; }
.address-columns, .order-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.address-columns > div, .method-card, .totals { padding: 16px; background: white; line-height: 1.6; }.method-card { min-height: 62px; }.shipping-link { border: 0; padding: 0; background: transparent; color: var(--nav-purple); text-decoration: underline; cursor: pointer; }.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px; background: #ecf8ee; }
.totals-create-order { grid-column: 1 / -1; justify-self: end; border: 0; border-radius: 4px; padding: 10px 14px; color: white; cursor: pointer; font-weight: 700; }
.product-search { display: flex; align-items: end; gap: 10px; margin: 8px 0 18px; padding: 15px; background: var(--nav-purple); }.product-search label { flex: 1; color: white; }.product-search input { display: block; width: 100%; margin-top: 5px; padding: 9px; }.qty-input { width: 64px; padding: 7px; }
.order-success { max-width: 620px; margin: 80px auto; padding: 45px; border: 1px solid #91c6a3; border-radius: 8px; background: white; text-align: center; }.order-success > span { display: grid; place-items: center; width: 62px; height: 62px; margin: auto; border-radius: 50%; background: #377d4d; color: white; font-size: 32px; }
.video-dialog { width: min(920px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 8px; background: #111; color: white; box-shadow: 0 24px 70px rgb(0 0 0 / .45); }
.video-dialog::backdrop { background: rgb(20 16 31 / .78); }
.video-dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.video-dialog-heading h2 { margin: 0; font-size: 16px; }
.video-dialog-heading button { border: 0; background: transparent; color: white; cursor: pointer; font-size: 28px; }
.video-dialog video { display: block; width: 100%; max-height: 76vh; background: black; }

@keyframes tutorial-arrow-bob { 50% { transform: translate(-50%, 6px); } }
@keyframes demo-filled-pulse { 0%, 100% { background-color: transparent; } 35% { background-color: #e7f7e9; } }

@media (max-width: 1100px) { .address-workspace { grid-template-columns: 1fr; } .address-list { max-width: 420px; } }
@media (max-width: 900px) { .customer-editor { grid-template-columns: 1fr; } .customer-editor-nav, .detail-nav { display: none; } .customer-editor-main { padding: 16px; } .editor-actions { justify-content: flex-start; } .detail-screen { grid-template-columns: 1fr; }.address-columns, .order-bottom, .required-grid { grid-template-columns: 1fr; } }
@media (max-width: 1050px) { .training-videos { max-width: 54vw; overflow-x: auto; padding-bottom: 3px; } }

@media (max-width: 760px) { .navigation-rail { width: 52px; } .brand-mark, .rail-button { width: 52px; } .customer-menu { position: fixed; z-index: 20; left: 52px; } .workspace { padding-left: 52px; } .toolbar, #screen-root { padding-left: 16px; padding-right: 16px; } .toolbar { flex-wrap: wrap; padding-block: 8px; }.training-videos { order: 3; width: 100%; max-width: none; }.warning-bar { padding-left: 16px; padding-right: 16px; } .admin-button span:last-child { display: none; } .screen-heading { align-items: start; flex-direction: column; } .customer-editor { margin-left: -16px; margin-right: -16px; } .magento-form-row .form-field { grid-template-columns: 1fr; } .field-error { grid-column: 1; } .form-field label { padding: 0 0 6px; } .with-extra .inline-check { margin-left: 0; } .compact-row, .file-row { grid-template-columns: 1fr; gap: 8px; } .separator-row { padding-left: 16px; } .guide-panel { right: 0; bottom: 0; left: 0; width: auto; max-height: 48vh; overflow: auto; padding: 16px; border-width: 1px 0 0; border-radius: 16px 16px 0 0; } .guide-panel-heading, .guide-progress { position: sticky; z-index: 1; background: white; } .guide-panel-heading { top: -16px; padding-top: 16px; } .guide-progress { top: 23px; padding-top: 8px; } .guide-collapsed-control { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tutorial-arrow { animation: none; } .guide-panel, .guide-progress-bar span { transition: none; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }