:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#080d18; color:#f7f9fc; }
* { box-sizing:border-box; }
body { margin:0; min-width:0; background:radial-gradient(circle at 80% 0,#20335d 0,transparent 40%),#080d18; }
a { color:#b9d2ff; }
.app-shell { min-height:100dvh; padding-bottom:5.5rem; overflow-x:hidden; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem,4vw,3rem); border-bottom:1px solid #263450; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:1.25rem; } h2 { font-size:clamp(2rem,7vw,4rem); margin-bottom:1.5rem; }
.eyebrow { margin-bottom:.35rem; color:#8cb7ff; font-size:.72rem; font-weight:800; letter-spacing:.15em; }
.preview-notice { margin:0; padding:.65rem 1rem; text-align:center; color:#07101f; background:#89b4ff; font-weight:750; }
main { width:min(100% - 2rem,70rem); margin:0 auto; padding:clamp(2rem,6vw,5rem) 0; }
.lede { color:#b5c0d4; }.panel,.stat { border:1px solid #293b5c; border-radius:1rem; background:#101a2d; padding:1.25rem; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0; }.stat dt { color:#9aabc6; font-size:.82rem; }.stat dd { margin:.45rem 0 0; font-size:clamp(1.5rem,4vw,2.4rem); font-weight:800; overflow-wrap:anywhere; }
.status { max-width:40rem; color:#bcc8dc; }.status h3,.empty h3 { color:#fff; }.error { border-color:#b84a5e; }button { border:0; border-radius:.6rem; padding:.7rem 1rem; color:#081225; background:#8cb7ff; font:inherit; font-weight:800; cursor:pointer; }
.empty { text-align:center; max-width:42rem; margin:auto; }.empty-icon { display:block; color:#8cb7ff; font-size:4rem; }.empty p,.empty small { color:#aab8ce; }
.app-nav { position:fixed; z-index:2; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:#0c1424eb; border-top:1px solid #2a3b59; backdrop-filter:blur(12px); padding-bottom:env(safe-area-inset-bottom); }
.nav-link { min-width:0; padding:.7rem .2rem; display:flex; flex-direction:column; align-items:center; gap:.2rem; color:#93a2ba; text-decoration:none; font-size:.75rem; }.nav-link span { overflow:hidden; max-width:100%; text-overflow:ellipsis; }.nav-link[aria-current] { color:#a8c7ff; background:#16233c; }
@media (max-width:650px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.app-header { align-items:flex-start; }.app-header>a { text-align:right; font-size:.85rem; } }
@media (min-width:900px) { .app-shell { padding:0 0 0 8rem; }.app-nav { top:0; right:auto; width:8rem; grid-template-columns:1fr; grid-template-rows:repeat(5,min-content); padding:2rem .7rem; border:0; border-right:1px solid #2a3b59; }.nav-link { border-radius:.7rem; padding:1rem .25rem; } }
button:disabled { cursor:not-allowed; opacity:.5; }
.view-tabs { display:flex; gap:.5rem; margin-bottom:1rem; }.view-tabs button[aria-pressed="false"] { color:#c8d3e6; background:#1b2940; }
.catalog-controls { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:.75rem; margin-bottom:1.25rem; }
label { display:grid; gap:.35rem; min-width:0; color:#b9c7dc; font-size:.82rem; font-weight:700; }
input,select { width:100%; min-width:0; border:1px solid #405474; border-radius:.55rem; padding:.7rem; color:#fff; background:#0b1424; font:inherit; }
input:focus,select:focus,button:focus-visible { outline:3px solid #f1c75b; outline-offset:2px; }
.catalog-grid,.collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:1rem; }
.catalog-card,.collection-card { min-width:0; overflow:hidden; border:1px solid #293b5c; border-radius:1rem; background:#101a2d; padding:1rem; }
.collection-visual { margin:-1rem -1rem 1rem; background:#0a1220; }.collection-media { display:grid; width:100%; aspect-ratio:4/3; place-items:center; overflow:hidden; border-radius:0; padding:.75rem; background:radial-gradient(circle,#283f67,transparent 70%); }.collection-media img { width:100%; height:100%; object-fit:contain; }.media-source { margin:0; padding:.4rem .75rem; color:#b7c9e5; background:#142139; font-size:.72rem; font-weight:800; }
.catalog-media { display:grid; place-items:center; aspect-ratio:16/10; margin:-1rem -1rem 1rem; overflow:hidden; background:#0a1220; }.catalog-media img { width:100%; height:100%; object-fit:contain; }.catalog-media.placeholder { color:#8290a7; border-bottom:1px dashed #40506b; }
.badge { display:inline-block; margin:0 0 .5rem; border-radius:99rem; padding:.25rem .55rem; color:#bcd3ff; background:#20365c; font-size:.72rem; font-weight:800; }.meta,.stock,.warning,.form-message { color:#aebbd0; overflow-wrap:anywhere; }.stock { color:#d8e5fa; font-weight:700; }.warning { color:#ffd27b; }
.add-form,.edit-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-top:1rem; }.add-form button,.add-form .form-message,.edit-form button,.edit-form .form-message { grid-column:1/-1; }.form-message { min-height:1.25em; margin:0; }
.image-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.6rem; margin-top:1rem; padding:1rem 0; border-top:1px solid #344866; border-bottom:1px solid #344866; }.image-form .form-message { grid-column:1/-1; }
.edit-form fieldset { min-width:0; margin:0; border:1px solid #344866; border-radius:.6rem; padding:.6rem; }.edit-form legend { color:#fff; font-weight:800; }
@media (max-width:650px) { .catalog-controls,.add-form,.edit-form,.image-form { grid-template-columns:1fr; }.edit-form fieldset,.add-form button,.add-form .form-message,.edit-form button,.edit-form .form-message,.image-form .form-message { grid-column:1; } }
.detail-button { width:100%; color:#dbe8ff; background:#263858; }
.catalog-detail { min-width:0; }.detail-back { margin-bottom:1rem; color:#dbe8ff; background:#192943; }
.detail-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:28rem; overflow:hidden; border:1px solid #365174; border-radius:1.5rem; background:linear-gradient(135deg,#10213c 0%,#17294b 46%,#291d42 100%); box-shadow:0 24px 70px #02061199; }
.detail-hero::before { content:""; position:absolute; z-index:-1; width:22rem; height:22rem; right:-5rem; top:-8rem; border-radius:50%; background:#6d5ce733; filter:blur(10px); }
.hero-media { min-width:0; border-radius:0; padding:clamp(1.5rem,5vw,4rem); background:radial-gradient(circle,#b6d6ff1f,transparent 67%); }.hero-media img { width:100%; height:100%; max-height:32rem; object-fit:contain; filter:drop-shadow(0 22px 25px #02050c88); }
.hero-info { align-self:center; min-width:0; padding:clamp(1.5rem,5vw,4rem); }.hero-info h2 { margin-bottom:.25rem; font-size:clamp(2rem,5vw,4.5rem); overflow-wrap:anywhere; }.hero-english { color:#a9bdd8; font-size:1.1rem; }
.detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:2rem 0 0; }.detail-facts div { min-width:0; border-left:2px solid #789be0; padding-left:.7rem; }.detail-facts dt { color:#91a6c4; font-size:.72rem; font-weight:800; letter-spacing:.08em; }.detail-facts dd { margin:.25rem 0 0; overflow-wrap:anywhere; font-weight:750; }
.detail-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:1rem; margin:1rem 0; }.detail-actions .add-form { margin:0; }.assembly-action { display:inline-flex; align-items:center; justify-content:center; min-height:2.7rem; border:1px solid #6d86ad; border-radius:.6rem; padding:.7rem 1rem; color:#e8f0ff; text-decoration:none; font-weight:800; }
.detail-panel { margin-top:1rem; border:1px solid #293b5c; border-radius:1rem; padding:1.25rem; background:#101a2d; }.score-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.55rem; }.score-cell { min-width:0; border-radius:.75rem; padding:.8rem .45rem; text-align:center; background:linear-gradient(180deg,#263b5e,#18263e); }.score-cell span { display:block; color:#a9bad2; font-size:.75rem; }.score-cell strong { display:block; margin-top:.3rem; font-size:1.2rem; }
.official-performance { border-color:#705a22; background:linear-gradient(145deg,#1b1a14,#131d2d); }.official-performance-target+.official-performance-target { margin-top:1rem; border-top:1px solid #594a25; padding-top:1rem; }.official-performance-target h4 { margin:0 0 .65rem; color:#ffe39a; }.official-performance-version { display:inline-block; margin:0 0 .6rem; border:1px solid #806b37; border-radius:99rem; padding:.25rem .6rem; color:#ffe39a; font-size:.75rem; font-weight:800; }.official-performance-mode { display:inline-block; margin:0 0 .45rem; border-radius:99rem; padding:.22rem .55rem; color:#18130a; background:#f1c75b; font-size:.72rem; font-weight:900; }.official-performance-mode~.official-score-grid { margin-bottom:.7rem; }.official-score-cell { background:linear-gradient(180deg,#58451f,#2f291c); }.official-score-cell span { color:#eedca9; }.official-performance>.official-source,.official-performance-target>.official-source { display:inline-block; margin-top:1rem; }
.image-lightbox { width:min(94vw,70rem); height:min(92vh,55rem); border:1px solid #536b91; border-radius:1rem; padding:3.5rem 1rem 1rem; color:#fff; background:#070c16f5; }.image-lightbox::backdrop { background:#01040be8; }.image-lightbox img { width:100%; height:100%; object-fit:contain; }.lightbox-close { position:absolute; top:.7rem; right:.7rem; }
@media (max-width:720px) { .detail-hero { grid-template-columns:1fr; }.hero-media { min-height:19rem; }.detail-facts { grid-template-columns:1fr 1fr; }.detail-actions { grid-template-columns:1fr; }.score-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.team-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }.team-actions select { width:auto; }.team-editor { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.team-member { display:grid; align-content:start; gap:.75rem; }.inventory-result { margin-top:1rem; border:1px solid #3b8065; border-radius:1rem; padding:1rem; background:#102b24; }.inventory-result.invalid { border-color:#e05268; color:#ffdbe0; background:#35151d; }.inventory-result p { margin:.5rem 0 0; }.save-success { color:#9ff0c9; }
.save-notice { border:1px solid #3b8065; border-radius:.7rem; padding:.75rem; color:#9ff0c9; background:#102b24; font-weight:800; }.unavailable-option { color:#ff9baa; }
@media (max-width:720px) { .team-editor { grid-template-columns:1fr; } }

/* Compact collection view: keep the card scan-friendly and move dense controls behind disclosure. */
.collection-card.compact { display:flex; flex-direction:column; align-self:start; padding-bottom:.75rem; }
.collection-card.compact .collection-visual { margin-bottom:.75rem; }
.collection-title { margin:0 0 .55rem; font-size:1.05rem; line-height:1.3; }
.collection-stock-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .75rem; }
.stock-chip { border:1px solid #334866; border-radius:99rem; padding:.3rem .55rem; color:#8999b1; background:#101a2d; font-size:.72rem; font-weight:800; }
.stock-chip.active { color:#dceaff; border-color:#5375aa; background:#1b3153; }
.stock-chip.pending { color:#ffe1a2; border-color:#745b2a; background:#322713; }
.compact-warning { margin-bottom:.55rem; font-size:.78rem; }
.collection-details { margin-top:auto; border-top:1px solid #2d405f; }
.collection-details-summary { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:2.7rem; padding:.75rem .1rem .15rem; color:#b9d2ff; font-size:.82rem; font-weight:850; cursor:pointer; list-style:none; }
.collection-details-summary::-webkit-details-marker { display:none; }
.collection-details-summary::after { content:'＋'; color:#8cb7ff; font-size:1rem; }
.collection-details[open] .collection-details-summary::after { content:'－'; }
.collection-details-body { padding:.75rem 0 .25rem; }
.collection-details-body>.stock,.collection-details-body>.meta { margin-bottom:.55rem; font-size:.78rem; line-height:1.5; }
.collection-details .edit-form { margin-top:.85rem; padding-top:.85rem; border-top:1px solid #2d405f; }
.collection-details .image-form { margin-top:.75rem; }
@media (max-width:650px) {
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .collection-card.compact { padding:.75rem; }
  .collection-card.compact .collection-visual { margin:-.75rem -.75rem .65rem; }
  .collection-card.compact .collection-media { padding:.45rem; }
  .collection-title { font-size:.95rem; }
  .media-source { padding:.3rem .5rem; font-size:.65rem; }
  .stock-chip { padding:.25rem .45rem; font-size:.66rem; }
  .collection-details-body .edit-form { grid-template-columns:1fr; }
}