:root{--ink:#20313a;--muted:#71818a;--paper:#fffdf9;--bg:#f4f2ed;--line:#e4e8e7;--gold:#b58a52;--gold2:#e9c78e;--navy:#142b35;--navy2:#1c3944;--green:#287966;--red:#ba5854;--shadow:0 18px 50px rgba(21,44,51,.09)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body,button,input,select{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
body{background:var(--bg);font-size:14px;color:var(--ink)}
h1,h2,h3,h4,.topbar-title,.brand strong,.cap-number{font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:-.025em}
.app-shell{grid-template-columns:226px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#142c35,#18313b);border-right:1px solid #344a51}
.brand strong{font-weight:800}.brand small{letter-spacing:.12em}
.nav-btn.active,.category-btn.active{background:#2b4850;border-color:#49646a}
.main-content{min-width:0}.view{max-width:1660px;margin:auto;padding:30px 38px 50px}
.topbar{background:#fffdfa;padding:0 38px}.topbar-title{font-size:18px;font-weight:750}
.hero-banner{background:linear-gradient(115deg,#183743 0%,#22444e 59%,#566754 100%);min-height:220px;padding:38px 48px}
.hero-banner h1{font-size:37px;font-weight:750;line-height:1.17;margin:11px 0}.hero-banner h1 em{font-style:normal;color:#f1d09d}
.banner-emblem{font-family:"Segoe UI Symbol","Segoe UI",sans-serif}
.search-row{margin:28px 0 27px}.search-box{width:min(660px,100%);height:54px;border-radius:12px;box-shadow:0 5px 18px rgba(23,43,50,.05)}
.search-box input{font-size:14px}.result-count{font-size:12px;white-space:nowrap}
.section-heading{margin-bottom:17px}.section-heading h2{font-size:25px;font-weight:750}.section-hint{color:var(--muted);font-size:12px}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-width:0}
.entity-card{position:relative;padding:10px;border:1px solid #e2e6e4;border-radius:16px;background:#fffefa;box-shadow:0 4px 16px rgba(20,48,53,.03);transition:transform .15s,box-shadow .15s,border-color .15s}
.entity-card:hover{transform:translateY(-4px);border-color:#c8a36a;box-shadow:0 16px 28px rgba(26,50,54,.13)}
.card-image{height:144px;border-radius:11px;background:radial-gradient(circle at 50% 35%,#fffaf1,#e9eeeb 78%)}
.card-image img{max-width:122px;max-height:122px;filter:drop-shadow(0 9px 10px rgba(23,47,54,.16))}
.card-badge{top:9px;right:9px;background:#263d45;color:#ffe4b2;font-size:10px;padding:5px 7px;border-radius:6px}
.entity-card h3{font-size:15px;font-weight:750;margin:12px 5px 4px}.entity-card p{font-size:11px;margin:0 5px 7px;color:var(--muted)}
.entity-card .card-image .placeholder{font-size:34px}.load-more{border-radius:9px;font-weight:650}
.detail-dialog{width:min(1480px,calc(100vw - 36px));max-width:1480px;max-height:min(93vh,1200px);padding:0;border:1px solid #d9e1de;border-radius:20px;background:#fffdf9;box-shadow:0 30px 90px rgba(5,25,34,.28);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start}.detail-left{min-width:0}.skin-preview{position:sticky;top:62px;min-height:600px;max-height:calc(93vh - 62px);overflow:auto;padding:28px 24px;background:linear-gradient(165deg,#183946,#204754 64%,#182d37);color:#fff7ea;border-left:1px solid #30535e;text-align:center}.skin-preview .eyebrow{color:#f2cb92;letter-spacing:.15em}.preview-portrait{width:232px;height:232px;display:grid;place-items:center;margin:24px auto 14px;border-radius:22px;background:radial-gradient(circle,#597d7b,#24434b 72%);box-shadow:0 22px 40px rgba(0,0,0,.22);border:1px solid rgba(238,210,162,.26)}.preview-portrait img{max-width:94%;max-height:94%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.28))}.preview-portrait .placeholder{font-size:60px;color:#eccb96}.skin-preview h3{font-size:23px;line-height:1.25;margin:18px 0 6px;color:#fff4df}.skin-preview p{font-size:12px;color:#bbd0d0;margin:0 0 18px}.preview-art{width:100%;margin-top:18px;border:1px solid rgba(235,207,162,.25);border-radius:13px;overflow:hidden;background:#152e38}.preview-art img{display:block;width:100%;height:auto;min-height:138px;object-fit:contain}.skin-preview .preview-note{margin:26px 0;color:#d7e2dc}.preview-source{display:block;margin:25px 0 0;font-size:10px;line-height:1.5;color:#a9c5c3}
.detail-dialog::backdrop{background:rgba(7,23,29,.72);backdrop-filter:blur(4px)}
.dialog-top{height:62px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:#173440;color:#efd0a1;position:sticky;top:0;z-index:3}
.dialog-top .eyebrow{color:#ebc48c}.close-dialog{width:34px;height:34px;border:1px solid #57707a;border-radius:9px;background:#2b4b55;color:white;font-size:16px;display:grid;place-items:center}
.close-dialog:hover{background:#42636d}
.detail-hero{display:flex;gap:24px;align-items:center;padding:27px 32px 24px;background:linear-gradient(120deg,#f7f1e7,#fffdf9 60%);border-bottom:1px solid var(--line)}
.detail-art{width:145px;height:145px;flex:none;border-radius:18px;border:1px solid #e9dfce;background:radial-gradient(circle,#fff,#e8eee8);box-shadow:0 12px 25px rgba(25,52,54,.08)}
.detail-art img{max-width:132px;max-height:132px;filter:drop-shadow(0 8px 10px rgba(22,44,46,.15))}
.detail-hero h2{font-size:31px;font-weight:800;margin:11px 0 8px}.detail-hero p{font-size:13px;color:var(--muted)}
.quality-chip{font-size:11px;padding:7px 10px;border-radius:6px;background:#e9dcc8;color:#6a4a24;font-weight:800}
.detail-content{padding:0 32px 34px}.detail-section{padding:27px 0;border-bottom:1px solid var(--line)}.detail-section:last-child{border-bottom:0}
.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.section-title h3{font-size:20px;font-weight:750;margin:0}.section-title span{font-size:11px;color:#8d9b9c}
.mini-gallery{gap:12px;padding:3px 2px 8px}.mini-card{width:100px;padding:9px;border-radius:11px;border-color:#e0e7e3;background:#f7f8f5;color:#56666b;transition:transform .15s,border-color .15s}
.mini-card:hover{transform:translateY(-2px)}.mini-card.active{border-color:#bd8f58;background:#fff8ec;box-shadow:0 0 0 2px rgba(189,143,88,.16)}
.mini-card img,.mini-card .mini-placeholder{width:80px;height:78px;object-fit:contain;font-size:28px}.mini-card span{font-size:11px;font-weight:700;padding-top:6px}
.skin-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.skin-card{background:#f7f8f5;border:1px solid #e3e8e5;border-radius:12px;min-width:0;padding:13px;text-align:center;color:var(--ink);cursor:pointer}.skin-card:hover,.skin-card.active{border-color:#bf935a;background:#fff8eb;box-shadow:0 0 0 2px rgba(191,147,90,.14)}.main-skin-grid{max-height:62vh;overflow:auto;padding:3px}
.skin-card img,.skin-card .placeholder{display:block;width:84px;height:84px;margin:0 auto 8px;object-fit:contain}.skin-card span{display:block;font-size:11px;font-weight:650;line-height:1.35}
.notice{font-size:12px;padding:15px 17px}.help-text{font-size:12px;color:var(--muted);line-height:1.55}
.upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.upgrade-card{background:#f8faf8;border:1px solid #e1e8e4;border-radius:14px;padding:18px;min-width:0}
.upgrade-card-head{display:flex;gap:13px;align-items:start;margin-bottom:17px}.upgrade-card-head>b{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:8px;background:#20414b;color:#efcd98;font-size:12px}
.upgrade-card h4,.requirements h4{font-size:15px;margin:0 0 4px}.upgrade-card p{font-size:11px;color:var(--muted);margin:0}
.upgrade-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upgrade-fields label,.requirement-inputs label{display:block;font-size:11px;font-weight:650;color:#63747a}
.upgrade-fields select,.upgrade-fields input,.requirement-inputs input{width:100%;height:41px;margin-top:7px;padding:0 12px;border:1px solid #cfdad7;border-radius:8px;background:#fff;color:#1f343d;font-size:12px}
.upgrade-fields select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%235b706e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:27px}
.progress-summary{margin-top:14px;background:#edf3ef;gap:10px;border:1px solid #dce8df}.progress-summary strong{color:#276b5e;text-align:right}
.progress-detail{margin-top:13px}.progress-detail summary{cursor:pointer;color:#397568;font-size:11px;font-weight:700}.progress-detail .table-wrap{max-height:240px;margin-top:11px}
.requirements{margin-top:17px;border:1px solid #e5e5d9;background:#fcfbf5;border-radius:14px;padding:18px}.requirements-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.requirement-inputs{display:flex;gap:11px}.requirement-inputs input{width:107px;height:35px;margin-top:5px}.requirement{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 0;border-top:1px solid #eee9dc}
.req-dot{width:7px;height:7px;border-radius:50%;background:#b9935f;margin-top:6px}.requirement strong{font-size:12px}.requirement p{font-size:11px;color:var(--muted);line-height:1.45;margin:4px 0 0}.req-status{white-space:nowrap;font-size:10px;font-weight:750;color:#2e7b61;background:#e6f3e9;padding:5px 7px;border-radius:6px}.req-status.unmet{color:#a4523f;background:#fae9df}
.material-table th{font-size:11px;padding:10px 7px}.material-table td{font-size:12px;padding:9px 7px}.material-table input{width:92px;height:32px}.material-summary{font-size:12px}
.exp-layout{grid-template-columns:minmax(0,1fr) 280px}.exp-panel,.table-panel,.quick-panel{border-radius:15px}.panel-heading h2{font-weight:750}
.main-footer{font-size:11px}
.hero-banner h1,.section-heading h2,.panel-heading h2,.detail-hero h2,.detail-section h3,.brand strong,.cap-number{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
@media(max-width:1330px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.skin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1fr) 310px}.preview-portrait{width:200px;height:200px}}
@media(max-width:1000px){.app-shell{grid-template-columns:72px minmax(0,1fr)}.view{padding:24px}.topbar{padding:0 24px}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.skin-preview{position:relative;top:0;order:-1;min-height:0;max-height:none;border-left:0}.preview-portrait{width:160px;height:160px;margin:15px auto}.preview-art{max-width:500px;margin:15px auto}.skin-preview .preview-source{margin-top:12px}}
@media(max-width:780px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.upgrade-grid{grid-template-columns:1fr}.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.exp-layout{grid-template-columns:1fr}.hero-banner{padding:28px}.hero-banner h1{font-size:30px}.section-hint{display:none}}
@media(max-width:560px){.app-shell{display:block}.view{padding:15px}.topbar{padding:0 15px}.hero-banner{min-height:185px;padding:24px}.hero-banner h1{font-size:26px}.card-grid{gap:10px}.card-image{height:122px}.card-image img{max-width:104px;max-height:104px}.entity-card h3{font-size:13px}.detail-dialog{width:100vw;max-height:100vh;height:100vh;border-radius:0;border:0}.detail-hero{padding:22px 18px;gap:14px}.detail-art{width:100px;height:100px}.detail-art img{max-width:94px;max-height:94px}.detail-hero h2{font-size:23px}.detail-content{padding:0 18px 24px}.dialog-top{padding:0 18px}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.requirements-head{display:block}.requirement-inputs{margin-top:13px}.requirement{grid-template-columns:8px minmax(0,1fr)}.req-status{grid-column:2;justify-self:start}.material-table input{width:66px}}

/* Chỉ trang phục Chủ Tướng được gom theo phẩm chất; danh mục tướng/vật phẩm giữ một thẻ mỗi mục. */
.main-quality-group{--tier:#a3b8c4;--tier-bg:#f2f7fa;margin:16px 0 20px;padding:16px;border:1px solid var(--tier);border-radius:15px;background:linear-gradient(135deg,var(--tier-bg),#fffefa 72%)}
.main-quality-group.quality-4,.skin-card.quality-4{--tier:#ad8ed3;--tier-bg:#f6f0fd}
.main-quality-group.quality-5,.skin-card.quality-5{--tier:#df9b52;--tier-bg:#fff4e8}
.main-quality-group.quality-6,.skin-card.quality-6{--tier:#d9706a;--tier-bg:#fff0ef}
.main-quality-group.quality-7,.skin-card.quality-7{--tier:#caa84f;--tier-bg:#fbf7e8}
.main-quality-group.quality-8,.skin-card.quality-8{--tier:#aa792e;--tier-bg:#f8f0dd}
.main-quality-group.quality-9,.skin-card.quality-9{--tier:#9c71c1;--tier-bg:#f8f1ff}
.main-quality-group.quality-10,.skin-card.quality-10{--tier:#43a5a7;--tier-bg:#eafafa}
.main-quality-group.quality-11,.skin-card.quality-11{--tier:#6b9f62;--tier-bg:#f0faed}
.main-quality-group.quality-12,.skin-card.quality-12{--tier:#5389ba;--tier-bg:#edf5fd}
.main-quality-group.quality-13,.skin-card.quality-13{--tier:#4c72bf;--tier-bg:#eef2ff}
.main-quality-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px;color:var(--ink)}
.main-quality-head strong{display:inline-block;border:1px solid var(--tier);border-radius:8px;padding:5px 11px;background:#fff;font-size:14px;color:#30414a}
.main-quality-head span{font-size:11px;color:var(--muted)}
.main-quality-group .main-skin-grid{max-height:none;overflow:visible;padding:0}
.main-quality-group .skin-card{border:1px solid var(--tier);background:#fffefa;box-shadow:inset 0 0 0 3px var(--tier-bg)}
.main-quality-group .skin-card:hover,.main-quality-group .skin-card.active{background:var(--tier-bg);box-shadow:0 0 0 2px var(--tier)}
.skin-preview{background:linear-gradient(165deg,#173946,#204755 64%,#122c37)}

/* Calculator layout keeps the primary task clear and reserves a sidebar for future partners. */
#expView .exp-layout{grid-template-columns:minmax(0,1fr) minmax(235px,285px);gap:22px;align-items:start}
#expView .exp-main{gap:18px}
#expView .exp-panel,#expView .exp-output,#expView .exp-guide{border-radius:18px;border-color:#dce5e2;box-shadow:0 12px 34px rgba(20,48,53,.06)}
#expView .exp-panel{padding:28px}
#expView .panel-heading h2{margin:5px 0 0;font-size:25px}
.exp-intro{color:var(--muted);margin:8px 0 0;font-size:13px}
.exp-form-group{border-top:1px solid #e9ece8;padding-top:20px;margin-top:21px}
.exp-form-group h3{display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 16px;color:#24404a}
.exp-form-group h3 span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#e8f1ec;color:#337864;font-size:12px}
#expView .form-grid{gap:14px}
#expView .form-grid label{font-size:12px;color:#50646b;font-weight:700}
#expView .form-grid input{height:45px;border-radius:10px;border-color:#ccd9d6;font-size:16px;font-weight:650;margin-top:8px;padding:0 13px}
#expView .form-grid small{display:block;margin-top:5px;font-size:11px;font-weight:400;color:#758a8c}
#expView .formula-note{font-size:12px;color:#62777b;line-height:1.55;margin:21px 0 0;padding:13px 15px;border-radius:10px;background:#eef4f1}
#expView .exp-output{padding:28px}
#expView .exp-results{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
#expView .result-box{background:#f1f5f2;border:1px solid #e3ebe6;border-radius:12px;min-height:105px;padding:18px}
#expView .result-box strong{font-size:24px;color:#254d50;line-height:1.2}
#expView .result-box span{font-size:12px;color:#607479;line-height:1.4;margin-top:8px}
#expView .result-box.highlight{background:#244751;border-color:#244751}
#expView .result-box.highlight strong{color:#f3d69d}
#expView .result-box.highlight span{color:#d2e5e1}
#expView .exp-suggestion-note{grid-column:1/-1;color:#698087;font-size:12px;margin:0}
#expView .exp-loading{grid-column:1/-1;padding:24px;border-radius:12px;background:#f1f5f2;color:#55736c}
#expView .error-message{font-size:13px;padding:14px;border-radius:10px;background:#fff0eb}
#expView .exp-aside{top:24px}
.exp-guide{padding:23px}
.exp-guide h3{font-size:20px;line-height:1.2;margin:12px 0}
.exp-guide p{font-size:13px;line-height:1.6;color:#657b80;margin:0 0 16px}
.exp-guide-rule{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #e3eae7;font-size:12px}
.exp-guide-rule strong{color:#284752}.exp-guide-rule span{color:#708389}
.partner-slot:not([hidden]){display:block;margin-top:16px;padding:22px;border:1px solid #d8e2df;border-radius:16px;background:#fffefa;color:#254853;text-decoration:none;min-height:120px}
.partner-slot:not([hidden]):hover{border-color:#ba925b;box-shadow:0 12px 28px rgba(20,48,53,.1)}
.partner-slot:not([hidden]) small,.partner-slot:not([hidden]) strong,.partner-slot:not([hidden]) span{display:block}
.partner-slot:not([hidden]) small{font-size:10px;letter-spacing:.15em;color:#a67b49;margin-bottom:9px}
.partner-slot:not([hidden]) strong{font-size:18px;margin-bottom:6px}
.partner-slot:not([hidden]) span{font-size:12px;color:#60777b}
.partner-slot-inline:not([hidden]){margin:-9px 0 26px;min-height:0;padding:18px 22px}
@media(max-width:1050px){#expView .exp-layout{grid-template-columns:1fr}#expView .exp-aside{position:static}}
@media(max-width:700px){#expView .exp-results{grid-template-columns:repeat(2,minmax(0,1fr))}#expView .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){#expView .exp-panel,#expView .exp-output{padding:19px}#expView .exp-results,#expView .form-grid{grid-template-columns:1fr}#expView .result-box{min-height:85px}}
.preview-full-art{height:min(53vh,570px);min-height:340px;display:grid;place-items:center;margin:18px 0 10px;padding:10px;border:1px solid rgba(235,207,162,.28);border-radius:17px;background:radial-gradient(ellipse at 50% 35%,#476970 0%,#21414d 60%,#142e39 100%);overflow:hidden}
.preview-full-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.34))}
@media(max-width:900px){.preview-full-art{height:440px;max-width:500px;margin:15px auto}}
@media(max-width:560px){.preview-full-art{height:360px;min-height:300px}.main-quality-group{padding:12px}}

/* Danh mục chọn bằng mũi tên và các cụm tướng theo quốc gia. */
.sidebar-select-label{display:block;margin:0 10px 8px;color:#9fb5b9;font-size:11px;font-weight:700}
.sidebar-select{display:block;width:calc(100% - 20px);margin:0 10px;padding:12px 34px 12px 13px;appearance:none;border:1px solid #52717a;border-radius:10px;color:#fff4df;background:#284650 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23e8c490' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;font-size:13px;font-weight:700;cursor:pointer}
.sidebar-select option{background:#1c3944;color:#fff}.sidebar-filter{margin-top:18px}.sidebar-select:focus-visible{outline:2px solid #e9c58d}
.brand-mark{overflow:hidden;padding:0;border-radius:12px}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.hero-banner{isolation:isolate;background:linear-gradient(112deg,#152e39 0%,#244758 64%,#325064 100%)}
.hero-banner:before,.hero-banner:after{display:none}.banner-copy{max-width:56%;position:relative;z-index:2}
.banner-figure{position:absolute;inset:0 0 0 auto;width:58%;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;pointer-events:none}
.banner-figure:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#193541 0%,rgba(25,53,65,.22) 36%,transparent 72%)}
.banner-figure img{display:block;height:100%;width:100%;object-fit:cover;object-position:center 37%;filter:saturate(1.18) contrast(1.04)}
.exp-banner{background:linear-gradient(112deg,#1e3343 0%,#2b485e 70%,#3b5265)}
.card-grid:has(.country-group){display:block}.country-group{margin:0 0 31px;padding:0 0 27px;border-bottom:1px solid var(--line)}
.country-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px;padding:11px 16px;border-left:4px solid var(--country);border-radius:0 11px 11px 0;background:linear-gradient(90deg,var(--country-bg),transparent)}
.country-heading>div{display:flex;align-items:center;gap:11px}.country-heading h3{margin:0;font-size:19px;font-weight:800}.country-heading>span{color:var(--muted);font-size:11px}
.country-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff;background:var(--country);font-size:13px;font-weight:800}
.country-1{--country:#547db4;--country-bg:#eef4ff}.country-2{--country:#4f9a6c;--country-bg:#eff9f0}.country-3{--country:#c46b59;--country-bg:#fff2ee}.country-4{--country:#a37a55;--country-bg:#fbf4e9}.country-5{--country:#a678bb;--country-bg:#f8f0fb}.country-other{--country:#657b85;--country-bg:#f0f5f6}
.country-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.country-group .entity-card{border-top:3px solid var(--country)}
@media(max-width:1330px){.country-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.sidebar-select-label{display:none}.sidebar-select{width:54px;margin:0 auto;padding:10px 16px 10px 5px;font-size:10px}.sidebar-filter{margin-top:10px}}
@media(max-width:780px){.country-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.banner-copy{max-width:70%}.banner-figure{width:55%}}
@media(max-width:560px){.side-label-spaced{display:none}.sidebar-select-label{display:none}.sidebar-select{width:100%;margin:8px 0;padding:9px 28px 9px 10px;font-size:12px}.sidebar-filter{margin:4px 0}.hero-banner{min-height:206px}.banner-copy{max-width:79%}.banner-figure{width:64%;opacity:.6}.country-heading{padding:9px}.country-heading h3{font-size:16px}.country-heading>span{font-size:9px;text-align:right}.country-card-grid{gap:10px}}
.mini-card small{display:block;font-size:9px;line-height:1.25;color:var(--muted);margin-top:4px;max-height:2.5em;overflow:hidden}
.mini-card.quality-5{--tier:#db9856}.mini-card.quality-6{--tier:#c96d66}.mini-card.quality-7{--tier:#c3a253}.mini-card.quality-8{--tier:#a68048}.mini-card.quality-9{--tier:#9671b4}.mini-card.quality-10{--tier:#48a2a4}.mini-card.quality-11{--tier:#6c9c72}.mini-card.quality-12{--tier:#5a83bd}.mini-card.quality-13{--tier:#5871c1}
.mini-card{border-top:3px solid var(--tier,#b4c3c5)}.mini-card.active{border-top-color:var(--tier,#bd8f58)}
.tier-breakdowns{display:grid;gap:10px}.tier-breakdown{--tier:#7e9aa1;border:1px solid #dbe5e3;border-left:4px solid var(--tier);border-radius:10px;background:#fffefa;overflow:hidden}
.tier-breakdown.quality-7{--tier:#c3a253}.tier-breakdown.quality-8{--tier:#a68048}.tier-breakdown.quality-9{--tier:#9671b4}.tier-breakdown.quality-10{--tier:#48a2a4}.tier-breakdown.quality-11{--tier:#6c9c72}.tier-breakdown.quality-12{--tier:#5a83bd}.tier-breakdown.quality-13{--tier:#5871c1}
.tier-breakdown summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer}.tier-breakdown summary::-webkit-details-marker{display:none}
.tier-number{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--tier);color:white;font-size:11px;font-weight:800}.tier-title{flex:1;min-width:0}.tier-title strong{display:block;font-size:13px}.tier-title small{display:block;margin-top:3px;font-size:10px;color:var(--muted)}.tier-arrow{color:var(--tier);font-size:21px;line-height:1;transition:transform .2s}.tier-breakdown[open] .tier-arrow{transform:rotate(180deg)}
.tier-body{padding:1px 15px 15px;border-top:1px solid #edf0ed}.tier-body .table-wrap{max-height:310px;overflow:auto}.tier-body table{font-size:11px}.tier-body th,.tier-body td{padding:8px 10px;text-align:left;white-space:normal}.tier-body td:last-child{min-width:240px}
.preview-item-art{height:320px;display:grid;place-items:center;margin:18px 0;padding:15px;border-radius:15px;border:1px solid rgba(235,207,162,.3);background:radial-gradient(circle at 50% 50%,#456873,#1b3945 72%)}
.preview-item-art img{display:block;max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,0,0,.34))}
@media(min-width:561px) and (max-width:1000px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding:20px 11px}.brand{padding:0 4px 24px}.brand>div,.side-label,.sidebar-footer span,.sidebar-select-label{display:block}.nav-btn,.category-btn{font-size:12px;justify-content:flex-start;padding:10px}.nav-btn span,.category-btn span{font-size:17px}.sidebar-select{width:calc(100% - 10px);margin:0 5px;padding:10px 28px 10px 10px;font-size:12px}.sidebar-footer{justify-content:flex-start}}
@media(max-width:560px){.sidebar .brand{display:flex;padding:3px 0 12px}.sidebar .brand>div{display:block}.sidebar .brand-mark{width:38px;height:38px}.sidebar .brand strong{font-size:17px}.sidebar .brand small{font-size:8px}.banner-figure{opacity:.44}}

.skin-preview.has-full-art .preview-portrait{width:88px;height:88px;margin:12px auto 8px;border-radius:13px}
.skin-preview.has-full-art .preview-portrait .placeholder{font-size:30px}
.skin-preview.has-full-art h3{margin:8px 0 4px;font-size:20px}
.skin-preview.has-full-art p{margin-bottom:8px}
.talent-picker{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;color:var(--muted);margin:15px 0}
.talent-picker select{min-width:240px;border:1px solid #cfdad7;border-radius:9px;padding:9px 12px;background:#fff;color:var(--ink)}
.talent-branch{margin:18px 0}.talent-branch-head{font-size:12px;font-weight:800;color:#8b673c;border-left:3px solid #c89a5e;padding:7px 10px;background:#f8f3ea;border-radius:0 7px 7px 0;margin-bottom:10px}
.talent-node-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.talent-node{min-width:0;padding:12px;border:1px solid #dfe8e4;border-radius:10px;background:#f9fbf9}
.talent-node strong{display:block;font-size:12px;color:#263d43}.talent-node span{display:block;margin-top:4px;font-size:10px;color:#578176;font-weight:700}
.talent-node p{margin:6px 0;font-size:10px;line-height:1.45;color:var(--muted)}.talent-node small{display:block;margin-top:7px;font-size:10px;color:#866843;line-height:1.4}
@media(max-width:780px){.talent-node-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.talent-node-grid{grid-template-columns:1fr}.talent-picker{display:block}.talent-picker select{width:100%;margin-top:7px}}

/* EXP Dan fields and calculator result cards */
.form-grid label small{display:block;margin-top:5px;font-size:10px;font-weight:400;line-height:1.35;color:var(--muted)}
.result-box.suggestion{border:1px solid #dfd4bd;background:#faf6eb}.result-box.suggestion strong{color:#825b32}.result-box span{line-height:1.3}
.exp-suggestion-note{grid-column:1/-1;margin:0;color:var(--muted);font-size:10px;line-height:1.4}

/* Khoa kỹ Bang: các nút giữ vị trí theo nhánh và nối bằng điều kiện mở. */
.clan-tree-scroll{grid-column:1/-1;max-height:75vh;overflow:auto;border:1px solid #d6c4a8;border-radius:18px;background:radial-gradient(circle at 50% 5%,#f9ecda,#f3e8d9 70%);box-shadow:0 14px 28px rgba(61,42,21,.08)}
.clan-tree{position:relative;min-width:660px;padding:20px 34px 42px}
.clan-links{position:absolute;inset:0;z-index:0;pointer-events:none;fill:none;stroke:#c88b25;stroke-width:3;stroke-linejoin:round}
.clan-tree-row{position:relative;z-index:1;min-height:164px;scroll-margin-top:15px}
.clan-row-number{display:block;width:max-content;margin:0 0 11px;padding:5px 10px;border-radius:20px;background:#e4d2b8;color:#835d34;font-size:10px;font-weight:800;letter-spacing:.08em}
.clan-node-grid{display:flex;justify-content:space-around;align-items:start;gap:16px}
.clan-node{width:152px;min-height:119px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 7px 9px;border:2px solid #bf975a;border-radius:13px;background:#fff9ef;color:#503820;box-shadow:0 8px 13px rgba(74,47,20,.11);text-align:center}
.clan-node:hover,.clan-node:focus-visible{transform:translateY(-2px);border-color:#dc9b35;box-shadow:0 12px 20px rgba(74,47,20,.19)}
.clan-node img{width:70px;height:70px;object-fit:cover;border-radius:8px}.clan-node strong{font-size:11px;line-height:1.2}.clan-node small{font-size:9px;color:#9c7549}
.tech-next-exp{display:flex;justify-content:space-between;align-items:center;margin:15px 0;padding:14px 17px;border-radius:11px;background:#f3eadc;color:#6f5434;font-size:12px}.tech-next-exp strong{font-size:20px;color:#834f20}
.detail-section #techLevel{display:block;width:112px;height:38px;margin-top:7px;padding:0 10px;border:1px solid #d6c7b2;border-radius:8px;background:#fff;font-size:14px;color:var(--ink)}
.tech-next-stats{display:grid;gap:8px}.tech-next-stats>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;border:1px solid var(--line);border-radius:9px;font-size:12px}.tech-next-stats strong{white-space:nowrap}.tech-next-stats b{color:#348d5b}
.skin-upgrade-panel{border-top:3px solid #caad79;padding-top:24px}.skin-upgrade-panel .upgrade-fields{margin:16px 0}.skin-stat-panel{margin:17px 0;padding:15px 17px;border:1px solid var(--line);border-radius:11px;background:#fbfaf7}.skin-stat-panel h4{margin:0 0 8px;color:#785834;font-size:13px}.skin-stat-panel p{font-size:11px;line-height:1.55;color:var(--muted);margin:5px 0 13px}.skin-stat-panel p:last-child{margin-bottom:0}
.premium-material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.premium-material{display:grid;grid-template-columns:36px minmax(0,1fr) 70px;align-items:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:9px;font-size:10px}.premium-material img{width:34px;height:34px;object-fit:contain}.premium-material strong{display:block;font-size:10px}.premium-material small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.premium-material input{width:70px;height:30px;padding:4px;border:1px solid #ddd0bc;border-radius:6px}
.skin-calculation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.skin-calculation>div{padding:12px;border-radius:9px;background:#f4f0e8}.skin-calculation span{display:block;font-size:10px;color:var(--muted);line-height:1.3}.skin-calculation strong{display:block;margin-top:6px;font-size:16px;color:#735332}.skin-calculation .remaining{background:#eaf2ec}.skin-calculation .remaining strong{color:#28744f}
.hero-talent-tree{max-height:480px;overflow:auto;padding:10px 16px;background:#f7f0e5;border:1px solid #e1d5c4;border-radius:12px}.hero-talent-tree .talent-branch{position:relative;padding:0 0 19px}.hero-talent-tree .talent-branch:not(:last-child):after{content:"";position:absolute;left:50%;bottom:-2px;width:3px;height:20px;background:#ba9664}.talent-node{cursor:pointer;text-align:left}.talent-node img{display:block;width:44px;height:44px;object-fit:cover;border-radius:7px;margin-bottom:7px}.talent-node.active{border-color:#bd8b45;background:#fff8eb;box-shadow:0 6px 15px rgba(73,44,16,.12)}
.talent-detail{margin-top:15px;padding:17px;border:1px solid #d6b780;border-radius:12px;background:#fffbf5}.talent-detail-head{display:flex;align-items:center;gap:12px}.talent-detail-head img{width:56px;height:56px;border-radius:9px;object-fit:cover}.talent-detail-head h4{margin:4px 0;font-size:17px}.talent-detail-head p{margin:0;font-size:11px;color:var(--muted)}.talent-detail .upgrade-fields{margin:15px 0}.talent-effect{font-size:12px;line-height:1.5;color:#476653}
@media(max-width:650px){.premium-material-grid{grid-template-columns:1fr}.skin-calculation{grid-template-columns:1fr 1fr}.clan-tree{min-width:620px}.clan-node{width:135px}.clan-node img{width:61px;height:61px}}

/* Compact section picker and horizontal image shelf. */
.detail-section-picker{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:16px;padding:14px 0;background:var(--paper,#fffdf8);border-bottom:1px solid var(--line)}
.detail-section-picker label{font-size:12px;font-weight:800;white-space:nowrap;color:#765332}
.detail-section-picker select{flex:1;max-width:380px;min-width:0;border:1px solid #c8a974;border-radius:10px;padding:10px 14px;background:#fffaf0;color:var(--ink);font:inherit;font-weight:700}
.horizontal-gallery{display:flex;gap:12px;overflow-x:auto;padding:6px 3px 18px;scroll-snap-type:x proximity}
.horizontal-gallery>.mini-card,.horizontal-gallery>.skin-card{flex:0 0 128px;min-height:135px;scroll-snap-align:start}
.horizontal-gallery>.skin-card img{width:75px;height:75px;object-fit:contain}
.horizontal-gallery>.skin-card small{display:block;font-size:10px;color:#997248}
/* All selectable visuals remain visible without a sideways scrollbar. */
.horizontal-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;overflow:visible;padding:6px 3px 10px;scroll-snap-type:none}
.horizontal-gallery>.mini-card,.horizontal-gallery>.skin-card{width:100%;min-width:0;min-height:132px;scroll-snap-align:none}
.main-skin-grid{max-height:none;overflow:visible}
/* Hover and keyboard focus update the fixed detail rail; no overlay covers nodes. */
.talent-node:hover .talent-hover,.talent-node:focus-visible .talent-hover{display:none!important}
.beauty-book-card .card-image{height:250px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#f6e3b6,#284454 82%)}
.beauty-book-card .card-image img{width:100%;height:235px;max-width:100%;max-height:235px;object-fit:contain}
#detailDialog[data-category="beautyBook"] .preview-item-art{height:min(57vh,560px);min-height:400px}
#detailDialog[data-category="beautyBook"] .preview-item-art .preview-character{max-height:100%;height:100%;width:auto}
.detail-section-picker{position:sticky;top:68px;z-index:26;padding:12px 0;background:var(--paper,#fffefa);box-shadow:0 8px 14px rgba(15,26,28,.08)}
.soul-piece-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.soul-piece{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 9px;border:1px solid #bd985e;border-radius:12px;text-align:center;background:rgba(196,157,93,.09)}
.soul-piece img{width:64px;height:64px;object-fit:contain}.soul-piece strong{font-size:14px}.soul-piece span,.soul-piece small{font-size:12px}
.soul-bonus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.soul-bonus-grid>div{padding:16px;border:1px solid #b58f58;border-radius:12px;background:rgba(196,157,93,.1)}.soul-bonus-grid strong{font-size:16px}.soul-bonus-grid p{font-size:14px;line-height:1.6}
@media(max-width:650px){.soul-piece-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.soul-bonus-grid{grid-template-columns:1fr}}
.hero-talent-tree{position:relative;max-height:590px;min-width:0;overflow:auto;padding:18px 22px;background:radial-gradient(circle at 50% 0,#fff5e3,#f1e5d3 80%)}
.talent-links{position:absolute;inset:0;z-index:0;pointer-events:none;fill:none;stroke:#be8b3a;stroke-width:2.5;stroke-linejoin:round}
.hero-talent-tree .talent-branch{position:relative;z-index:1;min-height:166px;padding-bottom:34px}
.hero-talent-tree .talent-node-grid{display:flex;justify-content:space-around;gap:14px;position:relative;z-index:2}
.hero-talent-tree .talent-node{position:relative;flex:0 1 160px;min-height:113px;padding:9px;border:2px solid #bb965d;border-radius:12px;background:#fffaf0;box-shadow:0 7px 15px rgba(91,60,26,.12)}
.hero-talent-tree .talent-node img{width:48px;height:48px;margin:0 auto 6px}
.hero-talent-tree .talent-node strong,.hero-talent-tree .talent-node span,.hero-talent-tree .talent-node small{text-align:center}
.hero-talent-tree .talent-branch-head{position:relative;z-index:3;display:block;width:max-content;max-width:100%;margin:0 auto 12px;padding:6px 12px;border:1px solid #d5b684;border-radius:20px;background:#fff8e8;color:#815d30;text-align:center}
.talent-hover{display:none!important;position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;width:225px;transform:translateX(-50%);padding:12px;border:1px solid #b78a52;border-radius:9px;background:#282c2c;color:#fff!important;font-size:11px!important;line-height:1.4;text-align:left!important;box-shadow:0 10px 24px rgba(0,0,0,.23);pointer-events:none}
.talent-hover b,.talent-hover em{display:block;margin:0 0 5px}.talent-hover em{margin:6px 0 0;color:#e9c788;font-style:normal}
.talent-node:hover .talent-hover,.talent-node:focus-visible .talent-hover{display:block!important}
@media(max-width:650px){.detail-section-picker{display:block}.detail-section-picker select{display:block;width:100%;margin-top:7px}.hero-talent-tree{min-width:590px}.hero-talent-tree .talent-node{flex-basis:132px}}

.talent-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);align-items:start;gap:15px}
.talent-workspace #talentTree{min-width:0}
.talent-workspace #talentDetail{position:sticky;top:15px}
.talent-workspace .talent-detail{margin-top:0;max-height:590px;overflow:auto}
.talent-workspace .talent-node-grid{gap:8px}
.talent-workspace .talent-node{flex-basis:135px}
@media(max-width:900px){.talent-workspace{grid-template-columns:1fr}.talent-workspace #talentDetail{position:static}}

/* Keep every skill card readable, including wide signature branches. */
@media(min-width:901px){.detail-layout:has(.talent-workspace){grid-template-columns:minmax(0,1fr) 265px}}
.talent-workspace{grid-template-columns:minmax(0,2.25fr) minmax(250px,.75fr)}
.hero-talent-tree .talent-node-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;justify-content:stretch}
.hero-talent-tree .talent-node{width:100%;min-width:0;min-height:132px;flex:none;overflow-wrap:anywhere}
.hero-talent-tree .talent-node strong{line-height:1.3}
.hero-talent-tree .talent-branch{min-height:0;padding-bottom:48px}
.hero-talent-tree .talent-branch:last-child{padding-bottom:8px}
.hero-talent-tree{min-width:0;overflow-x:hidden}
@media(max-width:1100px){.talent-workspace{grid-template-columns:1fr}.talent-workspace #talentDetail{position:static}.hero-talent-tree .talent-node-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.hero-talent-tree{min-width:0}.hero-talent-tree .talent-node-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.hero-talent-tree .talent-node-grid{grid-template-columns:1fr}}

/* Dialog header remains visible while its single scroll area moves. */
.detail-dialog{scroll-padding-top:72px;overflow-y:auto}
.dialog-top{position:sticky;top:0;z-index:30;width:100%;height:68px;box-shadow:0 4px 16px rgba(4,20,25,.18)}
.dialog-identity{display:flex;align-items:center;gap:11px;min-width:0}
.dialog-identity img{width:43px;height:43px;border-radius:8px;object-fit:cover}
.dialog-identity small{display:block;color:#e6c18d;font-size:10px;font-weight:800;letter-spacing:.12em}
.dialog-identity strong{display:block;max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:white;font-size:17px;line-height:1.2}
.detail-section-picker{position:sticky;top:68px;z-index:29;background:#211f1d;padding:12px 28px;box-shadow:0 8px 16px rgba(0,0,0,.22)}
.detail-section-picker label{color:#f4d3a1;font-size:13px}
.tier-body table{font-size:14px;line-height:1.55}
.tier-body th,.tier-body td{padding:11px 12px}
.soul-piece small{line-height:1.45}
.soul-base-effect{margin:14px 0;padding:15px 18px;border:1px solid #b58f58;border-radius:12px;background:#fff5e8}
.soul-base-effect strong{font-size:16px;color:#70471c}
.soul-base-effect p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#233842}
.skin-preview{top:142px;max-height:none;overflow:visible;min-height:0}
@media(min-width:901px){.detail-layout:has(.talent-workspace){display:block}.detail-layout:has(.talent-workspace) .skin-preview{display:none}}
/* Center every tier over the same tree trunk, like the clan technology view. */
.talent-workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.hero-talent-tree{max-height:none;overflow:visible;min-width:0;padding:28px 24px 40px;border-radius:18px}
.hero-talent-tree .talent-branch{margin:0;padding:0 0 56px;min-height:0}
.hero-talent-tree .talent-branch:last-child{padding-bottom:0}
.hero-talent-tree .talent-branch:not(:last-child)::after{display:none}
.hero-talent-tree .talent-branch-head{margin:0 auto 25px;min-height:31px;padding:7px 15px;font-size:14px;line-height:1.25}
.hero-talent-tree .talent-node-grid{display:grid;width:100%;max-width:calc(var(--node-count) * 220px + (var(--node-count) - 1) * 16px);grid-template-columns:repeat(var(--node-count),minmax(0,1fr));gap:16px;margin:0 auto}
.hero-talent-tree .talent-node{min-height:146px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 10px;overflow-wrap:break-word}
.hero-talent-tree .talent-node img{width:57px;height:57px;margin:0 0 5px;object-fit:contain}
.hero-talent-tree .talent-node strong{font-size:16px;line-height:1.28}
.hero-talent-tree .talent-node span:not(.talent-hover){font-size:14px}
.hero-talent-tree .talent-node small{font-size:12px;line-height:1.35}
.talent-links{stroke:#b27b2e;stroke-width:3;z-index:0}
.talent-workspace #talentDetail{position:sticky;top:88px;min-width:0}
.talent-workspace .talent-detail{max-height:calc(93vh - 110px);overflow:auto}
.talent-detail-head h4{font-size:22px}.talent-detail-head p,.talent-effect{font-size:16px;line-height:1.6}
.talent-detail .upgrade-fields label{font-size:15px}.talent-detail .progress-detail summary{font-size:16px}
.talent-detail .table-wrap table,.talent-detail .table-wrap th,.talent-detail .table-wrap td{font-size:15px;line-height:1.5}
.tier-body table,.tier-body th,.tier-body td,.tier-body .help-text{font-size:15px;line-height:1.55}
.tier-title strong{font-size:17px}.tier-title small{font-size:14px}
.requirement strong{font-size:16px}.requirement p{font-size:15px}
.talent-hover{font-size:13px!important;line-height:1.5}
.preview-full-art,.preview-item-art,.preview-art{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 40%,#466872,#162e3b 76%)}
.preview-full-art::before,.preview-item-art::before,.preview-art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 62%,rgba(227,189,109,.35),transparent 65%)}
.preview-full-art.quality-9,.preview-item-art.quality-9,.preview-art.quality-9{background:radial-gradient(circle at 50% 40%,#684c80,#231933 75%)}
.preview-full-art.quality-10,.preview-item-art.quality-10,.preview-art.quality-10{background:radial-gradient(circle at 50% 40%,#35788d,#102b3e 75%)}
.preview-full-art.quality-11,.preview-item-art.quality-11,.preview-art.quality-11{background:radial-gradient(circle at 50% 40%,#786a43,#262b33 75%)}
.preview-full-art.quality-12,.preview-item-art.quality-12,.preview-art.quality-12,.preview-full-art.quality-13,.preview-item-art.quality-13,.preview-art.quality-13{background:radial-gradient(circle at 50% 40%,#455e94,#171c3d 75%)}
.preview-full-art .preview-background,.preview-item-art .preview-background,.preview-art .preview-background{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.85;filter:none;z-index:0}
.preview-full-art .preview-character,.preview-item-art .preview-character,.preview-art .preview-character{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.3))}
@media(max-width:1150px){.talent-workspace{grid-template-columns:1fr}.talent-workspace #talentDetail{position:static}.talent-workspace .talent-detail{max-height:none}}
@media(max-width:900px){.detail-layout:has(.talent-workspace) .skin-preview{display:none}}
@media(max-width:650px){.hero-talent-tree{padding:18px 12px 30px}.hero-talent-tree .talent-node-grid{max-width:100%;gap:8px}.hero-talent-tree .talent-node{min-height:136px;padding:9px 5px}.hero-talent-tree .talent-node img{width:42px;height:42px}.hero-talent-tree .talent-node strong{font-size:12px}.hero-talent-tree .talent-node small{font-size:10px}.hero-talent-tree .talent-branch-head{font-size:12px}.dialog-identity strong{max-width:45vw}}
.talent-node:hover .talent-hover,.talent-node:focus-visible .talent-hover{display:none!important}