:root {
  --bg: #09100f;
  --panel: #101a18;
  --panel-2: #15221f;
  --line: #2a3b36;
  --text: #edf2ed;
  --muted: #a9b9b2;
  --green: #a7dc37;
  --amber: #f5be49;
  --red: #f06966;
  --blue: #70c7e5;
  --focus: #f4e6a2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--line); background: linear-gradient(180deg, #0f1916, #0a1210); padding: 22px 14px; display: flex; flex-direction: column; gap: 20px; }
.brand { display: flex; gap: 10px; align-items: center; padding: 0 8px; font-weight: 800; letter-spacing: .03em; }
.brand-mark { display: grid; place-items: center; inline-size: 31px; block-size: 31px; border-radius: 8px; background: var(--green); color: #142009; font-size: 15px; }
.brand small { display: block; color: var(--muted); font-weight: 600; letter-spacing: .12em; font-size: 10px; }
.nav { display: grid; gap: 4px; }
.nav button { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 10px 12px; border-radius: 7px; font-weight: 650; }
.nav button:hover, .nav button.active { color: var(--text); background: #1a2b26; }
.nav button.active { box-shadow: inset 3px 0 var(--green); }
.side-note { margin-top: auto; color: var(--muted); font-size: 12px; line-height: 1.45; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }

.main { min-width: 0; }
.topbar { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: rgba(15, 25, 22, .84); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); }
.topbar h1 { font-size: 18px; margin: 0; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.user-select, .input, .select, textarea { border: 1px solid var(--line); background: #0b1412; color: var(--text); padding: 8px 10px; border-radius: 6px; }
.content { width: 100%; padding: 25px 28px 42px; max-width: none; }

.hero { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.hero h2 { margin: 0 0 5px; font-size: 26px; }
.hero p { margin: 0; color: var(--muted); }
.compact-hero { align-items: start; margin-bottom: 12px; }.compact-hero h3 { margin: 0 0 5px; }
.grid { display: grid; gap: 14px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.card { background: linear-gradient(145deg, var(--panel), #0c1513); border: 1px solid var(--line); border-radius: 10px; padding: 17px; }
.login-card { width: min(440px, 100%); margin: 12vh auto 0; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.metric { margin-top: 8px; font-size: 27px; font-weight: 800; }
.metric.positive { color: var(--green); }.metric.warning { color: var(--amber); }.metric.danger { color: var(--red); }
.card h3 { margin: 0 0 13px; font-size: 14px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.input.search { min-width: min(330px, 100%); }
.catalog-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin: -2px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #101c18; }
.catalog-filter-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px; }
.catalog-status-filters { display: flex; flex-wrap: wrap; gap: 5px; }.catalog-status-filter.active { background: #29483b; border-color: var(--green); color: #effbd3; }.catalog-status-filter span { color: var(--muted); font-variant-numeric: tabular-nums; }
.catalog-filter-select { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; }.catalog-filter-select .select { min-width: 170px; padding: 6px 8px; }
.catalog-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px; align-items: center; margin: -2px 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #101c18; }
.catalog-pagination-controls { display: flex; align-items: center; gap: 7px; }.catalog-pagination-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }.catalog-page-input { width: 72px; min-width: 0; padding: 5px 7px; }
.button { border: 1px solid var(--line); background: #1a2a26; color: var(--text); padding: 8px 11px; border-radius: 6px; font-weight: 700; }
.button:hover { background: #263b34; }.button.primary { background: var(--green); color: #15200e; border-color: var(--green); }.button.warning { background: #4b3916; border-color: #745722; }.button.danger { background: #48221f; border-color: #77342f; }.button:disabled { opacity: .45; cursor: not-allowed; }
.button.tiny { padding: 5px 7px; font-size: 11px; white-space: nowrap; }
.split { flex: 1; }

.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 13px; }
th { color: #b9c7c1; background: #14211d; position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
th, td { padding: 10px 11px; border-bottom: 1px solid #20312c; white-space: nowrap; vertical-align: middle; }
th small { display: block; margin-top: 3px; color: #76867f; font-size: 9px; text-transform: none; letter-spacing: 0; }
tbody tr:hover { background: #172621; }.text-wrap { white-space: normal; min-width: 170px; }
.cell-input { max-width: 170px; border: 1px solid transparent; color: var(--text); background: transparent; padding: 5px; border-radius: 4px; }
.cell-input:hover, .cell-input:focus { outline: 0; border-color: var(--green); background: #0b1412; }
.catalog-table { table-layout: fixed; min-width: 900px; }
.catalog-table th, .catalog-table td { overflow: hidden; text-overflow: ellipsis; }
.catalog-table .cell-input { width: 100%; max-width: none; }
.catalog-column-header { position: sticky; cursor: grab; padding-right: 18px; user-select: none; }
.catalog-column-header:active, .catalog-column-header.column-dragging { cursor: grabbing; opacity: .55; }
.catalog-column-header.column-drop-target { box-shadow: inset 3px 0 0 var(--green); }
.column-heading-content { display: block; overflow: hidden; text-overflow: ellipsis; }
.column-resize-handle { position: absolute; top: 0; right: -4px; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; z-index: 3; }
.column-resize-handle::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 4px; width: 1px; background: transparent; }
.catalog-column-header:hover .column-resize-handle::after, .column-resize-handle:focus::after { background: var(--green); }
.column-resize-handle:focus { outline: 0; }
.boolean-cell { text-align: center; }
.cell-checkbox { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--green); vertical-align: middle; cursor: pointer; }
.cell-checkbox:disabled { cursor: not-allowed; opacity: .5; }
.boolean-field { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.tag { display: inline-flex; align-items: center; border-radius: 20px; padding: 3px 8px; font-size: 11px; font-weight: 750; border: 1px solid var(--line); }.tag.good { color: #c9ed7d; background: #22331e; }.tag.warn { color: #ffd37b; background: #463717; }.tag.bad { color: #ffaaa3; background: #4d2724; }.tag.info { color: #9cdff6; background: #163440; }
.muted { color: var(--muted); }.numeric { font-variant-numeric: tabular-nums; text-align: right; }

.two-col { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.supplier-web-profiles-card { margin-top: 14px; }
.form { display: grid; gap: 10px; }.form label { color: var(--muted); font-weight: 700; font-size: 12px; }.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form label > .input, .form label > .select { display: block; width: 100%; margin-top: 5px; }
.form label > textarea.input { resize: vertical; min-height: 110px; }
.supplier-edit-form > section { padding-top: 12px; border-top: 1px solid var(--line); }
.supplier-edit-form > section:first-child { padding-top: 0; border-top: 0; }
.supplier-edit-form > section h3 { margin: 0 0 9px; }
.table-note { margin: -2px 0 10px; font-size: 12px; }
.column-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 48vh; overflow: auto; padding: 10px; margin: 10px 0; border: 1px solid var(--line); border-radius: 7px; background: #0b1412; }
.column-selector > label { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start; padding: 6px; color: var(--text); font-size: 12px; }
.column-selector small { grid-column: 2; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.centered { text-align: center; }
.manufacturer-assignment-section { margin-top: 16px; }
.manufacturer-assignment-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.manufacturer-assignment-heading h3, .manufacturer-create-section h3 { margin: 0 0 4px; }
.manufacturer-assignment-heading p { margin: 0; max-width: 560px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.manufacturer-filter-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
.manufacturer-filter-label .input { display: block; width: 100%; margin-top: 5px; }
.manufacturer-assignment-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.manufacturer-assignment-table { min-width: 580px; }
.manufacturer-assignment-table th { position: sticky; top: 0; z-index: 1; background: #13211c; }
.manufacturer-assignment-table td { vertical-align: middle; }
.manufacturer-assignment-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--green); }
.manufacturer-assignment-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .35; }
.manufacturer-create-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.compact-stats { grid-template-columns: repeat(4, minmax(120px, 1fr)); margin: 14px 0; }
.compact-stats .card { padding: 11px; }
.manufacturer-source-preview-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 14px; }
.manufacturer-source-preview-table { min-width: 880px; }
.manufacturer-source-preview-table th { position: sticky; top: 0; z-index: 1; background: #13211c; }
.manufacturer-source-preview-table td { vertical-align: middle; }
.manufacturer-source-preview-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--green); }
.metafield-editor { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #0b1412; }
.metafield-editor label { display: block; }.metafield-editor small { display: block; margin: 3px 0 6px; color: var(--muted); font-weight: 500; }
.metafield-editor .input { width: 100%; }.metafield-editor > .muted { margin-top: 7px; font-weight: 500; }
.order-line { display: grid; grid-template-columns: 1fr 110px; align-items: end; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-line small { color: var(--muted); }.order-line label { display: grid; gap: 5px; }.action-cell { display: flex; gap: 5px; flex-wrap: wrap; }
.open-order-toolbar { margin: 14px 0 9px; }.open-order-toolbar .search { min-width: min(420px, 100%); }.open-order-filter-bar { margin-top: 0; }
.open-orders-table { min-width: 1180px; }.open-order-items { min-width: 330px; max-width: 500px; white-space: normal; line-height: 1.45; }
.open-orders-table td { vertical-align: top; }.open-orders-table small { white-space: normal; }.order-readiness { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; white-space: nowrap; }.order-readiness-icon { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; }.order-readiness.good { color: #c9ed7d; }.order-readiness.bad { color: #ffaaa3; }.order-readiness.warn { color: #ffd37b; }.order-readiness.info { color: #9cdff6; }
.purchase-suggestion-qty { width: 92px; }.purchase-suggestion-source { min-width: 245px; max-width: 360px; }
.empty { padding: 32px; color: var(--muted); text-align: center; }
.notice { color: #ffe09a; background: #382c15; border: 1px solid #705720; border-radius: 7px; padding: 10px 12px; line-height: 1.4; }
.notice.notice-success { color: #bdeed4; background: #123626; border-color: #2b7650; }
.form-fieldset { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid #456056; border-radius: 7px; }
.form-fieldset legend { padding: 0 5px; color: #b7c8c0; }
.list { display: grid; gap: 8px; }.list-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }.list-item:last-child { border-bottom: 0; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); display: grid; place-items: center; padding: 20px; z-index: 10; }
.modal { width: min(720px, 100%); max-height: 85vh; overflow: auto; background: #0e1916; border: 1px solid #456056; border-radius: 11px; padding: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.modal h2 { margin-top: 0; }.modal-footer { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
#toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: grid; gap: 8px; }.toast { padding: 12px 15px; max-width: 360px; border: 1px solid var(--line); border-radius: 7px; background: #16231e; box-shadow: 0 8px 24px rgba(0,0,0,.25); }.toast.error { border-color: var(--red); background: #3a201e; }

@media (max-width: 900px) { .shell { grid-template-columns: 1fr; }.sidebar { position: sticky; top: 0; z-index: 8; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }.brand, .side-note { display: none; }.nav { display: flex; overflow: auto; }.nav button { white-space: nowrap; }.stats, .two-col, .compact-stats { grid-template-columns: 1fr 1fr; }.content { padding: 18px; }.topbar { padding: 11px 18px; } }
@media (max-width: 560px) { .stats, .two-col, .form-row, .column-selector { grid-template-columns: 1fr; }.hero { display: block; }.hero .toolbar { margin-top: 14px; }.topbar h1 { display: none; }.order-line { grid-template-columns: 1fr; }.catalog-filter-label { width: 100%; padding-bottom: 0; }.catalog-filter-select { flex: 1 1 100%; }.catalog-filter-select .select { width: 100%; } }