:root{color-scheme:dark}html[data-theme=light]{color-scheme:light;--bg:#f5f2e9;--panel:#fffdf8;--line:#d6d4c5;--muted:#6d7565;--gold:#836124;--sell:#246246;--sell-bg:#e4f1e7;--buy:#a33e3e;--buy-bg:#f9e5e2}
html[data-theme=light] body{color:#30382b;background:radial-gradient(ellipse at 50% 0,#e2d4b755,transparent 60%),#f5f2e9}
html[data-theme=light] header{background:#fffdf8;border-color:#d7c9ab}html[data-theme=light] .brand{color:#39472d}html[data-theme=light] .brand span{color:#896526}
html[data-theme=light] .hero{background:radial-gradient(ellipse at 80% 40%,#dbc89555,transparent 55%),linear-gradient(115deg,#fffdf4,#e8eadb);border-color:#c6b17e;box-shadow:inset 0 0 0 5px #f8f6ea,inset 0 0 0 6px #c6b17e66}html[data-theme=light] .hero h1{color:#35452c}html[data-theme=light] .hero h1 span{color:#8b682b}html[data-theme=light] .hero p,html[data-theme=light] .hero-tags{color:#687359}html[data-theme=light] .hero .eyebrow{color:#836124}html[data-theme=light] .relic-crest{mix-blend-mode:multiply}html[data-theme=light] .art-caption{color:#6c755e}html[data-theme=light] .art-caption strong{color:#80612b}
html[data-theme=light] .card{background:linear-gradient(140deg,#fffef9,#f2f3e9);border-color:#d0d4c2}html[data-theme=light] .card:hover{border-color:#ab8e50;box-shadow:0 5px 22px #73634418}html[data-theme=light] .card .stats{border-color:#d9ddcd}html[data-theme=light] .card .skill-tags span{background:#e8ecdf;color:#46563b}html[data-theme=light] .identity p{color:#80612b}html[data-theme=light] .progress{background:#dce2d0}html[data-theme=light] .card-price b{color:#6f5427}
html[data-theme=light] .searchbar,html[data-theme=light] aside,html[data-theme=light] .bottom-note{background:#fffdf7;border-color:#d3d6c7}html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea{background:#fffefa;border-color:#c4ccb8;color:#303d28}html[data-theme=light] input::placeholder,html[data-theme=light] textarea::placeholder{color:#808774}html[data-theme=light] .class-tabs button{background:#f0f2e8;border-color:#d4d9c7;color:#647255}html[data-theme=light] .class-tabs button.selected{background:#e8dfc8;border-color:#ab8e50;color:#6d5123}html[data-theme=light] .trade-tabs button{background:#fffdf7;color:#5e6a52;border-color:#d1d7c4}html[data-theme=light] .trade-tabs .all.selected{background:#e8dfc8;border-color:#ab8e50;color:#6d5123}
html[data-theme=light] .badge{background:#e8efdf;color:#526b41}html[data-theme=light] .primary{background:linear-gradient(#d2b879,#b89a58);color:#272719}html[data-theme=light] .buy-notice{background:#f9e9e6;border-color:#dfb5ac;color:#8e4541}html[data-theme=light] dialog{background:#fbfcf6;color:#30382b;border-color:#b6a272}html[data-theme=light] #editor{background:#fbfcf6;border-color:#b6a272}html[data-theme=light] .editor-actions,html[data-theme=light] .detail-nav{background:#fbfcf6;border-color:#d3d9c6}html[data-theme=light] .editor-nav a{background:#f0f3e8;border-color:#d1d9c2;color:#556448}html[data-theme=light] .editor-nav a.active{background:#e8dfc8;border-color:#b79c5f;color:#6e5223}html[data-theme=light] .editor-nav a small{background:#e4dcc8;border-color:#c6b382;color:#715727}html[data-theme=light] .editor-section h3{border-color:#d7caac}
html[data-theme=light] .equipment-group,html[data-theme=light] .profile-field,html[data-theme=light] .info-cell{background:#f2f5e9;border-color:#ced7bf}html[data-theme=light] .equipment-group h4{color:#765b29;border-color:#d4dcc8}html[data-theme=light] .compact-field{color:#68745b}html[data-theme=light] .detail-groups dl>div{border-color:#dce3d0}html[data-theme=light] .detail-groups dt{color:#68745c}html[data-theme=light] .detail-groups dd{color:#33432b}html[data-theme=light] .profile-facts span{background:#edf2e3;border-color:#c9d4b9;color:#4b603b}html[data-theme=light] .group-category{color:#80612b}
html[data-theme=light] .stage-max{background:#eee6d2;border-color:#d4c399;color:#765925}html[data-theme=light] .stage-max small{color:#776e57}html[data-theme=light] .max-badge{background:#e9dfc5;color:#785b22;border-color:#c6af79}html[data-theme=light] .check-chips span{background:#fffef8;border-color:#cbd5bc;color:#596b47}html[data-theme=light] .check-chips input:checked+span{background:#e9dfc5;color:#785b22;border-color:#b89a58}
html[data-theme=light] .skill-grade-group{background:#f2f5e9;border-color:#d0d9c2}html[data-theme=light] .skill-button-grid .skill-choice,html[data-theme=light] .detail-skills>div{background:#fffef8;border-color:#cbd6bb;color:#3c4b30}html[data-theme=light] .skill-button-grid input:checked+.skill-choice{background:#eee4cc;border-color:#b39652}html[data-theme=light] .skill-choice i{color:#806124}html[data-theme=light] .skill-picker-header b{color:#785b25}html[data-theme=light] .skill-grade-group summary small{color:#68785a}html[data-theme=light] .skill-actions button{color:#7c5d25;border-color:#bba36a}html[data-theme=light] .skill-detail-summary{color:#5c7049}
html[data-theme=light] .grade-유일{color:#816719}html[data-theme=light] .grade-신화{color:#9d5521}html[data-theme=light] .grade-전설{color:#7946a5}html[data-theme=light] .grade-영웅{color:#ac4558}html[data-theme=light] .grade-희귀{color:#386da7}html[data-theme=light] .grade-고급{color:#38744d}
html[data-theme=light] .suggestions{background:#fffef8;border-color:#a4b58d;box-shadow:0 8px 25px #5d6b4522}html[data-theme=light] .suggestions button:hover,html[data-theme=light] .suggestions button:focus{background:#e4ecd8}html[data-theme=light] .suggestions small{color:#758566}html[data-theme=light] .filter-note,html[data-theme=light] .filter-note span,html[data-theme=light] .view-settings legend,html[data-theme=light] .view-settings small{color:#6a785b}html[data-theme=light] .detail-nav a{background:#e5ebd9;color:#556844}
html[data-theme=light] .support-toggle{background:linear-gradient(140deg,#f0e5c9,#e0e8d2);color:#765b28;border-color:#b99d61}html[data-theme=light] .support-panel{background:#fffdf7;border-color:#c0b084;box-shadow:0 12px 50px #65543122}html[data-theme=light] .support-heading{background:#edf1e2;border-color:#d3ddc3}html[data-theme=light] .support-heading b{color:#745b2b}html[data-theme=light] .support-heading small,html[data-theme=light] .support-panel p{color:#68785a}html[data-theme=light] footer{border-color:#d6d9cc}html[data-theme=light] #toast{background:#fffdf5;color:#455635;border-color:#b7c49e}html[data-theme=light] .pagination button.selected{background:#decba2;color:#5c461f}
html[data-theme=light] label,html[data-theme=light] .trade-filter legend,html[data-theme=light] .trade-choice legend{color:#5c6c4c}html[data-theme=light] .trade-choice-options span{background:#f4f5ec;color:#59684c;border-color:#c8d2ba}html[data-theme=light] .trade-choice-options input[value=sell]:checked+span{background:var(--sell-bg);color:var(--sell);border-color:#76a58b}html[data-theme=light] .trade-choice-options input[value=buy]:checked+span{background:var(--buy-bg);color:var(--buy);border-color:#ca8a83}html[data-theme=light] #favCount{background:#e5eadb;color:#536343}html[data-theme=light] .card .stats b[style]{color:#7946a5!important}html[data-theme=light] .identity p span{color:#6c785e!important}html[data-theme=light] .card-price b small{color:#6d775e}header{gap:24px}header>nav{gap:24px}@media(max-width:1050px){header{gap:16px}header>nav{gap:14px}}@media(max-width:700px){header{gap:10px}header>nav{gap:20px}}
.hero-art .relic-crest{width:220px;height:220px;background:url('/assets/hero-shield-transparent.png') center/contain no-repeat;mix-blend-mode:normal;filter:drop-shadow(0 8px 18px #0005)}html[data-theme=light] .hero-art .relic-crest{mix-blend-mode:normal;filter:drop-shadow(0 8px 12px #6b57332b)}

/* Keep the mobile header independent of desktop flex sizing in either theme. */
@media(max-width:700px){
 header{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;gap:12px;padding:16px;align-items:center}
 header>.brand{grid-column:1;grid-row:1;min-width:0;font-size:21px}
 header>.theme-toggle{grid-column:2;grid-row:1;margin:0;justify-self:end}
 header>nav{grid-column:1/-1;grid-row:2;order:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;height:auto;gap:8px;flex:none}
 header>nav>a,header>nav>button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:auto;margin:0;padding:10px 6px;border:1px solid var(--line);border-radius:5px;font-size:12px;white-space:normal;text-align:center}
 header>nav>.active{height:auto;padding:10px 6px;border:1px solid var(--gold)}
 header>.primary{grid-column:1/-1;grid-row:3;width:100%;margin:0;padding:11px;font-size:13px}
 header #favCount{margin-left:0}
}
.hero,.hero *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}