:root {
  color-scheme: light;
  --font-family: Arial, Helvetica, sans-serif;
  --bg: #c084fc;
  --paper: #f8eaff;
  --surface: #efd9fb;
  --field: #fff7ff;
  --ink: #2b123c;
  --muted: #3f2452;
  --line: #b67ad7;
  --separator: #c9a0df;
  --control-border: #a562c9;
  --primary: #7020ac;
  --primary-hover: #57158a;
  --primary-ink: #fff;
  --accent: #411161;
  --accent-soft: #e5c3f4;
  --danger: #a52a2a;
  --warning-bg: #fff6d5;
  --warning: #765900;
  --error-bg: #fbeceb;
  --success-bg: #ede3f5;
  --success: #4b1b68;
  --info-bg: #eadbff;
  --info: #542784;
  --focus-border: #7836aa;
  --focus-ring: #7836aa33;
  --radius: 3px;
  --header-height: 59px;
  scrollbar-color: #7836aa var(--bg);
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 13px/1.5 var(--font-family); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: 26px; line-height: 1.2; }
h2 { margin-bottom: 12px; font-size: 20px; line-height: 1.3; }
h3 { margin-bottom: 10px; font-size: 15px; }
.muted { color: var(--muted); }
.eyebrow { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.app-shell { min-height: 100vh; }
.site-header { position: sticky; top: 0; z-index: 20; color: #fff; background: #000; border-bottom: 1px solid #000; }
.site-header-inner { display: flex; align-items: center; gap: 22px; max-width: 1360px; min-height: 58px; margin: auto; padding: 8px 26px; }
.site-header nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; background: transparent; color: #eee; white-space: nowrap; font-size: 13px; }
.nav-item:hover, .nav-item.active { background: #000; color: #fff; }
.nav-item.active { box-shadow: inset 0 -2px #c084fc; }
.nav-count { padding: 0 5px; border-radius: 2px; background: #000; color: #fff; font-size: 10px; }
.sidebar-bottom { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.connection { display: flex; align-items: center; gap: 6px; color: #ddd; font-size: 11px; white-space: nowrap; }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }
.connection-dot.online { background: #c084fc; }
.logout { padding: 7px 0; border: 0; background: transparent; color: #eee; font-size: 12px; }
.logout:hover { text-decoration: underline; }
.main { width: 100%; }
.content { max-width: 1280px; margin: auto; padding: 28px 26px 50px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-heading h1 { margin: 0; }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 6px 12px; border: 1px solid var(--control-border); border-radius: 3px; background: linear-gradient(#f6e4ff, #e9c7f8); color: var(--ink); box-shadow: 0 1px 1px #0000000d; font-size: 12px; font-weight: normal; line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; }
.button:hover { border-color: var(--control-border); background: #dfb4f3; text-decoration: none; color: var(--ink); }
.button:active { box-shadow: inset 0 1px 2px #0002; }
.button.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); font-weight: bold; }
.button.primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.button.soft { border-color: var(--line); background: var(--accent-soft); color: var(--accent); }
.button.danger { border-color: #d1aaa7; color: var(--danger); background: var(--error-bg); }
.button.danger:hover { background: var(--error-bg); color: var(--danger); }
.button.small { min-height: 28px; padding: 4px 9px; font-size: 12px; }
.button.icon-only { width: 30px; padding: 4px; font-size: 17px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; text-align: left; }
.text-button:hover { text-decoration: underline; }
.catalog-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; align-items: start; }
.catalog-filters { position: sticky; top: calc(var(--header-height) + 18px); align-self: start; min-width: 0; max-height: calc(100dvh - var(--header-height) - 36px); overflow-y: auto; }
.filter-section { margin-bottom: 23px; }
.filter-section h2 { margin: 0 0 9px; font-size: 13px; font-weight: bold; }
.filter-options { display: flex; flex-direction: column; gap: 2px; }
.filter-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 7px; border: 0; background: transparent; color: var(--accent); text-align: left; font-size: 12px; }
.filter-option:hover { background: var(--surface); }
.filter-option.active { background: var(--accent-soft); color: var(--ink); font-weight: bold; box-shadow: inset 2px 0 var(--primary); }
.filter-option small { min-width: 29px; padding: 0 5px; background: #ead0f6; color: var(--muted); font-size: 11px; font-weight: normal; text-align: right; }
.filter-option.active small { background: #d8b0ed; color: var(--ink); }
.filter-section select { width: 100%; font-size: 12px; }
.catalog-panel { min-width: 0; }
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.catalog-sort { display: flex; flex: 0 1 250px; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; }
.catalog-sort select { min-height: 30px; font-size: 12px; }
.catalog-toolbar h2 { display: inline; margin: 0 12px 0 0; font-size: 16px; }
.catalog-toolbar .muted { display: inline-block; font-size: 12px; }
.search-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.search-input-wrap { position: relative; width: 340px; max-width: 100%; }
.search-input-wrap > span { position: absolute; left: 9px; top: 2px; color: var(--muted); font-size: 21px; }
.search-input { min-height: 30px; padding: 5px 9px 5px 31px; font-size: 12px; }
.catalog-page-size { color: var(--muted); font-size: 11px; white-space: nowrap; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.records-table { width: 100%; border-collapse: collapse; text-align: left; }
.records-table th { padding: 7px 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: bold; white-space: nowrap; }
.records-table td { padding: 12px 9px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: top; }
.records-table tbody tr { cursor: pointer; }
.records-table tbody tr:nth-child(even) { background: var(--paper); }
.records-table tbody tr:hover { background: var(--accent-soft); }
.record-info { display: flex; align-items: flex-start; gap: 12px; min-width: 190px; }
.record-info > div { min-width: 0; }
.record-cover { display: block; flex-shrink: 0; width: 74px; height: 74px; object-fit: cover; border: 1px solid var(--line); }
.record-fallback { display: grid; flex-shrink: 0; place-items: center; width: 74px; height: 74px; background: var(--surface); border: 1px solid var(--line); }
.record-fallback .record { width: 56px; height: 56px; }
.record-title { color: var(--accent); font-size: 13px; font-weight: bold; line-height: 1.45; overflow-wrap: anywhere; }
.record-artist, .record-label { margin-top: 4px; color: var(--ink); font-size: 11px; }
.record-sku { margin-top: 6px; color: var(--muted); font-size: 10px; }
.condition-line { margin-bottom: 5px; white-space: nowrap; font-size: 11px; }
.condition-line span { color: var(--muted); }
.condition-line strong { display: inline-block; min-width: 22px; padding: 0 3px; background: var(--field); font-weight: normal; text-align: center; color: var(--ink); }
.price-column { text-align: right; }
.price { font-size: 14px; font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grade { padding: 2px 4px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 11px; }
.badge { display: inline-block; padding: 2px 5px; border: 1px solid transparent; border-radius: 2px; font-size: 11px; white-space: nowrap; }
.badge.green { color: var(--success); background: var(--success-bg); border-color: #cbb2db; }
.badge.amber { color: var(--warning); background: var(--warning-bg); border-color: #dfcf9e; }
.badge.grey { color: var(--muted); background: var(--surface); border-color: var(--line); }
.badge.red { color: var(--danger); background: var(--error-bg); border-color: #d9b6b2; }
.badge.blue { color: var(--info); background: var(--info-bg); border-color: #c5a5e3; }
.stock-count { color: var(--muted); font-size: 10px; white-space: nowrap; }
.meshok-status { margin-top: 5px; color: var(--muted); font-size: 11px; }
.meshok-status.live { color: var(--success); }
.table-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 0; color: var(--muted); font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 8px; }
.pagination button { min-width: 27px; height: 27px; padding: 0 6px; border: 1px solid var(--control-border); border-radius: 2px; background: linear-gradient(#f6e4ff, #e9c7f8); color: var(--accent); font-size: 17px; }
.notice { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink); font-size: 12px; }
.notice > span { font-size: 17px; }
.notice > div { flex: 1; }
.notice.warning { background: var(--warning-bg); border-color: #dfcf9e; color: var(--warning); }
.notice.error { background: var(--error-bg); border-color: #d9b6b2; color: var(--danger); }
.notice strong { font-size: 12px; }
.empty { padding: 60px 20px; text-align: center; }
.empty .record { width: 80px; height: 80px; margin: 0 auto 20px; }
.empty h2 { font-size: 20px; }
.empty p { color: var(--muted); }
.record { display: grid; position: relative; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle at center, #222 0, #222 2px, #444 2.5px, #222 3.5px); }
.record:before { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: #ddd; }
.record:after { content: ""; position: absolute; width: 5%; height: 5%; border-radius: 50%; background: #555; }
.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.record-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.record-card .catalog-link-columns { margin-top: auto; }
.record-card .marketplace-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: -8px; }
.record-card-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.record-card .record-cover, .record-card .record-fallback { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 9px; }
.record-card .record-fallback .record { width: 70%; height: auto; aspect-ratio: 1; }
.record-card .card-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.record-card .record-title:hover { text-decoration: underline; }
.record-card .catalog-description { color: var(--muted); font-size: 11px; }
.record-card .catalog-description textarea { height: 110px; min-height: 110px; resize: none; font-size: 12px; line-height: 1.5; }
.catalog-link-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.catalog-link-columns > div { min-width: 0; }
.catalog-links-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.catalog-search, .saved-item-links { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 6px; font-size: 11px; overflow-wrap: anywhere; }
.catalog-link-columns .catalog-search, .catalog-link-columns .saved-item-links, .item-search-cell .catalog-search, .item-links-cell .saved-item-links { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; max-width: 160px; }
.item-links-cell, .item-search-cell { overflow-wrap: anywhere; }
/* Общие формы */
label { display: flex; flex-direction: column; gap: 5px; color: var(--ink); font-size: 12px; font-weight: normal; }
input, select, textarea { width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid var(--control-border); border-radius: 2px; background: var(--field); color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--focus-border); box-shadow: 0 0 0 2px var(--focus-ring); }
input[readonly] { color: var(--muted); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input[type=checkbox] { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--primary); }
.checkbox { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.full { grid-column: 1 / -1; }
.field-help { display: block; margin: 5px 0 0; color: var(--muted); font-size: 11px; font-weight: normal; line-height: 1.5; }
.form-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.form-section:first-child { padding-top: 0; }
.item-supply { margin-bottom: 20px; }
.form-section:last-child { border-bottom: 0; }
.section-label { margin-bottom: 13px; color: var(--ink); font-size: 15px; font-weight: bold; }
.inline-input { display: flex; align-items: stretch; gap: 7px; }
.inline-input input { flex: 1; min-width: 0; }
.form-error { color: var(--danger); font-size: 12px; white-space: pre-line; }
.loading { padding: 60px 16px; color: var(--muted); text-align: center; }
/* Карточка издания и диалоги */
dialog { max-height: 94vh; padding: 0; border: 1px solid var(--control-border); border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 48px #0004; }
dialog::backdrop { background: #0007; }
.editor-dialog { width: min(1100px, calc(100vw - 48px)); overflow: hidden; }
.editor-dialog #editor-content { display: flex; flex-direction: column; max-height: calc(94vh - 2px); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 26px 14px; }
.dialog-header h2 { margin: 0 0 5px; font-size: 24px; }
.dialog-header p { margin: 0; color: var(--muted); font-size: 13px; }
.close-button { flex-shrink: 0; padding: 0 3px; border: 0; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; }
.editor-tabs { display: flex; gap: 0; margin: 0 26px; border-bottom: 1px solid var(--line); }
.tab { padding: 10px 15px; border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--accent); font-size: 13px; white-space: nowrap; }
.tab:hover { text-decoration: underline; }
.tab.active { position: relative; bottom: -1px; border-color: var(--control-border); background: var(--paper); color: var(--ink); font-weight: bold; }
.tab small { margin-left: 4px; font-size: 10px; }
.editor-body { flex: 1; min-height: 0; padding: 22px 26px; overflow-y: auto; }
.editor-dialog .dialog-header, .editor-dialog .editor-tabs, .editor-dialog .dialog-footer { flex-shrink: 0; }
.editor-columns { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 26px; }
.editor-columns > div { min-width: 0; }
.editor-aside { min-width: 0; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.editor-aside .price-field { min-height: 42px; font-size: 24px; font-weight: bold; }
.editor-aside > .checkbox { margin-top: 9px; }
.aside-card { margin-top: 18px; padding: 13px; border: 1px solid var(--line); background: var(--paper); }
.aside-card h3 { margin-bottom: 8px; font-size: 13px; }
.aside-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.aside-card .button { width: 100%; margin-top: 10px; }
.aside-card summary { cursor: pointer; font-weight: bold; }
.aside-card[open] summary { margin-bottom: 12px; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--line); background: var(--surface); }
.dialog-footer > div { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.save-note { color: var(--muted); font-size: 11px; }
#editor[aria-busy="true"] #editor-content { opacity: .7; cursor: progress; }
.photo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.photo-heading .section-label { margin: 0; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.photo-list:not(.has-photos) { display: block; }
.photo-zone { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px; border: 1px dashed var(--control-border); background: var(--surface); text-align: center; }
.photo-zone-title { padding: 2px 2px 7px; }
.photo-zone strong { display: block; font-size: 11px; font-weight: normal; }
.photo-zone small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.photo-list.has-photos .photo-zone small { display: none; }
.photo-add-options { display: grid; gap: 5px; width: 100%; }
.photo-add-options button { width: 100%; min-height: 28px; padding: 4px; border: 1px solid var(--control-border); border-radius: 2px; background: linear-gradient(#f6e4ff, #e9c7f8); color: var(--ink); font-size: 11px; }
.photo-add-options button:hover { background: #dfb4f3; color: var(--ink); }
.photo-list:not(.has-photos) .photo-add-options { display: flex; justify-content: center; flex-wrap: wrap; }
.photo-list:not(.has-photos) .photo-add-options button { width: auto; min-width: 95px; }
.photo-zone.dragover { background: var(--accent-soft); border-color: var(--accent); }
.photo-thumb { position: relative; min-width: 0; border: 1px solid var(--line); overflow: hidden; }
.photo-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-thumb small { display: flex; position: absolute; top: 3px; left: 3px; flex-wrap: wrap; gap: 1px 3px; max-width: calc(100% - 6px); padding: 1px 4px; background: #2b123ce6; color: #fff; font-size: 9px; }
.photo-thumb small a { color: #e4c6ff; white-space: nowrap; }
.photo-controls { display: flex; justify-content: space-between; padding: 3px; border-top: 1px solid var(--line); background: var(--surface); }
.photo-controls button { padding: 1px 5px; border: 0; background: transparent; color: var(--ink); font-size: 12px; }
.photo-thumb img[draggable] { cursor: grab; }
.photo-thumb.dragging { opacity: .45; }
.photo-thumb.drop-before { box-shadow: -3px 0 var(--accent); }
.photo-thumb.drop-after { box-shadow: 3px 0 var(--accent); }
.photo-list[aria-busy="true"] { opacity: .7; pointer-events: none; }
.item-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto auto; gap: 6px; align-items: end; margin-bottom: 10px; }
.item-link-row label { min-width: 0; }
.item-link-row .button { width: 29px; min-height: 32px; padding: 4px; }
.item-link-row [data-import-discogs] { width: auto; max-width: 100px; white-space: normal; }
.item-links > .field-help { margin-top: 8px; }
.quick-search { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 10px 0 0; font-size: 11px; }
.quick-search span { color: var(--muted); }
.position-type { min-width: 0; margin: 0; padding: 0; border: 0; }
.position-type legend { margin-bottom: 5px; color: var(--ink); font-size: 12px; }
.position-type-options { display: flex; gap: 0; padding: 0; border: 1px solid var(--control-border); border-radius: 3px; background: var(--field); }
.position-type-options label { position: relative; flex: 1; min-width: 0; cursor: pointer; }
.position-type-options label + label { border-left: 1px solid var(--control-border); }
.position-type-options input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.position-type-options span { display: block; padding: 7px 10px; text-align: center; font-size: 12px; white-space: nowrap; }
.position-type-options input:checked + span { background: var(--accent-soft); color: var(--ink); font-weight: bold; box-shadow: inset 0 1px 3px #0002; }
.position-type-options input:focus-visible + span { outline: 2px solid var(--focus-border); outline-offset: 2px; }
.description-field { margin-top: 5px; border: 1px solid var(--control-border); border-radius: 2px; background: var(--field); overflow: hidden; }
.description-field:focus-within { border-color: var(--focus-border); box-shadow: 0 0 0 2px var(--focus-ring); }
.description-field textarea { display: block; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.description-fixed { padding: 9px; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
#description-prefix, .description-editions { border-bottom: 1px solid var(--line); background: var(--surface); }
#description-suffix { border-top: 1px solid var(--line); background: var(--surface); }
.master-edition { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.master-edition:last-child { border-bottom: 0; }
.master-edition.ignored > div { color: var(--muted); }
.master-edition > a { display: inline-block; margin: 5px 0; font-size: 11px; }
.master-edition .checkbox { margin-top: 5px; }
.master-edition textarea { min-height: 55px; }
.reference-prices { margin: 17px 0; padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.reference-prices h3 { margin-bottom: 11px; font-size: 13px; }
.reference-prices ol { margin: 0; padding-left: 17px; }
.reference-prices li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.reference-prices li:first-child { padding-top: 0; }
.reference-prices li:last-child { padding-bottom: 0; border: 0; }
.reference-prices li > span { display: block; color: var(--muted); line-height: 1.4; }
.reference-prices strong { display: block; font-size: 12px; font-weight: bold; line-height: 1.8; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.reference-prices .price-separator { padding: 0 3px; color: var(--muted); }
.reference-prices p { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.price-parameters { width: 100%; margin: 18px 0; }
.price-parameters .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.price-parameters .form-grid label { min-width: 0; }
.price-parameters .field-help { margin: 10px 0; }
.preview-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; }
.preview-image { width: 100%; aspect-ratio: 1; object-fit: cover; }
.preview-image.record-cover, .preview-image.record-fallback { width: 100%; height: auto; }
.preview-image .record { width: 70%; height: auto; aspect-ratio: 1; }
.preview-price { margin-bottom: 12px; font-size: 24px; font-weight: bold; }
.preview-text { color: var(--ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-errors { margin-top: 18px; padding: 12px 15px; border: 1px solid #8a7846; background: var(--warning-bg); color: var(--warning); font-size: 12px; }
.preview-errors ul { margin: 7px 0 0; padding-left: 17px; }
.preview-errors li { margin-top: 4px; }
.picker-dialog { width: 540px; max-width: calc(100vw - 24px); }
.picker-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; }
.picker-header h2 { margin: 0; font-size: 20px; }
.picker-body { max-height: 65vh; padding: 20px 24px; overflow: auto; }
.picker-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 8px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--accent); font-size: 13px; text-align: left; }
.picker-row:hover { background: #4b4b4b; }
.picker-path { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; font-size: 12px; }
.picker-search { margin-bottom: 12px; }
.confirm-dialog { width: 430px; max-width: calc(100vw - 24px); padding: 24px; }
.confirm-dialog h2 { font-size: 21px; }
.confirm-dialog p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.confirm-actions, .photo-picker-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.photo-picker-actions .button { min-width: 80px; }
#photo-links { min-height: 150px; }
#photo-picker .picker-body > form > label { display: block; }
#photo-links-progress { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
#photo-links-error { white-space: pre-line; overflow-wrap: anywhere; }
#batch-progress:not(:empty) { margin-top: 20px; }
#batch-form > label, #batch-artist > label { display: block; margin-bottom: 16px; }
#batch-import { display: inline-flex; }
.batch-items { display: flex; flex-wrap: wrap; gap: 10px; }
/* Настройки, задачи и история */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1160px); gap: 20px; align-items: start; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.settings-layout > [role="tabpanel"] { min-width: 0; }
.settings-card { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: start; padding: 22px; border: 1px solid var(--line); background: var(--paper); }
.settings-fields { min-width: 0; }
.settings-save { position: sticky; top: calc(var(--header-height) + 18px); align-self: start; z-index: 2; }
.settings-save .button { width: 100%; }
.settings-card h2 { font-size: 19px; }
.settings-card > p { color: var(--muted); font-size: 12px; }
.settings-note { padding: 18px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.7; }
.settings-note h3 { font-size: 17px; }
.settings-note hr { margin: 16px 0; border: 0; border-top: 1px solid var(--line); }
.settings-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.payments { display: flex; flex-wrap: wrap; gap: 15px; padding-top: 5px; }
.media-price-settings, .description-template-settings { min-width: 0; margin: 15px 0 0; padding: 16px; border: 1px solid var(--line); }
.description-template-settings legend { padding: 0 6px; font-size: 13px; font-weight: bold; }
.media-price-settings summary { cursor: pointer; font-size: 13px; font-weight: bold; }
.media-price-settings[open] summary { margin-bottom: 15px; }
.media-price-settings > label { margin-bottom: 15px; }
.jobs-panel { border: 1px solid var(--line); background: var(--paper); }
.job-error { max-width: 330px; margin-top: 5px; color: var(--danger); font-size: 11px; white-space: normal; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 20px 20px; border-left: 1px solid var(--line); }
.timeline li:before { content: ""; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #888; }
.timeline p { margin-bottom: 3px; font-size: 13px; }
.timeline time { color: var(--muted); font-size: 11px; }
.toasts { display: flex; position: fixed; z-index: 100; top: 15px; right: 15px; flex-direction: column; gap: 8px; max-width: calc(100vw - 30px); }
.toast { max-width: 440px; padding: 9px 12px; border: 1px solid #cbb2db; border-radius: 2px; background: var(--success-bg); color: var(--success); box-shadow: 0 3px 12px #0002; font-size: 12px; white-space: pre-line; }
.toast.error { border-color: #d9b6b2; background: var(--error-bg); color: var(--danger); }
.toast.with-action { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.toast.with-action button { background: transparent; color: inherit; border-color: var(--control-border); }
.dialog-toasts { position: static; flex-shrink: 0; align-items: stretch; max-width: none; max-height: 110px; margin: 0; padding: 8px 18px 0; overflow-y: auto; }
.dialog-toasts .toast { max-width: none; }
/* Вход */
.login-screen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); height: 100svh; min-height: 480px; padding-top: 58px; background: var(--bg); }
.login-screen:before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 58px; background: #000; border-bottom: 1px solid #000; }
.login-art { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
.login-photo-column { min-width: 0; overflow: hidden; }
.login-photo-track { display: flex; flex-direction: column; animation: login-photo-scroll 55s linear infinite; will-change: transform; }
.login-photo-column:nth-child(even) .login-photo-track { animation-direction: reverse; }
.login-photo-set { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.login-photo-set img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.login-screen[hidden] .login-photo-track { animation-play-state: paused; }
@keyframes login-photo-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.login-panel { width: calc(100% - 40px); max-width: 400px; min-width: 0; margin: auto; padding: 30px 34px; border: 1px solid var(--control-border); border-radius: 3px; background: var(--paper); }
.login-panel h1 { margin-bottom: 24px; font-size: 27px; font-weight: normal; text-align: center; }
.login-panel form { display: flex; flex-direction: column; gap: 14px; }
.login-panel label { font-size: 13px; }
.login-panel input { min-height: 38px; }
.login-panel form .button { width: 100%; min-height: 36px; font-size: 13px; }
.login-panel .form-error { margin: 0; overflow-wrap: anywhere; }
.login-panel .form-error:empty { display: none; }
@media (max-width: 1150px) {
  .site-header-inner { gap: 10px; padding-right: 18px; padding-left: 18px; }
  .connection { display: none; }
  .content { padding-right: 20px; padding-left: 20px; }
  .catalog-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; }
  .nav-item { padding-right: 9px; padding-left: 9px; }
  .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor-columns { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
}
@media (max-width: 850px) {
  .settings-card { display: block; }
  .settings-save { top: auto; bottom: 12px; display: flex; justify-content: flex-end; margin-top: 22px; padding: 10px 0; border-top: 1px solid var(--separator); background: var(--paper); }
  .settings-save .button { width: auto; }
  .site-header-inner { gap: 8px 14px; padding: 8px 16px; }
  .sidebar-bottom { order: 1; }
  .site-header nav { flex: 1; min-width: 0; min-height: 40px; overflow-x: auto; }
  .nav-item { flex: 1; justify-content: center; padding: 9px 12px; }
  .content { padding-top: 22px; }
  .catalog-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 17px; }
  .catalog-toolbar > div:first-child { display: flex; flex-direction: column; gap: 3px; }
  .catalog-page-size { display: none; }
  .editor-columns { grid-template-columns: minmax(0, 1fr); }
  .editor-aside { padding: 16px; }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .content { padding: 18px 12px 35px; }
  h1 { font-size: 23px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; padding-right: 8px; padding-left: 8px; font-size: 11px; }
  .site-header-inner { padding-right: 12px; padding-left: 12px; gap: 6px 10px; }
  .nav-item { padding-right: 6px; padding-left: 6px; font-size: 12px; }
  .nav-count { padding: 0 3px; font-size: 9px; }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .catalog-filters { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .filter-section { min-width: 0; margin-bottom: 0; }
  .filter-section:first-child { grid-row: span 2; }
  .filter-section h2 { margin-bottom: 6px; }
  .filter-option { padding: 4px 5px; }
  .filter-section .button { width: 100%; }
  .catalog-toolbar h2 { font-size: 16px; }
  .search-input-wrap { width: 100%; }
  .notice { align-items: flex-start; padding: 9px; font-size: 11px; }
  .notice .button { min-height: 26px; padding: 3px 7px; font-size: 11px; }
  .table-footer { font-size: 11px; }
  .cards-grid { gap: 15px; }
  .record-card .record-title { font-size: 12px; }
  .catalog-link-columns { grid-template-columns: minmax(0, 1fr); }
  .editor-dialog { width: calc(100vw - 16px); max-height: 96vh; }
  .editor-dialog #editor-content { max-height: calc(96vh - 2px); }
  .dialog-header { padding: 18px 16px 12px; }
  .dialog-header h2 { font-size: 21px; }
  .editor-tabs { margin: 0 16px; overflow-x: auto; }
  .tab { padding: 9px 11px; font-size: 12px; }
  .editor-body { padding: 18px 16px; }
  .dialog-footer { padding: 12px 16px; }
  .dialog-footer .button { padding-right: 9px; padding-left: 9px; font-size: 11px; }
  .form-grid { gap: 12px; }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .position-type { grid-column: 1 / -1; }
  .photo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-add-options button { font-size: 10px; }
  .photo-zone strong { font-size: 10px; }
  .item-link-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .item-link-row label { grid-column: 1 / -1; }
  .preview-layout { grid-template-columns: minmax(0, 1fr); }
  .preview-image { max-width: 230px; }
  .settings-card { padding: 16px; }
  .settings-actions .button { flex: 1; }
  .description-template-settings .form-grid { grid-template-columns: minmax(0, 1fr); }
  .picker-body { padding: 18px; }
  .picker-header { padding: 18px 18px 0; }
  .login-screen { grid-template-columns: minmax(50px, 1fr) minmax(0, 270px); }
  .login-panel { width: 100%; padding: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.location-row{padding:14px 0;border-bottom:1px solid var(--separator);margin-bottom:14px}
.bulk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0}
.record-select{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px}
.bulk-field{min-width:0;padding:8px 0;border-bottom:1px solid var(--separator)}
.bulk-field [data-bulk-value]{margin-top:8px}
.vinyl-shipping-format{min-width:0;margin:12px 0 0;padding:12px;border:1px solid var(--separator)}
.vinyl-shipping-format legend{padding:0 6px;font-weight:600}