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

:root {
  font-family: "DM Sans", sans-serif;
  color: #22231f;
  background: #f7f7f4;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #23241f;
  --muted: #8b8d83;
  --line: #e9e9e3;
  --surface: #fff;
  --accent-blue: #b9d5f0;
  --font-display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
body { min-width: 360px; margin: 0; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #7299c2; outline-offset: 3px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { min-height: 100vh; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 3; display: flex; width: 246px; flex-direction: column; padding: 28px 18px 20px; background: #fff; border-right: 1px solid #eeeee9; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--ink); text-decoration: none; font: 800 21px var(--font-display); letter-spacing: -1.25px; }
.brand-period { color: #638dbd; }
.brand-mark { display: grid; width: 25px; height: 25px; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { border-radius: 3px; background: #b9d5f0; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: #25261f; }
.sidebar-label, .section-kicker, .stat-label, .eyebrow, .breadcrumb, .input-label { font-size: 9px; font-weight: 700; letter-spacing: 1.05px; }
.sidebar-label { margin: 52px 12px 14px; color: #a3a49d; }
.main-nav { display: grid; gap: 5px; }
.nav-link { display: flex; height: 43px; align-items: center; gap: 11px; padding: 0 12px; border-radius: 8px; color: #77796f; font-size: 12px; font-weight: 500; text-decoration: none; transition: .16s; }
.nav-link svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-link:hover { background: #f1f5f9; color: var(--ink); }
.nav-link.active { background: #eaf1f8; color: #283444; font-weight: 700; }
.nav-count { display: grid; width: 20px; height: 20px; margin-left: auto; place-items: center; border-radius: 6px; background: #dfeaf5; color: #49698c; font-size: 10px; }
.sidebar-bottom { margin-top: auto; }
.sync-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px 10px; border: 1px solid #eeeee8; border-radius: 9px; background: #fbfbf8; }
.sync-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #e8f0f8; color: #557ba4; }
.sync-icon svg { width: 15px; height: 15px; }
.sync-card strong, .sync-card span:last-child { display: block; }
.sync-card strong { margin: 2px 0 4px; font-size: 10px; }
.sync-card div span { color: #8d8f85; font-size: 9px; }
.sidebar-credit { margin: 20px 10px 0; color: #a4a59d; font-size: 8px; font-weight: 600; letter-spacing: .85px; }
.sidebar-credit span { color: #88aeda; font-size: 12px; }

.main-content { min-height: 100vh; margin-left: 246px; }
.topbar { position: sticky; top: 0; z-index: 2; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 5.05%; border-bottom: 1px solid #ecece6; background: rgb(247 247 244 / 94%); backdrop-filter: blur(12px); }
.breadcrumb { color: #a3a49b; font-size: 8px; letter-spacing: .85px; }
.crumb-divider { padding: 0 9px; color: #d2d3cc; }
.breadcrumb strong { color: #5d5f55; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 17px; }
.local-indicator { display: flex; align-items: center; gap: 7px; color: #85877d; font-size: 10px; }
.local-indicator.storage-error { color: #a23d35; }
.local-indicator.storage-error i { background: #c7463d; }
.local-indicator i, .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #7299c2; }
.avatar { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: #e2edf7; color: #526f90; font: 700 12px var(--font-display); }
.page-wrap { width: min(100%, 1300px); margin: 0 auto; padding: 28px 5.05% 0; }

.access-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #f7f7f4; }
.access-card { width: min(100%, 430px); padding: 34px; border: 1px solid #e9e9e3; border-radius: 14px; background: #fff; box-shadow: 0 18px 60px #25261a0c; }
.access-brand { margin-bottom: 38px; padding: 0; }
.access-card .eyebrow { margin-bottom: 10px; }
.access-card h1 { margin: 0 0 9px; font: 700 26px/1.2 var(--font-display); letter-spacing: -1px; }
.access-card > p { margin: 0 0 22px; color: #818379; font-size: 12px; line-height: 1.6; }
.access-form, .account-create-form { display: grid; gap: 9px; }
.access-form input, .account-create-form input, .account-create-form select { width: 100%; min-height: 39px; margin-bottom: 6px; padding: 0 10px; border: 1px solid #e6e7df; border-radius: 6px; background: #fff; color: #292b25; font-size: 12px; }
.access-form .button, .account-create-form .button { width: 100%; margin-top: 5px; }
.access-guest { width: 100%; margin-top: 10px; }
.access-setup { margin: 14px 0 0 !important; padding: 10px; border-radius: 6px; background: #f5f4ee; color: #68695f !important; font-size: 10px !important; }
.access-error { color: #a23d35; }
.session-badge { max-width: 170px; overflow: hidden; color: #85877d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-button { padding: 6px 9px; border: 1px solid #e6e7df; border-radius: 6px; background: #fff; color: #62655b; font-size: 9px; cursor: pointer; }
.account-button:hover { border-color: #c8d8e8; background: #f1f5f9; color: #58799d; }
.accounts-modal, .account-password-modal { width: min(570px, calc(100vw - 30px)); }
.wanted-add-modal { width: min(460px, calc(100vw - 30px)); }
.account-delete-confirm-modal { width: min(420px, calc(100vw - 30px)); padding-bottom: 24px; }
.account-delete-confirm-modal h2 { margin-bottom: 9px; }
.account-delete-confirm-modal .modal-description { margin-bottom: 18px; }
.account-delete-actions { display: flex; justify-content: flex-end; gap: 8px; }
.account-delete-actions .button { min-width: 104px; }
.account-delete-confirm-button { border: 1px solid #a94438; background: #a94438; color: #fff; }
.account-delete-confirm-button:hover { background: #91382f; }
.account-delete-confirm-button:disabled { cursor: wait; opacity: .7; }
.account-create-form { margin-top: 17px; gap: 7px; }
.account-create-form .input-label { margin-top: 5px; }
.account-list-section { margin-top: 24px; }
.account-list-section h3 { margin: 0 0 9px; font: 700 12px var(--font-display); }
.account-list { display: grid; gap: 7px; }
.account-row { display: grid; grid-template-columns: minmax(90px, 1fr) 132px auto auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #ecece6; border-radius: 7px; }
.account-row-info { display: grid; min-width: 0; gap: 3px; }
.account-row-info strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-row-info span { color: #8b8d83; font-size: 8px; }
.account-row select { min-width: 0; padding: 6px; border: 1px solid #e6e7df; border-radius: 5px; background: #fff; font-size: 9px; }
.account-active { display: flex; align-items: center; gap: 4px; color: #6f7167; font-size: 8px; white-space: nowrap; }
.account-active input { margin: 0; accent-color: #638dbd; }
.account-delete { padding: 5px 7px; border: 1px solid #f0dfdb; border-radius: 5px; background: #fff; color: #a85e50; font-size: 8px; cursor: pointer; }
.account-delete:disabled { opacity: .45; cursor: not-allowed; }

.hero { position: relative; display: flex; min-height: 239px; overflow: hidden; align-items: center; padding: 30px 40px; border-radius: 12px; background: #e5edf5; }
.hero-copy { position: relative; z-index: 1; max-width: 440px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #597493; font-size: 8px; letter-spacing: 1.05px; }
.eyebrow-dot { width: 5px; height: 5px; background: #789dc2; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 12px 0 8px; font: 700 clamp(29px, 3.2vw, 41px)/1.12 var(--font-display); letter-spacing: -2.2px; }
.hero h1 span { color: #547da7; }
.hero-copy > p { margin: 0 0 17px; color: #77796f; font-size: 11px; }
.button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 7px; cursor: pointer; font-size: 10px; font-weight: 600; transition: transform .15s, background .15s, box-shadow .15s; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 14px; height: 14px; }
.button-dark { background: #26271f; color: #fff; }
.button-dark:hover { background: #3c3d32; box-shadow: 0 4px 12px #24251f22; }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 48%; }
.hero-sun { position: absolute; top: 18px; right: 18%; width: 190px; height: 190px; border-radius: 50%; background: #c4d8eb; }
.brick-stack { position: absolute; display: flex; align-items: flex-end; justify-content: center; gap: 7px; }
.brick-stack div { position: relative; height: 42px; border: 1px solid rgb(83 92 51 / 17%); border-radius: 4px 4px 7px 7px; box-shadow: 0 5px 0 rgb(60 68 33 / 14%), 0 11px 13px rgb(54 61 36 / 11%); }
.brick-stack div::before { position: absolute; top: -7px; left: 5px; width: 12px; height: 7px; border: 1px solid rgb(83 92 51 / 15%); border-bottom: 0; border-radius: 4px 4px 0 0; background: inherit; content: ""; box-shadow: 15px 0 0 -1px inherit; }
.brick-stack-back { top: 80px; right: 28%; transform: rotate(-12deg); }
.brick-stack-back div { width: 42px; background: #b6cde4; }
.brick-stack-front { top: 112px; right: 14%; transform: rotate(8deg); }
.brick-stack-front div { width: 56px; height: 48px; background: #f0cd68; }
.brick-stack-front div:first-child { background: #779bc2; }
.float-spark { position: absolute; color: #6b94bd; }
.spark-one { top: 42px; right: 23%; font-size: 18px; }
.spark-two { top: 86px; right: 8%; color: #d6ab44; font-size: 12px; }
.hero-note { position: absolute; right: 22px; bottom: 17px; display: grid; gap: 4px; }
.hero-note span { color: #747f8a; font-size: 7px; font-weight: 700; letter-spacing: .9px; }
.hero-note strong { color: #455d76; font: 700 13px var(--font-display); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 17px 0 32px; }
.stat-card { display: flex; min-height: 128px; flex-direction: column; align-items: flex-start; padding: 13px 14px 12px; border: 1px solid #ecece6; border-radius: 9px; background: #fff; }
.stat-icon { display: grid; width: 28px; height: 28px; margin-bottom: 11px; place-items: center; border-radius: 8px; }
.stat-icon svg { width: 16px; height: 16px; }
.icon-yellow { background: #faf0cf; color: #a1842c; }
.icon-blue { background: #dfedf5; color: #5683a1; }
.icon-pink { background: #f5e2dc; color: #b97c69; }
.icon-year { background: #e3edf7; color: #6687ac; }
.stat-label { color: #999b91; font-size: 8px; letter-spacing: .75px; }
.stat-value-row { display: flex; align-items: baseline; gap: 6px; margin: 3px 0 1px; }
.stat-value-row strong { font: 700 25px var(--font-display); letter-spacing: -1px; }
.stat-caption { color: #85877d; font-size: 9px; }
.stat-foot { color: #a2a39b; font-size: 9px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.section-kicker { margin-bottom: 5px; color: #a0a197; font-size: 8px; letter-spacing: .95px; }
.section-heading h2, .modal h2 { margin: 0; font: 700 21px var(--font-display); letter-spacing: -.85px; }
.section-heading h2 span { color: #a5a69d; font: 500 12px "DM Sans", sans-serif; letter-spacing: 0; }
.inventory-scope-note { margin: -6px 0 13px; color: #85877d; font-size: 10px; line-height: 1.55; }
.button-outline { min-height: 34px; border: 1px solid #e5e5df; background: #fff; color: #55574e; }
.button-outline:hover { background: #f2f6fa; }
.button-outline svg { width: 13px; height: 13px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.search-box { display: flex; width: min(330px, 45%); height: 35px; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid #e9e9e3; border-radius: 7px; background: #fff; }
.search-box svg { width: 14px; height: 14px; color: #a0a198; flex: 0 0 auto; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.search-box input::placeholder { color: #a7a89f; }
.search-box kbd { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #e9e9e4; border-radius: 4px; color: #a0a198; font: 8px "DM Sans", sans-serif; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.toolbar-sort { display: flex; align-items: center; gap: 7px; }
.sort-label { color: #9b9c93; font-size: 9px; }
.toolbar select { max-width: 144px; padding: 6px 18px 6px 0; border: 0; outline: 0; background: transparent; color: #51534a; font-size: 9px; cursor: pointer; }
.color-filter { position: relative; }
.color-filter-trigger { display: inline-flex; min-height: 30px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #e7e8e0; border-radius: 6px; background: #fff; color: #57594f; font-size: 9px; cursor: pointer; white-space: nowrap; }
.color-filter-trigger svg { width: 12px; height: 12px; color: #8c8e83; }
.color-filter-count { color: #58799d; font-weight: 700; }
.color-filter-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 5; display: grid; width: min(240px, 80vw); max-height: 270px; gap: 2px; overflow-y: auto; padding: 7px; border: 1px solid #e8e9e1; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px #22231f1c; }
.color-filter-option { display: flex; min-height: 32px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; color: #55574d; font-size: 10px; cursor: pointer; }
.color-filter-option:hover { background: #f2f6fa; }
.color-filter-option input { width: 14px; height: 14px; margin: 0; accent-color: #6688ad; }
.color-filter-swatch { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid #00000020; border-radius: 50%; background: var(--swatch-color); }
.color-filter-empty { padding: 9px; color: #8c8e84; font-size: 10px; }
.view-toggle { display: flex; height: 30px; padding: 2px; border: 1px solid #e8e8e2; border-radius: 6px; background: #fff; }
.view-button { display: grid; width: 27px; padding: 0; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #a0a198; cursor: pointer; }
.view-button svg { width: 14px; height: 14px; }
.view-button.selected { background: #e6eef7; color: #58799d; }
.wanted-set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wanted-set-card { min-width: 0; overflow: hidden; border: 1px solid #ecece6; border-radius: 9px; background: #fff; }
.wanted-set-image { position: relative; display: grid; height: 150px; place-items: center; overflow: hidden; background: #f6f6f1; }
.wanted-set-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 12px; object-fit: contain; object-position: center; }
.wanted-set-image .set-placeholder { width: 54px; height: 54px; }
.wanted-set-image .set-placeholder svg { width: 29px; height: 29px; }
.wanted-set-info { display: flex; min-height: 122px; flex-direction: column; align-items: flex-start; padding: 11px 12px; }
.wanted-set-info .set-id { margin-bottom: 5px; }
.wanted-set-info h3 { display: -webkit-box; min-height: 34px; overflow: hidden; margin: 0; color: #30312b; font: 700 12px/1.4 var(--font-display); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wanted-set-meta { display: flex; gap: 11px; margin-top: 8px; color: #898b82; font-size: 9px; }
.wanted-set-remove { margin-top: auto; padding: 7px 0 0; border: 0; background: transparent; color: #a85e50; font-size: 9px; cursor: pointer; }
.wanted-set-remove:hover { color: #91382f; text-decoration: underline; }
.wanted-list-empty { display: grid; justify-items: center; gap: 12px; grid-column: 1 / -1; }
.wanted-list-error { grid-column: 1 / -1; }
.sets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.set-card { min-width: 0; overflow: hidden; border: 1px solid #ecece6; border-radius: 9px; background: #fff; transition: transform .18s, box-shadow .18s; cursor: pointer; }
.set-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #26271b0d; }
.set-image { position: relative; display: grid; height: 142px; overflow: hidden; place-items: center; background: #f6f6f1; }
.set-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; padding: 12px; object-fit: contain; object-position: center; }
.set-placeholder { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 15px; background: #e3edf6; color: #6588af; }
.set-placeholder svg { width: 34px; height: 34px; }
.set-year { position: absolute; top: 10px; right: 10px; padding: 4px 7px; border: 1px solid #ebece4; border-radius: 5px; background: rgb(255 255 255 / 91%); color: #73756a; font-size: 8px; font-weight: 600; }
.set-card-info { padding: 11px 12px 10px; }
.set-card-info { display: flex; min-height: 154px; flex-direction: column; align-items: stretch; }
.set-id { margin-bottom: 4px; color: #6d8bb0; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.set-name { display: -webkit-box; min-height: 34px; overflow: hidden; margin: 0; color: #30312b; font: 700 12px/1.45 var(--font-display); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.set-meta { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #f0f0eb; color: #898b82; font-size: 9px; }
.set-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.set-meta svg { width: 12px; height: 12px; color: #a4a59c; }
.build-status { display: inline-flex; width: fit-content; align-items: center; gap: 5px; margin-top: 8px; color: #86887e; font-size: 8px; }
.build-status i { width: 6px; height: 6px; border-radius: 50%; background: #b5b6ad; }
.build-status.built { color: #56769a; }
.build-status.built i { background: #769bc1; }
.set-card-statuses { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.set-card-statuses .build-status { flex: 0 0 auto; margin-top: 0; }
.missing-status { display: inline-flex; flex: 0 0 auto; align-items: center; color: #8d7154; font-size: 8px; font-weight: 600; white-space: nowrap; }
.set-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.set-card-info .set-card-bottom { margin-top: auto; padding-top: 8px; }
.list-layout .set-card-statuses { grid-column: 1; }
.mini-fig-stack { display: flex; align-items: center; color: #9a9b92; font-size: 8px; }
.mini-fig-stack svg { width: 12px; height: 12px; margin-right: 4px; color: #bd8b79; }
.card-open { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #efefe9; border-radius: 6px; color: #919389; }
.card-open svg { width: 12px; height: 12px; }
.sets-grid.list-layout { grid-template-columns: 1fr; gap: 8px; }
.list-layout .set-card { display: flex; align-items: center; }
.list-layout .set-image { width: 104px; height: 91px; flex: 0 0 auto; }
.list-layout .set-image img { padding: 8px; }
.list-layout .set-card-info { display: grid; flex: 1; grid-template-columns: 1fr auto; align-items: center; gap: 0 15px; padding: 10px 14px; }
.list-layout .set-id { grid-column: 1; }
.list-layout .set-name { min-height: 0; grid-column: 1; }
.list-layout .set-meta { grid-row: 1 / span 2; grid-column: 2; margin-top: 0; padding: 0; border: 0; }
.list-layout .set-card-bottom { display: none; }

.empty-state { display: none; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.empty-state.visible { display: flex; }
.empty-illustration { position: relative; width: 124px; height: 83px; margin-bottom: 15px; }
.empty-block { position: absolute; display: block; width: 42px; height: 29px; border-radius: 5px; box-shadow: 0 4px 0 rgb(0 0 0 / 8%); }
.empty-block::after { position: absolute; top: -6px; left: 8px; width: 10px; height: 6px; border-radius: 3px 3px 0 0; background: inherit; content: ""; }
.block-a { bottom: 5px; left: 13px; transform: rotate(-7deg); background: #e4b964; }
.block-b { bottom: 6px; left: 52px; transform: rotate(5deg); background: #8eafd0; }
.block-c { bottom: 31px; left: 37px; transform: rotate(-2deg); background: #d99478; }
.empty-star { position: absolute; top: 0; right: 10px; color: #7299c2; font-size: 20px; }
.empty-state h3 { margin: 0 0 6px; font: 700 17px var(--font-display); letter-spacing: -.5px; }
.empty-state p { max-width: 310px; margin: 0 0 14px; color: #86887e; font-size: 10px; line-height: 1.7; }
.empty-hint { margin-top: 10px; color: #a1a298; font-size: 9px; }
.empty-hint strong { color: #58799d; }
.inventory-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 15px; }
.inventory-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #e8eade; border-radius: 6px; background: #fafbf6; color: #6b6e61; font-size: 9px; }
.inventory-chip strong { color: #31332a; }
.inventory-chip img { width: 17px; height: 17px; object-fit: contain; }
.inventory-empty { padding: 24px; color: #8a8c82; font-size: 11px; text-align: center; }
.completion-overview { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 15px; padding: 16px 18px; border: 1px solid #e8eadf; border-radius: 9px; background: #fff; }
.completion-overview-label { display: block; margin-bottom: 5px; color: #96988e; font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.completion-overview strong { display: flex; align-items: baseline; gap: 7px; color: #33352d; font: 700 22px var(--font-display); }
.completion-overview strong span:last-child { color: #77796f; font: 500 10px "DM Sans", sans-serif; }
.completion-overview p { margin: 4px 0 0; color: #989a90; font-size: 9px; }
.completion-upload-link { display: inline-block; margin-top: 6px; color: #58799d; font-size: 9px; font-weight: 600; text-decoration: none; }
.completion-upload-link:hover { text-decoration: underline; }
.completion-sets { display: grid; gap: 9px; }
.completion-set { overflow: hidden; border: 1px solid #e9eae3; border-radius: 9px; background: #fff; }
.completion-set > summary { display: grid; min-height: 74px; grid-template-columns: 64px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; list-style: none; }
.completion-set > summary::-webkit-details-marker { display: none; }
.completion-set > summary:hover { background: #fbfcf8; }
.completion-set-image { position: relative; display: grid; width: 64px; height: 54px; overflow: hidden; place-items: center; border-radius: 6px; background: #f6f6f1; }
.completion-set-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 4px; object-fit: contain; object-position: center; }
.completion-set-title { display: grid; min-width: 0; gap: 5px; }
.completion-set-title strong { overflow: hidden; color: #41433a; font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.completion-set-title small { overflow: hidden; color: #96988e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.completion-set-missing .missing-status { padding: 5px 8px; border-radius: 5px; background: #f7f2e9; }
.completion-chevron { color: #8b8d82; font-size: 16px; transition: transform .15s; }
.completion-set[open] .completion-chevron { transform: rotate(180deg); }
.completion-parts { padding: 0 14px 12px; }
.completion-part-row { display: grid; min-height: 54px; grid-template-columns: 38px minmax(0, 1fr) auto 106px; align-items: center; gap: 10px; padding: 6px 3px; border-top: 1px solid #f0f0eb; }
.completion-part-row > img, .completion-part-placeholder { width: 36px; height: 36px; object-fit: contain; }
.completion-part-name { display: grid; min-width: 0; gap: 4px; }
.completion-part-name strong { overflow: hidden; color: #52544b; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.completion-part-name small { overflow: hidden; color: #9a9c92; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.completion-part-total { color: #96988e; font-size: 8px; white-space: nowrap; }
.missing-input-label { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: #77796f; font-size: 8px; white-space: nowrap; }
.missing-quantity { width: 48px; height: 30px; padding: 0 5px; border: 1px solid #e2e4dc; border-radius: 5px; background: #fff; color: #35372f; font-size: 10px; text-align: center; }
.missing-quantity:focus { border-color: #7299c2; outline: 2px solid #7299c240; }
.inventory-table { width: 100%; grid-column: 1 / -1; }
.inventory-table .part-row { grid-template-columns: 30px minmax(0, 1fr) minmax(58px, 82px) minmax(72px, max-content) 45px; }
.part-reference { overflow: hidden; color: #85877d; font-size: 8px; font-variant-numeric: tabular-nums; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.page-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 40px; padding: 14px 0 18px; border-top: 1px solid #e9e9e3; color: #aaa99e; font-size: 8px; }
.page-footer span:last-child { font-size: 7px; font-weight: 600; letter-spacing: .75px; }

.modal { position: fixed; width: min(440px, calc(100vw - 30px)); max-width: none; overflow: visible; padding: 29px 30px 0; border: 1px solid #eeeee8; border-radius: 13px; background: #fff; color: var(--ink); box-shadow: 0 22px 80px #22231f30; }
.modal::backdrop { background: rgb(34 35 30 / 38%); backdrop-filter: blur(3px); }
.modal-close-form { position: absolute; top: 12px; right: 12px; }
.modal-close { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: #f4f4ef; color: #77796f; font-size: 19px; cursor: pointer; }
.modal-icon { display: grid; width: 35px; height: 35px; margin-bottom: 17px; place-items: center; border-radius: 10px; background: #e6eef7; color: #5e7fa5; }
.modal-icon svg { width: 18px; height: 18px; }
.modal .section-kicker { margin-bottom: 5px; }
.modal h2 { font-size: 24px; }
.modal-description { margin: 8px 0 21px; color: #85877e; font-size: 11px; line-height: 1.7; }
.input-label { display: block; margin-bottom: 7px; color: #77796e; font-size: 8px; }
.input-wrap { display: flex; height: 41px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #e5e6df; border-radius: 7px; }
.input-wrap:focus-within { border-color: #7299c2; box-shadow: 0 0 0 3px #7299c21a; }
.input-wrap svg { width: 15px; height: 15px; color: #9b9d93; }
.input-wrap input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 11px; }
.input-wrap input::placeholder { color: #b4b5ad; }
.input-help { display: block; margin: 6px 0 14px; color: #a0a198; font-size: 9px; }
.form-error { margin: -3px 0 12px; padding: 9px 10px; border-radius: 6px; background: #fff0ed; color: #a34c3b; font-size: 10px; line-height: 1.5; }
.hidden { display: none !important; }
.built-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.built-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.built-toggle-box { position: relative; display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid #d9dacf; border-radius: 5px; background: #fff; }
.built-toggle input:checked + .built-toggle-box { border-color: #6688ad; background: #6688ad; }
.built-toggle input:checked + .built-toggle-box::after { width: 7px; height: 4px; transform: translateY(-1px) rotate(-45deg); border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ""; }
.built-toggle input:focus-visible + .built-toggle-box { outline: 3px solid #7299c2; outline-offset: 3px; }
.built-toggle > span:last-child { display: grid; gap: 3px; }
.built-toggle strong { color: #55574d; font-size: 10px; font-weight: 600; }
.built-toggle small { color: #999b91; font-size: 9px; }
.import-built-toggle { margin: 1px 0 15px; padding: 10px; border: 1px solid #ecece6; border-radius: 7px; background: #fbfbf8; }
.popup-built-toggle { margin: 11px 0 2px; }
.import-submit { width: 100%; height: 41px; justify-content: space-between; padding: 0 12px; }
.import-submit svg { width: 15px; height: 15px; }
.import-submit:disabled { cursor: wait; opacity: .72; }
.loading-spinner { width: 13px; height: 13px; border: 2px solid #ffffff65; border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-foot { display: flex; align-items: center; gap: 7px; margin: 18px -30px 0; padding: 12px 30px; border-top: 1px solid #f0f0eb; color: #96988d; font-size: 9px; }
.modal-foot svg { width: 13px; height: 13px; color: #7299c2; }
.detail-modal { width: min(620px, calc(100vw - 30px)); max-height: min(85vh, 750px); overflow-y: auto; padding: 25px; }
.figure-detail-modal { width: min(760px, calc(100vw - 30px)); }
.part-detail-header { grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); }
.part-detail-image { height: 168px; padding: 12px; }
.part-detail-image img { width: 100%; height: 100%; object-fit: contain; }
.detail-modal-toolbar { position: sticky; top: -25px; z-index: 2; display: flex; justify-content: flex-end; margin: -25px -25px 12px; padding: 10px 43px 8px 25px; border-bottom: 1px solid #f0f0eb; background: rgb(255 255 255 / 96%); backdrop-filter: blur(8px); pointer-events: none; }
.detail-modal-toolbar .delete-button { pointer-events: auto; }
.detail-header { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 19px; align-items: center; padding: 3px 0 17px; border-bottom: 1px solid #eee; }
.detail-image { position: relative; display: grid; height: 155px; place-items: center; overflow: hidden; border-radius: 9px; background: #f6f6f1; }
.detail-image img { display: block; width: 100%; height: 100%; padding: 12px; object-fit: contain; object-position: center; }
.set-detail-image { height: 168px; padding: 5px; aspect-ratio: 4 / 3; }
.set-detail-image img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 8px; }
.detail-header-copy { min-width: 0; }
.instructions-link { width: fit-content; min-height: 31px; margin-top: 10px; font-size: 9px; text-decoration: none; }
.instructions-link svg { width: 12px; height: 12px; }
.detail-image.figure-detail-image { height: 190px; padding: 8px; }
.detail-image.figure-detail-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 0; object-fit: contain; object-position: center; }
.detail-header h2 { margin: 5px 0 7px; font: 700 19px/1.3 var(--font-display); }
.detail-subtitle { color: #8e9086; font-size: 10px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.detail-badge { padding: 5px 7px; border-radius: 5px; background: #eaf1f8; color: #597493; font-size: 8px; font-weight: 600; }
.detail-section { margin-top: 17px; }
.detail-section h3 { margin: 0 0 9px; font: 700 12px var(--font-display); }
.detail-section h3 span { color: #a2a398; font: 500 9px "DM Sans", sans-serif; }
.parts-table { border: 1px solid #eee; border-radius: 7px; }
.part-row { display: grid; min-height: 36px; grid-template-columns: 30px minmax(0, 1fr) minmax(72px, max-content) 45px; align-items: center; gap: 7px; padding: 5px 9px; border-bottom: 1px solid #f1f1ed; font-size: 9px; }
.part-row:last-child { border-bottom: 0; }
.part-row img { width: 26px; height: 26px; object-fit: contain; }
.part-row span:nth-child(2) { color: #51534a; }
.part-row strong { text-align: right; }
.part-card { width: 100%; border: 0; border-bottom: 1px solid #f1f1ed; background: #fff; color: inherit; text-align: left; cursor: pointer; transition: background .14s; }
.part-card:hover { background: #f2f6fa; }
.part-card:focus-visible { position: relative; z-index: 1; }
.color-badge { display: inline-block; max-width: 150px; justify-self: center; overflow: hidden; padding: 4px 7px; border: 1px solid #00000020; border-radius: 999px; background: var(--badge-color); color: var(--badge-text); font-size: 8px; font-weight: 600; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.detail-figures { display: flex; flex-wrap: wrap; gap: 7px; }
.figure-chip { display: flex; min-width: 120px; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #eee; border-radius: 6px; color: #65675d; font-size: 9px; }
.figure-chip img { width: 36px; height: 42px; flex: 0 0 auto; object-fit: contain; object-position: center; }
.figure-card { background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.figure-card:hover { transform: translateY(-1px); border-color: #c8d9eb; box-shadow: 0 4px 12px #26271b0d; }
.figure-card span { flex: 1; }
.figure-card strong { white-space: nowrap; }
.figure-appearances { display: grid; gap: 7px; }
.figure-appearance { display: grid; min-height: 53px; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid #eee; border-radius: 7px; }
.owned-set-link { width: 100%; background: #fff; color: inherit; text-align: left; cursor: pointer; transition: border-color .14s, background .14s; }
.owned-set-link:hover { border-color: #c8d9eb; background: #f3f7fb; }
.owned-set-link:focus-visible { position: relative; z-index: 1; }
.figure-appearance img { width: 40px; height: 40px; object-fit: contain; }
.figure-appearance div { display: grid; gap: 4px; min-width: 0; }
.figure-appearance strong { overflow: hidden; color: #45473e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.figure-appearance span { color: #8f9187; font-size: 9px; }
.figure-appearance b { color: #66695d; font-size: 9px; }
.delete-button { padding: 7px 9px; border: 1px solid #f0dfdb; border-radius: 6px; background: #fff; color: #a85e50; font-size: 9px; cursor: pointer; }
.delete-button:hover { border-color: #dfb8af; background: #fff7f5; }
.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 11px 15px; transform: translateY(12px); border-radius: 8px; background: #282a22; color: #fff; box-shadow: 0 6px 20px #15160e30; font-size: 11px; opacity: 0; pointer-events: none; transition: .22s; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { background: #9e4b3a; }

@media (min-width: 1500px) { .page-wrap { padding-right: 62px; padding-left: 62px; } }
@media (max-width: 1100px) {
  .sidebar { width: 215px; padding-right: 13px; padding-left: 13px; }
  .main-content { margin-left: 215px; }
  .hero { padding-left: 28px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wanted-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .wanted-set-image { height: 120px; }
}
@media (max-width: 760px) {
  body { min-width: 360px; }
  .sidebar { position: sticky; top: 0; z-index: 4; width: 100%; height: 57px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 17px; border-right: 0; border-bottom: 1px solid #eeeee9; }
  .brand { padding: 0; font-size: 18px; }
  .brand-mark { width: 21px; height: 21px; }
  .sidebar-label, .sidebar-bottom { display: none; }
  .main-nav { display: flex; gap: 2px; }
  .nav-link { width: 35px; height: 35px; justify-content: center; gap: 0; padding: 0; }
  .nav-link span:not(.nav-count), .nav-count { display: none; }
  .nav-link svg { width: 18px; height: 18px; }
  .main-content { margin-left: 0; }
  .topbar { height: 49px; padding: 0 18px; }
  .topbar-right { gap: 9px; }
  .local-indicator { font-size: 0; }
  .local-indicator i { width: 7px; height: 7px; }
  .avatar { width: 27px; height: 27px; }
  .page-wrap { padding: 17px 17px 0; }
  .hero { min-height: 214px; padding: 23px; }
  .hero h1 { font-size: 32px; }
  .hero-copy { max-width: 65%; }
  .hero-copy > p { max-width: 225px; font-size: 10px; line-height: 1.55; }
  .hero-art { width: 41%; opacity: .86; }
  .hero-sun { top: 35px; right: 5%; width: 135px; height: 135px; }
  .brick-stack-back { top: 88px; right: 27%; }
  .brick-stack-back div { width: 30px; height: 34px; }
  .brick-stack-front { top: 111px; right: 7%; }
  .brick-stack-front div { width: 39px; height: 37px; }
  .hero-note { right: 12px; bottom: 12px; }
  .stats-grid { gap: 8px; margin-top: 12px; }
  .stat-card { min-height: 116px; padding: 10px; }
  .stat-label { min-height: 21px; font-size: 7px; }
  .stat-value-row strong { font-size: 22px; }
  .stat-foot { font-size: 8px; }
  .section-heading { margin-bottom: 12px; }
  .section-heading h2 { font-size: 19px; }
  .toolbar { flex-wrap: wrap; }
  .search-box { width: 100%; }
  .toolbar-right { width: 100%; justify-content: flex-end; }
  .toolbar-sort { gap: 5px; }
  .toolbar-sort select { max-width: 118px; font-size: 8px; }
  .color-filter-trigger { padding: 0 6px; font-size: 8px; }
  .sort-label { margin-right: auto; }
  .sets-grid { gap: 9px; }
  .set-image { height: 117px; }
  .set-image img { padding: 9px; }
  .set-card-info { padding: 9px; }
  .set-card-info { min-height: 154px; }
  .set-name { font-size: 11px; }
  .set-meta { font-size: 8px; }
  .set-card-statuses { gap: 4px; }
  .set-card-statuses .build-status, .set-card-statuses .missing-status { font-size: 7px; }
  .completion-overview { align-items: flex-start; flex-direction: column; padding: 13px; }
  .completion-overview .button { align-self: stretch; }
  .completion-set > summary { grid-template-columns: 52px minmax(0, 1fr) auto 12px; gap: 8px; padding: 8px; }
  .completion-set-image { width: 52px; height: 46px; }
  .completion-set-title strong { font-size: 9px; }
  .completion-set-title small { font-size: 8px; }
  .completion-set-missing .missing-status { padding: 4px 5px; font-size: 7px; }
  .completion-parts { padding: 0 8px 8px; }
  .completion-part-row { grid-template-columns: 30px minmax(0, 1fr) 86px; gap: 7px; }
  .completion-part-row > img, .completion-part-placeholder { width: 29px; height: 29px; }
  .completion-part-name strong { font-size: 8px; }
  .completion-part-total { display: none; }
  .missing-input-label { gap: 4px; font-size: 7px; }
  .missing-quantity { width: 40px; }
  .page-footer { margin-top: 25px; flex-direction: column; }
}
@media (max-width: 460px) {
  .hero { min-height: 205px; padding: 18px; }
  .hero h1 { font-size: 28px; }
  .hero-copy { max-width: 72%; }
  .eyebrow { font-size: 7px; }
  .hero-art { width: 35%; opacity: .58; }
  .hero-note { display: none; }
  .sets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-image { height: 102px; }
  .section-heading .button { padding: 0 9px; font-size: 9px; }
  .detail-modal { padding: 18px; }
  .detail-modal-toolbar { top: -18px; margin: -18px -18px 10px; padding: 9px 37px 7px 18px; }
  .detail-header { grid-template-columns: minmax(100px, 36%) minmax(0, 1fr); gap: 11px; }
  .detail-image { height: 100px; }
  .set-detail-image { height: 120px; }
  .set-detail-image { padding: 3px; }
  .set-detail-image img { padding: 2px; }
  .detail-header h2 { font-size: 15px; }
  .part-row { grid-template-columns: 27px minmax(0, 1fr) minmax(60px, max-content) 30px; gap: 5px; font-size: 8px; }
  .inventory-table .part-row { grid-template-columns: 27px minmax(0, 1fr) minmax(42px, 60px) minmax(60px, max-content) 30px; }
  .inventory-table .part-reference { font-size: 7px; }
  .part-card { padding: 5px 9px; }
  .color-badge { max-width: 85px; padding: 3px 5px; font-size: 7px; }
  .detail-image.figure-detail-image { height: 145px; }
}

.theme-toggle { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid #e6e7df; border-radius: 8px; background: #fff; color: #66695d; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.theme-toggle:hover { border-color: #c8d8e8; background: #f1f5f9; color: #58799d; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle { border-color: #3d4650; background: #252b31; color: #c5dcf3; }
html[data-theme="dark"] .theme-toggle:hover { border-color: #596f84; background: #2c343c; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }

html[data-theme="dark"] { color-scheme: dark; background: #171b20; color: #e7e8df; }
html[data-theme="dark"] body { background: #171b20; color: #e7e8df; }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .set-card,
html[data-theme="dark"] .wanted-set-card,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .color-filter-trigger,
html[data-theme="dark"] .view-toggle,
html[data-theme="dark"] .color-filter-menu,
html[data-theme="dark"] .completion-set,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .access-card,
html[data-theme="dark"] .input-wrap,
html[data-theme="dark"] .built-toggle-box,
html[data-theme="dark"] .import-built-toggle,
html[data-theme="dark"] .missing-quantity,
html[data-theme="dark"] .figure-chip,
html[data-theme="dark"] .figure-appearance,
html[data-theme="dark"] .owned-set-link,
html[data-theme="dark"] .part-card,
html[data-theme="dark"] .button-outline { border-color: #37414b; background-color: #222831; color: #e3e5db; }
html[data-theme="dark"] .topbar { border-color: #333d47; background: rgb(26 31 37 / 94%); }
html[data-theme="dark"] .breadcrumb { color: #999d8f; }
html[data-theme="dark"] .breadcrumb strong { color: #d4d7c9; }
html[data-theme="dark"] .crumb-divider { color: #5f6358; }
html[data-theme="dark"] .local-indicator { color: #a9ad9f; }
html[data-theme="dark"] .avatar { background: #2d3c4a; color: #c9def2; }
html[data-theme="dark"] .brand { color: #eceee4; }
html[data-theme="dark"] .brand-mark span:nth-child(2),
html[data-theme="dark"] .brand-mark span:nth-child(3) { background: #e2e5d8; }
html[data-theme="dark"] .sidebar-label,
html[data-theme="dark"] .sidebar-credit { color: #888c7e; }
html[data-theme="dark"] .nav-link { color: #b0b3a7; }
html[data-theme="dark"] .nav-link:hover { background: #29323b; color: #f1f2e9; }
html[data-theme="dark"] .nav-link.active { background: #2a3743; color: #d5e5f4; }
html[data-theme="dark"] .nav-count { background: #354858; color: #d1e3f2; }
html[data-theme="dark"] .sync-card { border-color: #3a444e; background: #222831; }
html[data-theme="dark"] .sync-card strong { color: #e0e2d7; }
html[data-theme="dark"] .sync-card div span { color: #a3a698; }
html[data-theme="dark"] .sync-icon { background: #2c3b49; color: #c5def3; }
html[data-theme="dark"] .hero { background: #283642; }
html[data-theme="dark"] .hero h1 { color: #f0f1e8; }
html[data-theme="dark"] .hero h1 span { color: #b7d3ee; }
html[data-theme="dark"] .hero-copy > p { color: #c0c4b5; }
html[data-theme="dark"] .eyebrow { color: #bfd5e9; }
html[data-theme="dark"] .hero-sun { background: #354959; }
html[data-theme="dark"] .hero-note span { color: #b7c8d7; }
html[data-theme="dark"] .hero-note strong { color: #e5edf4; }
html[data-theme="dark"] .stat-card { border-color: #37414b; }
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-foot,
html[data-theme="dark"] .stat-caption { color: #a8ac9e; }
html[data-theme="dark"] .stat-icon.icon-yellow { background: #49402b; color: #e2c36d; }
html[data-theme="dark"] .stat-icon.icon-blue { background: #2d4149; color: #9ac4d5; }
html[data-theme="dark"] .stat-icon.icon-pink { background: #493633; color: #e0aa98; }
html[data-theme="dark"] .stat-icon.icon-year { background: #2d3c49; color: #b9d2e9; }
html[data-theme="dark"] .section-kicker { color: #a5a99b; }
html[data-theme="dark"] .inventory-scope-note { color: #aeb2a4; }
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .detail-section h3 { color: #e7e9df; }
html[data-theme="dark"] .section-heading h2 span,
html[data-theme="dark"] .detail-section h3 span { color: #a2a698; }
html[data-theme="dark"] .button-outline { color: #e0e3d5; }
html[data-theme="dark"] .button-outline:hover { background: #2b3540; }
html[data-theme="dark"] .search-box svg,
html[data-theme="dark"] .search-box kbd,
html[data-theme="dark"] .search-box input::placeholder { color: #9da193; }
html[data-theme="dark"] .search-box kbd { border-color: #464a3f; }
html[data-theme="dark"] .toolbar select { color: #d1d4c8; }
html[data-theme="dark"] .toolbar select option { background: #222831; color: #e3e5db; }
html[data-theme="dark"] .sort-label { color: #a8ac9e; }
html[data-theme="dark"] .color-filter-trigger { border-color: #414b55; background: #252b32; color: #dfe2d6; }
html[data-theme="dark"] .color-filter-trigger svg { color: #aeb3a2; }
html[data-theme="dark"] .color-filter-count { color: #c6ddf2; }
html[data-theme="dark"] .color-filter-option { color: #d3d6ca; }
html[data-theme="dark"] .color-filter-option:hover { background: #303a44; }
html[data-theme="dark"] .color-filter-empty { color: #a7ab9d; }
html[data-theme="dark"] .view-toggle { border-color: #414b55; background: #222831; }
html[data-theme="dark"] .view-button { color: #a8ac9e; }
html[data-theme="dark"] .view-button.selected { background: #304354; color: #c9e0f3; }
html[data-theme="dark"] .set-card { border-color: #37414b; }
html[data-theme="dark"] .set-image,
html[data-theme="dark"] .detail-image,
html[data-theme="dark"] .completion-set-image { background: #292f36; }
html[data-theme="dark"] .set-year { border-color: #45483f; background: rgb(34 37 31 / 93%); color: #c7cabd; }
html[data-theme="dark"] .set-id { color: #b7d0e8; }
html[data-theme="dark"] .set-name { color: #e4e6dd; }
html[data-theme="dark"] .set-meta { border-color: #393c33; color: #b2b5a8; }
html[data-theme="dark"] .set-meta svg,
html[data-theme="dark"] .mini-fig-stack svg { color: #b4c7d9; }
html[data-theme="dark"] .build-status { color: #b3b6aa; }
html[data-theme="dark"] .build-status.built { color: #c0d8ef; }
html[data-theme="dark"] .missing-status { color: #e0c29b; }
html[data-theme="dark"] .card-open { border-color: #41443b; color: #b4b7aa; }
html[data-theme="dark"] .set-placeholder { background: #304251; color: #b9d2e9; }
html[data-theme="dark"] .empty-state h3 { color: #e4e6dd; }
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .empty-hint { color: #aeb2a4; }
html[data-theme="dark"] .empty-hint strong { color: #c5dcef; }
html[data-theme="dark"] .completion-overview { border-color: #3a444e; background: #222831; }
html[data-theme="dark"] .completion-overview-label { color: #a6aa9d; }
html[data-theme="dark"] .completion-overview strong { color: #e9ebe1; }
html[data-theme="dark"] .completion-overview strong span:last-child,
html[data-theme="dark"] .completion-overview p { color: #adb1a3; }
html[data-theme="dark"] .completion-upload-link { color: #c3dbf1; }
html[data-theme="dark"] .completion-set { border-color: #3a444e; }
html[data-theme="dark"] .completion-set > summary:hover { background: #29323b; }
html[data-theme="dark"] .completion-set-title strong { color: #e1e4d9; }
html[data-theme="dark"] .completion-set-title small,
html[data-theme="dark"] .completion-part-name small,
html[data-theme="dark"] .completion-part-total { color: #a6aa9d; }
html[data-theme="dark"] .completion-set-missing .missing-status { background: #40382c; }
html[data-theme="dark"] .completion-chevron { color: #b3b7a9; }
html[data-theme="dark"] .completion-part-row { border-color: #393c34; }
html[data-theme="dark"] .completion-part-name strong { color: #d4d7cc; }
html[data-theme="dark"] .missing-input-label { color: #c0c3b8; }
html[data-theme="dark"] .missing-quantity { border-color: #46515c; background: #1a1f25; color: #edf0e5; }
html[data-theme="dark"] .page-footer { border-color: #34372f; color: #999d8f; }
html[data-theme="dark"] .modal { border-color: #3b4650; background: #222831; color: #e7e9df; box-shadow: 0 22px 80px #0009; }
html[data-theme="dark"] .access-screen { background: #171b20; }
html[data-theme="dark"] .access-card { border-color: #3b4650; background: #222831; color: #e7e9df; box-shadow: 0 18px 60px #0005; }
html[data-theme="dark"] .access-card > p,
html[data-theme="dark"] .session-badge { color: #aeb2a4; }
html[data-theme="dark"] .access-form input,
html[data-theme="dark"] .account-create-form input,
html[data-theme="dark"] .account-create-form select,
html[data-theme="dark"] .account-row select { border-color: #46515c; background: #1a1f25; color: #edf0e5; }
html[data-theme="dark"] .access-setup { background: #2b3239; color: #c0c4b5 !important; }
html[data-theme="dark"] .account-button { border-color: #46515c; background: #222831; color: #d5d8cc; }
html[data-theme="dark"] .account-button:hover { background: #2b3540; }
html[data-theme="dark"] .account-row { border-color: #3b4650; }
html[data-theme="dark"] .account-row-info span,
html[data-theme="dark"] .account-active { color: #aeb2a4; }
html[data-theme="dark"] .account-row select { color-scheme: dark; }
html[data-theme="dark"] .account-delete { border-color: #654843; background: #302726; color: #e1a99b; }
html[data-theme="dark"] .account-delete-confirm-button { border-color: #a94438; background: #a94438; color: #fff; }
html[data-theme="dark"] .account-delete-confirm-button:hover { background: #91382f; }
html[data-theme="dark"] .modal::backdrop { background: rgb(0 0 0 / 63%); }
html[data-theme="dark"] .modal-close { background: #34372f; color: #d1d4c7; }
html[data-theme="dark"] .modal-icon { background: #304251; color: #c2daf0; }
html[data-theme="dark"] .modal-description,
html[data-theme="dark"] .input-help,
html[data-theme="dark"] .modal-foot { color: #aeb2a4; }
html[data-theme="dark"] .input-label { color: #c1c4b8; }
html[data-theme="dark"] .input-wrap { background: #1a1f25; }
html[data-theme="dark"] .input-wrap svg { color: #aeb2a5; }
html[data-theme="dark"] .input-wrap input { background: transparent; color: #eceee5; }
html[data-theme="dark"] .input-wrap input::placeholder { color: #888d80; }
html[data-theme="dark"] .built-toggle strong { color: #e0e3d8; }
html[data-theme="dark"] .built-toggle small { color: #a9ad9f; }
html[data-theme="dark"] .import-built-toggle { background: #29323b; }
html[data-theme="dark"] .built-toggle-box { background: #1a1f25; }
html[data-theme="dark"] .modal-foot { border-color: #383b32; }
html[data-theme="dark"] .detail-modal-toolbar { border-color: #3a444e; background: rgb(34 40 49 / 96%); }
html[data-theme="dark"] .detail-header { border-color: #3a444e; }
html[data-theme="dark"] .detail-subtitle { color: #b0b4a7; }
html[data-theme="dark"] .detail-badge { background: #304251; color: #c6def2; }
html[data-theme="dark"] .parts-table { border-color: #3b4650; }
html[data-theme="dark"] .part-row { border-color: #3a444e; }
html[data-theme="dark"] .part-row span:nth-child(2) { color: #d0d3c8; }
html[data-theme="dark"] .part-reference { color: #aeb2a4; }
html[data-theme="dark"] .part-card:hover { background: #2d3741; }
html[data-theme="dark"] .color-badge { border-color: #ffffff30; }
html[data-theme="dark"] .figure-chip { color: #d1d4c9; }
html[data-theme="dark"] .figure-card:hover,
html[data-theme="dark"] .owned-set-link:hover { border-color: #596f84; background: #2b3540; }
html[data-theme="dark"] .figure-appearance strong { color: #e0e2d9; }
html[data-theme="dark"] .figure-appearance span { color: #aeb2a5; }
html[data-theme="dark"] .figure-appearance b { color: #d0d3c8; }
html[data-theme="dark"] .inventory-empty { color: #afb3a6; }
html[data-theme="dark"] .wanted-set-image { background: #1a1f25; }
html[data-theme="dark"] .wanted-set-info h3 { color: #e3e5db; }
html[data-theme="dark"] .wanted-set-meta { color: #aeb2a4; }
html[data-theme="dark"] .wanted-set-remove { color: #e1a99b; }
html[data-theme="dark"] .toast { background: #dce7f0; color: #222831; }
html[data-theme="dark"] .toast.error { background: #9e4b3a; color: #fff; }

@media (max-width: 760px) {
  .topbar-right { gap: 8px; }
  .theme-toggle { width: 30px; height: 30px; }
  .account-button { padding: 5px 6px; font-size: 8px; }
  .session-badge { max-width: 100px; font-size: 8px; }
}
@media (max-width: 520px) {
  .access-card { padding: 24px; }
  .access-brand { margin-bottom: 30px; }
  .account-row { grid-template-columns: minmax(0, 1fr) auto; }
  .account-row-info { grid-column: 1; }
  .account-row select { grid-column: 1; }
  .account-active { grid-row: 1; grid-column: 2; }
  .account-delete { grid-row: 2; grid-column: 2; }
  .session-badge { display: none; }
  .local-indicator { display: none; }
}