.stack { display: flex; flex-direction: column; gap: 16px; }
.cols-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.cols-even { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1100px) { .cols-2, .cols-even { grid-template-columns: minmax(0, 1fr); } }
.narrow { max-width: 560px; }
.muted { color: var(--text-2); }
.sm { font-size: var(--fs-14); }
.xs { font-size: var(--fs-12); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gap8 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt16 { margin-top: 16px; } .mt8 { margin-top: 8px; } .mt24 { margin-top: 24px; }
.h3 { font-size: var(--fs-16); font-weight: var(--fw-bold); margin: 0; }

html, body { margin: 0; height: 100%; }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr minmax(0, 1.1fr); }
.auth__brand { background: var(--c-black); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-7); }
.auth__brand .logo { width: min(320px, 70%); }
.auth__brand .logo img { width: 100%; height: auto; display: block; }
.auth__brand h2 { font-size: var(--fs-36); line-height: var(--lh-tight); margin: 0 0 var(--s-2); }
.auth__brand p { color: var(--c-fine); margin: 0; }
.auth__main { display: grid; place-items: center; padding: var(--s-7) var(--gutter); background: var(--bg); }
.auth__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s-4); }
.auth__mlogo { display: none; width: 120px; margin-bottom: var(--s-2); }
.auth__mlogo img { width: 100%; display: block; }
.auth__head h1 { margin: 0 0 4px; }
.auth__foot { font-size: var(--fs-14); color: var(--text-2); text-align: center; margin-top: var(--s-2); }
.otp-label { display: flex; justify-content: space-between; align-items: baseline; }
.auth form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth fieldset { border: 0; padding: 0; margin: 0; display: contents; }
.auth fieldset:disabled .azm-input, .auth fieldset:disabled .azm-otp input { opacity: .55; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
  .auth__main { place-items: start center; padding-top: var(--s-7); }
  .auth__mlogo { display: block; }
}

