/* StudSphere responsive UI */
:root {
  color-scheme: light dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #111827;
  background: #f8fafc;
  line-height: 1.6;
  --page-width: 85%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 30%),
              radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.08), transparent 28%),
              #f8fafc;
}

a {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: var(--page-width);
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

/* The pre-login screen (render(), not renderApp()) — its own narrower,
   vertically + horizontally centered layout instead of the wide top-anchored
   .container used everywhere else in the app. */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.auth-page .container {
  width: 100%;
  max-width: 26rem;
}

header {
  padding: 1.5rem 0;
}

header .brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

header .brand-mark {
  display: flex;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
}

header .brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

header .brand > .brand-mark + div {
  flex: 1;
}

header .brand h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
}

header .brand small {
  display: block;
  color: #475569;
  margin-top: 0.375rem;
}

/* Status bar: catalog stats + user/language. Full-bleed white strip docked
   to the very top of the browser viewport; its content stays aligned to
   the shared page column via the inner width/margin. */
.status-bar-wrap {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.status-bar {
  width: var(--page-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  color: #475569;
}

.status-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.status-stat strong {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.status-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-username {
  font-weight: 600;
  color: #0f172a;
}

.status-username:hover {
  text-decoration: none;
  color: #2563eb;
}

.status-icon-link {
  display: inline-flex;
  color: #64748b;
}

.status-icon-link svg {
  width: 1.15rem;
  height: 1.15rem;
}

.status-icon-link:hover {
  color: #2563eb;
}

.flag-icon {
  display: block;
  width: 1.35rem;
  height: 0.95rem;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.flag-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-current {
  display: flex;
  align-items: center;
  cursor: default;
  padding: 0.2rem;
  border-radius: 0.4rem;
}

.lang-switcher:hover .lang-current,
.lang-switcher:focus-within .lang-current {
  background: #f1f5f9;
}

.lang-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.75rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  padding: 0.35rem;
  z-index: 30;
}

.lang-switcher:hover .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown {
  display: flex;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  color: #334155;
  font-size: 0.85rem;
  text-decoration: none;
}

.lang-option:hover,
.lang-option.active {
  background: #eff6ff;
  color: #2563eb;
  text-decoration: none;
}

/* Main navigation: logo + top-level items with icon-over-label and dropdowns.
   Full-bleed dark bar matching the brand's blue palette; content aligned to
   the shared page column via the inner width/margin. */
.main-nav-wrap {
  width: 100%;
  background: linear-gradient(135deg, #0c1c3e 0%, #163363 100%);
}

.main-nav {
  width: var(--page-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.85rem 1.25rem;
  flex-wrap: wrap;
}

.main-nav .logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.main-nav .logo-mark {
  display: flex;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.main-nav .logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.main-nav .logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  color: #e2e8f0;
  text-decoration: none;
  text-align: center;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #7dd3fc;
  text-decoration: none;
}

.nav-icon {
  display: flex;
  color: #ffffff;
}

.nav-icon svg {
  width: 32px;
  height: 32px;
}

.nav-label {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.85rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
  z-index: 30;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: flex;
}

.nav-dropdown a {
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  color: #334155;
  white-space: nowrap;
  text-decoration: none;
}

.nav-dropdown a:hover {
  background: #eff6ff;
  color: #2563eb;
  text-decoration: none;
}

.nav-dropdown-item {
  position: relative;
}

.nav-dropdown-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nav-dropdown-item > a::after {
  content: "\25B8";
  font-size: 0.7rem;
  opacity: 0.5;
}

.nav-subdropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.85rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
  z-index: 31;
}

.nav-dropdown-item:hover > .nav-subdropdown,
.nav-dropdown-item:focus-within > .nav-subdropdown {
  display: flex;
}

.nav-search {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-search select,
.nav-search input[type='search'],
.nav-search button[type='submit'] {
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  width: auto;
  height: 3rem;
  margin-top: 0;
  box-sizing: border-box;
}

.nav-search select {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  padding: 0 0.75rem;
  border-radius: 0.75rem 0 0 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 10rem;
}

.nav-search select option {
  color: #0f172a;
}

.nav-search input[type='search'] {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  padding: 0 0.9rem;
  min-width: 12rem;
  border-radius: 0;
}

.nav-search input[type='search']::placeholder {
  color: rgba(248, 250, 252, 0.65);
}

.nav-search select:focus,
.nav-search input[type='search']:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.18);
}

.nav-search button[type='submit'] {
  background: #2563eb;
  color: #ffffff;
  padding: 0 1.35rem;
  border-radius: 0 0.75rem 0.75rem 0;
  cursor: pointer;
  font-weight: 600;
}

.nav-search button[type='submit']:hover {
  background: #1d4ed8;
}

main {
  margin-top: 1.5rem;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #64748b;
}

.breadcrumbs a {
  color: #64748b;
}

.breadcrumbs a:hover {
  color: #2563eb;
  text-decoration: none;
}

.breadcrumbs [aria-current='page'] {
  color: #0f172a;
  font-weight: 600;
}

.breadcrumb-sep {
  margin: 0 0.4rem;
  color: #cbd5e1;
}

nav.nav-list {
  margin-top: 0;
}

nav a.button,
button {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.35rem;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

nav a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
}

button[type='submit'] {
  background: #2563eb;
  color: #ffffff;
  width: 100%;
  border-radius: 0.85rem;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
}

button[type='submit']:hover,
nav a.button:hover {
  transform: translateY(-1px);
  background: #1d4ed8;
}

button[type='submit']:focus,
form input:focus,
form select:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

.grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 18px 50px rgba(15,23,42,0.05);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.card p {
  margin: 0.65rem 0;
  color: #475569;
}

form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

form input,
form select,
form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  margin-top: 0.35rem;
  background: #ffffff;
  color: #111827;
  font: inherit;
}

form input::placeholder,
form textarea::placeholder,
form select::placeholder {
  color: #94a3b8;
}

form input[type='file'] {
  padding: 0.5rem 0.5rem 0.35rem;
  color: #111827;
}

form label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

form input[type='checkbox'] {
  width: auto;
  margin-top: 0;
  accent-color: #2563eb;
}

.hint {
  margin: -0.5rem 0 1rem;
  color: #64748b;
  font-size: 0.85rem;
}

button[type='submit'] {
  background: #111827;
  color: #ffffff;
  width: 100%;
}

.notice {
  padding: 1rem 1.15rem;
  border-radius: 0.85rem;
  background: #e0f2fe;
  color: #0c4a6e;
  border: 1px solid #bae6fd;
  margin-bottom: 1rem;
}

.alert {
  padding: 1rem 1.15rem;
  border-radius: 0.85rem;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  margin-bottom: 1rem;
}

.stepper {
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  margin-bottom: 1.25rem;
}

.stepper ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.stepper .step {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border-radius: 0.85rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.stepper .step.current {
  border-color: #93c5fd;
  background: #eff6ff;
}

.stepper .step.completed {
  border-color: #86efac;
  background: #ecfdf5;
}

.stepper .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #e2e8f0;
  color: #1e293b;
  font-weight: 700;
}

.stepper .step.current .step-number {
  background: #2563eb;
  color: #ffffff;
}

.stepper .step.completed .step-number {
  background: #16a34a;
  color: #ffffff;
}

.import-status {
  margin: 1rem 0;
}

.progress-message {
  margin-bottom: 0.75rem;
  color: #0f172a;
  font-weight: 600;
}

.progress-message.idle {
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}

.progress-track {
  width: 100%;
  height: 0.75rem;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 1rem 0;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
  transition: width 0.4s ease;
}

.import-file-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.import-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.65rem;
  background: #f1f5f9;
  font-size: 0.9rem;
}

.import-file-name {
  font-weight: 600;
  color: #0f172a;
}

.import-file-status {
  color: #64748b;
}

.import-file-downloading .import-file-status,
.import-file-extracting .import-file-status,
.import-file-importing .import-file-status {
  color: #2563eb;
  font-weight: 600;
}

.import-file-done {
  background: #dcfce7;
}

.import-file-done .import-file-status {
  color: #16a34a;
  font-weight: 600;
}

.import-file-error {
  background: #fee2e2;
}

.import-file-error .import-file-status {
  color: #dc2626;
  font-weight: 600;
}

.location-tree,
.location-tree ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.35rem;
}

