:root {
  --bg: #fffaf6;
  --bg-soft: #fff2e7;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --line: #eadfd6;
  --text: #18171b;
  --muted: #716d69;
  --yellow: #ff7a00;
  --yellow-deep: #d95f00;
  --danger: #e06b6b;
  --success: #66c78f;
  --shadow: 0 22px 55px rgba(74, 45, 20, .14);
  --radius: 18px;
  --content: 1180px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Meerdere privécollecties */
.collection-selector-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr); align-items: center; gap: 32px;
  margin: 0 0 42px; padding: 25px 28px; border: 1px solid rgba(255,122,0,.34); border-radius: 20px;
  background: linear-gradient(125deg, #fff 0 68%, #fff3e8 100%); box-shadow: 0 14px 36px rgba(74,45,20,.07);
}
.collection-selector-copy h2 { margin: 3px 0 7px; font-size: 28px; overflow-wrap: anywhere; }
.collection-selector-copy > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.collection-selector-actions { display: grid; gap: 8px; }
.collection-selector-actions > label { color: var(--muted); font-size: 11px; font-weight: 800; }
.collection-selector-actions > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.collection-selector-actions select {
  width: 100%; min-width: 0; min-height: 47px; padding: 0 38px 0 14px; border: 1px solid #ddd3cc; border-radius: 11px;
  background: #fff; color: var(--ink); font-weight: 800;
}
.collection-selector-actions select:focus { outline: 3px solid rgba(255,122,0,.16); border-color: var(--yellow); }
.collections-modal { width: min(720px, calc(100% - 32px)); }
.collections-modal .modal-heading > p:last-child { margin: 8px 0 0; color: var(--muted); }
.new-collection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 18px; border-radius: 15px; background: #fff4ea; }
.new-collection-row label { display: grid; gap: 8px; color: #3f3a39; font-size: 12px; font-weight: 800; }
.new-collection-row input { width: 100%; min-height: 47px; padding: 0 14px; border: 1px solid #ddd3cc; border-radius: 10px; background: #fff; color: var(--ink); }
.new-collection-row input:focus { outline: 3px solid rgba(255,122,0,.16); border-color: var(--yellow); }
.collection-manager-list { display: grid; gap: 9px; margin-top: 18px; }
.collection-manager-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.collection-manager-item.active { border-color: rgba(255,122,0,.55); background: #fffaf5; }
.collection-manager-item > div:first-child { min-width: 0; }
.collection-manager-item strong { display: block; overflow-wrap: anywhere; }
.collection-manager-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.collection-manager-item > div:last-child { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.collection-manager-item .text-button { font-size: 12px; }
.danger-text { color: #b54d45 !important; }
.text-button:disabled, .button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 760px) {
  .collection-selector-card { grid-template-columns: minmax(0, 1fr); gap: 19px; margin-bottom: 32px; padding: 21px; }
  .collection-selector-copy h2 { font-size: 24px; }
}

@media (max-width: 520px) {
  .collection-selector-actions > div, .new-collection-row { grid-template-columns: minmax(0, 1fr); }
  .collection-selector-actions > div { gap: 16px; }
  .collection-selector-actions .button, .new-collection-row .button { width: 100%; }
  .collection-manager-item { align-items: flex-start; flex-direction: column; gap: 12px; }
  .collection-manager-item > div:last-child { width: 100%; justify-content: flex-start; gap: 15px; }
  .collections-modal .modal-actions .button { width: 100%; }
}

.app-help-steps { margin: 20px 0 0; padding: 0; display: grid; gap: 16px; list-style: none; counter-reset: help-step; }
.app-help-steps li { position: relative; min-height: 42px; padding-left: 54px; counter-increment: help-step; }
.app-help-steps li::before {
  content: counter(help-step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 12px; background: #fff1e5; color: var(--yellow-deep); font-weight: 900;
}
.app-help-steps strong, .app-help-steps span { display: block; }
.app-help-steps strong { margin-bottom: 3px; color: var(--text); font-size: 14px; }
.app-help-steps span { color: var(--muted); font-size: 13px; line-height: 1.55; }

.install-app-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; background: linear-gradient(125deg, #fff 0 62%, #fff1e5 100%); }
.install-app-copy { min-width: 0; display: flex; align-items: center; gap: 18px; }
.install-app-icon { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 17px; box-shadow: 0 9px 22px rgba(74,45,20,.14); }
.install-app-copy h2 { margin-bottom: 6px; }
.install-app-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.install-app-card .button { white-space: nowrap; }
.install-app-card.installed { background: #f5faf7; }
.install-app-card.installed .install-app-icon { box-shadow: 0 0 0 4px rgba(35,136,93,.12); }
.install-app-modal { width: min(620px, calc(100% - 32px)); }
.install-app-dialog-intro { display: flex; align-items: center; gap: 17px; padding: 17px; border-radius: 16px; background: #fff4ea; }
.install-app-dialog-intro img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 19px; }
.install-app-dialog-intro p { margin: 0; color: var(--muted); line-height: 1.55; }
.install-app-instructions { margin-top: 24px; }
.install-app-instructions h3 { margin: 0 0 15px; font-size: 18px; }
.install-app-instructions ol { margin: 0; padding: 0; display: grid; gap: 13px; list-style: none; counter-reset: install-step; }
.install-app-instructions li { position: relative; min-height: 38px; padding-left: 49px; counter-increment: install-step; }
.install-app-instructions li::before { content: counter(install-step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #ff7a00; color: #fff; font-weight: 900; }
.install-app-instructions strong, .install-app-instructions span { display: block; }
.install-app-instructions strong { margin-bottom: 3px; font-size: 14px; }
.install-app-instructions span { color: var(--muted); font-size: 13px; line-height: 1.5; }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; }
.topbar {
  min-height: 92px; padding: 0 max(24px, calc((100vw - var(--content)) / 2)); display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 28px;
  position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); border-bottom: 5px solid var(--yellow); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; width: max-content; flex-direction: column; align-items: flex-start; border: 0; background: transparent; padding: 6px 0; cursor: pointer; text-align: left; color: var(--text); }
.brand-logo { display: block; width: 190px; max-width: 100%; height: auto; object-fit: contain; }
.brand-word { font-size: 28px; font-weight: 900; letter-spacing: -.055em; line-height: .92; }
.brand-word > span { display: inline-block; margin-left: 2px; padding: 0 4px 2px; border: 3px solid var(--yellow); border-radius: 8px; }
.brand small { color: var(--yellow-deep); font-size: 9px; font-weight: 900; letter-spacing: .32em; margin-top: 7px; }
.desktop-nav { display: flex; align-self: stretch; align-items: center; gap: 8px; }
.desktop-nav button { position: relative; height: 100%; border: 0; background: transparent; color: #343138; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.desktop-nav button::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 14px; height: 3px; border-radius: 99px; background: var(--yellow); transform: scaleX(0); transition: transform .18s ease; }
.desktop-nav button.active::after, .desktop-nav button:hover::after { transform: scaleX(1); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.connection-badge { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.connection-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(102, 199, 143, .7); }
.connection-badge.offline i { background: var(--danger); box-shadow: none; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--panel); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }

.view { display: none; min-height: calc(100vh - 78px); animation: fade-in .22s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: .4; transform: translateY(4px); } }
.content-wrap { width: min(var(--content), calc(100% - 48px)); margin: 0 auto; }
.content-wrap.narrow { max-width: 820px; }
.eyebrow { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .24em; margin: 0 0 10px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
h2, h3 { letter-spacing: -.01em; }
.brand-tm {
  display: inline-block; margin-left: .08em; font-size: .3em; font-weight: 800; line-height: 1;
  letter-spacing: .04em; vertical-align: super; text-transform: uppercase;
}
strong, b, .button { letter-spacing: .008em; }
.button { min-height: 46px; padding: 0 19px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; font-weight: 750; cursor: pointer; text-decoration: none; transition: transform .14s ease, border-color .14s, background .14s; }
.button:active { transform: scale(.98); }
.button.primary { background: var(--yellow); color: #0a0b0e; box-shadow: 0 8px 26px rgba(242, 201, 76, .12); }
.button.primary:hover { background: #ffda5c; }
.button.secondary { background: var(--text); color: #0a0b0e; }
.button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.button.ghost:hover { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .03); }
.button.danger { color: var(--danger); border-color: rgba(224, 107, 107, .25); background: rgba(224, 107, 107, .08); }
.button.full { width: 100%; margin-top: 18px; }
.button.light { background: rgba(10, 11, 14, .75); border-color: rgba(255,255,255,.2); position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; }
.button.light:active { transform: translateX(-50%) scale(.98); }
.text-button, .back-button { border: 0; background: transparent; color: var(--yellow); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 7px 0; font-weight: 700; }
.text-button svg { width: 16px; height: 16px; }
.back-button { color: var(--muted); margin: 0 0 42px; }
.back-button span { color: var(--text); font-size: 25px; line-height: 10px; }

.hero { min-height: 500px; position: relative; overflow: hidden; border-bottom: 1px solid #f1e2d5; background: linear-gradient(110deg, #fff 0 55%, #fff3e7 55% 100%); }
.hero-copy { width: min(var(--content), calc(100% - 48px)); margin: 0 auto; padding: 86px 0 70px; position: relative; z-index: 4; }
.hero-copy h1 { font-size: clamp(52px, 6.2vw, 84px); line-height: .91; max-width: 820px; margin-bottom: 20px; }
.hero-copy h1 span { color: var(--yellow); -webkit-text-stroke: 0; }
.hero-copy > p:not(.eyebrow) { color: var(--muted); max-width: 450px; font-size: 16px; line-height: 1.65; }
.hero-button { margin-top: 16px; }
.hero-art { position: absolute; z-index: 5; inset: 0 0 0 52%; min-width: 0; pointer-events: auto; display: grid; place-items: center; opacity: 1; }
.hero-product-card { position: relative; width: min(390px, 70%); max-width: calc(100% - 36px); min-width: 0; min-height: 340px; overflow: hidden; border: 1px solid #f1ded0; border-radius: 28px; background: #fff; color: inherit; padding: 22px; box-shadow: 0 28px 70px rgba(76,47,22,.14); transform: rotate(2.5deg); appearance: none; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.hero-product-card::before { content: ""; position: absolute; inset: 12px; border: 2px solid var(--yellow); border-radius: 20px; pointer-events: none; }
.hero-card-label { position: absolute; z-index: 2; top: 28px; left: 34px; color: var(--yellow-deep); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.hero-product-card img { width: 100%; max-width: 100%; min-width: 0; height: 250px; object-fit: contain; object-position: center; padding: 26px 20px 4px; display: block; }
.hero-product-copy { position: relative; z-index: 2; width: calc(100% - 24px); min-width: 0; overflow: hidden; display: flex; flex-direction: column; margin: 4px 12px 10px; }
.hero-product-card strong { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.hero-product-copy span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.outline-tile { position: absolute; width: 46px; height: 34px; border: 3px solid var(--yellow); border-radius: 9px; pointer-events: none; }
.tile-one { right: 8%; top: 18%; transform: rotate(31deg); }
.tile-two { left: 6%; bottom: 17%; transform: rotate(-19deg); }

.dashboard-content { padding: 64px 0 88px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.section-heading h2 { font-size: 28px; margin: 0; }
.stat-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; }
.stat-card { min-height: 150px; padding: 24px; border-radius: var(--radius); background: linear-gradient(145deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); display: flex; flex-direction: column; }
.stat-card.featured { background: linear-gradient(135deg, rgba(242, 201, 76, .17), #17191f 72%); border-color: rgba(242, 201, 76, .25); }
.stat-link { position: relative; color: var(--text); text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.stat-link::after { content: "›"; position: absolute; right: 20px; top: 50%; color: var(--yellow); font-size: 28px; line-height: 1; transform: translateY(-50%); opacity: .65; transition: transform .16s, opacity .16s; }
.stat-link:hover { transform: translateY(-2px); border-color: rgba(242,201,76,.3); background: linear-gradient(145deg, #20232b, #191b21); }
.stat-link:hover::after { opacity: 1; transform: translate(3px, -50%); }
.stat-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.stat-card p { color: var(--muted); font-size: 13px; }
.stat-card strong { font-size: 35px; letter-spacing: -.04em; margin: auto 0 5px; }
.stat-card.featured strong { color: var(--yellow); }
.stat-card span { color: var(--muted); font-size: 12px; }
.recent-heading { margin-top: 56px; }

.value-page { padding: 54px 0 110px; }
.value-page h1 { font-size: clamp(42px, 6vw, 65px); margin: 0 0 14px; }
.value-title-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.value-title-row .page-intro { margin-bottom: 0; }
.value-current { flex: 0 0 auto; min-width: 245px; padding: 21px 24px; border: 1px solid rgba(242,201,76,.25); border-radius: 16px; background: linear-gradient(135deg, rgba(242,201,76,.13), var(--panel)); }
.value-current span, .value-kpis span { display: block; color: var(--muted); font-size: 12px; }
.value-current strong { display: block; color: var(--yellow); font-size: 31px; letter-spacing: -.04em; margin-top: 6px; }
.value-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 42px 0 18px; }
.value-kpis article { min-width: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, var(--panel-2), var(--panel)); }
.value-kpis strong { display: block; font-size: 25px; margin: 10px 0 5px; letter-spacing: -.03em; }
.value-kpis strong.positive { color: var(--success); }
.value-kpis strong.negative { color: var(--danger); }
.value-kpis small { color: var(--muted); font-size: 11px; }
.value-chart-card { padding: 27px 28px 22px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 74% 8%, rgba(242,201,76,.055), transparent 31%), var(--panel); overflow: hidden; }
.value-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.value-chart-heading h2 { margin: 0; font-size: 24px; }
.range-selector { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #111318; }
.range-selector button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.range-selector button:hover { color: var(--text); }
.range-selector button.active { background: rgba(242,201,76,.16); color: var(--yellow); }
.range-selector button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.value-chart-wrap { position: relative; width: 100%; min-height: 290px; }
.value-chart { display: block; width: 100%; height: auto; min-height: 290px; overflow: visible; }
.value-chart .chart-grid-line { stroke: rgba(255,255,255,.075); stroke-width: 1; vector-effect: non-scaling-stroke; }
.value-chart .chart-axis-label { fill: #858a96; stroke: none; font-size: 11px; font-weight: 600; }
.value-chart .chart-area { fill: url(#valueAreaGradient); stroke: none; }
.value-chart .chart-line-shadow { fill: none; stroke: rgba(242,201,76,.18); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.value-chart .chart-line { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.value-chart .chart-point { fill: var(--panel); stroke: var(--yellow); stroke-width: 2; vector-effect: non-scaling-stroke; }
.value-chart .chart-point.latest { fill: var(--yellow); stroke: #fff2b4; stroke-width: 3; filter: drop-shadow(0 0 7px rgba(242,201,76,.48)); }
.value-chart .chart-latest-label rect { fill: #ff7a00; stroke: none; }
.value-chart .chart-latest-label text { fill: #0a0b0e; stroke: none; font-size: 11px; font-weight: 850; }
.value-chart-empty { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.value-chart-empty strong { color: var(--text); margin-bottom: 7px; }
.value-history-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 3px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }

.scanner-page, .more-page { padding: 54px 0 110px; }
.scanner-page h1, .collection-page h1, .more-page h1 { font-size: clamp(42px, 6vw, 65px); margin: 0 0 14px; }
.page-intro { color: var(--muted); line-height: 1.65; max-width: 640px; margin-bottom: 28px; }
.scan-dropzone { min-height: 450px; border-radius: 24px; border: 1px solid rgba(242, 201, 76, .22); background: radial-gradient(circle at 50% 45%, rgba(242, 201, 76, .07), transparent 48%), var(--panel); overflow: hidden; position: relative; }
.scan-empty { min-height: 450px; padding: 42px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.scan-empty h2 { margin: 24px 0 8px; }
.scan-empty p { color: var(--muted); max-width: 420px; margin-bottom: 22px; }
.scan-empty .button.ghost { min-height: 36px; margin-top: 9px; border: 0; color: var(--muted); }
.scan-corners { width: 176px; height: 176px; position: relative; display: grid; place-items: center; }
.scan-corners > span { position: absolute; width: 36px; height: 36px; border-color: var(--yellow); border-style: solid; }
.scan-corners > span:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.scan-corners > span:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.scan-corners > span:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.scan-corners > span:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.minifig-silhouette { width: 78px; height: 124px; position: relative; opacity: .7; }
.minifig-silhouette i { position: absolute; left: 50%; transform: translateX(-50%); background: #353943; display: block; }
.minifig-silhouette .head { width: 41px; height: 39px; top: 0; border-radius: 8px 8px 12px 12px; }
.minifig-silhouette .head::before { content: ""; position: absolute; top: -5px; left: 7px; width: 27px; height: 6px; border-radius: 3px; background: #353943; }
.minifig-silhouette .body { top: 43px; width: 68px; height: 51px; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.minifig-silhouette .legs { top: 97px; width: 58px; height: 27px; background: linear-gradient(90deg, #353943 0 43%, transparent 43% 57%, #353943 57%); }
.scan-preview { height: 450px; position: relative; background: #050608; }
.scan-preview > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.scan-preview::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0,0,0,.5); pointer-events: none; }
.scan-loading { position: absolute; z-index: 2; inset: 0; background: rgba(8, 9, 12, .76); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scan-loading strong { margin-top: 26px; font-size: 18px; }
.scan-loading small { color: var(--muted); margin-top: 8px; }
.radar { width: 90px; height: 90px; border: 1px solid var(--yellow); border-radius: 50%; position: relative; box-shadow: 0 0 30px rgba(242,201,76,.15); }
.radar::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(242,201,76,.4); border-radius: 50%; }
.radar::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(242,201,76,.6) 96%, var(--yellow)); clip-path: polygon(50% 50%, 100% 0, 100% 100%); animation: radar 1.4s linear infinite; transform-origin: center; }
@keyframes radar { to { transform: rotate(360deg); } }
.notice { border-radius: 12px; padding: 15px 18px; margin-top: 18px; line-height: 1.5; }
.notice.error { background: rgba(224,107,107,.1); border: 1px solid rgba(224,107,107,.28); color: #f1a1a1; }
.scan-results { padding-top: 44px; }
.candidate-list { display: grid; gap: 11px; }
.candidate-card { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 18px; min-height: 108px; padding: 10px 14px 10px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; cursor: pointer; text-align: left; width: 100%; transition: border .15s, transform .15s; }
.candidate-card:hover { border-color: rgba(242,201,76,.38); transform: translateY(-1px); }
.candidate-card img { width: 88px; height: 88px; object-fit: contain; border-radius: 10px; background: #f0eee7; }
.candidate-card strong { display: block; font-size: 16px; margin-bottom: 7px; }
.candidate-card small { color: var(--muted); }
.candidate-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.candidate-meta .owned-mini { white-space: normal; overflow-wrap: anywhere; }
.item-collection-name { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#formOwnedBadge { max-width: 100%; margin-top: 12px; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 13px; }
.owned-check-copy, .owned-verdict > div { min-width: 0; overflow-wrap: anywhere; }
.owned-check-actions .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-top: 10px; padding-bottom: 10px; }
.match-score { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.owned-mini { background: rgba(102,199,143,.12); color: #80d8a5; padding: 3px 7px; border-radius: 20px; font-size: 11px; }
.candidate-card > svg { color: var(--muted); }
.result-help { color: var(--muted); text-align: center; font-size: 13px; margin: 18px 0 0; }

.collection-page { padding: 66px 0 110px; }
.page-title-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.page-title-row h1 { margin-bottom: 6px; }
.page-title-row > div > p:last-child { color: var(--muted); margin: 0; }
.collection-toolbar { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(220px, 1.28fr) auto auto; align-items: center; gap: 12px; margin: 42px 0 27px; }
.collection-page-selector { display: grid; min-width: 0; }
.collection-page-selector label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.collection-page-selector select { width: 100%; min-width: 0; }
.search-field { min-height: 48px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 0 15px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.search-field input { width: 100%; border: 0; background: transparent; color: var(--text); outline: 0; }
.search-camera { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 9px; background: rgba(242,201,76,.14); color: var(--yellow); display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.search-camera:hover { background: rgba(242,201,76,.24); }
.search-camera:active { transform: scale(.96); }
.search-camera svg { width: 20px; height: 20px; }
.collection-toolbar select, .form-fields select, .form-fields input, .form-fields textarea { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.collection-toolbar select { min-height: 48px; padding: 0 36px 0 14px; }
.collection-filter-group { display: flex; gap: 12px; }
.toggle-chip { min-height: 48px; padding: 0 15px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; color: var(--muted); }
.toggle-chip input { accent-color: var(--yellow); margin-right: 8px; }
.figure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.figure-grid.compact { grid-template-columns: repeat(4, 1fr); }
.figure-card { min-width: 0; position: relative; display: flex; flex-direction: column; background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .16s ease, border-color .16s; }
.figure-card:hover { transform: translateY(-3px); border-color: rgba(242,201,76,.28); }
.figure-card.top-value { border-color: rgba(242,201,76,.76); box-shadow: inset 0 0 0 1px rgba(242,201,76,.18), 0 9px 28px rgba(176,133,18,.11); }
.figure-card.top-value:hover { border-color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(242,201,76,.28), 0 12px 32px rgba(176,133,18,.17); }
.figure-card-open { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.figure-card-open:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
.figure-image { width: 100%; aspect-ratio: 1.08; flex: 0 0 auto; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle, #f4f1e9 0, #d9d6cf 72%); position: relative; }
.figure-image img { position: absolute; inset: 15px; display: block; width: calc(100% - 30px); height: calc(100% - 30px); min-width: 0; min-height: 0; max-width: none; max-height: none; object-fit: contain; object-position: center; }
.figure-image .quantity-badge, .owned-badge { position: absolute; z-index: 2; right: 11px; top: 11px; border-radius: 20px; background: rgba(10,11,14,.85); color: var(--yellow); border: 1px solid rgba(242,201,76,.25); padding: 5px 9px; font-size: 11px; font-weight: 800; }
.figure-info { flex: 1; min-height: 0; padding: 17px; display: flex; flex-direction: column; }
.figure-title-row { display: flex; align-items: flex-start; gap: 10px; }
.figure-title-row > div { flex: 1; min-width: 0; }
.figure-info small { color: var(--yellow); letter-spacing: .08em; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.figure-info h3 { font-size: 15px; line-height: 1.35; margin: 7px 0 15px; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.favorite-button { position: relative; z-index: 2; width: 34px; height: 34px; flex: 0 0 auto; margin: -4px -5px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.025); color: #7f8490; display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer; transition: color .15s, background .15s, border-color .15s, transform .15s; }
.favorite-button:hover { color: var(--yellow); border-color: rgba(242,201,76,.35); transform: scale(1.06); }
.favorite-button.active { color: var(--yellow); background: rgba(242,201,76,.13); border-color: rgba(242,201,76,.35); text-shadow: 0 0 12px rgba(242,201,76,.35); }
.favorite-button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.favorite-button:disabled { opacity: .55; cursor: wait; }
.figure-card-footer { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 13px; }
.figure-card-footer span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.figure-card-footer strong { color: var(--text); font-size: 15px; }
.figure-card-footer.single-value > div + div { display: none !important; }
.empty-state { grid-column: 1 / -1; min-height: 310px; border: 1px dashed var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--muted); max-width: 420px; line-height: 1.5; }

.settings-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-top: 16px; }
.settings-card h2 { font-size: 19px; margin-bottom: 8px; }
.settings-card > p { color: var(--muted); line-height: 1.55; }
.settings-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.settings-title-row h2 { margin-bottom: 5px; }
.settings-title-row p { color: var(--muted); font-size: 12px; margin: 0; }
.status-dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 5px rgba(148,152,163,.08); }
.status-dot.connected { background: var(--success); box-shadow: 0 0 0 5px rgba(102,199,143,.1), 0 0 12px rgba(102,199,143,.45); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 5px rgba(224,107,107,.1); }
.credentials-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; }
.credentials-form label { color: var(--muted); display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.credentials-form input { width: 100%; min-height: 43px; padding: 9px 11px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.credentials-form input:focus { border-color: rgba(242,201,76,.6); }
.credentials-actions { grid-column: 1 / -1; flex-wrap: wrap; }
.bricklink-settings .notice { font-size: 13px; }
.button-row { display: flex; gap: 10px; margin-top: 20px; }
.file-button { cursor: pointer; }
.about-card { display: flex; gap: 18px; align-items: center; margin-top: 36px; }
.about-card h2, .about-card p { margin: 0; }
.about-card p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.account-card h2, .account-card p { margin: 0; }
.account-card .eyebrow { margin-bottom: 5px; }
.account-card div > p:last-child { margin-top: 4px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .account-card { align-items: stretch; flex-direction: column; }.account-card .button { width: 100%; } }
.admin-access-card { border-color: rgba(255,122,0,.35); background: #fff8f1; }

.modal { width: min(850px, calc(100% - 32px)); max-height: min(90vh, 900px); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: #121419; color: var(--text); padding: 0; box-shadow: var(--shadow); overflow: auto; }
.modal::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(5px); }
.modal > form { padding: 31px; }
.modal-close { position: absolute; right: 18px; top: 18px; z-index: 2; }
.modal-heading { padding-right: 55px; margin-bottom: 26px; }
.modal-heading h2 { font-size: 27px; margin: 0; }
.item-form-layout { display: grid; grid-template-columns: 240px 1fr; gap: 27px; }
.selected-figure-column { min-width: 0; }
.selected-figure-visual { position: relative; }
.form-scan-tools { margin-top: 18px; display: grid; gap: 10px; }
.form-scan-tools > .button { width: 100%; }
.form-scan-status { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.form-scan-status:empty { display: none; }
.form-scan-status.error { color: var(--danger); }
.form-scan-candidates { display: grid; gap: 8px; }
.form-scan-candidates .candidate-card { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 8px; width: 100%; }
.form-scan-candidates .candidate-card img { width: 48px; height: 60px; }
.form-scan-candidates .candidate-card > svg { display: none; }
.form-scan-candidates .candidate-card strong { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.form-scan-candidates .candidate-meta { flex-wrap: wrap; }
.selected-figure-preview { height: 320px; position: relative; border: 1px solid rgba(242,201,76,.32); border-radius: 16px; padding: 11px; background: linear-gradient(145deg, #d9d6cf, #aaa8a2); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.selected-figure-preview img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; padding: 10px; border-radius: 10px; background: #f7f5ef; }
.form-favorite-toggle { width: 100%; min-height: 48px; margin-top: 12px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.form-favorite-toggle span { color: #8c919c; font-size: 24px; line-height: 1; }
.form-favorite-toggle strong { font-size: 12px; }
.form-favorite-toggle:hover { color: var(--text); border-color: rgba(242,201,76,.32); }
.form-favorite-toggle.active { color: var(--yellow); border-color: rgba(242,201,76,.38); background: rgba(242,201,76,.11); }
.form-favorite-toggle.active span { color: var(--yellow); text-shadow: 0 0 12px rgba(242,201,76,.35); }
.form-favorite-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.form-fields { display: grid; gap: 14px; }
.form-fields label { color: var(--muted); display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.form-fields input, .form-fields select, .form-fields textarea { width: 100%; min-height: 43px; padding: 9px 11px; font-size: 14px; }
.form-fields input:focus, .form-fields select:focus, .form-fields textarea:focus { border-color: rgba(242,201,76,.6); }
.form-fields textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-money { display: flex; align-items: center; position: relative; }
.input-money > span { position: absolute; left: 12px; z-index: 1; color: var(--muted); }
.input-money input { padding-left: 28px; }
.price-assist { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; color: var(--muted); font-size: 12px; }
.price-assist .text-button { font-size: 12px; flex: 0 0 auto; }
.price-assist.success { color: var(--success); }
.price-assist.error { color: var(--danger); }
.modal-actions { display: flex; gap: 10px; margin-top: 27px; padding-top: 22px; border-top: 1px solid var(--line); }
.action-spacer { flex: 1; }
.detail-modal { width: min(760px, calc(100% - 32px)); }
.detail-wrap { position: relative; }
.detail-hero { min-height: 300px; background: radial-gradient(circle, #f3f0e8, #c5c2bb); display: grid; place-items: center; padding: 24px; }
.detail-hero img { width: 100%; height: 270px; object-fit: contain; }
.detail-body { padding: 27px; }
.detail-body h2 { font-size: 28px; margin: 5px 0 7px; }
.detail-id { color: var(--yellow); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 25px 0; }
.detail-stats.single-quantity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.detail-stat span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.detail-stat strong { font-size: 18px; }
.detail-note { border-left: 2px solid var(--yellow); color: var(--muted); padding: 6px 0 6px 15px; line-height: 1.55; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.owned-check-modal { width: min(650px, calc(100% - 32px)); }
.owned-check-content { min-height: 400px; padding: 34px; }
.owned-check-loading { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.owned-check-loading h2 { margin: 26px 0 7px; }
.owned-check-loading p { color: var(--muted); }
.owned-check-main { display: grid; grid-template-columns: 185px 1fr; gap: 25px; align-items: start; }
.owned-check-figure { height: 215px; min-width: 0; min-height: 0; position: relative; }
.owned-check-image-frame { position: absolute; inset: 0; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 16px; padding: 12px; background: radial-gradient(circle, #f4f1e9, #c8c5be); }
.owned-check-image-frame img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.verdict-icon { position: absolute; right: -9px; bottom: -9px; width: 58px; height: 58px; border: 6px solid #121419; border-radius: 50%; display: grid; place-items: center; }
.verdict-icon svg { width: 28px; height: 28px; stroke-width: 2.7; }
.verdict-icon.owned { background: var(--success); color: #fff; }
.verdict-icon.not-owned { background: var(--yellow); color: #fff; }
.owned-check-copy h2 { margin: 4px 0 6px; font-size: 26px; line-height: 1.12; }
.owned-check-id { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.owned-verdict { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 15px; border-radius: 12px; }
.owned-verdict.owned { background: rgba(102,199,143,.1); border: 1px solid rgba(102,199,143,.24); }
.owned-verdict.not-owned { background: rgba(224,107,107,.08); border: 1px solid rgba(224,107,107,.2); }
.owned-verdict > svg { flex: 0 0 auto; margin-top: 1px; }
.owned-verdict.owned > svg { color: var(--success); }
.owned-verdict.not-owned > svg { color: var(--yellow-deep); }
.owned-verdict strong { display: block; margin-bottom: 4px; }
.owned-verdict span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.owned-check-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.alternative-matches { margin-top: 30px; padding-top: 23px; border-top: 1px solid var(--line); }
.alternative-matches > p { color: var(--muted); font-size: 12px; margin-bottom: 11px; }
.alternative-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.alternative-card { min-width: 0; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 10px; padding: 7px; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.alternative-card:hover { border-color: rgba(242,201,76,.35); }
.alternative-card img { width: 44px; height: 44px; object-fit: contain; border-radius: 7px; background: #ece9e2; }
.alternative-card > span { display: block; min-width: 0; overflow: hidden; }
.alternative-card strong { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alternative-card span { color: var(--muted); font-size: 9px; }
.owned-check-error { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.owned-check-error > svg { width: 48px; height: 48px; color: var(--danger); }
.owned-check-error h2 { margin: 18px 0 7px; }
.owned-check-error p { color: var(--muted); max-width: 430px; line-height: 1.5; }

.toast-region { position: fixed; right: 22px; bottom: 24px; z-index: 100; display: grid; gap: 9px; pointer-events: none; }
.toast { min-width: 240px; max-width: 390px; padding: 14px 17px; border-radius: 11px; background: #262930; border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); animation: toast-in .25s ease; }
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.bottom-nav { display: none; }

@media (max-width: 900px) {
  .figure-grid, .figure-grid.compact { grid-template-columns: repeat(3, 1fr); }
  .stat-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .topbar { height: 62px; padding: 0 18px; }
  .brand strong { font-size: 13px; }
  .connection-badge span, .desktop-only { display: none; }
  .view { min-height: calc(100vh - 62px); }
  .content-wrap { width: min(100% - 30px, var(--content)); }
  .hero { min-height: 475px; }
  .hero-copy { width: calc(100% - 36px); padding: 72px 0 50px; }
  .hero-copy h1 { font-size: clamp(51px, 16vw, 75px); }
  .hero-copy > p:not(.eyebrow) { max-width: 78%; font-size: 14px; }
  .hero-art { inset: 0 0 0 20%; opacity: .31; }
  .dashboard-content { padding: 43px 0 55px; }
  .section-heading h2 { font-size: 23px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 128px; padding: 18px; }
  .stat-card.featured { grid-column: 1 / -1; min-height: 138px; }
  .stat-card strong { font-size: 29px; }
  .recent-heading { margin-top: 40px; }
  .figure-grid, .figure-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .figure-info { padding: 13px; }
  .figure-info h3 { font-size: 13px; }
  .scanner-page, .more-page { padding: 30px 0 45px; }
  .credentials-form { grid-template-columns: 1fr; }
  .credentials-actions { grid-column: 1; }
  .credentials-actions .button { flex: 1 1 auto; }
  .back-button { margin-bottom: 29px; }
  .scanner-page h1, .collection-page h1, .more-page h1 { font-size: 42px; }
  .value-page { padding: 30px 0 50px; }
  .value-page h1 { font-size: clamp(29px, 9.2vw, 42px); letter-spacing: 0; }
  .value-title-row { display: block; }
  .value-current { min-width: 0; margin-top: 24px; }
  .value-kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
  .value-kpis article { padding: 16px; }
  .value-kpis article:last-child { grid-column: 1 / -1; }
  .value-kpis strong { font-size: 21px; }
  .value-chart-card { padding: 21px 12px 17px; border-radius: 16px; }
  .value-chart-heading { display: block; padding: 0 7px; }
  .range-selector { width: 100%; margin-top: 17px; }
  .range-selector button { flex: 1; padding: 0 7px; }
  .value-chart-wrap { min-height: 270px; }
  .value-chart { min-height: 270px; }
  .value-history-note { margin: 0 7px; }
  .scan-dropzone, .scan-empty, .scan-preview { min-height: 410px; height: auto; }
  .scan-preview { height: 470px; }
  .candidate-card { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 8px; }
  .candidate-card img { width: 72px; height: 72px; }
  .collection-page { padding: 40px 0 50px; }
  .page-title-row { align-items: center; }
  .page-title-row .button { width: 45px; flex: 0 0 45px; padding: 0; gap: 0; }
  #manualAddButton .button-label, #deleteItemButton .button-label { display: none; }
  .page-title-row .button svg { margin: 0; }
  .collection-toolbar { grid-template-columns: 1fr 1fr; margin-top: 29px; }
  .collection-page-selector { grid-column: 1 / -1; gap: 6px; }
  .collection-page-selector label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; color: var(--muted); font-size: 11px; font-weight: 800; }
  .search-field { grid-column: 1 / -1; }
  .collection-toolbar select { width: 100%; }
  .collection-toolbar select { grid-column: 1 / -1; }
  .collection-filter-group { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .toggle-chip { justify-content: center; padding: 0 7px; font-size: 13px; }
  .favorite-button { width: 31px; height: 31px; font-size: 20px; margin-right: -3px; }
  .figure-image { aspect-ratio: 1; }
  .figure-card-footer strong { font-size: 13px; }
  .bottom-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(67px + env(safe-area-inset-bottom)); padding: 7px 10px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(14,15,19,.96); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
  .bottom-nav button { border: 0; background: transparent; color: #717682; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 9px; font-weight: 700; cursor: pointer; }
  .bottom-nav button svg { width: 21px; height: 21px; }
  .bottom-nav button.active { color: var(--yellow); }
  .modal { width: calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(100dvh - 24px); margin: auto; border-radius: 22px; border-bottom: 1px solid rgba(255,255,255,.13); }
  .modal > form { padding: 25px 17px calc(20px + env(safe-area-inset-bottom)); }
  .item-form-layout { grid-template-columns: 1fr; }
  .selected-figure-column { width: min(100%, 290px); margin: 0 auto; }
  .selected-figure-preview { height: 330px; }
  .modal-actions { position: sticky; bottom: 0; background: #121419; margin-left: -17px; margin-right: -17px; padding: 17px; }
  .modal-actions .button { padding: 0 13px; }
  .modal-actions .danger { width: 46px; font-size: 0; }
  .detail-hero { min-height: 240px; }
  .detail-hero img { height: 220px; }
  .detail-body { padding: 22px 17px calc(24px + env(safe-area-inset-bottom)); }
  .detail-stats, .detail-stats.single-quantity { grid-template-columns: 1fr 1fr; }
  .detail-stats.single-quantity .detail-stat:last-child { grid-column: 1 / -1; }
  .owned-check-content { padding: 25px 17px calc(24px + env(safe-area-inset-bottom)); }
  .owned-check-main { grid-template-columns: 1fr; }
  .owned-check-figure { width: 190px; height: 205px; margin: 0 auto; }
  .owned-check-copy { text-align: center; }
  .owned-verdict { text-align: left; }
  .owned-check-actions { justify-content: center; }
  .alternative-list { grid-template-columns: 1fr; }
  .toast-region { left: 15px; right: 15px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; width: 100%; }
}

@media (max-width: 390px) {
  .field-row { grid-template-columns: 1fr; }
  .figure-grid, .figure-grid.compact { gap: 8px; }
  .figure-info h3 { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* MinifigTin theme · bright collector edition */
:root {
  --orange-soft: #fff1e4;
  --orange-pale: #fff8f2;
  --orange-line: #ffd4ae;
  --ink: #18171b;
  --paper: #ffffff;
  --success: #23885d;
  --danger: #cf4d45;
  --radius: 16px;
}

html, body { background: #fffaf6; }
body { color: var(--ink); }
button, input, select, textarea { accent-color: var(--yellow); }
::selection { background: #ffd7b4; color: #171317; }

.topbar-actions { justify-self: end; }
.connection-badge { color: #68636a; font-weight: 700; }
.connection-badge i { background: var(--success); box-shadow: 0 0 0 4px rgba(35,136,93,.11); }
.icon-button { border-color: var(--orange-line); background: var(--orange-soft); color: var(--yellow-deep); }
.icon-button:hover { background: #ffe2c7; }
.view { min-height: calc(100vh - 92px); }
.content-wrap { width: min(var(--content), calc(100% - 56px)); }
.eyebrow { color: var(--yellow-deep); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
h1 { font-family: inherit; font-weight: 900; letter-spacing: -.032em; text-transform: none; }
h2, h3 { color: var(--ink); }

.button { min-height: 46px; border-radius: 11px; font-weight: 850; }
.button.primary { background: var(--yellow); color: #fff; box-shadow: 0 8px 22px rgba(255,122,0,.2); }
.button.primary:hover { background: #e96f00; }
.button.secondary { background: var(--ink); color: #fff; }
.button.secondary:hover { background: #302c31; }
.button.ghost { background: #fff; border-color: #dfd3ca; color: var(--ink); }
.button.ghost:hover { border-color: var(--yellow); background: var(--orange-pale); }
.button.danger { color: var(--danger); border-color: #f0c8c4; background: #fff8f7; }
.text-button { color: var(--yellow-deep); }
.back-button { color: #716d69; margin-bottom: 34px; }
.back-button span { color: var(--ink); }

.hero { min-height: 500px; background: linear-gradient(108deg, #fff 0 55%, #fff2e6 55% 100%); }
.hero::before { content: ""; position: absolute; left: -34px; bottom: 36px; width: 72px; height: 52px; border: 3px solid var(--yellow); border-radius: 11px; transform: rotate(31deg); }
.hero-copy { padding: 78px 0 68px; }
.hero-copy h1 { max-width: 820px; margin-bottom: 22px; font-size: clamp(46px, 5.5vw, 70px); line-height: .98; }
.hero-copy h1 span { color: var(--yellow); }
.hero-copy > p:not(.eyebrow) { color: #69646b; font-size: 16px; line-height: 1.65; }
.hero-button { margin-top: 12px; }
.hero-product-card { width: min(390px, 70%); min-height: 340px; border: 1px solid #f0ded0; border-radius: 28px; background: #fff; padding: 22px; box-shadow: 0 28px 70px rgba(76,47,22,.14); transform: rotate(2.5deg); }
.hero-product-card::before { border-color: var(--yellow); }
.hero-product-card:disabled { cursor: default; }
.hero-product-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }

@media (min-width: 1400px) {
  .hero-copy { width: min(1320px, calc(100% - 96px)); }
}

.dashboard-content { padding: 58px 0 92px; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { font-size: 30px; letter-spacing: -.022em; }
.stat-grid { gap: 14px; }
.stat-card { min-height: 146px; padding: 23px; border-color: #eadfd6; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(68,43,22,.045); }
.stat-card.featured { border-color: #ffbc80; background: linear-gradient(135deg, #ff7a00, #ff983c); }
.stat-card.featured p, .stat-card.featured span { color: rgba(255,255,255,.78); }
.stat-card.featured strong { color: #fff; }
.stat-card:not(.featured) strong { color: var(--ink); }
.stat-link::after { color: var(--yellow-deep); opacity: .7; }
.stat-card.featured::after { color: #fff; }
.stat-link:hover { border-color: #ffba7a; background: var(--orange-pale); box-shadow: 0 12px 28px rgba(68,43,22,.08); }
.stat-card.featured:hover { background: linear-gradient(135deg, #ef7100, #ff8b26); }

.value-page, .scanner-page, .more-page, .collection-page { padding-top: 50px; }
.value-page h1, .scanner-page h1, .collection-page h1, .more-page h1 { color: var(--ink); font-size: clamp(42px, 5.5vw, 62px); }
.page-intro { color: #716c72; }
.value-current { border-color: #ffc896; background: linear-gradient(135deg, #fff4e9, #fff); }
.value-current strong { color: var(--yellow-deep); }
.value-kpis article, .value-chart-card { border-color: #eadfd6; background: #fff; box-shadow: 0 10px 32px rgba(68,43,22,.05); }
.range-selector { border-color: #ead6c5; background: #fff6ed; }
.range-selector button.active { background: var(--yellow); color: #fff; }
.value-chart .chart-grid-line { stroke: #eadfd6; }
.value-chart .chart-axis-label { fill: #777178; }
.value-chart .chart-line-shadow { stroke: rgba(255,122,0,.14); }
.value-chart .chart-point { fill: #fff; }
.value-chart .chart-point.latest { stroke: #ffe7d2; filter: drop-shadow(0 0 6px rgba(255,122,0,.34)); }
.value-chart .chart-latest-label rect { fill: var(--yellow); }
.value-history-note { border-color: #eee4dd; }

.scan-dropzone { border: 2px dashed #ffb068; background: radial-gradient(circle at 50% 45%, #fff 0, #fff7ef 64%, #fff2e7 100%); }
.scan-empty h2 { font-size: 25px; }
.scan-empty p { color: #746f74; }
.scan-empty .button.ghost { background: transparent; color: var(--yellow-deep); }
.scan-corners { border-radius: 22px; background: rgba(255,255,255,.74); }
.scan-corners > span { border-color: var(--yellow); }
.minifig-silhouette { opacity: .9; }
.minifig-silhouette i, .minifig-silhouette .head::before { background: #262329; }
.minifig-silhouette .legs { background: linear-gradient(90deg, #262329 0 43%, transparent 43% 57%, #262329 57%); }
.radar { border-color: var(--yellow); box-shadow: 0 0 30px rgba(255,122,0,.15); }
.radar::before { border-color: rgba(255,122,0,.38); }
.radar::after { background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,122,0,.6) 96%, var(--yellow)); }
.notice.error { background: #fff5f4; border-color: #efcbc8; color: #aa3934; }
.candidate-card { border-color: #eadfd6; background: #fff; box-shadow: 0 6px 18px rgba(68,43,22,.035); }
.candidate-card:hover { border-color: #ffad61; box-shadow: 0 9px 24px rgba(68,43,22,.07); }
.candidate-card img { background: #f7f3ef; }
.match-score { color: var(--yellow-deep); }
.owned-mini { background: #e8f6ef; color: #176e4a; }

.collection-toolbar { padding: 13px; border: 1px solid #eadfd6; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(68,43,22,.045); }
.search-field { border-color: #e6d8cc; background: #fffaf6; }
.search-field:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,122,0,.1); }
.search-field input { color: var(--ink); }
.search-camera { background: var(--yellow); color: #fff; }
.search-camera:hover { background: #e86e00; }
.collection-toolbar select, .form-fields select, .form-fields input, .form-fields textarea { border-color: #e6d8cc; background: #fff; color: var(--ink); }
.toggle-chip { border-color: #e6d8cc; background: #fff; color: #625e63; }
.toggle-chip:has(input:checked) { border-color: #ffad61; background: #fff2e6; color: #a74600; }

.figure-grid { gap: 16px; }
.figure-card { border-color: #eadfd6; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(68,43,22,.055); }
.figure-card:hover { border-color: #ffab5d; box-shadow: 0 15px 32px rgba(68,43,22,.1); }
.figure-card.top-value { border-color: #ff9c43; box-shadow: inset 0 0 0 1px rgba(255,122,0,.12), 0 9px 28px rgba(176,94,18,.1); }
.figure-image { background: linear-gradient(145deg, #f8f5f2, #eee8e2); }
.figure-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); opacity: .88; }
.figure-image .quantity-badge, .owned-badge { background: var(--yellow); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(255,122,0,.24); }
.figure-info small { color: var(--yellow-deep); }
.figure-info h3 { color: var(--ink); }
.favorite-button { border-color: #e8ddd4; background: #fff; color: #918b90; }
.favorite-button:hover, .favorite-button.active { color: var(--yellow); border-color: #ffb36d; background: #fff3e8; text-shadow: none; }
.figure-card-footer { border-color: #eee4dd; }
.empty-state { border-color: #dfcbbb; background: rgba(255,255,255,.6); }
.tin-mark { display: inline-block; width: 42px; height: 42px; border: 3px solid var(--yellow); border-radius: 11px; transform: rotate(-8deg); }
.tin-mark span { display: block; width: 15px; height: 15px; margin: 10px; border: 2px solid var(--ink); border-radius: 50%; }
.tin-mark.medium { width: 54px; height: 54px; border-radius: 14px; }
.tin-mark.medium span { width: 19px; height: 19px; margin: 14px; }

.settings-card { border-color: #eadfd6; background: #fff; box-shadow: 0 8px 24px rgba(68,43,22,.04); }
.credentials-form input { border-color: #e6d8cc; background: #fffaf6; color: var(--ink); }
.credentials-form input:focus, .form-fields input:focus, .form-fields select:focus, .form-fields textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,122,0,.1); }
.status-dot { background: #9a9399; box-shadow: 0 0 0 5px rgba(120,112,118,.08); }
.status-dot.connected { background: var(--success); box-shadow: 0 0 0 5px rgba(35,136,93,.1); }

.modal { border-color: #e7d9ce; background: #fff; color: var(--ink); box-shadow: 0 28px 80px rgba(43,27,14,.25); }
.modal::backdrop { background: rgba(42,31,24,.54); }
.selected-figure-preview, .detail-hero, .owned-check-image-frame { border-color: #ffc086; background: linear-gradient(145deg, #f8f4f0, #e8e0d8); }
.selected-figure-preview img { background: #fff; }
.form-favorite-toggle, .detail-stat, .alternative-card { border-color: #e9ddd4; background: #fffaf6; }
.form-favorite-toggle:hover, .form-favorite-toggle.active, .alternative-card:hover { border-color: #ffad61; background: #fff2e6; }
.form-favorite-toggle.active, .form-favorite-toggle.active span { color: var(--yellow-deep); text-shadow: none; }
.modal-actions { border-color: #eee4dd; }
.detail-id, .owned-check-id { color: var(--yellow-deep); }
.verdict-icon { border-color: #fff; }
.owned-verdict.owned { background: #eef9f3; border-color: #bee3d0; }
.owned-verdict.not-owned { background: #fff3e8; border-color: #ffd3ad; }
.inline-collection-create { min-width: 0; padding: 14px; border: 1px solid #ffd3ad; border-radius: 12px; background: #fff8f1; }
.inline-collection-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.inline-collection-actions .button { flex: 1 1 auto; min-width: 0; padding: 10px 12px; white-space: normal; }
.inline-collection-error { margin: 10px 0 0; color: #a6312c; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.inline-collection-error:empty { display: none; }
.alternative-matches { border-color: #eee4dd; }
.toast { background: #211f22; color: #fff; border-color: #3a363b; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 14px; }
  .desktop-nav button { padding: 0 9px; }
  .desktop-nav button::after { left: 9px; right: 9px; }
  .hero-art { inset: 0 0 0 45%; opacity: .68; }
}

@media (max-width: 680px) {
  .topbar { min-height: 66px; height: 66px; display: flex; border-bottom-width: 4px; }
  .brand .brand-logo { width: 154px; }
  .brand-word { font-size: 22px; }
  .brand-word > span { border-width: 2px; border-radius: 6px; }
  .brand small { margin-top: 5px; font-size: 7px; }
  .desktop-nav { display: none; }
  .view { min-height: calc(100vh - 66px); }
  .content-wrap { width: min(100% - 30px, var(--content)); }
  .hero { min-height: 600px; background: linear-gradient(180deg, #fff 0 57%, #fff1e4 57% 100%); }
  .hero-copy { width: calc(100% - 36px); padding: 52px 0 0; }
  .hero-copy h1 { max-width: 100%; font-size: clamp(43px, 13vw, 62px); }
  .hero-copy > p:not(.eyebrow) { max-width: 100%; }
  .hero-art { inset: 330px 0 0 0; opacity: 1; align-items: start; padding-top: 18px; }
  .hero-product-card { width: min(300px, 76%); min-height: 225px; border-radius: 22px; padding: 17px; transform: rotate(1.5deg); }
  .hero-product-card::before { inset: 9px; border-radius: 16px; }
  .hero-card-label { top: 23px; left: 27px; font-size: 8px; }
  .hero-product-card img { height: 155px; padding: 24px 14px 0; }
  .hero-product-copy { margin: 2px 9px 7px; }
  .hero-product-card strong { font-size: 12px; }
  .outline-tile { width: 37px; height: 27px; border-width: 2px; }
  .tile-one { right: 5%; top: 14%; }
  .tile-two { left: 4%; bottom: 11%; }
  .dashboard-content { padding-top: 42px; }
  .stat-card.featured { grid-column: 1 / -1; }
  .collection-toolbar { padding: 10px; }
  .bottom-nav { background: rgba(255,255,255,.96); border-color: #eadfd6; box-shadow: 0 -8px 28px rgba(58,37,20,.07); }
  .bottom-nav button { color: #888187; }
  .bottom-nav button.active { color: var(--yellow-deep); }
  .modal { border-color: #e7d9ce; }
  .modal-actions { background: #fff; }
  .selected-figure-preview { height: 300px; }
}

@media (max-width: 390px) {
  .hero-copy h1 { font-size: 42px; }
  .hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .hero-button { width: 100%; }
}

/* Mobile fit pass · iPhone and other narrow screens */
@media (max-width: 680px) {
  html, body, .app-shell { max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .topbar {
    width: 100%; min-height: 66px; height: 66px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .topbar-actions { min-width: 20px; margin-left: auto; }
  .connection-badge { width: 18px; height: 18px; justify-content: center; }
  .connection-badge i { width: 8px; height: 8px; }

  .hero {
    min-height: 0; display: flex; flex-direction: column;
    background: #fff; overflow: hidden;
  }
  .hero::before { display: none; }
  .hero-copy {
    position: relative; width: 100%; margin: 0;
    padding: clamp(38px, 11vw, 54px) 18px 32px;
  }
  .hero-copy .eyebrow {
    max-width: 100%; margin-bottom: 13px;
    font-size: 9px; line-height: 1.5; letter-spacing: .16em;
    overflow-wrap: anywhere;
  }
  .hero-copy h1 {
    max-width: 100%; margin-bottom: 18px;
    font-size: clamp(40px, 12.4vw, 52px); line-height: .97;
    letter-spacing: -.032em;
  }
  .hero-copy > p:not(.eyebrow) {
    max-width: 100%; margin-bottom: 18px;
    font-size: 15px; line-height: 1.55;
  }
  .hero-button {
    position: relative; z-index: 2; width: 100%; max-width: 100%;
    min-height: 52px; margin: 4px 0 0; padding: 0 16px;
    white-space: normal; text-align: center;
  }
  .hero-art {
    position: relative; inset: auto; width: 100%; min-height: 0;
    display: grid; place-items: center; align-items: center;
    padding: 28px 18px 36px; background: #fff1e4;
    opacity: 1; overflow: hidden;
  }
  .hero-product-card {
    width: min(330px, calc(100vw - 42px)); max-width: calc(100vw - 42px); min-width: 0; min-height: 0; padding: 18px;
    border-radius: 22px; transform: rotate(.75deg);
  }
  .hero-product-card::before { inset: 9px; border-radius: 16px; }
  .hero-card-label { top: 23px; left: 28px; font-size: 8px; }
  .hero-product-card img { height: 190px; padding: 25px 12px 2px; }
  .hero-product-copy { min-width: 0; margin: 2px 9px 8px; }
  .hero-product-card strong {
    max-width: 100%; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .outline-tile { display: none; }

  .dashboard-content { padding: 38px 0 48px; }
  .section-heading { align-items: flex-end; gap: 12px; }
  .section-heading > div { min-width: 0; }
  .section-heading h2 { font-size: 24px; }
  .text-button { flex: 0 0 auto; }
  .stat-grid { gap: 10px; }
  .stat-card { min-width: 0; min-height: 118px; padding: 17px; }
  .stat-card.featured { min-height: 128px; }
  .stat-card strong { font-size: 27px; overflow-wrap: anywhere; }
  .stat-link::after { right: 14px; }

  .value-page, .scanner-page, .more-page, .collection-page { padding: 30px 0 46px; }
  .value-page h1, .scanner-page h1, .collection-page h1, .more-page h1 {
    max-width: 100%; font-size: clamp(36px, 10.5vw, 44px); line-height: 1;
    overflow-wrap: anywhere;
  }
  .value-page h1 {
    font-size: clamp(34px, 9.2vw, 38px);
    letter-spacing: -.03em; overflow-wrap: normal; word-break: normal;
  }
  .page-intro { max-width: 100%; font-size: 14px; }
  .value-current { width: 100%; padding: 18px; }
  .value-current strong { font-size: 27px; overflow-wrap: anywhere; }
  .value-kpis { gap: 9px; }
  .value-kpis article { min-width: 0; padding: 15px; }
  .value-kpis strong { overflow-wrap: anywhere; }
  .value-chart-heading h2 { font-size: 21px; }

  .scan-dropzone, .scan-empty { min-height: 330px; }
  .scan-empty { padding: 24px 16px 20px; }
  .scan-corners { width: 136px; height: 136px; }
  .scan-corners > span { width: 30px; height: 30px; }
  .minifig-silhouette { transform: scale(.78); }
  .scan-empty h2 { margin: 14px 0 6px; font-size: 22px; }
  .scan-empty p { margin-bottom: 14px; font-size: 13px; }
  .scan-empty .button.ghost { margin-top: 5px; }
  .scan-preview { min-height: 390px; height: 440px; }
  .candidate-card {
    grid-template-columns: 66px minmax(0, 1fr) auto;
    gap: 10px; min-width: 0;
  }
  .candidate-card img { width: 66px; height: 66px; }
  .candidate-card > span { min-width: 0; }
  .candidate-card strong { overflow-wrap: anywhere; }
  .candidate-meta { align-items: flex-start; flex-wrap: wrap; }

  .page-title-row { min-width: 0; align-items: flex-start; }
  .page-title-row > div { min-width: 0; }
  .page-title-row > div > p:last-child { overflow-wrap: anywhere; }
  .collection-toolbar { min-width: 0; margin: 26px 0 20px; }
  .collection-toolbar > * { min-width: 0; }
  .search-field { width: 100%; }
  .toggle-chip { min-width: 0; text-align: center; }

  .figure-grid, .figure-grid.compact { gap: 10px; }
  .figure-card, .figure-info, .figure-title-row, .figure-title-row > div { min-width: 0; }
  .figure-info { padding: 12px; }
  .figure-info h3 { min-height: 36px; margin-bottom: 12px; font-size: 13px; overflow-wrap: anywhere; }
  .figure-card-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
  .figure-card-footer.single-value { grid-template-columns: minmax(0, 1fr); }
  .figure-card-footer.single-value > div + div { display: none !important; }
  .figure-card-footer > div { min-width: 0; }
  .figure-card-footer strong { display: block; font-size: 12px; overflow-wrap: anywhere; }

  .settings-card { min-width: 0; padding: 19px; }
  .install-app-card { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .install-app-copy { align-items: flex-start; }
  .install-app-icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 15px; }
  .install-app-card .button { width: 100%; min-height: 52px; }
  .install-app-dialog-intro { align-items: flex-start; padding: 14px; }
  .install-app-dialog-intro img { width: 58px; height: 58px; flex-basis: 58px; border-radius: 15px; }
  .settings-title-row > div { min-width: 0; }
  .button-row { flex-wrap: wrap; }
  .button-row .button { min-width: 0; }

  .modal { overflow-x: hidden; }
  .modal-heading, .item-form-layout, .form-fields, .selected-figure-column { min-width: 0; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .form-fields input, .form-fields select, .form-fields textarea { max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .action-spacer { display: none; }
  .modal-actions .button:not(.danger) { flex: 1 1 120px; }
  #itemForm .modal-actions .button:not(.danger) {
    flex: 1 1 80px;
    min-width: 0;
    padding: 0 8px;
    font-size: 14px;
    gap: 6px;
  }
  .modal-actions #deleteItemButton {
    flex: 0 0 58px;
    width: 58px;
    min-width: 58px;
    min-height: 56px;
    padding: 0;
    gap: 0;
    border-width: 2px;
    background: #fff3f1;
    color: #d7433c;
  }
  .modal-actions #deleteItemButton svg {
    width: 25px;
    height: 25px;
    margin: 0;
    flex: 0 0 25px;
    stroke-width: 2;
  }
  .detail-body h2, .owned-check-copy h2 { overflow-wrap: anywhere; }
  .detail-actions .button { flex: 1 1 100%; width: 100%; }
  .owned-verdict { min-width: 0; }

  .bottom-nav {
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 6px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  }
  .bottom-nav button { min-width: 0; padding: 0 2px; font-size: 9px; }
  .bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav button:focus { outline: none; }
  .bottom-nav button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 10px; }
}