.purchase-page {
  --purchase-ink: var(--ink, #102134);
  --purchase-muted: var(--muted, #637386);
  --purchase-accent: var(--accent, #f26434);
  --purchase-line: var(--line, #e2e7ed);
  background: #f4f6f8;
  color: var(--purchase-ink);
  min-height: 70vh;
  padding-bottom: 72px;
}

.purchase-page :where(h1, h2, h3, p, ol, ul, dl, dd) { margin: 0; }
.purchase-page :where(a) { text-decoration: none; color: inherit; }
.purchase-page :where(button, input, select, textarea) { font: inherit; }
.purchase-page :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--purchase-accent); outline-offset: 3px; }
.purchase-page :where(button:disabled) { opacity: .5; cursor: not-allowed; }

.purchase-wrap { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.purchase-breadcrumb { display: flex; gap: 10px; align-items: center; padding: 22px 0; color: var(--purchase-muted); font-size: 13px; }
.purchase-breadcrumb span { color: var(--purchase-ink); font-weight: 600; }
.purchase-breadcrumb a:hover { color: var(--purchase-accent); }

.purchase-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 34px 36px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: linear-gradient(110deg, #102134, #172f49 72%, #203e5b);
  color: #fff;
}

.purchase-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 37%;
  opacity: .33;
  background-image: linear-gradient(#86a3bc36 1px, transparent 1px), linear-gradient(90deg, #86a3bc36 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, transparent, #000 44%);
}

.purchase-kicker { display: flex; align-items: center; gap: 8px; color: #aebfce; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.purchase-kicker i { width: 16px; height: 2px; background: var(--purchase-accent); }
.purchase-banner h1, .purchase-publish-head h1 { margin-top: 8px; font-size: clamp(30px, 4vw, 42px); font-weight: 760; letter-spacing: -.045em; line-height: 1.16; }
.purchase-banner p { margin-top: 9px; color: #c0d0df; font-size: 14px; line-height: 1.6; }
.purchase-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 41px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--purchase-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.purchase-btn-primary { background: var(--purchase-accent); color: #182332; }
.purchase-btn-primary:hover:not(:disabled) { background: #ff8055; }
.purchase-btn-outline { background: #fff; border-color: #dbe1e8; }
.purchase-btn-outline:hover:not(:disabled) { background: #fff6f1; border-color: #f5baaa; }

.purchase-board-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 275px); gap: 22px; align-items: start; }
.purchase-board, .purchase-panel, .purchase-side-card { border: 1px solid var(--purchase-line); border-radius: 10px; background: #fff; }
.purchase-board { min-width: 0; overflow: hidden; }
.purchase-board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 0; }
.purchase-board h2, .purchase-detail-section h2, .purchase-form-section h2 { font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.purchase-board-sub { margin-top: 4px !important; color: var(--purchase-muted); font-size: 12px; }
.purchase-count { flex: 0 0 auto; color: var(--purchase-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.purchase-filters { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(104px, 140px) minmax(104px, 130px); gap: 10px; padding: 18px 22px 12px; }
.purchase-search { display: flex; gap: 8px; align-items: center; padding-inline: 11px; border: 1px solid #dbe2ea; border-radius: 6px; color: var(--purchase-muted); }
.purchase-search:focus-within { border-color: var(--purchase-accent); }
.purchase-search svg { flex-shrink: 0; }
.purchase-search input { width: 100%; min-width: 0; height: 39px; border: 0; outline: none !important; color: var(--purchase-ink); background: transparent; font-size: 13px; }
.purchase-filters select { width: 100%; min-width: 0; padding: 0 11px; border: 1px solid #dbe2ea; border-radius: 6px; color: var(--purchase-ink); background: #fff; font-size: 13px; }
.purchase-tabs { display: flex; gap: 5px; padding: 0 22px 13px; }
.purchase-tab { padding: 7px 11px; border: 0; border-radius: 4px; color: var(--purchase-muted); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.purchase-tab:hover, .purchase-tab.is-active { color: #9f3d20; background: #fff0e9; }

.purchase-list-head, .purchase-request-row { display: grid; grid-template-columns: minmax(180px, 1.8fr) minmax(64px, .6fr) minmax(76px, .72fr) minmax(70px, .64fr) minmax(92px, .7fr); gap: 12px; align-items: center; padding-inline: 22px; }
.purchase-list-head { padding-block: 11px; border-block: 1px solid #e9edf1; color: #566779; background: #f6f8fa; font-size: 12px; font-weight: 700; }
.purchase-list-head span:last-child { text-align: right; }
.purchase-request-row { min-height: 108px; padding-block: 14px; border-bottom: 1px solid #eef1f4; }
.purchase-request-row:hover { background: #fbfcfd; }
.purchase-request-row:last-child { border-bottom: 0; }
.purchase-row-title { display: block; width: fit-content; color: var(--purchase-ink); font-size: 15px; font-weight: 750; line-height: 1.4; }
.purchase-row-title:hover { color: #b04524; }
.purchase-row-model { margin-top: 4px; color: var(--purchase-muted); font-size: 11px; line-height: 1.45; }
.purchase-row-model span, .purchase-detail-head p span { margin: 0 3px; }
.purchase-row-cell { font-size: 13px; }
.purchase-row-muted { color: var(--purchase-muted); }
.purchase-mobile-label { display: none; }
.purchase-row-action { display: grid; gap: 6px; justify-items: end; }
.purchase-row-action span { color: var(--purchase-muted); font-size: 11px; }
.purchase-row-action a { display: inline-flex; gap: 2px; align-items: center; color: #a54021; font-size: 12px; font-weight: 700; }
.purchase-row-action a:hover { text-decoration: underline; }
.purchase-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.purchase-tag { display: inline-flex; gap: 6px; align-items: center; padding: 2px 6px; border-radius: 3px; background: #edf1f6; color: #516477; font-size: 10px; line-height: 1.4; font-weight: 650; }
.purchase-tag-urgent { background: #fff0e8; color: #a54021; }
.purchase-tag-open { color: #176c55; background: #e9f7f1; }
.purchase-tag-open i { width: 5px; height: 5px; border-radius: 100%; background: #299979; }
.purchase-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; color: var(--purchase-muted); text-align: center; }
.purchase-empty strong { color: var(--purchase-ink); font-size: 17px; }
.purchase-empty p { font-size: 13px; }

.purchase-side { display: grid; gap: 16px; }
.purchase-side-card { padding: 21px; }
.purchase-side-icon, .purchase-upload-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 7px; color: #a94021; background: #fff0e9; }
.purchase-side-card h2 { font-size: 17px; font-weight: 760; letter-spacing: -.015em; }
.purchase-side-icon + h2 { margin-top: 13px; }
.purchase-side-card p { margin-top: 8px; color: var(--purchase-muted); font-size: 13px; line-height: 1.65; }
.purchase-side-card p + a { margin-top: 15px; width: 100%; }
.purchase-process { display: grid; gap: 15px; padding: 17px 0 0; list-style: none; }
.purchase-process li { display: flex; gap: 9px; align-items: flex-start; }
.purchase-process li > span, .purchase-form-section-head > span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 4px; color: #a54021; background: #fff1ea; font-size: 11px; font-weight: 800; }
.purchase-process strong { display: block; font-size: 13px; }
.purchase-process small { display: block; margin-top: 3px; color: var(--purchase-muted); font-size: 11px; line-height: 1.45; }

.purchase-detail-head { display: flex; gap: 18px; justify-content: space-between; align-items: center; padding: 26px 28px; margin-bottom: 20px; }
.purchase-detail-head .purchase-tags { margin-top: 0; }
.purchase-detail-head .purchase-tag { padding: 4px 8px; font-size: 11px; }
.purchase-detail-head h1 { margin-top: 11px; font-size: clamp(25px, 3.6vw, 35px); letter-spacing: -.04em; line-height: 1.2; }
.purchase-detail-head p { margin-top: 8px; color: var(--purchase-muted); font-size: 13px; }
.purchase-detail-main { display: grid; gap: 16px; min-width: 0; }
.purchase-detail-section { padding: 22px 25px; }
.purchase-detail-section h2 { margin-bottom: 16px; }
.purchase-detail-note { white-space: pre-line; color: #46596c; font-size: 14px; line-height: 1.8; }
.purchase-item-scroll { overflow-x: auto; }
.purchase-item-table { width: 100%; min-width: 375px; border-collapse: collapse; text-align: left; font-size: 13px; }
.purchase-item-table th { padding: 11px 13px; color: #4c5f73; background: #f3f6f9; font-size: 12px; font-weight: 700; }
.purchase-item-table td { padding: 13px; border-bottom: 1px solid #ebeff3; }
.purchase-item-table td:first-child { font-weight: 680; }
.purchase-detail-facts { display: grid; gap: 13px; padding-block: 19px; }
.purchase-detail-facts div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; }
.purchase-detail-facts dt { color: var(--purchase-muted); }
.purchase-detail-facts dd { font-weight: 700; text-align: right; }
.purchase-quote-card > button { width: 100%; }
.purchase-quote-card .purchase-demo-caption { text-align: center; font-size: 11px; }
.purchase-file-chip { display: flex; gap: 8px; align-items: center; width: fit-content; max-width: 100%; margin-top: 14px; padding: 8px 10px; border-radius: 4px; color: #506477; background: #f0f3f6; font-size: 12px; overflow-wrap: anywhere; }
.purchase-file-chip svg { flex-shrink: 0; }
.purchase-file-chip small { color: var(--purchase-muted); }

.purchase-publish-head { margin: 5px 0 22px; }
.purchase-publish-head .purchase-kicker { color: var(--purchase-muted); }
.purchase-publish-head p { margin-top: 9px; color: var(--purchase-muted); font-size: 14px; }
.purchase-form { min-width: 0; overflow: hidden; }
.purchase-form-section { padding: 23px 25px; border-bottom: 1px solid #e9edf1; }
.purchase-form-section-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px; }
.purchase-form-section-head > span { margin-top: 1px; }
.purchase-form-section-head p { margin-top: 3px; color: var(--purchase-muted); font-size: 12px; }
.purchase-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.purchase-fields label, .purchase-description-label { display: block; min-width: 0; color: var(--purchase-ink); font-size: 13px; font-weight: 700; }
.purchase-fields label > span { color: #b74928; }
.purchase-field-wide { grid-column: 1 / -1; }
.purchase-form :where(input:not([type="file"]), textarea, select), .purchase-dialog :where(input, textarea) { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #dbe2ea; border-radius: 5px; box-sizing: border-box; color: var(--purchase-ink); background: #fff; font-size: 13px; font-weight: 400; }
.purchase-form label :where(input, textarea, select), .purchase-dialog label :where(input, textarea) { display: block; margin-top: 6px; }
.purchase-form textarea, .purchase-dialog textarea { resize: vertical; }
.purchase-material-head, .purchase-material-row { display: grid; grid-template-columns: 1.65fr 1.3fr .68fr .55fr 32px; gap: 8px; align-items: center; }
.purchase-material-head { margin-bottom: 7px; padding-inline: 2px; color: #526578; font-size: 12px; font-weight: 600; }
.purchase-material-row + .purchase-material-row { margin-top: 8px; }
.purchase-icon-button { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid #e1e6ed; border-radius: 5px; color: #657789; background: #fff; cursor: pointer; }
.purchase-icon-button:hover:not(:disabled) { color: #ad4121; background: #fff2eb; }
.purchase-add-item { min-height: 34px; margin-top: 11px; }
.purchase-upload { display: flex; gap: 13px; align-items: center; padding: 15px; margin-top: 17px; border: 1px dashed #c9d4df; border-radius: 7px; background: #f8fafb; }
.purchase-upload.is-featured { border-color: #ec9f86; background: #fff8f4; }
.purchase-upload-icon { flex: 0 0 auto; }
.purchase-upload-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.purchase-upload-info strong { font-size: 14px; }
.purchase-upload-info span { color: var(--purchase-muted); font-size: 12px; }
.purchase-upload-info .purchase-file-name { color: #217656; font-weight: 650; overflow-wrap: anywhere; }
.purchase-upload-info .purchase-file-name:empty { display: none; }
.purchase-template { display: inline-flex; gap: 6px; align-items: center; margin-top: 9px; color: #a54021 !important; font-size: 12px; font-weight: 650; }
.purchase-template:hover { text-decoration: underline; }
.purchase-form-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 18px 25px; }
.purchase-form-actions p { color: var(--purchase-muted); font-size: 12px; }
.purchase-tip-list { display: grid; gap: 13px; padding: 14px 0; list-style: none; }
.purchase-tip-list li { display: grid; gap: 3px; padding-left: 10px; border-left: 2px solid #f0a890; }
.purchase-tip-list strong { font-size: 13px; }
.purchase-tip-list span { color: var(--purchase-muted); font-size: 12px; }
.purchase-tip-list + a { display: flex; gap: 4px; align-items: center; color: #a54021; font-size: 12px; font-weight: 650; }

.purchase-dialog { position: fixed; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid #dce3ea; border-radius: 10px; box-shadow: 0 18px 65px #10213435; background: #fff; color: var(--purchase-ink); }
.purchase-dialog::backdrop { background: #10213491; }
.purchase-dialog-head { display: flex; justify-content: space-between; gap: 13px; align-items: flex-start; padding: 21px; border-bottom: 1px solid #edf0f3; }
.purchase-dialog-head h2 { font-size: 21px; }
.purchase-dialog-head p { margin-top: 4px; color: var(--purchase-muted); font-size: 13px; }
.purchase-dialog-fields, .purchase-preview-content { padding: 18px 21px; }
.purchase-preview-content h3 { font-size: 17px; }
.purchase-preview-content p { margin: 4px 0 13px; color: var(--purchase-muted); font-size: 13px; }
.purchase-dialog-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 21px; border-top: 1px solid #edf0f3; }
.purchase-dialog-actions span { color: var(--purchase-muted); font-size: 12px; }

@media (max-width: 1100px) {
  .purchase-board-layout { grid-template-columns: minmax(0, 1fr) minmax(190px, 224px); gap: 16px; }
  .purchase-side-card { padding: 16px; }
  .purchase-list-head, .purchase-request-row { grid-template-columns: minmax(144px, 1.8fr) minmax(55px, .63fr) minmax(59px, .68fr) minmax(57px, .6fr) minmax(76px, .7fr); gap: 8px; padding-inline: 16px; }
  .purchase-board-head, .purchase-filters, .purchase-tabs { padding-inline: 16px; }
}

@media (max-width: 900px) {
  .purchase-board-layout { grid-template-columns: minmax(0, 1fr); }
  .purchase-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-publish-layout .purchase-side, .purchase-detail-layout .purchase-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .purchase-page { padding-bottom: 46px; }
  .purchase-wrap { width: calc(100% - 24px); }
  .purchase-breadcrumb { padding: 15px 0; font-size: 12px; }
  .purchase-banner { flex-direction: column; align-items: flex-start; gap: 15px; padding: 23px 17px; margin-bottom: 14px; }
  .purchase-banner p { font-size: 13px; }
  .purchase-board-head { padding: 16px 13px 0; }
  .purchase-board h2 { font-size: 18px; }
  .purchase-board-sub { display: none; }
  .purchase-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }
  .purchase-search { grid-column: 1 / -1; }
  .purchase-filters select { min-height: 36px; }
  .purchase-tabs { padding: 0 13px 9px; border-bottom: 1px solid #e9edf1; }
  .purchase-list-head { display: none; }
  .purchase-request-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 4px; padding: 13px; }
  .purchase-row-subject, .purchase-row-action { grid-column: 1 / -1; }
  .purchase-row-action { display: flex; justify-content: space-between; align-items: center; }
  .purchase-row-title { font-size: 14px; }
  .purchase-row-cell { font-size: 12px; }
  .purchase-mobile-label { display: block; color: var(--purchase-muted); font-size: 10px; }
  .purchase-side { grid-template-columns: minmax(0, 1fr); }
  .purchase-detail-head { flex-direction: column; align-items: flex-start; gap: 13px; padding: 16px; }
  .purchase-detail-section, .purchase-form-section { padding: 16px; }
  .purchase-material-head { display: none; }
  .purchase-material-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 31px; gap: 6px; padding: 9px; border: 1px solid #edf0f3; border-radius: 5px; background: #f8fafb; }
  .purchase-material-row input[name="itemName"], .purchase-material-row input[name="itemModel"] { grid-column: span 1; }
  .purchase-material-row input[name="itemQty"] { grid-column: 1; }
  .purchase-remove-item { grid-column: 3; grid-row: 1; }
  .purchase-upload { flex-wrap: wrap; padding: 11px; }
  .purchase-upload .purchase-choose-file { width: 100%; }
  .purchase-form-actions { flex-direction: column-reverse; align-items: stretch; padding: 16px; }
}