/* UI1 integration: preserve legacy feature classes while adopting the owner's tokens. */
:root { --font-ui: var(--font); --color-canvas: var(--bg-subtle); --color-surface: var(--surface); --color-text: var(--text); --color-muted: var(--text-2); --color-primary: var(--primary); --color-border: var(--border); --color-focus: var(--primary); --radius-control: var(--r-md); --radius-panel: var(--r-xl); }
html, body { margin: 0; min-height: 100%; }
[hidden] { display: none !important; }
.azm { background: var(--bg-subtle); }
.azm button, .azm input, .azm select, .azm textarea { font-family: var(--font); }
.azm input, .azm select, .azm textarea { max-width: none; }
.azm input[type=checkbox], .azm input[type=radio] { width: auto; }
.azm .azm-check input { width: 20px; }
.azm h1 { font-size: var(--fs-28); }
.azm h2 { font-size: var(--fs-22); }
.azm .azm-panel__head h2 { font-size: var(--fs-16); }
.azm fieldset { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); margin: 0 0 16px; padding: 20px; }
.azm legend { padding: 0 8px; font-weight: var(--fw-bold); }
.azm .panel { border-radius: var(--r-xl); }
.azm .field label, .azm .azm-label { font-size: var(--fs-14); }
.azm .field input, .azm .field select { min-height: var(--control-h); border-color: var(--border-strong); }
.azm .field textarea { min-height: 96px; border-color: var(--border-strong); }
.azm .panel > button, .azm .panel form button { border-radius: var(--r-pill); min-height: 44px; }
.azm button.azm-btn--ghost, .azm button.azm-iconbtn { background: transparent; border: 0; }
.azm button.azm-btn--secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.azm .azm-pass button { background: transparent; border: 0; color: var(--text-2); }
.auth .azm-pass { position: relative; }
.auth .azm-pass .azm-input[dir="ltr"] { padding-left: 76px; padding-right: 12px; }
.auth .azm-pass button { inset-inline-end: auto; right: auto; left: 6px; width: 64px; min-height: 36px; padding: 4px; }
.azm-side > .azm-nav { min-height: 0; overflow-y: auto; flex: 1; }
.shell-nav-group { display: block; padding: 16px 12px 4px; color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-bold); }
.shell-nav-group:first-child { padding-top: 4px; }
.account-stack { display: grid; gap: 20px; min-width: 0; }
.account-stack form { display: grid; gap: 12px; }
.account-stack .azm-input, .account-stack .azm-btn { width: 100%; min-width: 0; }
.account-stack .azm-panel__head { flex-wrap: wrap; gap: 12px; }
.account-confirm { display: flex; gap: 8px; align-items: baseline; }
.account-stack [data-result]:empty { display: none; }
.azm-side > .azm-side__logo, .azm-side > .azm-user, .azm-side > .azm-btn { flex-shrink: 0; }
.azm-user > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.azm-user small a { display: inline; width: auto; height: auto; margin: 0; }
.azm-user strong, .azm-user small { display: block; max-width: 100%; overflow-wrap: anywhere; }
.more-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-block: 24px; }
.voucher-cards { display: grid; gap: 20px; }
.voucher-card .azm-panel__head { flex-wrap: wrap; gap: 12px; }
.voucher-card .azm-panel__body { display: grid; gap: 16px; }
.voucher-card .azm-timeline small { display: block; }
.voucher-card .shipment-steps { display: grid; gap: 12px; padding-inline-start: 20px; }
.azm-btn--danger { background: var(--c-danger); color: var(--surface); border-color: var(--c-danger); }
.skip-link { z-index: 200; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.synthetic-label { margin: 0 0 18px; font-size: var(--fs-12); color: var(--text-2); }
.page-nav { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-12); margin-bottom: 12px; }
.page-nav:empty { display: none; }
.shell-logout { margin: 0; }
.azm-mtop a img { width: 100px; height: auto; display: block; }
.azm-bnav a > svg { width: 24px; height: 24px; }
.azm-bnav a.is-main > svg { background: var(--primary); color: var(--on-primary); width: 40px; height: 40px; padding: 8px; border-radius: 50%; }
.mobile-menu { display: none; }
.mobile-menu-space { width: 40px; }
.mobile-menu > summary { list-style: none; cursor: pointer; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu__panel { position: absolute; top: 48px; inset-inline-start: 0; width: min(320px, 86vw); max-height: calc(100dvh - 64px); overflow-y: auto; background: var(--surface); color: var(--text); padding: 20px; border: 1px solid var(--border); box-shadow: 0 12px 32px rgb(0 0 0 / 18%); }
@media (max-width: 900px) { .mobile-menu { display: block; position: fixed; z-index: 60; top: 10px; inset-inline-start: 16px; } }
.mobile-menu .azm-nav { margin-top: 20px; }
.result { text-align: center; padding: var(--s-7) var(--s-5); }
.result h2 { margin: 16px 0 6px; }
.result p { margin: 8px auto; max-width: 400px; color: var(--text-2); }
.acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.saved-record { margin-bottom: 20px; }
.saved-record > summary { cursor: pointer; color: var(--text-2); margin-bottom: 16px; }
.draft-summary { position: sticky; top: 24px; }
.checks { padding-inline-start: 20px; display: grid; gap: 8px; font-size: var(--fs-14); }
.device-line { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto; gap: 8px; align-items: end; border-top: 1px solid var(--border); padding: 14px 0; }
.device-line .azm-field { min-width: 0; }
.device-line .azm-select { font-size: var(--fs-14); }
.device-price { grid-column: 1 / -1; margin: 0; }
.draft-form .azm-panel { margin: 0; }
.azm-drop input { font-size: var(--fs-12); border: 0; padding: 8px; background: var(--surface); }
.cancel-confirm summary { cursor: pointer; }
.review-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.viewer { position: sticky; top: 24px; overflow: hidden; }
.viewer__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.document-preview summary { padding: 12px; cursor: pointer; }
.paper { background: var(--border); padding: 20px; min-height: 360px; overflow: auto; display: grid; place-items: start center; }
.paper img { width: 100%; height: auto; object-fit: contain; }
.document-preview.zoomed .paper img { width: 150%; max-width: none; }
.document-preview.rotated .paper img { transform: rotate(90deg); }
.review-fields .panel { padding: 20px; }
.review-fields dl { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1fr); gap: 10px; font-size: var(--fs-14); }
.review-fields dt { color: var(--text-2); }
.review-fields dd { margin: 0; overflow-wrap: anywhere; }
.decision-form { max-width: 800px; }
.azm-choice:has(input[value=verified]:checked) { border-color: var(--c-success); background: var(--c-success-soft); }
.azm-choice:has(input[value=rejected]:checked) { border-color: var(--c-danger); background: var(--c-danger-soft); }
.azm-choice:has(input[value=incomplete]:checked) { border-color: var(--c-warning); background: var(--c-warning-soft); }
.shipping-actions { min-width: 0; }
.shipping-event { margin: 16px 0; }
.shipping-event form { margin-top: 16px; }
.shipping-layout td, .review-fields td { overflow-wrap: anywhere; }
.shipping-layout table, .review-fields table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.shipping-layout th, .shipping-layout td, .review-fields th, .review-fields td { text-align: start; padding: 10px 6px; border-bottom: 1px solid var(--border); }
/* The script-free open dialog is outside the top layer; keep it above shell navigation. */
.step-up { z-index: 100; width: calc(100% - 32px); max-width: 440px; max-height: calc(100dvh - 32px); padding: 28px; margin: auto; color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.step-up::backdrop { background: rgb(0 0 0 / 45%); }
.auth { background: var(--bg); }
.auth .auth__head .azm-lede { font-size: var(--fs-16); }
.auth .azm-otp input { min-width: 0; padding: 0; }
.azm-otp { direction: ltr; }
.auth .azm-pass input { max-width: none; }
@media (max-width: 1100px) { .draft-summary, .viewer { position: static; } .review-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .device-line { grid-template-columns: minmax(0, 1fr) 76px; }
  .device-line > button { grid-column: 1 / -1; justify-self: end; }
  .azm fieldset { padding: 14px; }
  .step-up { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .auth__main { padding: 28px 20px; }
  .auth__card { gap: 16px; }
  .auth .azm-otp input { width: 42px; height: 48px; }
  .shipping-layout table, .review-fields table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .azm *, .azm *::before, .azm *::after { animation: none !important; transition: none !important; } }

/* UI3B administration, on the existing self-hosted shell. */
.owner-ui { display: grid; gap: 20px; }
.owner-ui .azm-page-head, .owner-ui h1, .owner-ui h2, .owner-ui h3 { margin: 0; }
.owner-ui .azm-tabs { overflow-x: auto; }
.owner-ui .azm-tabs a { padding: 12px 16px; white-space: nowrap; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.owner-ui .azm-tabs a.is-active { color: var(--primary); border-color: var(--primary); }
.owner-ui .azm-panel__body { display: grid; gap: 16px; }
.owner-ui form { display: grid; gap: 10px; }
.owner-ui .azm-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.owner-options, .owner-values { display: flex !important; flex-wrap: wrap; gap: 16px; }
.owner-values { margin: 8px 0; }
.owner-values dt { color: var(--text-2); font-size: var(--fs-12); }
.owner-values dd { margin: 0; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.owner-proposal { padding: 20px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.owner-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.owner-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.owner-pair .azm-card { padding: 20px; }
.owner-keep { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.owner-financiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.owner-financier-name { border: 2px solid var(--text); border-radius: var(--r-md); padding: 16px; text-align: center; font-weight: 700; }
.owner-dialog { width: min(100%, 620px); margin-inline: auto; }
.owner-model { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; border-top: 1px solid var(--border); }
.owner-model:first-child { border-top: 0; }
.owner-ui summary { cursor: pointer; padding-block: 12px; }
.owner-ui .azm-table td, .owner-ui .azm-table th { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .owner-columns, .owner-proposal, .owner-pair, .owner-model { grid-template-columns: minmax(0, 1fr); }
  .owner-pair > span { transform: rotate(-90deg); text-align: center; }
  .owner-ui .azm-toolbar > * { max-width: 100%; }
}
/* UI2: the same caller name and role in the compact mobile shell. */
.shell-mobile-user { display: flex; gap: 8px; align-items: center; min-width: 0; max-width: 60%; }
.shell-mobile-user > span { display: grid; font-size: var(--fs-12); min-width: 0; max-width: 180px; }
.shell-mobile-user strong, .shell-mobile-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-mobile-user small { color: var(--text-2); }
@media (max-width: 900px) { .azm-mtop { min-height: 76px; height: auto; padding-block: 8px; } }
/* UI2 / 02-prices: server-rendered cards; every colour/storage pair keeps its own price. */
.prices-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--s-5); }
.prices-search { display: flex; gap: 8px; align-items: center; }
.prices-search .azm-search { flex: 1; max-width: 420px; }
.prices-legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--text-2); }
.prices-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.price-model { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.price-model__top { display: flex; gap: 14px; align-items: center; padding: 16px; }
.price-model h2 { font-size: var(--fs-18); margin: 0 0 6px; }
.price-colours { font-size: var(--fs-12); color: var(--text-2); line-height: 1.5; }
.price-rows { border-top: 1px solid var(--border); }
.price-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px; }
.price-row + .price-row { border-top: 1px solid var(--border); }
.price-capacity { font-weight: var(--fw-bold); min-width: 64px; }
.price-capacity small { display: block; font-weight: var(--fw-regular); color: var(--text-2); }
.price-value { margin-inline-start: auto; text-align: left; }
.price-value .azm-price { font-size: var(--fs-18); }
.price-range { display: block; font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.prices-error { max-width: 520px; }
@media (max-width: 900px) { .prices-grid { grid-template-columns: 1fr; } .prices-search .azm-search { max-width: none; } }