/* Mikey's Friend Club · Mutant archive */
:root { --primary:#297718; --secondary:#101a15; --accent:#db682c; --light:#f1f3eb; --dark:#111a15; --bg-card:#fff; --card-bg:#fff; --bg-filter:#f8faf4; --text-main:#17211b; --text-secondary:#566258; --tag-bg:#e6edde; --tag-text:#39513c; --modal-details-bg:#f4f6ef; --border-color:#d5dfcc; --text-color:var(--text-main); --bg-color:var(--light); --ooze:#bcf55a; --shadow-card:rgba(14,24,12,.06); --shadow-hover:rgba(14,24,12,.15); }
body.dark-mode { --primary:#baf45c; --secondary:#151e19; --accent:#ffa154; --light:#0e1411; --dark:#0e1411; --bg-card:#19221c; --card-bg:#19221c; --bg-filter:#141d17; --text-main:#edf4e9; --text-secondary:#a5b1a3; --tag-bg:#28332a; --tag-text:#bdc8b8; --modal-details-bg:#151e18; --border-color:#303d30; --shadow-card:transparent; --shadow-hover:rgba(0,0,0,.22); background:var(--light); }
body { font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; font-size:16px; line-height:1.5; background:var(--light); }
body.dark-mode::before,body.dark-mode::after { display:none; }
button,input,select,textarea { font:inherit; } button { touch-action:manipulation; }
button:focus-visible,a:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #80bfff; outline-offset:4px; }
.sidebar { width:218px; padding:28px 16px 20px; background:#101813; border-right:1px solid #2b382b; z-index:150; }
.sidebar.expanded { width:218px; }
.rail-brand { display:flex; align-items:center; gap:12px; color:#edf4e9; text-decoration:none; padding:0 10px 33px; }
.rail-brand img { width:36px; height:36px; image-rendering:auto; }
.rail-brand strong { font-size:30px; font-style:italic; letter-spacing:-1.5px; line-height:1; }
.rail-brand strong span { display:block; font-size:10px; font-style:normal; letter-spacing:2px; margin-top:8px; }
.sidebar-nav { padding:14px 0; display:block; }
.sidebar .nav-item { border-radius:8px; min-height:50px; margin:4px 0; padding:13px 12px; gap:11px; color:#aab8a7; font-size:15px; font-weight:600; border:1px solid transparent; }
.sidebar .nav-item > span:not(.icon),.sidebar.expanded .nav-item span:not(.icon) { display:inline; white-space:normal; opacity:1; }
.sidebar .nav-item.active { background:#baf45c; color:#17230c; border-color:#baf45c; box-shadow:0 3px 0 #4d712d; }
.sidebar .nav-item:hover:not(.active) { background:#243021; color:#e9f3de; }
.sidebar .nav-item .icon { font-size:20px; min-width:24px; }
.sidebar .nav-item.sub { padding-left:18px; font-size:13px; }
.rail-footer { position:absolute; bottom:35px; left:28px; right:24px; display:grid; gap:10px; color:#dbe6d3; }
.rail-footer strong { font-size:18px; font-style:italic; letter-spacing:.6px; }
.rail-footer small { color:#87977e; font-size:12px; }
.four-colors { display:block; height:5px; width:100px; background:linear-gradient(90deg,#57a4ff 25%,#ff676a 25%,#ff676a 50%,#b58aff 50%,#b58aff 75%,#ffad51 75%); }
.sidebar-toggle { display:none; }
.main-content,.main-content.expanded { margin-left:218px; width:calc(100% - 218px); }
header { position:relative; top:auto; background:var(--light); color:var(--text-main); padding:24px 36px 20px; border-bottom:1px solid var(--border-color); box-shadow:none; transform:none!important; }
.header-content { max-width:1600px; gap:20px; }
.logo { font-size:20px; gap:12px; line-height:1.1; }
.logo-icon { width:42px; height:42px; border:1px solid var(--border-color); border-radius:50%; box-shadow:none; }
.logo span { background:none; -webkit-text-fill-color:currentColor; color:var(--text-main); text-shadow:none; animation:none; font-weight:500; }
.logo span b { font-weight:850; }
.logo span small { display:block; font-size:10px; letter-spacing:1.8px; margin-top:7px; color:var(--text-secondary); }
.controls { margin-left:auto; gap:8px; flex-wrap:wrap; }
.controls button,.lang-selector select { min-height:38px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main); font-size:14px; padding:7px 12px; box-shadow:none; }
.controls .join-btn { background:var(--ooze); color:#17220e; font-weight:750; border-color:var(--ooze); }
.search-box { width:100%; max-width:none; display:flex; gap:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; overflow:hidden; margin:0; }
.search-box input { background:transparent; color:var(--text-main); border:0; padding:14px 18px; min-width:0; flex:1; width:auto; font-size:16px; outline-offset:-4px; }
.search-box input::placeholder { color:var(--text-secondary); }
.search-box button { background:var(--ooze); color:#17220e; border:0; border-left:1px solid var(--border-color); border-radius:0; padding:0 28px; font-size:15px; font-weight:750; }
.archive-intro { max-width:1672px; margin:0 auto; padding:28px 36px 24px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:2.4px; color:var(--text-secondary); }
.eyebrow span { width:7px; height:7px; background:var(--primary); transform:rotate(45deg); }
.archive-intro h1 { font-size:clamp(30px,3vw,48px); line-height:1.2; font-weight:950; letter-spacing:-2px; margin:12px 0; }
.archive-intro h1 span { color:var(--primary); }
.intro-description { font-size:14px; color:var(--text-secondary); margin:0; max-width:600px; line-height:1.8; }
.archive-stats { display:flex; gap:24px; flex-shrink:0; padding-left:24px; border-left:1px solid var(--border-color); }
.archive-stats div { display:grid; gap:3px; }
.archive-stats strong { font-size:30px; font-weight:850; letter-spacing:-1.6px; font-variant-numeric:tabular-nums; }
.archive-stats span { font-size:12px; color:var(--text-secondary); }
.character-filters { display:flex; gap:9px; padding:0 36px 22px; max-width:1672px; margin:auto; flex-wrap:wrap; }
.character-filters button { display:flex; align-items:center; gap:7px; border:1px solid var(--border-color); border-radius:6px; padding:9px 13px; background:var(--bg-card); color:var(--text-main); font-size:13px; font-weight:800; cursor:pointer; }
.character-filters button span { font-size:12px; font-weight:500; color:var(--text-secondary); }
.character-filters i { width:7px; height:7px; background:var(--character); border-radius:50%; }
.character-filters button:hover { border-color:var(--character,var(--primary)); }
.character-filters button.active { background:var(--ooze); color:#17220e; border-color:var(--ooze); }
.character-filters button.active span { color:#344822; }
.filters { position:relative; top:auto; padding:0 36px; background:transparent; box-shadow:none; border:0; }
.filters-content { max-width:1600px; gap:16px; padding:17px 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); align-items:center; }
.filter-group { gap:8px; }
.filter-group label { color:var(--text-secondary); font-size:13px; }
.filter-group select { background:var(--bg-card); color:var(--text-main); border:1px solid var(--border-color); border-radius:6px; font-size:13px; padding:9px 26px 9px 10px; max-width:210px; min-height:38px; }
.results-count { color:var(--text-secondary); margin-left:auto; font-size:13px; }
.container { max-width:1672px; margin:0 auto; padding:22px 36px 48px; }
.collection-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.collection-heading h2 { font-size:19px; letter-spacing:-.5px; }
.collection-heading h2 span { margin-left:10px; font-size:10px; font-weight:500; color:var(--text-secondary); letter-spacing:1.5px; }
.collection-heading button { border:0; background:transparent; color:var(--text-secondary); font-size:13px; cursor:pointer; }
.toys-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.toy-card { display:block; width:100%; min-width:0; text-align:left; padding:0; background:var(--bg-card); color:var(--text-main); border:1px solid var(--border-color); border-radius:10px; overflow:hidden; box-shadow:none; cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; }
.toy-card:hover { transform:translateY(-5px); border-color:var(--primary); box-shadow:0 8px 0 -4px var(--primary); }
.toy-image-wrap { position:relative; aspect-ratio:1.12; background:#e9eae3; overflow:hidden; }
.toy-image { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; background:#f5f5f1; padding:16px; transition:transform .3s; }
.toy-card:hover .toy-image { transform:scale(1.045); }
.toy-image.image-unavailable { object-fit:contain; padding:60px; opacity:.6; }
.card-index { position:absolute; top:10px; left:12px; z-index:1; background:#f8f9f2de; color:#495143; font-size:10px; font-weight:700; letter-spacing:1px; padding:2px 5px; border-radius:3px; }
.card-open { position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:28px; height:28px; background:#0d1712; border-radius:50%; color:#baf45c; font-size:18px; }
.toy-info { padding:15px; }
.toy-series-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px; }
.toy-name { font-size:16px; line-height:1.35; min-height:43px; font-weight:750; color:var(--text-main); margin-bottom:12px; }
.toy-tags { display:flex; gap:6px; flex-wrap:wrap; }
.toy-tags .tag { background:var(--tag-bg); color:var(--tag-text); border:1px solid var(--border-color); border-radius:4px; font-size:11px; padding:3px 7px; box-shadow:none; }
.toy-tags .tag-year { color:var(--primary); }
.pagination { padding:28px 0; }
.load-more-btn,.catalog-error button { background:var(--ooze); color:#15240d; border:1px solid var(--ooze); padding:13px 26px; border-radius:7px; font-size:14px; font-weight:750; cursor:pointer; }
.load-more-btn span { margin-left:18px; }
.end-message { color:var(--text-secondary); font-size:13px; }
.catalog-loading,.catalog-error { grid-column:1/-1; text-align:center; padding:65px 20px; color:var(--text-secondary); }
.catalog-error h3 { color:var(--text-main); margin-bottom:10px; }.catalog-error p { margin-bottom:20px; }
.section { margin-left:218px; padding:28px 36px; background:var(--light); min-height:100vh; }
.section h2 { color:var(--text-main); }
.modal { backdrop-filter:blur(8px); background:rgba(3,9,5,.78); }
.modal-content { border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-main); border-radius:14px; box-shadow:0 30px 100px #0006; }
.modal input,.modal textarea,.modal select { background:var(--bg-filter); color:var(--text-main); border-color:var(--border-color); }
.modal-close { background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-main); border-radius:50%; width:34px; height:34px; display:grid; place-items:center; line-height:1; font-size:25px; z-index:5; }
body.dark-mode button[style*="background:var(--primary)"],body.dark-mode button[style*="background: var(--primary)"] { color:#14210d!important; }
footer { background:transparent; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:12px; }
@media(min-width:1700px) { .toys-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1250px) { .sidebar,.sidebar.expanded { width:188px; padding-left:10px; padding-right:10px; }.main-content,.main-content.expanded { margin-left:188px; width:calc(100% - 188px); }.section { margin-left:188px; }.archive-stats { gap:15px; }.archive-stats strong { font-size:25px; }.character-filters button span { display:none; }.toys-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } header { padding:20px 24px; }.archive-intro { padding:24px; }.character-filters { padding-left:24px; padding-right:24px; }.filters { padding:0 24px; }.container { padding:22px 24px; } }
@media(max-width:1000px) and (min-width:769px) { .archive-intro { align-items:flex-start; flex-direction:column; gap:16px; }.archive-stats { padding:0; border:0; gap:30px; }.archive-stats div { display:flex; gap:8px; align-items:baseline; }.controls .join-btn { display:none; } }
@media(max-width:768px) {
 .sidebar,.sidebar.expanded { position:fixed; top:auto; bottom:0; left:0; right:0; width:100%; height:auto; padding:0; border:0; border-top:1px solid #34432f; background:#101813; }
 .sidebar-nav { display:flex; padding:5px 8px max(7px,env(safe-area-inset-bottom)); justify-content:space-around; gap:4px; overflow:visible; }
 .sidebar .nav-item { display:flex; flex:1; flex-direction:column; justify-content:center; gap:3px; padding:6px; min-height:54px; margin:0; font-size:11px; text-align:center; border-radius:7px; }
 .sidebar .nav-item > span:not(.icon) { display:block!important; font-size:11px; white-space:nowrap; }.sidebar .nav-item .icon { font-size:20px; margin:0; }.sidebar .nav-subitems { display:none!important; }
 .rail-brand,.rail-footer,.sidebar-toggle { display:none!important; }.main-content,.main-content.expanded { width:100%; margin:0; padding-bottom:70px; }.section { margin-left:0; padding:20px 16px 95px; }
 header { padding:16px; }.header-content { gap:15px; }.logo { font-size:16px; flex:1; }.logo-icon { width:34px; height:34px; }.logo span small { font-size:8px; letter-spacing:1px; }.controls { width:auto; margin-left:0; gap:5px; }.controls button,.lang-selector select { padding:5px 8px; font-size:12px; min-height:34px; }.controls .join-btn { display:none; }.lang-selector select { max-width:65px; }.search-box { width:100%; }.search-box input { font-size:16px; padding:12px; }.search-box button { padding:0 20px; }
 .archive-intro { padding:23px 16px 18px; flex-direction:column; align-items:stretch; gap:18px; }.archive-intro h1 { font-size:35px; letter-spacing:-1.8px; margin:10px 0; }.intro-description { font-size:12px; max-width:340px; }.eyebrow { font-size:10px; letter-spacing:2px; }.archive-stats { border:0; padding:0; gap:25px; }.archive-stats div { display:flex; align-items:baseline; gap:6px; }.archive-stats strong { font-size:23px; }.archive-stats span { font-size:10px; }
 .character-filters { flex-wrap:nowrap; overflow:auto; padding:0 16px 18px; gap:7px; scrollbar-width:none; }.character-filters button { flex-shrink:0; padding:8px 10px; font-size:11px; }.character-filters button span { display:none; }
 .filters { padding:0 16px; position:static; }.filters .filters-content { padding:14px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }.filters .filters-content .filter-group { display:flex; flex-direction:column; align-items:stretch; gap:4px; }.filters .filters-content .filter-group label { font-size:11px; }.filters .filters-content .filter-group select { max-width:100%; width:100%; font-size:12px; padding:8px; min-height:36px; }.filters .filters-content .results-count { grid-column:1/-1; font-size:11px; text-align:left; margin:2px 0 0; }
 .container { padding:18px 16px 32px; }.collection-heading { margin-bottom:14px; }.collection-heading h2 { font-size:17px; }.collection-heading h2 span { display:none; }.collection-heading button { font-size:12px; }.toys-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.toy-image-wrap { aspect-ratio:1; }.toy-image { height:100%; padding:12px; }.toy-info { padding:11px; }.toy-name { font-size:14px; min-height:38px; margin-bottom:8px; }.toy-series-label { font-size:9px; }.toy-tags .tag { font-size:10px; padding:2px 5px; }.card-index { font-size:9px; top:7px; left:7px; }.card-open { width:24px; height:24px; font-size:16px; }.modal-content { max-width:calc(100% - 24px); width:calc(100% - 24px); max-height:88dvh; overflow:auto; }.toy-image.image-unavailable { padding:45px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Content sections are inside the main column. */
.section { margin-left:0; width:100%; }
.sidebar .nav-item.sub,.filter-group label,.filter-group select,.results-count,.character-filters button,.collection-heading button,.controls button,.lang-selector select { font-size:14px; }
.toy-series-label,.toy-tags .tag,.archive-stats span,.rail-footer small { font-size:12px; }
.intro-description { font-size:16px; }
@media(max-width:768px) { .filters .filters-content .filter-group label,.filters .filters-content .filter-group select,.filters .filters-content .results-count,.character-filters button,.collection-heading button { font-size:14px; }.intro-description { font-size:14px; }.sidebar .nav-item > span:not(.icon),.archive-stats span { font-size:12px; }.archive-stats { gap:15px; }.archive-stats div { display:grid; gap:0; } }