.location-tree {
  padding-left: 0;
}

.location-tree li {
  padding: 0.4rem 0;
  border-left: 1px dashed #cbd5e1;
  padding-left: 1rem;
  margin-left: 0.1rem;
}

.location-name {
  font-weight: 600;
  color: #0f172a;
}

.location-type-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.35rem;
}

.admin-user-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.admin-user-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.admin-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.35rem;
}

.location-delete-form {
  display: inline;
}

.location-detail-path {
  color: #64748b;
  font-size: 0.9rem;
}

.location-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 3px;
  margin: 1rem 0;
}

.location-detail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.9rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  background: #ffffff;
}

.location-detail-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  color: #94a3b8;
}

.location-detail-card-thumb svg {
  width: 2.25rem;
  height: 2.25rem;
}

.location-detail-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.location-detail-card-swatch {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
}

.location-detail-card-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.location-detail-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
  max-height: calc(0.78rem * 1.35 * 3);
}

.location-detail-card-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #dc2626;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  width: auto;
}

footer {
  margin-top: 2rem;
  color: #64748b;
  font-size: 0.95rem;
  text-align: center;
}

/* Parts search: on-page filter form, category tile browser and results grid */
.parts-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  max-width: 40rem;
}

.parts-search-form input[type='text'] {
  flex: 1 1 14rem;
  width: auto;
  margin-top: 0;
}

