:root { --ink:#1e293b; --muted:#64748b; --line:#dbe3e8; --paper:#ffffff; --ground:#f5f7f8; --teal:#0f766e; --teal-dark:#115e59; --teal-pale:#e7f5f3; --orange:#ea580c; --red:#b91c1c; --red-pale:#fef2f2; --blue:#2563eb; --shadow:0 12px 24px rgba(15, 23, 42, .08); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--ground); color:var(--ink); font:14px/1.45 Inter, "Microsoft YaHei", sans-serif; letter-spacing:0; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } .shell { width:min(1180px, calc(100% - 40px)); margin:0 auto; }.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }.header-inner { height:64px; display:flex; align-items:center; gap:38px; }.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:750; white-space:nowrap; }.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:7px; background:var(--teal); color:#fff; }.brand-mark svg { width:18px; }.main-nav { display:flex; align-self:stretch; gap:6px; }.main-nav a { display:flex; align-items:center; gap:7px; padding:0 13px; color:var(--muted); border-bottom:2px solid transparent; }.main-nav a svg { width:17px; }.main-nav a.is-active { color:var(--teal-dark); border-bottom-color:var(--teal); font-weight:700; }.header-actions { margin-left:auto; display:flex; align-items:center; gap:13px; }.icon-button { position:relative; width:34px; height:34px; border:1px solid var(--line); border-radius:6px; color:#475569; background:#fff; display:inline-grid; place-items:center; }.icon-button:hover { border-color:#94a3b8; background:#f8fafc; }.icon-button svg { width:17px; }.cart-count,.button-count { min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:grid; place-items:center; background:var(--orange); color:#fff; font-size:10px; font-weight:800; }.cart-count { position:absolute; top:-7px; right:-8px; }.account-menu { position:relative; }.account-menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; }.account-menu summary::-webkit-details-marker { display:none; }.account-menu summary svg { width:14px; color:var(--muted); }.account-avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#d9f0ec; color:var(--teal-dark); font-weight:800; }.account-label { display:grid; line-height:1.2; }.account-label strong { font-size:13px; }.account-label small { margin-top:3px; color:var(--muted); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-popover { position:absolute; top:42px; right:0; width:148px; padding:5px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:6px; }.account-popover a,.account-popover button { width:100%; display:flex; gap:8px; align-items:center; padding:8px; border:0; border-radius:4px; background:transparent; color:#334155; text-align:left; }.account-popover a:hover,.account-popover button:hover { background:#f1f5f9; }.account-popover svg { width:15px; }.page-main { padding:30px 0 56px; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }.page-heading h1 { margin:2px 0 0; font-size:27px; line-height:1.2; letter-spacing:0; }.page-heading p { margin:6px 0 0; color:var(--muted); }.eyebrow { color:var(--teal); font-size:12px; font-weight:800; }.compact-heading { margin-bottom:20px; }.button { min-height:38px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:6px; font-weight:700; white-space:nowrap; }.button svg { width:16px; }.button-primary { background:var(--teal); color:#fff; }.button-primary:hover { background:var(--teal-dark); }.button-secondary { background:#fff; border-color:var(--line); color:#334155; }.button-secondary:hover { border-color:#94a3b8; background:#f8fafc; }.button-tertiary { background:#eef5f5; color:var(--teal-dark); }.button-danger { background:var(--red); color:#fff; }.button-full { width:100%; }.button.is-disabled { opacity:.55; pointer-events:none; }.message-stack { display:grid; gap:10px; margin-bottom:18px; }.message { display:flex; gap:9px; align-items:center; padding:10px 12px; border:1px solid #cbd5e1; background:#fff; border-radius:6px; }.message svg { width:17px; }.message-success { color:#166534; border-color:#bbf7d0; background:#f0fdf4; }.message-error { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }.message-warning { color:#92400e; border-color:#fde68a; background:#fffbeb; }.catalog-head { margin-bottom:22px; }.catalog-filters { display:flex; gap:9px; }.search-field { flex:1; position:relative; }.search-field svg { position:absolute; top:10px; left:11px; width:17px; color:#94a3b8; }.search-field input,.catalog-filters select,.field input,.field select,.field textarea { width:100%; min-height:39px; padding:8px 10px; border:1px solid #cbd5e1; outline:none; border-radius:5px; background:#fff; color:var(--ink); }.search-field input { padding-left:37px; }.catalog-filters select { width:150px; }.search-field input:focus,.catalog-filters select:focus,.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.1); }.product-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:15px; }.product-card { overflow:hidden; min-width:0; border:1px solid var(--line); border-radius:7px; background:#fff; }.product-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); transition:.16s ease; }.product-image { height:160px; display:grid; place-items:center; overflow:hidden; background:#eef2f3; }.product-image img { width:100%; height:100%; object-fit:cover; }.product-illustration { position:relative; width:120px; height:92px; }.illustration-body { position:absolute; left:18px; bottom:13px; width:79px; height:53px; border-radius:9px; background:linear-gradient(135deg,#4b5563,#111827); box-shadow:inset -12px -8px 0 #263342; }.illustration-cap { position:absolute; left:31px; top:8px; width:67px; height:25px; border-radius:6px 7px 4px 4px; background:#1f2937; }.illustration-chip { position:absolute; right:1px; bottom:22px; width:26px; height:29px; border:5px solid #64748b; background:#cbd5e1; }.product-content { padding:13px; }.product-meta { display:flex; justify-content:space-between; gap:8px; color:#64748b; font-size:11px; }.product-meta span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.product-content h2 { min-height:40px; overflow:hidden; margin:7px 0 3px; font-size:14px; line-height:1.4; }.product-fit { height:19px; overflow:hidden; margin:0; color:var(--muted); font-size:12px; white-space:nowrap; text-overflow:ellipsis; }.product-bottom { display:flex; justify-content:space-between; align-items:end; margin-top:13px; }.price { color:var(--orange); font-size:18px; line-height:1; }.unit { margin-left:2px; color:var(--muted); font-size:11px; }.icon-button-accent { background:var(--teal); border-color:var(--teal); color:#fff; }.icon-button-accent:hover { background:var(--teal-dark); }.pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:24px; color:var(--muted); }.empty-state { min-height:280px; display:grid; place-content:center; justify-items:center; gap:13px; border:1px dashed #b9c5cd; background:#fff; color:var(--muted); }.empty-state svg { width:35px; height:35px; color:#94a3b8; }.empty-state h2 { margin:0; color:#475569; font-size:17px; }.cart-layout,.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) 282px; align-items:start; gap:20px; }.table-surface,.form-surface,.surface-form { border:1px solid var(--line); border-radius:7px; background:#fff; }.cart-table { display:grid; }.cart-row { display:grid; grid-template-columns:minmax(230px,1fr) 95px 94px 100px 35px; gap:15px; align-items:center; padding:13px 16px; border-bottom:1px solid #e8edf0; }.cart-header { padding-top:10px; padding-bottom:10px; color:var(--muted); font-size:12px; }.cart-product { display:flex; align-items:center; gap:11px; min-width:0; }.cart-thumb { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:#edf2f3; color:#64748b; }.cart-thumb img { width:100%; height:100%; object-fit:cover; }.cart-product strong,.cart-product small,.cart-product em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.cart-product small { margin-top:3px; color:var(--muted); }.cart-product em { margin-top:3px; color:var(--red); font-size:11px; font-style:normal; }.is-unavailable { background:#fffafa; }.quantity-control input { width:67px; min-height:33px; padding:4px 7px; border:1px solid #cbd5e1; border-radius:4px; }.icon-button-danger { border-color:#fecaca; color:var(--red); }.table-footer { padding:12px 16px; }.order-summary { position:sticky; top:84px; padding:18px; border:1px solid #badbd7; border-radius:7px; background:#f0f9f8; }.order-summary>span { color:var(--muted); }.order-summary>strong { display:block; margin:5px 0 14px; color:var(--orange); font-size:28px; line-height:1.1; }.order-summary p { margin:0 0 16px; color:#475569; font-size:12px; }.form-surface,.surface-form { padding:20px; }.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.section-heading h2,.detail-sidebar h2 { margin:0; font-size:15px; }.section-heading>span { color:var(--muted); font-size:12px; }.text-action { display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:700; }.text-action svg { width:16px; }.checkout-items { margin-top:18px; padding:18px; }.checkout-item { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-top:1px solid #e7ecef; }.checkout-item small { color:var(--muted); }.narrow-page { width:min(620px,100%); margin:0 auto; }.field { margin-bottom:16px; }.field label { display:block; margin-bottom:6px; font-weight:700; color:#334155; }.field label em { margin-left:3px; color:var(--red); font-style:normal; }.field textarea { resize:vertical; }.field.has-error input,.field.has-error select,.field.has-error textarea { border-color:#ef4444; }.field-error { margin:5px 0 0; color:var(--red); font-size:12px; }.field-help { display:block; margin-top:4px; color:var(--muted); }.form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:4px; }.form-alert { margin-bottom:15px; padding:10px; color:#b91c1c; border:1px solid #fecaca; border-radius:5px; background:#fef2f2; }.address-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.address-card { min-height:160px; padding:16px; border:1px solid var(--line); border-radius:7px; background:#fff; }.address-card.is-default { border-color:#68bcb3; box-shadow:inset 0 0 0 1px #d4f3ef; }.address-top { display:flex; justify-content:space-between; gap:8px; }.address-top h2 { margin:0; font-size:15px; }.address-top h2 span { margin-left:6px; color:var(--muted); font-size:13px; font-weight:400; }.address-top small { color:var(--muted); }.default-label { padding:2px 6px; border-radius:4px; background:var(--teal-pale); color:var(--teal-dark); font-size:11px; font-weight:700; }.address-card>p { min-height:42px; margin:15px 0; color:#475569; }.card-actions { display:flex; align-items:center; gap:13px; }.card-actions a,.card-actions button { padding:0; border:0; background:none; color:var(--teal); font-weight:700; }.card-actions button { color:var(--red); }.status-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }.status-filters a,.status-filters button { min-height:31px; padding:0 10px; border:1px solid var(--line); border-radius:5px; background:#fff; color:#475569; }.status-filters .is-active { border-color:var(--teal); background:var(--teal); color:#fff; }.order-table { min-width:720px; }.order-table-wrap { overflow:auto; }.order-row { display:grid; grid-template-columns:1.45fr .75fr .75fr .7fr .95fr 22px; gap:13px; align-items:center; padding:13px 16px; border-bottom:1px solid #e8edf0; }.order-row:last-child { border-bottom:0; }.order-row:not(.order-head):hover { background:#f8fafc; }.order-row strong,.order-row small { display:block; }.order-row small { margin-top:3px; color:var(--muted); }.order-head { padding-top:10px; padding-bottom:10px; color:var(--muted); font-size:12px; }.order-row svg { width:17px; color:#94a3b8; }.status-badge { display:inline-flex; align-items:center; min-height:25px; padding:3px 8px; border-radius:4px; font-size:12px; font-weight:700; white-space:nowrap; }.status-pending_shipment { color:#1d4ed8; background:#eff6ff; }.status-partially_shipped { color:#9a3412; background:#fff7ed; }.status-shipped { color:#0f766e; background:#f0fdfa; }.status-completed { color:#166534; background:#f0fdf4; }.status-cancelled { color:#991b1b; background:#fef2f2; }.order-detail-head { display:flex; justify-content:space-between; gap:20px; margin-bottom:20px; }.back-link { display:inline-flex; align-items:center; gap:4px; margin-bottom:8px; color:var(--muted); }.back-link svg { width:16px; }.detail-title { display:flex; align-items:center; gap:10px; }.detail-title h1 { margin:0; font-size:23px; }.order-detail-head p { margin:6px 0 0; color:var(--muted); }.detail-actions { display:flex; gap:8px; align-items:end; }.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:20px; align-items:start; }.detail-primary { display:grid; gap:18px; }.detail-items { border-top:1px solid #e7ecef; }.detail-item { display:grid; grid-template-columns:minmax(0,1fr) 90px 100px 105px; gap:12px; padding:12px 0; border-bottom:1px solid #e7ecef; }.detail-item small { display:block; margin-top:3px; color:var(--muted); }.detail-total { display:flex; justify-content:flex-end; align-items:baseline; gap:15px; padding-top:15px; }.detail-total strong { color:var(--orange); font-size:21px; }.logistics-section { padding:18px; }.shipment-list { display:grid; gap:10px; }.shipment { display:flex; gap:10px; padding-top:10px; border-top:1px solid #e7ecef; }.shipment-icon { flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:5px; background:#e7f5f3; color:var(--teal); }.shipment-icon svg { width:17px; }.shipment strong,.shipment span,.shipment small { display:block; }.shipment span { margin-top:2px; font-family:ui-monospace,Consolas,monospace; }.shipment small { margin-top:3px; color:var(--muted); }.subtle-empty { padding:18px 0 3px; color:var(--muted); }.receive-action { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px; border:1px solid #b8e2db; border-radius:7px; background:#f0fdfa; }.receive-action strong,.receive-action span { display:block; }.receive-action span { margin-top:3px; color:#475569; font-size:12px; }.detail-sidebar { display:grid; gap:12px; }.detail-sidebar section { padding:16px; border:1px solid var(--line); border-radius:7px; background:#fff; }.detail-sidebar h2 { margin-bottom:10px; color:var(--muted); font-size:12px; }.detail-sidebar strong,.detail-sidebar span { display:block; }.detail-sidebar>section>span { margin-top:3px; }.detail-sidebar p { margin:0; color:#475569; white-space:pre-wrap; }.detail-sidebar small { display:block; margin-top:5px; color:var(--muted); }.settlement { display:inline-flex!important; width:auto; padding:3px 7px; border-radius:4px; color:#92400e; background:#fffbeb; font-size:12px; font-weight:700; }.settlement.is-settled { color:#166534; background:#f0fdf4; }.cancelled-info { border-color:#fecaca!important; background:#fffafa!important; }.login-page { background:#eef5f4; }.login-main { min-height:100vh; display:grid; align-items:center; }.login-layout { min-height:660px; display:grid; grid-template-columns:1.06fr .94fr; overflow:hidden; border:1px solid #c6dedb; border-radius:8px; background:#fff; box-shadow:0 24px 55px rgba(15,70,65,.13); }.login-brand-panel { position:relative; overflow:hidden; padding:34px; background:#0f766e; color:#fff; }.login-brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; }.login-brand .brand-mark { background:#fff; color:var(--teal); }.login-visual { position:absolute; inset:115px 25px 65px; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:8px; background:linear-gradient(135deg,#176f69,#0b5954); }.toner { position:absolute; width:145px; height:285px; border-radius:19px 19px 12px 12px; background:linear-gradient(90deg,#18242c,#50606a 48%,#19262e); box-shadow:13px 13px 0 rgba(0,0,0,.11); }.toner::before { content:""; position:absolute; left:18px; top:-16px; width:109px; height:30px; border-radius:9px 9px 4px 4px; background:#2b3a43; }.toner-one { left:20%; top:23%; transform:rotate(-13deg); }.toner-two { right:16%; bottom:9%; transform:rotate(16deg) scale(.78); }.gear { position:absolute; width:112px; height:112px; border:23px dotted #a9dcd4; border-radius:50%; opacity:.8; }.gear-one { right:20%; top:15%; }.gear-two { left:15%; bottom:8%; transform:scale(.65); }.login-note { position:absolute; bottom:26px; left:34px; margin:0; color:#c9eeea; }.login-form-wrap { display:grid; place-items:center; padding:35px; }.login-form { width:min(360px,100%); }.login-form h1 { margin:5px 0; font-size:27px; }.login-intro { margin:0 0 26px; color:var(--muted); }.login-form .button { margin-top:7px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:820px) { .shell{width:min(100% - 28px,680px)} .site-header{position:static}.header-inner{height:58px;gap:9px}.brand{font-size:15px}.main-nav{margin-left:auto;gap:0}.main-nav a{padding:0 7px}.main-nav a span{display:none}.header-actions{margin-left:0;gap:8px}.account-label,.account-menu summary>svg{display:none}.page-main{padding:22px 0 40px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-image{height:130px}.catalog-filters{display:grid;grid-template-columns:1fr 39px}.catalog-filters select{width:auto;grid-column:1}.cart-layout,.checkout-layout,.detail-layout{grid-template-columns:1fr}.order-summary{position:static}.cart-table{overflow:auto}.cart-row{min-width:620px}.address-grid{grid-template-columns:1fr}.order-detail-head{display:grid}.detail-actions{align-items:start}.detail-item{grid-template-columns:minmax(0,1fr) 70px 90px}.detail-item>span:nth-of-type(2){display:none}.login-layout{min-height:0;grid-template-columns:1fr}.login-brand-panel{min-height:150px;padding:24px}.login-visual{display:none}.login-note{left:24px;bottom:24px}.login-form-wrap{min-height:470px;padding:26px}.receive-action{align-items:start;flex-direction:column}.page-heading h1{font-size:23px} }
@media (max-width:460px) { .shell{width:calc(100% - 24px)} .main-nav a{padding:0 5px}.brand-mark{width:29px;height:29px}.header-actions{gap:5px}.page-heading{align-items:start;flex-direction:column}.page-heading .button{width:100%}.product-grid{grid-template-columns:1fr}.product-image{height:165px}.product-content h2{min-height:0}.cart-layout{gap:13px}.checkout-item{display:grid}.detail-item{grid-template-columns:minmax(0,1fr) 72px 92px}.detail-item>strong{grid-column:2/4}.detail-title{align-items:start;flex-direction:column}.detail-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.detail-actions .button{padding:0 8px}.status-filters{gap:5px}.status-filters a,.status-filters button{padding:0 8px}.account-popover{right:-5px}.login-main{align-items:start}.login-layout{border:0;border-radius:0;box-shadow:none}.login-brand-panel{margin:0 -12px}.login-form-wrap{padding:32px 4px} }

/* Finance center and customer finance requests */
.finance-heading { align-items: center !important; }
.finance-head-actions { display: flex; align-items: center; gap: 10px; }
.finance-head-actions form { margin: 0; }
.finance-overview { min-height: 90px; margin-bottom: 24px; padding: 16px 20px; display: flex; align-items: center; gap: 28px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(27, 52, 96, .05); }
.finance-overview > div { min-width: 170px; display: flex; align-items: center; gap: 12px; }
.finance-overview-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: #edf2ff; color: var(--blue); }
.finance-overview-icon svg { width: 20px; height: 20px; }
.finance-overview small,.finance-overview strong { display: block; }
.finance-overview small { color: #7b879a; font-size: 11px; }
.finance-overview strong { margin-top: 2px; color: #23324a; font-size: 22px; }
.finance-overview > p { margin: 0 0 0 auto; display: flex; align-items: center; gap: 7px; color: #748196; font-size: 12px; }
.finance-overview > p svg { width: 16px; color: #6686cd; }
.finance-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.finance-section { overflow: hidden; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(27, 52, 96, .05); }
.finance-section-head { min-height: 72px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e8edf4; }
.finance-section-head h2 { margin: 0; color: #24334a; font-size: 16px; }
.finance-section-head p { margin: 3px 0 0; color: #8994a6; font-size: 11px; }
.finance-section-head > a { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: 12px; font-weight: 750; }
.finance-section-head > a svg { width: 15px; }
.finance-records { display: grid; }
.finance-record { min-height: 78px; padding: 13px 16px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto 17px; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f5; }
.finance-record:last-child { border-bottom: 0; }
.finance-record:hover { background: #f8faff; }
.finance-record-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: #edf2ff; color: var(--blue); }
.finance-record-icon svg { width: 18px; }
.finance-record-main,.finance-record-amount { min-width: 0; }
.finance-record-main strong,.finance-record-main small,.finance-record-amount strong,.finance-record-amount small { display: block; }
.finance-record-main strong { color: #293850; font-size: 12px; }
.finance-record-main small,.finance-record-amount small { margin-top: 4px; color: #8a96a8; font-size: 10px; }
.finance-record-amount { text-align: right; }
.finance-record-amount strong { color: #2e4162; font-size: 13px; }
.finance-record-arrow { width: 16px; color: #a0abba; }
.finance-status { min-height: 26px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: #f1f4f8; color: #66748a; font-size: 11px; font-weight: 750; white-space: nowrap; }
.finance-status.status-pending { background: #fff5e8; color: #a45b0b; }
.finance-status.status-issued,.finance-status.status-settled { background: #edf2ff; color: #2855bb; }
.finance-status.status-withdrawn { background: #f1f3f6; color: #7f8998; }
.finance-empty { min-height: 230px; padding: 30px; display: grid; place-content: center; justify-items: center; gap: 7px; color: #8a96a8; text-align: center; }
.finance-empty > svg { width: 32px; height: 32px; margin-bottom: 6px; color: #8299ca; }
.finance-empty strong { color: #52617a; }
.finance-empty span { font-size: 11px; }
.finance-empty.compact { min-height: 160px; }
.finance-request-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }
.finance-request-main { min-width: 0; display: grid; gap: 18px; }
.finance-form-section { padding: 0 22px 22px; overflow: hidden; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; box-shadow: 0 7px 20px rgba(27, 52, 96, .04); }
.finance-form-head { min-height: 72px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f5; }
.finance-form-head > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #edf2ff; color: var(--blue); font-size: 12px; font-weight: 800; }
.finance-form-head > div { min-width: 0; }
.finance-form-head h2 { margin: 0; color: #26364d; font-size: 15px; }
.finance-form-head p { margin: 3px 0 0; color: #8a96a7; font-size: 11px; }
.finance-form-head .text-action { margin-left: auto; padding: 7px 9px; border: 0; border-radius: 5px; background: #f1f5ff; color: var(--blue); font-size: 11px; }
.finance-order-list { margin-top: 15px; display: grid; gap: 8px; }
.finance-order-option { min-height: 78px; padding: 11px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) 23px; align-items: center; gap: 14px; border: 1px solid #e0e6ef; border-radius: 8px; background: #fff; cursor: pointer; }
.finance-order-option:hover { border-color: #b8c8ec; background: #fafbff; }
.finance-order-option:has(input:checked) { border-color: #91aae5; background: #f5f8ff; box-shadow: inset 0 0 0 1px #d7e2fb; }
.finance-order-option input { position: absolute; opacity: 0; pointer-events: none; }
.finance-order-thumbs { min-width: 0; display: flex; align-items: center; gap: 4px; }
.finance-order-thumb { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #e0e6ef; border-radius: 7px; background: #f5f7fb; color: #8da0c2; }
.finance-order-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
.finance-order-thumb svg { width: 19px; height: 19px; }
.finance-order-more { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: #edf2ff; color: #3158ba; font-size: 10px; font-weight: 800; }
.finance-check { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #c8d2df; border-radius: 5px; background: #fff; color: transparent; }
.finance-check svg { width: 14px; }
.finance-order-option input:checked ~ .finance-check { border-color: var(--blue); background: var(--blue); color: #fff; }
.finance-order-id strong,.finance-order-id small { display: block; }
.finance-order-id { min-width: 0; }
.finance-order-id strong { overflow: hidden; color: #2a3951; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.finance-order-id small { margin-top: 4px; overflow: hidden; color: #667894; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.finance-order-id em { display: block; margin-top: 4px; color: #8a96a8; font-size: 10px; font-style: normal; }
.finance-order-status { min-height: 25px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: #f2f5f9; color: #69778d; font-size: 10px; white-space: nowrap; }
.finance-order-price { color: #2c4163; text-align: right; white-space: nowrap; }
.invoice-type-control { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.invoice-type-control input { position: absolute; opacity: 0; }
.invoice-type-control label > span { min-height: 58px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; color: #56657b; cursor: pointer; }
.invoice-type-control label > span svg { width: 19px; color: #7b8da8; }
.invoice-type-control input:checked + span { border-color: #8fa8e4; background: #f3f7ff; color: #2855bb; box-shadow: inset 0 0 0 1px #dae4fb; }
.invoice-type-control input:checked + span svg { color: #2f5bd3; }
.finance-switch-row { margin-top: 16px; padding: 13px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #e0e6ee; border-radius: 7px; background: #f9fafc; cursor: pointer; }
.finance-switch-row > input { position: absolute; opacity: 0; }
.finance-switch { width: 38px; height: 22px; flex: 0 0 auto; position: relative; border-radius: 12px; background: #c7d0dc; transition: .15s; }
.finance-switch::after { content: ""; width: 16px; height: 16px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(20,35,60,.25); transition: .15s; }
.finance-switch-row > input:checked + .finance-switch { background: var(--blue); }
.finance-switch-row > input:checked + .finance-switch::after { transform: translateX(16px); }
.finance-switch-row strong,.finance-switch-row small { display: block; }
.finance-switch-row strong { color: #35445b; font-size: 12px; }
.finance-switch-row small { margin-top: 3px; color: #8994a5; font-size: 10px; }
.invoice-info-fields { margin-top: 16px; display: grid; gap: 14px; }
.invoice-info-fields[hidden] { display: none; }
.finance-text-field > span { margin-bottom: 7px; display: flex; justify-content: space-between; color: #46556d; font-size: 11px; font-weight: 750; }
.finance-text-field > span small { color: #939dad; font-weight: 400; }
.finance-text-field textarea { width: 100%; min-height: 122px; padding: 12px; resize: vertical; border: 1px solid #d5dfeb; border-radius: 7px; outline: 0; color: #2a3951; line-height: 1.6; }
.finance-text-field textarea:focus { border-color: #7897db; box-shadow: 0 0 0 3px rgba(47,91,211,.1); }
.finance-upload { min-height: 145px; padding: 18px; position: relative; display: grid; place-content: center; justify-items: center; border: 1px dashed #aebddd; border-radius: 8px; background: #f8faff; text-align: center; cursor: pointer; }
.finance-upload:hover { border-color: #6f8ed4; background: #f2f6ff; }
.finance-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.finance-upload-icon { width: 39px; height: 39px; margin-bottom: 9px; display: grid; place-items: center; border-radius: 7px; background: #e8efff; color: var(--blue); }
.finance-upload-icon svg { width: 19px; }
.finance-upload strong { color: #34455f; font-size: 12px; }
.finance-upload small { margin-top: 4px; color: #8b96a7; font-size: 10px; }
.finance-upload em { min-height: 27px; margin-top: 10px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid #dce4f2; border-radius: 5px; background: #fff; color: #4d6593; font-size: 10px; font-style: normal; }
.finance-upload-large { min-height: 180px; margin-top: 16px; }
.finance-field-error { margin: 9px 0 0; color: #b72f3e; font-size: 11px; }
.finance-submit-panel { position: sticky; top: 96px; padding: 22px; border: 1px solid #cad7f4; border-radius: 8px; background: #f4f7ff; box-shadow: 0 10px 28px rgba(33,64,122,.08); }
.finance-submit-panel > span,.finance-submit-panel > strong { display: block; }
.finance-submit-panel > span { color: #748298; font-size: 11px; }
.finance-submit-panel > strong { margin-top: 3px; color: #2d3d56; font-size: 18px; }
.finance-submit-panel > div { margin: 18px 0; padding: 16px 0; border-top: 1px solid #dce5f7; border-bottom: 1px solid #dce5f7; }
.finance-submit-panel > div small,.finance-submit-panel > div b { display: block; }
.finance-submit-panel > div small { color: #748298; font-size: 11px; }
.finance-submit-panel > div b { margin-top: 6px; color: #244eb3; font-size: 27px; }
.finance-submit-panel > p { margin: 0 0 18px; display: flex; align-items: flex-start; gap: 7px; color: #718098; font-size: 10px; line-height: 1.6; }
.finance-submit-panel > p svg { width: 15px; flex: 0 0 auto; color: #5276c8; }
.finance-submit-panel button:disabled { opacity: .5; cursor: not-allowed; }
.finance-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 22px; align-items: start; }
.finance-detail-main { display: grid; gap: 18px; }
.invoice-ready,.finance-progress-note { min-height: 86px; padding: 16px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid #c7d5f7; border-radius: 8px; background: #f1f5ff; }
.invoice-ready > span { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: #dfe9ff; color: #2855bb; }
.invoice-ready > span svg { width: 22px; }
.invoice-ready h2 { margin: 0; color: #274477; font-size: 15px; }
.invoice-ready p { margin: 4px 0 0; color: #687b9e; font-size: 11px; }
.invoice-ready .button { margin-left: auto; }
.finance-progress-note > svg { width: 24px; color: #b06a16; }
.finance-progress-note strong,.finance-progress-note span { display: block; }
.finance-progress-note strong { color: #6d4b22; }
.finance-progress-note span { margin-top: 4px; color: #8d795f; font-size: 11px; }
.finance-progress-note { border-color: #f0d8b4; background: #fffaf1; }
.finance-progress-note.is-muted { border-color: #dfe4eb; background: #f7f8fa; }
.finance-progress-note.is-muted > svg,.finance-progress-note.is-muted strong,.finance-progress-note.is-muted span { color: #7f8998; }
.finance-detail-section { padding: 20px 22px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; }
.finance-detail-orders { border-top: 1px solid #edf0f5; }
.finance-detail-orders a { min-height: 78px; padding: 9px 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto 18px; align-items: center; gap: 13px; border-bottom: 1px solid #edf0f5; }
.finance-detail-orders a:hover { color: var(--blue); }
.finance-detail-orders strong,.finance-detail-orders small { display: block; }
.finance-detail-orders small { margin-top: 3px; color: #8b96a7; font-size: 10px; }
.finance-detail-orders b { color: #33445f; }
.finance-detail-orders svg { width: 16px; color: #9aa5b5; }
.finance-detail-total { padding-top: 17px; display: flex; align-items: baseline; justify-content: flex-end; gap: 18px; }
.finance-detail-total span { color: #748196; }
.finance-detail-total strong { color: #244eb3; font-size: 22px; }
.finance-data-list { margin: 0; display: grid; }
.finance-data-list > div { padding: 12px 0; display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 20px; border-top: 1px solid #edf0f5; }
.finance-data-list dt { color: #7c889a; }
.finance-data-list dd { margin: 0; color: #33435b; }
.pre-line { white-space: pre-line; }
.file-chip { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; background: #f1f5ff; color: #315bb8; font-size: 11px; }
.file-chip svg { width: 14px; }
.finance-detail-side { display: grid; gap: 12px; }
.finance-detail-side section { padding: 18px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; }
.finance-detail-side h2 { margin: 0 0 10px; color: #7d899b; font-size: 11px; }
.finance-detail-side strong,.finance-detail-side small { display: block; }
.finance-detail-side small { margin-top: 6px; color: #8b96a7; font-size: 10px; }
.payment-proof-preview { display: grid; place-items: center; border: 1px solid #e1e6ee; border-radius: 7px; background: #f8fafc; }
.payment-proof-preview a { max-width: 100%; position: relative; display: block; }
.payment-proof-preview img { max-width: 100%; max-height: 620px; display: block; object-fit: contain; }
.payment-proof-preview a > span { min-height: 31px; padding: 0 10px; position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; background: rgba(255,255,255,.94); color: #48638f; font-size: 10px; }
.payment-proof-preview a > span svg { width: 14px; }
.order-finance-actions { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #d6e0f2; border-radius: 8px; background: #f8faff; }
.order-finance-actions > div { display: flex; align-items: center; gap: 10px; }
.order-finance-actions > div:first-child > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: #e8efff; color: var(--blue); }
.order-finance-actions > div:first-child > span svg { width: 18px; }
.order-finance-actions strong,.order-finance-actions small { display: block; }
.order-finance-actions small { margin-top: 3px; color: #8090a7; font-size: 10px; }

@media (max-width: 1100px) {
  .finance-columns { grid-template-columns: 1fr; }
  .finance-request-layout,.finance-detail-layout { grid-template-columns: minmax(0,1fr) 270px; }
  .finance-record { grid-template-columns: 38px minmax(0,1fr) auto auto 17px; }
}
@media (max-width: 820px) {
  .finance-overview { align-items: flex-start; flex-wrap: wrap; }
  .finance-overview > p { width: 100%; margin-left: 0; }
  .finance-request-layout,.finance-detail-layout { grid-template-columns: 1fr; }
  .finance-submit-panel { position: static; }
  .order-finance-actions { align-items: flex-start; flex-direction: column; }
  .finance-head-actions { width: 100%; }
  .finance-head-actions .button { flex: 1; }
}
@media (max-width: 560px) {
  .finance-record { grid-template-columns: 36px minmax(0,1fr) auto; }
  .finance-record-amount { grid-column: 2; text-align: left; }
  .finance-record .finance-status { grid-column: 3; grid-row: 1 / 3; }
  .finance-record-arrow { display: none; }
  .finance-form-section { padding: 0 14px 16px; }
  .finance-form-head { min-height: 78px; }
  .finance-form-head p { display: none; }
  .finance-order-option { grid-template-columns: auto minmax(0,1fr) auto 23px; gap: 10px; padding: 10px; }
  .finance-order-thumb { width: 40px; height: 40px; }
  .finance-order-thumb:nth-child(n + 2) { display: none; }
  .finance-order-status { display: none; }
  .finance-order-price { grid-column: auto; font-size: 12px; }
  .invoice-type-control { grid-template-columns: 1fr; }
  .finance-data-list > div { grid-template-columns: 1fr; gap: 5px; }
  .finance-detail-orders a { grid-template-columns: auto minmax(0,1fr) auto 18px; gap: 9px; }
  .finance-detail-orders .finance-order-thumb { width: 40px; height: 40px; }
  .finance-detail-orders .finance-order-thumb:nth-child(n + 2) { display: none; }
  .finance-detail-orders small { white-space: normal; line-height: 1.45; }
  .invoice-ready { align-items: flex-start; flex-wrap: wrap; }
  .invoice-ready .button { width: 100%; margin-left: 0; }
  .order-finance-actions > div:last-child { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .order-finance-actions .button { padding: 0 8px; }
}

/* Stable finance order rows: image, information, amount, then selection. */
.finance-order-option {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
}
.finance-order-thumbs { flex: 0 0 auto; }
.finance-order-id { width: 0; flex: 1 1 auto; }
.finance-order-price { min-width: 96px; flex: 0 0 auto; margin-left: auto; }
.finance-check { flex: 0 0 21px; }

@media (max-width: 560px) {
  .finance-order-option { gap: 10px; }
  .finance-order-price { min-width: 0; margin-left: auto; }
  .finance-order-id small { white-space: normal; line-height: 1.4; }
}

/* Customer login */
.login-page {
  min-height: 100vh;
  background: #edf3fa;
  color: #172238;
}
.login-page .login-main {
  min-height: 100vh;
  padding: clamp(22px, 4vh, 48px) 0;
  display: grid;
  place-items: center;
}
.login-page .login-main > .shell {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
}
.login-page .message-stack { display: none; }
.login-page .login-layout {
  width: 100%;
  min-height: min(780px, calc(100vh - 64px));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
  overflow: hidden;
  border: 1px solid rgba(35, 72, 124, .12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(28, 55, 95, .16);
}
.login-page .login-brand-panel {
  min-width: 0;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #153b73;
}
.login-building,
.login-photo-shade {
  position: absolute;
}
.login-building {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 0;
  object-fit: cover;
  object-position: 15% center;
}
.login-photo-shade {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 31, 68, .68) 0%, rgba(8, 40, 83, .32) 54%, rgba(9, 38, 77, .1) 100%),
    linear-gradient(0deg, rgba(5, 25, 56, .66) 0%, transparent 48%, rgba(10, 39, 78, .18) 100%);
}
.login-page .login-brand,
.login-brand-copy,
.login-photo-caption { position: relative; z-index: 2; }
.login-page .login-brand { display: flex; align-items: center; }
.login-logo-surface {
  width: 140px;
  height: auto;
  display: block;
}
.login-logo-surface img { display: block; width: 100%; height: auto; }
.login-brand-copy {
  width: min(590px, 92%);
  margin: 60px 0 0;
  padding: 0;
  text-shadow: 0 2px 16px rgba(5, 25, 55, .28);
}
.login-brand-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
}
.login-photo-caption {
  margin: auto 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .84);
  font-size: 12px;
  font-weight: 650;
}
.login-photo-caption svg { width: 16px; height: 16px; }
.login-page .login-form-wrap {
  min-width: 0;
  padding: 54px clamp(46px, 5vw, 78px);
  display: grid;
  place-items: center;
  background: #fff;
}
.login-page .login-form { width: min(420px, 100%); }
.login-form-heading { margin-bottom: 34px; text-align: center; }
.login-form-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf4ff;
  color: #2564c7;
}
.login-form-mark svg { width: 21px; height: 21px; }
.login-form-heading p {
  margin: 0 0 6px;
  color: #2b68c8;
  font-size: 12px;
  font-weight: 750;
}
.login-form-heading h1 {
  margin: 0;
  color: #172238;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.25;
}
.login-form-heading > span:last-child {
  display: block;
  margin-top: 10px;
  color: #7a879b;
  font-size: 13px;
}
.login-alert {
  min-height: 48px;
  margin: 0 0 18px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #efc3c8;
  border-radius: 6px;
  background: #fff5f6;
  color: #ae2838;
  font-size: 12px;
  line-height: 1.5;
}
.login-alert svg { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; }
.login-alert p { margin: 0; }
.login-field { margin-bottom: 18px; }
.login-field label {
  display: block;
  margin: 0 0 7px;
  color: #334158;
  font-size: 12px;
  font-weight: 750;
}
.login-input-wrap { position: relative; }
.login-input-wrap > svg {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 1;
  color: #7e8ba0;
  pointer-events: none;
  transform: translateY(-50%);
}
.login-input-wrap input {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 46px;
  box-sizing: border-box;
  border: 1px solid #d6dfeb;
  border-radius: 6px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  color: #1b2940;
  font-size: 14px;
  line-height: 50px;
  box-shadow: 0 2px 6px rgba(36, 63, 101, .03);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-input-wrap input::placeholder { color: #a1abb9; opacity: 1; }
.login-input-wrap input:hover { border-color: #b8c6d8; }
.login-input-wrap input:focus {
  border-color: #4b7fd0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 105, 197, .12);
}
.login-field.has-error .login-input-wrap input { border-color: #d95c68; background: #fffafa; }
.login-field.has-error .login-input-wrap > svg { color: #bf3e4a; }
.login-field-error { margin: 5px 0 0; color: #b52c3a; font-size: 11px; }
.login-password-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: transparent;
  color: #7e8ba0;
  appearance: none;
  -webkit-appearance: none;
}
.login-password-toggle:hover { background: #f0f4fa; color: #2f68c5; }
.login-password-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(47, 105, 197, .14); }
.login-password-toggle svg { width: 18px; height: 18px; }
.login-submit {
  width: 100%;
  height: 50px;
  margin: 10px 0 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: #2768cf;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 9px 20px rgba(39, 104, 207, .22);
  appearance: none;
  -webkit-appearance: none;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.login-submit:hover { background: #1e58b5; box-shadow: 0 11px 24px rgba(39, 104, 207, .28); transform: translateY(-1px); }
.login-submit:active { transform: translateY(0); }
.login-submit:focus-visible { box-shadow: 0 0 0 4px rgba(39, 104, 207, .18); }
.login-submit svg { width: 17px; height: 17px; }
.login-access-note {
  margin: 23px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8b96a7;
  font-size: 11px;
}
.login-access-note svg { width: 14px; height: 14px; color: #5079b9; }

@media (max-width: 980px) {
  .login-page .login-main { padding: 24px 0; align-items: center; }
  .login-page .login-main > .shell { width: min(760px, calc(100% - 32px)); }
  .login-page .login-layout { min-height: 0; grid-template-columns: 1fr; }
  .login-page .login-brand-panel { min-height: 290px; padding: 28px 32px; }
  .login-building {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 47% 58%;
  }
  .login-photo-shade {
    background:
      linear-gradient(90deg, rgba(7, 31, 68, .7), rgba(8, 40, 83, .16)),
      linear-gradient(0deg, rgba(5, 25, 56, .68), transparent 72%);
  }
  .login-logo-surface { width: 120px; }
  .login-brand-copy { width: 72%; margin: auto 0 0; padding: 30px 0 22px; }
  .login-brand-copy h2 { font-size: 34px; }
  .login-photo-caption { display: none; }
  .login-page .login-form-wrap { padding: 44px 56px 48px; }
}

@media (max-width: 560px) {
  .login-page { background: #fff; }
  .login-page .login-main { padding: 0; display: block; }
  .login-page .login-main > .shell { width: 100%; }
  .login-page .login-layout { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .login-page .login-brand-panel { min-height: 224px; margin: 0; padding: 22px 20px; }
  .login-building { object-position: 46% 59%; }
  .login-logo-surface { width: 108px; }
  .login-brand-copy { width: 90%; padding: 24px 0 2px; }
  .login-brand-copy h2 { font-size: 27px; line-height: 1.18; }
  .login-page .login-form-wrap { padding: 35px 24px 42px; align-items: start; }
  .login-page .login-form { width: 100%; }
  .login-form-heading { margin-bottom: 28px; }
  .login-form-mark { display: none; }
  .login-form-heading h1 { font-size: 27px; }
  .login-form-heading > span:last-child { margin-top: 8px; font-size: 12px; }
  .login-input-wrap input,
  .login-submit { height: 48px; }
  .login-input-wrap input { line-height: 48px; }
  .login-password-toggle { top: 4px; }
}

/* Customer portal blue design system */
:root {
  --ink: #172238;
  --muted: #6f7d92;
  --line: #dce4f0;
  --paper: #fff;
  --ground: #f4f7fb;
  --teal: #2f5bd3;
  --teal-dark: #2449ae;
  --teal-pale: #edf2ff;
  --blue: #2f5bd3;
  --orange: #2f5bd3;
  --shadow: 0 12px 32px rgba(27, 52, 96, .1);
}

body:not(.login-page) {
  background: var(--ground);
  color: var(--ink);
  font-size: 14px;
}
body:not(.login-page) .shell { width: min(1460px, calc(100% - 64px)); }
body:not(.login-page) button,
body:not(.login-page) input,
body:not(.login-page) select,
body:not(.login-page) textarea { letter-spacing: 0; }
body:not(.login-page) button:focus-visible,
body:not(.login-page) a:focus-visible,
body:not(.login-page) input:focus-visible,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 91, 211, .16);
}

body:not(.login-page) .site-header {
  border-bottom-color: #e2e8f2;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 12px rgba(31, 53, 91, .035);
}
body:not(.login-page) .header-inner { height: 72px; gap: 46px; }
body:not(.login-page) .brand { min-width: 174px; gap: 13px; }
body:not(.login-page) .brand-logo { width: 88px; height: 29px; display: block; object-fit: contain; }
body:not(.login-page) .brand-name { padding-left: 13px; border-left: 1px solid #dce3ee; color: #26334a; font-size: 15px; font-weight: 800; }
body:not(.login-page) .main-nav { gap: 8px; }
body:not(.login-page) .main-nav a {
  min-width: 82px;
  padding: 0 16px;
  justify-content: center;
  border-bottom-width: 3px;
  color: #718096;
  font-size: 13px;
  font-weight: 650;
}
body:not(.login-page) .main-nav a svg { width: 18px; height: 18px; }
body:not(.login-page) .main-nav a:hover { color: var(--blue); background: #f8faff; }
body:not(.login-page) .main-nav a.is-active { color: var(--blue); border-bottom-color: var(--blue); background: #f8faff; }
body:not(.login-page) .header-actions { gap: 18px; }
body:not(.login-page) .cart-shortcut {
  min-width: 92px;
  height: 40px;
  padding: 0 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d7e0ed;
  border-radius: 7px;
  background: #fff;
  color: #35445d;
  font-size: 12px;
  font-weight: 750;
}
body:not(.login-page) .cart-shortcut:hover { border-color: #91a9df; background: #f7f9ff; color: var(--blue); }
body:not(.login-page) .cart-shortcut svg { width: 17px; height: 17px; }
body:not(.login-page) .cart-count {
  min-width: 18px;
  height: 18px;
  top: -7px;
  right: -7px;
  border: 2px solid #fff;
  background: var(--blue);
  font-size: 9px;
}
body:not(.login-page) .account-menu summary { min-width: 154px; min-height: 42px; }
body:not(.login-page) .account-avatar { width: 36px; height: 36px; background: #e8efff; color: var(--blue); }
body:not(.login-page) .account-label { min-width: 0; }
body:not(.login-page) .account-label strong { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #26334a; }
body:not(.login-page) .account-label small { max-width: 126px; color: #8a96a9; }
body:not(.login-page) .account-popover {
  top: 48px;
  width: 176px;
  padding: 7px;
  z-index: 50;
  border-color: #dbe3ef;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(25, 47, 87, .14);
}
body:not(.login-page) .account-popover a,
body:not(.login-page) .account-popover button { min-height: 38px; padding: 0 11px; border-radius: 6px; }
body:not(.login-page) .account-popover a:hover,
body:not(.login-page) .account-popover button:hover { background: #edf2ff; color: var(--blue); }

body:not(.login-page) .page-main { padding: 38px 0 64px; }
body:not(.login-page) .page-heading { margin-bottom: 24px; align-items: center; }
body:not(.login-page) .page-heading h1 { color: var(--ink); font-size: 28px; font-weight: 800; }
body:not(.login-page) .page-heading p { color: var(--muted); }
body:not(.login-page) .eyebrow { margin-bottom: 5px; color: var(--blue); font-size: 11px; }
body:not(.login-page) .button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  appearance: none;
  -webkit-appearance: none;
  font-size: 13px;
  line-height: 1;
}
body:not(.login-page) .button-primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 5px 13px rgba(47, 91, 211, .16); }
body:not(.login-page) .button-primary:hover { border-color: var(--teal-dark); background: var(--teal-dark); }
body:not(.login-page) .button-secondary { border-color: #d5dfec; background: #fff; color: #3d4d65; }
body:not(.login-page) .button-secondary:hover { border-color: #9eb2df; background: #f8faff; color: var(--blue); }
body:not(.login-page) .button-tertiary { border-color: #d8e2f6; background: #edf2ff; color: var(--blue); }
body:not(.login-page) .button-danger { border-color: #c73e4c; background: #c73e4c; }
body:not(.login-page) .icon-button {
  width: 38px;
  height: 38px;
  border-color: #d6dfec;
  border-radius: 7px;
  appearance: none;
  -webkit-appearance: none;
}
body:not(.login-page) .icon-button:hover { border-color: #9eb2df; background: #f4f7ff; color: var(--blue); }
body:not(.login-page) .message { min-height: 44px; border-radius: 7px; }
body:not(.login-page) .message-success { border-color: #c9d7fb; background: #f0f4ff; color: #2449ae; }
body:not(.login-page) .message-warning { border-color: #f0d4a7; background: #fffaf0; }

body:not(.login-page) .table-surface,
body:not(.login-page) .form-surface,
body:not(.login-page) .surface-form {
  border-color: #dce4f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(32, 57, 98, .045);
}
body:not(.login-page) .form-surface,
body:not(.login-page) .surface-form { padding: 26px; }
body:not(.login-page) .section-heading h2,
body:not(.login-page) .detail-sidebar h2 { font-size: 16px; }
body:not(.login-page) .text-action,
body:not(.login-page) .card-actions a { color: var(--blue); }

body:not(.login-page) .field { margin-bottom: 19px; }
body:not(.login-page) .field label { margin-bottom: 8px; color: #34435b; font-size: 12px; }
body:not(.login-page) .field input:not([type="checkbox"]):not([type="radio"]),
body:not(.login-page) .field select,
body:not(.login-page) .field textarea,
body:not(.login-page) .quantity-control input {
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #d3ddeb;
  border-radius: 7px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  color: #26344b;
  line-height: 44px;
  box-shadow: inset 0 1px 2px rgba(34, 58, 97, .025);
}
body:not(.login-page) .field textarea { min-height: 108px; padding-top: 11px; line-height: 1.55; }
body:not(.login-page) .field select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #7f8da3 50%), linear-gradient(135deg, #7f8da3 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
body:not(.login-page) .field input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.login-page) .field select:focus,
body:not(.login-page) .field textarea:focus,
body:not(.login-page) .quantity-control input:focus { border-color: #6f8ddb; box-shadow: 0 0 0 3px rgba(47, 91, 211, .11); }
body:not(.login-page) input[type="checkbox"],
body:not(.login-page) input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0 7px 0 0;
  position: relative;
  display: inline-grid;
  vertical-align: -4px;
  place-items: center;
  border: 1px solid #bdc9da;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
}
body:not(.login-page) input[type="radio"] { border-radius: 50%; }
body:not(.login-page) input[type="checkbox"]:checked,
body:not(.login-page) input[type="radio"]:checked { border-color: var(--blue); background: var(--blue); }
body:not(.login-page) input[type="checkbox"]:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body:not(.login-page) input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
body:not(.login-page) .field-checkbox { margin: 4px 0 21px; }
body:not(.login-page) .field-checkbox > label {
  width: fit-content;
  min-height: 38px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #34435b;
}
body:not(.login-page) .field-checkbox input[type="checkbox"] {
  width: 1px;
  height: 1px;
  min-width: 1px;
  min-height: 1px;
  margin: 0;
  position: absolute;
  overflow: hidden;
  opacity: 0;
}
body:not(.login-page) .checkbox-box {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #b9c6d9;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body:not(.login-page) .checkbox-box svg { width: 14px; height: 14px; stroke-width: 2.5; }
body:not(.login-page) .field-checkbox label:hover .checkbox-box { border-color: #7692dc; background: #f6f8ff; }
body:not(.login-page) .field-checkbox input:focus-visible + .checkbox-box { box-shadow: 0 0 0 3px rgba(47, 91, 211, .14); }
body:not(.login-page) .field-checkbox input:checked + .checkbox-box { border-color: var(--blue); background: var(--blue); color: #fff; }
body:not(.login-page) .field-checkbox .field-help { margin: 2px 0 0 32px; }
body:not(.login-page) .field-help { margin-top: 7px; color: #8390a3; line-height: 1.5; }
body:not(.login-page) .form-actions { gap: 12px; padding-top: 8px; }

body.catalog-page .page-main { padding-top: 34px; }
body.catalog-page .catalog-head { margin-bottom: 25px; }
body.catalog-page .catalog-heading { margin-bottom: 22px; }
body.catalog-page .catalog-heading h1 { margin-top: 0; font-size: 30px; }
body.catalog-page .catalog-heading p { margin-top: 8px; }
.catalog-view-switch {
  height: 40px;
  padding: 3px;
  display: flex;
  gap: 3px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
}
.view-button {
  width: 34px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #8290a5;
}
.view-button:hover,
.view-button.is-active { background: #edf2ff; color: var(--blue); }
.view-button svg { width: 17px; height: 17px; }
body.catalog-page .catalog-filters {
  min-height: 66px;
  padding: 11px;
  gap: 10px;
  align-items: center;
  border: 1px solid #dce4f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(32, 57, 98, .04);
}
body.catalog-page .search-field { min-width: 240px; }
body.catalog-page .search-field > svg,
.select-field > svg:first-child { width: 18px; height: 18px; top: 13px; left: 14px; color: #8290a5; }
body.catalog-page .search-field input,
.select-field select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px 0 42px;
  border: 1px solid #d4deeb;
  border-radius: 7px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fbfcfe;
  color: #27354c;
  line-height: 42px;
}
body.catalog-page .search-field input:hover,
.select-field select:hover { border-color: #b6c4d8; background: #fff; }
body.catalog-page .search-field input:focus,
.select-field select:focus { border-color: #6f8ddb; background: #fff; box-shadow: 0 0 0 3px rgba(47, 91, 211, .1); }
.select-field { width: 210px; position: relative; flex: 0 0 auto; }
.select-field > svg { position: absolute; z-index: 1; pointer-events: none; }
.select-field .select-chevron { width: 16px; height: 16px; top: 14px; right: 13px; color: #8290a5; }
.filter-submit { min-width: 112px; height: 44px; }
.filter-reset { min-width: 82px; height: 44px; }

body.catalog-page .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.catalog-page .product-card {
  display: flex;
  min-width: 0;
  min-height: 570px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(31, 54, 91, .035);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.catalog-page .product-card:hover { border-color: #b9c9e4; box-shadow: 0 14px 30px rgba(27, 54, 100, .11); transform: translateY(-2px); }
body.catalog-page .product-image {
  width: 100%;
  height: 330px;
  min-height: 330px;
  padding: 18px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
}
body.catalog-page .product-image img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center;
}
.image-detail-hint {
  height: 30px;
  padding: 0 10px;
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d7e1ee;
  border-radius: 6px;
  background: rgba(255, 255, 255, .95);
  color: #62718a;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.image-detail-hint svg { width: 14px; height: 14px; }
.product-image:hover .image-detail-hint,
.product-image:focus-visible .image-detail-hint { opacity: 1; transform: translateY(0); }
body.catalog-page .product-content { min-height: 0; padding: 19px 20px 20px; display: flex; flex: 1; flex-direction: column; }
body.catalog-page .product-meta { min-height: 25px; align-items: center; color: #7a879b; font-size: 11px; }
.category-chip { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 5px; background: #edf2ff; color: #3158ba; font-size: 11px; font-weight: 750; }
body.catalog-page .product-content h2 { min-height: 46px; margin: 11px 0 12px; color: #202d43; font-size: 17px; line-height: 1.4; }
.product-specs { margin: 0; display: grid; gap: 7px; color: #6d7b90; font-size: 12px; }
.product-specs div { min-width: 0; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
.product-specs dt { color: #96a1b2; }
.product-specs dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-purchase { margin-top: auto; padding-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.product-price { flex: 0 0 auto; }
body.catalog-page .price { color: #234eb9; font-size: 23px; font-weight: 800; }
body.catalog-page .unit { color: #778499; font-size: 12px; }
.add-to-cart-form { display: flex; align-items: center; gap: 9px; }
.quantity-stepper {
  width: 112px;
  height: 40px;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  overflow: hidden;
  border: 1px solid #cfd9e7;
  border-radius: 7px;
  background: #fff;
}
.quantity-stepper button {
  width: 32px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #f7f9fc;
  color: #65748c;
}
.quantity-stepper button:hover { background: #eaf0ff; color: var(--blue); }
.quantity-stepper button:first-child { border-right: 1px solid #e1e7f0; }
.quantity-stepper button:last-child { border-left: 1px solid #e1e7f0; }
.quantity-stepper button svg { width: 14px; height: 14px; }
.quantity-stepper input {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  background: #fff;
  color: #26344b;
  text-align: center;
  line-height: 38px;
  font-weight: 750;
}
.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.add-cart-button { min-width: 126px; height: 40px; min-height: 40px !important; padding: 0 13px !important; }

.product-grid[data-view="list"] { grid-template-columns: 1fr !important; gap: 12px !important; }
.product-grid[data-view="list"] .product-card { min-height: 210px; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.product-grid[data-view="list"] .product-image { height: 100%; min-height: 210px; border-right: 1px solid #edf1f6; border-bottom: 0; }
.product-grid[data-view="list"] .product-content { padding: 21px 24px; display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(230px, .8fr) auto; grid-template-rows: auto auto; column-gap: 28px; align-items: center; }
.product-grid[data-view="list"] .product-meta { grid-column: 1; grid-row: 1; }
.product-grid[data-view="list"] .product-content h2 { min-height: 0; grid-column: 1; grid-row: 2; align-self: start; margin: 10px 0 0; }
.product-grid[data-view="list"] .product-specs { grid-column: 2; grid-row: 1 / 3; }
.product-grid[data-view="list"] .product-purchase { min-width: 365px; grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; }

.product-dialog {
  width: min(920px, calc(100% - 40px));
  max-height: min(680px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #d6dfed;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(15, 35, 70, .24);
}
.product-dialog[open] { display: grid; grid-template-columns: 1.08fr .92fr; }
.product-dialog::backdrop { background: rgba(17, 30, 54, .48); backdrop-filter: blur(3px); }
.dialog-close { width: 38px; height: 38px; padding: 0; position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; border: 1px solid #d8e1ed; border-radius: 7px; background: #fff; color: #62718a; }
.dialog-close:hover { background: #edf2ff; color: var(--blue); }
.dialog-close svg { width: 18px; height: 18px; }
.dialog-product-image { min-height: 500px; padding: 32px; display: grid; place-items: center; border-right: 1px solid #e5eaf2; background: #fff; }
.dialog-product-image img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 500px; object-fit: contain; }
.dialog-product-image > svg { width: 52px; height: 52px; color: #a0adbf; }
.dialog-product-content { padding: 46px 36px 34px; overflow-y: auto; }
.dialog-product-content h2 { margin: 16px 0 7px; font-size: 24px; line-height: 1.35; }
.dialog-sku { margin: 0; color: #7c899d; }
.dialog-specs { margin: 26px 0 0; display: grid; gap: 0; }
.dialog-specs div { padding: 13px 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; border-top: 1px solid #e9edf3; }
.dialog-specs dt { color: #8b97a9; }
.dialog-specs dd { margin: 0; color: #35445d; overflow-wrap: anywhere; }
.dialog-price { margin-top: 24px; display: flex; align-items: baseline; color: #234eb9; }
.dialog-price strong { font-size: 28px; }
.dialog-price span { color: #7d899c; }

body:not(.login-page) .cart-layout,
body:not(.login-page) .checkout-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
body:not(.login-page) .cart-row { min-height: 72px; grid-template-columns: minmax(300px, 1fr) 105px 130px 110px 38px; padding: 12px 18px; }
body:not(.login-page) .cart-header { min-height: 44px; background: #f7f9fc; }
body:not(.login-page) .cart-thumb { width: 54px; height: 54px; padding: 4px; background: #fff; border: 1px solid #e4e9f1; }
body:not(.login-page) .cart-thumb img { object-fit: contain; }
body:not(.login-page) .quantity-control input { height: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 0; line-height: 38px; }
.quantity-stepper-compact { width: 122px; }
body:not(.login-page) .order-summary { top: 96px; padding: 24px; border-color: #cdd9f7; border-radius: 8px; background: #f1f5ff; }
body:not(.login-page) .order-summary > strong { margin: 8px 0 18px; color: #234eb9; }
body:not(.login-page) .checkout-items { padding: 22px 24px; }
body:not(.login-page) .checkout-item { min-height: 50px; align-items: center; }

body:not(.login-page) .address-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body:not(.login-page) .address-card { min-height: 188px; padding: 21px; border-color: #dce4f0; border-radius: 8px; box-shadow: 0 4px 14px rgba(32, 57, 98, .04); }
body:not(.login-page) .address-card.is-default { border-color: #9bb3ed; box-shadow: inset 0 0 0 1px #dce6ff, 0 4px 14px rgba(32, 57, 98, .04); }
body:not(.login-page) .default-label { background: #edf2ff; color: #2f5bd3; }
body:not(.login-page) .card-actions { padding-top: 11px; border-top: 1px solid #edf0f5; }

body:not(.login-page) .status-filters { gap: 9px; padding: 6px; width: fit-content; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; }
body:not(.login-page) .status-filters a,
body:not(.login-page) .status-filters button {
  height: 35px;
  min-height: 35px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  line-height: 1;
  text-align: center;
}
body:not(.login-page) .status-filters a:hover,
body:not(.login-page) .status-filters button:hover { background: #f3f6fc; color: var(--blue); }
body:not(.login-page) .status-filters .is-active { border-color: #d9e4ff; background: #edf2ff; color: var(--blue); }
body:not(.login-page) .order-row { min-height: 64px; padding: 12px 20px; }
body:not(.login-page) .order-head { min-height: 44px; background: #f7f9fc; }
body:not(.login-page) .order-row:not(.order-head):hover { background: #f7f9ff; }
body:not(.login-page) .status-shipped,
body:not(.login-page) .status-completed { color: #2553bd; background: #edf2ff; }
body:not(.login-page) .shipment-icon { background: #edf2ff; color: var(--blue); }
body:not(.login-page) .receive-action { border-color: #c8d6f8; background: #f1f5ff; }
body:not(.login-page) .settlement.is-settled { color: #2553bd; background: #edf2ff; }
body:not(.login-page) .detail-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; }
body:not(.login-page) .detail-primary { gap: 20px; }
body:not(.login-page) .detail-primary > .table-surface { padding: 22px 24px; }
body:not(.login-page) .detail-item { min-height: 60px; align-items: center; }
body:not(.login-page) .detail-total strong { color: #234eb9; }
body:not(.login-page) .detail-sidebar section { padding: 20px; border-color: #dce4f0; border-radius: 8px; box-shadow: 0 4px 14px rgba(32, 57, 98, .04); }
body:not(.login-page) .narrow-page { width: min(760px, 100%); }
body:not(.login-page) .empty-state { min-height: 340px; border-color: #cbd6e5; border-radius: 8px; }
body:not(.login-page) .empty-state > svg { color: #6582c9; }

@media (max-width: 1180px) {
  body:not(.login-page) .shell { width: min(100% - 40px, 1040px); }
  body.catalog-page .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-purchase { align-items: stretch; flex-direction: column; }
  .add-to-cart-form { width: 100%; }
  .add-cart-button { flex: 1; }
  .product-grid[data-view="list"] .product-card { grid-template-columns: 230px minmax(0, 1fr); }
  .product-grid[data-view="list"] .product-content { grid-template-columns: minmax(220px, 1fr) minmax(205px, .8fr); }
  .product-grid[data-view="list"] .product-purchase { min-width: 0; grid-column: 1 / 3; grid-row: 3; margin-top: 16px; align-items: center; flex-direction: row; }
  body:not(.login-page) .address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body:not(.login-page) .shell { width: min(100% - 28px, 680px); }
  body:not(.login-page) .site-header { position: sticky; }
  body:not(.login-page) .header-inner { height: 64px; gap: 10px; }
  body:not(.login-page) .brand { min-width: 0; }
  body:not(.login-page) .brand-logo { width: 72px; height: 25px; }
  body:not(.login-page) .brand-name { display: none; }
  body:not(.login-page) .main-nav { margin-left: auto; }
  body:not(.login-page) .main-nav a { min-width: 42px; padding: 0 10px; }
  body:not(.login-page) .main-nav a span { display: none; }
  body:not(.login-page) .cart-shortcut { min-width: 40px; width: 40px; padding: 0; }
  body:not(.login-page) .cart-shortcut > span:not(.cart-count) { display: none; }
  body:not(.login-page) .account-menu summary { min-width: 36px; }
  body:not(.login-page) .account-label,
  body:not(.login-page) .account-menu summary > svg { display: none; }
  body:not(.login-page) .page-main { padding-top: 26px; }
  body.catalog-page .catalog-filters { display: grid; grid-template-columns: minmax(0, 1fr) 180px; }
  body.catalog-page .search-field { grid-column: 1 / 3; }
  .select-field { width: 100%; }
  .filter-submit { min-width: 0; }
  .filter-reset { grid-column: 1 / 3; }
  .product-grid[data-view="list"] .product-card { grid-template-columns: 180px minmax(0, 1fr); }
  .product-grid[data-view="list"] .product-content { display: flex; }
  .product-grid[data-view="list"] .product-specs { display: none; }
  .product-grid[data-view="list"] .product-purchase { margin-top: auto; align-items: stretch; flex-direction: column; }
  .product-dialog[open] { grid-template-columns: 1fr; overflow-y: auto; }
  .dialog-product-image { min-height: 300px; max-height: 360px; border-right: 0; border-bottom: 1px solid #e5eaf2; }
  .dialog-product-content { overflow: visible; }
  body:not(.login-page) .cart-layout,
  body:not(.login-page) .checkout-layout,
  body:not(.login-page) .detail-layout { grid-template-columns: 1fr; }
  body:not(.login-page) .order-summary { position: static; }
  body:not(.login-page) .address-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body:not(.login-page) .shell { width: calc(100% - 24px); }
  body:not(.login-page) .header-actions { gap: 7px; }
  body:not(.login-page) .account-avatar { width: 34px; height: 34px; }
  body:not(.login-page) .main-nav a { min-width: 35px; padding: 0 7px; }
  body:not(.login-page) .page-heading { align-items: flex-start; }
  body.catalog-page .catalog-heading { flex-direction: row; }
  body.catalog-page .catalog-heading h1 { font-size: 24px; }
  body.catalog-page .catalog-heading p { max-width: 250px; }
  body.catalog-page .catalog-filters { grid-template-columns: 1fr; }
  body.catalog-page .search-field,
  .filter-reset { grid-column: 1; }
  body.catalog-page .product-grid { grid-template-columns: 1fr; }
  body.catalog-page .product-card { min-height: 0; }
  body.catalog-page .product-image { height: 230px; }
  body.catalog-page .product-content h2 { min-height: 0; }
  .product-purchase { align-items: stretch; }
  .add-to-cart-form { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .product-grid[data-view="list"] { gap: 16px !important; }
  .product-grid[data-view="list"] .product-card { display: flex; min-height: 0; }
  .product-grid[data-view="list"] .product-image { width: 100%; height: 210px; min-height: 210px; border-right: 0; border-bottom: 1px solid #edf1f6; }
  .product-grid[data-view="list"] .product-content { padding: 19px 20px 20px; }
  .product-grid[data-view="list"] .product-specs { display: grid; }
  .product-grid[data-view="list"] .product-purchase { margin-top: auto; }
  .dialog-product-image { min-height: 250px; max-height: 300px; padding: 24px; }
  .dialog-product-content { padding: 30px 22px 24px; }
  .dialog-product-content h2 { padding-right: 34px; font-size: 21px; }
  body:not(.login-page) .surface-form,
  body:not(.login-page) .form-surface { padding: 20px; }
  body:not(.login-page) .status-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  body:not(.login-page) .status-filters a,
  body:not(.login-page) .status-filters button { flex: 0 0 auto; }
}