:root {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #152238;
    background: #f4f6f9;
    font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; background: #f4f6f9; }
a { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { height: 92px; display: flex; align-items: center; gap: 26px; padding: 0 24px; background: #e9edf2; border-bottom: 1px solid #ccd4de; }
.brand { width: 142px; min-height: 72px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px 8px 6px; text-decoration: none; background: white; border-radius: 10px; box-shadow: 0 3px 12px #1a2a3a12; overflow: hidden; }
.brand-subtitle { font-size: 10px; color: #68778a; text-transform: uppercase; letter-spacing: .12em; }
.brand-logo { width: 124px; height: 51px; display: block; object-fit: cover; object-position: center; }
.main-nav { display: flex; gap: 7px; align-self: stretch; }
.main-nav a { display: flex; align-items: center; padding: 0 13px; text-decoration: none; border-bottom: 3px solid transparent; color: #24364b; }
.main-nav a:hover, .main-nav a.active { color: #0d5c63; border-color: #0d8b86; background: #ffffff75; }
.company-control { margin-left: auto; display: grid; gap: 4px; }
.company-control label { font-size: 10px; text-transform: uppercase; color: #68778a; font-weight: 700; }
.company-control select { min-width: 235px; padding: 10px 34px 10px 12px; border: 1px solid #b5bec9; background: white; color: #17263a; }
.live-pill, .connection-pill { white-space: nowrap; border-radius: 999px; background: white; padding: 10px 13px; font-size: 12px; }
.live-pill { color: #8c6800; font-weight: 800; }
.connection-pill i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #46a866; }
.user-menu { display: grid; gap: 3px; color: #58687c; font-size: 11px; text-align: right; }
.user-menu form { margin: 0; }.user-menu button { padding: 0; border: 0; color: #0d7773; background: transparent; cursor: pointer; font: inherit; }
main { width: 100%; }
.page-heading { display: flex; align-items: center; justify-content: space-between; padding: 30px 34px 24px; background: white; border-bottom: 1px solid #d6dde5; }
.page-heading h1 { margin: 4px 0 6px; font-size: 29px; }
h1[tabindex="-1"]:focus { outline: none; }
.page-heading p { margin: 0; color: #65748a; }
.company-heading-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.company-logo-card, .company-logo-fallback { width: 118px; height: 84px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #d8e0e7; border-radius: 10px; background: white; box-shadow: 0 5px 16px #1b2d4410; }
.company-logo-card img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; display: block; box-sizing: border-box; padding: 7px; object-fit: contain; }
.company-logo-fallback { color: white; border-color: #0d8b86; background: linear-gradient(145deg, #0f8f88, #17667d); font-size: 22px; font-weight: 900; letter-spacing: .05em; }
.eyebrow { color: #0b817c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.migration-badge { padding: 9px 14px; border-radius: 999px; color: #714f00; background: #fff3c4; border: 1px solid #f0ce55; font-size: 13px; font-weight: 700; }
.refresh-button { display: flex; align-items: center; gap: 9px; min-width: 190px; justify-content: center; padding: 11px 15px; border: 1px solid #90aaa9; border-radius: 6px; color: #0a6864; background: #f1faf9; font-weight: 700; cursor: pointer; }.refresh-button:disabled { opacity: .75; cursor: wait; }.mini-spinner { width: 17px; height: 17px; border: 2px solid #acd4d1; border-top-color: #0d7773; border-radius: 50%; animation: spin .8s linear infinite; }
.dashboard-error { margin: 20px 34px 0; padding: 14px 18px; border: 1px solid #e9aaa6; border-left: 4px solid #d94740; border-radius: 7px; color: #8d2d28; background: #fff0ef; }
.shopify-setup-card { display: grid; gap: 22px; margin-top: 28px; border-color: #b8d9d5; background: linear-gradient(145deg, #ffffff, #f1faf9); }
.shopify-setup-card.is-checking { min-height: 110px; display: flex; align-items: center; justify-content: center; color: #52647a; }
.shopify-setup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.shopify-setup-heading h2 { margin: 6px 0; font-size: 24px; }.shopify-setup-heading p { max-width: 760px; margin: 0; color: #65748a; line-height: 1.55; }
.shopify-priority-badge { padding: 9px 13px; border: 1px solid #9ccdc7; border-radius: 999px; color: #08716c; background: #e5f6f3; font-size: 12px; font-weight: 800; white-space: nowrap; }
.shopify-setup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.shopify-setup-steps li { display: flex; gap: 12px; min-height: 92px; padding: 16px; border: 1px solid #d7e0e7; border-radius: 9px; background: white; }
.shopify-setup-steps li > span { flex: 0 0 auto; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #66768a; background: #edf1f4; font-weight: 800; }
.shopify-setup-steps li div { display: grid; align-content: start; gap: 5px; }.shopify-setup-steps small { color: #718095; line-height: 1.4; }
.shopify-setup-steps li.done { border-color: #b8dec3; background: #f3faf5; }.shopify-setup-steps li.done > span { color: white; background: #43a762; }
.shopify-setup-steps li.current { border-color: #80c7c1; box-shadow: 0 0 0 2px #0d8b8614; }.shopify-setup-steps li.current > span { color: white; background: #0d8b86; }
.shopify-setup-actions { display: flex; flex-wrap: wrap; gap: 10px; }.shopify-setup-actions .primary-button { margin: 0; text-decoration: none; }.shopify-setup-actions .secondary-button { text-decoration: none; }
.channel-overview { display: grid; gap: 15px; padding: 26px 34px 6px; }.channel-overview.is-loading { opacity: .58; }.channel-overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.channel-overview-heading h2, .dashboard-section-title h2 { margin: 4px 0 0; }.channel-overview-heading small { max-width: 430px; color: #718095; text-align: right; }.channel-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.channel-card { --channel-color: #607991; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px; border: 1px solid #d7e0e7; border-left: 5px solid var(--channel-color); border-radius: 11px; background: white; box-shadow: 0 5px 16px #1b2d440d; }.channel-card.shopify { --channel-color: #20936c; }.channel-card.otto { --channel-color: #e30613; }.channel-card.future { --channel-color: #7d8da1; }.channel-card header { display: flex; align-items: center; gap: 11px; }.channel-card header > div { display: grid; gap: 2px; }.channel-card header > div small { color: #758397; }.channel-mark { min-width: 42px; height: 38px; display: grid; place-items: center; padding: 0 8px; border-radius: 8px; color: white; background: var(--channel-color); font-size: 12px; font-weight: 900; }.channel-state { margin-left: auto; padding: 5px 9px; border-radius: 999px; color: #68788b; background: #edf1f4; font-size: 11px; font-weight: 750; }.channel-state.live { color: #26703d; background: #e6f5ea; }.channel-card-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #e4e9ed; border-bottom: 1px solid #e4e9ed; }.channel-card-values > div { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 12px 14px; border-left: 1px solid #e4e9ed; background: #fbfcfd; }.channel-card-values > div:first-child { border-left: 0; }.channel-card-values span { color: #6d7c90; font-size: 11px; }.channel-card-values strong { overflow-wrap: anywhere; color: #1b304a; font-size: 20px; }.channel-card > a { width: fit-content; color: #0a716d; font-size: 13px; font-weight: 750; text-decoration: none; }.channel-card > a::after { content: "  →"; }.channel-card > a:hover { text-decoration: underline; }.channel-card > p { margin: 0; color: #6d7c90; line-height: 1.5; }.dashboard-section-title { padding: 30px 34px 0; }.dashboard-section-title p { margin: 6px 0 0; color: #718095; font-size: 13px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 28px 34px; }
.shopify-product-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 20px; padding-bottom: 24px; }
.metrics.is-loading { opacity: .58; }
.metric { --accent: #8494a8; min-height: 184px; display: flex; flex-direction: column; padding: 23px; border: 1px solid color-mix(in srgb, var(--accent) 55%, white); border-top: 4px solid var(--accent); border-radius: 12px; background: white; box-shadow: 0 7px 20px #1b2d4410; }
.metric-orders { --accent: #e9ad14; }.metric-online { --accent: #46a866; }.metric-offline { --accent: #6f84a0; }.metric-stock { --accent: #e3524b; }
.metric > span { color: #607086; font-size: 13px; }
.metric strong { margin: 8px 0 3px; color: var(--accent); font-size: 34px; }
.metric small { color: #78869a; }
.metric a { margin-top: auto; padding: 10px; text-align: center; text-decoration: none; color: #24364b; background: #edf1f5; border: 1px solid #c5cdd7; }
.order-values { padding: 0 34px 28px; }.order-values-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }.order-values-heading h2 { margin: 4px 0 0; }.order-values-heading > small { max-width: 430px; color: #718095; text-align: right; }.order-values > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.order-values article { display: grid; gap: 12px; padding: 20px 22px; border: 1px solid #d9e0e8; border-radius: 10px; background: white; box-shadow: 0 5px 16px #1b2d4409; }.order-values span { color: #69798d; font-size: 13px; }.order-values strong { font-size: 26px; }
.panel { margin: 0 34px 28px; padding: 28px; border: 1px solid #d9e0e8; border-radius: 12px; background: white; box-shadow: 0 7px 20px #1b2d440b; }
.roadmap-panel { display: grid; grid-template-columns: 1fr 500px; gap: 45px; align-items: center; }
.roadmap-panel h2 { margin: 7px 0; }.roadmap-panel p { color: #65748a; line-height: 1.6; }
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; padding: 0; margin: 0; list-style: none; color: #708095; font-size: 12px; text-align: center; }
.roadmap::before { content: ""; position: absolute; top: 16px; left: 12%; right: 12%; height: 2px; background: #dce2e8; }
.roadmap li { position: relative; z-index: 1; }.roadmap span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 9px; border-radius: 50%; background: #eef1f5; border: 2px solid #cbd3dc; font-weight: 800; }
.roadmap .done { color: #08756f; font-weight: 700; }.roadmap .done span { color: white; border-color: #0d8b86; background: #0d8b86; }
.empty-state { min-height: 320px; display: grid; place-content: center; justify-items: center; text-align: center; }.empty-state h2 { margin-bottom: 5px; }.empty-state p { color: #6b7a8d; }.feature-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #0d7773; background: #e1f4f2; font-size: 28px; }
.settings-preview { max-width: 900px; }.settings-preview dl { display: grid; gap: 1px; border: 1px solid #d9e0e8; }.settings-preview dl div { display: grid; grid-template-columns: 180px 1fr; padding: 14px; background: #f8fafb; }.settings-preview dt { color: #68778a; }.settings-preview dd { margin: 0; font-weight: 600; }.notice { margin-top: 20px; padding: 16px; border-left: 4px solid #e9ad14; background: #fff8df; color: #5d4b15; }
.settings-heading { align-items: center; }.settings-status-badge { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #d6dee6; border-radius: 999px; color: #66768a; background: white; font-size: 12px; font-weight: 750; }.settings-status-badge span { width: 9px; height: 9px; border-radius: 50%; background: #a7b0bc; }.settings-status-badge.is-active { color: #25703c; border-color: #b6dec1; background: #edf8f0; }.settings-status-badge.is-active span { background: #42a961; }.settings-page-notice { margin: 22px 34px 0; }.settings-loading { display: flex; align-items: center; gap: 10px; }.settings-layout { display: grid; grid-template-columns: minmax(650px, 1.5fr) minmax(300px, .58fr); gap: 22px; padding: 28px 34px; }.settings-main, .settings-side { display: grid; align-content: start; gap: 22px; }.settings-card { margin: 0; padding: 23px; }.settings-card.compact { padding: 20px; }.settings-card h2 { margin: 0; }.settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e0e6eb; }.settings-card-heading > div { display: flex; gap: 12px; }.settings-card-heading h2 { margin: 0 0 4px; font-size: 19px; }.settings-card-heading p { margin: 0; color: #718095; font-size: 12px; }.settings-icon { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: white; background: #0d8b86; font-size: 11px; font-weight: 850; }.toggle-line { display: flex; align-items: center; gap: 8px; color: #41546a; font-size: 12px; font-weight: 700; white-space: nowrap; }.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.settings-form-grid label, .settings-stack { display: grid; gap: 6px; color: #52647a; font-size: 12px; font-weight: 650; }.settings-form-grid label.wide { grid-column: 1 / -1; }.settings-form-grid input, .settings-form-grid select, .settings-stack input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #b9c4cf; border-radius: 5px; color: #1c2c40; background: white; font: inherit; }.settings-form-grid input:focus, .settings-form-grid select:focus, .settings-stack input:focus { outline: 2px solid #75c3bf55; border-color: #0d8b86; }.settings-form-grid input[readonly] { color: #66768a; background: #f1f4f6; }.settings-form-grid small { color: #7a899a; font-weight: 400; }.settings-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }.settings-actions > span { color: #718095; font-size: 11px; }.connection-result { display: grid; gap: 7px; margin-top: 15px; padding: 13px; border-left: 4px solid #d1a21e; background: #fff8df; color: #695315; font-size: 12px; }.connection-result.success { border-color: #45a763; background: #eaf7ee; color: #27653b; }.connection-result.error { border-color: #d94d46; background: #fff0ef; color: #8d2d28; }.connection-result div { display: flex; flex-wrap: wrap; gap: 7px; }.connection-result div span { padding: 4px 7px; border-radius: 4px; background: #ffffffa8; }.connection-result small { opacity: .8; }.toggle-card { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid #d8e0e7; border-radius: 7px; background: #f8fafb; cursor: pointer; }.toggle-card span { display: grid; gap: 3px; }.toggle-card strong { color: #34485e; font-size: 12px; }.toggle-card small { color: #748398; font-size: 11px; }.settings-stack { margin-top: 15px; }.security-card ul { margin: 15px 0 0; padding-left: 19px; color: #607086; font-size: 12px; line-height: 1.7; }.settings-save-card { position: sticky; top: 18px; display: grid; gap: 10px; margin: 0; padding: 21px; border-color: #b9dbd8; background: #f4fbfa; }.settings-save-card > strong { color: #0d716d; font-size: 17px; }.settings-save-card p { margin: 0; color: #607086; font-size: 12px; line-height: 1.55; }.settings-save-card .primary-button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; }.settings-actions .mini-spinner, .settings-save-card .mini-spinner { border-color: #83bbb8; border-top-color: currentColor; }
.button { padding: 10px 16px; background: #0d7773; color: white; text-decoration: none; border-radius: 5px; }
.auth-body { min-width: 0; min-height: 100vh; display: grid; place-items: center; padding: 35px; background: linear-gradient(135deg, #eef4f5, #f6f7fa 55%, #fff4cd); }
.auth-card { width: min(560px, 100%); padding: 38px; border: 1px solid #d9e0e8; border-radius: 16px; background: white; box-shadow: 0 18px 55px #1b2d4424; }.auth-card.compact { width: min(480px, 100%); }.auth-card h1 { margin: 7px 0; }.auth-card > p { color: #68778a; line-height: 1.5; }.auth-brand { margin-bottom: 28px; color: #152238; font-size: 22px; font-weight: 800; }.auth-brand small { display: block; color: #0d7773; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.auth-logos { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }.auth-logos img { width: 135px; height: 74px; object-fit: contain; border: 1px solid #e0e5eb; border-radius: 8px; background: white; }
.auth-portal-mark { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(145deg, #0f8f88, #17667d); color: white; font-size: 15px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 10px 24px #126f782e; }
.auth-twa-logo { display: block; width: 180px; height: 88px; margin-bottom: 14px; object-fit: contain; object-position: center; border-radius: 10px; background: white; }
.auth-brand strong { display: block; font-size: 22px; }
.auth-form { display: grid; gap: 8px; margin-top: 25px; }.auth-form label { margin-top: 8px; color: #46586d; font-size: 13px; font-weight: 650; }.auth-form input:not([type=checkbox]) { width: 100%; padding: 12px; border: 1px solid #b9c3cf; border-radius: 5px; font: inherit; }.auth-form small { color: #78869a; }.auth-form button, .primary-button { margin-top: 15px; padding: 12px 18px; border: 0; border-radius: 5px; color: white; background: #0d7773; font-weight: 700; cursor: pointer; }.auth-form button:hover, .primary-button:hover { background: #095f5c; }.check-line { display: flex; gap: 8px; align-items: center; }.validation { color: #b62f29; font-size: 13px; }
.admin-grid { display: grid; grid-template-columns: minmax(600px, 1.4fr) minmax(390px, .8fr); gap: 22px; padding: 28px 34px; }.admin-grid .panel { margin: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.form-grid label { display: grid; gap: 6px; color: #52647a; font-size: 13px; }.form-grid input { padding: 10px; border: 1px solid #bdc7d2; border-radius: 4px; font: inherit; }.user-create fieldset { margin: 24px 0 0; padding: 0; border: 0; }.user-create legend { margin-bottom: 10px; font-weight: 700; }.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.choice-grid.permissions { grid-template-columns: repeat(3, 1fr); }.choice-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #d5dde6; border-radius: 7px; background: #f9fbfc; cursor: pointer; }.choice-card:has(input:checked) { border-color: #0d8b86; background: #e7f6f4; }.choice-card span { display: grid; gap: 3px; }.choice-card small { color: #76869a; }.notice.success { border-left-color: #46a866; background: #eaf7ee; color: #27653b; }.notice.error { border-left-color: #e3524b; background: #fff0ef; color: #8d2d28; }.primary-button:disabled { opacity: .6; cursor: wait; }
.user-list article { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px 0; border-top: 1px solid #e1e6ec; }.user-list article:first-of-type { border-top: 0; }.user-list article div { display: grid; }.user-list article small { color: #718095; }.user-list article p { grid-column: 1 / -1; margin: 0; color: #66768a; font-size: 12px; line-height: 1.5; }.role-badge { align-self: start; padding: 5px 8px; border-radius: 999px; color: #0d716d; background: #e4f5f3; font-size: 11px; font-weight: 700; }
.product-workspace { margin: 28px 34px; border: 1px solid #d9e0e8; border-radius: 12px; background: white; box-shadow: 0 7px 20px #1b2d440b; overflow: hidden; }
.heading-actions { display: flex; align-items: center; gap: 10px; }.heading-actions .primary-button { margin: 0; text-decoration: none; }
.product-create-layout { display: grid; grid-template-columns: minmax(650px, 1.5fr) minmax(320px, .55fr); gap: 22px; padding: 28px 34px; }.product-create-layout > .panel { margin: 0; }.create-confirm-card { align-self: start; position: sticky; top: 18px; }.create-confirm-card p { color: #65748a; line-height: 1.55; }
.product-category-picker { position: relative; display: grid; gap: 9px; }.product-category-picker > label { display: grid; gap: 6px; }.product-category-selection { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #9fd3cd; border-radius: 7px; background: #edf9f7; }.product-category-selection > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: #259a73; font-weight: 900; }.product-category-selection div { display: grid; gap: 2px; }.product-category-selection small { color: #687b8d; font-weight: 500; }.product-category-selection strong { color: #174a48; font-size: 12px; line-height: 1.4; }.product-category-selection button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #617286; background: transparent; font-size: 21px; cursor: pointer; }.product-category-selection button:hover { color: #9c302b; background: #ffe9e7; }.product-category-results { max-height: 275px; display: grid; overflow-y: auto; border: 1px solid #cbd6df; border-radius: 7px; background: white; box-shadow: 0 8px 20px #1b2d4417; }.product-category-results button { padding: 10px 12px; border: 0; border-bottom: 1px solid #e5eaee; color: #33475c; background: white; font: inherit; font-size: 11px; line-height: 1.4; text-align: left; cursor: pointer; }.product-category-results button:last-of-type { border-bottom: 0; }.product-category-results button:hover, .product-category-results button.is-selected { color: #0a6f69; background: #eaf7f5; }.product-category-results p { margin: 0; padding: 14px; color: #718095; font-size: 12px; }.create-extra-section { margin-top: 3px; border: 1px solid #d9e1e8; border-radius: 8px; background: #f8fafb; }.create-extra-section summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #284057; font-size: 13px; font-weight: 800; cursor: pointer; }.create-extra-section summary small { color: #748397; font-weight: 400; }.create-extra-section[open] summary { border-bottom: 1px solid #dfe6eb; }.create-extra-section > .detail-form { padding: 16px; }.create-next-steps { display: grid; gap: 4px; margin: 14px 0 18px; padding: 12px; border-radius: 7px; color: #52677b; background: #f1f5f7; font-size: 12px; }.create-next-steps strong { color: #27465d; }.create-next-steps span { line-height: 1.45; }
.color-picker { display: grid; gap: 10px; }.color-picker-toolbar { display: flex; gap: 8px; }.color-picker-toolbar input { flex: 1; min-width: 0; }.color-picker-toolbar .secondary-button { min-width: 165px; }.color-current { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #b9d9d6; border-radius: 6px; background: #f0faf9; }.color-swatch { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block; border: 1px solid #aeb8c3; border-radius: 5px; }.color-options { max-height: 270px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 7px; overflow-y: auto; padding: 8px; border: 1px solid #d6dee6; border-radius: 6px; background: #f8fafb; }.color-choice { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid #cbd4dd; border-radius: 6px; color: #31445a; background: white; cursor: pointer; }.color-choice:hover, .color-choice.selected { border-color: #0d8b86; background: #e6f6f4; }.color-choice span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variant-builder { display: grid; gap: 15px; }.variant-option-group { display: grid; gap: 10px; padding: 14px; border: 1px solid #dce3e9; border-radius: 8px; background: #f8fafb; }.variant-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }.variant-group-heading label { min-width: 260px; display: grid; gap: 5px; color: #52647a; font-size: 12px; font-weight: 650; }.variant-group-heading input { padding: 9px; border: 1px solid #b9c4cf; border-radius: 5px; background: white; }.variant-values { max-height: 220px; display: flex; flex-wrap: wrap; gap: 7px; overflow-y: auto; }.value-chip { padding: 7px 10px; border: 1px solid #cbd4dd; border-radius: 999px; color: #41546a; background: white; cursor: pointer; }.value-chip.selected { color: #0a6864; border-color: #0d8b86; background: #dff3f1; font-weight: 750; }.variant-custom-value { display: flex; align-items: end; gap: 10px; padding-top: 4px; }.variant-custom-value label { min-width: 260px; flex: 1; display: grid; gap: 5px; color: #52647a; font-size: 12px; font-weight: 650; }.variant-custom-value input { width: 100%; padding: 9px; border: 1px solid #b9c4cf; border-radius: 5px; background: white; }.variant-preview { padding: 13px; border-left: 4px solid #0d8b86; color: #465a70; background: #edf8f7; line-height: 1.5; }.variant-confirm { padding: 11px; border: 1px solid #d8e0e7; border-radius: 6px; background: #fff; }.add-option-button { width: fit-content; }
.variant-builder-launch, .variant-builder-open-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid #d8e2e8; border-radius: 8px; background: #f8fafb; }
.variant-builder-launch > div, .variant-builder-open-heading > div { display: grid; gap: 4px; }
.variant-builder-launch strong, .variant-builder-open-heading strong { color: #14304a; }
.variant-builder-launch span, .variant-builder-open-heading span { color: #6d7d90; font-size: 12px; line-height: 1.45; }
.variant-sku-lookup-message { display: flex; align-items: center; gap: 7px; margin-top: 7px; line-height: 1.35; }
.variant-sku-lookup-message.has-success { color: #176f54; }
.variant-sku-lookup-message.has-error { color: #b42318; }
@media (max-width: 700px) { .variant-builder-launch, .variant-builder-open-heading { align-items: stretch; flex-direction: column; }.variant-builder-launch button, .variant-builder-open-heading button { width: 100%; } }
.ai-card { display: grid; gap: 14px; }.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }.ai-output { width: 100%; padding: 12px; border: 1px solid #b9c4cf; border-radius: 6px; background: #f8fafb; resize: vertical; font: inherit; line-height: 1.5; }
.ai-card-collapsible { display: block; padding: 0; overflow: hidden; }.ai-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 23px; cursor: pointer; list-style: none; }.ai-details > summary::-webkit-details-marker { display: none; }.ai-details > summary > div { display: flex; align-items: center; gap: 11px; }.ai-details > summary > div > span:last-child { display: grid; gap: 3px; }.ai-details > summary strong { font-size: 19px; }.ai-details > summary small { color: #748398; font-weight: 400; }.ai-details[open] > summary { border-bottom: 1px solid #e2e7ec; }.ai-details[open] > summary > span:last-child { transform: rotate(180deg); }.ai-details-content { display: grid; gap: 14px; padding: 20px 23px 23px; }.ai-check-explanation { display: grid; gap: 5px; padding: 11px 13px; border-radius: 7px; color: #607286; background: #f2f5f7; font-size: 11px; line-height: 1.45; }.sale-mode-toggle { grid-template-columns: auto 1fr; align-items: center; padding: 11px 13px; border: 1px solid #d7e0e7; border-radius: 7px; background: #f7f9fa; }.sale-mode-toggle input { width: 18px; height: 18px; margin: 0; }.sale-mode-toggle small { grid-column: 2; }.color-picker-strict { position: relative; display: grid; gap: 8px; }.color-palette-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid #b9c7d4; border-radius: 6px; color: #102b4e; background: white; cursor: pointer; text-align: left; }.color-palette-toggle:hover, .color-palette-toggle[aria-expanded="true"] { border-color: #0d8b86; box-shadow: 0 0 0 2px rgba(13,139,134,.08); }.color-palette-toggle-value { min-width: 0; display: flex; align-items: center; gap: 9px; }.color-palette-arrow { color: #5d7086; font-size: 10px; }.color-palette-panel { display: grid; gap: 9px; padding: 10px; border: 1px solid #b9d9d6; border-radius: 7px; background: #f8fbfb; }.color-palette-search { width: 100%; }.color-palette-results { max-height: 275px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 7px; overflow-y: auto; padding: 2px; }.color-palette-option { min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 8px; border: 1px solid #cbd4dd; border-radius: 6px; color: #31445a; background: white; cursor: pointer; text-align: left; }.color-palette-option:hover, .color-palette-option.selected { border-color: #0d8b86; background: #e6f6f4; }.color-palette-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.color-palette-check { color: #07847e; font-size: 18px; font-weight: 800; text-align: center; }.color-palette-empty { padding: 13px; color: #68798c; text-align: center; }
.product-toolbar { display: flex; align-items: end; gap: 12px; padding: 20px; background: #f8fafb; border-bottom: 1px solid #dfe5eb; }.product-toolbar label { display: grid; gap: 6px; color: #52647a; font-size: 12px; font-weight: 650; }.product-toolbar input, .product-toolbar select { height: 40px; padding: 8px 11px; border: 1px solid #b9c4cf; border-radius: 5px; background: white; font: inherit; }.product-search { flex: 1; }.product-toolbar select { min-width: 190px; }.product-search-button { height: 40px; margin: 0; }.secondary-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid #aeb9c5; border-radius: 5px; color: #31445a; background: #f4f6f8; font-weight: 650; cursor: pointer; }.secondary-button:disabled { opacity: .6; cursor: wait; }
.product-error { margin: 18px 20px 0; }.product-list-heading { display: flex; justify-content: space-between; padding: 18px 20px 12px; color: #52647a; font-size: 13px; }.product-list-heading span { color: #7a8899; }
.product-title-link { display: grid; gap: 3px; color: #183a5a; text-decoration: none; }.product-title-link:hover { color: #08756f; text-decoration: underline; }.product-title-link small { color: #728197; font-size: 11px; font-weight: 400; }
.product-table-wrap { overflow-x: auto; }.product-table-wrap.is-loading { opacity: .62; }.product-table { width: 100%; border-collapse: collapse; }.product-table th { padding: 11px 14px; border-top: 1px solid #e0e5eb; border-bottom: 1px solid #d7dee6; color: #53657b; background: #eef2f5; font-size: 12px; text-align: left; }.product-table td { padding: 10px 14px; border-bottom: 1px solid #e8ecf0; color: #26384e; vertical-align: middle; }.product-table tbody tr:hover { background: #f6fbfa; }.product-table td:nth-child(1) { width: 72px; }.product-table td:nth-child(2) { width: 150px; }.product-table td:nth-child(5), .product-table td:nth-child(6), .product-table td:nth-child(7) { white-space: nowrap; }.product-table td small { display: block; margin-top: 3px; color: #7a8899; }.product-thumb { width: 48px; height: 48px; display: block; object-fit: contain; border: 1px solid #dce3e9; border-radius: 6px; background: white; }.product-thumb.placeholder { display: grid; place-items: center; color: #9aabba; background: #eef2f5; }.product-sku { font-family: Consolas, monospace; font-size: 12px; }.stock-value.empty { color: #c2312b; font-weight: 800; }.status-badge { display: inline-block; padding: 5px 9px; border-radius: 999px; color: #53657b; background: #e9edf2; font-size: 11px; font-weight: 750; }.status-active { color: #24743d; background: #e5f5e9; }.status-draft { color: #86630b; background: #fff3cc; }.status-archived { color: #667489; background: #e9edf2; }.table-message td { height: 180px; text-align: center; color: #6d7c8f; }.table-message .mini-spinner { display: inline-block; margin-right: 8px; vertical-align: middle; }.load-more-row { padding: 18px; text-align: center; background: #fafbfc; }
.table-sort { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; text-align: left; cursor: pointer; white-space: nowrap; }.table-sort:hover, .table-sort.is-active { color: #08756f; }.table-sort span { color: #8392a4; font-size: 10px; }.table-sort.is-active span { color: #0d8b86; }
.description-editor small, .detail-form label > small { color: #718095; font-size: 11px; font-weight: 400; line-height: 1.45; }.description-editor textarea { min-height: 230px; font-family: inherit; }
.variant-list-badge { width: fit-content; display: inline-flex; margin-top: 7px; padding: 4px 7px; border-radius: 999px; color: #76570b; background: #fff2bf; font-size: 10px; font-weight: 800; }.product-kind-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; color: #607086; font-size: 12px; }.product-kind-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #52647a; background: #e9edf2; font-weight: 800; }.product-kind-badge.is-variant { color: #76570b; background: #fff0b3; }.variant-overview { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid #dce3e9; border-left: 4px solid #8f9dad; border-radius: 7px; color: #5d6e82; background: #f5f7f9; }.variant-overview.is-variant { border-color: #ead48b; border-left-color: #d5a51d; background: #fff9e7; }.variant-overview strong { color: #24384f; font-size: 14px; }.variant-overview span { font-size: 12px; line-height: 1.45; }.selected-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }.selected-variant-options > span { min-width: 120px; display: grid; gap: 2px; padding: 8px 11px; border: 1px solid #b9d9d6; border-radius: 7px; background: #effaf9; }.selected-variant-options small { color: #718095; }.selected-variant-options strong { color: #0c6864; }
.single-list-badge { width: fit-content; display: inline-flex; margin-top: 7px; padding: 4px 7px; border-radius: 999px; color: #52647a; background: #edf1f5; font-size: 10px; font-weight: 800; }.variant-list-badge.has-issue, .product-kind-badge.has-issue { color: #9b2525; background: #ffe1e1; }.variant-integrity-warning { display: grid; gap: 4px; padding: 13px 16px; border: 1px solid #efaaaa; border-left: 4px solid #d74444; border-radius: 7px; color: #762424; background: #fff1f1; }.variant-integrity-warning span { font-size: 13px; line-height: 1.45; }.single-product-conversion { display: grid; gap: 11px; margin-top: 22px; padding: 18px; border: 1px solid #e4b1b1; border-radius: 9px; background: #fff7f7; }.single-product-conversion h3, .single-product-conversion p { margin: 0; }.single-product-conversion p { color: #66758a; font-size: 13px; line-height: 1.5; }.danger-button { width: fit-content; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid #b82f2f; border-radius: 5px; color: white; background: #b82f2f; font: inherit; font-weight: 750; cursor: pointer; }.danger-button:hover { background: #9d2424; }.danger-button:disabled { opacity: .5; cursor: not-allowed; }
.product-price-cell { display: grid; justify-items: start; gap: 4px; }.product-price-cell > small { margin: 0; color: #8a4b18; font-size: 10px; line-height: 1.35; white-space: normal; }.sale-list-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: white; background: #d34535; font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.product-detail-heading { align-items: end; }.product-detail-heading .eyebrow { display: block; margin-top: 11px; }.back-link { color: #0d7773; font-size: 13px; text-decoration: none; }.back-link:hover { text-decoration: underline; }.detail-loading { display: flex; align-items: center; gap: 9px; color: #52647a; }.detail-notice { margin: 20px 34px 0; }.product-detail-grid { display: grid; grid-template-columns: minmax(650px, 1.55fr) minmax(340px, .75fr); gap: 22px; padding: 28px 34px; }.detail-main, .detail-side { display: grid; align-content: start; gap: 22px; }.detail-card { margin: 0; padding: 23px; }.detail-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e7ec; }.detail-card-heading > div { display: flex; align-items: center; gap: 10px; }.detail-card-heading h2 { margin: 0; font-size: 19px; }.detail-card-heading small { color: #748398; text-align: right; }.step-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: white; background: #0d8b86; font-size: 12px; font-weight: 800; }.detail-form { display: grid; gap: 15px; }.detail-form.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.detail-form label { display: grid; gap: 6px; color: #52647a; font-size: 12px; font-weight: 650; }.detail-form > .wide { grid-column: 1 / -1; }.detail-form input, .detail-form select, .detail-form textarea { width: 100%; padding: 10px 11px; border: 1px solid #b9c4cf; border-radius: 5px; color: #1c2c40; background: white; font: inherit; }.detail-form textarea { resize: vertical; line-height: 1.5; }.detail-form input:focus, .detail-form select:focus, .detail-form textarea:focus { outline: 2px solid #75c3bf55; border-color: #0d8b86; }.variant-flags { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; color: #637489; background: #f2f5f7; border-radius: 5px; font-size: 12px; }.product-gallery { display: grid; gap: 12px; }.product-gallery-main { position: relative; margin: 0; overflow: hidden; border: 1px solid #dce3e9; border-radius: 9px; background: white; }.product-gallery-main > img { width: 100%; height: 330px; display: block; object-fit: contain; background: white; }.product-gallery-main figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border-top: 1px solid #e4e9ed; color: #718095; background: #fafbfc; font-size: 10px; }.product-gallery-main figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-gallery-main figcaption strong { flex: 0 0 auto; color: #40536a; }.gallery-navigation { position: absolute; top: 145px; width: 36px; height: 44px; display: grid; place-items: center; border: 1px solid #cad5dd; color: #164d58; background: #fffffff0; box-shadow: 0 3px 12px #1b2d4420; font-size: 28px; line-height: 1; cursor: pointer; }.gallery-navigation:hover { border-color: #0d8b86; color: #0d7773; background: white; }.gallery-navigation.previous { left: 9px; border-radius: 0 8px 8px 0; }.gallery-navigation.next { right: 9px; border-radius: 8px 0 0 8px; }.product-gallery-thumbnails { max-height: 224px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-color: #9bb5b3 #edf2f4; }.gallery-thumbnail { position: relative; min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 7px; background: #f3f6f8; cursor: pointer; }.gallery-thumbnail:hover { border-color: #9bc8c5; background: white; }.gallery-thumbnail.is-selected { border-color: #0d8b86; background: #e9f7f5; box-shadow: 0 0 0 2px #d5efec; }.gallery-thumbnail img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; background: white; }.gallery-thumbnail span { position: absolute; right: 5px; bottom: 5px; min-width: 18px; padding: 2px 4px; border-radius: 999px; color: white; background: #173b4dcc; font-size: 9px; font-weight: 800; text-align: center; }.gallery-hint { margin: -3px 0 0; color: #7a899a; font-size: 10px; text-align: center; }.image-remove-button { justify-self: end; padding: 7px 11px; border: 1px solid #c64b4b; border-radius: 5px; color: #9d2424; background: white; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }.image-remove-button:hover { color: white; background: #b82f2f; }.image-remove-button:disabled { opacity: .5; cursor: not-allowed; }.image-removal-confirmation { display: grid; gap: 7px; padding: 12px; border: 1px solid #e1a3a3; border-radius: 7px; color: #6f2525; background: #fff4f4; }.image-removal-confirmation span { font-size: 12px; line-height: 1.45; }.image-removal-confirmation > div { display: flex; flex-wrap: wrap; gap: 8px; }.image-empty { padding: 45px 15px; color: #718095; background: #f6f8fa; text-align: center; }.save-card h2 { margin: 0; }.save-card p { color: #65748a; line-height: 1.55; }.save-product-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; }.save-product-button .mini-spinner, .upload-image-button .mini-spinner, .pool-assign-button .mini-spinner, .image-removal-confirmation .mini-spinner { border-color: #83bbb8; border-top-color: white; }
.detail-action-error { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.detail-action-error > span { flex: 1; }.detail-action-error .secondary-button { flex: 0 0 auto; color: #8d2d28; border-color: #e4a19c; background: white; text-decoration: none; }
@media (max-width: 760px) { .detail-action-error { align-items: stretch; flex-direction: column; }.detail-action-error .secondary-button { text-align: center; } }
.image-pool-section, .image-upload-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid #dfe5eb; }.subsection-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.subsection-heading h3, .image-upload-section h3 { margin: 0; font-size: 16px; }.subsection-heading p, .image-upload-section > p { margin: 4px 0 0; color: #718095; font-size: 11px; }.image-search-row { display: flex; gap: 8px; margin-top: 14px; }.image-search-row input, .image-upload-section input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #b9c4cf; border-radius: 5px; font: inherit; }.pool-status { min-height: 20px; display: flex; align-items: center; gap: 8px; margin: 12px 0; color: #607086; font-size: 12px; }.pool-status .mini-spinner { flex: 0 0 auto; }.pool-images { max-height: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-y: auto; padding-right: 4px; }.pool-images article { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 7px; padding: 8px; border: 1px solid #d7dfe7; border-radius: 7px; background: #fafbfc; }.pool-images img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; background: white; }.pool-images article div { min-width: 0; display: grid; gap: 2px; }.pool-images strong, .pool-images small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.pool-images strong { color: #31445a; font-size: 11px; }.pool-images small { color: #7a899a; font-size: 9px; }.pool-assign-button { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border: 0; border-radius: 4px; color: white; background: #0d7773; font-size: 10px; font-weight: 700; cursor: pointer; }.pool-assign-button:disabled { opacity: .6; cursor: wait; }.image-upload-section { display: grid; gap: 10px; }.image-upload-section label { display: grid; gap: 5px; color: #52647a; font-size: 11px; font-weight: 650; }.selected-upload { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 5px; color: #31514f; background: #e8f5f3; font-size: 11px; }.selected-upload span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.upload-image-button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pool-image-details .pool-image-company { color: #8b98a7; }
.image-pool-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e0e6eb; }.image-pool-pagination .secondary-button { min-height: 36px; margin: 0; padding: 7px 10px; }.image-pool-pagination label { display: flex; align-items: center; gap: 6px; color: #52677b; font-size: 11px; font-weight: 700; }.image-pool-pagination input { width: 64px; height: 36px; padding: 6px; border: 1px solid #b9c4cf; border-radius: 5px; font: inherit; text-align: center; }
@media (max-width: 760px) { .image-search-row { flex-wrap: wrap; }.image-search-row input { flex-basis: 100%; }.image-search-row .secondary-button { flex: 1; }.image-pool-pagination { justify-content: stretch; }.image-pool-pagination .secondary-button, .image-pool-pagination label { flex: 1 1 auto; justify-content: center; } }
.marketplace-product-card { border-top: 4px solid #e2001a; }.marketplace-readiness-badge { padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }.marketplace-readiness-badge.is-ready { color: #22663a; background: #e6f5e9; }.marketplace-readiness-badge.needs-work { color: #805f0d; background: #fff2c8; }.marketplace-product-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px; border-radius: 9px; background: #f7f9fa; }.marketplace-channel-logo { display: grid; flex: 0 0 auto; place-items: center; width: 68px; height: 42px; border-radius: 7px; color: white; font-size: 13px; font-weight: 900; letter-spacing: .04em; }.marketplace-channel-logo.otto { background: #e2001a; }.marketplace-product-intro h3 { margin: 0 0 4px; font-size: 16px; }.marketplace-product-intro p { margin: 0; color: #68788b; font-size: 12px; line-height: 1.45; }.marketplace-mapping-form { margin-bottom: 20px; }.marketplace-requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.marketplace-requirement { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid #dce3e9; border-radius: 7px; background: #fafbfc; }.marketplace-requirement > span { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 900; }.marketplace-requirement div { min-width: 0; display: grid; gap: 2px; }.marketplace-requirement strong { color: #34475d; font-size: 12px; }.marketplace-requirement small { color: #718095; font-size: 10px; line-height: 1.35; }.marketplace-requirement.is-complete > span { color: white; background: #3a9a5a; }.marketplace-requirement.is-missing { border-color: #efd9a6; background: #fffaf0; }.marketplace-requirement.is-missing > span { color: #805f0d; background: #f4d77f; }.marketplace-save-button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 17px; }.marketplace-safety-note { margin: 11px 0 0; color: #718095; font-size: 11px; text-align: center; }
.marketplace-product-intro > div { flex: 1; }.catalog-refresh-button { flex: 0 0 auto; }.marketplace-catalog-status { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dbe3e9; border-radius: 6px; background: #f8fafb; }.marketplace-catalog-status div { display: grid; gap: 3px; }.marketplace-catalog-status strong { color: #3c4f64; font-size: 12px; }.marketplace-catalog-status small { color: #718095; font-size: 10px; line-height: 1.35; }.marketplace-picker { position: relative; display: grid; align-content: start; gap: 8px; }.marketplace-picker.wide { grid-column: 1 / -1; }.marketplace-selection { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #b9dfc4; border-radius: 6px; background: #edf8f0; }.marketplace-selection > span { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: white; background: #3c9e5d; font-size: 11px; font-weight: 900; }.marketplace-selection div { display: grid; gap: 2px; }.marketplace-selection strong { color: #25683c; font-size: 12px; }.marketplace-selection small { color: #62806c; font-size: 10px; }.marketplace-search-results { max-height: 245px; display: grid; overflow-y: auto; border: 1px solid #ccd6de; border-radius: 6px; background: white; box-shadow: 0 8px 18px #26384e17; }.marketplace-search-results button { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 0; border-bottom: 1px solid #e8edf0; color: #33475c; background: white; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }.marketplace-search-results button:last-child { border-bottom: 0; }.marketplace-search-results button:hover, .marketplace-search-results button.is-selected { color: #0b6e69; background: #eaf7f5; }.marketplace-search-results button small { color: #a14b45; }.category-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }.category-results button:nth-last-child(2) { border-bottom: 0; }
.marketplace-readiness-badge.is-neutral { color: #425a70; background: #eaf0f4; }
.product-marketplace-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 20px; }
.product-marketplace-tabs button { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 11px; border: 1px solid #d7e0e7; border-radius: 9px; color: #31465b; background: #f9fbfc; font: inherit; text-align: left; cursor: pointer; }
.product-marketplace-tabs button:hover { border-color: #91bab8; }
.product-marketplace-tabs button.is-selected { border-color: #168d84; background: #eaf7f5; box-shadow: inset 0 -3px #168d84; }
.product-marketplace-tabs button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #36566c; background: #e8eef2; font-weight: 900; }
.product-marketplace-tabs button > span.otto { color: white; background: #e2001a; }.product-marketplace-tabs button > span.amazon { color: #142f48; background: #ffb22e; }.product-marketplace-tabs button > span.kaufland { color: white; background: #d80018; }
.product-marketplace-tabs strong { min-width: 0; font-size: 12px; }.product-marketplace-tabs small { min-width: 0; overflow: hidden; color: #718197; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.product-marketplace-overview { display: grid; gap: 10px; }
.marketplace-overview-source, .marketplace-overview-channel { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid #dce4ea; border-radius: 10px; background: #fafcfd; }
.marketplace-overview-source { border-color: #b8ddd8; background: #eff9f7; }.marketplace-overview-channel.is-active { border-left: 4px solid #e2001a; }
.marketplace-overview-source div, .marketplace-overview-channel div { min-width: 0; }.marketplace-overview-source strong, .marketplace-overview-channel strong { color: #16314b; }.marketplace-overview-source p, .marketplace-overview-channel p { margin: 4px 0 0; color: #65768a; font-size: 11px; line-height: 1.45; }
.marketplace-channel-logo.shopify { background: #168d84; }.marketplace-channel-logo.amazon { color: #142f48; background: #ffb22e; }.marketplace-channel-logo.kaufland { background: #d80018; }
.marketplace-brand-logo { display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; box-sizing: border-box; border: 1px solid #dce4ea; border-radius: 8px; background: white; }
.marketplace-brand-logo img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; object-fit: contain; object-position: center; }
.marketplace-brand-logo.marketplace-shopify img { width: 72%; height: 72%; }
.marketplace-brand-logo.marketplace-channel-logo { width: 76px; height: 48px; padding: 8px 10px; color: inherit; background: white; }
.marketplace-brand-logo.marketplace-tab-logo { grid-row: 1 / span 2; width: 48px; height: 38px; padding: 7px 8px; }
.marketplace-brand-logo.marketplace-kaufland.marketplace-tab-logo { padding: 5px; }
.marketplace-brand-logo.marketplace-kaufland.marketplace-channel-logo { padding: 6px 8px; }
.marketplace-brand-logo.channel-mark { min-width: 54px; width: 54px; height: 38px; padding: 4px 6px; background: white; }
.marketplace-brand-logo.marketplace-logo { padding: 5px; background: white; }
.marketplace-brand-logo.marketplace-assignment-logo { width: 42px; height: 34px; padding: 4px; }
.channel-state { padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }.channel-state.active { color: #21663a; background: #dff3e5; }.channel-state.planned { color: #536779; background: #eaf0f4; }
.marketplace-coming-soon { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; border: 1px solid #dbe4ea; border-radius: 10px; background: #f8fafb; }.marketplace-coming-soon h3 { margin: 5px 0 7px; }.marketplace-coming-soon p { margin: 0; color: #64768a; line-height: 1.5; }.marketplace-coming-soon ul { margin: 14px 0 0; padding-left: 18px; color: #4f6478; line-height: 1.7; font-size: 12px; }
.ai-central-hint { display: grid; gap: 3px; margin-bottom: 13px; padding: 10px 12px; border-left: 4px solid #168d84; border-radius: 6px; color: #53697d; background: #edf8f6; font-size: 11px; }.ai-central-hint strong { color: #174b50; font-size: 12px; }
.order-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 28px 34px 18px; }.order-summary article { display: grid; gap: 7px; padding: 20px 22px; border: 1px solid #d9e0e8; border-radius: 10px; background: white; box-shadow: 0 7px 20px #1b2d440b; }.order-summary span { color: #66768a; font-size: 12px; }.order-summary strong { color: #0d7773; font-size: 27px; }.order-summary small { color: #7b899a; }.order-workspace { margin: 0 34px 28px; border: 1px solid #d9e0e8; border-radius: 12px; background: white; box-shadow: 0 7px 20px #1b2d440b; overflow: hidden; }.order-actions { display: flex; align-items: end; gap: 14px; padding: 20px; background: #f8fafb; }.order-actions label { flex: 1; display: grid; gap: 6px; color: #52647a; font-size: 12px; font-weight: 650; }.order-actions input { height: 42px; padding: 9px 11px; border: 1px solid #b9c4cf; border-radius: 5px; font: inherit; }.order-export-button { min-width: 265px; min-height: 42px; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; }.order-export-button .mini-spinner { border-color: #83bbb8; border-top-color: white; }.order-export-hint { padding: 13px 20px; border-top: 1px solid #e0e5eb; border-bottom: 1px solid #e0e5eb; color: #5d4b15; background: #fff8df; font-size: 12px; }.order-notice { margin: 16px 20px 0; }.order-list-heading { display: flex; justify-content: space-between; padding: 18px 20px 12px; color: #52647a; font-size: 13px; }.order-list-heading span { color: #7a8899; }.order-table td { white-space: nowrap; }.order-table td:nth-child(3) { min-width: 220px; white-space: normal; }.order-number { color: #0d7773; }
.shipment-panel { padding: 0; overflow: hidden; }.shipment-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; padding: 24px; border-bottom: 1px solid #e0e6eb; }.shipment-heading h2 { margin: 5px 0 6px; }.shipment-heading p { margin: 0; color: #68788c; }.shipment-safety { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; color: #16623e; background: #e6f5eb; border: 1px solid #b4dfc1; font-size: 11px; font-weight: 750; }.shipment-upload { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(260px, .7fr); gap: 18px; align-items: end; padding: 22px 24px; background: #f8fafb; }.shipment-upload label { display: grid; gap: 8px; color: #52647a; font-size: 12px; font-weight: 700; }.shipment-upload input { padding: 10px; border: 1px solid #bdc7d2; border-radius: 5px; background: white; }.shipment-upload small { color: #7a899a; font-weight: 400; }.shipment-template-box { display: grid; gap: 8px; }.shipment-template-box small { color: #6f7f91; font-size: 11px; line-height: 1.4; }.shipment-template-button { width: 100%; text-decoration: none; }.shipment-file-name { overflow: hidden; padding: 11px 13px; border: 1px solid #d6dde5; border-radius: 5px; color: #506176; background: white; text-overflow: ellipsis; white-space: nowrap; }.shipment-notice { margin: 18px 24px 0; }.shipment-preview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px 24px; }.shipment-preview-summary article { display: grid; gap: 5px; padding: 15px; border: 1px solid #dbe2e9; border-radius: 8px; background: #fbfcfd; }.shipment-preview-summary span { color: #6a798d; font-size: 11px; }.shipment-preview-summary strong { color: #0d7773; font-size: 23px; }.shipment-warnings { margin: 0 24px 18px; padding: 13px 13px 13px 34px; color: #765a12; background: #fff8df; }.shipment-table-wrap { max-height: 360px; margin: 0 24px; overflow: auto; border: 1px solid #dce3e9; }.shipment-table th { position: sticky; top: 0; }.shipment-more { margin: 10px 24px; color: #718095; font-size: 12px; }.shipment-confirmation { display: grid; gap: 11px; margin-top: 20px; padding: 20px 24px 24px; border-top: 1px solid #e0e6eb; background: #f8fafb; }.shipment-confirmation label { display: flex; align-items: center; gap: 8px; color: #52647a; font-size: 13px; }.shipment-final-check { font-weight: 750; }.shipment-send-button { width: fit-content; min-width: 340px; display: flex; align-items: center; justify-content: center; gap: 8px; }.shipment-send-button .mini-spinner { border-color: #83bbb8; border-top-color: white; }
.protocol-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 28px 34px 18px; }.protocol-summary article { display: grid; gap: 6px; padding: 20px 22px; border: 1px solid #d9e0e8; border-radius: 10px; background: white; box-shadow: 0 7px 20px #1b2d440b; }.protocol-summary span { color: #66768a; font-size: 12px; }.protocol-summary strong { color: #0d7773; font-size: 27px; }.protocol-summary small { color: #7b899a; }.protocol-summary .protocol-errors strong { color: #c43b35; }.protocol-workspace { margin: 0 34px 28px; border: 1px solid #d9e0e8; border-radius: 12px; background: white; box-shadow: 0 7px 20px #1b2d440b; overflow: hidden; }.protocol-toolbar { display: flex; align-items: end; gap: 12px; padding: 20px; background: #f8fafb; border-bottom: 1px solid #dfe5eb; }.protocol-toolbar label { display: grid; gap: 6px; color: #52647a; font-size: 12px; font-weight: 650; }.protocol-toolbar input, .protocol-toolbar select { height: 40px; padding: 8px 11px; border: 1px solid #b9c4cf; border-radius: 5px; background: white; font: inherit; }.protocol-search { flex: 1; }.protocol-toolbar select { min-width: 175px; }.protocol-filter-button { height: 40px; margin: 0; }.protocol-notice { margin: 18px 20px 0; }.protocol-list-heading { display: flex; justify-content: space-between; padding: 18px 20px 12px; color: #52647a; font-size: 13px; }.protocol-list-heading span { color: #7a8899; }.protocol-table-wrap { overflow-x: auto; }.protocol-table td { vertical-align: top; }.protocol-table td:first-child, .protocol-table td:nth-child(3), .protocol-table td:nth-child(5) { white-space: nowrap; }.protocol-table td:last-child { min-width: 320px; }.protocol-category { color: #245b75; font-weight: 700; }.protocol-outcome { display: inline-block; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }.outcome-success { color: #27653b; background: #e5f5e9; }.outcome-warning { color: #795b0d; background: #fff3cc; }.outcome-error { color: #9a2f2a; background: #ffe8e6; }.outcome-neutral { color: #59697d; background: #e9edf2; }.protocol-table details { margin-top: 7px; color: #607086; font-size: 11px; }.protocol-table summary { color: #0d7773; cursor: pointer; }.protocol-table details p { margin: 6px 0 0; line-height: 1.45; white-space: normal; }
footer { display: flex; justify-content: space-between; padding: 12px 24px; background: white; border-top: 1px solid #d6dde5; color: #65748a; font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1500px) { .topbar { height: auto; min-height: 92px; flex-wrap: wrap; gap: 10px 12px; padding: 12px 18px 0; }.main-nav { order: 5; width: 100%; height: 52px; overflow-x: auto; }.main-nav a { padding: 0 13px; white-space: nowrap; }.company-control { margin-left: auto; }.company-control select { min-width: 190px; } }
@media (max-width: 1200px) { .roadmap-panel, .product-detail-grid, .product-create-layout, .settings-layout { grid-template-columns: 1fr; }.settings-save-card, .create-confirm-card { position: static; }.metrics { grid-template-columns: repeat(2, 1fr); }.channel-overview-grid { grid-template-columns: 1fr; }.product-toolbar { flex-wrap: wrap; }.product-search { min-width: 380px; }.color-options { grid-template-columns: repeat(3, minmax(120px, 1fr)); } }
@media (max-width: 760px) { .page-heading { align-items: flex-start; gap: 18px; flex-direction: column; }.heading-actions, .color-picker-toolbar, .variant-group-heading, .variant-custom-value, .channel-overview-heading, .order-values-heading { width: 100%; align-items: stretch; flex-direction: column; }.channel-overview-heading small, .order-values-heading > small { max-width: none; text-align: left; }.channel-card-values, .metrics, .order-values > div:last-child, .order-summary, .protocol-summary, .shipment-preview-summary, .detail-form.two-columns, .settings-form-grid, .marketplace-requirements { grid-template-columns: 1fr; }.channel-card-values > div { border-left: 0; border-top: 1px solid #e0e6eb; }.channel-card-values > div:first-child { border-top: 0; }.detail-form > .wide, .settings-form-grid label.wide { grid-column: auto; }.product-detail-grid, .product-create-layout, .admin-grid, .settings-layout { padding: 18px; }.settings-card-heading, .settings-actions { align-items: stretch; flex-direction: column; }.product-search { min-width: 100%; }.product-toolbar label { width: 100%; }.order-actions, .protocol-toolbar, .shipment-heading { align-items: stretch; flex-direction: column; }.protocol-toolbar label { width: 100%; }.order-export-button, .shipment-send-button { width: 100%; min-width: 0; }.shipment-upload { grid-template-columns: 1fr; }.color-options, .color-palette-results { grid-template-columns: repeat(2, minmax(100px, 1fr)); }.user-menu { display: none; } }
@media (max-width: 760px) { .shopify-setup-heading { align-items: stretch; flex-direction: column; }.shopify-setup-steps { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .company-heading-main { align-items: flex-start; }.company-logo-card, .company-logo-fallback { width: 92px; height: 72px; } }

/* Global marketplace foundation */
.marketplace-heading { align-items: flex-end; }
.foundation-badge { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid #b9dcd8; border-radius: 999px; background: #edf9f7; color: #16736f; font-size: 13px; font-weight: 700; }
.marketplace-flow { display: grid; grid-template-columns: minmax(190px, .7fr) 44px minmax(230px, .9fr) 44px minmax(260px, 1.4fr); align-items: stretch; gap: 12px; }
.flow-source, .flow-core, .flow-targets { padding: 22px; border: 1px solid #d8e1e8; border-radius: 12px; background: #f9fbfc; }
.flow-source, .flow-core { display: grid; gap: 5px; align-content: center; }
.flow-source span, .flow-core span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 7px; border-radius: 10px; background: #168d84; color: white; font-weight: 900; }
.flow-source small, .flow-core small { color: #68788c; }
.flow-core { border-color: #9fd1cd; background: linear-gradient(145deg, #e8f7f5, #f7fbfb); }
.marketplace-flow > i { display: grid; place-items: center; color: #5c7188; font-size: 26px; font-style: normal; }
.flow-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.flow-targets span { display: grid; place-items: center; min-height: 62px; padding: 10px; border: 1px solid #d7dee7; border-radius: 9px; background: white; font-weight: 700; text-align: center; }
.flow-arrow { display: grid; place-items: center; color: #5c7188; font-size: 26px; }
.marketplace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 34px 28px; }
.marketplace-grid > .panel { margin: 0; }
.marketplace-module { padding: 22px; border: 1px solid #d8e1e8; border-top: 4px solid #95a3b3; border-radius: 12px; background: white; }
.marketplace-module.is-available { border-top-color: #168d84; }
.marketplace-module.is-ready { border-top-color: #e35b51; }
.marketplace-module header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.marketplace-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #edf3f5; color: #265568; font-weight: 900; }
.marketplace-module h2 { margin: 0 0 4px; font-size: 19px; }
.module-stage { color: #66788c; font-size: 12px; font-weight: 700; }
.marketplace-module p { margin: 0; color: #65748a; line-height: 1.5; }
.master-source-note { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #e9f7f5; color: #13716c; font-size: 13px; font-weight: 700; }
.feature-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.feature-list span { padding: 6px 9px; border-radius: 6px; background: #f0f4f7; color: #41556b; font-size: 12px; }
.marketplace-module footer { padding-top: 14px; border-top: 1px solid #e5eaef; color: #728195; font-size: 13px; }
.assignment-preview { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center; }
.assignment-example { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr; gap: 8px; align-items: center; }
.assignment-example span, .assignment-example strong { padding: 12px; border: 1px solid #d7e0e7; border-radius: 8px; background: #f9fbfc; text-align: center; }
.assignment-example i, .assignment-example b { color: #789; font-style: normal; }

@media (max-width: 1000px) { .marketplace-flow { grid-template-columns: 1fr; }.marketplace-flow > i { transform: rotate(90deg); }.marketplace-grid, .assignment-preview { grid-template-columns: 1fr; }.assignment-example { grid-template-columns: 1fr; }.assignment-example i, .assignment-example b { text-align: center; } }
@media (max-width: 760px) { .flow-targets { grid-template-columns: 1fr; }.foundation-badge { white-space: normal; }.marketplace-grid { padding: 0 18px 18px; } }

/* Marketplace company and feature assignments */
.assignment-heading .secondary-button { text-decoration: none; }
.assignment-notice { margin: 22px 34px 0; }
.assignment-admin-layout { display: grid; grid-template-columns: minmax(250px, .55fr) minmax(650px, 1.7fr); gap: 22px; padding: 28px 34px; }
.assignment-admin-layout > .panel, .assignment-editor > .panel { margin: 0; }
.assignment-companies { align-self: start; }
.assignment-companies h2, .assignment-marketplaces h2, .assignment-features h2 { margin: 7px 0 8px; }
.assignment-companies > p, .assignment-marketplaces > p, .assignment-features p { color: #68788b; line-height: 1.5; }
.company-assignment-list { display: grid; gap: 9px; margin-top: 20px; }
.company-assignment-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid #d8e0e7; border-radius: 9px; background: #f9fbfc; color: #26384c; text-align: left; cursor: pointer; }
.company-assignment-card:hover { border-color: #88bdb9; }
.company-assignment-card.is-selected { border-color: #168d84; background: #e9f7f5; box-shadow: inset 3px 0 #168d84; }
.company-assignment-card > span:last-child { display: grid; gap: 3px; }
.company-assignment-card small { color: #718197; }
.company-initial { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; background: #e8eef2; color: #2f596a; font-weight: 900; }
.company-assignment-card.is-selected .company-initial { background: #168d84; color: white; }
.assignment-editor { display: grid; gap: 22px; }
.marketplace-assignment-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.marketplace-assignment-tabs button { display: grid; gap: 4px; justify-items: start; padding: 14px; border: 1px solid #d7e0e7; border-radius: 10px; background: #f9fbfc; color: #31465b; cursor: pointer; }
.marketplace-assignment-tabs button:hover { border-color: #93bdbb; }
.marketplace-assignment-tabs button.is-selected { border-color: #168d84; background: #e9f7f5; }
.marketplace-assignment-tabs button > span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 5px; border-radius: 8px; background: #e7edf1; font-weight: 900; }
.marketplace-assignment-tabs button.is-selected > span { background: #168d84; color: white; }
.marketplace-assignment-tabs small { color: #718197; }
.assignment-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.assignment-count { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; background: #edf3f5; color: #4e6579; font-size: 12px; font-weight: 700; }
.planned-module-note { margin: 18px 0; padding: 13px 15px; border-left: 4px solid #d29a35; border-radius: 7px; background: #fff8e8; color: #75571f; }
.assignment-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.assignment-feature-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 76px; padding: 14px; border: 1px solid #d9e1e8; border-radius: 10px; background: #fafcfd; cursor: pointer; }
.assignment-feature-card:has(input:disabled) { cursor: not-allowed; opacity: .72; }
.assignment-feature-card.is-enabled { border-color: #67aca7; background: #edf9f7; }
.assignment-feature-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.feature-check { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #bac7d1; border-radius: 8px; color: white; font-weight: 900; }
.assignment-feature-card.is-enabled .feature-check { border-color: #168d84; background: #168d84; }
.assignment-feature-card > span:last-child { display: grid; min-width: 0; gap: 4px; }
.assignment-feature-card small { color: #718197; line-height: 1.35; }
.assignment-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e3e8ed; }
.assignment-actions > div { display: flex; align-items: center; gap: 14px; }
.assignment-actions > div > span { color: #718197; font-size: 13px; }
.danger-secondary-button { padding: 10px 14px; border: 1px solid #d9aaa6; border-radius: 5px; background: white; color: #a53e37; font: inherit; font-weight: 700; cursor: pointer; }
.danger-secondary-button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 1100px) { .assignment-admin-layout { grid-template-columns: 1fr; }.company-assignment-list { grid-template-columns: repeat(3, 1fr); }.assignment-companies { position: static; }.marketplace-assignment-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .assignment-admin-layout { padding: 18px; }.company-assignment-list, .marketplace-assignment-tabs, .assignment-feature-grid { grid-template-columns: 1fr; }.assignment-section-heading, .assignment-actions, .assignment-actions > div { align-items: stretch; flex-direction: column; }.assignment-actions .primary-button, .danger-secondary-button { width: 100%; }.assignment-notice { margin: 18px; } }

/* Employee onboarding */
.notice.warning { border-left-color: #d29a35; background: #fff8e8; color: #75571f; }
.employee-email-note { display: grid; gap: 4px; margin-top: 16px; padding: 13px 15px; border-left: 4px solid #168d84; border-radius: 7px; background: #edf9f7; color: #315d5a; }
.employee-email-note span { font-size: 13px; line-height: 1.45; }
.user-create .form-grid { align-items: start; }
.user-create .form-grid label { align-self: start; align-content: start; grid-template-rows: auto 40px auto; }
.user-create .form-grid input { box-sizing: border-box; width: 100%; height: 40px; }
.user-create .form-grid small { margin-top: 1px; line-height: 1.35; }

/* OTTO category attributes */
.otto-attribute-editor { display: grid; gap: 16px; margin-top: 20px; padding: 18px; border: 1px solid #cddfe0; border-radius: 10px; background: #f6fbfa; }
.otto-attribute-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.otto-attribute-editor h3 { margin: 3px 0 5px; color: #102944; font-size: 18px; }
.otto-attribute-editor header p { margin: 0; color: #60758a; font-size: 12px; }
.section-kicker { color: #087f79; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.attribute-progress { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #fff0ce; color: #8b650f; font-size: 11px; font-weight: 800; }
.attribute-progress.is-complete { background: #e4f5e9; color: #287341; }
.otto-attribute-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.otto-attribute-grid label { display: grid; align-content: start; gap: 6px; padding: 12px; border: 1px solid #d7e1e6; border-radius: 8px; background: white; }
.otto-attribute-grid label.is-missing { border-left: 4px solid #d69c31; }
.otto-attribute-grid label.is-complete { border-left: 4px solid #45a166; }
.otto-attribute-grid label > span { color: #2e475e; font-size: 11px; font-weight: 800; }
.attribute-input-row { display: flex; align-items: stretch; }
.attribute-input-row input { min-width: 0; flex: 1; border-radius: 5px 0 0 5px; }
.attribute-input-row b { display: grid; place-items: center; min-width: 48px; padding: 0 9px; border: 1px solid #bcc9d2; border-left: 0; border-radius: 0 5px 5px 0; background: #edf2f5; color: #53697c; font-size: 11px; }
.otto-attribute-grid label small { color: #718197; font-size: 10px; line-height: 1.4; }
.otto-additional-requirements { padding-top: 12px; border-top: 1px solid #d8e4e5; color: #53697c; font-size: 11px; }
.otto-additional-requirements summary { cursor: pointer; font-weight: 800; }
.otto-additional-requirements ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.5; }
@media (max-width: 760px) { .otto-attribute-grid { grid-template-columns: 1fr; }.otto-attribute-editor > header { flex-direction: column; }.attribute-progress { align-self: flex-start; } }
@media (max-width: 900px) { .product-marketplace-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }.marketplace-overview-source, .marketplace-overview-channel { grid-template-columns: 68px minmax(0, 1fr); }.marketplace-overview-source > :last-child, .marketplace-overview-channel > :last-child { grid-column: 2; justify-self: start; } }
@media (max-width: 560px) { .product-marketplace-tabs { grid-template-columns: 1fr; }.marketplace-coming-soon { grid-template-columns: 1fr; }.marketplace-overview-source, .marketplace-overview-channel { grid-template-columns: 1fr; }.marketplace-overview-source > :last-child, .marketplace-overview-channel > :last-child { grid-column: 1; } }

/* Safe Excel product import */
.excel-import-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 34px 40px; }
.excel-import-step, .excel-import-preview, .excel-import-result { min-width: 0; }
.excel-import-preview, .excel-import-result { grid-column: 1 / -1; }
.excel-file-picker { display: grid; gap: 8px; margin-top: 16px; font-weight: 700; }
.excel-file-picker input[type="file"] { box-sizing: border-box; width: 100%; padding: 13px; border: 1px dashed #bccbd4; border-radius: 9px; background: #f8fbfc; }
.excel-file-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; padding: 13px 15px; border-radius: 9px; background: #edf8f6; color: #176a65; }
.excel-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.excel-summary-grid > div { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid #d8e1e7; border-radius: 9px; background: #f8fafc; }
.excel-summary-grid strong { font-size: 22px; }
.excel-summary-grid .has-errors { border-color: #ef9a9a; background: #fff4f4; color: #a92525; }
.excel-summary-grid .is-ready { border-color: #8fd0ae; background: #effaf3; color: #19723f; }
.excel-issue-list, .excel-result-list { display: grid; gap: 9px; margin: 16px 0; }
.excel-issue, .excel-result-list > div { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 6px 16px; padding: 12px 14px; border-radius: 8px; }
.excel-issue.error, .excel-result-list .is-failure { background: #fff1f1; color: #9f2424; }
.excel-issue.warning { background: #fff8e5; color: #835d08; }
.excel-result-list .is-success { background: #eef9f2; color: #176b3d; }
.excel-result-list small { grid-column: 2; }
.excel-preview-table-wrap { overflow: auto; max-height: 608px; border: 1px solid #d8e1e7; border-radius: 9px; }
.excel-preview-table { min-width: 1024px; }
.excel-preview-table small { display: block; margin-top: 3px; color: #718197; }
.excel-more-rows, .excel-import-confirm > small { color: #718197; }
.excel-import-confirm { grid-column: 1 / -1; max-width: 768px; }
@media (max-width: 800px) { .excel-import-layout, .excel-summary-grid { grid-template-columns: 1fr; }.excel-import-layout { padding: 18px; }.excel-import-preview, .excel-import-result, .excel-import-confirm { grid-column: auto; } }
.link-button { display: block; margin-top: 5px; padding: 0; border: 0; background: transparent; color: #0d7773; font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }

/* Company-specific order channels */
.order-channel-tabs { display: flex; flex-wrap: wrap; gap: 9px; padding: 18px 20px 0; }
.order-channel-tabs button { display: flex; align-items: center; gap: 8px; min-width: 112px; padding: 8px 12px; border: 1px solid #cbd6de; border-radius: 999px; background: white; color: #344b61; font: inherit; font-weight: 750; cursor: pointer; }
.order-channel-tabs button:hover { border-color: #73aaa6; }
.order-channel-tabs button.is-selected { border-color: #168d84; background: #e9f7f5; color: #0d706b; }
.order-channel-tabs strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; background: #edf1f4; font-size: 12px; }
.order-channel-tabs button.is-selected strong { background: #168d84; color: white; }
.order-tab-logo { width: 30px; height: 26px; padding: 3px 5px; border: 0; border-radius: 6px; }
.order-channel-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; border: 1px solid #dce4ea; border-radius: 7px; background: white; color: #40566a; font-size: 11px; font-weight: 850; }
.order-channel-badge.shopify { color: #24704d; }
.order-channel-badge.otto { color: #b6000c; }
.order-row-logo { width: 34px; height: 25px; padding: 3px 5px; border: 0; border-radius: 5px; }

/* Safe product bulk editing and sales-channel publishing */
.product-bulk-panel { margin: 18px 20px 4px; padding: 20px; border: 1px solid #bad9d6; border-radius: 11px; background: linear-gradient(145deg, #f4fbfa, #fff); }
.product-bulk-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.product-bulk-panel h2 { margin: 4px 0 5px; color: #102944; font-size: 20px; }
.product-bulk-panel header p { margin: 0; color: #64768a; font-size: 13px; }
.product-bulk-controls { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(280px, 1.2fr) auto; align-items: end; gap: 14px; margin-top: 18px; }
.product-bulk-controls label { display: grid; gap: 6px; color: #425970; font-size: 12px; font-weight: 750; }
.product-bulk-controls select, .product-bulk-controls input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #b8c7d1; border-radius: 6px; background: white; color: #102944; font: inherit; }
.product-bulk-controls small { color: #718197; font-weight: 400; line-height: 1.35; }
.bulk-preview-button { min-height: 40px; }
.product-bulk-panel > .dashboard-error, .product-bulk-panel > .success-message { margin: 16px 0 0; }
.bulk-confirmation { display: grid; gap: 9px; margin-top: 16px; padding: 16px; border-left: 4px solid #168d84; border-radius: 8px; background: #eaf7f5; color: #294c59; }
.bulk-confirmation p { margin: 0; line-height: 1.5; }
.bulk-confirmation .bulk-final-check { display: flex; align-items: center; gap: 9px; margin: 5px 0; font-weight: 750; }
.bulk-confirmation .primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-width: 260px; }
.product-select-column { width: 44px; text-align: center; }
.product-select-column input, .bulk-final-check input { width: 17px; height: 17px; accent-color: #168d84; cursor: pointer; }
@media (max-width: 950px) { .product-bulk-controls { grid-template-columns: 1fr; }.bulk-preview-button { width: 100%; }.product-bulk-panel > header { flex-direction: column; } }
@media (max-width: 760px) { .product-bulk-panel { margin: 14px; }.bulk-confirmation .primary-button { width: 100%; min-width: 0; } }

/* Shopify sales-channel publications on a product */
.shopify-publication-panel { display: grid; gap: 10px; padding: 13px 15px; border: 1px solid #cfe0d7; border-left: 4px solid #279b67; border-radius: 9px; background: #fbfdfc; }
.shopify-publication-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.shopify-publication-panel h3, .shopify-publication-panel p { margin: 0; }
.shopify-publication-panel header p { margin-top: 3px; color: #697b8e; font-size: 11px; }
.shopify-publication-list { display: flex; flex-wrap: wrap; gap: 7px; }
.shopify-publication-row { min-width: 135px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #d7e0e6; border-radius: 7px; background: white; cursor: pointer; }
.shopify-publication-row.is-published { border-color: #80c8a5; background: #eef9f3; }
.shopify-publication-row strong { color: #17314a; font-size: 12px; }
.shopify-publication-row input { width: 18px; height: 18px; margin: 0; accent-color: #279b67; cursor: pointer; }
.shopify-publication-confirmation { display: grid; gap: 11px; padding: 15px; border-left: 4px solid #168d84; border-radius: 8px; background: #eaf7f5; color: #294c59; }
.shopify-publication-confirmation ul { margin: 0; padding-left: 20px; line-height: 1.55; }
.shopify-publication-confirmation > label { display: flex; align-items: center; gap: 9px; font-weight: 750; }
.shopify-publication-confirmation > label input { width: 17px; height: 17px; accent-color: #168d84; }
.publication-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.publication-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; }
@media (max-width: 760px) { .shopify-publication-panel > header { align-items: stretch; flex-direction: column; }.shopify-publication-list { grid-template-columns: 1fr; }.publication-actions button { width: 100%; } }

/* Description preview, AI comparison and Shopify product metafields */
.description-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 2px; }
.description-toolbar button { padding: 7px 10px; border: 1px solid #c6d1d9; border-radius: 6px; background: #f8fafb; color: #314a61; font: inherit; font-size: 12px; cursor: pointer; }
.description-toolbar button:hover { border-color: #168d84; color: #0d706b; }
.description-preview { display: grid; gap: 8px; margin-top: 7px; padding: 14px; border: 1px solid #d8e1e7; border-radius: 8px; background: white; }
.description-preview > span { color: #0d7773; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.description-preview > div { color: #1b3048; line-height: 1.55; }
.description-preview p { margin: 0 0 9px; }.description-preview ul { margin: 5px 0 9px; padding-left: 22px; }
.ai-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ai-comparison section { display: grid; gap: 8px; padding: 13px; border: 1px solid #d7e0e7; border-radius: 8px; background: #f8fafb; }
.ai-comparison section.is-suggestion { border-color: #8bcac4; background: #eff9f8; }
.ai-comparison header { display: grid; gap: 2px; }.ai-comparison header span { color: #748398; font-size: 11px; }
.ai-comparison textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #c5d0d8; border-radius: 6px; background: white; color: #20364d; font: inherit; line-height: 1.5; resize: vertical; }
.product-metafield-section { margin-top: 18px; border-top: 1px solid #dbe3e8; }
.product-metafield-section > summary { padding: 15px 2px 4px; color: #14304a; cursor: pointer; }
.product-metafield-section > summary > span { display: inline-grid; gap: 3px; margin-left: 6px; }.product-metafield-section > summary small { color: #718197; font-weight: 400; }
.product-metafield-section[open] { display: grid; gap: 14px; }
.product-metafield-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.product-metafield-grid .metafield-editor { display: grid; align-content: start; gap: 6px; padding: 12px; border: 1px solid #d8e1e7; border-radius: 8px; background: #fbfcfd; color: #40576e; font-size: 12px; font-weight: 750; }
.product-metafield-grid .metafield-editor.is-readonly { background: #f2f4f6; }
.product-metafield-grid .metafield-editor.is-wide { grid-column: 1 / -1; }
.product-metafield-grid .is-large-text { order: 1; }
.product-metafield-grid .is-large-text textarea { min-height: 230px; resize: vertical; line-height: 1.5; }
.product-metafield-grid .material-editor { order: 2; grid-column: 1; }
.product-metafield-grid .dimensions-editor { order: 3; grid-column: 2; }
.product-metafield-grid .age-editor { order: 4; grid-column: 2; }
.product-metafield-grid .warning-editor { order: 5; }
.material-picker { border: 1px solid #bdc9d2; border-radius: 7px; background: #fff; overflow: hidden; }
.material-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 11px; color: #1e344a; cursor: pointer; list-style: none; }
.material-picker > summary::-webkit-details-marker { display: none; }
.material-picker > summary::after { content: "▾"; flex: 0 0 auto; color: #0b827d; font-size: 15px; }
.material-picker[open] > summary::after { transform: rotate(180deg); }
.material-picker > summary span { font-weight: 750; }
.material-picker > summary small { margin-left: auto; overflow: hidden; color: #607489; text-overflow: ellipsis; white-space: nowrap; }
.material-picker-content { display: grid; gap: 9px; padding: 0 10px 10px; border-top: 1px solid #e2e8ec; }
.material-picker-content .material-search { margin-top: 10px; }
.warning-editor details { display: grid; gap: 10px; }.warning-editor summary { cursor: pointer; color: #14304a; }.warning-editor summary small { margin-left: 8px; }
.warning-option-list { max-height: 360px; display: grid; gap: 5px; overflow-y: auto; padding: 8px; border: 1px solid #d5dfe6; border-radius: 6px; background: white; }
.warning-option-list label, .material-option-list label { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 5px; color: #263d53; font-weight: 500; line-height: 1.4; cursor: pointer; }.warning-option-list label:hover, .material-option-list label:hover { background: #eef7f6; }
.warning-option-list input, .material-option-list input { width: 17px; min-height: 17px; flex: 0 0 17px; margin-top: 1px; }
.material-option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.material-search { margin-bottom: 8px; }
.metafield-confirmation > span { display: block; margin-top: 4px; color: #536b80; }
.requirement-edit-link { margin-left: auto; padding: 7px 10px; border: 1px solid #c79b28; border-radius: 6px; color: #75570d; background: transparent; font: inherit; font-weight: 750; text-decoration: none; white-space: nowrap; cursor: pointer; }
.requirement-edit-link:hover { background: #fff4d1; }
.unsaved-changes-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: #0b1d2e99; backdrop-filter: blur(2px); }
.unsaved-changes-dialog { width: min(760px, 100%); padding: 26px; border-radius: 12px; background: white; box-shadow: 0 24px 70px #07152266; }
.unsaved-changes-dialog h2 { margin: 0 0 9px; color: #102a46; }
.unsaved-changes-dialog p { margin: 0 0 22px; color: #586d82; line-height: 1.55; }
.unsaved-changes-dialog > div { display: grid; grid-template-columns: repeat(3, 184px); justify-content: start; gap: 10px; }
.unsaved-changes-dialog > div > button { width: 184px; height: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 10px 12px; line-height: 1.25; text-align: center; white-space: nowrap; }
.danger-button { padding: 10px 14px; border: 1px solid #c54a4a; border-radius: 5px; color: #9b2525; background: white; font: inherit; font-weight: 750; cursor: pointer; }
.danger-button:hover { color: white; background: #b83232; }
@media (max-width: 720px) { .unsaved-changes-dialog > div { grid-template-columns: 1fr; } .unsaved-changes-dialog > div > button { width: 100%; white-space: normal; } }
.otto-search-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.otto-search-suggestions button { padding: 6px 10px; border: 1px solid #d5ad43; border-radius: 999px; color: #6d520c; background: white; font: inherit; font-weight: 700; cursor: pointer; }
.otto-search-suggestions button:hover { background: #fff3ca; }
.product-metafield-grid input, .product-metafield-grid textarea, .product-metafield-grid select { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #bdc9d2; border-radius: 6px; background: white; color: #1e344a; font: inherit; }
.product-metafield-grid input[readonly] { color: #65768a; background: #e9edf0; }
.product-metafield-grid small { color: #768599; font-weight: 400; line-height: 1.4; }
.metafield-confirmation { display: grid; gap: 11px; padding: 15px; border-left: 4px solid #168d84; border-radius: 8px; background: #eaf7f5; }
.metafield-confirmation > label { display: flex; align-items: center; gap: 9px; color: #294c59; font-weight: 750; }.metafield-confirmation > label input { width: 17px; height: 17px; accent-color: #168d84; }
@media (max-width: 760px) { .ai-comparison, .product-metafield-grid, .material-option-list { grid-template-columns: 1fr; } .product-metafield-grid .material-editor, .product-metafield-grid .dimensions-editor, .product-metafield-grid .age-editor { grid-column: 1; grid-row: auto; } }

/* Safe OTTO product-transfer preview */
.otto-transfer-panel { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid #d8e1e7; border-top: 4px solid #e30613; border-radius: 10px; background: #fff; }
.otto-transfer-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.otto-transfer-panel h3, .otto-transfer-panel p { margin: 0; }
.otto-transfer-panel header p { margin-top: 5px; color: #6d7c90; font-size: 12px; }
.otto-transfer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.otto-transfer-summary article { display: grid; gap: 4px; padding: 13px; border: 1px solid #dce3e9; border-radius: 7px; background: #f8fafb; }
.otto-transfer-summary span { color: #718095; font-size: 11px; }
.otto-transfer-summary strong { color: #12304c; font-size: 21px; }
.otto-transfer-table { min-width: 880px; }
.otto-transfer-table td { vertical-align: top; }
.transfer-problem { color: #b22e29 !important; font-weight: 700; }
.otto-transfer-confirmation { display: grid; gap: 11px; padding: 17px; border-left: 4px solid #168d84; border-radius: 8px; background: #eaf7f5; color: #294c59; }
.otto-transfer-confirmation > strong { color: #12304c; font-size: 16px; }
.otto-transfer-confirmation p { line-height: 1.5; }
.otto-transfer-confirmation label { display: flex; align-items: flex-start; gap: 10px; font-weight: 750; line-height: 1.45; }
.otto-transfer-confirmation input { width: 18px; height: 18px; margin-top: 1px; accent-color: #168d84; }
.otto-transfer-confirmation .primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-width: 330px; }
@media (max-width: 760px) { .otto-transfer-panel > header { align-items: stretch; flex-direction: column; }.otto-transfer-summary { grid-template-columns: 1fr; } }

/* OTTO product-safety and manufacturer data */
.otto-compliance-editor { display: grid; gap: 16px; margin: 20px 0; padding: 19px; border: 1px solid #d8e1e7; border-left: 4px solid #e30613; border-radius: 9px; background: #fbfcfd; }
.otto-compliance-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.otto-compliance-editor h3, .otto-compliance-editor p { margin: 0; }
.otto-compliance-editor header p { margin-top: 5px; color: #6d7c90; font-size: 12px; }
.otto-compliance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.otto-compliance-grid label { display: grid; gap: 6px; color: #52647a; font-size: 12px; font-weight: 700; }
.otto-compliance-grid label.wide { grid-column: 1 / -1; }
.otto-compliance-grid input, .otto-compliance-grid select { box-sizing: border-box; width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #b9c5cf; border-radius: 6px; background: white; color: #1d3047; font: inherit; }
.otto-compliance-grid input:focus, .otto-compliance-grid select:focus { outline: 2px solid #58aaa644; border-color: #168d84; }
.compliance-note { padding: 10px 12px; border-radius: 6px; color: #6b571b; background: #fff7db; font-size: 11px; line-height: 1.45; }
@media (max-width: 760px) { .otto-compliance-editor > header { flex-direction: column; }.otto-compliance-grid { grid-template-columns: 1fr; }.otto-compliance-grid label.wide { grid-column: auto; } }

.value-chip.existing { border-color: #9db0c5; background: #eef3f7; color: #40536a; cursor: default; opacity: 1; }
.value-chip small { margin-left: .35rem; font-size: .68rem; font-weight: 700; }
.variant-existing-hint { margin-top: .75rem; padding: .7rem .85rem; border-left: 3px solid #169b8f; background: #edf9f7; color: #31556a; font-size: .86rem; }
.variant-sku-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; align-items: stretch; }
.variant-sku-lookup-row .secondary-button { white-space: nowrap; }
@media (max-width: 680px) { .variant-sku-lookup-row { grid-template-columns: 1fr; } }

.channel-allocation-panel, .channel-product-panel { margin: 20px; padding: 20px; }
.channel-allocation-panel > header, .channel-product-panel > header { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 18px; }
.channel-allocation-panel > header h2, .channel-product-panel > header h2 { margin: 3px 0 0; }
.channel-allocation-panel > header p, .channel-product-panel > header p { margin: 0; color: #6b7b90; }
.channel-rule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.channel-rule-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 150px; padding: 15px; border: 1px solid #d7e0e7; border-top: 4px solid #7489a3; border-radius: 9px; background: #fff; }
.channel-rule-card.is-shopify { border-top-color: #31a36c; }
.channel-rule-title { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; }
.marketplace-brand-logo.channel-rule-logo { flex: 0 0 64px; width: 64px; height: 46px; padding: 7px 9px; overflow: hidden; box-sizing: border-box; }
.marketplace-brand-logo.channel-rule-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.marketplace-brand-logo.marketplace-shopify.channel-rule-logo img { width: 76%; height: 76%; }
.channel-rule-title > div { display: grid; min-width: 0; gap: 2px; }
.channel-rule-title strong { line-height: 1.2; }
.channel-rule-title small { color: #718096; }
.channel-rule-switch { display: flex; gap: 5px; align-items: center; margin: 0; padding: 6px 8px; border-radius: 999px; background: #f1f5f7; white-space: nowrap; font-size: 12px; font-weight: 700; }
.channel-rule-status { padding: 6px 9px; border-radius: 999px; background: #e4f5e9; color: #18713b; white-space: nowrap; font-size: 11px; font-weight: 800; }
.channel-rule-inputs, .channel-rule-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.channel-rule-inputs label { display: grid; align-content: start; gap: 5px; color: #52647a; font-size: 12px; }
.channel-rule-inputs input { min-width: 0; padding: 9px; border: 1px solid #b9c5cf; border-radius: 5px; }
.channel-rule-values output { display: flex; align-items: center; min-height: 37px; box-sizing: border-box; padding: 9px; border: 1px solid #b9c5cf; border-radius: 5px; background: #f5faf7; color: #0a746d; font-size: 14px; font-weight: 800; }
.channel-product-search { display: grid; gap: 7px; margin-bottom: 16px; padding: 14px; border: 1px solid #d7e0e7; border-radius: 8px; background: #f8fafb; }
.channel-product-search > label { color: #243951; font-size: 12px; font-weight: 800; }
.channel-product-search-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 10px; }
.channel-product-search-row input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid #b9c5cf; border-radius: 5px; }
.channel-product-search-row button { min-width: 108px; }
.channel-rules-save { margin-top: 16px; }
.channel-stock-table td { vertical-align: middle; }
.channel-stock-table td > strong { display: block; color: #0a746d; font-size: 17px; }
.channel-cell-note { display: block; margin-top: 3px; color: #78889a; font-size: 11px; }
.channel-product-state { display: block; width: fit-content; margin: 0 0 6px; padding: 4px 7px; border-radius: 999px; background: #edf1f4; color: #5b6d7f; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.channel-product-state.is-online { background: #e4f6e9; color: #177638; }
.channel-product-state.is-prepared { background: #fff1cc; color: #8b6500; }
.channel-product-state.is-offline { background: #edf1f4; color: #647487; }
.channel-price-cell { min-width: 105px; }
.channel-stock-table .channel-price-cell > strong { color: #17314a; font-size: 15px; white-space: nowrap; }
.channel-price-cell > small { display: block; margin-top: 3px; color: #78889a; font-size: 10px; }
.channel-price-compare { display: block; margin-bottom: 2px; color: #7b8794; font-size: 11px; text-decoration: line-through; white-space: nowrap; }
.channel-price-cell > .channel-price-sale { width: fit-content; margin-top: 4px; padding: 2px 6px; border-radius: 999px; background: #fff0e8; color: #b34819; font-weight: 800; }
.channel-marketplace-price { display: block; margin: 2px 0 0; color: #17314a; font-size: 15px; font-weight: 850; white-space: nowrap; }
.channel-price-source { display: block; margin: 2px 0 7px; color: #78889a; font-size: 10px; white-space: nowrap; }
.channel-stock-table td.is-muted { color: #9aa7b5; background: #f7f9fb; }
.channel-manual-editor-cell { min-width: 155px; }
.channel-manual-editor summary { color: #0a746d; font-size: 11px; font-weight: 750; cursor: pointer; }
.channel-manual-editor[open] { display: grid; gap: 7px; padding: 8px; border: 1px solid #cfe0e5; border-radius: 6px; background: #f8fbfc; }
.channel-manual-editor label { display: grid; gap: 3px; color: #53677b; font-size: 11px; }
.channel-manual-editor label.check-line { display: flex; align-items: center; }
.channel-manual-editor input[type="number"], .channel-manual-editor input[type="date"] { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #b9c5cf; border-radius: 4px; }
.channel-manual-editor .secondary-button { min-height: 30px; padding: 5px 8px; font-size: 11px; }
@media (max-width: 1350px) { .channel-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .channel-rule-grid { grid-template-columns: 1fr; }.channel-allocation-panel > header, .channel-product-panel > header { align-items: start; flex-direction: column; }.channel-product-search-row { grid-template-columns: 1fr; }.channel-product-search-row button { width: 100%; } }
.channel-transfer-link {
    display: inline-block;
    margin-top: 8px;
    color: #007c78;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.channel-transfer-link:hover {
    text-decoration: underline;
}