.parts-search-form select {
  flex: 0 1 14rem;
  width: auto;
  margin-top: 0;
}

.parts-search-form button {
  width: auto;
  flex-shrink: 0;
}

.tile-filter-row {
  color: #64748b;
  font-size: 0.9rem;
}

.tile-filter-row a {
  color: #2563eb;
}

.tile-filter-row a.active {
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
}

.category-tile-grid,
.parts-grid,
.sets-grid,
.minifigs-grid {
  display: grid;
  gap: 3px;
  margin: 1rem 0;
}

.minifigs-grid {
  /* Wider column to match the 4x-larger minifig image (see .minifig-card-image). */
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.sets-grid {
  /* Wider column to match the 3x-larger set image (see .set-card-image). */
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.group-header {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0.75rem;
}

.group-header:first-child {
  margin-top: 0;
}

.group-header-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}

.group-header-rule {
  margin: 0;
  border: none;
  border-top: 1px solid #cbd5e1;
}

.category-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.minifig-theme-grid {
  /* Wider column to match the 2x-larger minifig theme tile (see .minifig-theme-tile-image). */
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.parts-grid {
  /* Wider than the category grid: translated (German) names run
     noticeably longer than the English originals, mostly compound words
     that don't wrap gracefully in a narrow column. */
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.category-tile,
.part-card,
.set-card,
.minifig-card,
.owned-set-inventory-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.9rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.category-tile:hover {
  border-color: #93c5fd;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
  text-decoration: none;
}

.category-tile-image,
.part-card-image,
.set-card-image,
.minifig-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  color: #94a3b8;
}

.category-tile-image svg,
.part-card-image svg,
.set-card-image svg,
.minifig-card-image svg {
  width: 2.25rem;
  height: 2.25rem;
}

.category-tile-image img,
.part-card-image img,
.set-card-image img,
.minifig-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.category-tile-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.part-card-num,
.set-card-num,
.minifig-card-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.fetch-missing-images-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fetch-missing-images-btn {
  width: auto;
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  border: none;
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.fetch-missing-images-btn:hover {
  background: #1d4ed8;
}

.fetch-missing-images-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.fetch-missing-images-status {
  font-size: 0.85rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.part-card-name,
.set-card-name,
.minifig-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
  max-height: calc(0.78rem * 1.35 * 3);
}

.part-card-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Set images are shown 3x the size of the shared part/category/minifig tile
   image (4.5rem -> 13.5rem) — the grid column width and text sizing scale
   up to match so the card stays proportioned instead of a huge photo over
   tiny captions. */
.set-card-image {
  width: 13.5rem;
  height: 13.5rem;
}

.set-card-image svg {
  width: 6.75rem;
  height: 6.75rem;
}

.set-card-num {
  font-size: 1rem;
}

.set-card-name {
  font-size: 0.9rem;
  max-height: calc(0.9rem * 1.35 * 3);
}

/* Minifig content-view images shown 4x the size of the shared tile image
   (4.5rem -> 18rem) — grid column and text sizing scale up to match, same
   reasoning as .set-card-image's 3x. */
.minifig-card-image {
  width: 18rem;
  height: 18rem;
}

.minifig-card-image svg {
  width: 9rem;
  height: 9rem;
}

.minifig-card-num {
  font-size: 1.05rem;
}

.minifig-card-name {
  font-size: 0.95rem;
  max-height: calc(0.95rem * 1.35 * 3);
}

.minifig-card-meta {
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Minifig theme-overview tiles are their own size independent of the
   shared .category-tile-image (also used by bricks/sets theme tiles) — 2x
   the shared 4.5rem base, i.e. what .minifig-card-image used to be before
   it became 4x. */
.minifig-theme-tile-image {
  width: 9rem;
  height: 9rem;
}

.minifig-theme-tile-image svg {
  width: 4.5rem;
  height: 4.5rem;
}

.minifig-theme-tile-label {
  font-size: 0.9rem;
}

/* Sets theme-overview tiles matched to .set-card-image's 3x scale
   (4.5rem -> 13.5rem) and .sets-grid's column width, so browsing
   categories and browsing search results feel like the same grid. */
.sets-theme-grid {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.sets-theme-tile-image {
  width: 13.5rem;
  height: 13.5rem;
}

.sets-theme-tile-image svg {
  width: 6.75rem;
  height: 6.75rem;
}

.sets-theme-tile-label {
  font-size: 0.9rem;
}

.parts-load-sentinel {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.parts-load-status {
  color: #64748b;
  font-size: 0.85rem;
  font-style: italic;
}

/* Parts search: sidebar + results layout */
.parts-search-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 1rem;
}

.parts-filter-sidebar {
  flex: 0 0 15rem;
  width: 15rem;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  padding: 1rem;
}

.parts-search-main {
  flex: 1;
  min-width: 0;
}

.filter-group {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.filter-group:last-of-type {
  border-bottom: none;
}

.filter-group h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 13rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.filter-checkbox {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: #334155;
  cursor: pointer;
}

.filter-checkbox input[type='checkbox'] {
  width: auto;
  margin-top: 0;
  accent-color: #2563eb;
}

.filter-count {
  color: #94a3b8;
  font-size: 0.78rem;
}

.color-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
  flex-shrink: 0;
}

.filter-apply-button {
  margin-top: 0.25rem;
}

.results-summary {
  display: block;
  color: #64748b;
  font-size: 0.85rem;
  margin: 0.75rem 0 1rem;
}

@media (max-width: 720px) {
  .parts-search-layout {
    flex-direction: column;
  }

  .parts-filter-sidebar {
    width: 100%;
  }
}

.part-card {
  cursor: pointer;
}

.part-card:hover,
.part-card:focus-visible,
.set-card:hover,
.set-card:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* Part-detail overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}

.modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem;
  max-width: 80rem;
  width: 100%;
  max-height: 90vh;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
}

/* Content scrolls on its own; the close button (a sibling, not inside this
   scroll area) stays put in the corner instead of scrolling out of view. */
#part-modal-content {
  overflow-y: auto;
  padding-right: 2.25rem;
}

.modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  z-index: 1;
}

.modal-close svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.modal-close:hover {
  background: #e2e8f0;
}

.part-modal-header {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.part-modal-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  color: #94a3b8;
}

.part-modal-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.part-modal-image svg {
  width: 6rem;
  height: 6rem;
}

.part-modal-info h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  color: #0f172a;
}

