:root {
  --navy: #0b1730;
  --navy-2: #132343;
  --blue: #2563eb;
  --blue-dark: #1749b5;
  --cyan: #53d4ff;
  --ink: #172033;
  --muted: #667085;
  --soft: #f4f7fb;
  --line: #e3e8f1;
  --white: #fff;
  --green: #087a55;
  --red: #c4334b;
  --amber: #a65c00;
  --shadow: 0 18px 48px rgba(24, 39, 75, .08);
}

html { font-size: 16px; min-height: 100%; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--soft); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
button, input, select, textarea { font: inherit; }
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: .65rem; font-weight: 700; }
.btn-sm { min-height: 34px; }
.btn-primary { border-color: var(--blue); background: var(--blue); box-shadow: 0 8px 18px rgba(37, 99, 235, .2); }
.btn-primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.form-control, .form-select { min-height: 45px; border-color: #cfd7e6; border-radius: .65rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible, a:focus-visible { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 .23rem rgba(37, 99, 235, .18); }
.field-validation { display: block; min-height: 1.15rem; margin-top: .3rem; color: var(--red); font-size: .82rem; }
.validation-summary { margin-bottom: 1.25rem; padding: .85rem 1rem; color: #8c2035; background: #fff0f3; border: 1px solid #f6c5ce; border-radius: .7rem; }
.validation-summary:empty { display: none; }
.validation-summary ul { margin: 0; padding-left: 1.1rem; }
.eyebrow { display: block; margin-bottom: .65rem; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; z-index: 40; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.35rem 1rem; color: #dbe7f9; background: radial-gradient(circle at 10% 0, #1e4174, transparent 34%), linear-gradient(180deg, var(--navy), #081122); }
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; color: #071328; background: linear-gradient(145deg, var(--cyan), #91e7ff); border-radius: .8rem; font-size: 1.15rem; font-weight: 950; box-shadow: 0 8px 24px rgba(83, 212, 255, .22); }
.brand strong, .brand small { display: block; }
.brand strong { color: #fff; font-size: 1rem; letter-spacing: -.02em; }
.brand small { margin-top: .1rem; color: #8fa6c7; font-size: .72rem; }
.side-nav { display: grid; gap: .3rem; margin-top: 2.35rem; }
.side-nav a { display: flex; align-items: center; gap: .8rem; padding: .78rem .85rem; color: #aebfda; border: 1px solid transparent; border-radius: .68rem; font-size: .9rem; font-weight: 700; text-decoration: none; }
.side-nav a span { width: 1.4rem; color: #78dfff; font-size: 1.1rem; text-align: center; }
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.side-nav a.active { color: #fff; background: linear-gradient(90deg, rgba(50,126,255,.32), rgba(50,126,255,.1)); border-color: rgba(117,185,255,.22); }
.side-nav a.side-nav-child { position: relative; margin: -.12rem 0 .28rem 1.3rem; padding: .58rem .72rem; color: #90a9ca; border-left: 1px solid rgba(117,185,255,.22); border-radius: 0 .58rem .58rem 0; font-size: .78rem; font-weight: 560; }
.side-nav a.side-nav-child span { width: 1rem; color: #61d7ca; font-size: .9rem; }
.side-nav a.side-nav-child.active { color: #fff; background: linear-gradient(90deg, rgba(23,128,111,.25), rgba(23,128,111,.08)); border-color: rgba(91,218,193,.34); }
.nav-label { margin: 1.5rem .85rem .45rem; color: #6f85a7; font-size: .64rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-status { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding: .8rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; }
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status strong { color: #dbe8fa; font-size: .75rem; }
.sidebar-status small { margin-top: .1rem; color: #8297b7; font-size: .65rem; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; background: #43d99b; border-radius: 50%; box-shadow: 0 0 0 5px rgba(67,217,155,.12); }
.sidebar-backdrop { display: none; }

.app-content { min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 76px; display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(1.25rem, 3vw, 2.4rem); background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-title { display: grid; }
.topbar-title small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.topbar-title strong { margin-top: .08rem; font-size: 1rem; }
.sidebar-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; border-radius: .65rem; }
.user-menu { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue), #6d93ff); border-radius: .68rem; font-size: .84rem; font-weight: 900; }
.user-copy strong, .user-copy small { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: .78rem; }
.user-copy small { color: var(--muted); font-size: .67rem; }
.page-content { width: min(1480px, 100%); flex: 1; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.75rem); }
.app-footer { display: flex; flex-wrap: wrap; gap: 1.3rem; padding: 1rem clamp(1.25rem, 3vw, 2.4rem); color: var(--muted); border-top: 1px solid var(--line); background: #fff; font-size: .76rem; }
.app-footer a { color: inherit; text-decoration: none; }

.page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; padding: 1rem 0; }
.page-hero.compact { align-items: center; }
.page-hero h1 { max-width: 830px; margin: 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.03; letter-spacing: -.055em; }
.page-hero.compact h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.page-hero p { max-width: 680px; margin: .85rem 0 0; color: var(--muted); font-size: 1rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.metric-card { min-height: 155px; display: flex; flex-direction: column; justify-content: center; padding: 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 8px 28px rgba(24,39,75,.045); }
.metric-card span { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.metric-card strong { display: block; margin: .35rem 0; font-size: clamp(1.8rem, 3vw, 2.45rem); letter-spacing: -.05em; }
.metric-card small { color: #8a96a8; font-size: .75rem; }
.metric-primary { color: #fff; background: radial-gradient(circle at 100% 0, rgba(83,212,255,.28), transparent 45%), linear-gradient(145deg, #0e2f64, #1557b4); border-color: transparent; }
.metric-primary span, .metric-primary small { color: #c1d9f6; }
.metric-date { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; }
.info-banner { margin: 0 0 1.25rem; padding: 1rem 1.15rem; color: #184a8b; background: #edf5ff; border: 1px solid #cfe2ff; border-radius: .85rem; font-size: .82rem; line-height: 1.55; }
.info-banner strong { margin-right: .25rem; color: #0d3268; }
.warning-banner { color: #7a4a00; background: #fff7e6; border-color: #f1d697; }
.warning-banner strong { color: #633900; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.45rem; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.025em; }
.panel-heading .eyebrow { margin-bottom: .25rem; }
.panel-heading > a { font-size: .82rem; font-weight: 750; text-decoration: none; }
.panel-meta { padding: .9rem 1.35rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .78rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .65rem; padding: 1.2rem; }
.filter-search { min-width: 260px; flex: 1 1 340px; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: .8rem 1rem; color: #7b8799; background: #f8fafc; border-block: 1px solid var(--line); font-size: .68rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 1rem; border-bottom: 1px solid #edf0f5; color: #435066; font-size: .82rem; vertical-align: middle; overflow-wrap: anywhere; }
.data-table tbody tr:hover { background: #fbfcfe; }
.record-link { display: grid; min-width: 180px; text-decoration: none; }
.record-link span { color: var(--blue); font-size: .67rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.record-link strong { margin-top: .18rem; color: var(--ink); font-size: .86rem; }
.record-link.static { cursor: default; }
.category-record { gap: .12rem; min-width: 260px; }
.category-record strong { font-size: .92rem; }
.category-record span { color: #617087; font-size: .72rem; font-weight: 650; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.category-record small, .cell-note { display: block; margin-top: .24rem; color: #8491a4; font-size: .67rem; }
.category-filter > div:not(.filter-search) { min-width: 150px; }
.category-table td:first-child { min-width: 300px; }
.product-filter .category-filter-field { min-width: 250px; flex: 1 1 260px; }
.product-record { min-width: 280px; display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.product-record img, .product-image-placeholder { width: 54px; height: 54px; flex: 0 0 54px; border-radius: .7rem; }
.product-record img { object-fit: contain; background: #f8fafc; border: 1px solid var(--line); }
.product-image-placeholder { display: grid; place-items: center; color: var(--blue); background: #edf4ff; font-size: 1.15rem; }
.product-record-copy { min-width: 0; display: grid; gap: .15rem; }
.product-record-copy small { color: var(--blue); font-size: .67rem; font-weight: 850; letter-spacing: .05em; }
.product-record-options { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0 !important; }
.product-record-copy strong { color: var(--ink); font-size: .86rem; line-height: 1.35; }
.sku-value { display: inline-flex; max-width: 220px; padding: .32rem .5rem; color: #174a8a; background: #edf4ff; border-radius: .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .72rem; font-weight: 750; overflow-wrap: anywhere; }
.category-summary { display: block; max-width: 300px; color: #435066; font-size: .78rem; line-height: 1.45; }
.product-list { border-top: 1px solid var(--line); }
.product-list-header, .product-disclosure-summary { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(150px, .34fr) 52px; gap: 1rem; align-items: center; }
.product-list-header { padding: .72rem 1.15rem; color: #7b8799; background: #f8fafc; border-bottom: 1px solid var(--line); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.product-disclosure { position: relative; background: #fff; border-bottom: 1px solid #edf0f5; transition: background-color .2s ease, box-shadow .2s ease; }
.product-disclosure:last-child { border-bottom: 0; }
.product-disclosure:hover, .product-disclosure.is-open { background: #fbfdff; }
.product-disclosure.is-open { box-shadow: inset 3px 0 0 var(--blue); }
.product-disclosure-summary { min-height: 80px; padding: .72rem 1.15rem; }
.product-disclosure-summary .product-record { min-width: 0; }
.product-summary-label { display: none; }
.product-disclosure-toggle { width: 42px; height: 42px; display: grid; place-items: center; justify-self: end; padding: 0; color: #2462b8; background: #fff; border: 1px solid #cfdcf0; border-radius: 50%; box-shadow: 0 5px 14px rgba(29, 78, 145, .08); cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.product-disclosure-toggle:hover { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 20px rgba(29, 96, 210, .22); transform: translateY(-1px); }
.product-disclosure-toggle:focus-visible { outline: 3px solid rgba(52, 121, 232, .28); outline-offset: 3px; }
.product-disclosure.is-open .product-disclosure-toggle { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 20px rgba(29, 96, 210, .2); }
.product-disclosure-icon { position: relative; width: 17px; height: 17px; display: block; }
.product-disclosure-icon::before, .product-disclosure-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 17px; height: 2px; background: currentColor; border-radius: 999px; transform: translate(-50%, -50%); transition: transform .2s ease; }
.product-disclosure-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.product-disclosure.is-open .product-disclosure-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }
.product-disclosure-panel { display: grid; grid-template-rows: 0fr; opacity: 0; background: linear-gradient(180deg, #f7faff 0%, #fbfcfe 100%); border-top: 1px solid transparent; transition: grid-template-rows .24s ease, opacity .18s ease, border-color .2s ease; }
.product-disclosure-panel[hidden] { display: none; }
.product-disclosure.is-open .product-disclosure-panel { grid-template-rows: 1fr; opacity: 1; border-top-color: #e5edf8; }
.product-disclosure-panel-inner { min-height: 0; overflow: hidden; }
.product-disclosure-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .8rem; padding: 1rem 1.15rem 1.15rem; }
.product-disclosure-field { min-width: 0; padding: .85rem; background: rgba(255,255,255,.9); border: 1px solid #e3eaf4; border-radius: .72rem; }
.product-disclosure-categories, .product-disclosure-skus { grid-column: span 4; }
.product-disclosure-field:not(.product-disclosure-categories):not(.product-disclosure-skus):not(.product-disclosure-actions-field) { grid-column: span 2; }
.product-disclosure-actions-field { grid-column: 1 / -1; }
.product-disclosure-label { display: block; margin-bottom: .55rem; color: #728096; font-size: .65rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.sku-pill-list { display: flex; flex-wrap: wrap; gap: .38rem; }
.sku-pill-list > span { display: inline-flex; max-width: 100%; padding: .3rem .48rem; color: #465a75; background: #eef2f7; border: 1px solid #e0e6ef; border-radius: .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .68rem; font-weight: 750; overflow-wrap: anywhere; }
.sku-pill-list > span.is-primary { color: #174a8a; background: #e9f2ff; border-color: #cfe0f8; }
.sku-variant-list { display: grid; gap: .5rem; }
.sku-variant-item { min-width: 0; padding: .58rem; background: #f8fafc; border: 1px solid #e3e9f2; border-radius: .55rem; }
.sku-variant-item.is-selected { background: #eef6ff; border-color: #9dc3f5; box-shadow: inset 3px 0 0 var(--blue); }
.sku-selected-badge { display: inline-flex; align-items: center; padding: .18rem .42rem; color: #fff; background: var(--blue); border-radius: 999px; font-size: .62rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.sku-variant-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.sku-primary-badge { padding: .22rem .38rem; color: #17604e; background: #e2f6ef; border-radius: 999px; font-size: .58rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.variant-option-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.variant-option-list > span { padding: .28rem .42rem; color: #53627a; background: #fff; border: 1px solid #dfe6f0; border-radius: .38rem; font-size: .66rem; line-height: 1.35; overflow-wrap: anywhere; }
.variant-option-list strong { color: #33445d; font-weight: 800; }
.product-detail-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; color: var(--blue); font-size: .78rem; font-weight: 800; text-decoration: none; }
.product-detail-link:hover { text-decoration: underline; }
.product-disclosure-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.product-disclosure-actions .btn { min-height: 36px; display: inline-flex; align-items: center; }
.product-detail-heading { min-width: 0; display: flex; align-items: center; gap: 1rem; }
.product-detail-heading > img, .product-detail-placeholder { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 1rem; }
.product-detail-heading > img { object-fit: contain; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(24,39,75,.07); }
.product-detail-placeholder { display: grid; place-items: center; color: var(--blue); background: #edf4ff; font-size: 1.6rem; }
.detail-grid .detail-span-2 { grid-column: span 2; }
.category-pill-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.category-pill-list > span { padding: .35rem .55rem; color: #385274; background: #eaf2fc; border-radius: .45rem; font-size: .72rem; font-weight: 700; }
.side-note { padding: .85rem; color: #42536a; background: #f2f6fc; border: 1px solid var(--line); border-radius: .7rem; font-size: .78rem; line-height: 1.55; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.actions-cell { display: flex; gap: .8rem; }
.actions-cell a, .table-action { font-size: .75rem; font-weight: 800; text-decoration: none; }
.status-badge { display: inline-flex; align-items: center; padding: .32rem .58rem; border-radius: 999px; font-size: .68rem; font-weight: 850; white-space: nowrap; }
.status-draft { color: #526173; background: #edf1f5; }
.status-active { color: #087555; background: #e4f8f0; }
.status-inactive { color: #6b7280; background: #eef1f5; }
.status-refunded { color: #6b21a8; background: #f3e8ff; }
.status-cancelled { color: #b42318; background: #fee4e2; }
.status-partially-refunded { color: #9a3412; background: #ffedd5; }
.status-onhold { color: #9a5700; background: #fff2d8; }
.status-completed { color: #1c56b3; background: #e8f1ff; }
.status-archived { color: #92273b; background: #ffe8ed; }
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; color: var(--muted); font-size: .75rem; }
.pagination-bar div { display: flex; gap: .45rem; }
.bulk-action-bar { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; color: #536177; background: #f8fafc; border-block: 1px solid var(--line); font-size: .76rem; }
.bulk-select-all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; cursor: pointer; }
.bulk-select-all input, .selection-cell input { width: 1.12rem; height: 1.12rem; accent-color: var(--blue); cursor: pointer; }
.bulk-selection-count { margin-left: auto; font-weight: 800; }
.selection-column, .selection-cell { width: 48px; text-align: center !important; }
.product-key-code { display: inline-block; max-width: 100%; padding: .3rem .48rem; overflow-wrap: anywhere; color: #243a58; background: #eef3fa; border: 1px solid #dce5f0; border-radius: .4rem; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .76rem; font-weight: 750; letter-spacing: .035em; }
.product-key-code-large { padding: .52rem .68rem; font-size: .95rem; }
.product-key-input { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.bulk-key-input { min-height: 250px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.7; letter-spacing: .025em; text-transform: none; }
.bulk-import-note { margin-top: .35rem; margin-bottom: 0; }
.product-key-product-select { text-overflow: ellipsis; }
.product-sku-search { margin-bottom: .85rem; }
.product-sku-search-controls { display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.product-sku-search-controls .form-control { flex: 1 1 0; min-width: 0; }
.product-sku-search-controls .btn { flex: 0 0 auto; min-height: 44px; }
.product-sku-search-status { display: block; margin-top: .35rem; color: var(--muted); font-size: .72rem; }
.product-sku-selection { margin: .5rem 0 0; padding: .7rem .85rem; color: #243a58; background: #eef3fa; border: 1px solid var(--line); border-radius: .5rem; font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; }
.product-sku-selection:empty { display: none; }
.order-table { min-width: 1320px; }
.order-line-input { min-height: 96px; resize: vertical; }
.order-line-list { display: block; min-width: 180px; max-width: 320px; color: #425069; line-height: 1.55; white-space: pre-line; }
.order-sku-list { color: #174a8a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .72rem; font-weight: 750; }
.order-quantity { min-width: 42px; display: inline-flex; justify-content: center; padding: .35rem .58rem; color: #155a44; background: #e8f7f1; border-radius: .5rem; font-weight: 850; }
.key-stock-live-note { display: flex; align-items: center; gap: .25rem; }
.key-stock-filter .key-stock-category-filter { min-width: 270px; flex: 1 1 300px; }
.key-stock-table .key-stock-product { min-width: 320px; }
.stock-number-column, .stock-number-cell { width: 150px; text-align: center !important; }
.stock-category-row th { padding: .72rem 1rem; color: #425675; background: linear-gradient(90deg, #eaf2ff, #f7faff); border-block: 1px solid #d9e6f7; font-size: .72rem; letter-spacing: 0; text-align: left; text-transform: none; }
.stock-category-row th span, .stock-category-row th strong { display: block; }
.stock-category-row th span { margin-bottom: .12rem; color: #3972ba; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.stock-category-row th strong { color: #273c59; font-size: .8rem; }
.stock-quantity { min-width: 86px; display: inline-grid; justify-items: center; gap: .05rem; padding: .45rem .7rem; border: 1px solid transparent; border-radius: .65rem; }
.stock-quantity strong { font-size: 1.05rem; line-height: 1; }
.stock-quantity small { font-size: .62rem; font-weight: 800; }
.stock-sold { color: #2059a4; background: #edf4ff; border-color: #d5e4fa; }
.stock-available { color: #087555; background: #e9f8f2; border-color: #cfeee2; }
.stock-empty { color: #8c3545; background: #fff0f3; border-color: #f4d4da; }
.empty-state { padding: 4rem 1.5rem; text-align: center; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--blue); background: #eaf2ff; border-radius: .9rem; font-size: 1.35rem; }
.empty-state h3 { margin-bottom: .4rem; font-size: 1.05rem; }
.empty-state p { margin: 0; color: var(--muted); }

.form-panel { padding: clamp(1.25rem, 3vw, 2rem); }
.form-panel.narrow { max-width: 780px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.15rem; }
.form-span-2 { grid-column: span 2; }
.form-field { margin-bottom: .9rem; }
.form-field label, .form-field legend { display: block; margin-bottom: .38rem; color: #344058; font-size: .76rem; font-weight: 800; }
.form-field legend { float: none; width: auto; }
.form-field > small { display: block; margin-top: .35rem; color: var(--muted); font-size: .72rem; }
.product-availability-field { justify-content: center; padding: .85rem 1rem; background: #f8fafc; border: 1px solid var(--line); border-radius: .75rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem; }
.choice-grid label { display: flex; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; }
.choice-grid label:has(input:checked) { border-color: #8bb1ff; background: #f3f7ff; }
.choice-grid input { margin-top: .2rem; }
.choice-grid strong, .choice-grid small { display: block; }
.choice-grid small { margin-top: .15rem; color: var(--muted); font-size: .68rem; font-weight: 500; }
.switch-field label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .7rem; }
.switch-field strong, .switch-field small { display: block; }
.switch-field small { margin-top: .18rem; color: var(--muted); font-weight: 500; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 1rem; }
.detail-main, .detail-side { padding-bottom: 1rem; }
.project-description { min-height: 120px; margin: 0; padding: 1.5rem; color: #48566d; line-height: 1.75; white-space: pre-line; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 1.4rem 1rem; }
.detail-grid > div, .confirm-summary > div { padding: 1rem; background: #f7f9fc; border: 1px solid var(--line); border-radius: .75rem; }
.detail-grid dt, .history-list dt, .confirm-summary dt { color: var(--muted); font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.detail-grid dd, .history-list dd, .confirm-summary dd { margin: .3rem 0 0; font-weight: 750; overflow-wrap: anywhere; }
.detail-side { padding: 1.4rem; }
.detail-side h2 { font-size: 1.15rem; }
.history-list { display: grid; gap: .8rem; margin: 1.2rem 0; }
.history-list div { padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.danger-link { color: var(--red); font-size: .8rem; font-weight: 800; text-decoration: none; }
.confirm-card { max-width: 680px; margin: 4vh auto; padding: clamp(1.5rem, 4vw, 2.8rem); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: var(--shadow); }
.confirm-card h1 { font-size: 2rem; letter-spacing: -.04em; }
.confirm-card > p { color: var(--muted); }
.danger-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 1rem; color: #fff; background: var(--red); border-radius: 1rem; font-size: 1.4rem; font-weight: 900; }
.confirm-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin: 1.4rem 0; text-align: left; }
.role-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.role-list span, .audit-action { padding: .25rem .45rem; color: #42506a; background: #edf2f8; border-radius: .35rem; font-size: .65rem; font-weight: 800; }
.audit-table { min-width: 1080px; }
.audit-details { max-width: 360px; white-space: normal; }

.public-body { background: var(--navy); }
.public-shell { min-height: 100vh; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(480px, .9fr); }
.auth-story { position: relative; display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 5rem); color: #fff; background: radial-gradient(circle at 85% 15%, rgba(83,212,255,.22), transparent 28%), radial-gradient(circle at 10% 100%, rgba(37,99,235,.28), transparent 35%), linear-gradient(145deg, #071326, #0d2b59); overflow: hidden; }
.auth-story::after { content: ""; position: absolute; width: 430px; height: 430px; right: -240px; bottom: -250px; border: 70px solid rgba(255,255,255,.06); border-radius: 50%; }
.brand-public { position: relative; z-index: 1; }
.auth-story-copy { position: relative; z-index: 1; max-width: 720px; margin: auto 0; }
.auth-story-copy .eyebrow { color: var(--cyan); }
.auth-story-copy h1 { margin: 0; font-size: clamp(3rem, 6vw, 6rem); line-height: .96; letter-spacing: -.07em; }
.auth-story-copy p { max-width: 590px; margin: 1.6rem 0; color: #c6d6eb; font-size: 1.08rem; line-height: 1.7; }
.security-points { display: flex; flex-wrap: wrap; gap: .75rem; }
.security-points span { padding: .55rem .75rem; color: #d9e7f8; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: .55rem; font-size: .72rem; font-weight: 750; }
.auth-panel { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 5rem); background: #f7f9fc; }
.login-card { width: min(460px, 100%); padding: clamp(1.4rem, 4vw, 2.5rem); background: #fff; border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: 0 28px 70px rgba(10, 30, 66, .12); }
.login-heading h2 { margin-bottom: .55rem; font-size: 2rem; letter-spacing: -.045em; }
.login-heading p { margin-bottom: 1.7rem; color: var(--muted); }
.login-footnote { margin: 1.4rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.6; text-align: center; }
.state-page { max-width: 720px; margin: 8vh auto; padding: 3rem 1.5rem; text-align: center; }
.state-page h1 { margin-bottom: .8rem; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.05em; }
.state-page p { margin-bottom: 1.4rem; color: var(--muted); }
.state-icon, .state-code { margin-bottom: 1rem; color: var(--blue); font-size: 4rem; font-weight: 950; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-layout { grid-template-columns: 1fr 1fr; }
  .auth-story-copy h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; width: min(320px, 88vw); height: 100dvh; overflow-y: auto; padding-top: max(1.35rem, env(safe-area-inset-top)); padding-bottom: max(1.35rem, env(safe-area-inset-bottom)); padding-left: max(1rem, env(safe-area-inset-left)); transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility .22s ease; box-shadow: 24px 0 60px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .sidebar-backdrop { position: fixed; z-index: 35; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(6, 16, 35, .54); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .sidebar-toggle { display: grid; place-items: center; }
  .user-copy { display: none; }
  .detail-layout { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 350px; }
  .auth-story-copy { margin-top: 3.5rem; }
}
@media (max-width: 720px) {
  .app-content { min-height: 100dvh; }
  .page-content { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .topbar { position: sticky; z-index: 30; top: 0; min-height: 64px; gap: .65rem; padding: .65rem max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left)); }
  .topbar-title { min-width: 0; }
  .topbar-title small { display: none; }
  .topbar-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-avatar { display: none; }
  .user-menu { gap: .35rem; }
  .user-menu .btn { min-height: 44px; padding-inline: .75rem; }
  .page-hero { align-items: flex-start; flex-direction: column; gap: 1rem; margin-bottom: 1rem; padding: .35rem 0; }
  .page-hero h1, .page-hero.compact h1 { font-size: clamp(1.85rem, 10vw, 2.35rem); line-height: 1.08; }
  .page-hero p { margin-top: .6rem; font-size: .94rem; line-height: 1.55; }
  .page-hero > .btn, .page-hero > form, .page-actions { width: 100%; }
  .page-hero > .btn, .page-actions .btn { flex: 1 1 140px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .form-grid, .choice-grid, .detail-grid, .confirm-summary { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
  .metric-card { min-height: 122px; padding: 1rem; }
  .metric-card strong { font-size: 1.9rem; }
  .panel { border-radius: .85rem; box-shadow: 0 12px 34px rgba(24, 39, 75, .07); }
  .panel-heading { align-items: flex-start; flex-direction: column; padding: 1rem; }
  .panel-heading > a { min-height: 44px; display: inline-flex; align-items: center; }
  .panel-meta { padding: .8rem 1rem; }
  .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
  .filter-bar > div { width: 100%; grid-column: 1 / -1; }
  .filter-bar .btn { width: 100%; min-height: 48px; }
  .filter-search { min-width: 0; }
  .form-control, .form-select { min-height: 48px; font-size: 16px; }
  .form-panel { padding: 1rem; }
  .form-panel.narrow { max-width: none; }
  .form-field label, .form-field legend { font-size: .82rem; }
  .form-field > small { font-size: .76rem; line-height: 1.5; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; min-height: 48px; }
  .detail-main, .detail-side { padding-bottom: 0; }
  .detail-grid { gap: .7rem; margin: 0 .85rem .85rem; }
  .detail-side { padding: 1rem; }
  .confirm-card { margin: 1rem auto; padding: 1.25rem 1rem; border-radius: 1rem; }
  .confirm-card h1 { font-size: 1.75rem; }
  .confirm-summary { gap: .6rem; }
  .empty-state { padding: 2.75rem 1rem; }
  .table-responsive { overflow: visible; }
  .data-table, .data-table tbody { display: block; width: 100%; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
  .data-table tbody { display: grid; gap: .75rem; padding: .8rem; background: #f6f8fc; }
  .data-table tbody tr { display: grid; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 5px 18px rgba(24, 39, 75, .04); overflow: hidden; }
  .data-table td, .data-table td.actions-cell { display: grid; grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr); gap: .8rem; align-items: start; padding: .72rem .85rem; border-bottom: 1px solid #edf0f5; font-size: .88rem; }
  .data-table td:last-child { border-bottom: 0; }
  .data-table td::before { content: attr(data-label); color: #7b8799; font-size: .65rem; font-weight: 850; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }
  .data-table td > * { min-width: 0; justify-self: start; }
  .data-table td.actions-cell::before { grid-row: 1 / span 3; }
  .data-table td.actions-cell > a { grid-column: 2; min-height: 40px; display: inline-flex; align-items: center; padding: .35rem .65rem; background: #edf3ff; border-radius: .5rem; }
  .record-link { min-width: 0; }
  .category-table td:first-child { min-width: 0; }
  .category-record { min-width: 0; }
  .category-filter > div:not(.filter-search) { min-width: 0; }
  .product-filter .category-filter-field { min-width: 0; }
  .product-record { min-width: 0; }
  .product-list { padding: .75rem; background: #f6f8fc; border-top: 1px solid var(--line); }
  .product-list-header { display: none; }
  .product-disclosure { margin-bottom: .7rem; border: 1px solid var(--line); border-radius: .85rem; box-shadow: 0 5px 18px rgba(24, 39, 75, .04); overflow: hidden; }
  .product-disclosure:last-child { margin-bottom: 0; border-bottom: 1px solid var(--line); }
  .product-disclosure.is-open { box-shadow: 0 12px 28px rgba(24, 68, 132, .1), inset 3px 0 0 var(--blue); }
  .product-disclosure-summary { grid-template-columns: minmax(0, 1fr) 46px; gap: .55rem .8rem; min-height: 0; padding: .85rem; }
  .product-summary-sku { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
  .product-summary-label { display: inline; color: #7b8799; font-size: .63rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .product-disclosure-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; }
  .product-disclosure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: .8rem; }
  .product-disclosure-categories, .product-disclosure-skus, .product-disclosure-actions-field { grid-column: 1 / -1; }
  .product-disclosure-field:not(.product-disclosure-categories):not(.product-disclosure-skus):not(.product-disclosure-actions-field) { grid-column: auto; }
  .product-disclosure-field { padding: .78rem; }
  .product-detail-heading { align-items: flex-start; }
  .product-detail-heading > img, .product-detail-placeholder { width: 64px; height: 64px; flex-basis: 64px; border-radius: .8rem; }
  .detail-grid .detail-span-2 { grid-column: auto; }
  .record-link span, .record-link strong, .audit-details { overflow-wrap: anywhere; }
  .audit-table { min-width: 0; }
  .audit-details { max-width: none; }
  .pagination-bar { align-items: flex-start; flex-direction: column; }
  .pagination-bar > div { width: 100%; }
  .pagination-bar .btn { flex: 1; min-height: 44px; }
  .bulk-action-bar { align-items: stretch; flex-wrap: wrap; gap: .65rem; padding: .8rem; }
  .bulk-select-all { min-height: 44px; }
  .bulk-selection-count { display: flex; align-items: center; margin-left: auto; }
  .bulk-action-bar .btn { width: 100%; min-height: 46px; }
  .product-key-table .selection-cell { display: flex; align-items: center; justify-content: space-between; width: auto; text-align: left !important; }
  .product-key-table .selection-cell::before { content: attr(data-label); }
  .order-table { min-width: 0; }
  .order-line-list { min-width: 0; max-width: none; }
  .key-stock-live-note { align-items: flex-start; flex-direction: column; }
  .key-stock-table .stock-category-row { display: block; background: transparent; border: 0; border-radius: .65rem; box-shadow: none; }
  .key-stock-table .stock-category-row th { display: block; width: 100%; padding: .7rem .85rem; border: 1px solid #d9e6f7; border-radius: .65rem; }
  .key-stock-table .key-stock-product { min-width: 0; }
  .key-stock-table .stock-number-cell { width: auto; text-align: left !important; }
  .key-stock-table .stock-quantity { min-width: 0; justify-items: start; }
  .app-footer { justify-content: center; padding-bottom: max(1rem, env(safe-area-inset-bottom)); text-align: center; }
  .auth-story { min-height: auto; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 1.5rem; }
  .auth-story-copy { margin: 3rem 0 0; }
  .auth-story-copy h1 { max-width: 520px; font-size: clamp(2rem, 10vw, 2.8rem); }
  .auth-story-copy p { margin: 1rem 0; font-size: .95rem; line-height: 1.55; }
  .security-points { gap: .45rem; }
  .security-points span { padding: .45rem .6rem; }
  .auth-panel { padding: .85rem max(.85rem, env(safe-area-inset-right)) max(.85rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left)); }
  .login-card { padding: 1.25rem; border-radius: 1rem; }
  .login-heading h2 { font-size: 1.75rem; }
}
@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 112px; }
  .topbar-title strong { font-size: .9rem; }
  .user-menu .btn { padding-inline: .6rem; font-size: .75rem; }
  .data-table td, .data-table td.actions-cell { grid-template-columns: 84px minmax(0, 1fr); gap: .65rem; }
  .product-list { padding: .6rem; }
  .product-disclosure-summary { padding: .75rem; }
  .product-record img, .product-image-placeholder { width: 50px; height: 50px; flex-basis: 50px; }
  .product-record-copy strong { font-size: .82rem; }
  .product-disclosure-grid { grid-template-columns: 1fr; padding: .7rem; }
  .product-disclosure-categories, .product-disclosure-skus, .product-disclosure-actions-field { grid-column: auto; }
  .product-disclosure-actions .btn { flex: 1 1 130px; justify-content: center; min-height: 42px; }
}
@media (max-width: 860px) and (max-height: 560px) and (orientation: landscape) {
  .auth-story { display: none; }
  .auth-panel { min-height: 100dvh; }
}
@media (pointer: coarse) {
  .side-nav a, .btn, .sidebar-toggle { min-height: 44px; }
  .form-check-input { min-width: 1.15rem; min-height: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Polished dashboard visual system */
.app-body {
  background-color: #f4f7fb;
  background-image:
    radial-gradient(circle at 7% 3%, rgba(59, 130, 246, .075), transparent 24rem),
    radial-gradient(circle at 94% 12%, rgba(45, 212, 191, .055), transparent 22rem),
    linear-gradient(rgba(255, 255, 255, .42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .42) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
}
.app-shell { grid-template-columns: 272px minmax(0, 1fr); }
.sidebar { padding: 1.45rem 1.1rem; box-shadow: 10px 0 34px rgba(8, 17, 34, .09); }
.side-nav { gap: .36rem; }
.side-nav a { min-height: 46px; padding: .76rem .9rem; border-radius: .78rem; }
.side-nav a.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(3, 12, 28, .15); }
.topbar { min-height: 80px; border-bottom-color: rgba(216, 225, 238, .88); box-shadow: 0 4px 20px rgba(24, 39, 75, .035); }
.page-content { width: min(1520px, 100%); }

.page-content > .page-hero {
  position: relative;
  isolation: isolate;
  min-height: 176px;
  align-items: center;
  margin-bottom: 1.35rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(83, 212, 255, .24), transparent 18rem),
    radial-gradient(circle at 14% 120%, rgba(64, 116, 255, .27), transparent 19rem),
    linear-gradient(135deg, #0a1a36 0%, #102f61 58%, #174b8c 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem;
  box-shadow: 0 22px 55px rgba(10, 30, 66, .16);
  overflow: hidden;
}
.page-content > .page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  right: -75px;
  bottom: -165px;
  border: 46px solid rgba(255,255,255,.055);
  border-radius: 50%;
}
.page-content > .page-hero > * { position: relative; z-index: 1; }
.page-content > .page-hero .eyebrow { color: #70ddff; }
.page-content > .page-hero h1 { color: #fff; text-wrap: balance; }
.page-content > .page-hero p { color: #c7d7ec; line-height: 1.65; }
.page-content > .page-hero .btn-outline-secondary {
  color: #e8f2ff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.page-content > .page-hero .btn-outline-secondary:hover { color: #0b2853; background: #fff; border-color: #fff; }
.page-content > .page-hero .btn-primary { background: linear-gradient(135deg, #3a7cff, #1e5ad7); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 25px rgba(0,0,0,.22); }
.page-content > .page-hero .product-import-trigger {
  color: #0b2853;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 10px 24px rgba(4, 21, 50, .2);
  font-weight: 600;
}

/* Email delivery settings */
.email-settings-hero {
  position: relative;
  isolation: isolate;
  min-height: 194px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(74, 222, 255, .24), transparent 17rem),
    radial-gradient(circle at 10% 135%, rgba(89, 112, 255, .36), transparent 22rem),
    linear-gradient(135deg, #081a37 0%, #103873 62%, #0a5f82 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.35rem;
  box-shadow: 0 24px 58px rgba(7, 31, 69, .18);
  overflow: hidden;
}
.email-settings-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  right: -100px;
  bottom: -215px;
  border: 52px solid rgba(255,255,255,.06);
  border-radius: 50%;
}
.email-hero-copy { min-width: 0; display: flex; align-items: center; gap: 1.25rem; }
.email-hero-icon { width: 68px; height: 68px; display: grid; flex: 0 0 68px; place-items: center; color: #071b36; background: linear-gradient(145deg, #8be9ff, #4fd5ff); border: 1px solid rgba(255,255,255,.55); border-radius: 1.15rem; box-shadow: 0 16px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55); }
.email-hero-icon svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.email-hero-eyebrow { display: block; margin-bottom: .6rem; color: #7be5ff; font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.email-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(2rem, 3.8vw, 3.35rem); line-height: 1.04; letter-spacing: -.052em; text-wrap: balance; }
.email-hero-copy p { max-width: 735px; margin: .75rem 0 0; color: #c9daef; font-size: .98rem; line-height: 1.65; }
.email-hero-status { min-width: 184px; display: flex; align-items: center; gap: .72rem; padding: .85rem 1rem; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: .9rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.email-hero-status small, .email-hero-status strong { display: block; }
.email-hero-status small { margin-bottom: .14rem; color: #b9cde5; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.email-hero-status strong { font-size: .88rem; }
.email-status-pulse { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.09); }
.email-mode-live .email-status-pulse { background: #45e0a7; }
.email-mode-demo .email-status-pulse { background: #ffc466; }
.email-mode-off .email-status-pulse { background: #a9bad0; }

.email-security-strip { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.15rem; padding: .9rem 1.05rem; color: #23554a; background: linear-gradient(90deg, #ecfbf5, #f5fffb); border: 1px solid #cdebe0; border-radius: .9rem; box-shadow: 0 8px 24px rgba(20, 105, 82, .045); }
.email-security-icon { width: 36px; height: 36px; display: grid; flex: 0 0 36px; place-items: center; color: #087555; background: #d8f5e9; border-radius: .68rem; }
.email-security-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.email-security-strip > div { min-width: 0; display: grid; gap: .12rem; }
.email-security-strip strong { color: #145c49; font-size: .82rem; }
.email-security-strip > div span { color: #53766c; font-size: .74rem; line-height: 1.45; }
.email-security-badge { margin-left: auto; padding: .32rem .6rem; color: #087555; background: #fff; border: 1px solid #c4e5d8; border-radius: 999px; font-size: .67rem; font-weight: 850; white-space: nowrap; }

.email-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); gap: 1.2rem; align-items: start; }
.email-settings-form { min-width: 0; display: grid; gap: 1.05rem; }
.email-settings-errors { margin: 0; padding: 1rem 1.1rem; color: #85283a; background: linear-gradient(145deg, #fff3f5, #ffeaee); border: 1px solid #efc3cc; border-left: 4px solid #cf3f59; border-radius: .9rem; box-shadow: 0 12px 28px rgba(150, 40, 65, .08); }
.email-settings-errors:empty { display: none; }
.email-settings-errors:focus { outline: 3px solid rgba(207,63,89,.16); outline-offset: 3px; }
.email-settings-errors ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.15rem; }
.email-settings-errors li { font-size: .74rem; font-weight: 650; line-height: 1.45; }
.email-settings-card, .email-side-card { background: rgba(255,255,255,.97); border: 1px solid #dce5f0; border-radius: 1.12rem; box-shadow: 0 16px 42px rgba(24, 39, 75, .07); overflow: hidden; }
.email-card-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; background: linear-gradient(180deg, #fff, #fbfcff); border-bottom: 1px solid #e5ebf3; }
.email-card-heading { min-width: 0; display: flex; align-items: center; gap: .9rem; }
.email-card-heading > span:last-child { min-width: 0; }
.email-card-heading small, .email-side-card-header small, .email-advanced-card summary small { display: block; margin-bottom: .28rem; color: #3974c4; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.email-card-heading h2, .email-side-card-header h2 { margin: 0; color: #17243a; font-size: 1.08rem; letter-spacing: -.025em; }
.email-card-heading p { margin: .3rem 0 0; color: #6a778a; font-size: .75rem; line-height: 1.45; }
.email-card-icon, .email-side-icon { display: grid; flex: 0 0 auto; place-items: center; color: #2563c7; background: linear-gradient(145deg, #edf5ff, #e3efff); border: 1px solid #d4e5fb; box-shadow: 0 7px 17px rgba(37,99,199,.08); }
.email-card-icon { width: 46px; height: 46px; border-radius: .82rem; }
.email-side-icon { width: 40px; height: 40px; border-radius: .72rem; }
.email-card-icon svg, .email-side-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.email-card-chip { padding: .3rem .58rem; color: #0c6d53; background: #e8f8f2; border: 1px solid #ccecdf; border-radius: 999px; font-size: .65rem; font-weight: 850; white-space: nowrap; }
.email-card-body { padding: 1.3rem 1.35rem 1.35rem; }
.email-settings-card .form-field { min-width: 0; margin-bottom: 0; }
.email-settings-card .form-field label, .email-field-label { margin-bottom: .42rem; color: #324058; font-size: .74rem; font-weight: 800; }
.email-settings-card .form-field > small { margin-top: .38rem; color: #748094; font-size: .69rem; line-height: 1.45; }
.email-settings-card .field-validation:empty { display: none; }
.email-settings-card .form-control { min-height: 47px; padding: .68rem .78rem; background: #fbfcfe; border-color: #cfd9e8; border-radius: .68rem; box-shadow: inset 0 1px 2px rgba(24,39,75,.025); }
.email-settings-card .form-control:hover { border-color: #b8c7db; }
.email-settings-card .form-control:focus { background: #fff; }
.email-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.1rem; }
.email-span-2 { grid-column: span 2; }
.email-label-row { min-height: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.email-label-row label { margin-bottom: 0 !important; }
.email-saved-secret { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .48rem; color: #087555; background: #e8f8f2; border-radius: 999px; font-size: .62rem; font-weight: 850; white-space: nowrap; }
.email-input-shell { position: relative; }
.email-input-shell > span { position: absolute; z-index: 1; left: .78rem; top: 50%; width: 18px; height: 18px; color: #718096; transform: translateY(-50%); pointer-events: none; }
.email-input-shell > span svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.email-input-shell .form-control { padding-left: 2.3rem; }
.email-toggle-input { width: 2.65rem !important; height: 1.42rem !important; flex: 0 0 auto; margin: 0 !important; cursor: pointer; }
.email-inline-toggle { min-height: 74px; display: flex !important; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 !important; padding: .75rem .85rem; background: #f7faff; border: 1px solid #dbe5f2; border-radius: .72rem; cursor: pointer; }
.email-inline-toggle strong, .email-inline-toggle small { display: block; }
.email-inline-toggle strong { color: #273850; font-size: .76rem; }
.email-inline-toggle small { margin-top: .18rem; color: #778499; font-size: .65rem; font-weight: 500; line-height: 1.4; }
.email-remove-secret { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1rem; padding: .8rem .9rem; color: #8a3041; background: #fff6f7; border: 1px solid #f1d5da; border-radius: .72rem; cursor: pointer; }
.email-remove-secret input { margin-top: .15rem; }
.email-remove-secret strong, .email-remove-secret small { display: block; }
.email-remove-secret strong { font-size: .75rem; }
.email-remove-secret small { margin-top: .16rem; color: #97616b; font-size: .67rem; font-weight: 500; }

.email-mode-section { border-color: #cadcf5; box-shadow: 0 18px 46px rgba(41, 92, 167, .09); }
.email-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .78rem; }
.email-mode-card { position: relative; min-height: 178px; display: flex; flex-direction: column; align-items: flex-start; gap: .58rem; padding: 1rem; background: #fbfcfe; border: 1px solid #dae3ef; border-radius: .9rem; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; overflow: hidden; }
.email-mode-card:hover { transform: translateY(-1px); border-color: #b8c9e1; box-shadow: 0 10px 24px rgba(28,68,125,.08); }
.email-mode-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.email-mode-selector { position: absolute; top: .9rem; right: .9rem; width: 18px; height: 18px; background: #fff; border: 2px solid #c6d0dd; border-radius: 50%; }
.email-mode-card:has(input:checked) { background: #f2f7ff; border-color: #6e9fed; box-shadow: 0 0 0 3px rgba(69, 126, 220, .11), 0 12px 26px rgba(28,68,125,.08); }
.email-mode-card:has(input:focus-visible) { outline: 3px solid rgba(37,99,235,.25); outline-offset: 2px; }
.email-mode-card:has(input:checked) .email-mode-selector { background: #2563d2; border-color: #2563d2; box-shadow: inset 0 0 0 4px #fff; }
.email-mode-card-live:has(input:checked) { background: #f0fbf7; border-color: #48ad8b; box-shadow: 0 0 0 3px rgba(30, 159, 115, .1), 0 12px 26px rgba(23,114,83,.07); }
.email-mode-card-live:has(input:checked) .email-mode-selector { background: #15946b; border-color: #15946b; }
.email-mode-card-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #52647b; background: #eef2f7; border-radius: .72rem; }
.email-mode-card-demo .email-mode-card-icon { color: #a35d09; background: #fff4df; }
.email-mode-card-live .email-mode-card-icon { color: #0c7d5a; background: #e3f7ef; }
.email-mode-card-icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.email-mode-copy { min-width: 0; display: grid; gap: .28rem; }
.email-mode-copy strong { color: #213049; font-size: .84rem; }
.email-mode-copy small { color: #69778b; font-size: .69rem; font-weight: 500; line-height: 1.47; }
.email-mode-tag { margin-top: auto; padding: .25rem .46rem; color: #5e6d82; background: #edf1f6; border-radius: 999px; font-size: .59rem; font-weight: 850; }
.email-mode-card-demo .email-mode-tag { color: #8b550e; background: #fff0d2; }
.email-mode-card-live .email-mode-tag { color: #0b7556; background: #ddf4eb; }
.email-mode-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.85fr); gap: 1rem; align-items: end; margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid #e6ebf2; }
.email-toggle-card { min-height: 106px; display: flex; align-items: center; gap: .72rem; margin: 0; padding: .85rem; background: linear-gradient(145deg, #f8fbff, #f1f6fd); border: 1px solid #d8e3f1; border-radius: .82rem; cursor: pointer; }
.email-toggle-card > span:nth-child(2) { min-width: 0; flex: 1; }
.email-toggle-card strong, .email-toggle-card small { display: block; }
.email-toggle-card strong { color: #253751; font-size: .74rem; }
.email-toggle-card small { margin-top: .25rem; color: #748195; font-size: .66rem; font-weight: 500; line-height: 1.45; }
.email-toggle-icon { width: 36px; height: 36px; display: grid; flex: 0 0 36px; place-items: center; color: #3976c9; background: #e5f0ff; border-radius: .66rem; }
.email-toggle-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.email-subsection + .email-subsection { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid #e7ecf3; }
.email-subsection-heading { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .85rem; }
.email-subsection-heading strong { color: #2d3d56; font-size: .8rem; }
.email-subsection-heading small { color: #78869a; font-size: .68rem; }

.email-advanced-card summary { min-height: 94px; display: grid; grid-template-columns: 46px minmax(0,1fr) 24px; align-items: center; gap: .9rem; padding: 1.15rem 1.35rem; background: linear-gradient(180deg, #fff, #fbfcff); cursor: pointer; list-style: none; }
.email-advanced-card summary::-webkit-details-marker { display: none; }
.email-advanced-card summary strong, .email-advanced-card summary em { display: block; }
.email-advanced-card summary strong { color: #26354d; font-size: .9rem; }
.email-advanced-card summary em { margin-top: .25rem; color: #778498; font-size: .68rem; font-style: normal; line-height: 1.4; }
.email-summary-chevron { width: 10px; height: 10px; justify-self: end; border-right: 2px solid #69809e; border-bottom: 2px solid #69809e; transform: rotate(45deg); transition: transform .18s ease; }
.email-advanced-card[open] .email-summary-chevron { transform: rotate(225deg); }
.email-advanced-body { padding: 1.25rem 1.35rem; border-top: 1px solid #e5ebf3; }
.email-advanced-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }

.email-save-bar { position: sticky; z-index: 8; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1rem; color: #fff; background: rgba(12, 31, 61, .96); border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; box-shadow: 0 18px 45px rgba(7,22,47,.23); backdrop-filter: blur(14px); }
.email-save-copy { min-width: 0; display: flex; align-items: center; gap: .68rem; }
.email-save-copy > span:last-child { min-width: 0; }
.email-save-copy strong, .email-save-copy small { display: block; }
.email-save-copy strong { font-size: .78rem; }
.email-save-copy small { margin-top: .14rem; color: #aebed4; font-size: .66rem; line-height: 1.4; }
.email-save-icon { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; color: #083f2d; background: #62e1b2; border-radius: .63rem; }
.email-save-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.email-save-button { min-width: 184px; min-height: 47px; background: linear-gradient(135deg, #397aff, #1d5ad7); border-color: rgba(255,255,255,.15); }
.email-save-button svg, .email-test-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.email-settings-aside { min-width: 0; display: grid; gap: 1rem; position: sticky; top: 1rem; }
.email-side-card { padding: 1.15rem; }
.email-side-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.email-side-card-header h2 { font-size: .98rem; }
.email-readiness-list { display: grid; gap: .78rem; }
.email-readiness-item { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: .65rem; align-items: start; }
.email-check { width: 30px; height: 30px; display: grid; place-items: center; color: #68788e; background: #edf1f6; border: 1px solid #dce3eb; border-radius: 50%; font-size: .69rem; font-weight: 850; }
.email-readiness-item.is-ready .email-check { color: #fff; background: #15946b; border-color: #15946b; box-shadow: 0 5px 12px rgba(21,148,107,.2); }
.email-readiness-item strong, .email-readiness-item small { display: block; }
.email-readiness-item strong { color: #2a3a52; font-size: .75rem; }
.email-readiness-item small { margin-top: .16rem; color: #758298; font-size: .66rem; line-height: 1.45; }
.email-mode-notice { display: grid; gap: .25rem; margin-top: 1rem; padding: .8rem; border-radius: .75rem; }
.email-mode-notice strong { font-size: .73rem; }
.email-mode-notice span { font-size: .65rem; line-height: 1.5; }
.email-mode-notice.email-mode-off { color: #59687c; background: #f1f4f8; border: 1px solid #e1e6ed; }
.email-mode-notice.email-mode-demo { color: #87520b; background: #fff6e4; border: 1px solid #f2dfb4; }
.email-mode-notice.email-mode-live { color: #0b6f52; background: #e9f8f2; border: 1px solid #cdeadd; }
.email-test-card > p { margin: -.1rem 0 .9rem; color: #6d7a8e; font-size: .72rem; line-height: 1.55; }
.email-test-form { display: grid; gap: .75rem; }
.email-test-form .form-field { margin: 0; }
.email-test-form .form-field label { font-size: .72rem; }
.email-test-button { width: 100%; min-height: 46px; }
.email-preview-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; padding: .7rem .85rem; color: #fff; text-align: left; background: linear-gradient(135deg, #0d6048, #138561); border: 1px solid #0e7355; box-shadow: 0 11px 24px rgba(12,110,79,.2); }
.email-preview-button:hover, .email-preview-button:focus { color: #fff; background: linear-gradient(135deg, #0b533f, #0f7656); border-color: #0b654b; transform: translateY(-1px); }
.email-preview-button svg { width: 23px; height: 23px; flex: 0 0 23px; stroke: #9af0cf; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.email-preview-button span { min-width: 0; display: grid; gap: .16rem; }
.email-preview-button strong { font-size: .73rem; line-height: 1.2; }
.email-preview-button small { color: #bdebd9; font-size: .61rem; line-height: 1.25; }
.email-test-help { display: block; margin-top: .75rem; color: #7b8798; font-size: .65rem; line-height: 1.45; }
.email-demo-route { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: .5rem; margin-bottom: .8rem; padding: .65rem; color: #88500a; background: #fff6e4; border: 1px solid #f1deb6; border-radius: .65rem; font-size: .66rem; line-height: 1.45; overflow-wrap: anywhere; }
.email-demo-route > span:first-child { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: #d88817; border-radius: 50%; font-size: .65rem; font-weight: 850; }
.email-safety-card { background: linear-gradient(145deg, #0e2447, #123a67); border-color: #183f6c; box-shadow: 0 18px 40px rgba(10,35,70,.16); }
.email-safety-card .email-side-icon { color: #063b2b; background: #71e2b8; border-color: rgba(255,255,255,.2); }
.email-safety-card .email-side-card-header small { color: #75ddff; }
.email-safety-card .email-side-card-header h2 { color: #fff; }
.email-safety-list { display: grid; gap: .65rem; margin: 0; padding: 0; color: #c9d8e9; list-style: none; }
.email-safety-list li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: .55rem; align-items: start; font-size: .68rem; line-height: 1.45; }
.email-safety-list li span { width: 22px; height: 22px; display: grid; place-items: center; color: #062e22; background: #62dbaa; border-radius: 50%; font-size: .62rem; font-weight: 900; }

@media (max-width: 1180px) {
  .email-settings-layout { grid-template-columns: minmax(0,1fr) 300px; }
  .email-mode-controls { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 1020px) {
  .email-settings-layout { grid-template-columns: 1fr; }
  .email-settings-aside { position: static; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; }
  .email-side-card { height: 100%; }
  .email-mode-controls { grid-template-columns: minmax(0,1fr) minmax(280px,.85fr); }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .email-settings-aside { grid-template-columns: 1fr 1fr; }
  .email-safety-card { grid-column: 1 / -1; }
  .email-advanced-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .page-content > .page-hero { min-height: 0; padding: 1.25rem; border-radius: 1rem; }
  .metric-grid { gap: .75rem; }
  .metric-card { min-height: 125px; padding: 1.05rem; border-radius: .9rem; }
  .filter-bar > div:not(.filter-search) { min-width: 0; }
  .panel-heading { min-height: 0; }
  .email-settings-hero { min-height: 0; align-items: flex-start; flex-direction: column; gap: 1.15rem; padding: 1.3rem; border-radius: 1.05rem; }
  .email-hero-copy { align-items: flex-start; }
  .email-hero-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: .9rem; }
  .email-hero-icon svg { width: 27px; height: 27px; }
  .email-hero-copy h1 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .email-hero-copy p { font-size: .88rem; line-height: 1.55; }
  .email-hero-status { width: 100%; min-width: 0; }
  .email-security-strip { align-items: flex-start; }
  .email-security-badge { display: none; }
  .email-mode-grid, .email-field-grid, .email-mode-controls, .email-advanced-grid { grid-template-columns: 1fr; }
  .email-span-2 { grid-column: auto; }
  .email-mode-card { min-height: 0; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: .35rem .7rem; padding: .9rem 2.75rem .9rem .9rem; }
  .email-mode-card-icon { grid-row: 1 / span 2; }
  .email-mode-tag { align-self: start; justify-self: start; margin-top: .18rem; }
  .email-card-header { min-height: 0; align-items: flex-start; padding: 1rem; }
  .email-card-heading { align-items: flex-start; }
  .email-card-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: .72rem; }
  .email-card-icon svg { width: 19px; height: 19px; }
  .email-card-chip { display: none; }
  .email-card-body, .email-advanced-body { padding: 1rem; }
  .email-subsection-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .email-advanced-card summary { grid-template-columns: 40px minmax(0,1fr) 18px; padding: 1rem; }
  .email-settings-aside { grid-template-columns: 1fr; }
  .email-safety-card { grid-column: auto; }
  .email-save-bar { position: static; align-items: stretch; flex-direction: column; padding: .9rem; }
  .email-save-button { width: 100%; min-width: 0; min-height: 50px; }
}
@media (max-width: 460px) {
  .email-hero-copy { flex-direction: column; gap: .8rem; }
  .email-security-strip > div span { display: none; }
  .email-settings-card, .email-side-card { border-radius: .9rem; }
  .email-card-heading p { display: none; }
  .email-label-row { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .email-inline-toggle { min-height: 78px; }
  .email-toggle-card { align-items: flex-start; }
  .email-toggle-card .email-toggle-input { margin-top: .2rem !important; }
  .email-save-copy small { display: none; }
}

/* Order fulfillment detail cards */
.fulfillment-panel { grid-column: 1; }
.fulfillment-lines { display: grid; gap: .72rem; }
.fulfillment-line { min-height: 62px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem .9rem; background: linear-gradient(145deg, #f9fbff, #f2f7fd); border: 1px solid #dce6f2; border-radius: .76rem; }
.fulfillment-line span, .fulfillment-meta { color: #65758b; font-size: .82rem; }
.fulfillment-summary { margin: 0; color: #45556c; font-size: .93rem; line-height: 1.7; }
.fulfillment-action { margin-top: 1rem; }
.inline-notice { display: grid; gap: .25rem; padding: 1rem; border-radius: .78rem; }
.inline-notice.warning { color: #8d5209; background: linear-gradient(145deg, #fff8e9, #fff3d9); border: 1px solid #efd79e; }
.inline-notice.danger { margin-top: 1rem; color: #92263b; background: #fff1f4; border: 1px solid #f0cbd3; }
.status-pending { color: #1d56b3; background: #eaf2ff; border-color: #d1e0f8; }
.fulfillment-meta { margin: .85rem 0 0; }
.engagement-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.engagement-grid > div { min-height: 116px; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: 1rem; background: linear-gradient(145deg, #f9fbff, #f1f6fc); border: 1px solid #dce5f0; border-radius: .82rem; }
.engagement-grid > div:nth-child(2) { background: linear-gradient(145deg, #f5fbff, #edf7ff); }
.engagement-grid > div:nth-child(3) { background: linear-gradient(145deg, #f3fbf7, #eaf8f1); }
.engagement-grid span, .engagement-grid small, .tracking-note { color: #68788e; }
.engagement-grid span { font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.engagement-grid strong { color: #20334f; font-size: 1.12rem; }
.engagement-grid small { font-size: .67rem; line-height: 1.4; }
.tracking-note { margin: 1rem 0 0; font-size: .74rem; line-height: 1.55; }
.sent-keys-section { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid #e2e8f1; }
.sent-keys-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sent-keys-heading h3 { margin: .2rem 0 0; color: #20314b; font-size: 1.08rem; }
.key-safety-copy { color: #68788d; font-size: .78rem; line-height: 1.6; }
.key-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .9rem 0; padding: .85rem 1rem; color: #1d4e91; background: linear-gradient(145deg, #edf5ff, #e6f0ff); border: 1px solid #c8dcf7; border-radius: .78rem; }
.key-action-bar > span { font-size: .78rem; font-weight: 750; }
.sent-key-list { display: grid; gap: .85rem; }
.sent-key-card { display: grid; gap: .58rem; padding: 1.05rem; background: linear-gradient(145deg, #fbfcfe, #f5f8fc); border: 1px solid #dbe4ef; border-radius: .86rem; box-shadow: 0 7px 20px rgba(24,39,75,.04); }
.sent-key-card.active-key { border-left: 4px solid #15946b; }
.sent-key-card.replaced-key { opacity: .8; border-left: 4px solid #94a3b8; }
.sent-key-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #64748b; font-size: .74rem; }
.sent-key-sku { color: #68788d; font-size: .78rem; }
.sent-key-card code { display: block; padding: .78rem; color: #14243a; background: #fff; border: 1px solid #dbe4ef; border-radius: .58rem; font-size: .87rem; overflow-wrap: anywhere; box-shadow: inset 0 1px 2px rgba(24,39,75,.03); }
.replaced-key code { text-decoration: line-through; }
.replace-key-form { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .3rem; }
.replace-key-form small { color: #6d7a8e; font-size: .68rem; }
.manual-key-replacement { min-width: 0; border-top: 1px solid #dbe4ef; padding-top: .5rem; }
.manual-key-replacement summary { width: fit-content; max-width: 100%; min-height: 44px; align-content: center; color: #204d83; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.manual-key-replacement-form { display: grid; gap: .65rem; margin: .4rem 0 .65rem; min-width: 0; }
.manual-key-replacement-form label { font-weight: 600; overflow-wrap: anywhere; }
.manual-key-replacement-form input { width: 100%; min-width: 0; min-height: 44px; padding: .7rem; border: 1px solid #bccbdd; border-radius: .5rem; font-family: inherit; font-size: 1rem; }
.manual-key-replacement-form small { color: #52647a; line-height: 1.55; }
.manual-key-replacement-form .btn { justify-self: start; min-height: 44px; max-width: 100%; white-space: normal; }
.saved-key-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.saved-key-actions .btn { min-height: 44px; white-space: normal; }
.saved-key-actions [role="status"] { color: #52647a; font-size: .85rem; }

@media (max-width: 720px) {
  .fulfillment-panel { grid-column: auto; }
  .fulfillment-line { align-items: flex-start; flex-direction: column; }
  .fulfillment-action .btn { width: 100%; min-height: 48px; }
  .engagement-grid { grid-template-columns: 1fr; }
  .engagement-grid > div { min-height: 96px; }
  .sent-key-meta, .sent-keys-heading, .replace-key-form, .key-action-bar { align-items: flex-start; flex-direction: column; }
  .replace-key-form .btn, .key-action-bar form, .key-action-bar .btn { width: 100%; min-height: 48px; }
}

/* Product catalogue readability upgrade */
.product-catalog-panel { overflow: hidden; }
.product-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.4rem 1.05rem; background: linear-gradient(180deg, #fff, #fbfdff); border-bottom: 1px solid #e5ebf3; }
.product-filter-heading h2 { margin: .18rem 0 .3rem; color: #172943; font-size: 1.28rem; font-weight: 650; letter-spacing: -.025em; }
.product-filter-heading p { max-width: 760px; margin: 0; color: #64748b; font-size: .9rem; line-height: 1.6; }
.product-filter { align-items: end; gap: .85rem; padding: 1.15rem 1.35rem 1.3rem; }
.product-filter .product-filter-field { min-width: 165px; display: grid; flex: 1 1 175px; gap: .42rem; }
.product-filter .product-filter-field label { color: #4c5d74; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.product-filter .filter-search { min-width: 320px; flex: 1.7 1 390px; }
.product-filter .category-filter-field { min-width: 250px; flex: 1.25 1 280px; }
.product-filter .form-control, .product-filter .form-select { min-height: 46px; font-size: .92rem; }
.product-filter-actions { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.product-filter-actions .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1rem; white-space: nowrap; }
.product-results-meta { min-height: 58px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.25rem; padding: .9rem 1.35rem; font-size: .88rem; }
.product-results-meta strong { font-size: 1.03rem; font-weight: 600; }
.product-results-hint { display: inline-flex; align-items: center; gap: .5rem; color: #607086; font-size: .82rem; font-weight: 500; }
.product-results-hint > span { width: 24px; height: 24px; display: inline-grid; place-items: center; color: #fff; background: #2367c9; border-radius: 50%; font-size: 1rem; font-weight: 500; line-height: 1; }
.product-list-header, .product-disclosure-summary { grid-template-columns: minmax(360px, 1fr) minmax(190px, .38fr) minmax(100px, auto); gap: 1.15rem; }
.product-list-header { min-height: 48px; align-items: center; padding: .78rem 1.3rem; color: #617087; font-size: .77rem; font-weight: 600; }
.product-list-header > span:last-child { text-align: center; }
.product-disclosure { border-bottom-color: #e3e9f1; }
.product-disclosure-summary { min-height: 102px; padding: 1rem 1.3rem; }
.product-disclosure:hover { background: #f7faff; }
.product-disclosure.is-open { background: #f8fbff; box-shadow: inset 4px 0 0 var(--blue); }
.product-record { gap: 1rem; }
.product-record img, .product-image-placeholder { width: 64px; height: 64px; flex-basis: 64px; padding: .15rem; border-radius: .9rem; }
.product-record-copy { gap: .28rem; }
.product-record-copy strong { color: #14233a; font-size: 1.06rem; font-weight: 600; line-height: 1.42; }
.product-record-copy small { color: #2c66ad; font-size: .82rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.product-record-options { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-summary-sku { min-width: 0; }
.product-summary-sku .sku-value { max-width: 100%; padding: .43rem .62rem; color: #153f76; background: #eaf3ff; border: 1px solid #d1e2f8; border-radius: .55rem; font-size: .86rem; font-weight: 550; line-height: 1.45; }
.product-disclosure-toggle { width: auto; min-width: 100px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 0 .78rem; border-radius: .72rem; }
.product-disclosure-toggle-label { font-size: .8rem; font-weight: 600; }
.product-disclosure-icon { width: 15px; height: 15px; }
.product-disclosure-icon::before, .product-disclosure-icon::after { width: 15px; }
.product-disclosure-grid { gap: .95rem; padding: 1.15rem 1.3rem 1.3rem; }
.product-disclosure-field { min-height: 108px; padding: 1.05rem; background: rgba(255,255,255,.96); border-color: #dbe5f1; border-radius: .82rem; box-shadow: 0 6px 18px rgba(24,39,75,.035); }
.product-disclosure-label { margin-bottom: .65rem; color: #617087; font-size: .77rem; font-weight: 600; letter-spacing: .055em; }
.category-pill-list { gap: .48rem; }
.category-pill-list > span { padding: .42rem .62rem; font-size: .82rem; font-weight: 500; line-height: 1.45; }
.sku-variant-item { padding: .72rem; border-radius: .65rem; }
.sku-variant-heading .sku-value { max-width: 100%; font-size: .84rem; font-weight: 550; line-height: 1.45; }
.variant-option-list { gap: .4rem; margin-top: .58rem; }
.variant-option-list > span { padding: .36rem .5rem; font-size: .8rem; font-weight: 500; line-height: 1.45; }
.variant-option-list strong { font-weight: 600; }
.product-detail-link { min-height: 38px; font-size: .9rem; font-weight: 600; }
.product-disclosure-field .status-badge { font-size: .8rem; font-weight: 600; }
.product-disclosure-field .text-muted { font-size: .82rem; font-weight: 500; line-height: 1.5; }
.product-disclosure-actions { gap: .6rem; }
.product-disclosure-actions .btn { min-height: 42px; padding-inline: .85rem; font-size: .82rem; font-weight: 600; }

@media (max-width: 1050px) {
  .product-list-header, .product-disclosure-summary { grid-template-columns: minmax(300px, 1fr) minmax(165px, .36fr) minmax(94px, auto); }
  .product-disclosure-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .product-disclosure-categories, .product-disclosure-skus { grid-column: span 3; }
  .product-disclosure-field:not(.product-disclosure-categories):not(.product-disclosure-skus):not(.product-disclosure-actions-field) { grid-column: span 2; }
}

@media (max-width: 760px) {
  .product-filter-heading { padding: 1.1rem 1rem .95rem; }
  .product-filter-heading h2 { font-size: 1.2rem; }
  .product-filter-heading p { font-size: .86rem; }
  .product-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
  .product-filter .product-filter-field { width: 100%; min-width: 0; grid-column: auto; }
  .product-filter .filter-search, .product-filter .category-filter-field, .product-filter-actions { grid-column: 1 / -1; }
  .product-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .product-filter-actions .btn { width: 100%; min-height: 48px; }
  .product-results-meta { align-items: flex-start; flex-direction: column; padding: .9rem 1rem; }
  .product-list { padding: .8rem; }
  .product-disclosure-summary { grid-template-columns: minmax(0, 1fr) 48px; gap: .62rem .8rem; padding: .95rem; }
  .product-summary-sku { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
  .product-summary-label { display: inline; color: #64748b; font-size: .73rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
  .product-disclosure-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 46px; min-width: 46px; height: 46px; padding: 0; border-radius: 50%; }
  .product-disclosure-toggle-label { display: none; }
  .product-record img, .product-image-placeholder { width: 58px; height: 58px; flex-basis: 58px; }
  .product-record-copy strong { font-size: 1rem; }
  .product-record-copy small { font-size: .8rem; }
  .product-disclosure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: .85rem; }
  .product-disclosure-categories, .product-disclosure-skus, .product-disclosure-actions-field { grid-column: 1 / -1; }
  .product-disclosure-field:not(.product-disclosure-categories):not(.product-disclosure-skus):not(.product-disclosure-actions-field) { grid-column: auto; }
  .product-disclosure-field { min-height: 0; padding: .9rem; }
}

@media (max-width: 430px) {
  .product-filter { grid-template-columns: 1fr; }
  .product-filter .product-filter-field, .product-filter .filter-search, .product-filter .category-filter-field, .product-filter-actions { grid-column: 1; }
  .product-filter-actions { grid-template-columns: 1fr; }
  .product-list { padding: .65rem; }
  .product-disclosure-summary { padding: .82rem; }
  .product-record { gap: .75rem; }
  .product-record img, .product-image-placeholder { width: 54px; height: 54px; flex-basis: 54px; }
  .product-record-copy strong { font-size: .97rem; }
  .product-summary-sku .sku-value { font-size: .8rem; }
  .product-disclosure-grid { grid-template-columns: 1fr; padding: .75rem; }
  .product-disclosure-categories, .product-disclosure-skus, .product-disclosure-actions-field { grid-column: auto; }
  .product-disclosure-actions .btn { flex: 1 1 140px; min-height: 44px; justify-content: center; }
}

/* Numbered product pagination */
.product-pagination {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-top: 1px solid #e3eaf3;
}
.product-pagination-summary {
  display: flex;
  align-items: center;
  gap: .42rem;
  color: #64748b;
  font-size: .86rem;
  white-space: nowrap;
}
.product-pagination-summary > strong {
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding-inline: .45rem;
  color: #fff;
  background: #1f5fb8;
  border-radius: .55rem;
  font-size: .92rem;
  font-weight: 600;
}
.product-pagination-summary span strong {
  color: #263a55;
  font-size: .92rem;
  font-weight: 600;
}
.product-pagination-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
}
.product-pagination-pages {
  display: flex;
  align-items: center;
  gap: .36rem;
}
.product-pagination-nav,
.product-page-number {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #315173;
  background: #fff;
  border: 1px solid #d5dfec;
  border-radius: .65rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-pagination-nav {
  min-width: 94px;
  gap: .35rem;
  padding: .48rem .72rem;
}
.product-page-number {
  min-width: 42px;
  padding: .45rem .5rem;
}
.product-pagination-nav:hover,
.product-page-number:hover {
  color: #164f9f;
  background: #f1f6fd;
  border-color: #9dbce2;
  box-shadow: 0 5px 14px rgba(31,95,184,.09);
  transform: translateY(-1px);
}
.product-page-number.is-current {
  color: #fff;
  background: linear-gradient(145deg, #286dce, #1956a9);
  border-color: #1956a9;
  box-shadow: 0 7px 16px rgba(31,95,184,.2);
  cursor: default;
}
.product-pagination-nav.is-disabled {
  color: #a0aaba;
  background: #f5f7fa;
  border-color: #e4e8ee;
  cursor: not-allowed;
}
.product-page-ellipsis {
  min-width: 24px;
  color: #8491a4;
  text-align: center;
  user-select: none;
}
.product-pagination-nav:focus-visible,
.product-page-number:focus-visible {
  outline: 3px solid rgba(40,109,206,.28);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .product-pagination {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }
  .product-pagination-summary { justify-content: center; }
  .product-pagination-controls {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }
  .product-pagination-pages {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    padding: .1rem .1rem .25rem;
    scrollbar-width: thin;
  }
  .product-pagination-nav {
    width: 100%;
    min-height: 46px;
  }
}

@media (max-width: 430px) {
  .product-pagination-pages { justify-content: flex-start; }
  .product-page-number { min-width: 40px; }
}

/* Order catalogue readability upgrade */
.order-catalog-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.order-catalog-panel > * { min-width: 0; max-width: 100%; }
.order-table-responsive {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
@supports (overflow: clip) {
  .order-table-responsive {
    overflow-x: clip;
    overflow-y: visible;
  }
}
.order-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.4rem 1.05rem;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-bottom: 1px solid #e5ebf3;
}
.order-filter-heading h2 {
  margin: .18rem 0 .3rem;
  color: #172943;
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -.025em;
}
.order-filter-heading p {
  max-width: 780px;
  margin: 0;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.6;
}
.order-filter {
  align-items: end;
  gap: .85rem;
  padding: 1.15rem 1.35rem 1.3rem;
}
.order-filter .order-filter-field {
  min-width: 180px;
  display: grid;
  flex: 1 1 190px;
  gap: .42rem;
}
.order-filter .filter-search {
  min-width: 320px;
  flex: 2.2 1 500px;
}
.order-search-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
}
.order-search-control .form-control {
  width: 100%;
  min-width: 0;
}
.order-filter .order-filter-field label {
  color: #4c5d74;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.order-filter .form-control,
.order-filter .form-select {
  min-height: 46px;
  font-size: .94rem;
}
.order-filter .order-filter-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .55rem;
}
.order-filter-actions .btn,
.order-search-control .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  white-space: nowrap;
}
.order-results-meta {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .9rem 1.35rem;
  font-size: .9rem;
}
.order-results-meta strong {
  font-size: 1.06rem;
  font-weight: 600;
}
.order-results-range {
  color: #65758b;
  font-size: .84rem;
  font-weight: 500;
}
.order-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.order-table .order-col-select { width: 3%; }
.order-table .order-col-number { width: 8%; }
.order-table .order-col-customer { width: 11%; }
.order-table .order-col-email { width: 11%; }
.order-table .order-col-product { width: 15%; }
.order-table .order-col-sku { width: 12%; }
.order-table .order-col-quantity { width: 4%; }
.order-table .order-col-total { width: 8%; }
.order-table .order-col-date { width: 8%; }
.order-table .order-col-status { width: 10%; }
.order-table .order-col-actions { width: 10%; }
.order-table th {
  height: 50px;
  padding: .85rem .9rem;
  color: #5c6c83;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .055em;
}
.order-table td {
  padding: 1.05rem .95rem;
  color: #1f2d40;
  font-size: .96rem;
  font-weight: 400;
  line-height: 1.55;
  vertical-align: top;
}
.order-table tbody tr { transition: background-color .18s ease, box-shadow .18s ease; }
.order-table tbody tr:nth-child(odd) { background: #f8fbff; }
.order-table tbody tr:nth-child(even) { background: #fff; }
.order-table tbody tr:hover { background: #f1f7ff; box-shadow: inset 4px 0 0 #2c6dcc; }
.order-number-link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  padding: .42rem .58rem;
  color: #164f9f;
  background: #edf4ff;
  border: 1px solid #d7e5f8;
  border-radius: .55rem;
}
.order-number-link strong {
  margin: 0;
  color: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.order-number-copy { min-height: 44px; font: inherit; text-align: left; cursor: pointer; user-select: text; }
.order-number-copy:hover { background: #e0edff; border-color: #96b9ed; }
.order-number-copy:focus-visible { outline: 3px solid #2467c7; outline-offset: 2px; }
.order-copy-status { position: fixed; z-index: 1400; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border-radius: .65rem; color: #fff; background: #173451; box-shadow: 0 5px 20px rgba(0,0,0,.18); font-size: .875rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; pointer-events: none; opacity: 0; }
.order-copy-status:not(:empty) { opacity: 1; }
.order-copy-buffer { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .order-copy-status { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } }
.order-approved-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .42rem;
  padding: .28rem .46rem;
  color: #087555;
  background: #e4f8f0;
  border: 1px solid #c5eadc;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.order-customer-cell {
  color: #22344e !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
.order-customer-name { display: block; }
.order-country {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin-top: .42rem;
  color: #66758a;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.35;
}
.order-country-flag {
  width: 28px;
  height: 21px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid rgba(31, 45, 64, .13);
  border-radius: .22rem;
  box-shadow: 0 1px 3px rgba(24, 39, 75, .12);
}
.order-email-cell a {
  color: #2762ad;
  font-size: .94rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.order-product-cell .order-line-list {
  min-width: 0;
  max-width: none;
  color: #35445a;
  font-size: .97rem;
  font-weight: 400;
  line-height: 1.58;
}
.order-sku-cell .order-sku-list {
  min-width: 0;
  max-width: none;
  color: #174a8a;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.65;
}
.order-sku-link-list {
  min-width: 0;
  display: grid;
  gap: .45rem;
}
.order-sku-key-link {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .48rem .55rem;
  color: #174a8a;
  background: #f0f6ff;
  border: 1px solid #cedff5;
  border-radius: .58rem;
  box-shadow: 0 3px 10px rgba(29, 78, 145, .05);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.order-sku-key-code {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}
.order-sku-key-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  color: #17604e;
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
}
.order-sku-key-link:hover {
  color: #fff;
  background: #2467c7;
  border-color: #2467c7;
  box-shadow: 0 7px 16px rgba(29, 78, 145, .16);
  transform: translateY(-1px);
}
.order-sku-key-link:hover .order-sku-key-action { color: #fff; }
.order-sku-key-link:focus-visible { outline: 3px solid rgba(52, 121, 232, .25); outline-offset: 2px; }
.order-sku-chooser { min-width: 0; }
.product-key-table .order-sku-key-link { flex-wrap: wrap; }
.order-sku-chooser > summary { width: 100%; min-height: 44px; cursor: pointer; list-style: none; }
.order-sku-chooser > summary::-webkit-details-marker { display: none; }
.order-sku-chooser[open] > summary { border-color: #96b9ed; }
.order-sku-chooser[open] .order-sku-key-action > span { transform: rotate(180deg); }
.order-sku-key-options { display: grid; gap: .35rem; margin-top: .4rem; }
.order-sku-key-options > a { display: flex; align-items: center; min-height: 44px; padding: .55rem .65rem; border: 1px solid #cedff5; border-radius: .5rem; color: #174a8a; background: #fff; font-size: .8rem; line-height: 1.4; text-decoration: none; white-space: normal; overflow-wrap: anywhere; }
.order-sku-key-options > a:hover { color: #fff; background: #2467c7; border-color: #2467c7; }
.order-sku-key-options > a:focus-visible { outline: 3px solid #2467c7; outline-offset: 2px; }
.order-quantity-cell { text-align: center; }
.order-quantity {
  min-width: 44px;
  min-height: 36px;
  align-items: center;
  padding: .38rem .62rem;
  font-size: .94rem;
  font-weight: 500;
}
.order-date-cell time {
  color: #4b5c72;
  font-size: .92rem;
  font-weight: 400;
  white-space: nowrap;
}
.order-status-cell .status-badge {
  font-size: .81rem;
  font-weight: 500;
}
.order-delivery-status { display: grid; justify-items: start; gap: .45rem; min-width: 0; width: 100%; }
.order-delivery-reason { min-width: 0; width: 100%; color: #805007; font-size: .76rem; line-height: 1.4; }
.order-delivery-reason > summary { display: flex; align-items: flex-start; gap: .3rem; min-height: 44px; padding: .4rem; border: 1px solid #ead8ad; border-radius: .45rem; background: #fff7e7; cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.order-delivery-reason > summary::-webkit-details-marker { display: none; }
.order-delivery-reason > summary > svg { flex: 0 0 14px; width: 14px; height: 18px; stroke: currentColor; stroke-width: 1.6; }
.order-delivery-reason > summary > span { min-width: 0; }
.order-delivery-reason.reason-danger { color: #943441; }
.order-delivery-reason.reason-danger > summary { background: #fff0f2; border-color: #ebc5cd; }
.order-delivery-reason.reason-info { color: #235e98; }
.order-delivery-reason.reason-info > summary { background: #edf5ff; border-color: #c4d9f1; }
.order-delivery-reason > p { margin: .5rem 0; color: #526175; overflow-wrap: anywhere; }
.order-delivery-reason > a { display: inline-flex; align-items: center; min-height: 44px; color: #175aa5; text-decoration: underline; overflow-wrap: anywhere; }
.order-delivery-reason > summary:focus-visible, .order-delivery-reason > a:focus-visible { outline: 3px solid #4285c5; outline-offset: 2px; }
.order-actions-heading,
.order-actions-cell { text-align: center !important; }
.order-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .48rem;
}
.order-action-buttons a.order-action-button {
  width: 88px;
  min-width: 88px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .46rem;
  padding: .52rem .68rem;
  color: #245b9f;
  background: #fff;
  border: 1px solid #cbdaf0;
  border-radius: .65rem;
  box-shadow: 0 5px 14px rgba(29,78,145,.07);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.order-action-buttons .order-action-button svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.order-action-buttons a.order-action-edit { color: #315d8d; background: #f5f8fc; }
.order-action-buttons a.order-action-delete { color: #a3394c; background: #fff5f7; border-color: #eccfd6; }
.order-action-buttons a.order-action-delete:hover { color: #fff; background: #b43a50; border-color: #b43a50; }
.order-action-buttons a.order-action-button:hover {
  color: #fff;
  background: #2467c7;
  border-color: #2467c7;
  box-shadow: 0 8px 18px rgba(29,78,145,.18);
  transform: translateY(-1px);
}
.order-action-buttons a.order-action-button:focus-visible { outline: 3px solid rgba(52,121,232,.25); outline-offset: 2px; }
.order-pagination {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.order-pagination .product-pagination-controls { flex-wrap: wrap; }
.order-pagination .product-pagination-pages {
  max-width: 100%;
  scrollbar-width: none;
}
.order-pagination .product-pagination-pages::-webkit-scrollbar { display: none; }
.order-bulk-action-bar { border-top: 1px solid #dce5f0; }
.order-bulk-action-bar .bulk-selection-count { font-size: .86rem; font-weight: 500; }
.order-table .selection-cell { vertical-align: middle; }

@media (max-width: 1280px) {
  .order-table-responsive { overflow: visible; }
  .order-table,
  .order-table tbody {
    width: 100%;
    display: block;
  }
  .order-table { table-layout: auto; }
  .order-table colgroup,
  .order-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .order-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    padding: .9rem;
    background: #f5f8fc;
  }
  .order-table tbody tr {
    min-width: 0;
    display: grid;
    align-content: start;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: .9rem;
    box-shadow: 0 7px 22px rgba(24, 39, 75, .055);
    overflow: hidden;
  }
  .order-table tbody tr:nth-child(odd) { background: #f8fbff; border-color: #dce4ef; }
  .order-table tbody tr:nth-child(even) { background: #fff; border-color: #dce4ef; }
  .order-table tbody tr:hover {
    background: #f1f7ff;
    border-color: #bdcff0;
    box-shadow: inset 4px 0 0 #2c6dcc, 0 8px 22px rgba(24,39,75,.07);
  }
  .order-table td {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(105px, .38fr) minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    padding: .78rem .9rem;
    border-bottom: 1px solid #edf1f6;
    font-size: 1rem;
    text-align: left;
  }
  .order-table td:last-child { border-bottom: 0; }
  .order-table td::before {
    content: attr(data-label);
    color: #6e7d91;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .055em;
    line-height: 1.5;
    text-transform: uppercase;
  }
  .order-table td > * {
    min-width: 0;
    grid-column: 2;
    justify-self: start;
  }
  .order-number-link { min-width: 0; }
  .order-line-list { min-width: 0; max-width: none; }
  .order-quantity-cell { text-align: left; }
  .order-total-cell { text-align: left; }
  .order-actions-cell { text-align: left; }
  .order-action-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch !important;
    gap: .55rem;
  }
  .order-action-buttons a.order-action-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
}

@media (max-width: 1050px) {
  .order-table tbody { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .order-filter-heading { padding: 1.1rem 1rem .95rem; }
  .order-filter-heading h2 { font-size: 1.2rem; }
  .order-filter-heading p { font-size: .86rem; }
  .order-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    padding: 1rem;
  }
  .order-filter .order-filter-field {
    width: 100%;
    min-width: 0;
  }
  .order-filter .filter-search,
  .order-filter .order-filter-actions { grid-column: 1 / -1; }
  .order-filter .order-filter-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .order-filter-actions .btn,
  .order-search-control .btn { width: 100%; min-height: 48px; }
  .order-results-meta { padding: .9rem 1rem; }
  .order-table-responsive { overflow: visible; }
  .order-table { min-width: 0; table-layout: auto; }
  .order-table colgroup { display: none; }
  .order-table td {
    font-size: 1rem;
    line-height: 1.55;
  }
  .order-table td::before { font-size: .75rem; font-weight: 500; }
  .order-number-link strong { font-size: 1.02rem; }
  .order-customer-cell { font-size: 1.02rem !important; }
  .order-product-cell .order-line-list { font-size: .98rem; }
  .order-sku-cell .order-sku-list { font-size: .87rem; }
  .order-quantity-cell { text-align: left; }
  .order-total-cell { text-align: left; }
  .order-action-buttons a.order-action-button { min-height: 44px; justify-content: center; }
}

@media (max-width: 430px) {
  .order-filter { grid-template-columns: 1fr; }
  .order-filter .order-filter-field,
  .order-filter .filter-search,
  .order-filter .order-filter-actions { grid-column: 1; }
  .order-search-control { grid-template-columns: 1fr; }
  .order-filter .order-filter-actions { grid-template-columns: 1fr; }
  .order-results-meta { align-items: flex-start; flex-direction: column; }
  .order-action-buttons { grid-template-columns: 1fr; }
}

/* Product category catalogue readability upgrade */
.category-catalog-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.category-catalog-panel > * { min-width: 0; max-width: 100%; }
.category-table-responsive {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
@supports (overflow: clip) {
  .category-table-responsive {
    overflow-x: clip;
    overflow-y: visible;
  }
}
.category-metrics .metric-card > span {
  font-size: .75rem;
  font-weight: 500;
}
.category-metrics .metric-card > strong {
  font-weight: 500;
}
.category-metrics .metric-card > small {
  font-size: .76rem;
  font-weight: 400;
}
.category-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.4rem 1.05rem;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-bottom: 1px solid #e5ebf3;
}
.category-filter-heading .eyebrow { font-size: .72rem; font-weight: 500; }
.category-filter-heading h2 {
  margin: .18rem 0 .3rem;
  color: #172943;
  font-size: 1.34rem;
  font-weight: 550;
  letter-spacing: -.025em;
}
.category-filter-heading p {
  max-width: 800px;
  margin: 0;
  color: #64748b;
  font-size: .94rem;
  line-height: 1.6;
}
.category-filter {
  align-items: end;
  gap: .8rem;
  padding: 1.15rem 1.35rem 1.3rem;
}
.category-filter .category-filter-field {
  min-width: 150px;
  display: grid;
  flex: 1 1 160px;
  gap: .42rem;
}
.category-filter .filter-search {
  min-width: 300px;
  flex: 1.6 1 360px;
}
.category-filter .category-tree-filter {
  min-width: 230px;
  flex: 1.25 1 260px;
}
.category-filter .category-filter-field label {
  color: #4c5d74;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.category-filter .form-control,
.category-filter .form-select {
  min-height: 46px;
  font-size: .97rem;
}
.category-filter .category-filter-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .55rem;
}
.category-filter-actions .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  white-space: nowrap;
}
.category-results-meta {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .9rem 1.35rem;
  font-size: .95rem;
}
.category-results-meta strong {
  font-size: 1.1rem;
  font-weight: 500;
}
.category-results-range {
  color: #65758b;
  font-size: .9rem;
  font-weight: 400;
}
.category-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.category-table .category-col-hierarchy { width: 39%; }
.category-table .category-col-source { width: 14%; }
.category-table .category-col-storefront { width: 13%; }
.category-table .category-col-products { width: 8%; }
.category-table .category-col-sync { width: 17%; }
.category-table .category-col-actions { width: 9%; }
.category-table th {
  height: 50px;
  padding: .85rem 1rem;
  color: #5c6c83;
  font-size: .79rem;
  font-weight: 500;
  letter-spacing: .045em;
}
.category-table td {
  padding: 1.05rem 1rem;
  color: #35445a;
  font-size: .96rem;
  font-weight: 400;
  line-height: 1.55;
  vertical-align: top;
}
.category-table tbody tr:nth-child(even) { background: #fcfdff; }
.category-table tbody tr:hover { background: #f5f9ff; }
.category-table th:nth-child(4),
.category-table th:last-child { text-align: center; }
.category-hierarchy-cell { min-width: 0 !important; }
.category-record {
  min-width: 0;
  gap: .28rem;
  padding-right: .5rem;
}
.category-record strong {
  margin: 0;
  color: #162a46;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.4;
}
.category-record span {
  color: #52657e;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
  overflow-wrap: anywhere;
}
.category-record small {
  margin-top: .04rem;
  color: #2870bd;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.45;
}
.category-source-cell .status-badge,
.category-storefront-cell .status-badge {
  font-size: .8rem;
  font-weight: 500;
}
.category-source-cell .cell-note {
  margin-top: .42rem;
  color: #738198;
  font-size: .78rem;
  font-weight: 400;
}
.category-products-cell { text-align: center; }
.category-product-count {
  min-width: 42px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: .35rem .58rem;
  color: #174f91;
  background: #eaf3ff;
  border: 1px solid #d3e3f8;
  border-radius: .55rem;
  font-size: .94rem;
  font-weight: 500;
}
.category-sync-cell time,
.category-local-record {
  color: #4b5c72;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
}
.category-local-record {
  display: inline-flex;
  padding: .34rem .52rem;
  color: #65758b;
  background: #f0f3f7;
  border-radius: .48rem;
}
.category-actions-cell { text-align: center; }
.category-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.category-action-buttons a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .38rem .58rem;
  color: #245b9f;
  background: #eef4fc;
  border: 1px solid #d8e4f3;
  border-radius: .5rem;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
}
.category-action-buttons a:hover {
  color: #fff;
  background: #1f5fb8;
  border-color: #1f5fb8;
}
.category-pagination .product-pagination-summary {
  font-size: .92rem;
  font-weight: 400;
}
.category-pagination .product-pagination-summary > strong,
.category-pagination .product-pagination-summary span strong {
  font-size: .98rem;
  font-weight: 500;
}
.category-pagination .product-pagination-nav,
.category-pagination .product-page-number {
  font-size: .88rem;
  font-weight: 500;
}
.category-pagination {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.category-pagination .product-pagination-controls { flex-wrap: wrap; }
.category-pagination .product-pagination-pages {
  max-width: 100%;
  scrollbar-width: none;
}
.category-pagination .product-pagination-pages::-webkit-scrollbar { display: none; }

@media (min-width: 761px) and (max-width: 1180px) {
  .category-table .category-col-hierarchy { width: 37%; }
  .category-table .category-col-source { width: 14%; }
  .category-table .category-col-storefront { width: 13%; }
  .category-table .category-col-products { width: 9%; }
  .category-table .category-col-sync { width: 17%; }
  .category-table .category-col-actions { width: 10%; }
  .category-table th,
  .category-table td { padding-inline: .72rem; }
  .category-action-buttons {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .category-filter-heading { padding: 1.1rem 1rem .95rem; }
  .category-filter-heading h2 { font-size: 1.2rem; }
  .category-filter-heading p { font-size: .91rem; }
  .category-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    padding: 1rem;
  }
  .category-filter .category-filter-field {
    width: 100%;
    min-width: 0;
  }
  .category-filter .filter-search,
  .category-filter .category-tree-filter,
  .category-filter .category-filter-actions { grid-column: 1 / -1; }
  .category-filter .category-filter-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .category-filter-actions .btn { width: 100%; min-height: 48px; }
  .category-results-meta { padding: .9rem 1rem; }
  .category-table-responsive { overflow: visible; }
  .category-table { min-width: 0; table-layout: auto; }
  .category-table colgroup { display: none; }
  .category-table td {
    font-size: .98rem;
    line-height: 1.55;
  }
  .category-table td::before { font-size: .75rem; font-weight: 500; }
  .category-record strong { font-size: 1.08rem; }
  .category-record span { font-size: .93rem; }
  .category-record small { font-size: .82rem; }
  .category-products-cell { text-align: left; }
  .category-actions-cell { text-align: left; }
  .category-action-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch !important;
  }
  .category-action-buttons a {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .category-filter { grid-template-columns: 1fr; }
  .category-filter .category-filter-field,
  .category-filter .filter-search,
  .category-filter .category-tree-filter,
  .category-filter .category-filter-actions { grid-column: 1; }
  .category-filter .category-filter-actions { grid-template-columns: 1fr; }
  .category-results-meta { align-items: flex-start; flex-direction: column; }
  .category-action-buttons { grid-template-columns: 1fr; }
}

/* Expanded order view */
.order-detail-hero .page-actions { justify-content: flex-end; }
.order-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, .31fr);
  align-items: start;
}
.order-detail-main-column {
  min-width: 0;
  display: grid;
  gap: 1rem;
}
.order-detail-history {
  position: sticky;
  top: 1rem;
}
.order-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 1.2rem;
}
.order-detail-summary article {
  min-width: 0;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.05rem;
  background: linear-gradient(145deg, #f5f2ff, #eeeaff);
  border: 1px solid #ddd5f5;
  border-radius: .9rem;
  box-shadow: 0 8px 24px rgba(24,39,75,.05);
}
.order-detail-summary article:nth-child(even) {
  background: linear-gradient(145deg, #effbf8, #e7f6f2);
  border-color: #d0e9e2;
}
.order-detail-summary article:last-child {
  background: linear-gradient(145deg, #edf5ff, #e6effc);
  border-color: #d1e1f5;
}
.order-detail-summary span,
.fulfillment-fact-grid span {
  color: #66758a;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.order-detail-summary strong {
  margin: .3rem 0 .18rem;
  color: #172a45;
  font-size: 1.24rem;
  font-weight: 550;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.order-detail-summary small,
.fulfillment-fact-grid small {
  color: #68788e;
  font-size: .77rem;
  font-weight: 400;
  line-height: 1.45;
}
.order-purchase-line { align-items: stretch; }
.order-tutorial-list { display: grid; gap: .75rem; min-width: 0; }
.order-tutorial-item { display: grid; gap: .35rem; min-width: 0; padding: .85rem 1rem; border: 1px solid #dce6f1; border-radius: 12px; background: #f8fbff; overflow-wrap: anywhere; }
.order-tutorial-item small { color: #52667d; }
.order-tutorial-item .order-tutorial-link { min-width: 0; color: #245ea5; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.order-tutorial-link:focus-visible { outline: 3px solid #f2ac43; outline-offset: 3px; border-radius: 3px; }
.order-purchase-title {
  min-width: 0;
  display: grid;
  gap: .28rem;
}
.order-purchase-title > span {
  color: #5e45a5;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.order-purchase-title > strong {
  color: #1d2d43;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.45;
}
.order-purchase-variants {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem .5rem;
  margin-top: .08rem;
}
.order-purchase-variants small {
  display: inline-flex;
  gap: .24rem;
  align-items: baseline;
  padding: .28rem .48rem;
  border: 1px solid #d7e3f0;
  border-radius: .45rem;
  background: #f5f9fd;
  color: #435870;
  font-size: .76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.order-purchase-variants small strong {
  color: #273d58;
  font-weight: 600;
}
.order-purchase-meta {
  min-width: 155px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  gap: .32rem;
}
.order-purchase-meta > span {
  color: #245b9f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.order-purchase-meta > strong {
  color: #17604e;
  font-size: .82rem;
  font-weight: 500;
}
.order-total-cell { text-align: right; }
.order-total {
  display: inline-flex;
  justify-content: flex-end;
  color: #174a3d;
  font-size: .91rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.order-purchase-meta .order-detail-sku-link {
  width: 100%;
  max-width: 245px;
  font-family: inherit;
}
.order-detail-fallback-skus { margin-top: .65rem; }
.order-key-entry-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem 1rem;
  align-items: center;
  margin: 0 0 1.15rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #eff7ff, #f3fbf8);
  border: 1px solid #cfe1f4;
  border-radius: .9rem;
}
.order-key-entry-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2467c7;
  border-radius: .75rem;
  box-shadow: 0 7px 16px rgba(36, 103, 199, .18);
  font-size: 1.35rem;
  line-height: 1;
}
.order-key-entry-context > div:nth-child(2) { min-width: 0; display: grid; gap: .18rem; }
.order-key-entry-context strong { color: #193756; font-size: 1rem; font-weight: 500; }
.order-key-entry-context small { color: #5b6f86; font-size: .86rem; line-height: 1.5; }
.order-key-entry-context code { color: #164f9f; font-size: .84rem; overflow-wrap: anywhere; }
.order-key-entry-warning { margin-bottom: 1.15rem; }
.fulfillment-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 1.35rem 1.15rem;
}
.fulfillment-fact-grid > div {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .9rem;
  background: #f7f9fd;
  border: 1px solid #dfe6f0;
  border-radius: .78rem;
}
.fulfillment-fact-grid > div:nth-child(even) { background: #f1f9f7; border-color: #d8ebe5; }
.fulfillment-fact-grid strong {
  margin: .25rem 0 .12rem;
  color: #20334f;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.order-activity-section {
  margin: 1.35rem 1.35rem .35rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f1;
}
.order-activity-heading h3 {
  margin: .16rem 0 0;
  color: #20314b;
  font-size: 1.12rem;
  font-weight: 550;
}
.order-activity-list {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.order-activity-list li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: .72rem;
  padding-bottom: 1rem;
}
.order-activity-list li > span {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: .2rem;
  background: #8a98aa;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #cdd6e2;
}
.order-activity-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: #dde4ed;
}
.order-activity-list li.is-complete > span { background: #2374c9; box-shadow: 0 0 0 2px #bad4ef; }
.order-activity-list li.is-engagement > span { background: #6c55b5; box-shadow: 0 0 0 2px #d7cef1; }
.order-activity-list li.is-click > span { background: #15906b; box-shadow: 0 0 0 2px #bce3d7; }
.order-activity-list li.is-pending > span { background: #c58a2b; box-shadow: 0 0 0 2px #f0d9ae; }
.order-activity-list li > div { min-width: 0; display: grid; gap: .18rem; }
.order-activity-list strong {
  color: #293a52;
  font-size: .87rem;
  font-weight: 500;
}
.order-activity-list time,
.order-activity-list small {
  color: #6c7a8d;
  font-size: .78rem;
  font-weight: 400;
}
.order-record-facts dd { font-size: .88rem; font-weight: 500; }

.fraud-summary.is-approved {
  background: linear-gradient(145deg, #effbf5, #e4f6ed) !important;
  border-color: #bfe6d2 !important;
}
.fraud-summary.is-approved strong,
.approved-value { color: #147a55 !important; }
.approved-check {
  width: 1.45em;
  height: 1.45em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .38rem;
  color: #fff !important;
  background: #159263;
  border-radius: 50%;
  font-size: .72em !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: 0 !important;
  vertical-align: .08em;
}
.order-commercial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  padding: 0 1.35rem 1.35rem;
}
.order-commercial-card {
  min-width: 0;
  padding: 1.05rem;
  background: linear-gradient(145deg, #f7f5ff, #f1edff);
  border: 1px solid #ded7f3;
  border-radius: .9rem;
}
.order-commercial-card.payment-card {
  background: linear-gradient(145deg, #f1fbf8, #e9f7f3);
  border-color: #cfe9e0;
}
.order-commercial-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .95rem;
}
.order-commercial-heading h3 {
  margin: .12rem 0 0;
  color: #1d304a;
  font-size: 1.06rem;
  font-weight: 550;
}
.order-commercial-icon {
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #6a52b0;
  border-radius: .75rem;
  font-size: 1.08rem;
  font-weight: 600;
}
.payment-card .order-commercial-icon { background: #168568; }
.order-commercial-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}
.order-commercial-card dl > div {
  min-width: 0;
  padding: .75rem;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(211,220,232,.85);
  border-radius: .7rem;
}
.order-commercial-card .order-commercial-wide { grid-column: 1 / -1; }
.order-commercial-card dt {
  margin-bottom: .25rem;
  color: #68778b;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.order-commercial-card dd {
  margin: 0;
  color: #263950;
  font-size: .91rem;
  font-weight: 450;
  line-height: 1.48;
  overflow-wrap: anywhere;
}
.order-commercial-card .grand-total {
  background: #e8f7f0;
  border-color: #bfe4d3;
}
.order-commercial-card .grand-total dd {
  color: #146e51;
  font-size: 1.02rem;
  font-weight: 600;
}
.order-address { white-space: pre-line; }
.order-ip-address {
  display: inline-block;
  max-width: 100%;
  padding: .3rem .5rem;
  color: #29435d;
  background: #eef4fa;
  border: 1px solid #d5e1ed;
  border-radius: .45rem;
  font-size: .84rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.coupon-codes {
  color: #6342a5 !important;
  letter-spacing: .025em;
}
.form-section-heading {
  margin-top: .25rem;
  padding: .9rem 1rem;
  background: #f5f7fb;
  border-left: 4px solid #5e4aa1;
  border-radius: .65rem;
}
.form-section-heading h2 {
  margin: .12rem 0 0;
  color: #26364d;
  font-size: 1.05rem;
  font-weight: 550;
}

@media (max-width: 1350px) {
  .order-detail-hero { align-items: flex-start; flex-direction: column; gap: 1.15rem; }
  .order-detail-hero .page-actions { width: 100%; justify-content: flex-start; }
  .order-detail-layout { grid-template-columns: 1fr; }
  .order-detail-history { position: static; }
  .order-record-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
  .order-detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-detail-summary article:last-child { grid-column: 1 / -1; min-height: 96px; }
  .fulfillment-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .order-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .order-detail-summary article:last-child { grid-column: 1 / -1; }
  .order-detail-summary article { min-height: 108px; padding: .9rem; }
  .order-detail-summary strong { font-size: 1.12rem; }
  .fulfillment-fact-grid { grid-template-columns: 1fr; margin: 0 .85rem .9rem; }
  .fulfillment-fact-grid > div { min-height: 92px; }
  .order-purchase-meta { min-width: 0; align-items: flex-start; }
  .order-purchase-meta .order-detail-sku-link { width: 100%; max-width: none; }
  .order-key-entry-context { grid-template-columns: auto minmax(0, 1fr); }
  .order-key-entry-context > .btn { grid-column: 1 / -1; width: 100%; }
  .order-activity-section { margin: 1.1rem .85rem .25rem; }
  .order-commercial-grid { grid-template-columns: 1fr; padding: 0 .85rem .9rem; }
  .order-record-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .order-detail-summary { grid-template-columns: 1fr; }
  .order-detail-summary article:last-child { grid-column: auto; }
  .order-detail-hero .page-actions { display: grid; grid-template-columns: 1fr; }
  .order-detail-hero .page-actions .btn { width: 100%; }
  .order-commercial-card dl { grid-template-columns: 1fr; }
  .order-commercial-card .order-commercial-wide { grid-column: auto; }
  .order-record-facts { grid-template-columns: 1fr; }
}

/* Product tutorial-link Excel import */
.product-import-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 28px 80px rgba(22, 38, 64, .24);
}
.product-import-preview-modal .modal-content {
  height: min(820px, calc(100vh - 3.5rem));
}
.product-import-preview-modal .modal-content > form {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-import-preview-modal .product-import-modal-header,
.product-import-preview-modal .product-import-summary,
.product-import-preview-modal .product-import-preview-footer {
  flex: 0 0 auto;
}
.product-import-modal-header {
  align-items: flex-start;
  padding: 1.35rem 1.45rem 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, #173d74 0%, #285f9f 58%, #287f8e 100%);
  border: 0;
}
.product-import-modal-header .eyebrow { color: #bfe4ff; }
.product-import-modal-header h2 {
  margin: .18rem 0 0;
  color: #fff;
  font-size: 1.38rem;
  font-weight: 550;
  letter-spacing: -.025em;
}
.product-import-modal-header p {
  margin: .28rem 0 0;
  color: #dbeeff;
  font-size: .84rem;
}
.product-import-modal-header .btn-close { filter: invert(1) grayscale(1); opacity: .85; }
.product-import-upload-body { display: grid; gap: 1rem; padding: 1.35rem; }
.product-import-instructions {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: 1rem;
  background: #f3f8ff;
  border: 1px solid #d9e7f8;
  border-radius: .85rem;
}
.product-import-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #187a55, #239b71);
  border-radius: .75rem;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(25, 132, 94, .2);
}
.product-import-instructions strong { color: #203653; font-size: .98rem; font-weight: 550; }
.product-import-instructions p { margin: .28rem 0 0; color: #607089; font-size: .86rem; line-height: 1.55; }
.product-import-file-picker {
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  color: #285c98;
  background: #fbfdff;
  border: 2px dashed #9dbce0;
  border-radius: .9rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.product-import-file-picker:hover { background: #f3f8ff; border-color: #3979bf; transform: translateY(-1px); }
.product-import-file-picker > span { font-size: 1rem; font-weight: 550; }
.product-import-file-picker > strong { color: #66758a; font-size: .82rem; font-weight: 450; overflow-wrap: anywhere; }
.product-import-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.product-import-safety-note { color: #47705f; font-size: .82rem; line-height: 1.5; }
.product-import-safety-note span {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  margin-right: .35rem;
  color: #fff;
  background: #209069;
  border-radius: 50%;
  font-size: .7rem;
}
.product-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #dfe7f0;
  background: #f7f9fc;
}
.product-import-summary span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 58px;
  padding: .7rem;
  color: #64748a;
  border-right: 1px solid #e0e7f0;
  font-size: .82rem;
}
.product-import-summary span:last-child { border-right: 0; }
.product-import-summary strong { color: #243952; font-size: 1.05rem; font-weight: 600; }
.product-import-summary .is-ready strong { color: #157552; }
.product-import-summary .is-unchanged strong { color: #396b9f; }
.product-import-summary .is-invalid strong { color: #ad4f3b; }
.product-import-preview-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.15rem 1.15rem;
  background: #f7f9fc;
}
.product-import-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
  padding: .75rem .9rem;
  background: #fff;
  border: 1px solid #dfe7f0;
  border-radius: .72rem;
}
.product-import-select-bar label { display: flex; align-items: center; gap: .58rem; color: #314760; font-size: .88rem; cursor: pointer; }
.product-import-select-bar strong { color: #176a50; font-size: .84rem; font-weight: 550; }
.product-import-table-wrap { overflow: auto; background: #fff; border: 1px solid #dce5ef; border-radius: .8rem; }
.product-import-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.product-import-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .72rem .75rem;
  color: #596b83;
  background: #edf3f9;
  border-bottom: 1px solid #d7e1ec;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.product-import-table th:nth-child(1) { width: 72px; text-align: center; }
.product-import-table th:nth-child(2) { width: 64px; }
.product-import-table th:nth-child(3) { width: 250px; }
.product-import-table th:nth-child(5) { width: 190px; }
.product-import-table td {
  padding: .82rem .75rem;
  color: #31445c;
  background: #fff;
  border-bottom: 1px solid #e7edf4;
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.45;
  vertical-align: middle;
}
.product-import-table tbody tr:last-child td { border-bottom: 0; }
.product-import-table tbody tr.is-ready td { background: #fbfefd; }
.product-import-table tbody tr.is-invalid td { background: #fffaf8; }
.product-import-table tbody tr.is-unchanged td { background: #f9fbfe; }
.product-import-table tbody tr.is-page-hidden { display: none; }
.product-import-check-cell { text-align: center; }
.product-import-row-number {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  color: #60748c;
  background: #eef3f8;
  border-radius: .5rem;
  font-size: .78rem;
}
.product-import-product { min-width: 0; display: grid; gap: .2rem; }
.product-import-product strong { color: #183b65; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; font-weight: 550; overflow-wrap: anywhere; }
.product-import-product span { color: #65758a; font-size: .8rem; }
.product-import-link {
  display: -webkit-box;
  overflow: hidden;
  color: #325f91;
  background: transparent;
  font-family: inherit;
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-import-status { display: inline-flex; padding: .3rem .52rem; border-radius: 999px; font-size: .72rem; font-weight: 550; }
.product-import-status.is-ready { color: #126747; background: #e4f5ed; }
.product-import-status.is-unchanged { color: #315f91; background: #e8f1fb; }
.product-import-status.is-invalid { color: #984635; background: #fdebe6; }
.product-import-table td:last-child small { display: block; margin-top: .32rem; color: #718096; font-size: .73rem; }
.product-import-pagination {
  position: sticky;
  z-index: 3;
  bottom: -.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .85rem;
  padding: .72rem .82rem;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: .8rem;
  box-shadow: 0 5px 16px rgba(28, 47, 76, .04);
}
.product-import-pagination-summary {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  color: #64758b;
  font-size: .8rem;
}
.product-import-pagination-summary strong { color: #233d5b; font-size: .88rem; font-weight: 600; }
.product-import-pagination-controls { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .42rem; }
.product-import-page-numbers {
  min-width: 0;
  max-width: min(44vw, 520px);
  display: flex;
  gap: .34rem;
  overflow-x: auto;
  padding: .12rem .05rem .24rem;
  scrollbar-width: thin;
}
.product-import-pagination-nav,
.product-import-page-number {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  color: #425a75;
  background: #f7f9fc;
  border: 1px solid #d8e1eb;
  border-radius: .56rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.product-import-pagination-nav { padding: .55rem .68rem; }
.product-import-page-number { min-width: 36px; padding: .55rem .45rem; }
.product-import-pagination-nav:hover:not(:disabled),
.product-import-page-number:hover { color: #125b46; background: #edf8f4; border-color: #a8d6c7; }
.product-import-page-number.is-current {
  color: #fff;
  background: #176a50;
  border-color: #176a50;
  box-shadow: 0 4px 11px rgba(23, 106, 80, .2);
}
.product-import-pagination-nav:focus-visible,
.product-import-page-number:focus-visible { outline: 3px solid rgba(47, 129, 102, .22); outline-offset: 2px; }
.product-import-pagination-nav:disabled,
.product-import-pagination-nav.is-disabled { color: #9aa8b8; background: #f4f6f8; border-color: #e4e8ed; cursor: not-allowed; }
.product-import-preview-footer {
  position: relative;
  z-index: 4;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.15rem;
  background: #fff;
  border-top: 1px solid #dce5ef;
  box-shadow: 0 -8px 24px rgba(28, 47, 76, .06);
}
.product-import-preview-footer > span { max-width: 560px; color: #637287; font-size: .8rem; line-height: 1.45; }
.product-import-preview-footer > span strong { color: #176a50; font-weight: 600; }
.product-import-preview-footer > div { display: flex; gap: .55rem; }

@media (max-width: 760px) {
  .product-import-modal .modal-content { border-radius: 0; }
  .product-import-modal-header { padding: 1.05rem; }
  .product-import-modal-header h2 { font-size: 1.22rem; }
  .product-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-import-summary span:nth-child(2) { border-right: 0; }
  .product-import-summary span:nth-child(-n+2) { border-bottom: 1px solid #e0e7f0; }
  .product-import-preview-body { padding: .75rem; }
  .product-import-select-bar { position: sticky; top: 0; z-index: 3; margin-bottom: .65rem; }
  .product-import-table-wrap { overflow: visible; border: 0; background: transparent; }
  .product-import-table { min-width: 0; display: block; }
  .product-import-table thead { display: none; }
  .product-import-table tbody { display: grid; gap: .7rem; }
  .product-import-table tr {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: .82rem;
    box-shadow: 0 6px 18px rgba(28, 47, 76, .05);
  }
  .product-import-table td {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .72rem .8rem;
    border-bottom: 1px solid #e8edf4;
    text-align: left;
  }
  .product-import-table td::before { content: attr(data-label); color: #728197; font-size: .68rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
  .product-import-table td:last-child { border-bottom: 0; }
  .product-import-pagination { align-items: stretch; flex-direction: column; gap: .68rem; }
  .product-import-pagination-controls { justify-content: space-between; }
  .product-import-page-numbers { max-width: none; flex: 1 1 auto; }
  .product-import-preview-footer { align-items: stretch; flex-direction: column; }
  .product-import-preview-footer > div { display: grid; grid-template-columns: 1fr; }
  .product-import-preview-footer .btn { min-height: 46px; width: 100%; }
}

@media (max-width: 575.98px) {
  .product-import-preview-modal .modal-content,
  .product-import-preview-modal .modal-content > form {
    height: 100%;
    max-height: none;
  }
}

/* Product key inventory readability */
.product-key-catalog-panel { overflow: hidden; }
.product-key-results-meta { min-height: 58px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.25rem; padding: .9rem 1.25rem; font-size: .9rem; }
.product-key-results-meta strong { color: #263951; font-size: 1.04rem; font-weight: 550; }
.product-key-results-hint { display: inline-flex; align-items: center; gap: .5rem; color: #64748b; font-size: .84rem; font-weight: 400; }
.product-key-results-hint > span { width: 25px; height: 25px; display: inline-grid; place-items: center; color: #fff; background: #2869c7; border-radius: 50%; font-size: 1rem; font-weight: 400; line-height: 1; }
.product-key-table { width: 100%; table-layout: fixed; }
.product-key-col-select { width: 54px; }
.product-key-col-product { width: 27%; }
.product-key-col-sku { width: 15%; }
.product-key-col-secret { width: 38%; }
.product-key-col-status { width: 11%; }
.product-key-col-view { width: 104px; }
.product-key-table th { padding: .9rem 1rem; color: #5f6e83; font-size: .77rem; font-weight: 550; letter-spacing: .045em; }
.product-key-table td { padding: 1.05rem 1rem; color: #304158; font-size: .95rem; font-weight: 400; line-height: 1.55; }
.product-key-table .product-key-row { background: #fff; transition: background-color .18s ease, box-shadow .18s ease; }
.product-key-table .product-key-row:nth-child(4n + 1) { background: #f8fbff; }
.product-key-table .product-key-row:hover, .product-key-table .product-key-row.is-open { background: #f1f7ff; box-shadow: inset 4px 0 0 #2c6dcc; }
.product-key-record-link { min-width: 0; display: block; }
.product-key-record-link .product-key-product-name { display: block; color: #192b44; font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.48; text-transform: none; overflow-wrap: anywhere; }
.product-key-table .sku-value { max-width: 100%; padding: .42rem .58rem; color: #174777; background: #eaf3ff; border: 1px solid #d4e3f6; border-radius: .52rem; font-size: .88rem; font-weight: 500; line-height: 1.45; }
.product-key-table .product-key-code { width: 100%; padding: .58rem .68rem; color: #203750; background: #f4f7fb; border-color: #dce5f0; border-radius: .58rem; font-size: .9rem; font-weight: 450; letter-spacing: .018em; line-height: 1.55; word-break: break-word; }
.product-key-table .status-badge { padding: .4rem .65rem; font-size: .82rem; font-weight: 500; }
.product-key-view-heading { text-align: center !important; }
.product-key-view-cell { text-align: center; }
.product-key-view-toggle { min-width: 84px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .7rem; color: #235da9; background: #fff; border: 1px solid #cbdaf0; border-radius: .65rem; box-shadow: 0 5px 14px rgba(29,78,145,.07); font-size: .84rem; font-weight: 500; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.product-key-view-toggle:hover, .product-key-view-toggle[aria-expanded="true"] { color: #fff; background: #2467c7; border-color: #2467c7; transform: translateY(-1px); }
.product-key-view-toggle:focus-visible { outline: 3px solid rgba(52,121,232,.25); outline-offset: 2px; }
.product-key-view-icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.product-key-view-icon::before, .product-key-view-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: currentColor; border-radius: 99px; transform: translate(-50%, -50%); transition: transform .18s ease; }
.product-key-view-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.product-key-view-toggle[aria-expanded="true"] .product-key-view-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }
.product-key-detail-row[hidden] { display: none; }
.product-key-detail-row > td { padding: 0; background: linear-gradient(180deg, #edf5ff, #f8fbff); border-bottom: 1px solid #d8e4f3; }
.product-key-detail-panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(210px, .65fr) minmax(210px, .65fr); gap: .85rem; padding: 1rem 1.1rem 1.15rem; }
.product-key-detail-item { min-width: 0; padding: .9rem 1rem; background: rgba(255,255,255,.94); border: 1px solid #dce6f2; border-radius: .72rem; box-shadow: 0 5px 15px rgba(24,39,75,.03); }
.product-key-detail-item > span { display: block; margin-bottom: .45rem; color: #66758a; font-size: .76rem; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; }
.product-key-detail-item p, .product-key-detail-item time { margin: 0; color: #263b57; font-size: .93rem; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
.product-key-detail-actions > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.product-key-detail-actions .btn { min-height: 38px; font-size: .82rem; font-weight: 500; }
.product-key-pagination { width: 100%; min-width: 0; max-width: 100%; }
.product-key-pagination .product-pagination-summary { font-size: .92rem; font-weight: 400; }
.product-key-pagination .product-pagination-summary > strong,
.product-key-pagination .product-pagination-summary span strong { font-size: .98rem; font-weight: 500; }
.product-key-pagination .product-pagination-controls { flex-wrap: wrap; }
.product-key-pagination .product-pagination-pages { max-width: 100%; scrollbar-width: none; }
.product-key-pagination .product-pagination-pages::-webkit-scrollbar { display: none; }
.product-key-pagination .product-pagination-nav,
.product-key-pagination .product-page-number { font-size: .88rem; font-weight: 500; }

@media (max-width: 1080px) {
  .product-key-col-product { width: 25%; }
  .product-key-col-sku { width: 16%; }
  .product-key-col-secret { width: 36%; }
  .product-key-table td { padding-inline: .8rem; }
  .product-key-detail-panel { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(190px, .62fr)); }
}

@media (max-width: 720px) {
  .product-key-results-meta { align-items: flex-start; flex-direction: column; padding-inline: 1rem; }
  .product-key-table colgroup { display: none; }
  .product-key-table tbody { gap: .8rem; padding: .8rem; }
  .product-key-table .product-key-row { border-color: #dce4ef; box-shadow: 0 7px 20px rgba(24,39,75,.055); }
  .product-key-table .product-key-row.is-open { border-radius: .8rem .8rem 0 0; box-shadow: inset 3px 0 0 #2c6dcc; }
  .product-key-table .product-key-row.is-open + .product-key-detail-row { margin-top: -.8rem; border-top: 0; border-radius: 0 0 .8rem .8rem; box-shadow: 0 10px 22px rgba(24,39,75,.065); }
  .product-key-table td { font-size: .95rem; }
  .product-key-table .product-key-code { font-size: .86rem; }
  .product-key-table .product-key-view-cell { display: grid; text-align: left; }
  .product-key-table .product-key-view-cell::before { align-self: center; }
  .product-key-view-toggle { min-width: 96px; min-height: 44px; justify-self: start; }
  .product-key-detail-row:not([hidden]) { display: block; min-width: 0; overflow: hidden; background: transparent; }
  .product-key-detail-row > td { display: block !important; padding: 0 !important; border: 0; }
  .product-key-detail-row > td::before { display: none !important; }
  .product-key-detail-panel { grid-template-columns: 1fr 1fr; gap: .65rem; padding: .8rem; }
  .product-key-detail-actions { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .product-key-table tbody { padding: .65rem; }
  .product-key-table td { grid-template-columns: 82px minmax(0, 1fr); gap: .65rem; padding: .78rem; }
  .product-key-product-name { font-size: .96rem; }
  .product-key-table .sku-value { font-size: .84rem; }
  .product-key-detail-panel { grid-template-columns: 1fr; padding: .7rem; }
  .product-key-detail-actions { grid-column: auto; }
  .product-key-detail-actions .btn { flex: 1 1 120px; min-height: 44px; }
}

/* Portal-wide readable record surfaces */
.app-body .page-hero p,
.app-body .panel-heading p,
.app-body .info-banner { font-size: .95rem; font-weight: 400; }
.app-body .panel-heading > a,
.app-body .table-action,
.app-body .actions-cell a { font-size: .88rem; font-weight: 500; }
.app-body .form-field label,
.app-body .form-field legend { font-size: .84rem; font-weight: 500; }
.app-body .form-field > small { font-size: .78rem; font-weight: 400; }
.app-body .form-control,
.app-body .form-select { min-height: 46px; font-size: .96rem; font-weight: 400; }
.app-body .detail-grid dt,
.app-body .history-list dt,
.app-body .confirm-summary dt { font-size: .76rem; font-weight: 500; }
.app-body .detail-grid dd,
.app-body .history-list dd,
.app-body .confirm-summary dd { font-size: .98rem; font-weight: 400; line-height: 1.55; }
.app-body .choice-grid strong,
.app-body .switch-field strong { font-weight: 500; }

.readable-list-panel { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.readable-list-panel > * { min-width: 0; max-width: 100%; }
.readable-results-meta { min-height: 58px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; font-size: .93rem; font-weight: 400; }
.readable-results-meta strong { color: #263951; font-size: 1.04rem; font-weight: 500; }
.readable-results-meta > span:last-child { color: #68778c; font-size: .86rem; }
.readable-table-responsive { width: 100%; max-width: 100%; }
.readable-data-table { width: 100%; table-layout: fixed; }
.readable-data-table th { height: 50px; padding: .88rem 1rem; color: #5f6e83; font-size: .78rem; font-weight: 500; letter-spacing: .045em; }
.readable-data-table td { min-height: 64px; padding: 1.05rem 1rem; color: #304158; font-size: .95rem; font-weight: 400; line-height: 1.55; }
.readable-data-table tbody > tr:not(.stock-category-row):nth-child(odd) { background: #f8fbff; }
.readable-data-table tbody > tr:not(.stock-category-row):nth-child(even) { background: #fff; }
.readable-data-table tbody > tr:not(.stock-category-row):hover { background: #eff6ff; }
.readable-data-table .record-link span { font-size: .84rem; font-weight: 500; letter-spacing: .025em; }
.readable-data-table .record-link strong,
.readable-data-table .product-record-copy strong { color: #192b44; font-size: 1rem; font-weight: 400; line-height: 1.48; }
.readable-data-table .product-record-copy small { font-size: .84rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; }
.readable-data-table .sku-value { font-size: .86rem; font-weight: 500; line-height: 1.45; }
.readable-data-table .status-badge,
.readable-data-table .role-list span,
.readable-data-table .audit-action { font-size: .82rem; font-weight: 500; }
.readable-data-table .table-action { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: .42rem .65rem; color: #245b9f; background: #eef4fc; border: 1px solid #d8e4f3; border-radius: .5rem; text-decoration: none; }
.readable-data-table .table-action:hover { color: #fff; background: #1f5fb8; border-color: #1f5fb8; }

.dashboard-product-table { min-width: 920px; }
.key-stock-table .key-stock-col-product { width: 48%; }
.key-stock-table .key-stock-col-sku { width: 20%; }
.key-stock-table .key-stock-col-sold,
.key-stock-table .key-stock-col-remain { width: 16%; }
.key-stock-table .stock-number-column,
.key-stock-table .stock-number-cell { width: auto; }
.key-stock-table .stock-category-row th { font-size: .82rem; font-weight: 400; }
.key-stock-table .stock-category-row th span { font-size: .72rem; font-weight: 500; }
.key-stock-table .stock-category-row th strong { font-size: .9rem; font-weight: 500; }
.key-stock-table .stock-quantity strong { font-weight: 500; }
.key-stock-table .stock-quantity small { font-size: .72rem; font-weight: 400; }

.user-table .user-col-account { width: 29%; }
.user-table .user-col-roles { width: 20%; }
.user-table .user-col-status { width: 12%; }
.user-table .user-col-sign-in { width: 21%; }
.user-table .user-col-actions { width: 18%; }
.user-record { min-width: 0; display: grid; gap: .22rem; }
.user-record-name { color: #192b44; font-size: 1rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.user-record-email { color: #2862ad; font-size: .88rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.user-actions-cell { text-align: center; }
.user-actions-cell .table-action { min-width: 82px; white-space: nowrap; }

.audit-table { min-width: 1180px; }
.audit-table .audit-col-select { width: 4%; }
.audit-table .audit-col-when { width: 14%; }
.audit-table .audit-col-user { width: 14%; }
.audit-table .audit-col-action { width: 10%; }
.audit-table .audit-col-record { width: 13%; }
.audit-table .audit-col-details { width: 27%; }
.audit-table .audit-col-ip { width: 10%; }
.audit-table .audit-col-actions { width: 8%; }
.audit-table time,
.audit-ip-address { font-size: .88rem; font-weight: 400; }
.audit-ip-address { color: #334b68; overflow-wrap: anywhere; }
.audit-details { max-width: none; }
.audit-bulk-action-bar { border-top: 1px solid #dce5f0; }
.audit-bulk-action-bar .bulk-selection-count { font-size: .86rem; font-weight: 500; }
.audit-actions-cell form { margin: 0; }
.audit-delete-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: .42rem .65rem; color: #a3394c; background: #fff5f7; border: 1px solid #eccfd6; border-radius: .55rem; font-size: .78rem; font-weight: 500; cursor: pointer; }
.audit-delete-button:hover { color: #fff; background: #b43a50; border-color: #b43a50; }

/* Keep the full Orders table readable on laptops without widening the page. */
@media (min-width: 1281px) {
  .order-table-responsive { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
  .order-table { min-width: 1320px; }
  .order-table th { white-space: normal; }
  .order-table td { padding-inline: .65rem; }
  .order-table .selection-cell { padding-inline: .35rem; }
  .order-table .order-sku-key-link { flex-direction: column; align-items: flex-start; }
  .order-table .status-badge { max-width: 100%; white-space: normal; }
  .order-table time { white-space: normal; }
}

@media (max-width: 1280px) {
  .audit-table,
  .audit-table tbody { width: 100%; min-width: 0; display: block; }
  .audit-table { table-layout: auto; }
  .audit-table colgroup,
  .audit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .audit-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; padding: .9rem; background: #f5f8fc; }
  .audit-table tbody tr { min-width: 0; display: grid; align-content: start; background: #fff; border: 1px solid #dce5f0; border-radius: .85rem; box-shadow: 0 7px 20px rgba(24,39,75,.05); overflow: hidden; }
  .audit-table tbody tr:nth-child(odd) { background: #f8fbff; }
  .audit-table tbody tr:nth-child(even) { background: #fff; }
  .audit-table td { min-width: 0; display: grid; grid-template-columns: minmax(92px, .34fr) minmax(0, 1fr); gap: .75rem; align-items: start; padding: .75rem .85rem; border-bottom: 1px solid #e9eef5; }
  .audit-table td:last-child { border-bottom: 0; }
  .audit-table td::before { content: attr(data-label); color: #68788e; font-size: .73rem; font-weight: 500; letter-spacing: .045em; line-height: 1.5; text-transform: uppercase; }
  .audit-table td > * { min-width: 0; grid-column: 2; justify-self: start; }
  .audit-table .selection-cell { align-items: center; }
  .audit-table .audit-actions-cell form,
  .audit-table .audit-delete-button { width: 100%; }
}

@media (max-width: 1100px) {
  .audit-table tbody { grid-template-columns: 1fr; }
}

.readable-pagination { width: 100%; min-width: 0; max-width: 100%; }
.readable-pagination .product-pagination-summary { font-size: .92rem; font-weight: 400; }
.readable-pagination .product-pagination-summary > strong,
.readable-pagination .product-pagination-summary span strong { font-size: .98rem; font-weight: 500; }
.readable-pagination .product-pagination-controls { flex-wrap: wrap; }
.readable-pagination .product-pagination-pages { max-width: 100%; scrollbar-width: none; }
.readable-pagination .product-pagination-pages::-webkit-scrollbar { display: none; }
.readable-pagination .product-pagination-nav,
.readable-pagination .product-page-number { font-size: .88rem; font-weight: 500; }

/* Keep every primary catalogue consistent with the regular-weight treatment. */
.product-list .product-record-copy strong { font-weight: 400; }
.order-number-link strong,
.category-record strong { font-weight: 400; }
.order-customer-cell { font-weight: 400 !important; }
.product-key-table th { font-weight: 500; }
.product-list-header,
.product-disclosure-label,
.product-summary-label,
.product-results-hint,
.product-disclosure-actions .btn { font-weight: 500; }
.product-results-meta strong { font-weight: 500; }

@media (max-width: 760px) {
  .readable-results-meta { align-items: flex-start; flex-direction: column; padding-inline: 1rem; }
  .readable-data-table { min-width: 0; table-layout: auto; }
  .readable-data-table colgroup { display: none; }
  .readable-data-table td { font-size: .96rem; font-weight: 400; }
  .readable-data-table td::before { font-size: .74rem; font-weight: 500; }
  .readable-data-table .record-link strong,
  .readable-data-table .product-record-copy strong,
  .user-record-name { font-size: .98rem; font-weight: 400; }
  .readable-data-table .table-action { min-height: 44px; }
  .user-actions-cell { text-align: left; }
}

@media (max-width: 430px) {
  .readable-data-table td { grid-template-columns: 84px minmax(0, 1fr); gap: .65rem; padding: .78rem; }
}

/* Key stock drill-down: secure details are loaded only when a quantity is opened. */
.key-stock-table .key-stock-record-row-light { background: #fff; }
.key-stock-table .key-stock-record-row-tint { background: #f8fbff; }
.key-stock-table .key-stock-record-row:hover,
.key-stock-table .key-stock-record-row.is-open { background: #eff6ff; }
.key-stock-table .key-stock-record-row.is-open { box-shadow: inset 4px 0 0 #2b68b8; }
.key-stock-detail-toggle {
  position: relative;
  min-width: 104px;
  grid-template-columns: 1fr 22px;
  align-items: center;
  gap: .05rem .42rem;
  padding: .55rem .58rem .55rem .76rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.key-stock-detail-toggle strong,
.key-stock-detail-toggle small { grid-column: 1; }
.key-stock-detail-toggle:hover { border-color: currentColor; box-shadow: 0 5px 14px rgba(31, 73, 125, .12); transform: translateY(-1px); }
.key-stock-detail-toggle:focus-visible { outline: 3px solid rgba(40, 105, 194, .28); outline-offset: 2px; }
.key-stock-detail-toggle[aria-expanded="true"] { border-color: currentColor; box-shadow: 0 0 0 3px rgba(44, 109, 204, .1); }
.key-stock-expand-icon {
  position: relative;
  width: 22px;
  height: 22px;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  align-self: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid currentColor;
  border-radius: 50%;
}
.key-stock-expand-icon::before,
.key-stock-expand-icon::after { content: ""; position: absolute; width: 8px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .18s ease; }
.key-stock-expand-icon::after { transform: rotate(90deg); }
.key-stock-detail-toggle[aria-expanded="true"] .key-stock-expand-icon::after { transform: rotate(0); }
.key-stock-detail-row[hidden] { display: none !important; }
.key-stock-table .key-stock-detail-row,
.key-stock-table .key-stock-detail-row:hover { background: #edf4fc; }
.key-stock-table .key-stock-detail-row > td { min-height: 0; padding: 0; border: 0; }
.key-stock-detail-shell { min-width: 0; padding: .8rem; }
.key-stock-detail-content { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #cfdded; border-radius: .9rem; box-shadow: 0 12px 28px rgba(26, 55, 92, .09); }
.key-stock-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: linear-gradient(135deg, #f7faff 0%, #edf5ff 100%); border-bottom: 1px solid #dbe6f2; }
.key-stock-detail-header > div { min-width: 0; }
.key-stock-detail-kicker { display: block; margin-bottom: .22rem; color: #2865ad; font-size: .7rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
.key-stock-detail-header h3 { margin: 0; color: #172a43; font-size: 1.08rem; font-weight: 500; line-height: 1.42; }
.key-stock-detail-header p { margin: .32rem 0 0; color: #66778d; font-size: .86rem; font-weight: 400; }
.key-stock-detail-close { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; padding: 0; color: #35536f; background: #fff; border: 1px solid #cfdaE7; border-radius: .65rem; font-size: 1.45rem; font-weight: 300; line-height: 1; cursor: pointer; }
.key-stock-detail-close:hover { color: #fff; background: #245fa8; border-color: #245fa8; }
.key-stock-detail-note { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin: .9rem 1rem 0; padding: .7rem .85rem; border: 1px solid; border-radius: .65rem; font-size: .84rem; }
.key-stock-detail-note strong { font-size: .9rem; font-weight: 500; }
.key-stock-detail-note span { font-weight: 400; text-align: right; }
.key-stock-detail-note.sold { color: #1f5699; background: #eff6ff; border-color: #d2e2f6; }
.key-stock-detail-note.available { color: #096648; background: #ecf9f3; border-color: #cdebdc; }
.key-stock-detail-table-wrap { width: 100%; padding: .8rem 1rem 1rem; overflow-x: auto; }
.key-stock-detail-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid #dce5ef; border-radius: .7rem; overflow: hidden; }
.key-stock-detail-table th { height: auto; padding: .66rem .72rem; color: #5d6e83; background: #f5f8fc; border-bottom: 1px solid #dce5ef; font-size: .72rem; font-weight: 500; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.key-stock-detail-table td { min-height: 0; padding: .75rem .72rem; color: #33465d; background: #fff; border-bottom: 1px solid #e8edf3; font-size: .89rem; font-weight: 400; line-height: 1.48; vertical-align: middle; overflow-wrap: anywhere; }
.key-stock-detail-table tbody tr:nth-child(even) td { background: #f9fbfe; }
.key-stock-detail-table tbody tr:last-child td { border-bottom: 0; }
.sold-detail-table th:nth-child(1), .sold-detail-table td:nth-child(1) { width: 14%; }
.sold-detail-table th:nth-child(2), .sold-detail-table td:nth-child(2) { width: 20%; }
.sold-detail-table th:nth-child(3), .sold-detail-table td:nth-child(3) { width: 16%; }
.sold-detail-table th:nth-child(4), .sold-detail-table td:nth-child(4) { width: 36%; }
.sold-detail-table th:nth-child(5), .sold-detail-table td:nth-child(5) { width: 14%; }
.available-detail-table th:nth-child(1), .available-detail-table td:nth-child(1) { width: 40%; }
.available-detail-table th:nth-child(2), .available-detail-table td:nth-child(2) { width: 18%; }
.available-detail-table th:nth-child(3), .available-detail-table td:nth-child(3) { width: 17%; }
.available-detail-table th:nth-child(4), .available-detail-table td:nth-child(4) { width: 12%; }
.available-detail-table th:nth-child(5), .available-detail-table td:nth-child(5) { width: 13%; }
.key-stock-delete-bar { margin: .8rem 1rem 0; flex-wrap: wrap; }
.key-stock-delete-error { margin: .8rem 1rem 0; }
.key-stock-key-select { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.key-stock-key-select > input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: .15rem; }
.key-stock-copy-key { min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.product-key-copy-key { min-height: 44px; white-space: normal; }
.product-key-table .product-key-copy-key { width: 100%; }
.key-stock-copy-key .product-key-code { display: block; text-align: left; }
.key-stock-copy-key:hover .product-key-code { background: #e3edfa; border-color: #96b9ed; }
.key-stock-copy-key:focus-visible { outline: 3px solid rgba(52, 121, 232, .35); outline-offset: 3px; border-radius: .4rem; }
.key-stock-copy-hint { display: block; margin-top: .2rem; color: #1e60aa; font-size: .75rem; }
.key-stock-copy-status { margin: .6rem 1rem 0; color: #255b9a; font-size: .85rem; }
.key-stock-copy-status:empty { margin: 0; }
.fulfillment-copy-key { width: 100%; }
.fulfillment-copy-key code { display: block; text-align: left; }
.fulfillment-copy-key:hover code { background: #e3edfa; }
.fulfillment-summary-table [data-stock-copy-status], .fulfillment-line-card [data-stock-copy-status] { display: block; margin: .3rem 0 0; }
.fulfillment-summary-table [data-stock-copy-status]:empty, .fulfillment-line-card [data-stock-copy-status]:empty { margin: 0; }
.available-detail-table .order-sku-key-link { flex-wrap: wrap; }
.available-detail-table button { min-height: 44px; white-space: normal; }
.key-stock-detail-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border-top: 1px solid #dce5ef; }
.key-stock-page-summary { color: #5d6e83; font-size: .85rem; }
.key-stock-page-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.key-stock-page-links > a, .key-stock-page-links > .product-page-number { min-width: 44px; min-height: 44px; }
.key-stock-order-link { color: #1e60aa; font-weight: 500; text-decoration: none; }
.key-stock-order-link:hover { text-decoration: underline; }
.key-stock-unlinked { color: #7a5860; font-size: .82rem; }
.key-stock-detail-table .product-key-code { font-size: .8rem; font-weight: 500; }
.key-stock-detail-empty { display: flex; align-items: center; gap: .8rem; margin: 1rem; padding: 1rem; color: #255b9a; background: #f2f7fd; border: 1px solid #d8e5f3; border-radius: .7rem; }
.key-stock-detail-empty > span { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; background: #fff; border-radius: 50%; font-size: 1.05rem; }
.key-stock-detail-empty strong { font-weight: 500; }
.key-stock-detail-empty p { margin: .18rem 0 0; color: #65768a; font-size: .86rem; }
.key-stock-detail-empty.warning { color: #8b4e0f; background: #fff8ec; border-color: #f0dfbd; }
.key-stock-detail-loading,
.key-stock-detail-error { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; color: #536981; font-size: .9rem; }
.key-stock-detail-loading span { width: 22px; height: 22px; border: 2px solid #c7d7ea; border-top-color: #2869b8; border-radius: 50%; animation: key-stock-spin .7s linear infinite; }
.key-stock-detail-loading p { margin: 0; }
.key-stock-detail-error { flex-direction: column; color: #8a3041; background: #fff5f6; }
.key-stock-detail-error strong { font-weight: 500; }
@keyframes key-stock-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .key-stock-table .key-stock-record-row.is-open { border-radius: .8rem .8rem 0 0; }
  .key-stock-table .key-stock-record-row.is-open + .key-stock-detail-row { margin-top: -.75rem; background: transparent; border: 1px solid #cfdceb; border-top: 0; border-radius: 0 0 .8rem .8rem; box-shadow: 0 10px 24px rgba(26, 55, 92, .08); overflow: hidden; }
  .key-stock-table .key-stock-detail-row:not([hidden]) { display: block; min-width: 0; }
  .key-stock-table .key-stock-detail-row > td { display: block !important; padding: 0 !important; }
  .key-stock-table .key-stock-detail-row > td::before { display: none !important; }
  .key-stock-detail-shell { padding: .65rem; background: #edf4fc; }
  .key-stock-detail-content { border-radius: .72rem; box-shadow: none; }
  .key-stock-detail-header { padding: .9rem; }
  .key-stock-detail-header h3 { font-size: 1rem; }
  .key-stock-detail-note { align-items: flex-start; flex-direction: column; margin: .75rem .75rem 0; }
  .key-stock-detail-note span { text-align: left; }
  .key-stock-detail-table-wrap { padding: .7rem .75rem .8rem; overflow: visible; }
  .key-stock-detail-table,
  .key-stock-detail-table tbody { width: 100%; display: block; border: 0; }
  .key-stock-detail-table { table-layout: auto; overflow: visible; }
  .key-stock-detail-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .key-stock-detail-table tbody { display: grid; gap: .65rem; }
  .key-stock-detail-table tbody tr { display: grid; background: #fff; border: 1px solid #dbe5ef; border-radius: .65rem; overflow: hidden; }
  .key-stock-detail-table td,
  .sold-detail-table td:nth-child(n),
  .available-detail-table td:nth-child(n) { width: auto; min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .65rem; padding: .68rem .72rem; background: #fff !important; }
  .key-stock-detail-table td::before { content: attr(data-label); color: #728095; font-size: .67rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
  .key-stock-detail-table td > * { min-width: 0; justify-self: start; }
  .sold-detail-table tbody td.sold-key-value { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .sold-detail-table td.sold-key-value .key-stock-copy-key { width: 100%; justify-self: stretch; }
  .key-stock-detail-toggle { min-width: 132px !important; min-height: 48px; justify-items: start !important; }
}

@media (max-width: 430px) {
  .key-stock-detail-table td,
  .sold-detail-table td:nth-child(n),
  .available-detail-table td:nth-child(n) { grid-template-columns: 78px minmax(0, 1fr); }
  .key-stock-detail-shell { padding: .5rem; }
  .key-stock-detail-header { gap: .55rem; padding: .8rem; }
  .key-stock-detail-close { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .key-stock-detail-toggle { transition: none; }
  .key-stock-detail-loading span { animation-duration: 1.4s; }
}

/* Fulfillment Summary immutable delivery ledger */
.fulfillment-ledger-note { margin-bottom: 1rem; color: #22523f; background: linear-gradient(100deg, #edf9f4, #f7fcfa); border-color: #cce8dc; }
.fulfillment-summary-filter .filter-search { flex: 1 1 420px; }
.fulfillment-summary-table { min-width: 1320px; }
.fulfillment-summary-table .fulfillment-col-select { width: 3%; }
.fulfillment-summary-table .fulfillment-col-order { width: 9%; }
.fulfillment-summary-table .fulfillment-col-customer { width: 12%; }
.fulfillment-summary-table .fulfillment-col-product { width: 15%; }
.fulfillment-summary-table .fulfillment-col-key { width: 22%; }
.fulfillment-summary-table .fulfillment-col-total { width: 9%; }
.fulfillment-summary-table .fulfillment-col-date { width: 9%; }
.fulfillment-summary-table .fulfillment-col-status { width: 11%; }
.fulfillment-summary-table .fulfillment-col-actions { width: 10%; }
.fulfillment-summary-table .row-light { background: #fff !important; }
.fulfillment-summary-table .row-tint { background: #f6faff !important; }
.fulfillment-summary-table .fulfillment-summary-row:hover,
.fulfillment-summary-table .fulfillment-summary-row.is-open { background: #edf5ff !important; }
.fulfillment-summary-table .fulfillment-summary-row.is-open { box-shadow: inset 4px 0 0 #2b68b8; }
.fulfillment-order-number { display: block; color: #1c579c; font-size: .94rem; font-weight: 500; }
.fulfillment-customer { display: block; color: #24384f; font-size: .96rem; font-weight: 400; }
.fulfillment-summary-table .order-approved-badge { margin-top: .42rem; }
.fulfillment-summary-table .order-country { margin-top: .42rem; }
.fulfillment-total-cell { white-space: nowrap; }
.fulfillment-value-list,
.fulfillment-key-list { min-width: 0; display: grid; gap: .3rem; }
.fulfillment-value-list span { font-size: .91rem; line-height: 1.4; }
.fulfillment-key-list code { max-width: 100%; color: #304964; font-size: .76rem; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.fulfillment-summary-table time { display: grid; color: #34495f; font-size: .88rem; font-weight: 400; }
.fulfillment-summary-table time small { color: #7b899a; font-size: .75rem; }
.fulfillment-status-button,
.fulfillment-view-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; padding: .46rem .62rem; border: 1px solid; border-radius: .62rem; font-size: .8rem; font-weight: 500; line-height: 1.2; cursor: pointer; }
.fulfillment-status-button > span { width: 8px; height: 8px; flex: 0 0 8px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.75); }
.fulfillment-status-button.opened { color: #087555; background: #e8f8f1; border-color: #bee5d5; }
.fulfillment-status-button.not-opened { color: #a52a40; background: #fff0f3; border-color: #f0ccd4; }
.fulfillment-status-button.failed { color: #973627; background: #fff0ec; border-color: #efcfc7; }
.fulfillment-status-button.pending { color: #245d9f; background: #edf5ff; border-color: #cedff3; }
.fulfillment-status-button.onhold { color: #9a5700; background: #fff2d8; border-color: #edcf9b; }
.fulfillment-status-button:hover { filter: brightness(.97); box-shadow: 0 4px 12px rgba(27,55,91,.11); }
.fulfillment-summary-bulk-action-bar { border-top: 1px solid #dce5f0; }
.fulfillment-summary-bulk-action-bar .bulk-selection-count { font-size: .86rem; font-weight: 500; }
.fulfillment-actions-cell { text-align: center; }
.fulfillment-row-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .42rem; }
.fulfillment-view-button { color: #245d9f; background: #eef5fd; border-color: #d3e1f1; }
.fulfillment-view-button span { font-size: 1rem; font-weight: 400; transition: transform .18s ease; }
.fulfillment-view-button[aria-expanded="true"] span { transform: rotate(45deg); }
.fulfillment-delete-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: .46rem .62rem; color: #a3394c; background: #fff5f7; border: 1px solid #eccfd6; border-radius: .62rem; font-size: .8rem; font-weight: 500; line-height: 1.2; text-decoration: none; }
.fulfillment-delete-button:hover { color: #fff; background: #b43a50; border-color: #b43a50; }
.fulfillment-status-button:focus-visible,
.fulfillment-view-button:focus-visible { outline: 3px solid rgba(37,104,190,.25); outline-offset: 2px; }
.fulfillment-summary-detail-row[hidden] { display: none !important; }
.fulfillment-summary-table .fulfillment-summary-detail-row,
.fulfillment-summary-table .fulfillment-summary-detail-row:hover { background: #eaf2fb !important; }
.fulfillment-summary-detail-row > td { min-height: 0 !important; padding: .8rem !important; border: 0; }
.fulfillment-detail-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #cddded; border-radius: 1rem; box-shadow: 0 14px 34px rgba(25,55,91,.1); }
.fulfillment-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem; color: #fff; background: linear-gradient(130deg, #0b2040, #164e84); }
.fulfillment-detail-header span { color: #82d9bd; font-size: .7rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
.fulfillment-detail-header h3 { margin: .28rem 0 0; color: #fff; font-size: 1.16rem; font-weight: 500; }
.fulfillment-detail-header p { margin: .28rem 0 0; color: #c7d6e7; font-size: .87rem; }
.fulfillment-detail-customer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; }
.fulfillment-detail-country,.fulfillment-detail-approved { display: inline-flex; align-items: center; gap: .35rem; }
.fulfillment-detail-country img { width: 24px; height: 18px; object-fit: cover; border: 1px solid rgba(255,255,255,.32); border-radius: .18rem; }
.fulfillment-detail-approved { padding: .2rem .48rem; color: #d5ffef; background: rgba(18,132,91,.32); border: 1px solid rgba(155,235,205,.42); border-radius: 999px; font-size: .72rem; font-weight: 600; }
.fulfillment-detail-header button { width: 42px; height: 42px; flex: 0 0 42px; padding: 0; color: #dce8f5; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: .65rem; font-size: 1.45rem; font-weight: 300; cursor: pointer; }
.fulfillment-detail-header button:hover { color: #17375a; background: #fff; }
.fulfillment-metric-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .7rem; padding: 1rem 1.1rem; background: #f7faff; border-bottom: 1px solid #dde7f1; }
.fulfillment-metric-grid article { min-width: 0; padding: .82rem; background: #fff; border: 1px solid #dfe7f0; border-radius: .72rem; }
.fulfillment-metric-grid span { display: block; color: #718095; font-size: .68rem; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.fulfillment-metric-grid strong { display: block; margin-top: .3rem; color: #1d334d; font-size: 1.08rem; font-weight: 500; }
.fulfillment-metric-grid small { display: block; margin-top: .25rem; color: #748297; font-size: .74rem; line-height: 1.45; }
.fulfillment-failure { margin: 1rem 1.1rem 0; padding: .85rem 1rem; color: #8b3028; background: #fff3f0; border: 1px solid #edcec7; border-radius: .72rem; }
.fulfillment-failure strong { font-weight: 500; }
.fulfillment-failure p { margin: .25rem 0 0; font-size: .86rem; }
.fulfillment-detail-section { padding: 1.1rem; border-bottom: 1px solid #e1e8f0; }
.fulfillment-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.fulfillment-section-heading > div > span { color: #3770b2; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.fulfillment-section-heading h4 { margin: .2rem 0 0; color: #20364f; font-size: 1rem; font-weight: 500; }
.fulfillment-section-heading small { color: #7b8999; font-size: .75rem; }
.fulfillment-section-heading > a { color: #1e62ad; font-size: .82rem; font-weight: 500; text-decoration: none; }
.fulfillment-line-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.fulfillment-line-card { min-width: 0; padding: .9rem; background: #fbfdff; border: 1px solid #dce6f0; border-radius: .75rem; }
.fulfillment-line-card.is-archived { opacity: .68; background: #f5f5f6; }
.fulfillment-line-top { display: flex; justify-content: space-between; gap: .5rem; color: #6a7b90; font-size: .7rem; }
.fulfillment-line-top strong { color: #147153; font-weight: 500; }
.fulfillment-line-card.is-archived .fulfillment-line-top strong { color: #8c5460; }
.fulfillment-line-card h5 { margin: .5rem 0; color: #20354d; font-size: .95rem; font-weight: 400; line-height: 1.45; }
.fulfillment-line-card code { display: block; padding: .55rem .62rem; color: #263f5d; background: #edf3fa; border-radius: .52rem; font-size: .79rem; font-weight: 500; overflow-wrap: anywhere; white-space: normal; }
.fulfillment-line-card > a { display: inline-flex; margin-top: .65rem; color: #1f62ab; font-size: .81rem; font-weight: 500; text-decoration: none; }
.fulfillment-browser-frame { overflow: hidden; background: #dfe8f2; border: 1px solid #ccd9e7; border-radius: .8rem; }
.browser-frame-bar { height: 38px; display: flex; align-items: center; gap: .4rem; padding: 0 .75rem; background: #edf2f7; border-bottom: 1px solid #ccd8e4; }
.browser-frame-bar span { width: 9px; height: 9px; background: #c7d1dd; border-radius: 50%; }
.browser-frame-bar span:first-child { background: #e67b78; }.browser-frame-bar span:nth-child(2) { background: #e8bd5d; }.browser-frame-bar span:nth-child(3) { background: #74bd8a; }
.browser-frame-bar strong { margin-left: .35rem; color: #617287; font-size: .72rem; font-weight: 500; }
.fulfillment-browser-frame iframe { width: 100%; height: 580px; display: block; background: #eef3f8; border: 0; }
.fulfillment-event-list { display: grid; gap: .55rem; }
.fulfillment-event-list article { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: .65rem; padding: .7rem .78rem; background: #f8fafc; border: 1px solid #e0e7ef; border-radius: .65rem; }
.event-dot { width: 10px; height: 10px; margin-top: .28rem; background: #4b79ad; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #bcd0e5; }
.event-emailopened .event-dot,.event-browserviewed .event-dot { background: #15966b; box-shadow: 0 0 0 2px #bde7d8; }
.event-tutorialclicked .event-dot { background: #6b55c3; box-shadow: 0 0 0 2px #d6cdf2; }
.event-deliveryfailed .event-dot { background: #c1493d; box-shadow: 0 0 0 2px #efc9c4; }
.fulfillment-event-list strong { color: #263c55; font-size: .85rem; font-weight: 500; }
.fulfillment-event-list time { margin-left: .5rem; color: #718095; font-size: .74rem; }
.fulfillment-event-list p { margin: .25rem 0 0; color: #52657a; font-size: .82rem; }
.fulfillment-event-list small { display: block; margin-top: .25rem; color: #8390a0; font-size: .7rem; overflow-wrap: anywhere; }
.fulfillment-no-events { padding: 1rem; color: #63748a; background: #f7f9fc; border: 1px dashed #cfdae6; border-radius: .7rem; font-size: .85rem; }
.fulfillment-detail-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; padding: 1rem 1.1rem; background: #f7faff; }
.fulfillment-detail-actions form { margin: 0; }
.fulfillment-detail-loading,.fulfillment-detail-error { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; color: #587087; }
.fulfillment-detail-loading span { width: 24px; height: 24px; border: 2px solid #c8d7e8; border-top-color: #2c68b3; border-radius: 50%; animation: key-stock-spin .75s linear infinite; }
.fulfillment-detail-loading p { margin: 0; }.fulfillment-detail-error { flex-direction: column; color: #943448; background: #fff4f6; }
.fulfillment-edit-panel { max-width: 1050px; margin-inline: auto; }
.fulfillment-edit-lines { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: 1rem 0; }
.fulfillment-edit-lines article { min-width: 0; padding: 1rem; background: #f8fbff; border: 1px solid #dce6f1; border-radius: .8rem; }
.fulfillment-edit-lines header { display: grid; gap: .35rem; margin-bottom: .8rem; }
.fulfillment-edit-lines header span { color: #2764aa; font-size: .76rem; font-weight: 500; }
.fulfillment-edit-lines header code { color: #4c5f75; font-size: .75rem; overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .fulfillment-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fulfillment-line-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .fulfillment-summary-table { min-width: 0; }
  .fulfillment-summary-table colgroup { display: none; }
  .fulfillment-summary-table .fulfillment-summary-row.is-open { border-radius: .8rem .8rem 0 0; }
  .fulfillment-summary-table .fulfillment-summary-row.is-open + .fulfillment-summary-detail-row { margin-top: -.75rem; border: 1px solid #ccdbea; border-top: 0; border-radius: 0 0 .8rem .8rem; overflow: hidden; }
  .fulfillment-summary-table .fulfillment-summary-detail-row:not([hidden]) { display: block; min-width: 0; background: transparent !important; }
  .fulfillment-summary-detail-row > td { display: block !important; padding: .55rem !important; }
  .fulfillment-summary-detail-row > td::before { display: none !important; }
  .fulfillment-summary-table td { font-size: .95rem; }
  .fulfillment-actions-cell { text-align: left; }
  .fulfillment-row-actions { justify-content: flex-start; }
  .fulfillment-summary-table .selection-cell { display: flex; align-items: center; justify-content: space-between; }
  .fulfillment-view-button,.fulfillment-status-button { min-height: 46px; }
  .fulfillment-row-actions .fulfillment-view-button,
  .fulfillment-row-actions .fulfillment-delete-button { min-height: 46px; flex: 1 1 120px; }
  .fulfillment-detail-card { border-radius: .75rem; box-shadow: none; }
  .fulfillment-detail-header { padding: 1rem; }
  .fulfillment-metric-grid { padding: .75rem; }
  .fulfillment-detail-section { padding: .9rem; }
  .fulfillment-section-heading { align-items: flex-start; flex-direction: column; }
  .fulfillment-browser-frame iframe { height: 480px; }
  .fulfillment-detail-actions { align-items: stretch; flex-direction: column; padding: .9rem; }
  .fulfillment-detail-actions .btn,.fulfillment-detail-actions form,.fulfillment-detail-actions form .btn { width: 100%; min-height: 46px; }
  .fulfillment-edit-lines { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .fulfillment-metric-grid { grid-template-columns: 1fr; }
  .fulfillment-detail-header h3 { font-size: 1rem; }
  .fulfillment-browser-frame iframe { height: 420px; }
  .fulfillment-event-list time { display: block; margin: .12rem 0 0; }
}


/* Delivery evidence: readable on phones and on wide admin screens. */
.evidence-toolbar { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin:.8rem 0; }
.evidence-toolbar .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; white-space:normal; }
.evidence-toolbar [role="status"] { flex:1 1 220px; font-size:.85rem; color:#435671; overflow-wrap:anywhere; }
.evidence-explanation { background:#edf4fc; border:1px solid #d3e1f0; border-radius:10px; padding:12px 15px; color:#354c68; font-size:.88rem; line-height:1.65; }
.evidence-report { max-width:1160px; margin-inline:auto; padding:clamp(16px,3vw,32px); }
.evidence-report-heading { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.evidence-report-heading h1 { margin:.3rem 0; font-size:clamp(1.4rem,3vw,2rem); overflow-wrap:anywhere; }
.evidence-report-heading p { color:#52647d; }
.evidence-fingerprint { font-size:.8rem; overflow-wrap:anywhere; }
.evidence-report-section { margin-top:28px; }
.evidence-report-section h2 { font-size:1.15rem; color:#193451; border-bottom:1px solid #dce5ef; padding-bottom:12px; }
.evidence-report-entry { border:1px solid #dce5ef; border-radius:12px; padding:16px; margin:12px 0; background:#fff; }
.evidence-report-entry h3 { font-size:1rem; margin:0 0 12px; overflow-wrap:anywhere; }
.evidence-fields { display:grid; grid-template-columns:minmax(140px,29%) minmax(0,1fr); gap:9px 16px; margin:12px 0 0; font-size:.86rem; line-height:1.6; }
.evidence-fields dt { color:#465a74; font-weight:600; overflow-wrap:anywhere; }
.evidence-fields dd { margin:0; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; color:#1e334d; }
.evidence-event-details { margin-top:9px; }
.evidence-event-details summary { cursor:pointer; min-height:44px; display:list-item; padding:10px 0; color:#245d94; font-weight:600; }
.fulfillment-event-list article > div { min-width:0; overflow-wrap:anywhere; }
.fulfillment-event-list time { display:block; }
[data-evidence-copy-fallback] textarea { width:100%; margin-top:8px; padding:12px; font-size:.85rem; }
@media(max-width:600px) {
  .evidence-toolbar .btn { flex:1 1 140px; }
  .evidence-fields { grid-template-columns:minmax(0,1fr); gap:3px; }
  .evidence-fields dd { margin-bottom:9px; }
  .evidence-report-entry { padding:12px; }
}

/* Customer-approved product alternatives */
.alternative-editor,.alternative-history-panel{margin-top:1.25rem}
.alternative-editor-body,.alternative-history-panel>.alternative-history{padding:clamp(1rem,2.5vw,1.5rem)}
.alternative-editor .validation-summary-valid{display:none}
.alternative-originals h3{font-size:1rem}
.alternative-editor .panel-heading p{margin:.5rem 0 0;color:var(--muted);font-size:.9rem}
.fulfillment-detail-card>.alternative-originals{padding:1.4rem}
.alternative-originals p,.alternative-comparison p{display:flex;flex-direction:column;gap:.25rem;overflow-wrap:anywhere}
.alternative-purchase-selection{border:0;padding:0;margin:1.5rem 0}
.alternative-purchase-selection legend{font-size:1rem;font-weight:700;margin-bottom:.75rem}
.alternative-purchase-selection label,.alternative-consent{display:flex;gap:.75rem;align-items:flex-start;min-height:44px;margin:.65rem 0}
.alternative-purchase-selection input,.alternative-consent input{width:20px;height:20px;flex:0 0 20px;margin-top:.15rem}
.alternative-purchase-selection small,.alternative-comparison small{display:block;color:var(--text-muted,#64748b)}
.alternative-line{display:grid;grid-template-columns:minmax(0,1fr) 7rem auto;gap:1rem;padding:1.1rem;border:1px solid #dce3ec;border-radius:12px;margin:1rem 0;align-items:end}
.alternative-line .form-field,.alternative-line select{min-width:0;max-width:100%}
.alternative-remove{min-height:44px;margin-bottom:.1rem}
.alternative-history{display:grid;gap:1rem}
.alternative-history-card{padding:1.1rem;border:1px solid #dce3ec;border-radius:12px;min-width:0}
.alternative-history-heading{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.alternative-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;margin:1rem 0}
.alternative-comparison h3{font-size:.95rem}
.alternative-note{white-space:pre-wrap;overflow-wrap:anywhere}
.alternative-history-card .form-actions{justify-content:flex-start;margin-top:1rem}
.alternative-editor .form-actions .btn{white-space:normal;min-height:44px}
.order-alternative-label{display:block;margin-top:.5rem;font-size:.82rem;color:#315da8;overflow-wrap:anywhere}
.order-product-cell .order-line-list:has(.order-product-stock-item){white-space:normal}
.order-product-stock-item{display:block}.order-product-stock-item+.order-product-stock-item{margin-top:.4rem}
.order-product-cell .order-product-stock-link{display:inline-block;max-width:100%;color:#245ea5;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.order-product-stock-link:focus-visible{outline:3px solid #f2ac43;outline-offset:3px;border-radius:3px}
.key-stock-category-context{margin:0 0 1rem;padding:.75rem 1rem;border-radius:10px;background:#edf5ff;color:#24476f;overflow-wrap:anywhere}
@media(max-width:767px){.alternative-line{grid-template-columns:minmax(0,1fr);padding:.85rem}.alternative-comparison{grid-template-columns:minmax(0,1fr);gap:.75rem}.alternative-editor .form-actions .btn{width:100%}.alternative-history-card{padding:.85rem}}

/* Alternative correction screen */
.alternative-correction h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.alternative-correction form { margin-top: 1rem; }
.alternative-correction .form-field { margin-top: 1rem; }
.alternative-correction .alternative-comparison { margin-bottom: 1rem; }
.alternative-correction .form-actions .btn { white-space: normal; }

/* Category navigation and embedded product stock */
.catalog-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem;overflow-wrap:anywhere}
.catalog-search-panel{padding:1.25rem;margin-bottom:1.25rem}
.catalog-search-form{display:flex;flex-wrap:wrap;align-items:end;gap:1rem}
.catalog-search-form>.form-field:first-child{flex:2 1 18rem}
.catalog-search-form>.form-field{flex:1 1 11rem;min-width:0;margin:0}
.catalog-search-form>.form-actions{margin:0;align-items:stretch}
.catalog-search-form input,.catalog-search-form select{min-height:44px}
.catalog-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1rem;padding:1.25rem}
.catalog-category-card{display:flex;flex-direction:column;gap:.55rem;padding:1rem;border:1px solid #dce3ec;border-radius:12px;color:var(--text-main,#1f2937);background:#fff;text-decoration:none;min-width:0;overflow-wrap:anywhere}
.catalog-category-card:hover{border-color:#3673d4;background:#f5f9ff}
.catalog-category-card:focus-visible{outline:3px solid #3673d4;outline-offset:3px}
.catalog-category-card strong{display:flex;justify-content:space-between;gap:1rem}
.catalog-category-card>span,.catalog-category-card small{color:var(--text-muted,#64748b);font-size:.85rem}
.catalog-empty,.catalog-stock-help{margin:0;padding:1.25rem;color:var(--text-muted,#64748b)}
.catalog-subcategories{margin-bottom:1.25rem}
.catalog-products .panel-heading p{margin:.5rem 0 0;font-size:.9rem;color:var(--text-muted,#64748b)}
.catalog-stock-table .product-record-copy{min-width:0;overflow-wrap:anywhere}
@media(max-width:767px){.catalog-search-panel{padding:1rem}.catalog-search-form>.form-field,.catalog-search-form>.form-field:first-child{flex-basis:100%}.catalog-search-form>.form-actions{width:100%;display:flex}.catalog-search-form>.form-actions .btn{flex:1}.catalog-category-grid{padding:1rem}.catalog-breadcrumbs{font-size:.85rem}.catalog-products .panel-heading,.catalog-subcategories .panel-heading{flex-wrap:wrap}.catalog-stock-table .order-sku-chooser{max-width:100%}}