.archive-form { display:flex; flex-wrap:wrap; gap:12px; padding:18px; align-items:end; }
.archive-form label { display:grid; gap:5px; min-width:110px; }
.archive-form input,.archive-form select { max-width:190px; }
.archive-form input,.archive-form select { background:var(--peat2); color:var(--ink); border:1px solid var(--line2); border-radius:3px; padding:8px 10px; min-height:40px; }
.archive-form select { max-width:100%; }
.archive-tabs { padding:0; margin:0 0 22px; }
.archive-tabs + .lede-s { margin-top:0; }
/* geopend 3D-model boven de telling ("385 appearances"): .lede-s heeft een negatieve bovenmarge en schoof anders onder de knoppen van de viewer */
#galleryViewer:not(:empty) + .lede-s { margin-top:22px; }
.archive-form button { min-height:30px; }
.skill-preview { padding:0 18px 18px; font-size:1.12rem; line-height:1.6; }
.archive-note { padding:0 18px 16px; font-size:.9rem; opacity:.75; }
.rep-result { padding:0 18px 18px; }
.rep-result strong { font-size:1.5rem; display:block; margin-bottom:10px; }
.rep-result progress { width:100%; height:18px; accent-color:#b58b45; }
.rep-table td,.rep-table th { padding:7px 18px; }
.rep-table .current { background:#b58b4522; }
.model-preview { min-width:0; background:radial-gradient(ellipse at center,#f1e4c8,#c8b996); position:relative; }
.model-canvas { width:100%; height:400px; touch-action:none; }
.model-canvas canvas { display:block; width:100%; height:100%; }
.model-controls { display:flex; flex-wrap:wrap; gap:8px; padding:12px; align-items:center; }
.model-controls button { min-height:40px; }
.model-controls { color:#30261c; }
/* Keep the light preview controls readable when a theme styles ghost buttons. */
.model-controls .btn.small.ghost { color:#30261c; background:#f7eedb; border-color:#8c7650; filter:none; }
.model-controls .btn.small.ghost:hover { color:#241a10; background:#fff9ec; border-color:#635031; }
.model-controls .btn.small.ghost[aria-pressed="true"] { color:#fff1d0; background:#4b3820; border-color:#4b3820; }
.model-controls .btn.small.ghost:focus-visible { outline:2px solid #30261c; outline-offset:3px; }
/* View switches above a worn-item preview: same light-panel contrast as the viewer buttons; the chosen view is dark. */
.model-modes { color:#30261c; }
.model-modes .btn.small.ghost { color:#30261c; background:#f7eedb; border-color:#8c7650; filter:none; }
.model-modes .btn.small.ghost:hover { color:#241a10; background:#fff9ec; border-color:#635031; }
.model-modes .btn.small:not(.ghost) { color:#fff1d0; background:#4b3820; border-color:#4b3820; }
.model-modes .btn.small:disabled { opacity:.45; cursor:default; }
.model-modes label { color:#30261c; }
.model-modes select { color:#30261c; background:#f7eedb; border:1px solid #8c7650; min-height:30px; }
.model-status { color:#30261c; }
.model-status { padding:36px 20px; text-align:center; }
.model-preview:fullscreen { display:flex; flex-direction:column; background:#eadfc7; }
.model-preview:fullscreen .model-canvas { flex:1; height:auto; }
.model-launch { display:flex; align-items:center; justify-content:center; min-height:230px; }
.model-launch button { min-height:36px; }
.model-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.model-grid .model-tile { padding:18px; border:1px solid var(--line2); border-radius:4px; background:var(--vellum); }
.model-tile a { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.archive-list { padding:0 18px 18px; }
.archive-chips { display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 18px; }
.archive-chips button { min-height:30px; }
.appearance-controls { padding:10px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.appearance-controls button { min-height:30px; }
.character-preview .model-canvas { height:480px; }
.character-options { gap:14px; padding:14px 18px; }
.character-options label.check { display:flex; align-items:center; gap:7px; min-width:0; }
.character-options input[type=checkbox] { width:16px; min-height:16px; padding:0; accent-color:var(--gold); }
.character-note { padding:12px 18px 0; margin:0; }
.character-note:empty { display:none; }
.character-worn { display:flex; flex-wrap:wrap; gap:6px 14px; padding:12px 18px 18px; font-size:.85rem; }
@media(max-width:600px) { .character-preview .model-canvas { height:400px; } .character-options label.check { flex:0 1 auto; } }
@media(max-width:1050px) { .look-planner > .grid { display:contents; } .look-planner .character-panel { order:-1; } }
@media(max-width:600px) { .model-canvas { height:320px; } .archive-form label { flex:1 1 140px; min-width:0; max-width:100%; } .archive-form input,.archive-form select { max-width:100%; width:100%; min-height:40px; } .model-controls button { min-height:44px; } }
.consumable-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}
.consumable-section{padding:16px;color:var(--text);display:block}.consumable-section h3{margin:0 0 8px}.consumable-section p{margin:0 0 10px}.consumable-section.selected{outline:1px solid var(--gold)}
/* zoekbalk boven de 3D-galerij en de lijsten (geen paneel eromheen): links in lijn met de tekst, labels, velden en knop op één hoogte */
.archive-search { padding:0; margin:0 0 22px; gap:12px 14px; align-items:end; }
.archive-search label { gap:6px; font:500 13px var(--sc); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.archive-search input, .archive-search select { box-sizing:border-box; height:40px; min-height:40px; width:240px; max-width:100%; font:15px var(--serif); letter-spacing:0; text-transform:none; }
.archive-search .btn { box-sizing:border-box; height:40px; min-height:40px; padding:0 20px; }
.archive-search ~ .lede-s { margin-top:0; }
@media (max-width:560px) { .archive-search label { flex:1 1 100%; } .archive-search input, .archive-search select, .archive-search .btn { width:100%; } }