:root {
  --vd-primary:#003B7D; --vd-warm:#F29158; --vd-neutral:#7BDBAE; --vd-cold:#99C9FF;
  --vd-bg-app:#022B5C; --vd-bg-nav:#003B7D; --vd-bg-elevated:#074A91; --vd-bg-hover:#14579A;
  --vd-surface:#FFFFFF; --vd-surface-subtle:#F5F7FA; --vd-surface-info:#DCEEFF;
  --vd-text-on-dark:#FFFFFF; --vd-text-primary:#0C2340; --vd-text-secondary:#52627A; --vd-border:#DCE3EC;
  --vd-success:#7BDBAE; --vd-warning:#F29158; --vd-info:#99C9FF; --vd-danger:#D95050;
  --vd-radius-sm:6px; --vd-radius-md:8px; --vd-radius-lg:12px; --vd-radius-xl:16px;
  --vd-space-1:3px; --vd-space-2:6px; --vd-space-3:10px; --vd-space-4:12px; --vd-space-5:18px; --vd-space-6:24px; --vd-space-7:32px;
  --vd-shadow-card:0 8px 24px rgba(0,25,60,.14); --vd-shadow-float:0 12px 36px rgba(0,25,60,.20);
  --vd-transition-fast:140ms ease; --vd-transition-normal:220ms ease;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; background:var(--vd-bg-app); }