.part-modal-meta {
  margin: 0 0 0.3rem;
  color: #475569;
  font-size: 0.9rem;
}

.part-modal-links {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
}

.part-modal-links a {
  font-weight: 600;
}

.part-modal-sets {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
}

.part-modal-print-of {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}

.part-modal-print-of a {
  font-weight: 600;
}

.part-modal-original-name {
  margin: 0 0 0.3rem;
  color: #94a3b8;
  font-size: 0.8rem;
  font-style: italic;
}

.part-modal-translation {
  margin-top: 0.4rem;
}

.part-modal-translation > a {
  font-size: 0.85rem;
  font-weight: 600;
}

.part-modal-translation-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.part-modal-translation-form input {
  flex: 1 1 12rem;
  width: auto;
  margin-top: 0;
  padding: 0.5rem 0.75rem;
}

.part-modal-translation-form button {
  width: auto;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
}

.part-modal-translation-form button[type='button'] {
  background: #f1f5f9;
  color: #475569;
}

.part-modal-translation-message {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: #dc2626;
}

.part-sets-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.part-sets-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
}

.part-sets-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.65rem;
  background: #f8fafc;
}

.part-sets-thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: #ffffff;
  border-radius: 0.5rem;
  color: #94a3b8;
}

.part-sets-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.part-sets-thumb svg {
  width: 1.5rem;
  height: 1.5rem;
}

