/* Gemeinsame Styles für Browser und späteren MAUI-Blazor-Host.
   Die Breakpoints passen Navigation, Kartenraster und Formular an kleine Displays an. */
/* Katalog und Preisgruppen bleiben auch ohne Internet vom manuellen Formular getrennt. */
.catalog-panel, .catalog-prices {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dce7e0;
  border-radius: 9px;
  background: #f8fbf9;
}
.catalog-panel h3, .catalog-prices h3 { font-size: 14px; }
.catalog-panel a, .catalog-prices a { text-decoration: underline; color: #126b60; }
.catalog-search { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.catalog-search input {
  flex: 1; min-width: 150px; width: 100%; padding: 11px;
  border: 1px solid #dce4df; border-radius: 7px; font-size: 12px;
}
.catalog-results { max-height: 290px; overflow: auto; margin-top: 16px; }
.catalog-results button {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  width: 100%; background: white; border: 1px solid #e1e8e3;
  border-radius: 6px; padding: 12px; margin-bottom: 6px; color: #294737;
}
.catalog-results span { font-size: 11px; overflow-wrap: anywhere; }
.catalog-results strong { font-size: 13px; }
.catalog-results .catalog-hit { flex-direction: row; align-items: center; gap: 14px; }
.catalog-hit-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.catalog-thumbnail { display: block; width: 74px; height: 102px; object-fit: contain; flex-shrink: 0; border-radius: 5px; }
.catalog-no-image { display: grid; place-content: center; text-align: center; background: #e9efea; color: #687e70; font-size: 10px; }
.catalog-detail > .catalog-thumbnail { width: 130px; height: 179px; margin-bottom: 14px; }
.catalog-selection { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; margin-top: 14px; border-radius: 7px; background: #eaf2ed; font-size: 12px; }
.catalog-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.catalog-pagination { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; }
.catalog-pagination .button { padding: 8px; white-space: normal; }
.catalog-detail { margin-top: 15px; padding: 15px; background: #eaf2ed; border-radius: 8px; font-size: 12px; line-height: 1.8; }
.catalog-detail .button { margin-top: 12px; }
.catalog-detail p { overflow-wrap: anywhere; }
.market-reference { padding-top: 18px; margin-top: 18px; border-top: 1px solid #dce7e0; }
.market-reference > strong { font-size: 12px; }
.market-reference dl { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; }
.market-reference dt { font-size: 10px; color: #667b6b; }
.market-reference dd { margin: 5px 0 0; font-size: 15px; font-weight: 600; }
.catalog-prices .button { white-space: normal; margin-top: 10px; text-align: left; }
:root {
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:#233333;
  background:#f7f8fa;
  font-synthesis:none;
  --teal:#126b60;
  --line:#e5e9e9;
  --muted:#738080
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.55;
  cursor:wait
}
a {
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible {
  outline:3px solid #47ac9c;
  outline-offset:4px
}
h1,h2,h3,p {
  margin:0
}
.app-shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:250px;
  flex-shrink:0;
  background:#fff;
  border-right:1px solid var(--line);
  padding:36px 22px 24px;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0
}
.brand {
  font-size:30px;
  font-weight:750;
  letter-spacing:-1.3px;
  display:flex;
  align-items:center;
  margin:0 10px 55px
}
.brand-icon {
  font-size:23px;
  background:var(--teal);
  color:#fff;
  border-radius:11px;
  width:37px;
  height:40px;
  display:grid;
  place-items:center;
  transform:rotate(-6deg);
  margin-right:11px
}
.brand-dot {
  color:#209886
}
.nav-caption {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  color:#939e9e;
  margin:0 14px 18px
}
.nav-item {
  width:100%;
  border:0;
  background:none;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 13px;
  border-radius:9px;
  text-align:left;
  color:#63706f;
  font-size:13px;
  margin-bottom:7px;
  font-weight:600
}
.nav-item>span {
  font-size:21px;
  width:21px
}
.nav-item small {
  margin-left:auto;
  font-size:11px;
  background:#edf1f0;
  padding:3px 6px;
  border-radius:5px
}
.nav-item.selected {
  background:#eaf4f0;
  color:var(--teal)
}
.sidebar-note {
  margin-top:auto;
  border:1px solid var(--line);
  border-radius:10px;
  padding:15px;
  font-size:12px;
  font-weight:600
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#269b76;
  margin-right:6px
}
.sidebar-note p {
  font-size:11px;
  font-weight:400;
  line-height:1.7;
  color:var(--muted);
  margin-top:8px
}
.profile {
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:23px;
  padding-top:22px;
  font-size:12px;
  font-weight:600
}
.profile>span {
  border-radius:50%;
  background:#eee7dc;
  color:#8c7960;
  padding:10px;
  font-size:10px
}
.profile small {
  display:block;
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  margin-top:5px
}
main {
  margin-left:250px;
  flex:1;
  min-width:0
}
.topbar {
  height:75px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
  font-size:12px;
  color:#677674
}
.slash {
  margin:0 14px;
  color:#bbc2c0
}
.local-badge {
  color:#568777;
  font-size:11px
}
.content {
  max-width:1530px;
  margin:auto;
  padding:42px
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:31px
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  color:#7d8d88;
  margin-bottom:12px
}
h1 {
  font-size:clamp(25px,2.25vw,34px);
  letter-spacing:-1.1px;
  font-weight:650
}
.page-heading p {
  font-size:13px;
  color:var(--muted);
  margin-top:11px
}
.button {
  border:1px solid transparent;
  border-radius:8px;
  min-height:43px;
  padding:11px 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:600;
  font-size:12px;
  white-space:nowrap
}
.primary {
  background:var(--teal);
  color:white;
  box-shadow:0 3px 5px #126b6011
}
.primary:hover {
  background:#0d584f
}
.secondary {
  background:#fff;
  border-color:#dce3e1;
  color:#536560
}
.button>span {
  font-size:19px;
  font-weight:400
}
.stats {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:18px;
  margin-bottom:39px
}
.stat {
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  background:white;
  display:flex;
  flex-direction:column
}
.stat.featured {
  background:#edf5f0;
  border-color:#dae9e0
}
.stat>span {
  font-size:12px;
  color:#60716a
}
.stat strong {
  font-size:32px;
  letter-spacing:-1px;
  margin:16px 0 12px;
  font-weight:650
}
.stat.featured strong {
  color:var(--teal)
}
.stat strong span {
  font-size:13px;
  color:#83908a;
  letter-spacing:0;
  font-weight:400;
  margin-left:5px
}
.stat small {
  color:#7c8983;
  font-size:10px
}
.collection-toolbar {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:21px
}
h2 {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.3px
}
.count {
  margin-left:8px;
  padding:3px 8px;
  background:#e9eeec;
  color:#72837b;
  font-size:11px;
  border-radius:5px
}
.filters {
  display:flex;
  gap:10px
}
.filters input {
  width:250px
}
.filters input,.filters select {
  padding:11px 13px;
  border:1px solid #e0e5e3;
  border-radius:7px;
  background:white;
  font-size:11px;
  color:#66746f
}
.empty-state {
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  min-height:392px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:35px 20px
}
.empty-art {
  height:110px;
  position:relative;
  width:160px;
  margin-bottom:16px
}
.card-outline {
  border:2px solid #b6d2c4;
  border-radius:9px;
  width:58px;
  height:78px;
  position:absolute;
  left:37px;
  top:10px;
  transform:rotate(-17deg);
  background:#f3f8f4
}
.card-outline.front {
  left:70px;
  top:21px;
  transform:rotate(11deg);
  border-color:#79a890;
  background:#e4f0e9;
  display:grid;
  place-items:center;
  font-size:28px;
  color:#6e9c81
}
.empty-art>span {
  position:absolute;
  right:7px;
  top:4px;
  color:#b8c9b2;
  font-size:23px
}
.empty-state h2 {
  font-size:21px;
  letter-spacing:-.5px
}
.empty-state p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  max-width:370px;
  margin:12px 0 23px
}
.supported-games {
  font-size:9px;
  letter-spacing:1px;
  color:#9ba5a0;
  margin-top:34px
}
.supported-games span {
  padding:0 11px
}
.bottom-note {
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  font-size:10px;
  color:#83938a;
  margin-top:24px
}
.bottom-note>span:last-child {
  color:#a2aaa6
}
.notice,.error-banner {
  padding:15px 18px;
  border-radius:8px;
  margin-bottom:22px;
  font-size:13px;
  line-height:1.6
}
.notice {
  background:#e7f3eb;
  color:#206642
}
.error-banner {
  background:#fff0ec;
  color:#9c3424
}
.error-banner button {
  margin-left:12px;
  background:transparent;
  color:inherit;
  border:1px solid currentColor;
  border-radius:4px;
  padding:4px 8px
}
.editor-grid {
  display:grid;
  grid-template-columns:minmax(250px,.75fr) minmax(420px,1.25fr);
  gap:24px;
  align-items:start
}
.panel {
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  padding:26px
}
.section-heading {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:22px
}
.step {
  display:grid;
  place-items:center;
  color:#718c7e;
  background:#eef4ef;
  font-size:10px;
  font-weight:700;
  width:25px;
  height:25px;
  border-radius:50%
}
.subtle-badge {
  font-size:9px;
  color:#81918a;
  background:#f1f4f2;
  padding:5px 7px;
  border-radius:4px;
  margin-left:auto
}
.photo-area {
  border:1px dashed #cadad1;
  border-radius:10px;
  background:#f6f9f6;
  min-height:310px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.photo-placeholder {
  text-align:center;
  padding:20px
}
.scan-icon {
  font-size:50px;
  color:#9cb9a9
}
.photo-placeholder h3 {
  font-size:14px;
  margin-top:12px
}
.photo-placeholder p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-top:12px
}
.photo-preview {
  max-width:100%;
  max-height:360px;
  object-fit:contain;
  display:block
}
.upload-label {
  font-size:12px;
  font-weight:600;
  display:block;
  margin:20px 0 10px
}
.photo-panel input[type=file] {
  width:100%;
  font-size:11px
}
.photo-panel input[type=file]::file-selector-button {
  border:1px solid #d6e0da;
  background:white;
  color:#346653;
  border-radius:6px;
  padding:9px;
  font:inherit;
  margin-right:8px;
  cursor:pointer
}
.helper {
  font-size:11px;
  line-height:1.8;
  color:#819087;
  margin-top:13px
}
.info-card {
  background:#f1f5f2;
  border-radius:8px;
  padding:16px;
  margin-top:23px;
  font-size:12px
}
.info-card p {
  font-size:11px;
  line-height:1.8;
  color:#75867c;
  margin-top:8px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.form-grid label,.draft-option>label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:#596a60
}
.form-grid label>input,.form-grid label>select,.form-grid label>textarea,.draft-option>label>input[type=number],.listing-draft-editor label>input,.listing-draft-editor label>textarea {
  display:block;
  margin-top:9px;
  width:100%;
  border:1px solid #dce4df;
  border-radius:7px;
  padding:11px 12px;
  background:#fff;
  color:#273e31;
  font-size:12px;
  min-height:40px
}
.form-grid label>input:focus,.form-grid label>select:focus,.form-grid label>textarea:focus {
  outline:2px solid #a1caba;
  outline-offset:1px
}
.form-grid textarea {
  resize:vertical
}
.wide {
  grid-column:1/-1
}
.required {
  color:#bb8470
}
.optional {
  font-size:10px;
  font-weight:400;
  color:#9aa39e;
  margin-left:3px
}
.separated {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:25px
}
.price-disclaimer {
  margin-top:-9px
}
.draft-option {
  background:#f7f8f7;
  border:1px solid #e9edea;
  border-radius:8px;
  padding:15px;
  margin-top:22px
}
.checkbox-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600
}
.checkbox-label input {
  accent-color:var(--teal);
  width:16px;
  height:16px
}
.draft-option p {
  font-size:10px;
  color:#849187;
  margin:8px 0 0 25px
}
.draft-option>label {
  margin-top:14px
}
.draft-option>label:first-child {
  margin-top:0
}
.form-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:26px;
  border-top:1px solid var(--line);
  padding-top:22px
}
fieldset {
  padding:0;
  border:0;
  margin:0;
  min-width:0
}
.validation-errors,.validation-message,.field-error {
  color:#ad412a;
  font-size:12px;
  line-height:1.7
}
.invalid {
  border-color:#c8715e!important
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:20px
}
.collection-card {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  text-align:left;
  overflow:hidden;
  color:inherit;
  transition:transform .15s,box-shadow .15s
}
.collection-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px #203d3110
}
.card-image {
  height:235px;
  background:#eef1ed;
  position:relative;
  display:flex;
  justify-content:center;
  padding:20px
}
.card-image img {
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  border-radius:5px
}
.game-badge {
  position:absolute;
  top:12px;
  left:12px;
  background:#fffc;
  border-radius:4px;
  padding:5px 7px;
  font-size:9px;
  font-weight:600
}
.card-body {
  padding:18px
}
.card-meta {
  font-size:9px;
  color:#8a9990;
  text-transform:uppercase;
  letter-spacing:.8px
}
.card-body h3 {
  font-size:16px;
  margin:8px 0 6px;
  overflow-wrap:anywhere
}
.card-body>p {
  font-size:10px;
  color:#7f8d84;
  overflow-wrap:anywhere
}
.card-value {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:21px;
  font-size:10px
}
.card-value>span {
  background:#f0f4ef;
  color:#6f8775;
  border-radius:4px;
  padding:5px 7px
}
.card-value strong {
  font-size:14px;
  color:#315d47
}
.card-foot {
  border-top:1px solid var(--line);
  margin-top:15px;
  padding-top:13px;
  color:#7f9084;
  font-size:10px;
  display:flex;
  justify-content:space-between
}
#blazor-error-ui {
  display:none;
  background:#fff0dc;
  padding:16px;
  position:fixed;
  bottom:0;
  width:100%;
  z-index:1000;
  font-size:13px
}
#blazor-error-ui a {
  text-decoration:underline;
  margin-left:10px
}
@media(min-width:1600px) {
  .content {
    padding-top:52px
  }
  .empty-state {
    min-height:460px
  }
}
@media(max-width:1150px) {
  .sidebar {
    width:210px;
    padding-inline:14px
  }
  main {
    margin-left:210px
  }
  .content {
    padding:30px 25px
  }
  .topbar {
    padding:0 25px
  }
  .stats {
    gap:12px
  }
  .stat {
    padding:19px
  }
  .stat strong {
    font-size:27px
  }
  .editor-grid {
    grid-template-columns:1fr
  }
  .photo-panel {
    max-width:none
  }
  .photo-area {
    min-height:200px
  }
  .photo-preview {
    max-height:300px
  }
  .page-heading {
    align-items:flex-start
  }
  .filters input {
    width:200px
  }
  .bottom-note {
    flex-wrap:wrap
  }
}
@media(max-width:760px) {
  .sidebar {
    position:static;
    width:100%;
    padding:17px 20px 12px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .app-shell {
    display:block
  }
  .brand {
    font-size:26px;
    margin:0 0 15px
  }
  .brand-icon {
    width:30px;
    height:33px;
    font-size:19px
  }
  .sidebar nav {
    display:flex;
    gap:8px
  }
  .nav-item {
    margin:0;
    font-size:11px;
    padding:10px
  }
  .nav-item>span {
    font-size:16px
  }
  .sidebar-note,.nav-caption,.profile {
    display:none
  }
  main {
    margin:0
  }
  .topbar {
    height:48px;
    padding:0 20px;
    font-size:10px
  }
  .content {
    padding:25px 18px
  }
  .page-heading {
    flex-direction:column;
    margin-bottom:23px;
    gap:18px
  }
  h1 {
    font-size:27px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .page-heading p {
    font-size:12px;
    line-height:1.7
  }
  .page-heading>.button {
    width:100%
  }
  .stats {
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:26px
  }
  .stat.featured {
    grid-column:1/-1
  }
  .stat {
    padding:18px
  }
  .stat>span {
    font-size:10px
  }
  .stat strong {
    font-size:27px
  }
  .stat strong span {
    display:block;
    margin:4px 0 0;
    font-size:11px
  }
  .stat small {
    line-height:1.7;
    font-size:9px
  }
  .featured strong {
    margin:12px 0 8px
  }
  .collection-toolbar {
    align-items:stretch;
    flex-direction:column
  }
  .filters input {
    width:100%;
    min-width:0
  }
  .filters select {
    max-width:125px
  }
  .empty-state {
    padding:25px 20px
  }
  .empty-state h2 {
    font-size:20px;
    line-height:1.5
  }
  .supported-games {
    font-size:8px;
    line-height:2
  }
  .supported-games span {
    padding:0 4px
  }
  .bottom-note {
    font-size:9px;
    line-height:1.6
  }
  .bottom-note>span:last-child {
    width:100%;
    text-align:center
  }
  .panel {
    padding:20px 16px
  }
  .form-grid {
    gap:16px 12px
  }
  .subtle-badge {
    font-size:8px
  }
  .section-heading h2 {
    font-size:16px
  }
  .form-actions {
    flex-wrap:wrap
  }
  .form-actions>.button {
    flex:1
  }
  .form-actions>.primary {
    flex:2
  }
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .card-image {
    height:185px;
    padding:16px 10px
  }
  .card-body {
    padding:12px
  }
  .card-body h3 {
    font-size:14px
  }
  .card-value {
    align-items:flex-start;
    flex-direction:column;
    margin-top:12px
  }
  .card-value strong {
    font-size:13px
  }
  .card-foot {
    font-size:9px;
    line-height:1.5
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
.photo-recognition {
  margin-top:20px;
  padding:16px;
  border:1px solid #dce5de;
  border-radius:12px;
  background:#f5f8f4;
  overflow-wrap:anywhere;
}
.photo-recognition .button { margin:4px 4px 4px 0; white-space:normal; }
.photo-drop-zone { border:2px dashed transparent; border-radius:12px; padding:4px; }
.photo-drop-zone.drag-active { border-color:#126b60; background:#eaf2ed; }
.drop-feedback:empty { display:none; }
.catalog-search > label { flex-basis:100%; font-size:12px; }
.catalog-search select { display:block; max-width:100%; margin-top:6px; padding:8px; border:1px solid #dce4df; border-radius:7px; background:white; }
.listing-draft-editor { margin-top:20px; display:grid; gap:12px; min-width:0; }
.listing-draft-editor label { display:grid; gap:8px; }
.listing-draft-editor .button { white-space:normal; }
.listing-preview { border:1px solid var(--line); border-radius:8px; padding:16px; background:white; overflow-wrap:anywhere; }
.listing-preview summary { cursor:pointer; font-weight:600; margin-bottom:12px; }
.listing-preview img { display:block; max-width:100%; max-height:220px; margin:12px auto; }
.listing-description { white-space:pre-wrap; line-height:1.6; }
.listing-draft-editor p { margin-left:0; }
.listing-preview .listing-description { font-size:14px; color:inherit; }
.sale-workspace { max-width:1100px; margin:0 auto; padding:28px; }
.sale-workspace > .page-heading { margin-top:28px; }
.sale-workspace > .panel, .sale-workspace > h2 { margin-bottom:24px; }
.sale-setup p { margin:14px 0; line-height:1.6; }
.sale-setup dl { display:grid; grid-template-columns:minmax(130px,1fr) 2fr; gap:12px; }
.sale-setup dt { font-weight:600; }
.sale-setup dd { margin:0; overflow-wrap:anywhere; }
.sale-check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:20px; }
.sale-card { min-width:0; overflow-wrap:anywhere; }
.sale-card-heading { display:flex; align-items:center; gap:16px; }
.sale-card-heading img { width:70px; height:100px; object-fit:contain; }
.sale-card-heading p { margin:8px 0; }
.sale-card ul { padding-left:20px; line-height:1.7; margin:14px 0; }
.sale-card details summary { cursor:pointer; font-weight:600; }
.sale-check-status { margin-top:18px; font-weight:600; }
.sale-setup form { margin-top:18px; }
.sandbox-policy-form { display:grid; gap:16px; }
.sale-setup pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#f4f7f6; padding:14px; border-radius:6px; }
.sandbox-policy-form input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; padding:10px; border:1px solid var(--line); border-radius:6px; }
.sandbox-policy-form label { display:grid; gap:6px; }
.sandbox-policy-form select { max-width:100%; min-width:0; padding:10px; border:1px solid var(--line); border-radius:6px; background:white; }
@media(max-width:760px) { .sale-workspace { padding:20px; } .sale-setup dl { grid-template-columns:1fr; gap:6px; } .sale-setup dd { margin-bottom:12px; } }
.test-details { margin-bottom:18px; }
.test-details .button { margin:4px 6px 4px 0; white-space:normal; }
.photo-enlarge, .catalog-enlarge { border:0; background:transparent; padding:0; color:inherit; cursor:zoom-in; }
.photo-enlarge { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.photo-enlarge span, .catalog-enlarge span { display:block; padding:8px; font-size:12px; }
/* Keep the breakpoint's pixel limit: percentage heights cannot bound an auto-height panel. */
.photo-enlarge .photo-preview { min-height:0; }
.card-image-viewer { width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:16px; border:0; background:#101c1a; color:#f2f7f3; }
.card-image-viewer[open] { display:flex; flex-direction:column; gap:12px; }
.card-image-viewer::backdrop { background:#101c1a; }
.viewer-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.viewer-toolbar div { display:flex; flex-direction:column; gap:5px; overflow-wrap:anywhere; }
.viewer-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.viewer-controls span { font-size:12px; }
.viewer-controls [aria-pressed=true] { outline:2px solid #72c6ab; outline-offset:2px; }
.viewer-stage { flex:1; min-height:0; overflow:auto; display:flex; justify-content:center; align-items:center; }
.viewer-stage img { max-width:100%; max-height:100%; object-fit:contain; }
.viewer-stage.zoomed { display:block; }
.viewer-stage.zoomed img { display:block; width:max(100%, 1000px); max-width:none; max-height:none; height:auto; margin:0 auto; }

/* Shared controls: visible keyboard focus and comfortable touch targets. */
:root { --muted: #536760; }
:focus-visible { outline:3px solid #12694f; outline-offset:4px; }
.button, .nav-item, select, input:not([type=checkbox]), summary { min-height:44px; }
summary { display:list-item; padding:10px 0; cursor:pointer; font-weight:650; }
input[type=checkbox] { min-width:20px; min-height:20px; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:1000; background:white; color:#174c3b; padding:14px; }
.skip-link:focus { top:12px; }
.workflow-steps { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 24px; }
.workflow-steps a,.workflow-steps span { display:flex; align-items:center; padding:10px 12px; border:1px solid #cbd8d2; border-radius:8px; font-size:13px; color:#384e45; text-decoration:none; }
.workflow-steps [aria-current=step] { background:#e1f1e8; border:2px solid #216249; font-weight:700; }
.workflow-steps span { border-style:dashed; }
.list-controls,.pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:16px 0; }
.list-controls label { display:flex; align-items:center; gap:10px; }
.list-controls select { max-width:100%; padding:8px; border:1px solid #9fafaa; border-radius:6px; background:white; }
.draft-list { display:grid; gap:8px; }
.draft-row { display:flex; justify-content:space-between; gap:12px; padding:14px; border:1px solid #cbd8d2; border-radius:8px; color:#174c3b; overflow-wrap:anywhere; }
.draft-row[aria-current=true] { background:#e1f1e8; border-width:2px; }
.sale-card>.button,.draft-preparation>.button { margin:8px 0; }
@media(max-width:600px) {
 .sidebar nav { flex-wrap:wrap; }
 .workflow-steps { gap:6px; } .workflow-steps a,.workflow-steps span { flex:1 1 140px; }
 .list-controls { align-items:stretch; } .list-controls label { flex-wrap:wrap; }
 .pagination .button { flex:1; white-space:normal; }
 .draft-row { flex-direction:column; }
 .form-actions { flex-wrap:wrap; } .form-actions .button { flex:1; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* Dark theme: shared surfaces for collection, forms, sales and settings. Photos remain unchanged. */
:root { color-scheme:dark; color:#e4eae8; background:#101715; --teal:#71d5b2; --line:#34473e; --muted:#afc0b7; }
body { background:#101715; color:#e4eae8; }
.sidebar,.topbar,.panel,.stat,.collection-card,.listing-preview,.catalog-panel,.catalog-prices,
.catalog-results button,.sandbox-policy-form input,.sandbox-policy-form select { background:#19231f; color:#e4eae8; border-color:var(--line); }
body input,body select,body textarea,.filters input,.filters select,.list-controls select { background:#101a16; color:#e4eae8; border-color:#4b6256; }
input::placeholder,textarea::placeholder { color:#a5b6ad; }
body .button.secondary { background:#24352c; color:#e0ebe5; border-color:#4b6256; }
body .button.primary,.brand-icon { background:#71d5b2; color:#10291e; }
body .button.primary:hover { background:#95e4c8; }
body .helper,body small,.nav-caption,.nav-item,.topbar,.eyebrow,.market-reference dt,.card-body p,.card-foot,.card-value span,.stat>span,.stat small { color:#afc0b7; }
body .nav-item.selected,.catalog-selection,.catalog-detail,.info-card,.draft-option,.photo-recognition,.workflow-steps [aria-current=step],.draft-row[aria-current=true] { background:#233c30; color:#e0f2e8; border-color:#4b7962; }
.photo-area,.card-image,.catalog-no-image,.stat.featured,.listing-draft-editor,.sale-setup pre { background:#14231b; color:#d3e6db; }
body .notice { background:#203c2d; color:#cbf5dc; }
body .error-banner,body .field-error,body .validation-message { color:#ffb8aa; }
body .error-banner { background:#3b2524; }
body .workflow-steps a,body .workflow-steps span,.draft-row { color:#cce3d7; border-color:#4b6256; }
body .catalog-panel a,body .catalog-prices a { color:#93e4c4; }
body .skip-link { background:#284735; color:#fff; }
:focus-visible { outline-color:#a0efd0; }
.market-reference,.catalog-prices,.catalog-panel { border-color:#34473e; }
.test-details,.advanced-prices,.price-history { margin:14px 0; padding:10px 14px; border:1px solid #405749; border-radius:10px; background:#142019; }
.test-details summary,.advanced-prices summary,.price-history summary { color:#d6eade; }
.form-actions { position:sticky; bottom:0; padding:14px 0; background:#19231f; z-index:5; border-top:1px solid #405749; }
body .catalog-selection .catalog-thumbnail { width:70px; height:96px; }
body .catalog-selection { gap:6px; }
@media(max-width:760px) { .sidebar nav { flex-wrap:wrap; } }
/* Match the existing form selectors so native controls also use the dark palette. */
body .form-grid input,body .form-grid select,body .form-grid textarea,
body .draft-option input,body .listing-draft-editor input,body .listing-draft-editor textarea,
body .catalog-search select,body .catalog-search input { background:#101a16; color:#e4eae8; border-color:#4b6256; }
body label,body .form-grid label,body .draft-option label,body .draft-option p,body .info-card p { color:#bcd0c4; }
body .game-badge,body .step,body .subtle-badge,body .count,body .nav-item small { background:#2c4538; color:#d8efe2; }
body .form-actions { position:static; }

/* Dracard: card-first collection and a separate read-only detail surface. */
:root { background:#06110e; --teal:#59efb2; }
body { background:radial-gradient(ellipse at 80% 0%,#12372a 0,transparent 48%),#06110e; }
.sidebar { background:#081813; width:220px; }
.brand { letter-spacing:-1px; font-size:26px; }
.brand-icon { border:1px solid #59efb2; border-radius:10px; transform:rotate(-9deg); box-shadow:0 0 24px #49eda322; }
.page-heading h1 { font-size:34px; letter-spacing:-1px; }
.eyebrow { color:#6dddb0; letter-spacing:2px; }
body .button.primary { background:linear-gradient(120deg,#78f6bc,#36dca0); border-radius:12px; box-shadow:0 4px 20px #36dca018; }
.card-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px; }
body .collection-card { background:linear-gradient(160deg,#142920,#0a1812); border:1px solid #244033; border-radius:14px; transition:transform .18s,border-color .18s; }
body .collection-card:hover { transform:translateY(-5px); border-color:#64e9b2; box-shadow:0 8px 28px #0005; }
body .card-image { height:245px; padding:14px 10px 6px; background:radial-gradient(ellipse,#28533955,transparent 75%); }
.card-image img { filter:drop-shadow(0 6px 9px #0008); }
.card-body { padding:12px; }.card-body h3 { font-size:15px; }
body .card-value strong { color:#66efb3; }.card-foot { border-color:#244033; }
.stats { gap:12px; }.stat { padding:20px; border-radius:14px; }.stat strong { font-size:27px; }
body .topbar { background:transparent; }.content { max-width:1600px; }
.dracard-detail { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr); gap:36px; align-items:start; }
.dracard-art { padding:30px; background:radial-gradient(ellipse,#25634855,transparent 70%); border:1px solid #294c3b; border-radius:24px; }
.dracard-art img { max-width:100%; width:auto; max-height:520px; object-fit:contain; border-radius:14px; filter:drop-shadow(0 12px 25px #0009); }
.dracard-facts { min-width:0; }.dracard-facts h2 { font-size:32px; letter-spacing:-.8px; margin:10px 0; }
.detail-chips { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }.detail-chips>span { flex:1; padding:14px; background:#12251c; border:1px solid #294c3b; border-radius:12px; color:#a8c5b6; font-size:12px; }.detail-chips strong { display:block; color:#e3f6ec; margin-top:6px; font-size:14px; }
.detail-value { padding:24px; border:1px solid #315d46; border-radius:16px; background:linear-gradient(130deg,#1a3c2a,#0c1d15); }.detail-value>strong { display:block; color:#75f3ba; font-size:32px; margin-top:10px; }.detail-value p { color:#a8c5b6; font-size:12px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }.detail-notes { white-space:pre-wrap; overflow-wrap:anywhere; }
.mobile-dock { display:none; }
@media(min-width:761px){.app-shell>main { margin-left:220px; }}
@media(max-width:760px){
 .sidebar { width:auto; padding:16px 20px; }.sidebar nav { display:none; }.brand { font-size:24px; }
 .topbar { display:none; }.content { padding:24px 16px 110px; }.page-heading h1 { font-size:28px; }
 .dracard-detail { grid-template-columns:minmax(0,1fr); gap:20px; }.dracard-art { padding:20px; }.dracard-art img { max-height:370px; }
 .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }body .card-image { height:215px; }
 .mobile-dock { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:30; justify-content:space-around; align-items:center; padding:10px 6px calc(10px + env(safe-area-inset-bottom)); background:#091b15f5; border-top:1px solid #315d46; }
 .mobile-dock button,.mobile-dock a { display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none; color:#bbd8ca; font-size:10px; padding:6px; min-height:48px; text-decoration:none; }.mobile-dock span { font-size:23px; }
 .mobile-dock .dock-scan { background:#61edb0; color:#062217; border-radius:18px; margin-top:-28px; min-width:62px; min-height:64px; box-shadow:0 0 0 5px #0a1d15; }
 .sale-workspace { padding-bottom:90px; }
}

/* Price is the primary signal; condition stays readable without a badge. */
body .card-value { flex-direction:column; align-items:flex-start; gap:6px; margin-top:12px; }
body .card-value>span { order:2; background:transparent; color:#b2c9bd; padding:0; border-radius:0; font-size:12px; line-height:1.4; }
body .card-value strong { color:#b5ffda; font-size:19px; font-weight:700; line-height:1.3; }
.brand .dracard-logo { display:block; width:160px; height:160px; object-fit:contain; }
@media(max-width:760px) { .brand .dracard-logo { width:88px; height:88px; } }
.dracard-art .detail-preview { width:100%; height:440px; }
@media(max-width:760px) { .dracard-art .detail-preview { height:350px; } }
@media(prefers-reduced-motion:reduce) { body .collection-card { transition:none; } body .collection-card:hover { transform:none; } }
/* Keep the first cards within reach on smaller screens. */
@media(max-width:760px) {
 .page-heading { gap:12px; margin-bottom:18px; }
 .page-heading p { margin-top:6px; }
 .stats { gap:8px; margin-bottom:22px; }
 .stat { padding:12px; min-height:0; }
 .stat strong { font-size:23px; margin:8px 0; }
 .stat small { font-size:10px; margin-top:4px; }
 .collection-toolbar { gap:10px; margin-bottom:12px; }
}
.brand { flex-direction:column; gap:4px; }
.market-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; padding:20px; background:#10281d; border:1px solid #365c47; border-radius:16px; }
.market-summary strong { display:block; color:#b5ffda; font-size:28px; margin:8px 0; }
.market-summary small { display:block; }
.market-summary>p { grid-column:1/-1; margin:0; }
.shared-prices { margin-top:20px; }
@media(max-width:760px) { .market-summary { grid-template-columns:1fr; } .brand { flex-direction:column; align-items:flex-start; } .brand .dracard-logo { width:64px; height:64px; } }
.personal-totals { margin:0 0 20px; } .personal-totals>summary { color:#b9d9c9; cursor:pointer; margin-bottom:12px; }
/* Price hierarchy: amount first, coverage and provenance stay close but quiet. */
.market-summary .summary-value { min-width:0; }
.market-summary .summary-value>span:first-child { font-size:13px; color:#c8e7d8; }
.market-summary .summary-value>small { color:#bad4c6; font-size:12px; line-height:1.5; }
.price-status { display:inline-block; margin-top:8px; color:#b6dac7; font-size:12px; line-height:1.5; }
.price-stale { color:#f3d094; }
.price-explanation { grid-column:1/-1; border-top:1px solid #2b4c3c; padding-top:12px; font-size:12px; line-height:1.6; color:#bad4c6; }
.price-explanation summary { cursor:pointer; color:#d7ece1; }
.price-explanation p { margin:10px 0; }
.price-panel-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.price-panel-heading>span { font-size:12px; color:#b4d4c4; }
.price-quote { padding:18px; margin:12px 0; border:1px solid #315640; border-radius:14px; background:#0d2118; }
.price-quote>span:first-child { color:#c6e3d3; font-size:13px; }
.price-quote .quote-amount { display:block; font-size:30px; color:#b5ffda; margin:8px 0 4px; }
.price-quote>small { display:block; line-height:1.6; }
.price-periods { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 8px; }
.price-periods dt { font-size:12px; color:#aecaBA; }
.price-periods dd { margin:5px 0 0; font-size:17px; color:#edf9f2; }
.price-fetch-date { display:block; color:#b5cdbf; line-height:1.6; margin:10px 0; }
body .card-value .own-value-label { color:#a9c3b5; font-size:10px; }
@media(max-width:760px) {
 .market-summary { grid-template-columns:1fr 1fr; gap:14px; padding:16px; }
 .market-summary strong { font-size:clamp(18px,5.2vw,25px); overflow-wrap:anywhere; }
 .market-summary .summary-value>span:first-child { font-size:12px; }
 .market-summary .summary-value>small { font-size:11px; }
}
/* One visible price; provenance and history remain available on demand. */
.compact-market-price { padding:20px; margin:18px 0; background:linear-gradient(130deg,#153728,#0d2017); border:1px solid #315d46; border-radius:16px; }
.main-market-price { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.compact-market-price .quote-amount { display:block; color:#b5ffda; font-size:34px; font-weight:700; margin:8px 0; line-height:1.2; }
.compact-market-price>small,.main-market-price small { display:block; }
.compact-market-price .price-explanation { margin-top:14px; }
.price-refresh { border:1px solid #3c6650; border-radius:50%; width:44px; height:44px; flex-shrink:0; background:#183b2a; color:#b5ffda; font-size:26px; cursor:pointer; }
.price-refresh:disabled { opacity:.6; cursor:wait; }
.detail-chips { margin:16px 0; gap:8px; }
.detail-chips>span { padding:10px; }
.price-comparison { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; width:100%; margin-top:14px; }
.price-comparison>div { min-width:0; }
.price-comparison strong { display:block; color:#b5ffda; font-size:19px; margin:6px 0; overflow-wrap:anywhere; }
.price-comparison small { display:block; color:#bcd9ca; font-size:11px; line-height:1.5; }
.sale-price { border-left:1px solid #345441; padding-left:10px; }
.price-comparison .sale-price strong { color:#eef8f2; }
.price-difference { display:block; margin-top:10px; color:#ffe0a8; font-size:11px; line-height:1.5; }
.compact-market-price .main-market-price { display:block; position:relative; padding-right:40px; }
.main-market-price .price-refresh { position:absolute; right:-6px; top:0; }
.main-market-price .price-comparison strong { font-size:28px; }
.collection-chart { border:1px solid #2a4b3a; border-radius:14px; background:#0c1e15; padding:18px; margin-bottom:20px; }
.chart-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chart-heading h2 { font-size:15px; }
.collection-chart svg { display:block; width:100%; max-height:230px; margin-top:12px; overflow:visible; }
.collection-chart svg text { fill:#bed6c8; font-size:11px; }
.chart-grid { stroke:#243d30; }.chart-axis { stroke:#6b9380; }.chart-line { stroke:#79f1b7; stroke-width:2; }.chart-point { fill:#a0ffd0; }
.collection-chart p { font-size:12px; color:#bdd3c7; }.collection-chart table { width:100%; text-align:left; }.collection-chart td,.collection-chart th { padding:4px; }
@media(max-width:760px){.main-market-price .price-comparison strong{font-size:22px;}.card-body{padding:10px;}.price-comparison{gap:6px;}.price-comparison strong{font-size:16px;}.sale-price{padding-left:6px;}.chart-heading{align-items:flex-start;}.chart-heading small{white-space:nowrap;}}
@media(max-width:760px){.collection-chart svg text{font-size:17px;}}
/* Wider price columns keep currency and amount together. */
@media(min-width:761px){.card-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));}}
.price-comparison strong{font-size:17px;white-space:nowrap;overflow-wrap:normal;}
@media(max-width:760px){.price-comparison strong{font-size:14px;}.price-comparison small{font-size:10px;}}
.capture-progress{display:flex;list-style:none;gap:12px;padding:0;margin:0 0 20px;flex-wrap:wrap;color:#b3d7c4;font-size:13px;}
.capture-progress li{padding:10px 14px;border:1px solid #355440;border-radius:24px;}
.capture-extras{border-top:1px solid #355440;margin:18px 0;padding:16px 0;}
.capture-extras summary{cursor:pointer;color:#c4dece;margin-bottom:12px;}
.capture-extras .form-grid{margin-top:14px;}
.capture-market>summary,.recognition-info>summary { cursor:pointer;color:#badbc9;font-size:12px; }.capture-market { margin:14px 0; }.recognition-info { margin:10px 0; font-size:12px; }
.capture-new { grid-template-columns:minmax(0,1fr); max-width:820px; margin:auto; } .capture-new [hidden] { display:none!important; } .capture-new .photo-area { min-height:180px; } .capture-new .photo-preview { max-height:280px; }.capture-new .photo-panel>.form-grid { margin-bottom:18px; }
.period-comparison{margin:18px 0;padding:16px;border:1px solid #344f43;border-radius:12px}.period-values{display:flex;gap:16px;flex-wrap:wrap}.period-values span{font-size:12px;color:#c2d9ce}.period-values strong{display:block;color:#a6ffd3;font-size:20px;margin:6px 0}.period-comparison small{display:block;margin-top:8px;color:#b5cabe}
.chart-gap{stroke-dasharray:5 4}