@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: light;
    --ink: #1b2b25;
    --muted: #74827c;
    --line: #e3e9e5;
    --paper: #fff;
    --canvas: #f4f6f3;
    --green: #2f6d54;
    --green-dark: #234f3d;
    --mint: #e4eee7;
    --serif: 'Manrope', 'Arial', sans-serif;
    --sans: 'DM Sans', 'Arial', sans-serif;
    --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; }
.topbar { height: 66px; padding: 0 max(28px, calc((100% - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font: 700 13px var(--mono); letter-spacing: 1.1px; text-decoration: none; }
.brand-mark { display: grid; width: 27px; height: 27px; place-items: center; background: var(--green); color: white; font: 700 14px var(--serif); }
.topbar-note, .eyebrow, footer, th { font-family: var(--mono); letter-spacing: 1.1px; }
.topbar-note { color: var(--muted); font-size: 10px; }
main { max-width: 1120px; margin: 0 auto; padding: 60px 28px 80px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.eyebrow { margin: 0 0 14px; color: var(--green); font-size: 10px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 700 48px/1.12 var(--serif); letter-spacing: 0; }
.intro-copy { max-width: 370px; margin: 0 0 5px; color: #61716a; font-size: 15px; line-height: 1.7; }
.import-section, .catalog-section { border-top: 1px solid #cfd9d2; }
.edit-section { margin-bottom: 30px; border-top: 1px solid #cfd9d2; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 23px 0 20px; }
.section-heading .eyebrow { margin-bottom: 8px; }
h2 { margin: 0; font: 700 22px var(--serif); letter-spacing: 0; }
.format-note, .csv-hint { color: var(--muted); font-size: 12px; }
.import-form { display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: end; gap: 14px; }
.file-field { display: grid; gap: 10px; min-width: 0; color: var(--ink); font-weight: 600; }
.file-field small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.file-field input { width: 100%; min-width: 0; min-height: 42px; padding: 8px; border: 1px solid #dce4de; background: var(--paper); color: var(--muted); font: 12px var(--sans); }
input::file-selector-button { margin-right: 10px; padding: 6px 9px; border: 0; background: var(--mint); color: var(--green-dark); font: 600 11px var(--sans); cursor: pointer; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; font: 600 12px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #30483d; }
.button-green { background: var(--green); color: white; }
.button-green:hover { background: var(--green-dark); }
.button-green small { padding-left: 9px; border-left: 1px solid #ffffff59; color: #e0eee5; font: 10px var(--mono); }
.csv-hint { margin: 13px 0 28px; }
.edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px; background: var(--paper); }
.edit-field { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 600; }
.edit-field input { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #dce4de; background: white; color: var(--ink); font: 13px var(--sans); }
.edit-actions { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.button-light { border: 1px solid var(--line); background: white; color: var(--ink); }
code { padding: 2px 5px; background: #e8ede9; color: var(--green-dark); font: 11px var(--mono); }
.notices { margin: -20px 0 28px; padding: 8px 14px; border-left: 3px solid var(--green); background: #e7efe9; color: var(--green-dark); }
.notices p { margin: 5px 0; line-height: 1.5; }
.catalog-section { margin-top: 30px; }
.catalog-heading { align-items: center; padding-bottom: 18px; }
.catalog-heading .eyebrow { margin-top: 4px; }
.count { margin-left: 5px; color: #9aa69f; font: 500 15px var(--mono); }
.catalog-meta { display: flex; min-height: 48px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }
.search-box { display: flex; align-items: center; gap: 8px; width: 250px; }
.search-icon { color: var(--green); font-size: 20px; }
.search-box input { width: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 12px var(--sans); }
.table-scroll { overflow-x: auto; }
.products-table { width: 100%; border-collapse: collapse; background: var(--paper); text-align: left; }
th { height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #78867f; font-size: 9px; font-weight: 400; white-space: nowrap; }
td { height: 68px; padding: 9px 14px; border-bottom: 1px solid #edf0ed; color: #46564e; font-size: 12px; white-space: nowrap; }
.product-cell { display: flex; min-width: 240px; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; }
.thumb { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; background: #f1f4f1; color: #a0ada5; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.sku-cell, .ean-cell { font-family: var(--mono); font-size: 11px; }
.image-status { padding: 5px 8px; background: #f1f2ef; color: #77827c; font-size: 10px; }
.image-status.has-image { background: var(--mint); color: var(--green-dark); }
.action-cell { text-align: right; }
.pdf-link { color: var(--green); font: 600 11px var(--mono); text-decoration: none; }
.pdf-link:hover { color: var(--green-dark); text-decoration: underline; }
.edit-link { margin-right: 14px; color: var(--muted); font: 500 11px var(--sans); text-decoration: none; }
.edit-link:hover { color: var(--green-dark); text-decoration: underline; }
.empty-state { padding: 70px 20px; background: var(--paper); text-align: center; }
.empty-mark { display: grid; width: 38px; height: 38px; margin: 0 auto 15px; place-items: center; background: var(--mint); color: var(--green); font: 700 16px var(--serif); }
.empty-state h3 { margin-bottom: 7px; font: 700 16px var(--serif); }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.no-results { padding: 18px; color: var(--muted); text-align: center; }
footer { display: flex; justify-content: space-between; padding: 17px max(28px, calc((100% - 1120px) / 2)); border-top: 1px solid var(--line); background: var(--paper); color: #829087; font-size: 9px; }

@media (max-width: 720px) {
    .topbar { height: 58px; padding: 0 18px; }
    main { padding: 42px 18px 58px; }
    .intro { display: block; margin-bottom: 38px; }
    h1 { font-size: 39px; }
    .intro-copy { margin-top: 17px; font-size: 14px; }
    .section-heading { align-items: start; }
    .import-form { grid-template-columns: 1fr; }
    .import-form .button { justify-self: start; }
    .edit-form { grid-template-columns: 1fr; padding: 14px; }
    .format-note { max-width: 110px; text-align: right; }
    .catalog-heading { align-items: start; flex-direction: column; }
    .catalog-meta { gap: 10px; }
    .search-box { width: min(57%, 250px); }
    .products-table { min-width: 700px; }
    footer { padding-right: 18px; padding-left: 18px; }
}