.part-sets-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.part-sets-name {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem;
}

.part-sets-meta {
  color: #64748b;
  font-size: 0.8rem;
}

#part-modal-content h3 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  color: #0f172a;
}

.part-modal-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1.1rem;
}

.part-modal-tab-btn {
  padding: 0.6rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: -1px;
}

.part-modal-tab-btn:hover {
  color: #334155;
}

.part-modal-tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.set-detail-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.set-detail-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
  padding: 2rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  color: #94a3b8;
}

.set-detail-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.set-detail-image svg {
  width: 16rem;
  height: 16rem;
}

.set-detail-info {
  flex: 1 1 20rem;
  min-width: 20rem;
}

.set-detail-panel {
  max-width: 28rem;
  margin-left: auto;
}

.set-detail-title {
  margin: 0 0 0.6rem;
  font-size: 1.8rem;
  text-align: center;
}

.set-detail-setnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-weight: 600;
}

.set-detail-table-wrap {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
}

.set-detail-table-wrap:last-child {
  margin-bottom: 0;
}

.set-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.set-detail-table th,
.set-detail-table td {
  font-size: 0.9rem;
}

.set-detail-table th {
  text-align: left;
  padding: 0.4rem 0.75rem 0.4rem 0;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: top;
}

.set-detail-table td {
  padding: 0.4rem 0;
  width: 100%;
}

.set-detail-table-heading {
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #334155;
}

.set-detail-retired-year {
  font-size: 0.85rem;
}

.set-detail-retired-year a {
  font-weight: 600;
}

.set-retired-year-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.set-retired-year-form input {
  width: 8rem;
  margin-top: 0;
  padding: 0.4rem 0.6rem;
}

.set-retired-year-form button {
  width: auto;
  padding: 0.4rem 0.8rem;
}

.set-retired-year-form button[type='button'] {
  background: #f1f5f9;
  color: #475569;
}

.set-retired-year-message {
  font-size: 0.8rem;
  color: #dc2626;
}

.set-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid #e2e8f0;
  margin: 1rem 0 1.5rem;
}

.set-detail-tabs a {
  padding: 0.6rem 1rem;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: -1px;
  text-decoration: none;
}

.set-detail-tabs a:hover {
  color: #334155;
}

.set-detail-tabs a.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.instruction-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.instruction-upload-form input[type='text'] {
  flex: 1 1 16rem;
  margin-top: 0;
}

.instruction-upload-form input[type='file'] {
  flex: 1 1 16rem;
  margin-top: 0;
}

.instruction-upload-form button {
  width: auto;
  padding: 0.6rem 1.1rem;
}

.instruction-upload-message {
  font-size: 0.85rem;
  color: #dc2626;
}

.instructions-empty {
  color: #64748b;
}

.instructions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.instruction-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  background: #ffffff;
}

.instruction-item a {
  font-weight: 600;
}

.instruction-meta {
  flex: 1 1 auto;
  color: #64748b;
  font-size: 0.85rem;
}

.instruction-delete-btn {
  width: auto;
  padding: 0.4rem 0.8rem;
  background: #f1f5f9;
  color: #475569;
}

.table-scroll {
  overflow-x: auto;
}

.set-compare-table {
  width: 100%;
  border-collapse: collapse;
}

.set-compare-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid #e2e8f0;
  color: #334155;
  font-size: 0.85rem;
}

.set-compare-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.set-compare-thumb {
  width: 3rem;
}

.set-compare-thumb img {
  max-width: 2.5rem;
  max-height: 2.5rem;
  object-fit: contain;
  display: block;
}

.set-compare-thumb svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #94a3b8;
}

.set-compare-color {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #64748b;
}

.set-compare-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
}

