/* Kartenkiste – System „Archiv“: warmes Papier, Pokéball-Rot als Akzent, Gelb nur für Auswahl und Hinweise.
   Newsreader für Titel, Source Sans 3 für Text, IBM Plex Mono für Zahlen, Nummern und Dateinamen.
   Hell/Dunkel: data-theme am <html> (setzt das kleine Skript im Kopf – nach Systemeinstellung oder deiner Wahl). */

/* Schriften liegen in public/fonts (SIL Open Font License 1.1, Lizenztexte OFL-*.txt daneben) – nichts wird von
   Google nachgeladen. Den Latin-Ext-Teil holt der Browser nur, wenn solche Zeichen vorkommen (unicode-range). */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/newsreader-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/newsreader-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/source-sans-3-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, monospace;

  --page: #f1ece3;
  --surface: #fbf9f4;
  --surface-2: #f4f0e8;
  --input: #fff;
  --line: #e2dacc;
  --line-soft: #ece6da;
  --line-strong: #d7cfc0;
  --ink: #241f19;
  --text-2: #4a4238;
  --muted: #74695c;
  --faint: #a0968a;
  --accent: #d9342b;
  --accent-hover: #b3261e;
  --accent-ink: #fff;
  --nav-bg: #fbe9e6;
  --nav-ink: #b3261e;
  --nav-dot: #d7cfc0;
  --select-bg: #fdf3d2;
  --select-line: #f2c230;
  --row-selected: #fdf8e6;
  --check: #b9af9f;
  --invert: #241f19;
  --invert-ink: #fbf9f4;
  --bar: #241f19;
  --bar-ink: #fbf9f4;
  --bar-muted: #a69c8e;
  --bar-line: #4a4238;
  --stripe-a: #e6dfd2;
  --stripe-b: #f1ece3;
  --backdrop: rgb(36 31 25 / 55%);
  --shadow: 0 1px 2px rgb(36 31 25 / 5%), 0 4px 14px rgb(36 31 25 / 5%);
  --shadow-lg: 0 30px 80px rgb(0 0 0 / 35%);

  --ok-bg: #e3f2e8; --ok: #1f7a4c;
  --checked-bg: #e4ebf8; --checked: #2a5fb4;
  --maybe-bg: #fbf0c9; --maybe: #8a6a00;
  --warn-bg: #fde7d7; --warn: #b5470b;
  --bad-bg: #fbe3e1; --bad: #b3261e; --bad-line: #f0a39c;
  --neutral-bg: #ece7de; --neutral: #6b6459;
  --de-bg: #fdf3d2; --de: #7a5c00;
  --en-bg: #e4ebf8; --en: #2a5fb4;
  --ja-bg: #fbe3e1; --ja: #b3261e;

  /* Rahmen im Foto – kräftig, damit sie auf jedem Foto zu sehen sind */
  --frame-ok: #3fbf7f;
  --frame-maybe: #f2c230;
  --frame-warn: #f08a4b;
  --frame-bad: #e5584f;
  --frame-off: #a0968a;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --page: #1b1815;
  --surface: #26211c;
  --surface-2: #2f2923;
  --input: #1f1b17;
  --line: #3b332b;
  --line-soft: #332c25;
  --line-strong: #4a4238;
  --ink: #f1eadf;
  --text-2: #d8cfc2;
  --muted: #a69c8e;
  --faint: #7d7366;
  --accent: #ef6a5f;
  --accent-hover: #f48a80;
  --accent-ink: #1b1815;
  --nav-bg: #3d241f;
  --nav-ink: #ef6a5f;
  --nav-dot: #4a4238;
  --select-bg: #3d3410;
  --select-line: #8a6a00;
  --row-selected: #2e2914;
  --check: #7d7366;
  --invert: #f1eadf;
  --invert-ink: #1b1815;
  --bar: #3a322a;
  --bar-ink: #f1eadf;
  --bar-muted: #a69c8e;
  --bar-line: #5a5046;
  --stripe-a: #2f2923;
  --stripe-b: #26211c;
  --backdrop: rgb(0 0 0 / 60%);
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 25%);

  --ok-bg: #1f3a2c; --ok: #7ed3a2;
  --checked-bg: #1f2d4a; --checked: #9db8ea;
  --maybe-bg: #3d3410; --maybe: #f2c230;
  --warn-bg: #45271a; --warn: #f3a06e;
  --bad-bg: #4a1f1c; --bad: #f0a39c; --bad-line: #7a302a;
  --neutral-bg: #2f2923; --neutral: #a69c8e;
  --de-bg: #3d3410; --de: #f2c230;
  --en-bg: #1f2d4a; --en: #9db8ea;
  --ja-bg: #4a1f1c; --ja: #f0a39c;
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.45 var(--sans); color: var(--ink); background: var(--page); }
img { display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { font-weight: 500; }
.mono { font-family: var(--mono); }
.muted, .sub { color: var(--muted); }
.sub { font-size: 12.5px; }
.faint { color: var(--faint); }
.grow { flex: 1; }
.name { font-weight: 600; }
.warn-text { color: var(--warn); }
code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.serif { font-family: var(--serif); font-weight: 500; }

/* ---------- Bedienelemente ---------- */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 600 13px/1.3 var(--sans);
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
button.secondary, .button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.secondary:hover, .button.secondary:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }
.card button.secondary, .card .button.secondary { border-color: var(--line-strong); }
button.ghost { background: none; border-color: transparent; color: var(--muted); font-weight: 400; padding-left: 8px; padding-right: 8px; }
button.ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }
button.small, .button.small { padding: 6px 12px; font-size: 12.5px; }
button:disabled { opacity: 0.5; cursor: default; }
.link-button, button.link-button {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.link-button:hover, button.link-button:hover { background: none; color: var(--accent-hover); text-decoration: underline; }
.link-button.muted { color: var(--muted); font-weight: 400; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input[type='search'], input[type='text'], input[type='password'], input[type='url'], input[type='number'], input[type='date'], select, textarea {
  font: 14px/1.35 var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 0;
}
textarea { resize: vertical; line-height: 1.45; }
select { padding-right: 28px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 1.5px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
input[type='search'] { flex: 1 1 260px; }
.field { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.field input, .field textarea, .field select { background: var(--input); }

input[type='checkbox'] {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--check);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}
input[type='checkbox']:checked { background: var(--accent); border-color: var(--accent); }
input[type='checkbox']:checked::after { content: ''; width: 8px; height: 4px; margin-top: -2px; border: solid var(--accent-ink); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
input[type='radio'] {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--check);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
input[type='radio']:checked { border: 5px solid var(--accent); }
input[type='checkbox']:focus-visible, input[type='radio']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Schalter (an/aus) */
input[type='checkbox'].switch { width: 34px; height: 20px; border: none; border-radius: 999px; background: var(--line-strong); position: relative; place-content: normal; transition: background 0.15s; }
input[type='checkbox'].switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; margin: 0; border: none; border-radius: 50%; background: #fff; transform: none; transition: left 0.15s; }
input[type='checkbox'].switch:checked { background: var(--accent); }
input[type='checkbox'].switch:checked::after { left: 16px; }

.check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; cursor: pointer; }
.segmented { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.segmented button { border: none; border-radius: 0; background: none; color: var(--muted); padding: 7px 12px; font-size: 13px; font-weight: 600; }
.segmented button:hover { background: var(--surface-2); color: var(--ink); }
.segmented button.active { background: var(--invert); color: var(--invert-ink); }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active + button, .segmented button + button.active { border-left-color: transparent; }

.spinner { display: inline-block; flex: none; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinner.big { width: 26px; height: 26px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Gerüst: Seitenleiste, Kopf, Handy-Leiste ---------- */

.app { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 228px;
  height: 100vh;
  padding: 18px 14px 16px;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.logo { position: relative; flex: none; width: 20px; height: 27px; border-radius: 4px; background: var(--accent); }
.logo::after { content: ''; position: absolute; left: 5px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-sizing: border-box; }
.brand-name { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.nav { display: flex; flex-direction: column; }
.nav-group { padding: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nav-dot); }
.nav a .label { flex: 1; }
.nav a .ico, .nav a .short, .sidebar-links .short { display: none; }
.nav a.active { background: var(--nav-bg); color: var(--nav-ink); font-weight: 600; }
.nav a.active .dot { background: var(--accent); }
.pill { font: 600 11px/1.4 var(--mono); padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.pill:empty { display: none; }
.status-card { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.status-card .state { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.status-card .file { margin-top: 4px; font: 11.5px var(--mono); color: var(--ink); }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status-dot.busy { background: #f2c230; }
.status-dot.bad { background: var(--accent); }
.sidebar-links { display: flex; justify-content: space-between; gap: 8px; padding: 12px 10px 0; }
.sidebar-links .link-button { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.sidebar-links .link-button:hover { color: var(--ink); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { padding: 22px 28px 40px; }
.page { display: none; }
.page.active { display: block; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; margin-bottom: 16px; }
.page-head h1 { margin: 0; font: 500 30px/1.1 var(--serif); letter-spacing: -0.01em; }
.page-head h1.mono { font: 500 24px/1.2 var(--mono); overflow-wrap: anywhere; }
.head-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; padding-bottom: 4px; font-size: 13px; color: var(--muted); }
.head-stats b { font: 500 15px var(--mono); color: var(--ink); }
.head-stats .warn { color: var(--warn); font-weight: 600; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; padding-bottom: 1px; }
.breadcrumb { margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.mobile-status { display: none; }

/* Hinweise oben (Programm aktualisiert, Erkennung angehalten) */
#banners:empty { display: none; }
#banners { padding: 16px 28px 0; display: grid; gap: 10px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.banner p { margin: 0; flex: 1; min-width: 220px; }
.banner.bad { background: var(--bad-bg); border-color: var(--bad-line); }
.banner.bad b { color: var(--bad); }
.banner.warn { background: var(--warn-bg); border-color: transparent; }
.banner.warn b { color: var(--warn); }
.banner.info { background: var(--select-bg); border-color: var(--select-line); }
.banner .link-button { color: var(--bad); }

/* Handy: Leiste unten und „Mehr“ */
.tabbar { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--backdrop); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); }
.sheet::before { content: ''; display: block; width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--line-strong); }
.sheet a, .sheet button.sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border: none; border-radius: 10px; background: none; color: var(--ink); font: 500 15px var(--sans); text-decoration: none; justify-content: flex-start; }
.sheet a:hover, .sheet button.sheet-item:hover { background: var(--surface-2); color: var(--ink); }
.sheet .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nav-dot); }
.sheet a.active { color: var(--nav-ink); font-weight: 600; }
.sheet a.active .dot { background: var(--accent); }
.sheet hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; }

/* ---------- Bausteine ---------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.card-title { margin: 0; font: 500 20px/1.25 var(--serif); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.card-head .sub { flex: 1; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 2px 10px; }
.section-head h2 { margin: 0; font: 500 20px/1.25 var(--serif); }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.empty b { color: var(--ink); }
.empty p { margin: 6px 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .filters { display: contents; }
.filter-toggle { display: none; }

/* Status-Marken */
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral); }
.badge.sicher, .badge.etikett, .badge.fertig { background: var(--ok-bg); color: var(--ok); }
.badge.geprüft, .badge.manuell { background: var(--checked-bg); color: var(--checked); }
.badge.wahrscheinlich, .badge.recherchiert { background: var(--maybe-bg); color: var(--maybe); }
.badge.unsicher { background: var(--warn-bg); color: var(--warn); }
.badge.unbekannt, .badge.fehler { background: var(--bad-bg); color: var(--bad); }
.badge.läuft { background: var(--maybe-bg); color: var(--maybe); }
.status-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
.status-mark.sicher, .status-mark.etikett { background: var(--ok); }
.status-mark.geprüft, .status-mark.manuell { background: var(--checked); }
.status-mark.wahrscheinlich, .status-mark.recherchiert { background: var(--maybe); }
.status-mark.unsicher { background: var(--warn); }
.status-mark.unbekannt { background: var(--bad); }

/* Sprache und Grading */
.lang { display: inline-block; padding: 1px 5px; border-radius: 4px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.02em; vertical-align: 1px; background: var(--neutral-bg); color: var(--neutral); }
.lang-de { background: var(--de-bg); color: var(--de); }
.lang-en { background: var(--en-bg); color: var(--en); }
.lang-ja { background: var(--ja-bg); color: var(--ja); }
.grade { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 500 10.5px/1.4 var(--mono); vertical-align: 1px; white-space: nowrap; background: var(--invert); color: var(--invert-ink); }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 11.5px var(--mono); background: var(--surface-2); color: var(--text-2); }

/* Preise: gepunktet = zwei Quellen, gestrichelt = nur eine, ⚠ = Version unklar */
.price { font-family: var(--mono); text-decoration: underline dotted var(--check); text-underline-offset: 3px; cursor: help; }
.price.warn { color: var(--warn); font-weight: 600; text-decoration: none; }
.price.unchecked { color: var(--muted); text-decoration-style: dashed; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { font-family: var(--mono); }
a.cm-link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
a.cm-link:hover { color: var(--accent-hover); text-decoration: underline; }

details.versions { font-size: 12px; }
details.versions summary { cursor: pointer; color: var(--muted); font-weight: 600; white-space: nowrap; list-style: none; }
details.versions summary::-webkit-details-marker { display: none; }
details.versions summary::after { content: ' ▾'; }
details.versions[open] summary::after { content: ' ▴'; }
details.versions.warn summary { color: var(--warn); }
details.versions summary:hover { color: var(--accent); }
details.versions .menu { margin-top: 6px; padding: 8px 10px; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
details.versions ul { list-style: none; margin: 6px 0; padding: 0; }
details.versions li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
details.versions li.current a { font-weight: 700; }

.no-image { display: grid; place-items: center; aspect-ratio: 63 / 88; padding: 4px; border: 1px dashed var(--line-strong); border-radius: 5px; color: var(--muted); font-size: 11.5px; text-align: center; }
.placeholder-stripes { background: repeating-linear-gradient(135deg, var(--stripe-a) 0 5px, var(--stripe-b) 5px 10px); }

/* Auswahlleiste: am Rechner oben, am Handy unten */
.selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; padding: 8px 14px; background: var(--select-bg); border: 1px solid var(--select-line); border-radius: 8px; }
.selection-bar .sel-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.selection-bar .count { font-weight: 600; }
.selection-bar .money { font-size: 13px; }
.selection-bar .grow { min-width: 8px; }
.selection-bar .link-button { color: var(--ink); }
.selection-bar .link-button.muted { color: var(--muted); }
.selection-bar .compact { display: none; }

/* Hover-Vorschau (nur mit Maus) */
.zoom { position: fixed; z-index: 50; pointer-events: none; padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: 0 10px 40px rgb(0 0 0 / 35%); }
.zoom img { width: 280px; border-radius: 6px; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%); max-width: min(640px, 92vw); padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgb(0 0 0 / 25%); font-weight: 600; }
.toast.ok { background: var(--ok-bg); color: var(--ok); }
.toast.info { background: var(--checked-bg); color: var(--checked); }
.toast.bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- Übersicht ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--line-strong); color: inherit; }
.kpi .big { font: 500 26px/1.25 var(--mono); overflow-wrap: anywhere; }
.kpi .big .warn { font: 600 14px var(--sans); color: var(--warn); }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .label b { color: var(--ink); font-weight: 600; }
.kpi .extra { margin-top: 6px; font-size: 12px; color: var(--muted); }
.kpi .extra.mono { font: 11.5px var(--mono); }
.overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px; align-items: start; }
.overview > div { display: grid; gap: 14px; }
.tasks { display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
.task:hover { border-color: var(--line-strong); background: var(--surface-2); color: inherit; }
.task .n { min-width: 44px; padding: 4px 6px; border-radius: 6px; text-align: center; font: 500 20px/1.3 var(--mono); }
.task .what { flex: 1; min-width: 0; }
.task .what b { display: block; font-weight: 600; }
.task .what span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.task .go { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.task.t-warn .n { background: var(--warn-bg); color: var(--warn); }
.task.t-maybe .n { background: var(--maybe-bg); color: var(--maybe); }
.task.t-checked .n { background: var(--checked-bg); color: var(--checked); }
.task.t-bad .n { background: var(--bad-bg); color: var(--bad); }
.done-note { padding: 14px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.chart-change { margin-left: auto; font: 500 13px var(--mono); color: var(--ok); }
.chart-change.down { color: var(--bad); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; border-bottom: 1px solid var(--line); }
.bars .bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--line); }
.bars .bar.last { background: var(--accent); }
.bars .bar.none { background: none; }
.bar-labels { display: flex; justify-content: space-between; margin-top: 6px; font: 11px var(--mono); color: var(--muted); }
.chart-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.events { display: grid; }
.event { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.event:first-child { border-top: none; }
.event .when { padding-top: 2px; font: 11.5px var(--mono); color: var(--muted); }
.event .what { font-weight: 600; overflow-wrap: anywhere; }
.event .details { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Inventar ---------- */

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
th { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom-color: var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.sorted { color: var(--ink); }
th.select, td.select { width: 34px; padding-right: 0; }
td.thumb { width: 52px; padding: 5px 8px; }
td.thumb img { width: 36px; border-radius: 3px; cursor: zoom-in; }
td .mono, td.mono { font-size: 13px; }
tr.card-row { cursor: pointer; }
tr.card-row:hover td { background: var(--surface-2); }
tr.card-row.selected td { background: var(--row-selected); }
tr.group-row td { padding: 14px 10px 8px; background: var(--surface); cursor: pointer; border-bottom-color: var(--line); }
.group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.group-title b { font: 500 19px/1.25 var(--serif); }
.group-title .caret { width: 14px; color: var(--muted); font-family: var(--sans); }
tr.copies td { padding: 10px 12px 12px 86px; background: var(--surface-2); }
.copy-list { display: flex; flex-wrap: wrap; gap: 10px; }
.copy { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12px; }
.copy:hover { border-color: var(--muted); }
.copy img { width: 30px; border-radius: 3px; }
.copy .file { font: 12px var(--mono); overflow-wrap: anywhere; }
.copy .show { color: var(--accent); font-weight: 600; }
.table-foot { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 10px 14px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
.table-foot b { color: var(--ink); font-weight: 600; }
.table-foot .money { color: var(--ink); font-weight: 600; }

/* Kacheln */
.select-all { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 16px 0 12px; padding: 6px 2px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.group-head:first-child { margin-top: 0; }
.group-head b { font: 500 19px/1.25 var(--serif); }
.group-head .caret { width: 14px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.tile:hover { border-color: var(--line-strong); }
.tile.selected { border-color: var(--accent); }
.tile-check { position: absolute; top: 14px; left: 14px; z-index: 2; display: grid; padding: 3px; border-radius: 6px; background: var(--surface); cursor: pointer; }
.tile-image { position: relative; display: grid; place-items: center; aspect-ratio: 63 / 88; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.tile-image > img.main-img { width: 100%; height: 100%; object-fit: contain; }
.tile-image .no-image { width: 70%; border: none; }
.tile-image .corner { position: absolute; top: 6px; right: 8px; padding: 1px 5px; border-radius: 3px; background: var(--surface); font: 10px var(--mono); color: var(--muted); }
.tile-image > img.tile-photo { position: absolute; left: 6px; bottom: 6px; width: 34%; height: auto; border: 1px solid var(--surface); border-radius: 3px; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); cursor: zoom-in; }
.zoom-button, button.zoom-button { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: var(--invert); color: var(--invert-ink); }
.zoom-button:hover, button.zoom-button:hover { background: var(--accent); }
.zoom-button::before { content: ''; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; }
.tile-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tile .sub { font-size: 12px; }
.tile .badge { align-self: flex-start; }
.tile-price { display: flex; align-items: baseline; gap: 6px; font: 13px var(--mono); }
.tile-price .qty { color: var(--muted); }
.tile-price .status-mark { display: none; margin-left: auto; align-self: center; }
.tile-price .cm-link { margin-left: auto; font: 600 12px var(--sans); }
.tile-total { margin-top: -4px; font-size: 11.5px; color: var(--muted); }
.tile-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; font-size: 12px; }
.tile-links .link-button { font-size: 12px; }
.tile details.versions .menu { min-width: 0; }
.tile details.versions li { flex-wrap: wrap; }
.tile-copies { display: grid; gap: 6px; }
.tile-copies .copy { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 8px; }
.tiles-total { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
.tiles-total b, .tiles-total .money { color: var(--ink); font-weight: 600; }

/* Handy-Liste (statt der Tabelle) */
.m-list { display: grid; gap: 8px; }
.m-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.m-row.selected { background: var(--row-selected); border-color: var(--select-line); }
.m-row img, .m-row .m-thumb { flex: none; width: 40px; height: 56px; object-fit: cover; border-radius: 3px; }
.m-row .m-main { flex: 1; min-width: 0; }
.m-row .m-name { display: flex; align-items: center; gap: 6px; }
.m-row .m-name span:first-child { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.m-row .badge { margin-top: 4px; }
.m-row .m-side { text-align: right; font: 13px var(--mono); }
.m-row .m-side .sub { font: 11.5px var(--mono); }
.m-copies { display: grid; gap: 6px; padding: 2px 0 4px 32px; }
.m-copies .copy { flex-direction: column; align-items: flex-start; gap: 0; }

/* ---------- Fotos ---------- */

.photo-group + .photo-group { margin-top: 22px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.photo-tile { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.photo-tile[data-photo]:not([data-photo='']) { cursor: pointer; }
.photo-tile[data-photo]:not([data-photo='']):hover { border-color: var(--muted); }
.photo-tile .img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: repeating-linear-gradient(135deg, var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px); }
.photo-tile .img img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .busy { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--page) 75%, transparent); }
.photo-tile .no-picture { padding: 3px 8px; border-radius: 4px; background: var(--surface); font: 11px var(--mono); color: var(--bad); }
.photo-tile .meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; }
.photo-tile .meta .row { display: flex; align-items: center; gap: 8px; }
.photo-tile .file { flex: 1; min-width: 0; overflow: hidden; font: 12.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.photo-tile .info { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* Foto-Detail */
.detail { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: 20px; align-items: start; }
.photo-view { position: sticky; top: 20px; }
.photo-view .frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.photo-view img { width: 100%; height: auto; }
.photo-view svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-view g { cursor: pointer; }
.photo-view rect.frame { fill: transparent; stroke: var(--c); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.photo-view g:hover rect.frame, .photo-view g.hl rect.frame { fill: rgb(255 255 255 / 22%); stroke-width: 4.5; }
.photo-view rect.tag { fill: var(--c); stroke: none; }
.photo-view text { font-family: var(--mono); font-weight: 600; fill: #1b1815; pointer-events: none; }
.f-ok { --c: var(--frame-ok); }
.f-maybe { --c: var(--frame-maybe); }
.f-warn { --c: var(--frame-warn); }
.f-bad { --c: var(--frame-bad); }
.f-off { --c: var(--frame-off); }
.f-off rect.frame { stroke-dasharray: 6 4; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.card-list { display: grid; gap: 10px; }
.found { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.found.hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.found .pair { display: flex; align-items: center; gap: 8px; }
.found .nr { width: 18px; font: 12px var(--mono); color: var(--muted); text-align: center; }
.found .pair img, .found .pair .no-image, .found .pair .placeholder { width: 54px; border-radius: 4px; }
.found .pair .crop { cursor: zoom-in; }
.found .pair .arrow { color: var(--faint); }
.found .placeholder { display: grid; place-items: center; aspect-ratio: 63 / 88; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 22px; }
.found .info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.found .title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.found .title .name { font-size: 15px; }
.found .meta { font-size: 13px; color: var(--text-2); }
.found .meta details.versions { display: inline-block; vertical-align: top; }
.found .read { font-size: 12.5px; color: var(--muted); }
.found .buttons { margin-top: 4px; }
.grading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.label-crop { width: 170px !important; border-radius: 4px; cursor: zoom-in; }
.research { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.research summary { cursor: pointer; font-weight: 600; }
.research > div { margin-top: 4px; }
.research .sources a { font-weight: 600; }
.research.bad { color: var(--bad); }

/* ---------- Zu prüfen ---------- */

.review-list { display: grid; gap: 12px; }
.review-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.review-item .crop img { width: 110px; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.review-item .crop .link-button { display: block; margin-top: 6px; font-size: 12px; }
.review-item .body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.review-item .title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-item .title b { font-size: 16px; }
.review-item .where { font-size: 12.5px; color: var(--muted); }
.review-item .where .mono { font-size: 12px; overflow-wrap: anywhere; }
.review-item .why { font-size: 13px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 10px; }
button.choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 128px;
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 12px/1.3 var(--sans);
  text-align: left;
  white-space: normal;
}
button.choice:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }
button.choice.current { border-color: var(--ok); background: var(--ok-bg); }
button.choice.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
button.choice img, button.choice .no-image { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
button.choice .c-name { overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
button.choice .c-set { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
button.choice .c-nr { display: flex; justify-content: space-between; font: 11px var(--mono); }
button.choice .c-nr .now { color: var(--ok); font-weight: 600; font-family: var(--sans); }

/* ---------- Dialoge ---------- */

dialog { width: min(1000px, 96vw); max-height: 92vh; padding: 0; border: none; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: var(--backdrop); }
dialog.small { width: min(480px, 94vw); }
.dialog { display: flex; flex-direction: column; max-height: 92vh; }
.dialog-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px 12px; }
.dialog-head h2 { margin: 0; font: 500 26px/1.2 var(--serif); }
.dialog-head .close { margin-left: auto; padding: 4px 10px; border: none; background: none; color: var(--muted); font-size: 18px; font-weight: 400; }
.dialog-head .close:hover { background: var(--surface-2); color: var(--ink); }
.dialog-body { padding: 0 24px 18px; overflow-y: auto; }
.dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--surface-2); }
.dialog-foot .grow { min-width: 4px; }
.dialog-body.form { display: grid; gap: 12px; }
.dialog-body .hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.form-error { color: var(--bad); font-weight: 600; font-size: 13px; }
.form-error:empty { display: none; }

/* „Welche Karte ist das?“ */
.picker { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
.picker-photo img { width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.picker-photo .read { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.picker-photo .where { margin-top: 4px; font: 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.picker-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.language-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--muted); }
.search-row { position: relative; display: flex; align-items: center; }
.search-row input { flex: 1; padding-right: 90px; background: var(--input); }
.search-row .hits { position: absolute; right: 12px; font-size: 12px; color: var(--muted); pointer-events: none; }
.hit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.hit-grid p { grid-column: 1 / -1; margin: 0; }
button.hit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 12px/1.3 var(--sans);
  text-align: left;
  white-space: normal;
  justify-content: flex-start;
}
button.hit:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }
button.hit.current { border-color: var(--ok); background: var(--ok-bg); }
button.hit.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
button.hit img, button.hit .no-image { flex: none; width: 40px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
button.hit .no-image { font-size: 9px; }
button.hit div { min-width: 0; }
button.hit b, button.hit span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.hit b { font-size: 12.5px; font-weight: 600; }
button.hit .set { color: var(--muted); font-size: 11.5px; }
button.hit .nr { font: 11px var(--mono); }
.custom-entry { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.custom-entry summary { cursor: pointer; list-style: none; }
.custom-entry summary::-webkit-details-marker { display: none; }
.custom-entry summary b { color: var(--ink); font-weight: 600; }
.custom-entry summary b::after { content: ' ▸'; }
.custom-entry[open] summary b::after { content: ' ▾'; }
.custom-entry summary span { margin-left: 8px; }
.custom-entry[open] summary { margin-bottom: 8px; }
.custom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin: 8px 0 10px; }
.custom-grid label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.custom-grid input, .custom-grid select { background: var(--input); }
.custom-grid .wide { grid-column: 1 / -1; }

/* Sealed: Bearbeiten */
.sealed-form h3 { margin: 6px 0 0; font: 500 18px/1.3 var(--serif); }
.sealed-form h3 .sub { font-family: var(--sans); font-size: 12.5px; }
.sealed-image { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: start; }
.sealed-image-preview { display: grid; place-items: center; width: 140px; height: 140px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.sealed-image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sealed-image-actions { display: grid; gap: 8px; }
.sealed-image-actions p { margin: 0; }
.url-row { display: flex; gap: 6px; }
.url-row input { flex: 1; background: var(--input); }
.image-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; }
.image-results:empty { display: none; }
.image-results p { grid-column: 1 / -1; margin: 0; }
button.image-result { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px; background: #fff; color: #222; border-color: var(--line); white-space: normal; font: 12px/1.25 var(--sans); text-align: center; }
button.image-result:hover { background: #fff; color: #222; border-color: var(--accent); }
button.image-result img { width: 100%; height: 96px; object-fit: contain; }
button.image-result .sub { color: #666; }
.product-list { display: grid; gap: 6px; }
.product-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 8px; }
.product-item .grow { min-width: 0; }
.product-item label { display: inline-flex; align-items: center; gap: 6px; }
.product-item input { width: 70px; padding: 4px 6px; background: var(--input); }
#sealed-product-search { width: 100%; background: var(--input); }
.product-results { display: grid; gap: 4px; max-height: 230px; overflow-y: auto; }
.product-results:empty { display: none; }
button.product-result { justify-content: space-between; gap: 12px; width: 100%; padding: 6px 10px; background: var(--surface-2); color: var(--ink); border-color: var(--line); font-weight: 400; text-align: left; white-space: normal; }
button.product-result:hover { background: var(--surface-2); color: var(--ink); border-color: var(--accent); }

/* ---------- Produkte ---------- */

.products-table td.thumb { width: 60px; }
.products-table th { white-space: normal; vertical-align: bottom; }
.products-table th.num { min-width: 72px; }
.products-table td.num .sub { white-space: normal; }
.products-table td.links { white-space: normal; }
.products-table td.links a { display: inline-block; }
.products-table .per-piece { display: none; }
.m-thumb-box { flex: none; }
.m-thumb-box img, .m-thumb-box .no-thumb { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; }
.m-thumb-box .no-thumb { background: none; }
.products-table td.thumb img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.no-thumb { display: grid; place-items: center; width: 44px; height: 44px; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--muted); }
.products-table .note { max-width: 46ch; font-style: italic; }
.products-table td.links { white-space: nowrap; }
.products-table td.links a + a { margin-left: 8px; }
tr.sealed-row { cursor: pointer; }
tr.sealed-row:hover td { background: var(--surface-2); }
.products-table tfoot td { background: var(--surface-2); font-weight: 600; border-bottom: none; }
.foot-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Freigabe ---------- */

.sharing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.sharing > div { display: grid; gap: 14px; }
.share-folder { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.share-folder .mono { flex: 1; font-size: 13px; overflow-wrap: anywhere; }
.share-folder .sub b { font: 500 12.5px var(--mono); color: var(--ink); }
.share-option { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.share-option input { margin-top: 2px; }
.share-option b { font-weight: 600; }
.share-option .sub { display: block; }
.address { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font: 12.5px var(--mono); }
.address span { flex: 1; overflow-wrap: anywhere; }
.preview-note { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; border: 1px solid var(--select-line); border-radius: 8px; background: var(--select-bg); font-size: 13px; }
.preview-note b { font-weight: 600; }
.access-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }

/* ---------- Einstellungen ---------- */

.settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.settings > .column { display: grid; gap: 14px; }
.settings .card { display: flex; flex-direction: column; gap: 8px; }
.setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.setting-row > span:first-child { flex: 1; min-width: 140px; }
.setting-row .value { color: var(--muted); }
.setting-row .path { flex: 2; min-width: 0; font: 12.5px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.setting-row select { padding-top: 5px; padding-bottom: 5px; font-weight: 600; font-size: 13px; }
.setting-row input[type='url'] { flex: 1 1 220px; padding: 5px 10px; font: 12.5px var(--mono); background: var(--input); }
.radios { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.radios label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.radios .sub { margin-left: 4px; }
.key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.cost-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12.5px; color: var(--muted); }
.cost-stats b { display: block; font: 500 16px var(--mono); color: var(--ink); }

/* ---------- Großansicht (Lupe) ---------- */

.lightbox { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #120f0d; color: #f1eadf; overscroll-behavior: contain; }
.lightbox-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12.5px; color: #a69c8e; }
.lightbox-top .grow { min-width: 4px; }
.lightbox button.round { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: #2f2923; color: #f1eadf; font-size: 15px; font-weight: 400; }
.lightbox button.round:hover { background: #4a4238; }
.lightbox-stage { position: relative; flex: 1; display: flex; min-height: 0; overflow: auto; cursor: zoom-in; }
.lightbox-stage img { margin: auto; max-width: 96vw; max-height: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 40px rgb(0 0 0 / 50%); }
.lightbox.full .lightbox-stage { cursor: zoom-out; }
.lightbox.full .lightbox-stage img { max-width: none; max-height: none; border-radius: 0; }
.lightbox .nav-prev, .lightbox .nav-next { position: fixed; top: 50%; z-index: 1; transform: translateY(-50%); width: 44px; height: 44px; font-size: 20px; }
.lightbox .nav-prev { left: 12px; }
.lightbox .nav-next { right: 12px; }
.lightbox-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px 14px; }
.lightbox-info { flex: 1; min-width: 200px; }
.lightbox-info .title { font-size: 16px; font-weight: 600; }
.lightbox-info .meta { font-size: 13px; color: #a69c8e; }
.lightbox-info .hint { margin-top: 2px; font-size: 12px; color: #7d7366; }
.lightbox.loading .lightbox-info .hint::after { content: ' · scharfes Bild lädt …'; }
.lightbox .chips { display: flex; gap: 6px; }
.lightbox .chips button { padding: 5px 12px; border-radius: 999px; border: 1px solid #4a4238; background: none; color: #d8cfc2; font-size: 12px; }
.lightbox .chips button.active { background: #f1eadf; border-color: #f1eadf; color: #1b1815; }
.lightbox .actions { display: flex; gap: 8px; }
.lightbox .actions button.pick { padding: 10px 18px; border-radius: 10px; background: #ef6a5f; border-color: #ef6a5f; color: #1b1815; }
.lightbox .actions button.pick.on { background: #f1eadf; border-color: #f1eadf; }
.lightbox .actions a { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #4a4238; border-radius: 10px; color: #d8cfc2; font-weight: 600; text-decoration: none; }
.lightbox .actions a:hover { border-color: #a69c8e; color: #f1eadf; }
html.lightbox-open { overflow: hidden; }

/* ---------- Shop-Ansicht ---------- */

.shop-head { padding: 22px 40px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.shop-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.shop-brand .logo { width: 14px; height: 19px; border-radius: 3px; }
.shop-brand .logo::after { display: none; }
.shop-title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; }
.shop-title h1 { margin: 0; font: 500 40px/1.1 var(--serif); letter-spacing: -0.01em; }
.shop-title .lead { padding-bottom: 8px; font-size: 14px; color: var(--muted); }
.shop-title .head-stats { margin-left: auto; padding-bottom: 6px; }
.shop-title .head-stats b { font-size: 17px; }
.shop-main { display: flex; flex-direction: column; gap: 14px; padding: 18px 40px 110px; }
.shop-note { white-space: pre-line; padding: 10px 14px; border: 1px solid var(--select-line); border-radius: 8px; background: var(--select-bg); font-size: 13.5px; }
.chips { display: flex; gap: 6px; }
.chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.chip:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }
.chip.active, .chip.active:hover { background: var(--invert); border-color: var(--invert); color: var(--invert-ink); }
.shop-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 14px; }
.shop-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 2px 8px; border-bottom: 1px solid var(--line); }
.shop-section h2 { margin: 0; font: 500 22px/1.25 var(--serif); }
.sealed-rows { display: grid; gap: 8px; }
.sealed-line { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr) 60px 70px 110px 110px; gap: 14px; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sealed-line.selected { border-color: var(--accent); }
.sealed-line img, .sealed-line .no-thumb { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 6px; }
.sealed-line .no-thumb { background: none; }
.sealed-line .money, .sealed-line .qty { text-align: right; font: 13px var(--mono); }
.sealed-line .qty { color: var(--muted); }
.sealed-line .cm { text-align: right; font-size: 12.5px; }
.floating-bar { position: fixed; left: 40px; right: 40px; bottom: 18px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-radius: 12px; background: var(--bar); color: var(--bar-ink); box-shadow: 0 10px 30px rgb(36 31 25 / 30%); }
.floating-bar .note { font-size: 12.5px; color: var(--bar-muted); }
.floating-bar button.light { background: var(--bar-ink); border-color: var(--bar-ink); color: var(--bar); }
.floating-bar button.outline { background: none; border-color: var(--bar-line); color: var(--bar-ink); }
.floating-bar button.plain { background: none; border-color: transparent; color: var(--bar-muted); font-weight: 400; }
.shop-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding-top: 12px; font-size: 12.5px; color: var(--muted); }
.shop-footer a { color: var(--muted); }
.login { display: flex; gap: 8px; align-items: center; }
.login input { padding: 6px 10px; background: var(--input); }
.shop-list .thumbs { display: flex; gap: 4px; }
.shop-list .thumbs img { width: 40px; border-radius: 3px; cursor: zoom-in; }
.shop-row-list { display: grid; gap: 8px; }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.shop-row.selected { border-color: var(--accent); }
.shop-row .pic { position: relative; flex: none; width: 64px; }
.shop-row .pic img { width: 64px; height: 88px; object-fit: cover; border-radius: 5px; }
.shop-row .pic .zoom-button { right: -6px; bottom: -6px; width: 24px; height: 24px; }
.shop-row .pic .zoom-button::before { width: 7px; height: 7px; }
.shop-row .body { flex: 1; min-width: 0; }
.shop-row .body .tile-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-row .tile-price { margin-top: 6px; }

/* ---------- Schmale Fenster ---------- */

/* Symbole (Seitenleiste als schmale Leiste und Handy-Leiste unten) */
.ico { display: grid; place-items: center; height: 18px; }
.ico i { display: block; border: 2px solid currentColor; }
.i-overview { width: 16px; height: 16px; border-radius: 4px; }
.i-inventory { width: 13px; height: 17px; border-radius: 3px; }
.i-products { width: 17px; height: 13px; border-radius: 3px; }
.i-photos { width: 16px; height: 16px; border-radius: 50%; }
.i-review { width: 12px; height: 12px; transform: rotate(45deg); }
.i-sharing { width: 17px; height: 11px; border-radius: 6px; }
.i-settings { width: 15px; height: 15px; border-radius: 50%; border-style: dashed !important; }
.i-more { display: flex !important; gap: 3px; border: none !important; }
.i-more::before, .i-more::after, .i-more span { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* Inventarliste eng gesetzt; lange Wörter dürfen umbrechen, damit sie ohne seitliches Scrollen passt */
.inv-table th, .inv-table td { padding-left: 7px; padding-right: 7px; }
.inv-table td { overflow-wrap: anywhere; }
.inv-table .badge { white-space: normal; overflow-wrap: normal; text-align: center; }

/* Bis 1400 px: Seltenheit und Ablage weglassen, Stückpreise der Produkte als zweite Zeile */
@media (max-width: 1400px) {
  .inv-table .col-opt { display: none; }
  .products-table .col-piece { display: none; }
  .products-table .per-piece { display: block; }
}

/* Mittlere Breite: Seitenleiste als schmale Leiste mit Symbolen */
@media (min-width: 901px) and (max-width: 1180px) {
  .sidebar { width: 76px; padding: 14px 8px 12px; }
  .brand { justify-content: center; padding: 2px 0 12px; }
  .brand-name, .nav-group, .nav a .dot, .nav a .label, .sidebar-links .label { display: none; }
  .nav { gap: 2px; }
  .nav a { position: relative; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px; font-size: 10.5px; font-weight: 600; text-align: center; }
  .nav a .ico { display: grid; }
  .nav a .short, .sidebar-links .short { display: block; }
  .nav a .pill { position: absolute; top: 2px; right: 4px; padding: 0 5px; font-size: 10px; }
  .status-card { display: grid; place-items: center; margin-top: 12px; padding: 9px 6px; }
  .status-card .state { gap: 0; font-size: 0; }
  .status-card > :not(.state) { display: none; }
  .sidebar-links { flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 0; }
  .sidebar-links .link-button { font-size: 10.5px; }
}

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview, .sharing, .settings { grid-template-columns: minmax(0, 1fr); }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .photo-view { position: static; max-width: 560px; }
  .hit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  main { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); }
  #banners { padding: 12px 16px 0; }
  .page-head { gap: 6px 14px; margin-bottom: 12px; padding-right: 28px; position: relative; }
  .page-head h1 { font-size: 26px; }
  .page-head h1.mono { font-size: 19px; }
  .head-stats { gap: 2px 14px; font-size: 12px; }
  .head-stats b { font-size: 13px; }
  .head-stats .wide-only { display: none; }
  .head-actions { margin-left: 0; width: 100%; }
  .mobile-status { position: absolute; top: 4px; right: 16px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
  .mobile-status:empty { display: none; }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; border: none; background: none; color: var(--muted); font: 600 11px var(--sans); text-decoration: none; }
  .tabbar a:hover, .tabbar button:hover { background: none; color: var(--ink); }
  .tabbar a.active { color: var(--accent); }
  .tabbar .pill { position: absolute; top: -4px; left: calc(50% + 6px); font-size: 10px; padding: 0 5px; }
  .kpi .big { font-size: 22px; }
  .event { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .event .when { order: 2; }
  .toolbar .filters { display: none; }
  .toolbar.open .filters { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .toolbar .filters select { flex: 1 1 140px; }
  .filter-toggle { display: inline-flex; }
  .toolbar input[type='search'] { flex: 1 1 140px; }
  .selection-bar { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 34; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 12px 14px; border: none; border-radius: 12px; background: var(--bar); color: var(--bar-ink); box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
  .selection-bar .sel-info { flex: 1; min-width: 0; flex-direction: column; gap: 0; }
  .selection-bar .sel-info .money { font-size: 12px; }
  .selection-bar > .grow { display: none; }
  .selection-bar .full { display: none; }
  .selection-bar .compact { display: inline; }
  .selection-bar .money { color: var(--bar-muted); }
  .selection-bar .link-button { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--bar-line); color: var(--bar-ink); text-decoration: none; }
  .selection-bar .link-button.first { background: var(--bar-ink); border-color: var(--bar-ink); color: var(--bar); }
  .selection-bar .link-button.muted { border-color: transparent; color: var(--bar-muted); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 7px; }
  .tile .badge, .tile .tile-links, .tile .tile-total { display: none; }
  .tile.open .tile-links { display: flex; }
  .tile-name { flex-wrap: nowrap; }
  .tile-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile-price .status-mark { display: inline-block; margin-left: auto; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .found { grid-template-columns: minmax(0, 1fr); }
  .review-item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .review-item .crop img { width: 84px; }
  button.choice { width: calc(50% - 5px); }
  .picker { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .picker-photo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
  .picker-photo .read { margin-top: 0; }
  .hit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .dialog-head { padding: 14px 16px 10px; }
  .dialog-head h2 { font-size: 22px; }
  .dialog-body { padding: 0 16px 14px; }
  .dialog-foot { padding: 10px 16px; }
  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  dialog.small { height: auto; max-height: 92dvh; margin: auto; border-radius: 14px; width: min(480px, 94vw); }
  .dialog { max-height: 100dvh; height: 100%; }
  .sealed-image { grid-template-columns: minmax(0, 1fr); }
  .products-table .col-opt { display: none; }
  .shop-head { padding: 16px 16px 12px; }
  .shop-title h1 { font-size: 28px; }
  .shop-title .lead { display: none; }
  .shop-title .head-stats { margin-left: 0; }
  .shop-main { padding: 12px 16px 110px; }
  .chips { overflow-x: auto; scrollbar-width: none; }
  .shop #shop-prices { order: 5; width: 100%; }
  .shop .chip { flex: none; }
  .sealed-line { grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .sealed-line img, .sealed-line .no-thumb { width: 44px; height: 44px; }
  .sealed-line .lang-cell, .sealed-line .cm { display: none; }
  .sealed-line .money { grid-column: 4; }
  .sealed-line .qty { display: none; }
  .floating-bar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 12px 14px; }
  .floating-bar { flex-wrap: nowrap; gap: 8px; }
  .floating-bar .count { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
  .floating-bar .note, .floating-bar .plain, .floating-bar .full, .floating-bar > .grow { display: none; }
  .shop #shop-layout { display: none; }
  .lightbox .nav-prev, .lightbox .nav-next { display: none; }
  .lightbox-stage img { max-width: calc(100vw - 32px); }
  .lightbox .actions { width: 100%; }
  .lightbox .actions button.pick { flex: 1; padding: 12px; }
  .lightbox .actions a { padding: 12px 16px; }
}

@media (max-width: 480px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .cost-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: none) {
  .zoom { display: none !important; }
}