html, body { background: var(--paper); }
body { color: var(--ink); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: rgba(45, 91, 133, .46); }
.app-shell { background: var(--paper); }
.side-rail { width: 248px; padding: 26px 16px 20px; background: var(--ink); border-right: 0; }
.main-content { width: calc(100% - 248px); margin-left: 248px; }
.brand-mark { color: var(--on-ink); }
.brand-mark small { color: var(--on-ink-muted); }
.brand-icon { color: var(--ink); background: var(--brand-gold); border-radius: 8px; }
.rail-label { margin: 48px 12px 13px; color: var(--rail-label); }
.nav-item { color: var(--rail-text); border-radius: 6px; font-size: 13px; }
.nav-item:hover { color: var(--on-dark); background: rgba(255,255,255,.08); }
.nav-item.active { color: var(--on-dark); background: var(--blue); box-shadow: none; }
.rail-footer { border-top-color: rgba(255,255,255,.14); }
.account-mini, .account-chip { color: inherit; }
.account-mini { color: var(--rail-text-strong); }
.account-mini small { color: var(--on-ink-muted); }
.topbar { height: 72px; background: rgba(245,241,232,.94); border-bottom-color: var(--line); }
.breadcrumb { font-size: 12px; }
.top-actions { gap: 10px; }
.icon-button { width: 36px; height: 36px; border-color: var(--line); background: var(--surface); border-radius: 7px; }
.account-chip { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.view-container { max-width: 1440px; padding-top: 32px; }
.page-heading { margin-bottom: 24px; }
.page-heading .eyebrow, .public-intro .eyebrow { display: none; }
.page-heading h1 { margin-bottom: 7px; font-size: clamp(25px, 2.7vw, 34px); letter-spacing: -.03em; }
.lede { color: var(--muted); font-size: 12px; line-height: 1.65; }
.button { min-height: 36px; border-radius: 6px; padding: 0 12px; font-size: 11px; }
.button-primary { background: var(--blue); }
.button-primary:hover { background: var(--blue-strong); }
.button-light { border-color: var(--line); background: var(--surface); }
.button-danger { color: #9a3f2f; background: var(--accent-soft); }
.surface { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 5px 16px rgba(31,39,45,.035); }
.filter-row { gap: 8px; }
.search-box { height: 38px; }
.search-box input, .select-box { height: 38px; border-color: var(--line); border-radius: 6px; background: var(--surface); }
.admin-product-filters, .admin-order-filters { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,253,248,.62); }
.admin-product-button-group { min-width: max-content; }
.admin-product-button-group .button { min-height: 34px; }
.metric { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; }
.metric-label { color: var(--muted); }
.metric-value { color: var(--ink); }
.product-card, .public-product-card, .order-card { border-color: var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; }
.product-card:hover, .public-product-card:hover, .order-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.product-card .product-name, .public-product-body h2 { letter-spacing: -.02em; }
.order-table th { color: var(--muted); background: var(--th-bg); }
.order-table td, .order-table th { border-color: var(--line); }
.order-id-link { color: var(--blue); }
.modal { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 70px rgba(31,39,45,.18); }
.modal-header, .modal-footer { border-color: var(--line); }
.toast { background: var(--ink); }
.public-catalog { max-width: 1320px; }
.public-header { border-bottom-color: var(--line); }
.public-product-card { border-radius: 8px; }
.public-product-body { padding: 15px; }
.mobile-nav { background: rgba(255,253,248,.97); border-top-color: var(--line); }

@media (max-width: 700px) {
  .side-rail { width: 0; padding: 0; }
  .main-content { width: 100%; margin-left: 0; }
  .topbar { height: 64px; padding: 0 16px; }
  .view-container { padding: 24px 16px 88px; }
  .page-heading { gap: 14px; }
  .page-heading-actions { width: 100%; }
  .admin-product-button-group { min-width: 0; width: 100%; }
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", "DM Sans", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(68, 109, 131, .28); outline-offset: 2px; }

.app-shell { min-height: 100vh; display: flex; }
.is-hidden { display: none !important; }
.auth-root { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.auth-root:empty { display: none; }
.auth-layout { width: min(980px, 100%); min-height: 570px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.auth-intro { position: relative; overflow: hidden; padding: 40px; color: white; background: var(--panel); }
.auth-intro::after { content: ""; position: absolute; width: 330px; height: 330px; right: -130px; bottom: -110px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 36px rgba(255,255,255,.06), 0 0 0 72px rgba(255,255,255,.04); }
.auth-intro .brand-mark { position: relative; z-index: 1; color: white; }
.auth-intro .brand-mark small { color: var(--panel-muted); }
.auth-copy { position: relative; z-index: 1; margin-top: 118px; }
.auth-copy .eyebrow { color: var(--panel-muted); }
.auth-copy h1 { max-width: 300px; font-size: 34px; }
.auth-copy p { max-width: 280px; color: var(--panel-soft); font-size: 12px; line-height: 1.8; }
.auth-notes { position: absolute; z-index: 1; left: 40px; right: 40px; bottom: 34px; display: flex; gap: 20px; color: var(--panel-soft); font-size: 11px; }
.auth-notes span { display: flex; align-items: center; gap: 6px; }
.auth-notes svg { width: 14px; }
.auth-form-wrap { display: flex; flex-direction: column; justify-content: center; padding: 50px clamp(30px, 6vw, 72px); }
.auth-form-wrap h2 { margin-bottom: 8px; font-size: 25px; }
.auth-form-subtitle { margin-bottom: 27px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-form { display: grid; gap: 15px; }
.auth-form .form-field { margin: 0; }
.auth-form .button { width: 100%; min-height: 44px; margin-top: 4px; }
.auth-error { min-height: 18px; margin: 0; color: var(--accent-deep); font-size: 11px; }
.auth-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 25px; color: var(--muted); font-size: 11px; }
.auth-status { display: inline-flex; align-items: center; gap: 5px; }
.auth-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.public-catalog { width: min(1180px, 100%); min-width: 0; margin: 0 auto; padding: 28px clamp(18px, 5vw, 64px) 60px; }
.public-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.public-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 42px 0 28px; }
.public-intro h1 { margin-bottom: 8px; }
.public-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.public-count { padding-bottom: 4px; color: var(--accent-deep); font-size: 12px; font-weight: 700; }
.public-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.public-tools .search-box { width: 250px; min-width: 190px; }
.public-tools .category-row { margin: 0; }
.density-toggle { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.density-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 4px; color: var(--muted); background: transparent; }
.density-button svg { width: 16px; height: 16px; }
.density-button.active { color: var(--ink); background: var(--blue-soft); }
.public-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.public-grid.density-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.public-product-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.image-preview { display: block; position: relative; overflow: hidden; padding: 0; border: 0; color: inherit; background: transparent; cursor: zoom-in; }
.image-count { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 4px 7px; color: white; background: rgba(31,27,23,.7); border-radius: 4px; font-size: 11px; }
.image-preview:hover img { transform: scale(1.02); }
.image-preview img { transition: transform .2s ease; }
.public-product-image-frame { width: 100%; aspect-ratio: 4 / 3; }
.public-product-image { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--placeholder); }
.image-placeholder { display: grid; place-items: center; overflow: hidden; color: var(--muted); background: var(--placeholder); }
.image-placeholder-content { display: grid; justify-items: center; gap: 8px; padding: 18px; text-align: center; font-size: 11px; }
.image-placeholder-content svg { width: 26px; height: 26px; color: #aaa39a; }
.public-product-body { padding: 16px; }
.public-product-body h2 { margin: 8px 0 5px; font-size: 17px; }
.public-product-body p { min-height: 34px; margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.public-product-foot { display: flex; align-items: end; justify-content: space-between; }
.public-product-foot span { display: block; color: var(--muted); font-size: 11px; }
.public-product-foot strong { margin-right: 4px; font-family: "DM Sans", sans-serif; font-size: 21px; }
.public-product-foot em { color: var(--muted); font-size: 11px; font-style: normal; }
.public-options { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.public-option { display: flex; gap: 12px; font-size: 11px; line-height: 1.5; }
.public-option b { min-width: 42px; color: var(--ink); }
.public-option span { color: var(--muted); }
.side-rail {
  position: fixed; inset: 0 auto 0 0; width: 232px; padding: 30px 18px 22px;
  display: flex; flex-direction: column; background: #eee9e1; border-right: 1px solid #e2dbd1; z-index: 5;
}
.brand-mark { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1.08; font-size: 14px; }
.brand-mark small { color: var(--muted); font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.brand-icon { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--on-dark); border-radius: 10px; font-size: 20px; }
.rail-label { margin: 58px 13px 15px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rail-nav { display: grid; gap: 5px; }
.nav-item { border: 0; color: #6c675f; background: transparent; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 8px; font-weight: 600; font-size: 14px; transition: .2s ease; }
.nav-item:hover { background: rgba(255,255,255,.54); color: var(--ink); }
.nav-item.active { color: var(--accent-deep); background: var(--surface); box-shadow: 0 5px 18px rgba(63, 47, 33, .06); }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.8; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; background: var(--accent); color: white; border-radius: 50%; font-size: 11px; }
.rail-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #ddd5ca; }
.account-mini, .account-chip { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; color: var(--ink); text-align: left; }
.account-mini { width: 100%; padding: 7px; }
.account-mini strong, .account-mini small { display: block; }
.account-mini strong { font-size: 12px; }
.account-mini small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.account-mini svg { margin-left: auto; width: 16px; color: var(--muted); }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: var(--on-dark); background: var(--blue); border-radius: 50%; font-size: 13px; font-weight: 700; }
.avatar-small { width: 28px; height: 28px; font-size: 11px; }

.main-content { width: calc(100% - 232px); min-height: 100vh; margin-left: 232px; }
.topbar { height: 84px; padding: 0 clamp(24px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(224, 217, 207, .7); }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); font-weight: 700; }
.breadcrumb svg { width: 14px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.icon-button { position: relative; border: 1px solid var(--line); color: var(--ink); background: var(--surface); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.icon-button svg { width: 17px; }
.notification-dot { position: absolute; width: 7px; height: 7px; top: 7px; right: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); }
.notification-dot.has-count { width: auto; min-width: 16px; height: 16px; top: 3px; right: 3px; padding: 0 3px; border-radius: 8px; color: white; font-size: 11px; line-height: 12px; text-align: center; }
.account-chip { gap: 8px; font-size: 12px; font-weight: 700; }
.account-chip svg { width: 14px; color: var(--muted); }
.view-container { max-width: 1320px; margin: 0 auto; padding: 38px clamp(24px, 5vw, 64px) 72px; }

.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(26px, 3vw, 38px); line-height: 1.18; letter-spacing: -.02em; }
h2 { margin-bottom: 6px; font-size: 20px; letter-spacing: -.01em; }
h3 { margin-bottom: 5px; font-size: 15px; }
.lede { color: var(--muted); font-size: 13px; line-height: 1.8; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-heading-actions { display: flex; gap: 10px; align-items: center; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; padding: 0 15px; color: var(--ink); background: var(--surface-strong); font-size: 12px; font-weight: 700; transition: .18s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(63,47,33,.08); }
.button svg { width: 15px; height: 15px; }
.button-primary { color: white; background: var(--ink); }
.button-accent { color: white; background: var(--accent); }
.button-light { border-color: var(--line); background: transparent; }
.button-danger { color: var(--accent-deep); background: var(--accent-soft); }
.button-quiet { padding: 0 5px; color: var(--muted); background: transparent; }


.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 32px; }
.metric { padding: 18px; border-top: 2px solid var(--ink); background: var(--surface); }
.metric:nth-child(2) { border-top-color: var(--accent); }
.metric:nth-child(3) { border-top-color: var(--sage); }
.metric:nth-child(4) { border-top-color: var(--gold); }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.metric-label svg { width: 15px; }
.metric-value { margin: 12px 0 4px; font-family: "DM Sans", sans-serif; font-size: 27px; font-weight: 700; letter-spacing: -.04em; }
.metric-trend { font-size: 11px; color: var(--sage); }
.metric-trend.neutral { color: var(--muted); }

.work-queue { padding: 20px; }
.cart-page { padding: 20px; }
.cart-page .section-head { margin-bottom: 6px; }
.cart-page .cart-unassigned-hint { margin: 14px 0 0; }
.work-queue .section-head { margin-bottom: 6px; }
.work-count { color: var(--muted); font-size: 11px; }
.work-list { display: grid; }
.work-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.work-item:first-child { border-top: 0; }
.work-item > div { min-width: 0; }
.work-item strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.work-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.work-item .button { flex: 0 0 auto; }
.work-queue .empty-state { padding: 34px 12px 20px; border: 0; }

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 17px; }
.section-link { border: 0; background: transparent; color: var(--accent-deep); font-size: 11px; font-weight: 700; }
.surface { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.order-table { width: 100%; border-collapse: collapse; }
.order-table th { padding: 13px 16px; color: var(--muted); background: var(--row-alt); text-align: left; font-size: 11px; font-weight: 700; }
.order-table td { padding: 15px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.order-table tr { cursor: pointer; transition: background-color .15s; }
.order-table tbody tr:hover { background: var(--row-alt); }
.order-id { color: var(--ink); font-family: "DM Sans", sans-serif; font-weight: 700; }
.order-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.money { font-family: "DM Sans", sans-serif; font-weight: 700; }
.status { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-blue { color: var(--blue); background: var(--blue-soft); }
.status-orange { color: var(--accent-deep); background: var(--accent-soft); }
.status-green { color: var(--sage); background: var(--sage-soft); }
.status-gold { color: var(--gold-text); background: var(--gold-soft); }
.quote-order-lines { margin-top: 18px; }
.quote-order-lines .section-head { margin-bottom: 8px; }
.quote-order-lines h3 { margin: 0; font-size: 14px; }
.quote-order-line { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.quote-order-line > div { min-width: 0; flex: 1; }
.quote-order-line strong, .quote-order-line small { display: block; }
.quote-order-line strong { font-size: 12px; }
.quote-order-line small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.quote-order-total { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; font-size: 12px; }
.quote-order-total strong { color: var(--accent-deep); font-size: 18px; }
.quote-form-line { align-items: end; }
.quote-form-line label { width: 110px; flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.quote-form-line input { width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--field); font-size: 12px; }
.quote-form-list { display: grid; }
.shipping-item-list { display: grid; gap: 10px; }
.shipping-item-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, .7fr) minmax(150px, .9fr); gap: 8px; align-items: end; padding: 13px 0; border-bottom: 1px solid var(--line); }
.shipping-item-row > div { min-width: 0; }
.shipping-item-row strong, .shipping-item-row small { display: block; }
.shipping-item-row strong { font-size: 12px; }
.shipping-item-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.shipping-item-row input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--field); font-size: 11px; }

.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-product-filters { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(130px, .7fr) auto auto; }
.admin-product-filters .search-box { width: auto; min-width: 0; }
.admin-product-actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.admin-product-button-group { width: max-content; max-width: 100%; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
.admin-product-button-group .button { flex: 0 0 auto; white-space: nowrap; }
.search-box { min-width: 220px; height: 40px; position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; left: 12px; width: 16px; color: var(--muted); }
.search-box input { width: 100%; height: 100%; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); outline: 0; font-size: 12px; }
.select-box { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
.tab-row { display: flex; gap: 19px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab-button { position: relative; padding: 0 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.tab-button.active { color: var(--ink); }
.tab-button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); }
.category-row { display: flex; gap: 8px; overflow: auto; margin-bottom: 22px; padding-bottom: 2px; }
.category { min-width: max-content; padding: 8px 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 600; }
.category.active { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-grid.density-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.product-grid.density-compact .product-body { padding: 10px; }
.product-grid.density-compact .product-name { font-size: 12px; }
.product-grid.density-compact .product-desc { max-height: 32px; margin-bottom: 8px; overflow: hidden; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-image-frame { width: 100%; aspect-ratio: 4 / 3; }
.product-image { width: 100%; height: 100%; object-fit: cover; display: block; background: #ddd; }
.product-body { padding: 14px; }
.product-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.product-name { margin: 7px 0 3px; font-size: 14px; }
.product-desc { margin: 0 0 13px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.product-price { display: flex; align-items: baseline; gap: 3px; font-family: "DM Sans", sans-serif; font-weight: 700; }
.product-price strong { font-size: 19px; }
.product-price span { color: var(--muted); font-size: 11px; font-family: "Noto Sans SC", sans-serif; font-weight: 500; }
.product-bottom { display: flex; align-items: end; justify-content: space-between; }
.round-action { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--ink); }
.round-action svg { width: 15px; }

.order-list { display: grid; gap: 10px; }
.order-card { padding: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); transition: .16s; }
.order-card:hover { border-color: #d5c9bb; }
.order-card-head, .order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-card-head { margin-bottom: 14px; }
.order-overview-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0 0 14px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order-overview-meta div { min-width: 0; display: grid; gap: 4px; }
.order-overview-meta span { color: var(--muted); font-size: 11px; }
.order-overview-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.order-card-info { display: flex; align-items: center; gap: 10px; }
.order-card-title { margin: 0; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; }
.order-card-date { color: var(--muted); font-size: 11px; }
.order-card-body { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order-thumb { width: 49px; height: 49px; object-fit: cover; border-radius: 7px; }
.order-card-body strong { display: block; font-size: 12px; }
.order-card-body small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; }
.order-card-foot { padding-top: 13px; }
.order-card-foot small { color: var(--muted); font-size: 11px; }
.order-total { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 700; }
.order-detail-page { display: grid; gap: 18px; }
.order-detail-heading { display: grid; gap: 15px; }
.order-detail-heading-main { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.order-detail-heading-main h1 { margin: 4px 0 0; }
.order-detail-heading-main .lede { margin: 7px 0 0; }
.order-detail-heading-main > .status { flex: 0 0 auto; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: 18px; align-items: start; }
.order-detail-grid main, .order-detail-grid aside { display: grid; gap: 18px; min-width: 0; }
.order-detail-section { padding: 20px; }
.order-detail-section > .section-head { margin-bottom: 11px; }
.order-detail-section h2 { margin: 0; font-size: 16px; }
.order-detail-items { display: grid; }
.order-detail-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 15px; padding: 16px 0; border-top: 1px solid var(--line); }
.order-detail-media { width: 104px; }
.order-detail-image-frame { width: 104px; aspect-ratio: 1 / 1; border-radius: 7px; }
.order-detail-image { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; background: var(--placeholder); }
.order-detail-image-frame .image-placeholder-content { gap: 0; padding: 5px; }
.order-detail-image-frame .image-placeholder-content svg { width: 22px; height: 22px; }
.order-detail-image-frame .image-placeholder-content span { display: none; }
.order-detail-main { min-width: 0; }
.order-detail-item-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.order-detail-index { display: block; color: var(--muted); font-size: 11px; }
.order-detail-item h3 { margin: 4px 0 0; font-size: 14px; }
.order-detail-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; }
.order-detail-specs span { color: var(--muted); font-size: 11px; }
.order-detail-specs b { margin-right: 5px; color: var(--ink); font-weight: 600; }
.order-detail-price-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 15px; color: var(--muted); font-size: 11px; }
.order-detail-price-row strong { margin-left: 4px; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 12px; }
.order-detail-cost, .order-detail-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.order-detail-item-logistics { display: flex; align-items: center; gap: 5px; margin-top: 11px; color: var(--muted); font-size: 11px; }
.order-detail-item-logistics svg { width: 14px; color: var(--accent-deep); }
.order-detail-summary { display: flex; justify-content: end; gap: 30px; padding-top: 17px; border-top: 1px solid var(--line); }
.order-detail-summary div { display: grid; gap: 5px; text-align: right; }
.order-detail-summary span, .order-info-grid span { color: var(--muted); font-size: 11px; }
.order-detail-summary strong { font-family: "DM Sans", sans-serif; font-size: 16px; }
.order-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.order-info-grid > div { display: grid; gap: 5px; min-width: 0; }
.order-info-grid strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.order-info-wide { grid-column: 1 / -1; }
.order-detail-actions { display: flex; justify-content: flex-end; gap: 8px; }
.order-filter-control { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.order-filter-control label { color: var(--muted); font-size: 11px; font-weight: 700; }
.order-filter-control .select-box { min-width: 180px; }
.admin-order-filters { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .8fr) repeat(2, minmax(130px, .6fr)) minmax(160px, .8fr) auto auto; gap: 9px; align-items: end; margin-bottom: 14px; }
.admin-order-filters .search-box { width: auto; min-width: 0; }
.admin-order-date { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.admin-order-date input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--field); color: var(--ink); font: inherit; }
.order-id-link { padding: 0; border: 0; background: transparent; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.order-change-request-panel { padding: 18px 20px; }
.order-change-request { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.order-change-request strong, .order-change-request small { display: block; }
.order-change-request strong { font-size: 12px; }
.order-change-request small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.order-change-request-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: end; }
.order-change-diff { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.quote-version-badge { margin-left: auto; }
.quote-version-timeline { display: grid; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.quote-version-timeline > strong { font-size: 11px; }
.quote-version-row { display: grid; grid-template-columns: 42px 90px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.quote-version-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-change-rejection-panel { padding: 18px 20px; }
.order-change-rejection { padding: 11px 0; border-top: 1px solid var(--line); }
.order-change-rejection strong { font-size: 12px; }
.order-change-rejection p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.order-detail-customer-card, .order-detail-logistics-list { background: var(--field); }
.order-detail-logistics-summary { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.order-detail-logistics-summary span { color: var(--muted); font-size: 11px; }
.order-detail-logistics-summary strong { font-size: 11px; }
.cart-list { display: grid; gap: 0; margin-bottom: 20px; }
.cart-customer-groups { display: grid; gap: 14px; }
.cart-customer-group { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.cart-customer-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: var(--accent-soft); }
.cart-group-select { min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cart-group-select input, .cart-item-select { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--blue); }
.cart-group-select span { min-width: 0; }
.cart-customer-group-head strong, .cart-customer-group-head small { display: block; }
.cart-customer-group-head strong { font-size: 12px; }
.cart-customer-group-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.cart-customer-group .cart-list { margin: 0; padding: 0 14px; }
.cart-unassigned-hint { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 10px 12px; color: #8b5b16; background: #fff6df; border-radius: 6px; font-size: 11px; }
.cart-unassigned-hint svg { width: 15px; flex: 0 0 auto; }
.cart-submit-hint { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--muted); font-size: 11px; }
.cart-submit-hint svg { width: 14px; }
.cart-item { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border-radius: 7px; background: var(--placeholder); }
.cart-item > div { min-width: 0; flex: 1; }
.cart-item strong, .cart-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item strong { font-size: 12px; }
.cart-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }

.profile-grid { display: grid; grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr); gap: 18px; }
.profile-card { padding: 26px; }
.profile-cover { height: 88px; margin: -26px -26px 0; background: var(--panel); }
.profile-main { position: relative; margin-top: -26px; display: flex; align-items: end; justify-content: space-between; }
.profile-main .avatar { width: 62px; height: 62px; border: 4px solid var(--surface); font-size: 20px; }
.profile-main svg { color: var(--muted); }
.profile-card h2 { margin-top: 15px; }
.profile-card p { margin-bottom: 0; color: var(--muted); font-size: 11px; }
.detail-list { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.detail-row { display: flex; justify-content: space-between; gap: 10px; margin: 13px 0; font-size: 11px; }
.detail-row span:first-child { color: var(--muted); }
.setting-list { padding: 4px 18px; }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row svg { width: 18px; color: var(--blue); }
.setting-row strong { display: block; font-size: 12px; }
.setting-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.setting-row .button { margin-left: auto; }
.account-list { display: grid; gap: 0; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.account-row:last-child { border-bottom: 0; }
.account-row strong, .account-row small { display: block; }
.account-row strong { font-size: 12px; }
.account-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.account-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.account-disabled { opacity: .62; }
.account-controls .button { width: 30px; min-height: 30px; padding: 0; }
.customer-directory { overflow: hidden; }
.customer-directory-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.customer-directory-head strong { font-size: 13px; }
.customer-directory-head span { color: var(--muted); font-size: 11px; }
.customer-directory-row { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(180px, 1fr) minmax(180px, 1fr) 34px; align-items: center; gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.customer-directory-row:last-of-type { border-bottom: 0; }
.customer-directory-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.customer-avatar { width: 34px; height: 34px; flex: 0 0 34px; color: var(--accent-deep); background: var(--accent-soft); font-size: 13px; }
.customer-directory-main h2 { margin: 0; font-size: 12px; }
.customer-directory-main p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.customer-directory-address, .customer-directory-note { display: grid; gap: 4px; min-width: 0; }
.customer-directory-row > div > span { color: var(--muted); font-size: 11px; }
.customer-directory-row > div > strong { overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }
.customer-pagination { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.customer-pagination > div { display: flex; gap: 7px; }
.supplier-list { display: grid; gap: 0; }
.supplier-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.supplier-item:last-child { border-bottom: 0; }
.supplier-item strong, .supplier-item small { display: block; }
.supplier-item strong { font-size: 12px; }
.supplier-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.supplier-directory-page { overflow: hidden; }
.supplier-directory-page > .section-head { margin: 0; padding: 19px 20px; border-bottom: 1px solid var(--line); }
.supplier-table-wrap { overflow-x: auto; }
.supplier-table { min-width: 900px; }
.supplier-table th, .supplier-table td { vertical-align: middle; }
.supplier-table th:nth-child(1), .supplier-table td:nth-child(1) { min-width: 210px; }
.supplier-table th:nth-child(2), .supplier-table td:nth-child(2) { min-width: 130px; }
.supplier-table th:nth-child(3), .supplier-table td:nth-child(3) { min-width: 150px; }
.supplier-table th:nth-child(4), .supplier-table td:nth-child(4) { min-width: 240px; }
.supplier-table th:nth-child(5), .supplier-table td:nth-child(5) { min-width: 85px; }
.supplier-table th:nth-child(6), .supplier-table td:nth-child(6) { min-width: 105px; }
.supplier-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.supplier-name-cell > div { min-width: 0; }
.supplier-directory-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent-deep); background: var(--accent-soft); border-radius: 7px; }
.supplier-directory-icon svg { width: 16px; }
.supplier-name-cell strong { display: block; font-size: 12px; }
.supplier-name-cell .order-sub { white-space: nowrap; }
.supplier-note-cell { max-width: 310px; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
.supplier-updated { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.supplier-action-cell { width: 70px; min-width: 70px; text-align: center; white-space: nowrap; }
.supplier-edit-button { width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 auto; }
.supplier-form-page { max-width: 900px; padding: 24px; }
.supplier-form-intro { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.supplier-form-intro h2 { margin: 0; font-size: 17px; }
.supplier-form-intro p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.supplier-form-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent-deep); background: var(--accent-soft); border-radius: 8px; }
.supplier-form-icon svg { width: 18px; }
.supplier-form-page .form-grid { gap: 0 18px; padding-top: 7px; }
.supplier-form-page .form-field { margin: 15px 0 7px; }
.supplier-form-page .form-field textarea { min-height: 112px; }
.supplier-form-page .form-error { margin: 4px 0 0; min-height: 17px; }
.supplier-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.inline-select { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.inline-select select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 11px; }
.switch { margin-left: auto; width: 37px; height: 21px; position: relative; border: 0; border-radius: 12px; background: var(--ink); }
.switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; }


.empty-state { padding: 55px 20px; border: 1px dashed #d8d0c5; border-radius: var(--radius); text-align: center; color: var(--muted); }
.empty-state svg { width: 28px; margin-bottom: 12px; color: var(--accent); }
.empty-state p { margin: 0; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 29px; z-index: 30; padding: 11px 17px; color: white; background: var(--ink); border-radius: 6px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(31, 27, 23, .48); }
.modal { width: min(620px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; border-radius: 13px; background: var(--surface); box-shadow: 0 25px 80px rgba(30, 24, 19, .2); }
.modal-wide { width: min(820px, 100%); }
.modal-header { padding: 20px 22px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; }
.modal-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.close-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; color: var(--muted); background: transparent; }
.close-button svg { width: 17px; }
.modal-body { padding: 22px; }
.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.detail-image-frame { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; }
.detail-image { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; background: var(--placeholder); }
.image-preview-modal { width: min(920px, 100%); max-height: min(860px, calc(100vh - 30px)); overflow: auto; padding: 14px; border-radius: 10px; background: var(--surface); }
.image-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.image-preview-modal > img { display: block; width: 100%; max-height: calc(100vh - 130px); object-fit: contain; background: var(--placeholder); }
.image-preview-modal > p { margin: 9px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.image-gallery-stage { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.image-gallery-stage > img { display: block; width: 100%; max-height: calc(100vh - 180px); object-fit: contain; background: var(--placeholder); }
.gallery-arrow { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); }
.gallery-arrow svg { width: 17px; }
.image-gallery-thumbs { display: flex; gap: 7px; overflow-x: auto; margin-top: 12px; padding-bottom: 3px; }
.image-gallery-thumb { width: 54px; height: 42px; flex: 0 0 54px; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--placeholder); }
.image-gallery-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.image-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy h2 { margin-top: 0; }
.detail-copy .product-price { margin: 13px 0 19px; }
.detail-copy .product-price strong { font-size: 25px; }
.option-group { margin-top: 17px; }
.option-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.option-list { display: flex; gap: 7px; flex-wrap: wrap; }
.option-button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 11px; }
.option-button.active { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.modal-footer { padding: 16px 22px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.quote-box { margin-top: 17px; padding: 13px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 6px; font-size: 11px; line-height: 1.6; }
.quote-box strong { display: block; margin-bottom: 3px; }
.form-field { display: grid; gap: 7px; margin: 15px 0; }
.form-field label { color: var(--muted); font-size: 11px; font-weight: 700; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; outline: 0; color: var(--ink); background: var(--field); font-size: 12px; }
.form-field textarea { min-height: 88px; resize: vertical; }
.pricing-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; }
.form-hint { display: block; margin-top: -2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-error { margin: 14px 22px 0; color: var(--accent-deep); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; }
.form-field-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; outline: 0; color: var(--ink); background: var(--field); font-size: 12px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink); font-size: 11px; font-weight: 700; }
.checkbox-field input { width: 16px; height: 16px; accent-color: var(--blue); }
.admin-product-name { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.admin-product-name .product-select { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--blue); }
.admin-product-image-frame { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 6px; }
.admin-product-image { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--placeholder); }
.admin-product-image-frame .image-placeholder-content { gap: 0; padding: 4px; }
.admin-product-image-frame .image-placeholder-content svg { width: 17px; height: 17px; }
.admin-product-image-frame .image-placeholder-content span { display: none; }
.admin-product-name strong, .admin-product-name span { display: block; }
.admin-product-name strong { font-size: 12px; }
.admin-product-name span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.admin-product-table .admin-product-actions { display: flex; gap: 2px; }
.admin-product-table .admin-product-actions .button { min-height: 30px; width: 30px; padding: 0; }
.price-stack { display: grid; gap: 3px; color: var(--muted); font-family: "DM Sans", "Noto Sans SC", sans-serif; font-size: 11px; line-height: 1.25; }
.price-stack span:first-child { color: var(--ink); font-weight: 700; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; color: var(--muted); font-size: 11px; }
.pagination > div { display: flex; gap: 7px; }
.pagination .button { min-height: 32px; padding: 0 10px; }
.stats-filter { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 16px; margin-bottom: 18px; }
.stats-filter .form-field { min-width: 160px; margin: 0; }
.stats-filter .button { margin-bottom: 0; }
.stats-status { margin-top: 18px; }
.stats-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stats-status-item { display: grid; gap: 6px; padding: 15px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.stats-status-item span, .stats-status-item small { color: var(--muted); font-size: 11px; }
.stats-status-item strong { font-family: "DM Sans", sans-serif; font-size: 18px; }
.stats-table { margin-top: 18px; }
.import-format { margin-top: 15px; padding: 10px; border-radius: 5px; color: var(--muted); background: #f7f4ef; font-size: 11px; line-height: 1.6; }
.admin-aftersales { margin-top: 22px; }
.bulk-bar { display: flex; align-items: center; gap: 8px; margin: -7px 0 15px; padding: 10px 12px; border: 1px solid var(--accent-soft); border-radius: 7px; color: var(--accent-deep); background: var(--accent-soft); font-size: 11px; }
.bulk-bar strong { margin-right: auto; }
.history-list { display: grid; gap: 0; }
.history-item { position: relative; display: flex; gap: 12px; padding: 0 0 19px 7px; }
.history-item::before { content: ""; position: absolute; left: 12px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.history-item:last-child::before { display: none; }
.history-dot { width: 11px; height: 11px; flex: 0 0 auto; margin-top: 3px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.history-item strong, .history-item small { display: block; }
.history-item strong { font-size: 12px; }
.history-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.editor-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.editor-row input, .editor-row select { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--field); color: var(--ink); font-size: 11px; }
.item-editor-row input { flex: 1; }
.attribute-editor-row { display: grid; grid-template-columns: minmax(140px, 1fr) 108px minmax(190px, 2fr) auto auto auto; gap: 10px; align-items: end; margin-top: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.mini-check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.mini-check input { width: 14px; height: 14px; accent-color: var(--blue); }
.editor-hint { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.editor-image-preview { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding-bottom: 3px; }
.editor-image-card { display: grid; gap: 5px; flex: 0 0 78px; }
.editor-image-frame { width: 72px; height: 54px; flex: 0 0 72px; border: 1px solid var(--line); border-radius: 5px; }
.editor-image-frame .image-count { display: none; }
.editor-image { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--placeholder); }
.image-delete-button { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 4px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 10px; }
.image-delete-button:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }
.image-delete-button svg { width: 12px; height: 12px; }
.product-form-page { display: grid; gap: 16px; max-width: 1080px; }
.form-card { padding: 22px; }
.form-card .section-head { align-items: flex-start; margin-bottom: 12px; }
.form-card .section-head > div > p { margin: 4px 0 0; }
.form-card .card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-card .editor-hint { margin: 0 0 10px; }
.field-list { display: grid; gap: 10px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.image-field { display: grid; gap: 8px; }
.image-field > label { color: var(--muted); font-size: 11px; font-weight: 700; }
.variant-list { display: grid; gap: 12px; }
.variant-editor-row { display: block; margin-top: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.variant-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.variant-card-index { color: var(--muted); font-size: 11px; font-weight: 700; }
.variant-card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px 12px; }
.variant-editor-row input, .variant-editor-row select { width: 100%; min-width: 0; max-width: 100%; }
.variant-multi-options { display: flex; flex-wrap: wrap; gap: 4px; min-width: 90px; }
.variant-multi-options label { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 11px; cursor: pointer; }
.variant-multi-options label:has(input:checked) { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.variant-multi-options input { width: auto; accent-color: var(--blue); }
.notification-list { display: grid; gap: 5px; }
.notification-item { width: 100%; display: flex; gap: 10px; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.notification-item.read { opacity: .55; }
.notification-item-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent-deep); background: var(--accent-soft); border-radius: 7px; }
.notification-item-icon svg { width: 15px; }
.notification-item strong, .notification-item small, .notification-item em { display: block; }
.notification-item strong { font-size: 12px; }
.notification-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.notification-item em { margin-top: 5px; color: var(--muted); font-size: 11px; font-style: normal; }
.price-matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-matrix-head h3 { margin-bottom: 3px; }
.price-matrix-head p { margin: 0; color: var(--muted); font-size: 11px; }
.price-matrix-headings, .price-matrix-row { display: grid; grid-template-columns: 1.35fr 1.1fr 1.1fr 1.1fr .85fr .85fr .85fr .85fr .85fr .85fr 30px; gap: 6px; align-items: center; }
.price-matrix-headings { margin-top: 15px; color: var(--muted); font-size: 11px; font-weight: 700; }
.price-matrix-row { margin-top: 6px; }
.price-matrix-row input { width: 100%; min-width: 0; height: 34px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--field); color: var(--ink); font-size: 11px; outline: 0; }
.price-matrix-row .button { width: 30px; height: 30px; min-height: 30px; padding: 0; }
.product-specs { display: grid; gap: 7px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.product-specs span { display: flex; gap: 10px; color: var(--muted); font-size: 11px; }
.product-specs b { min-width: 52px; color: var(--ink); }
.timeline { position: relative; display: grid; gap: 0; margin: 8px 0 24px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.timeline-item { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 13px; padding-bottom: 20px; }
.timeline-dot { width: 13px; height: 13px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.timeline-item.muted .timeline-dot { background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.timeline-item strong { display: block; font-size: 12px; }
.timeline-item small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }

.mobile-nav { display: none; }
.mobile-nav.admin-mobile-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .side-rail { width: 196px; }
  .main-content { width: calc(100% - 196px); margin-left: 196px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid.density-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-grid.density-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .auth-root { padding: 0; place-items: stretch; }
  .auth-layout { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .auth-intro { min-height: 270px; padding: 25px; }
  .auth-copy { margin-top: 55px; }
  .auth-copy h1 { max-width: 240px; margin-bottom: 8px; font-size: 27px; }
  .auth-copy p { display: none; }
  .auth-notes { left: 25px; right: 25px; bottom: 22px; }
  .auth-form-wrap { justify-content: start; padding: 33px 25px; }
  .auth-form-wrap h2 { font-size: 22px; }
  .side-rail { display: none; }
  .public-catalog { padding: 18px 16px 36px; }
  .public-header { padding-bottom: 18px; }
  .public-header .button { padding: 0 10px; }
  .public-intro { align-items: start; display: block; padding: 28px 0 22px; }
  .public-count { display: block; margin-top: 13px; }
  .public-tools { display: block; }
  .public-tools .search-box { width: 100%; margin-bottom: 13px; }
  .public-tools .density-toggle { margin-top: 12px; }
  .public-grid { grid-template-columns: 1fr; gap: 12px; }
  .public-grid.density-compact { grid-template-columns: 1fr; gap: 12px; }
  .public-product-image-frame { aspect-ratio: 4 / 3; }
  .main-content { width: 100%; margin-left: 0; padding-bottom: 70px; }
  .topbar { height: 70px; padding: 0 18px; }
  .account-chip span:not(.avatar) { display: none; }
  .view-container { padding: 26px 16px 40px; }
  .page-heading { display: block; margin-bottom: 22px; }
  .page-heading-actions { margin-top: 14px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-table th:nth-child(3), .order-table td:nth-child(3) { display: none; }
  .order-table td, .order-table th { padding: 12px 9px; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 10; height: 67px; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); background: rgba(255,253,249,.96); border-top: 1px solid var(--line); }
  .mobile-nav .nav-item { padding: 7px 2px; display: grid; gap: 3px; place-items: center; text-align: center; font-size: 11px; border-radius: 7px; }
  .mobile-nav .nav-item svg { width: 18px; height: 18px; }
  .mobile-nav .nav-count { position: absolute; margin: -23px 0 0 18px; min-width: 16px; height: 16px; font-size: 11px; }
  .detail-layout, .profile-grid { grid-template-columns: 1fr; }
  .order-detail-heading-main { align-items: start; flex-direction: column; }
  .order-detail-heading-main > .status { align-self: flex-start; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .order-detail-section { padding: 16px; }
  .order-detail-item { grid-template-columns: 76px minmax(0, 1fr); gap: 11px; }
  .order-detail-media, .order-detail-image-frame { width: 76px; }
  .order-detail-item h3 { font-size: 12px; }
  .order-detail-price-row { gap: 10px 14px; }
  .order-detail-summary { justify-content: space-between; gap: 10px; }
  .order-overview-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-detail-actions { justify-content: stretch; flex-wrap: wrap; }
  .order-detail-actions .button { flex: 1 1 auto; }
  .order-change-request { align-items: stretch; flex-direction: column; }
  .order-change-request-actions { justify-content: stretch; }
  .order-change-request-actions .button { flex: 1 1 auto; }
  .customer-directory-row { grid-template-columns: minmax(0, 1fr) 30px; gap: 9px; padding: 14px 16px; }
  .customer-directory-address, .customer-directory-note { grid-column: 1 / -1; padding-left: 44px; }
  .customer-pagination { padding: 13px 16px; }
  .customer-pagination .button { padding: 0 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .pricing-settings-grid { grid-template-columns: 1fr; }
  .price-matrix-headings { display: none; }
  .price-matrix-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px 0; border-bottom: 1px solid var(--line); }
  .price-matrix-row .button { justify-self: start; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .admin-order-filters { grid-template-columns: 1fr 1fr; }
  .admin-order-filters .search-box { grid-column: 1 / -1; }
  .detail-image-frame { aspect-ratio: 4 / 3; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .modal { max-height: calc(100vh - 20px); border-radius: 13px 13px 0 0; }
  .attribute-editor-row { grid-template-columns: 1fr 1fr; }
  .form-card { padding: 18px 16px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .modal-footer { position: sticky; bottom: 0; background: var(--surface); }
  .quote-form-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
  .cart-submit-hint { width: 100%; margin: 0 0 4px; }
  .quote-form-line > div { grid-column: 1 / -1; }
  .quote-form-line label { width: auto; }
  .shipping-item-row { grid-template-columns: 1fr 1fr; }
  .shipping-item-row > div { grid-column: 1 / -1; }
  .search-box { min-width: 100%; }
  .admin-product-filters { grid-template-columns: 1fr 1fr; }
  .admin-product-filters .search-box { grid-column: 1 / -1; }
  .admin-product-button-group { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* Production Ledger final override */
:root { --paper:#f5f1e8; --surface:#fffdf8; --surface-strong:#fff; --ink:#1f272d; --ink-soft:#34424a; --muted:#657078; --line:#d9dfdc; --accent:#c65e43; --accent-deep:#954432; --accent-soft:#f3e0d8; --blue:#2d5b85; --blue-soft:#e3edf0; --sage:#6d806f; --sage-soft:#e4ede6; --gold:#c5a253; --gold-soft:#f4ecd7; --field:#fffefa; --placeholder:#eeeae2; --on-ink:#f8f5ed; --on-ink-muted:#aebdc0; --on-dark:#fff; --rail-text:#b8c1c1; --rail-label:#91a0a4; --rail-text-strong:#f4f6f3; --panel:#365666; --panel-soft:#d6e2e2; --panel-muted:#c9e0e2; --brand-gold:#e7c26d; --blue-strong:#244b6d; --line-strong:#9eb2b5; --row-alt:#fbf8f3; --th-bg:#edf0ed; --skeleton:#ece7dd; --skeleton-hi:#f6f2ea; --gold-text:#6f5417; --shadow:0 12px 28px rgba(31,39,45,.08); --radius:10px; }
html, body { background:var(--paper); }
.side-rail { width:248px; padding:26px 16px 20px; background:var(--ink); border-right:0; }
.main-content { width:calc(100% - 248px); margin-left:248px; }
.brand-mark { color:var(--on-ink); }
.brand-mark small { color:var(--on-ink-muted); }
.brand-icon { color:var(--ink); background:var(--brand-gold); border-radius:8px; }
.rail-label { margin:48px 12px 13px; color:var(--rail-label); }
.nav-item { color:var(--rail-text); border-radius:6px; font-size:13px; }
.nav-item:hover { color:var(--on-dark); background:rgba(255,255,255,.08); }
.nav-item.active { color:var(--on-dark); background:var(--blue); box-shadow:none; }
.rail-footer { border-top-color:rgba(255,255,255,.14); }
.account-mini { color:var(--rail-text-strong); }
.account-mini small { color:var(--on-ink-muted); }
.topbar { height:72px; background:rgba(245,241,232,.94); border-bottom-color:var(--line); }
.top-actions { gap:10px; }
.icon-button { width:36px; height:36px; border-color:var(--line); background:var(--surface); border-radius:7px; }
.account-chip { padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.view-container { max-width:1440px; padding-top:32px; }
.page-heading { margin-bottom:24px; }
.page-heading .eyebrow, .public-intro .eyebrow { display:none; }
.page-heading h1 { margin-bottom:7px; font-size:clamp(25px,2.7vw,34px); letter-spacing:-.03em; }
.lede { color:var(--muted); font-size:12px; line-height:1.65; }
.button { min-height:36px; border-radius:6px; padding:0 12px; font-size:11px; }
.button-primary { background:var(--blue); }
.button-primary:hover { background:var(--blue-strong); }
.button-light { border-color:var(--line); background:var(--surface); }
.surface { border-color:var(--line); border-radius:10px; background:var(--surface); box-shadow:0 5px 16px rgba(31,39,45,.035); }
.search-box input, .select-box { border-color:var(--line); border-radius:6px; background:var(--surface); }
.admin-product-filters, .admin-order-filters { border-color:var(--line); border-radius:8px; background:rgba(255,253,248,.62); }
.admin-product-button-group { min-width:max-content; }
.admin-product-button-group .button { min-height:34px; flex:0 0 auto; white-space:nowrap; }
.metric { border-color:var(--line); border-radius:8px; background:var(--surface); box-shadow:none; }
.product-card, .public-product-card, .order-card { border-color:var(--line); border-radius:8px; background:var(--surface); box-shadow:none; }
.product-card:hover, .public-product-card:hover, .order-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow); }
.order-table th { color:var(--muted); background:var(--th-bg); }
.order-table td, .order-table th { border-color:var(--line); }
.modal { border-color:var(--line); border-radius:10px; box-shadow:0 24px 70px rgba(31,39,45,.18); }
.modal-header, .modal-footer { border-color:var(--line); }
.mobile-nav { background:rgba(255,253,248,.97); border-top-color:var(--line); }

@media (max-width:700px) {
  .side-rail { width:0; padding:0; }
  .main-content { width:100%; margin-left:0; }
  .topbar { height:64px; padding:0 16px; }
  .view-container { padding:24px 16px 88px; }
  .page-heading { gap:14px; }
  .page-heading-actions { width:100%; }
  .admin-product-button-group { min-width:0; width:100%; flex-wrap:wrap; }
  .supplier-form-page { padding: 18px 16px; }
  .supplier-form-intro { align-items: flex-start; }
  .supplier-form-actions { flex-direction: column-reverse; }
  .supplier-form-actions .button { width: 100%; }
}

/* Legibility floor for shared identity metadata */
.brand-mark small { font-size: 11px; }
.account-mini small { font-size: 11px; }

/* H5 adaptation */
html, body { overflow-x: hidden; }
body { padding-bottom: env(safe-area-inset-bottom); }
.surface:has(> .order-table), .surface:has(> .product-admin-table) { overflow-x: auto; }
.order-table { min-width: 680px; }
.modal-backdrop { overscroll-behavior: contain; }
.modal { max-height: min(760px, 100dvh); }
.modal-body { overscroll-behavior: contain; }

@media (pointer: coarse) {
  .button, .icon-button, .close-button, .option-button, .category, .density-button, .nav-item { min-height: 44px; }
  .icon-button, .close-button { width: 44px; height: 44px; }
  .button { padding: 0 16px; }
  .option-button, .category { padding: 10px 14px; }
  .cart-item-select, .cart-group-select input { width: 20px; height: 20px; }
}

@media (max-width: 700px) {
  .modal { width: 100%; max-height: 100dvh; }
  .modal-backdrop { padding: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)); }
  .order-table { min-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .skeleton { animation: none; }
  .button, .toast, .nav-item, .category, .tab-button, .option-button, .modal, .surface { transition-duration: .12s !important; }
  .image-preview:hover img { transform: none; }
  .button:hover, .product-card:hover, .public-product-card:hover, .order-card:hover { transform: none; }
}

/* Public catalog login access */
.public-header { position: sticky; top: env(safe-area-inset-top); z-index: 12; gap: 12px; background: var(--paper); }
.public-header .brand-mark { min-width: 0; }
.public-header .button { flex: 0 0 auto; min-width: 108px; white-space: nowrap; }
@media (max-width: 700px) {
  .public-header { top: 0; padding-top: max(8px, env(safe-area-inset-top)); }
  .public-header { padding-right: 132px; }
  .public-header .brand-mark { gap: 8px; font-size: 12px; }
  .public-header .brand-mark small { display: none; }
  .public-header .brand-icon { width: 34px; height: 34px; }
  .public-header .button { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 16px; z-index: 30; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; min-width: 106px; padding: 0 10px; }
}

@media (max-width: 700px) {
  .supplier-table th:nth-child(3), .supplier-table td:nth-child(3) { display: table-cell; }
  .supplier-table td, .supplier-table th { padding: 12px 11px; }
}

/* Hardening: long content, honest error states, resilient controls */
[hidden] { display: none !important; }

.toast { max-width: min(90vw, 460px); text-align: center; overflow-wrap: anywhere; }

.product-name, .product-desc, .public-product-body h2, .public-product-body p,
.order-card-body strong, .order-card-body small,
.metric-value, .metric-trend, .detail-row strong,
.supplier-name-cell strong, .notification-item strong, .notification-item small,
.history-item strong, .order-info-grid strong, .order-detail-specs span,
.price-stack span, .customer-directory-main h2, .customer-directory-main p,
.order-table td, .order-table th, .quote-box, .lede { overflow-wrap: anywhere; }

.product-desc, .public-product-body p { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }

.order-card-body > div, .admin-product-name > div, .detail-row, .metric,
.notification-item > span:last-child, .history-item > div,
.supplier-name-cell > div, .customer-directory-main > div { min-width: 0; }

.status { white-space: nowrap; }

.form-field input, .form-field textarea, .form-field select { min-width: 0; max-width: 100%; }
.form-field textarea { overflow-wrap: anywhere; }

.order-thumb, .cart-item > img { background: var(--placeholder); }
img.image-load-failed { opacity: 0; }

.public-header .brand-mark { color: var(--ink); }
.public-header .brand-mark small { color: #55616a; }

.empty-state .button, .error-state .button { margin-top: 14px; }
.error-state { border-style: solid; border-color: var(--line); background: var(--surface); }
.error-state svg { color: var(--accent-deep); }

/* Hardening: protected-action dialog and keyboard-operable records */
.confirm-modal { width: min(440px, 100%); }
.confirm-modal .modal-header { border-bottom: 0; }
.confirm-modal .modal-header h2 { font-size: 16px; }
.confirm-modal .modal-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }

.order-card[role="button"] { cursor: pointer; }
.order-card[role="button"]:focus-visible,
.work-item:focus-visible { outline: 3px solid rgba(68, 109, 131, .28); outline-offset: 2px; }

/* Hardening: first-paint and loading states */
.boot-screen { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; }
.boot-screen .brand-mark { color: var(--ink); }
.boot-screen .brand-mark small { color: var(--muted); }
.boot-screen p { margin: 0; color: var(--muted); font-size: 12px; }

.skeleton { background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-hi) 37%, var(--skeleton) 63%); background-size: 400% 100%; border-radius: 5px; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton-row { height: 46px; margin-bottom: 10px; }
.skeleton-title { width: min(320px, 60%); height: 30px; margin-bottom: 12px; }
.skeleton-line { width: min(420px, 80%); height: 14px; }
.skeleton-cell { width: 100%; height: 14px; }
.skeleton-card { aspect-ratio: 4 / 3; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.skeleton-stack { display: grid; }
.skeleton-surface { padding: 16px; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 700px) { .skeleton-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Storage settings */
.storage-settings-card { padding: 22px; }
.storage-status-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 22px; }
.storage-status-banner > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.storage-status-banner svg { color: var(--accent-deep); flex: 0 0 auto; }
.storage-status-banner strong, .storage-status-banner small { display: block; overflow-wrap: anywhere; }
.storage-status-banner small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.storage-status-banner.is-oss { background: rgba(78, 128, 98, .06); border-color: rgba(78, 128, 98, .24); }
.storage-status-banner.is-local { background: var(--surface-soft); }
.storage-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.storage-settings-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.6; }
.storage-settings-note svg { flex: 0 0 auto; color: var(--accent-deep); margin-top: 1px; }
.storage-settings-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 700px) {
  .storage-settings-card { padding: 16px; }
  .storage-status-banner { align-items: flex-start; padding: 14px; }
  .storage-form-grid { grid-template-columns: 1fr; }
  .storage-settings-actions { justify-content: stretch; }
  .storage-settings-actions .button { flex: 1 1 100%; }
}