.set-compare-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* All three panels are stacked into the same grid cell so the row height
   (and therefore the dialog's height) is always the tallest panel among
   them, regardless of which one is currently shown — switching tabs then
   never resizes the dialog. visibility (not display) keeps a hidden panel's
   box counted for that sizing while still removing it from view/hit-testing. */
.part-modal-tab-panels {
  display: grid;
}

.part-modal-tab-panel {
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
}

.part-modal-tab-panel.active {
  visibility: visible;
}

.part-stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 3px;
  max-height: 50vh;
  overflow-y: auto;
}

.part-stock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.9rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  background: #ffffff;
  cursor: pointer;
}

.part-stock-card:hover,
.part-stock-card:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
  outline: none;
}

.part-stock-card-newtab {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}

.part-stock-card-newtab:hover {
  background: #e2e8f0;
  color: #334155;
}

.part-stock-card-newtab svg {
  width: 0.85rem;
  height: 0.85rem;
}

.part-stock-card-swatch {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
}

.part-stock-card-qty {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.part-stock-card-meta {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.part-purchase-placeholder {
  color: #94a3b8;
  font-style: italic;
}

.add-stock-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.add-stock-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0;
}

.add-stock-form select,
.add-stock-form input {
  margin-top: 0.35rem;
}

.add-stock-form button {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
}

.location-level-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.location-level select:disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

.location-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
}

.color-combo {
  position: relative;
  margin-top: 0.35rem;
}

.color-combo-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #ffffff;
  font: inherit;
  font-weight: 400;
  color: #111827;
  cursor: pointer;
  text-align: left;
}

.color-combo-toggle-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
  flex-shrink: 0;
}

.color-combo-toggle-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-combo-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.3rem;
  max-height: 16rem;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.75rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding: 0.35rem;
  z-index: 20;
}

.color-combo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  background: none;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: #334155;
  cursor: pointer;
  text-align: left;
}

.color-combo-option:hover,
.color-combo-option.active {
  background: #eff6ff;
  color: #2563eb;
}

.color-combo-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-combo-option-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
  flex-shrink: 0;
}

.color-combo-group-label {
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem 0.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
}

.color-swatch-section {
  grid-column: 1 / -1;
  margin: -0.25rem 0 0.25rem;
}

.color-swatch-title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.color-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 6.5rem;
  overflow-y: auto;
  padding: 0.15rem;
}

.color-swatch-btn {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  border: 2px solid rgba(15, 23, 42, 0.15);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}

/* inset shadow + border-color change instead of an outward ring: an outward
   box-shadow on the first/last item in a scrolling flex row gets clipped by
   the container's overflow (any ancestor with overflow-y set forces
   overflow-x to auto too, per spec) — inset never extends past the box, so
   it can't be clipped regardless of where the swatch sits in the row. */
.color-swatch-btn.active {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.add-stock-message {
  min-height: 1.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.add-stock-message.success {
  color: #16a34a;
  font-weight: 600;
}

.add-stock-message.error {
  color: #dc2626;
  font-weight: 600;
}

.ldraw-render-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 200;
}

.ldraw-render-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  color: #ffffff;
  max-width: 22rem;
}

.ldraw-render-ring-wrap {
  position: relative;
  width: 8rem;
  height: 8rem;
}

.ldraw-render-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ldraw-render-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 8;
}

.ldraw-render-ring-fg {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease;
}

.ldraw-render-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
}

.ldraw-render-message {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.9rem;
}

.ldraw-render-skip {
  width: auto;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.ldraw-render-skip:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Owned-set ("my collection") cards: a green border marks a set the
   household already owns, an "Nx" badge in the corner shows how many
   copies — layered onto the existing .set-card rather than a separate
   component, so it stays visually consistent everywhere set cards appear. */
.set-card {
  position: relative;
}

.set-card-owned {
  border-color: #16a34a;
  box-shadow: 0 0 0 1px #16a34a;
}

.set-card-owned-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

.set-card-meta {
  font-size: 0.78rem;
  color: #64748b;
}

.owned-set-message {
  font-size: 0.85rem;
  color: #dc2626;
  margin: 0 0 0.5rem;
}

.owned-set-form {
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
  margin-top: 0.75rem;
}

.owned-set-form button[type='submit'] {
  width: auto;
  padding: 0.6rem 1.1rem;
}

.owned-set-remove-button {
  width: auto;
  padding: 0.6rem 1.1rem;
  background: #fee2e2;
  color: #991b1b;
}

.owned-set-remove-button:hover {
  background: #fecaca;
}

.owned-set-parts-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.owned-set-part-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  background: #ffffff;
}

