:root {
  --ink: #162033;
  --muted: #6b768a;
  --line: #e4e8f0;
  --panel: #ffffff;
  --bg: #f6f7fb;
  --primary: #5b5ce2;
  --primary-dark: #4748c5;
  --sidebar: #17192b;
  --danger: #d1435b;
  --ok: #159570;
  --warning: #d58a1f;
  --shadow: 0 10px 30px rgba(31, 38, 74, .06);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; }
a { color: var(--primary); text-decoration: none; }
.login-language { position: fixed; right: 22px; top: 20px; z-index: 2; }
.language-form { margin: 0; }
.language-select { border-color: var(--line); color: var(--muted); font-size: 12px; min-width: 68px; padding: 7px 9px; }
.sr-only { clip: rect(0, 0, 0, 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.sidebar { background: var(--sidebar); bottom: 0; color: #fff; display: flex; flex-direction: column; left: 0; padding: 26px 18px 20px; position: fixed; top: 0; width: 244px; z-index: 10; }
.brand { align-items: center; color: #fff; display: flex; gap: 12px; margin: 0 10px 34px; }
.brand-mark { align-items: center; display: flex; height: 42px; justify-content: center; width: 42px; }
.brand-mark img { display: block; height: 100%; object-fit: contain; width: 100%; }
.brand strong, .brand small { display: block; line-height: 1.05; }
.brand strong { font-size: 16px; letter-spacing: .04em; }
.brand small { color: #969aae; font-size: 12px; font-weight: 500; margin-top: 4px; }
.main-nav { display: flex; flex: 1; flex-direction: column; gap: 6px; }
.main-nav a { align-items: center; border-radius: 9px; color: #a9adbe; display: flex; font-size: 13px; font-weight: 600; gap: 12px; padding: 11px 12px; transition: .18s ease; }
.main-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.main-nav a.active { background: rgba(91, 92, 226, .2); color: #fff; }
.nav-icon { align-items: center; color: #8e92a6; display: flex; font-size: 18px; height: 21px; justify-content: center; width: 21px; }
.main-nav a.active .nav-icon { color: #9c9df7; }
.sidebar-account { align-items: center; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 10px; padding: 18px 8px 0; }
.avatar { align-items: center; background: #30334c; border-radius: 50%; color: #c7c9d4; display: flex; flex: 0 0 34px; font-size: 12px; font-weight: 700; height: 34px; justify-content: center; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #e7e8ee; font-size: 11px; }
.account-copy small { color: #777c93; font-size: 9px; margin-top: 3px; }
.app-shell { margin-left: 244px; min-height: 100vh; }
.topbar { align-items: center; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 64px; padding: 0 34px; }
.topbar-title { align-items: center; display: flex; font-size: 14px; font-weight: 700; gap: 9px; }
.environment-badge { border-radius: 999px; display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .065em; line-height: 1; padding: 5px 7px; }
.environment-local { background: #e8ebf1; color: #59657a; }
.environment-staging { background: #fff0d6; color: #9a5a00; }
.public-environment { left: 22px; position: fixed; top: 22px; z-index: 30; }
.account { align-items: center; color: var(--muted); display: flex; gap: 14px; }
.account-link { align-items: center; border-radius: 8px; color: #536075; display: inline-flex; font-size: 12px; font-weight: 700; gap: 7px; padding: 7px 9px; }
.account-link:hover, .account-link.active { background: #eeeeff; color: var(--primary); }
.account-icon { align-items: center; background: #f0f2f7; border-radius: 50%; display: flex; font-size: 14px; height: 28px; justify-content: center; width: 28px; }
.account-link:hover .account-icon, .account-link.active .account-icon { background: #dedfff; }
.container { margin: 0 auto; max-width: 1380px; padding: 38px 42px 56px; }
h1 { font-size: 29px; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 7px; }
h2 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 18px; }
.muted { color: var(--muted); }
.heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 28px; }
.heading p { margin: 5px 0 0; }
.promotion-scope-note { align-items: flex-start; background: #f0efff; border: 1px solid #dcdafb; border-radius: 11px; color: #4d4f75; display: flex; gap: 11px; margin: -8px 0 22px; padding: 14px 16px; }
.promotion-scope-note > span { align-items: center; background: var(--primary); border-radius: 50%; color: #fff; display: flex; flex: 0 0 22px; font-size: 12px; font-weight: 800; height: 22px; justify-content: center; }
.promotion-scope-note p { margin: 1px 0 0; }
.dashboard-heading { margin-bottom: 30px; }
.eyebrow { color: var(--primary); display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); margin-bottom: 22px; overflow-x: auto; padding: 24px; }
.cards { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); margin-bottom: 24px; }
.metric-card { align-items: center; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); display: flex; justify-content: space-between; min-height: 126px; padding: 22px; position: relative; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.metric-card:hover { border-color: currentColor; box-shadow: 0 10px 24px rgba(27, 36, 62, .1); transform: translateY(-2px); }
.metric-card:focus-visible { outline: 3px solid rgba(91, 92, 224, .25); outline-offset: 2px; }
.metric-card::before { background: currentColor; border-radius: 0 3px 3px 0; content: ""; height: 40px; left: -1px; opacity: .7; position: absolute; top: 24px; width: 3px; }
.metric-card span { color: var(--muted); display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.metric-card strong { font-size: 31px; letter-spacing: -.04em; line-height: 1; }
.metric-card .metric-icon { align-items: center; border-radius: 10px; display: flex; font-size: 18px; height: 42px; justify-content: center; margin: 0; width: 42px; }
.metric-primary { color: var(--primary); } .metric-primary .metric-icon { background: #efefff; color: var(--primary); }
.metric-warning { color: var(--warning); } .metric-warning .metric-icon { background: #fff5e3; color: var(--warning); }
.metric-success { color: var(--ok); } .metric-success .metric-icon { background: #e8f8f2; color: var(--ok); }
.metric-danger { color: var(--danger); } .metric-danger .metric-icon { background: #feedef; color: var(--danger); }
.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 20px; }
.panel-heading h2 { margin-bottom: 4px; }
.panel-heading p { font-size: 12px; margin: 0; }
.text-link { font-size: 12px; font-weight: 700; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #edf0f5; padding: 14px 10px; text-align: left; vertical-align: middle; }
th { color: #919bad; font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.table-title { color: var(--ink); font-weight: 700; }
.table-title:hover { color: var(--primary); }
.date-cell { color: #4f5b70; font-variant-numeric: tabular-nums; }
.badge { background: #eef0f7; border-radius: 20px; color: #5d6679; display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .025em; padding: 5px 9px; }
.badge.blocked { background: #fde8e7; color: var(--danger); }
.badge.ok { background: #ddf5eb; color: var(--ok); }
.status-accepted { background: #e5f7f0; color: var(--ok); }
.status-rejected { background: #feedef; color: var(--danger); }
.status-pending_feedback, .status-partial_accepted { background: #fff3df; color: #a86a12; }
.status-draft { background: #eef0f7; color: #697386; }
.empty-state { align-items: center; color: var(--muted); display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 170px; }
.empty-state span { align-items: center; background: #e8f8f2; border-radius: 50%; color: var(--ok); display: flex; font-size: 18px; height: 42px; justify-content: center; width: 42px; }
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(220px, 1fr)); max-width: 820px; }
.field-help { color: var(--muted); display: block; font-size: 11px; font-weight: 500; margin-top: 6px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
label { color: #566176; display: flex; flex-direction: column; font-size: 12px; font-weight: 700; gap: 7px; }
input, select, textarea { background: white; border: 1px solid #cfd5e1; border-radius: 8px; color: var(--ink); font: inherit; padding: 11px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,92,226,.12); outline: none; }
.wide { grid-column: 1 / -1; }
button, .button { background: var(--primary); border: 0; border-radius: 8px; color: white; cursor: pointer; display: inline-block; font: inherit; font-weight: 650; padding: 10px 16px; transition: .18s ease; }
button:hover, .button:hover { background: var(--primary-dark); }
button:disabled { cursor: not-allowed; opacity: .5; }
.button-with-icon { align-items: center; display: inline-flex; gap: 7px; }
.button-with-icon span { font-size: 17px; line-height: 1; }
.secondary { background: #58677e; margin-right: 8px; }
.link-button { background: none; color: var(--muted); font-size: 12px; padding: 0; }
.link-button:hover { background: none; color: var(--primary); }
.danger { background: var(--danger); }
.filters { display: flex; gap: 10px; margin-bottom: 18px; }
.filter-panel { align-items: end; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) auto; margin-bottom: 20px; padding: 18px; }
.filter-panel:has(select[name="family_id"]) { grid-template-columns: 1.5fr repeat(4, 1fr) auto; }
.filter-panel label { gap: 5px; min-width: 0; }
.filter-panel label > span { color: #8a94a7; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.filter-panel input, .filter-panel select { min-width: 0; width: 100%; }
.filter-button { height: 41px; }
.list-panel { padding: 8px 24px 12px; }
.compact-heading { margin: 0; padding: 14px 0 8px; }
.compact-heading h2 { margin-bottom: 2px; }
.product-history-heading { align-items: end; gap: 20px; }
.submission-filter { align-items: flex-end; display: flex; flex-direction: column; gap: 5px; margin: 0; }
.submission-filter label { color: #919bad; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.submission-filter select { font-size: 11px; max-width: 360px; min-width: 260px; padding: 8px 10px; }
.campaign-badge { border-radius: 999px; display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .035em; line-height: 1.2; padding: 5px 8px; white-space: nowrap; }
.campaign-global { background: #eeeeff; color: #5657c9; }
.campaign-activated { background: #e1f5ed; color: #137c60; }
.campaign-company { background: #e8f1fc; color: #356fae; }
.country-code { background: #f0f2f7; border-radius: 5px; color: #4e596d; font-size: 10px; font-weight: 800; padding: 4px 6px; }
.marketplace-cell { font-weight: 600; }
.date-range { color: #566176; display: flex; flex-direction: column; font-size: 11px; line-height: 1.25; }
.date-range small { color: #a0a8b6; line-height: 1; }
.detail-grid { display: grid; gap: 15px; grid-template-columns: repeat(5, 1fr); }
.detail-grid small { color: var(--muted); text-transform: uppercase; }
.back-link { color: var(--muted); display: inline-block; font-size: 12px; font-weight: 650; margin-bottom: 18px; }
.back-link:hover { color: var(--primary); }
.heading-actions { display: flex; gap: 8px; }
.overview-grid { gap: 0; padding: 0; }
.overview-item { align-items: flex-start; border-right: 1px solid var(--line); display: flex; gap: 11px; min-height: 104px; padding: 24px 20px; }
.overview-item:last-child { border-right: 0; }
.overview-item p { font-weight: 650; margin: 7px 0 0; }
.deadline-calendar-actions { align-items: center; display: flex; gap: 7px; margin-top: 8px; }
.calendar-icon-link { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 7px; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.calendar-icon-link:hover { border-color: #bdc5d2; box-shadow: 0 3px 8px rgba(31, 38, 74, .1); }
.calendar-icon-link svg { height: 19px; width: 19px; }
.google-calendar-icon img { display: block; height: 21px; width: 21px; }
.ics-calendar-icon { color: #667287; }
.ics-calendar-icon svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.overview-item small { color: #929bad; font-size: 9px; font-weight: 750; letter-spacing: .05em; }
.overview-icon { align-items: center; background: #f0f0ff; border-radius: 8px; color: var(--primary); display: flex; flex: 0 0 31px; height: 31px; justify-content: center; }
.version-pill { background: #eeeeff; border-radius: 6px; color: var(--primary); font-size: 11px; font-weight: 800; padding: 4px 7px; }
.file-cell { color: #536075; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.error-count { background: #feedef; border-radius: 10px; color: var(--danger); font-size: 10px; font-weight: 800; padding: 3px 7px; }
.action-column-heading, .action-cell { text-align: center; }
.action-column-heading { min-width: 68px; white-space: nowrap; }
.action-cell form { margin: 0; }
.upload-date { min-width: 120px; white-space: nowrap; }
.upload-action-icon { align-items: center; background: #f0f2f7; border: 1px solid #dfe4ed; border-radius: 7px; color: #58677e; display: inline-flex; height: 30px; justify-content: center; padding: 0; width: 30px; }
.upload-action-icon svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }
.upload-action-icon:hover { background: #e8ebf1; color: #3d495d; }
.upload-action-icon.disabled { background: #f4f5f8; border-color: #e6e9ef; color: #b8bfcb; cursor: default; opacity: .65; }
.upload-action-icon.download { background: #e8f8f2; border-color: #c9ebdf; color: var(--ok); }
.upload-action-icon.download:hover { background: #d8f2e9; }
.upload-action-icon.send { background: #eeeeff; border-color: #d8d9fa; color: var(--primary); }
.upload-action-icon.send:hover { background: #dedfff; color: var(--primary-dark); }
.upload-action-icon.cancel { background: #feedef; border-color: #f5cfd5; color: var(--danger); }
.upload-action-icon.cancel:hover { background: #fbdde2; color: #b52f47; }
.sent-check { align-items: center; background: #e8f8f2; border: 1px solid #c9ebdf; border-radius: 50%; color: var(--ok); display: inline-flex; font-size: 15px; font-weight: 800; height: 26px; justify-content: center; width: 26px; }
.version-pill.canceled { background: #f0f1f4; color: #8b94a3; }
.canceled-badge { background: #feedef; color: var(--danger); margin-left: 5px; }
.canceled-mark { color: var(--danger); font-size: 16px; font-weight: 800; }
.cancel-submission-panel { max-width: 720px; }
.cancel-submission-panel .form-warning { margin-bottom: 20px; }
.sku-cell { color: #3c475a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; }
.price-cell { font-variant-numeric: tabular-nums; font-weight: 700; }
.archive-action { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 22px; text-align: right; }
.archive-impact { background: #fff6e8; border: 1px solid #f0d5aa; border-radius: 9px; color: #8b5a16; margin: 30px 0 -9px; padding: 13px 15px; }
.import-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); }
.import-panel { align-self: start; }
.import-drop { align-items: center; border-color: #bfc1f2; gap: 8px; min-height: 240px; justify-content: center; }
.import-drop strong { color: var(--ink); font-size: 16px; }
.import-drop small { color: var(--muted); font-weight: 500; }
.upload-symbol { align-items: center; background: #eeeeff; border-radius: 12px; color: var(--primary); display: flex; font-size: 22px; height: 48px; justify-content: center; margin-bottom: 5px; width: 48px; }
.import-guide ol { color: #566176; margin: 0; padding-left: 21px; }
.import-guide li { margin-bottom: 13px; padding-left: 5px; }
.format-note { background: #f6f7fb; border-radius: 9px; margin: 22px 0 14px; padding: 14px; }
.format-note strong, .format-note code { display: block; }
.format-note strong { font-size: 11px; margin-bottom: 7px; text-transform: uppercase; }
.format-note code { color: var(--primary-dark); font-size: 11px; overflow-wrap: anywhere; }
.validation-summary { background: #fff1f2; border: 1px solid #f5c9cf; border-radius: 11px; color: #8f2637; margin-bottom: 20px; padding: 18px 20px; }
.form-warning { background: #fff6e8; border: 1px solid #f0d5aa; border-radius: 9px; color: #8b5a16; margin: 0; padding: 12px 14px; }
.marketplace-combobox { display: block; position: relative; }
.marketplace-combobox > input { width: 100%; }
.marketplace-options { background: white; border: 1px solid #cfd5e1; border-radius: 8px; box-shadow: 0 12px 28px rgba(31, 38, 74, .14); left: 0; max-height: 230px; overflow-y: auto; padding: 6px; position: absolute; right: 0; top: calc(100% + 5px); z-index: 20; }
.marketplace-option { background: transparent; color: var(--ink); display: block; font-weight: 600; padding: 9px 10px; text-align: left; width: 100%; }
.marketplace-option:hover { background: #eeeeff; color: var(--primary); }
.marketplace-add-option { border-top: 1px solid var(--line); color: var(--primary); margin-top: 4px; }
.config-company-picker { max-width: 520px; }
.config-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); }
.config-create-form { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(110px, .45fr) minmax(180px, 1fr) auto; margin-bottom: 20px; }
.config-create-form button { height: 41px; }
.config-list { display: flex; flex-direction: column; }
.config-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 12px 0; }
.config-row-main input { width: 100%; }
.config-row-main small { color: var(--muted); display: block; margin-top: 4px; }
.country-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 540px; overflow-y: auto; }
.country-toggle { align-items: center; background: #f7f8fb; border-radius: 8px; display: flex; justify-content: space-between; padding: 7px 8px; }
.country-toggle span { font-weight: 800; }
.country-toggle button { font-size: 10px; padding: 6px 8px; }
.country-toggle .country-on { background: var(--ok); }
.country-toggle .country-off { background: #7b8495; }
.validation-summary p { margin: 4px 0 10px; }
.validation-summary ul { margin: 0; max-height: 260px; overflow-y: auto; padding-left: 20px; }
.company-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.company-chips span { background: #f0f2f7; border-radius: 20px; color: #536075; font-size: 11px; font-weight: 650; padding: 6px 10px; }
.inline { display: inline-block; margin-left: 12px; }
.inline button { padding: 6px 10px; }
.errors { color: var(--danger); font-size: 13px; }
.flash { border-radius: 9px; margin-bottom: 18px; padding: 14px; }
.flash.error { background: #fde8e7; color: var(--danger); }
.flash.success { background: #ddf5eb; color: var(--ok); }
.notice { background: #edf3ff; border: 1px solid #c6d7f5; border-radius: 5px; color: var(--primary); margin-bottom: 18px; padding: 14px; }
.login-card { background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin: 80px auto; max-width: 400px; padding: 36px; }
.login-brand { align-items: center; display: flex; gap: 15px; margin-bottom: 18px; }
.login-brand img { height: 72px; object-fit: contain; width: 72px; }
.login-brand h1 { font-size: 28px; letter-spacing: .04em; margin: 0; }
.login-brand span { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
.forgot-password-link { display: block; font-size: 12px; font-weight: 650; margin-top: 18px; text-align: center; }
.account-panel { align-items: flex-start; display: flex; gap: 28px; max-width: 760px; }
.profile-avatar { align-items: center; background: #eeeeff; border-radius: 16px; color: var(--primary); display: flex; flex: 0 0 76px; font-size: 28px; font-weight: 800; height: 76px; justify-content: center; }
.account-details { display: grid; flex: 1; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.account-details div { border-bottom: 1px solid var(--line); padding: 4px 16px 16px 0; }
.account-details dt { color: #919bad; font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.account-details dd { color: #3f4a5d; font-weight: 650; margin: 7px 0 0; overflow-wrap: anywhere; }
.drop { border: 2px dashed #becce4; border-radius: 7px; padding: 34px; text-align: center; }
.upload-heading { margin-bottom: 22px; }
.upload-steps { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload-card { background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; padding: 25px; }
.proposal-card { border-top: 4px solid var(--primary); }
.feedback-card { border-top: 4px solid var(--ok); }
.help-heading { align-items: end; }
.help-steps { display: grid; gap: 14px; margin: 24px 0; }
.help-step { align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 16px; grid-template-columns: 38px 1fr; padding: 18px; }
.help-step-number { align-items: center; background: #eeeafd; border-radius: 50%; color: var(--primary); display: flex; font-weight: 800; height: 38px; justify-content: center; width: 38px; }
.help-step h2, .help-panel h2 { font-size: 17px; margin: 0 0 7px; }
.help-step p, .help-panel p { color: var(--muted); margin: 0; }
.help-notes-grid { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; }
.help-panel { margin: 0; }
.help-panel ul { color: var(--muted); margin: 10px 0 0; padding-left: 20px; }
.help-panel li + li { margin-top: 8px; }
.support-panel a { display: inline-block; font-weight: 800; margin-top: 14px; }
.upload-card-heading { align-items: flex-start; display: flex; gap: 13px; margin-bottom: 20px; }
.upload-card-heading h2 { margin: 1px 0 5px; }
.upload-card-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.step-number { align-items: center; background: #eeeeff; border-radius: 50%; color: var(--primary); display: flex; flex: 0 0 32px; font-size: 13px; font-weight: 800; height: 32px; justify-content: center; }
.feedback-card .step-number { background: #e4f7ef; color: var(--ok); }
.upload-drop { align-items: center; cursor: pointer; gap: 7px; min-height: 210px; justify-content: center; padding: 24px; }
.upload-drop strong { color: var(--ink); font-size: 15px; }
.upload-drop small { color: var(--muted); font-weight: 500; }
.upload-note { background: #f6f7fb; border-radius: 8px; color: #657087; font-size: 11px; margin: 0; padding: 11px 12px; }
.feedback-symbol { background: #e4f7ef; color: var(--ok); }
.feedback-button { background: var(--ok); }
.feedback-button:hover { background: #117a5d; }
.step-status { border-radius: 8px; font-size: 11px; font-weight: 700; margin-bottom: 16px; padding: 10px 12px; }
.step-status.ready { background: #e4f7ef; color: #117a5d; }
.step-status.waiting { background: #f0f2f7; color: #687386; }
.feedback-mode-fieldset { border: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }
.feedback-mode-fieldset legend { color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 9px; padding: 0; }
.feedback-mode-fieldset label { cursor: pointer; display: block; position: relative; }
.feedback-mode-fieldset input { opacity: 0; pointer-events: none; position: absolute; }
.feedback-mode-fieldset span { background: white; border: 1px solid #cfd5e1; border-radius: 8px; display: grid; gap: 3px; min-height: 78px; padding: 12px 14px; transition: .18s ease; }
.feedback-mode-fieldset strong { color: #566176; font-size: 12px; }
.feedback-mode-fieldset small { color: var(--muted); font-size: 10px; font-weight: 500; }
.feedback-mode-fieldset label:hover span { background: #eaf8f3; border-color: var(--ok); }
.feedback-mode-fieldset input:focus-visible + span { box-shadow: 0 0 0 3px rgba(21,149,112,.18); }
.feedback-mode-fieldset input:checked + span { background: var(--ok); border-color: var(--ok); box-shadow: 0 4px 12px rgba(21,149,112,.2); }
.feedback-mode-fieldset input:checked + span strong { color: white; }
.feedback-mode-fieldset input:checked + span small { color: rgba(255,255,255,.8); }
.upload-card.is-disabled { background: #fafbfc; }
.disabled-drop { cursor: not-allowed; opacity: .55; }
.row-form { align-items: end; display: flex; gap: 14px; max-width: 560px; }
.checkbox { align-items: center; flex-direction: row; }
.mapping-panel { overflow: visible; }
.mapping-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.mapping-grid small { color: var(--muted); font-size: 10px; font-weight: 500; }
.mapping-note { background: #f0f3fb; border-radius: 8px; color: #566176; font-size: 12px; margin-bottom: 18px; padding: 12px 14px; }
.calendar-navigation { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.secondary-button { background: white; border: 1px solid #cfd5e1; color: #566176; font-size: 12px; padding: 9px 12px; }
.secondary-button:hover { background: #eeeeff; border-color: #c8c9f5; color: var(--primary); }
.calendar-filters { grid-template-columns: repeat(3, minmax(130px, 1fr)) auto; }
.calendar-filters:has(select[name="family_id"]) { grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(150px, auto) auto; }
.calendar-checkbox { align-items: center; flex-direction: row; height: 41px; }
.calendar-checkbox input { height: 17px; margin: 0; width: 17px; }
.calendar-checkbox span { color: #566176 !important; letter-spacing: 0 !important; text-transform: none !important; }
.calendar-panel { overflow: hidden; padding: 8px 24px 20px; }
.calendar-symbols { color: var(--muted); display: flex; font-size: 11px; gap: 18px; }
.calendar-symbols span { align-items: center; display: flex; gap: 7px; }
.period-symbol { background: var(--primary); border-radius: 4px; height: 8px; width: 24px; }
.deadline-symbol { background: var(--danger); height: 9px; transform: rotate(45deg); width: 9px; }
.timeline-scroll { border: 1px solid var(--line); border-radius: 9px; overflow-x: auto; }
.timeline { --day-width: 36px; --meta-width: 238px; min-width: calc(var(--meta-width) + 90 * var(--day-width)); }
.timeline-row { display: grid; grid-template-columns: var(--meta-width) calc(90 * var(--day-width)); min-height: 76px; }
.timeline-row + .timeline-row { border-top: 1px solid var(--line); }
.timeline-meta { background: white; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; justify-content: center; left: 0; min-width: 0; padding: 10px 13px; position: sticky; z-index: 4; }
.timeline-meta a { color: var(--ink); font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-meta > span:not(.badge) { color: var(--muted); font-size: 10px; }
.timeline-meta .badge { align-self: flex-start; font-size: 8px; padding: 3px 6px; }
.timeline-meta-header { color: #7b8495; font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.timeline-header { min-height: 78px; position: sticky; top: 0; z-index: 5; }
.timeline-canvas { position: relative; width: calc(90 * var(--day-width)); }
.timeline-months, .timeline-days { display: flex; }
.timeline-months { border-bottom: 1px solid var(--line); height: 31px; }
.timeline-months div { background: #f8f9fc; border-right: 1px solid var(--line); color: #616d81; flex: 0 0 calc(var(--segment-days) * var(--day-width)); font-size: 10px; font-weight: 750; overflow: hidden; padding: 8px 9px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-days { height: 47px; }
.timeline-days > div { align-items: center; background: white; border-right: 1px solid #eff1f5; display: flex; flex: 0 0 var(--day-width); flex-direction: column; justify-content: center; }
.timeline-days small { color: #9aa3b3; font-size: 8px; text-transform: uppercase; }
.timeline-days strong { color: #566176; font-size: 11px; }
.timeline-days .is-today { background: #eeeeff; }
.timeline-track { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--day-width) - 1px), #eff1f5 calc(var(--day-width) - 1px), #eff1f5 var(--day-width)); }
.calendar-bar { border-radius: 5px; color: white; height: 28px; left: calc(var(--start-day) * var(--day-width)); line-height: 28px; overflow: hidden; padding: 0 9px; position: absolute; text-overflow: ellipsis; top: 24px; white-space: nowrap; width: calc(var(--duration) * var(--day-width)); z-index: 2; }
.calendar-bar span { font-size: 10px; font-weight: 750; }
.calendar-deadline { border: 3px solid white; height: 16px; left: calc((var(--deadline-day) + .5) * var(--day-width) - 8px); position: absolute; top: 6px; transform: rotate(45deg); width: 16px; z-index: 3; }
.market-amazon { background: #b45309; color: #fff; }
.market-manomano { background: #0f766e; color: #fff; }
.market-leroy-merlin { background: #15803d; color: #fff; }
.market-cdiscount { background: #2563a6; color: #fff; }
.market-fallback-0 { background: #5b5ce2; } .market-fallback-1 { background: #159570; } .market-fallback-2 { background: #d58a1f; } .market-fallback-3 { background: #d1435b; }
.market-fallback-4 { background: #2878b8; } .market-fallback-5 { background: #8d52ad; } .market-fallback-6 { background: #c46432; } .market-fallback-7 { background: #507069; }
.timeline-row.is-muted .calendar-bar, .timeline-row.is-muted .calendar-deadline { filter: grayscale(.7); opacity: .45; }
.calendar-empty p { margin: 0; }
@media (max-width: 760px) {
  .sidebar { bottom: auto; display: block; overflow-x: auto; padding: 12px 14px; position: relative; width: 100%; }
  .brand { margin: 0 0 12px; }
  .brand-mark { height: 32px; width: 32px; }
  .main-nav { flex-direction: row; min-width: max-content; }
  .main-nav a { padding: 9px 11px; }
  .sidebar-account { display: none; }
  .app-shell { margin-left: 0; }
  .topbar { min-height: 54px; padding: 0 18px; }
  .container { padding: 26px 18px 40px; }
  .account { flex-direction: row; padding: 0; }
  .account-username { display: none; }
  .account-panel { flex-direction: column; }
  .account-details { grid-template-columns: 1fr; width: 100%; }
  .filters { align-items: stretch; flex-direction: column; }
  .login-language { right: 14px; top: 14px; }
  .public-environment { left: 14px; top: 16px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .form-grid { grid-template-columns: 1fr; }
  .filter-panel, .filter-panel:has(select[name="family_id"]) { grid-template-columns: repeat(2, 1fr); }
  .filter-button { grid-column: 1 / -1; }
  .overview-item { border-bottom: 1px solid var(--line); border-right: 0; }
  .overview-item:last-child { border-bottom: 0; }
  .import-layout, .upload-steps, .config-grid { grid-template-columns: 1fr; }
  .mapping-grid { grid-template-columns: 1fr; }
  .heading { align-items: flex-start; gap: 18px; }
  .calendar-heading { flex-direction: column; }
  .calendar-navigation { justify-content: flex-start; }
  .calendar-filters, .calendar-filters:has(select[name="family_id"]) { grid-template-columns: repeat(2, 1fr); }
  .calendar-panel { padding-left: 14px; padding-right: 14px; }
  .timeline { --day-width: 34px; --meta-width: 180px; }
}
@media (max-width: 500px) {
  .cards { grid-template-columns: 1fr; }
  .feedback-mode-fieldset { grid-template-columns: 1fr; }
  .help-notes-grid { grid-template-columns: 1fr; }
  .heading, .panel-heading { align-items: flex-start; flex-direction: column; }
  .metric-card { min-height: 108px; }
  .filter-panel, .filter-panel:has(select[name="family_id"]) { grid-template-columns: 1fr; }
  .config-create-form, .config-row { grid-template-columns: 1fr; }
  .heading-actions { width: 100%; }
}

/* Public PROMI landing */
.landing-page { background: #fff; color: #17192b; scroll-behavior: smooth; }
.landing-page main { overflow: hidden; }
.landing-header { align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid #ececf4; display: grid; grid-template-columns: 1fr auto 1fr; min-height: 76px; padding: 0 max(28px, calc((100vw - 1220px) / 2)); position: sticky; top: 0; z-index: 20; }
.landing-brand { align-items: center; color: #17192b; display: inline-flex; gap: 10px; justify-self: start; }
.landing-brand img { height: 42px; object-fit: contain; width: 42px; }
.landing-brand strong, .landing-brand small { display: block; line-height: 1.05; }
.landing-brand strong { font-size: 15px; letter-spacing: .065em; }
.landing-brand small { color: #747b8d; font-size: 9px; margin-top: 4px; }
.landing-nav { display: flex; gap: 30px; }
.landing-nav a, .landing-login { color: #5b6273; font-size: 13px; font-weight: 560; letter-spacing: -.012em; }
.landing-nav a:hover, .landing-login:hover { color: var(--primary); }
.landing-actions { align-items: center; display: flex; gap: 16px; justify-self: end; }
.landing-language { background: transparent; border: 0; color: #6d7485; font-size: 11px; font-weight: 750; padding: 6px 4px; }
.landing-button { align-items: center; background: var(--primary); border-radius: 9px; color: white; display: inline-flex; font-size: 13px; font-weight: 620; gap: 12px; justify-content: center; letter-spacing: -.015em; padding: 13px 18px; }
.landing-button:hover { background: var(--primary-dark); color: white; transform: translateY(-1px); }
.landing-button.small { font-size: 12px; padding: 10px 15px; }
.landing-hero { align-items: center; background: linear-gradient(125deg, #fbfaff 0%, #f4f1ff 58%, #fff8ef 100%); display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); min-height: 650px; padding: 82px max(28px, calc((100vw - 1160px) / 2)); position: relative; }
.landing-hero::before { background-image: radial-gradient(#5b5ce2 1px, transparent 1px); background-size: 19px 19px; content: ""; height: 180px; left: -40px; opacity: .07; position: absolute; top: 90px; width: 260px; }
.hero-copy { max-width: 570px; position: relative; z-index: 2; }
.landing-eyebrow { color: var(--primary); display: block; font-size: 11px; font-weight: 800; letter-spacing: .115em; margin-bottom: 20px; text-transform: uppercase; }
.hero-copy h1 { font-size: clamp(46px, 5.3vw, 72px); letter-spacing: -.055em; line-height: .99; margin: 0 0 26px; }
.hero-copy > p { color: #5e6578; font-size: 17px; line-height: 1.7; margin: 0; max-width: 550px; }
.hero-actions { align-items: center; display: flex; gap: 20px; margin-top: 34px; }
.hero-actions small { color: #83899a; font-size: 10px; max-width: 190px; }
.hero-visual { min-height: 470px; position: relative; }
.visual-glow { background: #f3b04d; border-radius: 50%; filter: blur(1px); height: 220px; opacity: .15; position: absolute; right: 0; top: 10px; width: 220px; }
.hero-brand-icon { filter: drop-shadow(0 18px 22px rgba(52,42,123,.15)); height: 152px; object-fit: contain; position: absolute; right: 18px; top: 8px; width: 152px; z-index: 3; }
.calendar-mock { background: rgba(255,255,255,.96); border: 1px solid #e3e2ee; border-radius: 18px; bottom: 0; box-shadow: 0 28px 70px rgba(37,31,83,.14); left: 25px; padding: 24px; position: absolute; transform: rotate(-1.2deg); width: calc(100% - 45px); z-index: 2; }
.mock-head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 23px; }
.mock-head strong, .mock-head small { display: block; }
.mock-head strong { font-size: 14px; }.mock-head small { color: #9499a8; font-size: 9px; margin-top: 4px; }.mock-head > span { color: #aaafbc; letter-spacing: 2px; }
.mock-months { border-bottom: 1px solid #eceef3; display: grid; grid-template-columns: repeat(3, 1fr); margin-left: 92px; padding-bottom: 8px; }
.mock-months span { color: #9ca1af; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.mock-row { align-items: center; border-bottom: 1px solid #f0f1f5; display: grid; gap: 10px; grid-template-columns: 82px 1fr 58px; min-height: 60px; }
.mock-row strong { font-size: 9px; }.mock-row em { background: #f2f2fb; border-radius: 12px; color: #6d6e9d; font-size: 7px; font-style: normal; font-weight: 800; padding: 4px 6px; text-align: center; text-transform: uppercase; }
.mock-track { background-image: repeating-linear-gradient(90deg, #eff0f5 0, #eff0f5 1px, transparent 1px, transparent 33.33%); height: 30px; position: relative; }
.mock-track .bar { border-radius: 6px; height: 16px; left: 20%; position: absolute; top: 7px; width: 45%; }.mock-track .purple { background: #5b5ce2; }.mock-track .teal { background: #159570; left: 42%; width: 43%; }.mock-track .orange { background: #dc8b27; left: 26%; width: 55%; }
.mock-track .diamond { background: #d1435b; height: 10px; position: absolute; top: 10px; transform: rotate(45deg); width: 10px; }.mock-track .deadline-amazon { left: 6%; }.mock-track .deadline-manomano { left: 28%; }.mock-track .deadline-cdiscount { left: 12%; }
.mock-legend { display: flex; gap: 18px; padding-top: 14px; }.mock-legend span { align-items: center; color: #9a9fad; display: flex; font-size: 7px; gap: 6px; text-transform: uppercase; }.mock-legend i { background: var(--primary); border-radius: 4px; height: 5px; width: 17px; }.mock-legend b { background: #d1435b; height: 7px; transform: rotate(45deg); width: 7px; }
.landing-section { margin: 0 auto; max-width: 1160px; padding: 110px 0; scroll-margin-top: 76px; }
.section-heading { max-width: 730px; }.section-heading h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; line-height: 1.08; margin: 0 0 20px; }.section-heading > p { color: #697083; font-size: 15px; line-height: 1.7; max-width: 650px; }
.section-heading.centered { margin: 0 auto 55px; text-align: center; }
.benefit-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 58px; }
.benefit-grid article { background: #fafafe; border: 1px solid #ececf4; border-radius: 15px; min-height: 250px; padding: 26px; position: relative; }.benefit-grid article > span { color: #b6bac6; font-size: 9px; font-weight: 800; position: absolute; right: 20px; top: 19px; }.benefit-grid h3, .workflow-grid h3 { font-size: 17px; margin: 20px 0 10px; }.benefit-grid p, .workflow-grid p { color: #707789; font-size: 12px; line-height: 1.65; margin: 0; }
.benefit-icon { align-items: center; border-radius: 12px; display: flex; font-size: 21px; height: 48px; justify-content: center; width: 48px; }.calendar-icon { background: #ececff; color: #5b5ce2; }.memory-icon { background: #e7f7f1; color: #159570; }.flow-icon { background: #fff2df; color: #c77a16; }
.workflow-section { border-top: 1px solid #efeff4; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }.workflow-grid::before { border-top: 1px dashed #cfd1dc; content: ""; left: 10%; position: absolute; right: 10%; top: 21px; }.workflow-grid article { padding: 0 22px; position: relative; text-align: center; }.workflow-grid article > span { align-items: center; background: white; border: 2px solid var(--primary); border-radius: 50%; color: var(--primary); display: flex; font-size: 11px; font-weight: 800; height: 43px; justify-content: center; margin: 0 auto; position: relative; width: 43px; z-index: 2; }
.feature-section { padding-top: 110px; }.feature-heading { margin-bottom: 50px; }.feature-heading > p { margin-left: auto; margin-right: auto; }.feature-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); }.feature-column { background: #f8f8fd; border: 1px solid #e6e6f1; border-radius: 17px; padding: 34px; }.feature-column.future { background: #fffaf3; border-color: #f0e2cd; }.feature-status { color: #9a6c2b; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.feature-status.available { color: var(--ok); }.feature-column ul { list-style: none; margin: 28px 0 0; padding: 0; }.feature-column li { border-top: 1px solid #e6e6ef; font-size: 14px; font-weight: 700; padding: 16px 0; }.feature-column li::before { color: var(--primary); content: "✓"; margin-right: 12px; }.feature-column.future li::before { color: #d18a2e; content: "↗"; }.feature-column > p { color: #8b7963; font-size: 11px; line-height: 1.6; margin: 15px 0 0; }
.landing-cta { align-items: center; background: #20203b; border-radius: 20px; color: white; display: grid; gap: 25px; grid-template-columns: auto 1fr auto; margin: 20px auto 90px; max-width: 1160px; overflow: hidden; padding: 48px 50px; position: relative; }.landing-cta::after { background: var(--primary); border-radius: 50%; content: ""; height: 220px; opacity: .17; position: absolute; right: -80px; top: -90px; width: 220px; }.landing-cta img { height: 90px; position: relative; width: 90px; z-index: 2; }.landing-cta h2 { font-size: 27px; margin: 0 0 8px; }.landing-cta p { color: #b6b8c7; margin: 0; max-width: 550px; }.landing-button.light { background: white; color: #34345c; position: relative; z-index: 2; }
.landing-footer { border-top: 1px solid #e8e8f0; color: #747b8d; margin: 0 auto; max-width: 1160px; padding: 54px 0 30px; }.footer-main { display: grid; gap: 70px; grid-template-columns: minmax(260px, 1fr) 180px 180px; padding-bottom: 46px; }.footer-brand-column .landing-brand img { height: 44px; width: 44px; }.footer-brand-column > p { font-size: 12px; line-height: 1.6; margin: 18px 0 0; max-width: 260px; }.footer-column { align-items: flex-start; display: flex; flex-direction: column; gap: 12px; }.footer-column strong { color: #202336; font-size: 11px; letter-spacing: .06em; margin-bottom: 5px; text-transform: uppercase; }.footer-column a { color: #747b8d; font-size: 12px; font-weight: 540; }.footer-column a:hover { color: var(--primary); }.footer-bottom { align-items: center; border-top: 1px solid #ececf3; display: flex; font-size: 9px; gap: 30px; justify-content: space-between; padding-top: 24px; }.footer-bottom p { margin: 0; max-width: 690px; }.footer-bottom span { white-space: nowrap; }
@media (max-width: 900px) {
  .landing-header { grid-template-columns: 1fr auto; padding: 0 22px; }.landing-nav { display: none; }.landing-hero { grid-template-columns: 1fr; padding: 70px 28px; }.hero-copy { max-width: 680px; }.hero-visual { margin: 50px auto 0; max-width: 650px; width: 100%; }.landing-section { padding: 85px 28px; }.benefit-grid { grid-template-columns: 1fr; }.benefit-grid article { min-height: 190px; }.landing-cta { margin-left: 28px; margin-right: 28px; }.landing-footer { margin: 0 28px; }.footer-main { gap: 38px; grid-template-columns: minmax(220px, 1fr) 150px 150px; }
}
@media (max-width: 620px) {
  .landing-header { min-height: 68px; }.landing-brand small, .landing-login { display: none; }.landing-actions { gap: 6px; }.landing-button.small { padding: 9px 10px; }.landing-hero { min-height: auto; padding-top: 58px; }.hero-copy h1 { font-size: 44px; }.hero-copy > p { font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-visual { min-height: 390px; }.hero-brand-icon { height: 104px; right: 5px; width: 104px; }.calendar-mock { left: 0; padding: 16px; width: 100%; }.mock-row { grid-template-columns: 66px 1fr; }.mock-row em { display: none; }.mock-months { margin-left: 76px; }.workflow-grid { gap: 32px; grid-template-columns: 1fr 1fr; }.workflow-grid::before { display: none; }.feature-grid { grid-template-columns: 1fr; }.landing-cta { grid-template-columns: 1fr; padding: 36px 28px; }.landing-cta img { height: 70px; width: 70px; }.footer-main { gap: 34px; grid-template-columns: 1fr 1fr; }.footer-brand-column { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }.footer-bottom span { white-space: normal; }
}