body { color:var(--vd-text-primary); font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:1440px; margin:auto; padding:var(--vd-space-6) var(--vd-space-5) var(--vd-space-7); }
.app-nav { background:var(--vd-bg-nav); color:var(--vd-text-on-dark); border-bottom:1px solid rgba(255,255,255,.12); }
.nav-inner { max-width:1440px; margin:auto; padding:var(--vd-space-3) var(--vd-space-5); display:flex; align-items:center; justify-content:space-between; gap:var(--vd-space-5); }
.brand-context { display:flex; align-items:center; flex-wrap:wrap; gap:var(--vd-space-3); }
.app-nav .brand-home { display:inline-flex; align-items:center; min-height:44px; padding:0; background:transparent; border-radius:var(--vd-radius-sm); }
.app-nav .brand-home:hover { background:transparent; opacity:.86; }
.brand-logo { display:block; width:150px; height:auto; }
.environment-badge { display:inline-flex; align-items:center; width:max-content; padding:var(--vd-space-1) var(--vd-space-3); border-radius:999px; background:var(--vd-surface-info); color:var(--vd-primary); font-size:11px; font-weight:800; letter-spacing:.06em; line-height:1.5; }
body[data-environment=production] .environment-badge { background:var(--vd-success); }
body[data-environment=preview] .environment-badge { background:var(--vd-warning); }
#login-environment { margin:0 0 var(--vd-space-4); }
.app-nav .nav-links { display:flex; gap:var(--vd-space-2); flex-wrap:wrap; }
.app-nav a { display:inline-flex; align-items:center; min-height:36px; padding:var(--vd-space-2) var(--vd-space-4); border-radius:var(--vd-radius-md); color:var(--vd-text-on-dark); text-decoration:none; font-weight:600; }
.app-nav a:hover { background:var(--vd-bg-hover); }
header { display:flex; justify-content:space-between; align-items:center; gap:var(--vd-space-5); margin-bottom:var(--vd-space-6); color:var(--vd-text-on-dark); }
header a { display:inline-flex; align-items:center; min-height:36px; padding:var(--vd-space-3) var(--vd-space-4); background:var(--vd-bg-elevated); border-radius:var(--vd-radius-md); color:var(--vd-text-on-dark); text-decoration:none; }
header a:hover { background:var(--vd-bg-hover); }
h1 { margin:var(--vd-space-2) 0; font-size:26px; line-height:1.2; font-weight:700; letter-spacing:-.6px; }
h2 { margin:0 0 var(--vd-space-3); font-size:21px; line-height:1.3; }
h3 { font-size:17px; line-height:1.3; font-weight:600; }
p { overflow-wrap:anywhere; }
.eyebrow { margin:0; font-size:14px; font-weight:600; color:var(--vd-cold); }
#counts { margin:var(--vd-space-3) 0 0; color:var(--vd-surface-info); font-variant-numeric:tabular-nums; }
section { background:var(--vd-surface); border:1px solid var(--vd-border); border-radius:var(--vd-radius-lg); padding:var(--vd-space-5); margin:var(--vd-space-6) 0; scroll-margin-top:var(--vd-space-5); }
#catalog-section { background:var(--vd-bg-elevated); border-color:transparent; color:var(--vd-text-on-dark); box-shadow:var(--vd-shadow-card); }
.toolbar { display:flex; gap:var(--vd-space-3); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--vd-space-5); }
.toolbar label { flex:1; min-width:180px; margin:0; }
button { background:var(--vd-bg-hover); color:var(--vd-text-on-dark); border:1px solid transparent; border-radius:var(--vd-radius-md); min-height:36px; min-width:36px; padding:var(--vd-space-2) var(--vd-space-4); cursor:pointer; font:inherit; font-weight:600; transition:background var(--vd-transition-fast),box-shadow var(--vd-transition-fast); }
button:hover { background:var(--vd-bg-elevated); }
button:active { box-shadow:inset 0 2px 4px rgba(0,25,60,.2); }
button.primary,#apply,dialog button[type=submit] { background:var(--vd-warm); color:var(--vd-text-primary); }
button.primary:hover,#apply:hover,dialog button[type=submit]:hover { background:color-mix(in srgb,var(--vd-warm) 85%,var(--vd-surface)); }
button.secondary { background:var(--vd-surface-subtle); color:var(--vd-primary); border-color:var(--vd-border); }
button.secondary:hover { background:var(--vd-surface-info); }
#new-offer { border-color:rgba(255,255,255,.3); }
button:disabled { opacity:.55; cursor:wait; box-shadow:none; }
a { color:var(--vd-primary); text-underline-offset:3px; transition:background var(--vd-transition-fast); }
a:hover { text-decoration:none; }
:where(button,a,input,select,textarea):focus-visible { outline:3px solid var(--vd-cold); outline-offset:3px; }
input,select,textarea { font:inherit; border:1px solid var(--vd-border); border-radius:8px; padding:var(--vd-space-2) var(--vd-space-3); background:var(--vd-surface); color:var(--vd-text-primary); width:100%; min-height:36px; transition:border-color var(--vd-transition-fast),box-shadow var(--vd-transition-fast); }
input:focus,select:focus,textarea:focus { border-color:var(--vd-cold); box-shadow:0 0 0 3px rgba(153,201,255,.3); }
input:read-only { background:var(--vd-surface-subtle); }
input:disabled,select:disabled,textarea:disabled { opacity:.65; }
input[type=checkbox] { accent-color:var(--vd-primary); min-height:20px; height:20px; width:20px; flex-shrink:0; }
input[type=file]::file-selector-button { background:var(--vd-surface-info); color:var(--vd-primary); border:0; border-radius:var(--vd-radius-sm); padding:var(--vd-space-2) var(--vd-space-3); margin-right:var(--vd-space-3); font:inherit; cursor:pointer; }
textarea { font-family:Consolas,monospace; font-size:14px; resize:vertical; }
label { display:block; font-weight:600; margin:var(--vd-space-4) 0; }
label input,label select,label textarea { display:block; margin-top:var(--vd-space-2); }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--vd-space-4); }
article { background:var(--vd-surface); color:var(--vd-text-primary); border:1px solid var(--vd-border); border-radius:var(--vd-radius-lg); padding:var(--vd-space-5); margin-top:var(--vd-space-4); }
article h3 { margin:0; }
article p { margin:var(--vd-space-2) 0; }
article > button { margin:var(--vd-space-2) var(--vd-space-2) 0 0; }
.component-heading { display:flex; align-items:stretch; gap:var(--vd-space-5); margin-bottom:var(--vd-space-4); }
.component-heading > div { min-width:0; }
.component-heading img { display:block; width:auto; height:100%; object-fit:contain; border:0; border-radius:var(--vd-radius-md); padding:0; }
.component-photo { position:relative; flex-shrink:0; }
.component-photo img { position:absolute; inset:0; width:100%; }
.component-heading > div > :last-child { margin-bottom:0; }
.placeholder { font-size:14px; color:var(--vd-text-secondary); }
table { width:100%; border-collapse:collapse; margin:var(--vd-space-5) 0 var(--vd-space-3); font-variant-numeric:tabular-nums; }
th,td { text-align:left; padding:var(--vd-space-3) var(--vd-space-2); border-bottom:1px solid var(--vd-border); }
th { font-size:13px; font-weight:600; background:var(--vd-surface-subtle); color:var(--vd-text-secondary); }
td { font-size:14px; }
tbody tr:hover { background:var(--vd-surface-subtle); }
td button { font-size:14px; }
.table-wrap { overflow:auto; }
#message { position:sticky; top:var(--vd-space-3); background:var(--vd-surface-info); color:var(--vd-text-primary); z-index:2; border-left:4px solid var(--vd-info); border-radius:var(--vd-radius-md); padding:var(--vd-space-4); box-shadow:var(--vd-shadow-card); }
#message:empty { display:none; }
#message.error { background:var(--vd-surface); border-color:var(--vd-danger); }
#warnings { border-left:4px solid var(--vd-warning); padding-left:var(--vd-space-5); }
#warnings:empty { display:none; }
.conflict { border:1px solid var(--vd-border); border-left:4px solid var(--vd-warning); border-radius:var(--vd-radius-md); background:var(--vd-surface-subtle); padding:var(--vd-space-4); margin:var(--vd-space-3) 0; }
.conflict pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; }
.confirmation { display:flex; align-items:flex-start; gap:var(--vd-space-3); font-weight:400; margin:var(--vd-space-5) 0; min-height:36px; }
.confirmation input { display:inline; margin:var(--vd-space-1) 0 0; }
code { font-family:Consolas,monospace; }
#review { margin-top:var(--vd-space-5); padding-top:var(--vd-space-5); border-top:1px solid var(--vd-border); scroll-margin-top:var(--vd-space-7); }
dialog { max-width:680px; width:calc(100% - 32px); max-height:90vh; border:1px solid var(--vd-border); border-radius:var(--vd-radius-xl); padding:var(--vd-space-6); background:var(--vd-surface); color:var(--vd-text-primary); box-shadow:var(--vd-shadow-float); }
dialog::backdrop { background:rgba(2,43,92,.75); }
body.auth-pending .app-nav,body.auth-pending main > :not(#login-dialog) { visibility:hidden; }
#login-dialog { visibility:visible; }
dialog form > p { color:var(--vd-text-secondary); font-size:14px; }
dialog button { margin:var(--vd-space-2) var(--vd-space-2) 0 0; }
dialog [role=alert]:not(:empty) { color:var(--vd-text-primary); border-left:4px solid var(--vd-danger); background:var(--vd-surface-subtle); border-radius:var(--vd-radius-sm); padding:var(--vd-space-3); }
.upload-preview { display:block; max-width:100%; max-height:260px; margin:var(--vd-space-4) auto; object-fit:contain; }
.crop-canvas { display:block; max-width:100%; height:auto; margin:var(--vd-space-3) auto; cursor:crosshair; touch-action:none; background:var(--vd-surface-subtle); border-radius:var(--vd-radius-sm); }
.crop-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--vd-space-3); }
.crop-fields label { font-size:14px; }
@media(max-width:700px) {
  main { padding:var(--vd-space-5) var(--vd-space-4) var(--vd-space-6); }
  .nav-inner { padding:var(--vd-space-3) var(--vd-space-4); flex-wrap:wrap; gap:var(--vd-space-2); }
  header { align-items:flex-start; flex-direction:column; gap:var(--vd-space-4); }
  h1 { font-size:24px; }
  section,article { padding:var(--vd-space-4); }
  .fields { grid-template-columns:1fr; }
  .toolbar { align-items:stretch; }
  .toolbar label { flex-basis:100%; min-width:0; }
  .toolbar button { flex:1; }
  .component-heading { gap:var(--vd-space-4); }
  .component-heading h3 { overflow-wrap:anywhere; }
  dialog { padding:var(--vd-space-5); }
  .crop-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  table,tbody,tr,td { display:block; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tbody tr { margin:var(--vd-space-4) 0; padding:var(--vd-space-2); border:1px solid var(--vd-border); border-radius:var(--vd-radius-md); }
  td { display:flex; justify-content:space-between; align-items:center; gap:var(--vd-space-3); padding:var(--vd-space-2); overflow-wrap:anywhere; }
  td::before { content:attr(data-label); font-weight:600; color:var(--vd-text-secondary); }
  td:last-child { border:0; justify-content:flex-end; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }
.product-usage { display:flex; align-items:center; flex-wrap:wrap; gap:var(--vd-space-2); padding:var(--vd-space-3) 0; }
.product-badge { display:inline-block; padding:var(--vd-space-1) var(--vd-space-3); border-radius:var(--vd-radius-sm); background:var(--vd-surface-info); color:var(--vd-text-primary); font-size:14px; }

.import-steps { display:flex; flex-wrap:wrap; gap:var(--vd-space-2); list-style:none; padding:0; margin:var(--vd-space-5) 0; }
.import-steps li { flex:1 1 200px; padding:var(--vd-space-3) var(--vd-space-4); background:var(--vd-surface-subtle); color:var(--vd-text-secondary); border-radius:var(--vd-radius-md); border:1px solid var(--vd-border); font-weight:600; }
.import-steps li[aria-current=step] { background:var(--vd-surface-info); color:var(--vd-primary); border-color:var(--vd-primary); }
.step-actions { display:flex; flex-wrap:wrap; gap:var(--vd-space-3); margin-top:var(--vd-space-5); }
.import-cancel { margin-top:var(--vd-space-5); }
#import #review { margin-top:0; padding-top:0; border-top:0; }

#unknown-field-options .confirmation span { min-width:0; overflow-wrap:anywhere; }

/* Compact catalog with a remembered column preference. */
.toolbar .column-control { flex:0 0 120px; min-width:120px; }
#catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--vd-space-4); align-items:start; }
#catalog[data-columns="1"] { grid-template-columns:minmax(0,1fr); }
#catalog[data-columns="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
#catalog > article { margin-top:0; min-width:0; container-type:inline-size; }
#catalog > p { grid-column:1/-1; }
.component-heading h3 { overflow-wrap:anywhere; }
.product-usage { padding:var(--vd-space-2) 0; }
.product-badge { font-size:12px; }
article > button { font-size:13px; padding:var(--vd-space-2) var(--vd-space-3); }
@container (max-width:560px) {
  table,tbody,tr,td { display:block; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tbody tr { margin:var(--vd-space-3) 0; padding:var(--vd-space-2); border:1px solid var(--vd-border); border-radius:var(--vd-radius-sm); }
  td { display:flex; justify-content:space-between; align-items:center; gap:var(--vd-space-3); padding:var(--vd-space-1) var(--vd-space-2); overflow-wrap:anywhere; }
  td::before { content:attr(data-label); font-size:12px; font-weight:600; color:var(--vd-text-secondary); }
  td:last-child { border:0; justify-content:flex-end; }
}
@media(max-width:1050px) {
  #catalog[data-columns="3"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  #catalog[data-columns] { grid-template-columns:minmax(0,1fr); }
  .toolbar .column-control { flex:1 1 100%; min-width:0; }
  input,select,textarea { font-size:16px; }
}
@media(pointer:coarse) {
  button,.app-nav a,header a,input,select { min-height:44px; }
  input[type=checkbox] { min-height:20px; }
}

.component-details { max-width:1000px; }
.component-details article { margin-top:var(--vd-space-3); container-type:inline-size; }
.component-details h2 { overflow-wrap:anywhere; }
#mode-toggle[aria-pressed=true] { background:var(--vd-warm); color:var(--vd-text-primary); }

/* Compare unit prices only within the same currency. */
tbody tr.lowest-price { background:#e7f5e9; }
tbody tr.lowest-price:hover { background:#d8eedc; }