.owned-set-part-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #94a3b8;
}

.owned-set-part-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.owned-set-part-image svg {
  width: 1.5rem;
  height: 1.5rem;
}

.owned-set-part-name {
  flex: 1 1 auto;
  font-size: 0.9rem;
}

.owned-set-part-meta {
  font-size: 0.78rem;
  color: #64748b;
}

.owned-set-missing-input {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #64748b;
}

.owned-set-missing-input input {
  width: 4.5rem;
  margin-top: 0;
}

.owned-set-wizard-box {
  max-width: 34rem;
}

.owned-set-wizard-step .location-level {
  margin-bottom: 0.75rem;
}

.owned-set-wizard-step .location-level select {
  width: 100%;
  margin-top: 0.35rem;
}

.owned-set-wizard-progress {
  margin: -0.5rem 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

.owned-set-wizard-step h3 {
  margin: 0 0 0.75rem;
}

.owned-set-wizard-step > label,
.owned-set-wizard-step > .checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.owned-set-wizard-step .checkbox-label {
  flex-direction: row;
  align-items: center;
}

.owned-set-wizard-detail-group {
  margin-bottom: 0.85rem;
}

.owned-set-wizard-subnote {
  margin-top: 0.4rem;
  width: 100%;
}

.owned-set-wizard-error {
  font-size: 0.85rem;
  color: #dc2626;
  margin: 0 0 0.5rem;
  min-height: 1.1em;
}

.owned-set-wizard-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.owned-set-wizard-nav button {
  width: auto;
  padding: 0.6rem 1.1rem;
}

.owned-set-wizard-nav .owned-set-wizard-back {
  background: #f1f5f9;
  color: #475569;
  margin-right: auto;
}

#owned-set-wizard-skip {
  margin-right: auto;
  font-size: 0.85rem;
  color: #64748b;
}

.owned-set-inventory-progress {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

.owned-set-inventory-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 3px;
  margin-bottom: 1rem;
}

.owned-set-inventory-tile-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.4rem;
}

/* "Beschädigt/Fehlend" tab tiles — same look as the editable tiles, minus
   the input fields there's nothing to interact with, so the summary line
   is the whole point and gets a bit more breathing room. */
.owned-set-inventory-tile-readonly .owned-set-inventory-summary {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: #475569;
}

.owned-set-inventory-tile-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: #64748b;
}

.owned-set-inventory-stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.owned-set-inventory-stepper input {
  width: 2.6rem;
  margin-top: 0;
  padding: 0.3rem 0.2rem;
  text-align: center;
  /* Hide the native up/down spinners — the +/- buttons replace them. */
  -moz-appearance: textfield;
}

.owned-set-inventory-stepper input::-webkit-outer-spin-button,
.owned-set-inventory-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.owned-set-inventory-stepper-btn {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 1rem;
  line-height: 1;
}

.owned-set-inventory-stepper-btn:hover {
  background: #e2e8f0;
}

.owned-set-inventory-summary {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
}

.owned-set-inventory-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.owned-set-inventory-nav button {
  width: auto;
  padding: 0.6rem 1.1rem;
}

#owned-set-inventory-save {
  margin-left: auto;
}

.owned-set-inventory-grid {
  margin-bottom: 1rem;
}

.owned-set-inventory-tile-complete {
  border-width: 2px;
  border-color: #16a34a;
}

.owned-set-inventory-tile-damaged {
  border-width: 2px;
  border-color: #d97706;
}

.owned-set-inventory-tile-missing {
  border-width: 2px;
  border-color: #dc2626;
}

.owned-set-qty-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.owned-set-qty-modal-image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  color: #94a3b8;
}

.owned-set-qty-modal-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.owned-set-qty-modal-header h3 {
  margin: 0 0 0.25rem;
}

.owned-set-qty-modal-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
}

.owned-set-box-info-note {
  color: #64748b;
  font-size: 0.8rem;
}

#owned-set-qty-modal-content label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.owned-set-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}

.owned-set-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  overflow: hidden;
  background: #ffffff;
}

.owned-set-photo img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.owned-set-photo-caption {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: #475569;
}

.owned-set-photo-delete {
  width: auto;
  margin: 0.5rem 0.75rem 0.75rem;
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.8rem;
}