:root {
  color-scheme: light;
  --ink: #142722;
  --muted: #66756f;
  --paper: #f3f6f3;
  --card: #ffffff;
  --line: #dce5df;
  --green: #176b4f;
  --green-dark: #0e4f3a;
  --yellow: #f4c95d;
  --red: #b83d45;
  --shadow: 0 12px 30px rgba(26, 55, 45, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
button, input, select { font: inherit; }

.development-banner {
  background: #3b2d0d;
  color: #ffe8a8;
  font-size: .82rem;
  font-weight: 700;
  padding: .55rem 1rem;
  text-align: center;
}

.app-shell {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  min-height: calc(100vh - 36px);
}
.app-sidebar {
  background: #24343b;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 1.25rem .875rem 1rem;
  position: sticky;
  top: 0;
}
.sidebar-brand { display: grid; gap: .25rem; padding: 0 .35rem 1rem; }
.sidebar-brand span { color: #aebdc3; font-size: .72rem; line-height: 1.35; }
.brand { color: #fff; font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.main-nav { display: grid; gap: 0; min-width: 0; padding: .25rem; }
.main-nav a {
  border-radius: 8px;
  color: #dce5e8;
  font-size: .9rem;
  font-weight: 600;
  margin: .19rem .3rem;
  padding: .75rem .875rem;
  text-decoration: none;
}
.main-nav a:hover { background: #31474f; color: #fff; }
.main-nav a.active { background: #4f8278; color: #fff; font-weight: 700; }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: .55rem; margin-top: auto; padding: .9rem .55rem 0; }
.sidebar-footer > span { color: #aebdc3; font-size: .7rem; line-height: 1.45; }
.sidebar-info-link { color: #d5e7df; font-size: .76rem; font-weight: 700; text-decoration: none; }
.sidebar-footer form { margin: 0; }
.sidebar-footer .button { width: 100%; }

.page { margin: 0 auto; max-width: 1540px; min-width: 0; padding: 2rem clamp(1rem, 3vw, 3rem) 4rem; width: 100%; }
.page-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.3rem; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; margin-bottom: .35rem; }
h2 { letter-spacing: -.025em; }
.eyebrow { color: var(--green); font-size: .75rem; font-weight: 850; letter-spacing: .14em; margin-bottom: .4rem; text-transform: uppercase; }
.muted { color: var(--muted); }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 42px;
  padding: .62rem .95rem;
  text-decoration: none;
}
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.button-ebay { background: #1f5ba6; color: #fff; margin-top: 1rem; }
.button-cardmarket { background: #315e55; color: #fff; margin-top: 1rem; }

.filterbar {
  align-items: end;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(240px, 2fr) repeat(5, minmax(110px, 1fr)) auto auto;
  margin-bottom: 1.4rem;
  padding: 1rem;
}
label { color: #40514b; display: grid; font-size: .78rem; font-weight: 750; gap: .35rem; }
input, select, textarea {
  background: #fbfcfb;
  border: 1px solid #cbd8d1;
  border-radius: 9px;
  color: var(--ink);
  min-height: 42px;
  padding: .55rem .7rem;
  width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 107, 79, .12); outline: none; }
button:disabled, .button.disabled { cursor: not-allowed; opacity: .45; pointer-events: none; }

.inventory-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
.inventory-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(25, 50, 42, .04);
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.inventory-card:hover { border-color: #a9c0b5; box-shadow: var(--shadow); transform: translateY(-3px); }
.card-picture { aspect-ratio: 5 / 7; background: #e4eae6; overflow: hidden; position: relative; }
.card-picture img { height: 100%; object-fit: cover; width: 100%; }
.status-pill { border-radius: 999px; bottom: .55rem; color: #fff; font-size: .7rem; font-weight: 850; padding: .3rem .55rem; position: absolute; right: .55rem; }
.status-active { background: rgba(16, 91, 67, .92); }
.status-sold { background: rgba(102, 117, 111, .92); }
.card-copy { display: grid; gap: .32rem; padding: .8rem; }
.card-copy strong { font-size: .95rem; line-height: 1.2; }
.card-copy > span { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-values { align-items: center; border-top: 1px solid #edf1ee; display: flex; font-size: .73rem; justify-content: space-between; margin-top: .3rem; padding-top: .6rem; }
.card-values b { font-size: .9rem; }

.pagination { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 1.5rem; text-align: center; }
.pagination > :last-child { justify-self: end; }
.back-link { color: var(--green); display: inline-block; font-weight: 750; margin-bottom: 1.2rem; text-decoration: none; }

.detail-layout { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
.detail-content { display: grid; gap: 1.2rem; min-width: 0; }
.detail-content > * { min-width: 0; }
.detail-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 5px 18px rgba(25, 50, 42, .05); min-width: 0; padding: 1.3rem; }
.visual-panel { position: sticky; top: 1rem; }
.detail-image { background: #e4eae6; border-radius: 12px; display: block; max-height: 68vh; object-fit: contain; width: 100%; }
.media-links { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1rem; }
.media-links a { color: var(--green); font-size: .78rem; font-weight: 700; }
.hero-copy h1 { margin-bottom: .25rem; }
.detail-subtitle { color: var(--muted); }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge { background: #eef3f0; border-radius: 999px; font-size: .76rem; font-weight: 750; padding: .4rem .65rem; }
.badge-success { background: #d9f0e5; color: #0b6041; }
.badge-missing { background: #f8e7e8; color: #8f2630; }
.metric-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.metric { background: #153d31; border-radius: 15px; color: #fff; padding: 1.1rem; }
.metric span { color: #bcd7cd; display: block; font-size: .75rem; margin-bottom: .5rem; }
.metric strong { font-size: 1.45rem; }
.section-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.price-chart { height: 280px; width: 100%; }
.empty-inline { background: #f4f7f5; border-radius: 10px; color: var(--muted); padding: 1rem; }
.table-scroll { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; min-width: 720px; width: 100%; }
th, td { border-bottom: 1px solid #e6ece8; padding: .75rem; text-align: left; }
th { color: var(--muted); font-size: .74rem; text-transform: uppercase; }

.login-page { align-items: center; display: flex; justify-content: center; min-height: calc(100vh - 42px); }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); max-width: 430px; padding: 2rem; width: 100%; }
.login-card h1 { font-size: 2.2rem; }
.login-mark { align-items: center; background: var(--green); border-radius: 14px; color: #fff; display: flex; font-weight: 900; height: 48px; justify-content: center; margin-bottom: 1.3rem; width: 48px; }
.stacked-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.security-note { border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; line-height: 1.45; margin: 1.5rem 0 0; padding-top: 1rem; }
.notice { border-radius: 10px; margin-bottom: 1rem; padding: .8rem 1rem; }
.notice-error { background: #fde8e9; color: #8f202b; }
.empty-state { background: var(--card); border: 1px dashed #bdccc4; border-radius: 18px; padding: 4rem 1.5rem; text-align: center; }
.info-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.info-list { margin: 0; }
.info-list div { border-top: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: 160px 1fr; padding: .8rem 0; }
.info-list dt { color: var(--muted); font-weight: 700; }
.info-list dd { margin: 0; }

.quick-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.dashboard-metrics { grid-template-columns: repeat(6, minmax(150px, 1fr)); margin: 1.2rem 0; }
.dashboard-tables { align-items: start; }
.two-column-workspace { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(300px, .8fr) minmax(480px, 1.2fr); }
.inline-form { align-items: end; display: flex; flex-wrap: wrap; gap: .7rem; }
.inline-form .grow { flex: 1 1 220px; }
.form-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.selected-result { background: #eaf3ee; border: 1px solid #cbded4; border-radius: 12px; display: grid; gap: .35rem; margin-top: 1rem; padding: 1rem; }
.candidate-list { display: grid; gap: .5rem; margin-top: 1rem; max-height: 390px; overflow-y: auto; }
.candidate-list a { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .25rem; padding: .7rem; text-decoration: none; }
.candidate-list a:hover { border-color: var(--green); }
.candidate-list span { color: var(--muted); font-size: .8rem; }
.form-card-narrow { margin: 0 auto; max-width: 980px; }
.bulk-toolbar { align-items: end; display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.bulk-toolbar label { min-width: 125px; }
.button-small { min-height: 34px; padding: .4rem .65rem; }
.button-danger { background: #fff3f3; border-color: #e1b8bb; color: #972d36; }
.button-danger:hover { background: #f9dddd; }
.danger-actions { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 1rem; }
.danger-zone { border-color: #e7c5c7; margin: 1rem auto 0; max-width: 980px; }
.media-management-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.upload-box { background: #f6f8f7; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: .7rem; padding: .8rem; }
.collection-layout { align-items: start; display: grid; gap: 1rem; grid-template-columns: 300px minmax(0, 1fr); }
.set-sidebar { max-height: calc(100vh - 130px); overflow-y: auto; position: sticky; top: 1rem; }
.full-width { margin-top: .6rem; width: 100%; }
.set-list { display: grid; gap: .5rem; margin-top: 1rem; }
.set-row { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .25rem; padding: .7rem; text-decoration: none; }
.set-row span { color: var(--muted); font-size: .75rem; }
.set-row.selected { background: #e7f1ec; border-color: #87ad9c; }
.set-row progress { accent-color: var(--green); height: .55rem; width: 100%; }
.collection-content { min-width: 0; }
.collection-toolbar { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.collection-toolbar h2 { margin-bottom: .2rem; }
.missing-card { filter: saturate(.55); }
.status-missing { background: rgba(137, 56, 63, .92); }
.sale-candidates { display: grid; gap: .65rem; margin-top: 1rem; }
.sale-candidate { align-items: center; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: .8rem; }
.sale-candidate > a { display: grid; gap: .2rem; text-decoration: none; }
.sale-candidate span { color: var(--muted); font-size: .78rem; }
.compact-add label { width: 130px; }
.price-input { min-width: 95px; width: 110px; }
.cart-update { align-items: center; justify-content: space-between; margin-top: .8rem; }
.sale-final-form { background: #f4f7f5; border-radius: 14px; margin-top: 1rem; padding: 1rem; }
.button-final { background: #8f343d; color: #fff; }
.button-final:hover { background: #742730; }
.import-summary { align-items: center; display: flex; justify-content: space-between; margin-top: 1rem; }
.summary-success { border-color: #8ab9a4; }
.summary-error { border-color: #d9a2a6; }
.row-error { background: #fff0f1; }
.error-text { color: #9d3039; font-size: .76rem; }
.settings-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-wide { grid-column: span 2; }
.spaced-form { margin-top: 1rem; }
.backup-status { border: 1px solid var(--line); border-radius: 12px; display: grid; gap: .3rem; margin: .8rem 0 1rem; padding: .8rem; }
.backup-actions { align-items: start; display: grid; gap: 1rem; grid-template-columns: .8fr 1.2fr; }
.restore-form { background: #fff7f7; border: 1px solid #e8c8ca; border-radius: 12px; padding: .8rem; }
.checkbox-grid { align-items: center; display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr) auto; }
.checkbox-grid label { align-items: center; display: flex; flex-direction: row; }
.checkbox-grid input[type="checkbox"] { min-height: 20px; width: 20px; }
.calculator-result h2 { color: var(--green); font-size: 2rem; }
.label-filter { grid-template-columns: minmax(260px, 1fr) 180px auto; margin-bottom: 1rem; }
.ocr-status { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: .2rem; padding: .7rem; }
.recognition-visual-compare { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(120px, 170px)); }
.recognition-preview-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 12px rgba(25, 50, 42, .05); margin: 0; overflow: hidden; }
.recognition-preview-card img { aspect-ratio: 5 / 7; background: #e4eae6; display: block; object-fit: contain; width: 100%; }
.recognition-preview-card figcaption { display: grid; gap: .15rem; padding: .65rem .7rem; }
.recognition-preview-card figcaption span { color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.recognition-preview-card figcaption strong { font-size: .76rem; line-height: 1.25; overflow-wrap: anywhere; }
.ocr-text { margin-top: 1rem; }
.ocr-text pre { background: #f3f6f4; border-radius: 8px; max-height: 260px; overflow: auto; padding: .7rem; white-space: pre-wrap; }
.candidate-radio-list { border: 1px solid var(--line); border-radius: 10px; max-height: 370px; overflow-y: auto; }
.candidate-radio { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-direction: row; gap: .7rem; padding: .65rem; }
.candidate-radio:last-child { border-bottom: 0; }
.candidate-radio input { min-height: 18px; width: 18px; }
.candidate-radio span { display: grid; gap: .2rem; }
.candidate-radio small { color: var(--muted); }
.job-status { background: #eef6f2; border: 1px solid #a9cabb; border-radius: 12px; display: grid; gap: .4rem; margin: 0 0 1rem; padding: .8rem; }
.job-status progress { accent-color: var(--green); width: 100%; }
.job-status span { color: var(--muted); font-size: .8rem; }
.job-status.job-error { background: #fff0f1; border-color: #d9a2a6; }
.compact-job { margin: 1rem 0 0; }
.set-image-action { margin-left: auto; }
.settings-split { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-line { align-items: center; display: flex; flex-direction: row; gap: .5rem; }
.check-line input[type="checkbox"] { min-height: 20px; width: 20px; }
.check-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.inventory-bulk-form { padding: 1rem; }
.inventory-bulk-form table { min-width: 1050px; }
.row-check { min-height: 20px; width: 20px; }

@media (max-width: 1450px) {
  .filterbar { grid-template-columns: repeat(3, 1fr); }
  .search-field { grid-column: span 3; }
}
@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-metrics { grid-template-columns: repeat(3, 1fr); }
  .two-column-workspace { grid-template-columns: 1fr; }
  .collection-layout { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .app-sidebar { height: auto; min-height: 0; padding: .75rem 1rem; position: static; }
  .sidebar-brand { display: flex; justify-content: space-between; padding: 0; }
  .sidebar-brand span { align-self: center; }
  .main-nav { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; white-space: nowrap; }
  .main-nav a { flex: 0 0 auto; margin: 0; padding: .5rem .7rem; }
  .sidebar-footer { align-items: center; display: flex; margin-top: 0; padding: .65rem 0 0; }
  .sidebar-footer > span { display: none; }
  .sidebar-footer form { margin-left: auto; }
  .sidebar-footer .button { min-height: 36px; width: auto; }
}
@media (max-width: 720px) {
  .page { padding-top: 1.3rem; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .filterbar { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: span 2; }
  .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .detail-layout { grid-template-columns: 1fr; }
  .visual-panel { position: static; }
  .detail-image { max-height: 60vh; }
  .pagination { gap: .6rem; grid-template-columns: 1fr 1fr; }
  .pagination > span:nth-child(2) { grid-column: span 2; grid-row: 1; }
  .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
  .media-management-grid { grid-template-columns: 1fr; }
  .collection-layout { grid-template-columns: 1fr; }
  .set-sidebar { max-height: none; position: static; }
  .collection-toolbar { align-items: stretch; flex-direction: column; }
  .sale-candidate { grid-template-columns: 1fr; }
  .compact-add label { width: auto; }
  .import-summary { align-items: stretch; flex-direction: column; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-wide { grid-column: auto; }
  .backup-actions { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .settings-split { grid-template-columns: 1fr; }
  .set-image-action { margin-left: 0; }
}
@media (max-width: 420px) {
  .inventory-grid { grid-template-columns: 1fr 1fr; }
  .filterbar { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .metric { padding: .85rem; }
  .metric strong { font-size: 1.1rem; }
}