/* Starsea: isolated from global profile cards and item quality tokens. */
#charDetailPopup{position:fixed;inset:0;z-index:10040;background:#090e20;color:#f3ecd9;isolation:isolate;font-family:"Microsoft YaHei","PingFang SC",sans-serif}
#charDetailPopup *{box-sizing:border-box}#charDetailPopup [hidden]{display:none!important}
.cd-backdrop{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(22px) brightness(.25);transform:scale(1.05);pointer-events:none}
.cd-shell{--cd-accent:#b9efff;position:relative;height:100%;height:100dvh;width:min(100%,520px);margin:auto;display:flex;flex-direction:column;overflow:hidden;background:#0c142a;box-shadow:0 0 80px #0009;isolation:isolate}
.cd-shell:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-left:1px solid #d8bc7840;border-right:1px solid #d8bc7840}
#charDetailPopup button{font:inherit;line-height:1.4;cursor:pointer;color:inherit;border:1px solid transparent;background:none;min-height:44px;text-shadow:none;box-shadow:none;letter-spacing:0;-webkit-text-fill-color:currentColor;padding:8px 12px;border-radius:0;flex-shrink:0}
#charDetailPopup button:disabled{opacity:.42;cursor:not-allowed}#charDetailPopup button:focus-visible,.cd-content:focus-visible{outline:2px solid #f4d59a;outline-offset:-2px}
#charDetailPopup button:hover:not(:disabled){filter:brightness(1.13)}#charDetailPopup h1,#charDetailPopup h2,#charDetailPopup h3,#charDetailPopup p{margin:0}#charDetailPopup h3{font-size:16px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.cd-top{height:58px;min-height:58px;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:8;background:linear-gradient(#090f25d9,#090f2500);font-size:14px;color:#f5ead0}
#charDetailPopup .cd-back{padding:6px 8px;font-size:15px;min-width:65px}#charDetailPopup .cd-art-toggle{font-size:12px;border-bottom:1px solid #cfba8260;padding:6px}
.cd-hero{height:42%;min-height:330px;position:relative;flex-shrink:0;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#383964,#152038 55%,#0c142a)}
.cd-art{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:1}
.cd-hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,#0c142a 0%,#0c142ab3 13%,transparent 35%),linear-gradient(90deg,#090f255c,transparent 23%,transparent 62%,#080d1d8c)}
.cd-astrolabe{position:absolute;z-index:2;width:83%;aspect-ratio:1;top:7%;left:9%;border:1px solid #e8d19969;border-radius:50%;box-shadow:inset 0 0 0 8px #dfc9980b,0 0 0 8px #dfc99815;pointer-events:none;opacity:.65}
.cd-astrolabe:before,.cd-astrolabe:after{content:"";position:absolute;inset:12%;border:1px solid #dfc99869;transform:rotate(45deg)}
.cd-astrolabe:after{inset:3%;border-radius:50%;border-style:dashed;transform:none}
.cd-shell[data-rank="4"] .cd-astrolabe{border-color:#b5edff99;box-shadow:0 0 0 7px #e6b9ff22,0 0 0 10px #aefae32b,0 0 0 22px #fff4b617;animation:cd-breathe 6s ease-in-out infinite}
.cd-shell[data-rank="3"] .cd-astrolabe:before{display:none}.cd-shell[data-rank="2"] .cd-astrolabe{box-shadow:none;opacity:.35}.cd-shell[data-rank="2"] .cd-astrolabe:before,.cd-shell[data-rank="2"] .cd-astrolabe:after{display:none}
.cd-nav{position:absolute;z-index:4;left:8px;top:68px;display:flex;flex-direction:column;gap:3px;width:48px}
#charDetailPopup .cd-nav button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:49px;padding:4px 2px;color:#e0dccf;font-size:11px;border-radius:50% 50% 8px 8px;background:#0a11294a}
.cd-nav .jp-icon{width:22px;height:22px;background:currentColor;display:block;mask-image:var(--jp-icon);-webkit-mask-image:var(--jp-icon);mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
#charDetailPopup .cd-nav [aria-selected="true"]{color:#fff8e9;background:linear-gradient(#ffffff20,#b8d4ff12);border:1px solid var(--cd-accent);box-shadow:0 0 12px #e3d1b330}
.cd-identity{position:absolute;z-index:3;right:17px;top:65px;width:35%;text-align:right;text-shadow:0 2px 8px #070b20,0 0 20px #000}
.cd-rarity{display:block;color:var(--cd-accent);font:italic 36px/1 Georgia,serif;letter-spacing:2px}
.cd-rarity .jp-rarity-badge{display:inline-block;width:100%;max-width:112px;height:58px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 2px 5px #080a18)}
.cd-shell[data-rank="4"] .cd-rarity{background:linear-gradient(120deg,#b5efff 5%,#adffde 25%,#fff1ba 45%,#ffb6e4 65%,#c2b7ff 85%,#b5efff);background-size:100%;color:transparent;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 3px #0008);animation:none}
#charDetailPopup .cd-identity h1{font:500 clamp(25px,7vw,37px)/1.22 "Songti SC",SimSun,serif;letter-spacing:2px;color:#fff2d9;margin:7px 0;overflow-wrap:anywhere}
.cd-title{display:block;font:14px/1.6 "Songti SC",SimSun,serif;letter-spacing:1px;border-top:1px solid #d7bf8766;padding-top:5px}.cd-skin-name{display:block;color:#e2d7c5;font-size:11px;margin-top:5px}
.cd-shell[data-identity="lower"] .cd-identity{top:auto;bottom:12px}
.cd-caption{position:absolute;bottom:13px;left:70px;right:19px;z-index:3}.cd-caption .cd-tags{display:flex;gap:12px;font-size:13px;color:#f8deb0;letter-spacing:1px;margin-bottom:5px}.cd-caption p{font:italic 12px/1.6 "Songti SC",SimSun,serif;color:#eee2cd;max-height:3.2em;overflow:hidden}
.cd-star{position:absolute;z-index:3;color:#e4d09b;pointer-events:none}.cd-star-one{left:59%;top:17%;font-size:24px}.cd-star-two{right:8%;bottom:21%;font-size:13px}
.cd-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px 20px 18px;background:radial-gradient(ellipse at 100% 100%,#27304c80,transparent 60%),#0c142a;scrollbar-width:thin;scrollbar-color:#988967 #101629;color:#f0e9db;text-align:left}
.cd-section-title{display:flex;gap:10px;justify-content:space-between;align-items:center;font:16px/1.4 "Songti SC",SimSun,serif;color:#f0dbb0;margin-bottom:12px}.cd-section-title small{font:11px/1.4 "Microsoft YaHei",sans-serif;color:#b5b9c9;flex-shrink:0}
.cd-skill-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 3px 9px;scrollbar-width:thin;scroll-snap-type:x proximity}#charDetailPopup .cd-skill-choice{width:calc((100% - 36px)/4);min-width:69px;min-height:98px;display:flex;flex-direction:column;gap:8px;align-items:center;padding:0 0 5px;font-size:12px;scroll-snap-align:start;border-bottom:1px solid transparent;white-space:normal;overflow-wrap:anywhere}
.cd-skill-orb{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:1px solid #d8bd7e;border-radius:50%;padding:5px;background:#1c2039;box-shadow:0 0 0 3px #d3b77816;flex-shrink:0}
#charDetailPopup .cd-skill-orb .jp-skill-icon{display:block;position:static;width:100%;height:100%;border-radius:50%;background-size:400% 400%;border:0;box-shadow:none;transform:none;flex:none;margin:0}
#charDetailPopup .cd-skill-choice[aria-pressed="true"]{color:#ffe6b6;border-bottom-color:var(--cd-accent)}.cd-skill-choice[aria-pressed="true"] .cd-skill-orb{box-shadow:0 0 0 3px #d3b77833,0 0 15px #d3b77850}
.cd-skill-focus{border:1px solid #c9b78268;border-radius:12px;padding:12px 14px;margin-top:7px;background:linear-gradient(105deg,#26304d80,#18203980)}
.cd-skill-focus p,.cd-skill-full p{font-size:14px;line-height:1.75;color:#e1dfdc;margin-top:6px;overflow-wrap:anywhere}#charDetailPopup .cd-text-button{font-size:12px;color:#e9d4ab;padding:4px 0;text-align:left;min-height:44px}#charDetailPopup .cd-play{width:46px;height:46px;border-radius:50%;border:1px solid #e0cba3;color:#ffe5b5;font-size:20px;padding:0}
.cd-mechanic{padding:12px 14px;border-left:2px solid var(--cd-accent);background:#ffffff07;color:#cccbd4;font-size:13px;line-height:1.7;margin:8px 0 15px}.cd-skill-full{padding:16px 0;border-bottom:1px solid #c9b78235}.cd-skill-full-head{display:flex;align-items:center;gap:15px}.cd-skill-full-head small{color:#bfb29a;font-size:11px}.cd-story{font-size:14px;line-height:2.05;letter-spacing:.3px;margin:14px 0!important}#charDetailPopup .cd-story-title{font:24px/1.6 "Songti SC",SimSun,serif;letter-spacing:2px;color:#f2debd}.cd-content blockquote{margin:20px 0;padding:12px 15px;border-left:1px solid #d9bc83;color:#e2ceae;font:italic 15px/1.85 "Songti SC",SimSun,serif}
.cd-skins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}#charDetailPopup .cd-skin-card{padding:6px;border:1px solid #7d78996e;border-radius:12px;overflow:hidden;min-width:0;background:#1a2032;text-align:center}.cd-skin-card img{width:100%;height:150px;object-fit:cover;object-position:50% 25%;border-radius:7px}.cd-skin-card span,.cd-skin-card small{display:block;margin:6px 0;font-size:13px}.cd-skin-card small{font-size:11px;color:#bdb6aa}#charDetailPopup .cd-skin-card[aria-pressed="true"]{border-color:var(--cd-accent);background:#ffffff0b}.cd-skin-card[aria-disabled="true"] img{filter:grayscale(.85);opacity:.4}
#charDetailPopup .cd-play{flex-shrink:0}
.cd-muted{font-size:12px;line-height:1.8;color:#b5b5c6;margin:10px 0!important}.cd-load{font-size:13px;color:#dccfaa;padding:8px 0}.cd-load button{text-decoration:underline}
.cd-footer{flex-shrink:0;padding:10px 20px max(14px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#0b1328,#111a30);border-top:1px solid #d0b77a50;z-index:4}.cd-footer>div{display:flex;gap:12px}#charDetailPopup .cd-footer>div button{flex:1;border:1px solid #ccb78690;border-radius:28px;min-height:48px;font-size:15px;background:#121d33;color:#f1e3c9}#charDetailPopup .cd-footer>div .cd-primary{background:linear-gradient(115deg,#b99b62,#f2ddb1 55%,#c5a369);color:#342616;border-color:#ffdf9a;font-weight:700;box-shadow:inset 0 0 0 3px #f6e4bd45,0 0 14px #eecf8830}.cd-lock-note:empty{display:none}.cd-lock-note{display:block;font-size:11px;color:#c9c1b8;text-align:center;margin-bottom:8px}#charDetailPopup .cd-recruit-link{font-size:12px;display:block;width:100%;margin-top:5px;color:#e3cda6}

.cd-shell.cd-art-only .cd-hero{height:100%;min-height:100%;}.cd-art-only .cd-identity,.cd-art-only .cd-nav,.cd-art-only .cd-caption,.cd-art-only .cd-content,.cd-art-only .cd-footer,.cd-art-only .cd-astrolabe,.cd-art-only .cd-star{display:none}.cd-art-only .cd-art{object-fit:contain}.cd-art-only .cd-hero-shade{background:linear-gradient(#0c142a66,transparent 20%)}
.cd-art-missing:after{content:"立绘暂不可用";position:absolute;top:52%;left:35%;color:#d2c8bd;font-size:14px}
.cd-list-tier{position:absolute;left:8px;top:8px;font:bold 12px/1.3 Georgia,serif;color:var(--cd-list-color);letter-spacing:1px}.cd-list-tier[data-rank="4"]{background:linear-gradient(100deg,#aaf9ff,#baffcc,#fff0af,#ffb8e9,#cabaff);background-clip:text;-webkit-background-clip:text;color:transparent}.cd-list-mythic{border-color:#c5ddf4!important;box-shadow:0 0 8px #d9bdff77,0 0 15px #acf4e944!important}
@keyframes cd-breathe{50%{opacity:.85;transform:rotate(5deg)}}@keyframes cd-rainbow{50%{background-position:100% 50%}}
@media(max-width:375px){.cd-content{padding:12px 14px}.cd-footer{padding-left:14px;padding-right:14px}.cd-skill-strip{gap:8px}.cd-skill-choice{min-width:65px!important}.cd-skill-orb{width:52px;height:52px}.cd-identity{right:12px}.cd-title{font-size:12px}.cd-caption{left:64px;right:14px}}
@media(max-height:640px){.cd-hero{height:40%;min-height:300px}.cd-nav{top:60px;gap:0}#charDetailPopup .cd-nav button{min-height:44px;padding:3px}.cd-nav .jp-icon{display:none}.cd-identity{top:65px}.cd-rarity{font-size:32px}#charDetailPopup .cd-identity h1{font-size:25px}.cd-caption{display:none}.cd-footer{padding-top:7px;padding-bottom:7px}}
/* 非概览页：立绘区缩小为概览的 60%，多出的高度给下方信息区（横屏侧栏布局不适用） */
@media (min-height:541px), (max-width:649px){
.cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-hero{height:25.2%;min-height:198px}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity{top:62px;right:14px}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity .cd-rarity{display:none}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity .cd-title,
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity .cd-skin-name{display:none}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity h1{font-size:22px;margin:0}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity .cd-constellation-stars{gap:2px;margin:3px 0 0}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-identity .cd-constellation-stars button{font-size:16px!important;min-height:22px!important;max-width:22px}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-star{display:none}
/* tab 导航横向排布在立绘底部，避免与返回栏和角色名挤压 */
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-nav{top:auto;bottom:6px;left:8px;right:8px;width:auto;flex-direction:row;justify-content:space-between;gap:4px;height:42px}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-nav button{flex:1;min-height:0;height:100%;flex-direction:row;gap:3px;padding:2px 4px;font-size:10px;border-radius:10px}
#charDetailPopup .cd-shell[data-tab]:not([data-tab="overview"]):not(.cd-art-only) .cd-nav .jp-icon{display:block;width:14px;height:14px}
/* 竖屏下 tab 导航在立绘区内自适应铺满，避免被 overflow:hidden 裁切 */
.cd-nav{top:64px;bottom:10px;justify-content:space-between}
#charDetailPopup .cd-nav button{min-height:0;flex:1;padding:2px}
}
@media(prefers-reduced-motion:reduce){#charDetailPopup *{animation:none!important;transition:none!important}}

@media(min-width:650px) and (max-height:540px){
 .cd-shell{width:min(100%,960px);padding:62px 0 0 46%}.cd-hero{position:absolute;left:0;top:0;width:46%;height:100%;min-height:0}.cd-identity{top:76px;right:14px}.cd-caption{display:none}.cd-nav{top:65px;gap:0}.cd-content{padding:12px 16px}.cd-footer{padding:8px 16px}.cd-shell.cd-art-only{padding:0}.cd-shell.cd-art-only .cd-hero{width:100%}.cd-shell.cd-art-only .cd-art{object-fit:contain}
}

.cd-shell[data-rank="4"] .cd-astrolabe:after{border-style:solid;border-color:#b8f5e199 #f4b8f299 #ffedac99 #abe2ff99}
#charDetailPopup .cd-shell[data-rank="4"] .cd-nav [aria-selected="true"]{border:1px solid transparent;background:linear-gradient(#15203b,#15203b) padding-box,linear-gradient(125deg,#a5eaff,#b6ffd7,#fff0b4,#efb6ff) border-box}
#charContentRoles .char-rank-filter[data-rank="4"]{position:relative}#charContentRoles .char-rank-filter[data-rank="4"]:after{content:"";position:absolute;bottom:3px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,#a5eaff,#b6ffd7,#fff0b4,#efb6ff)}

.cd-constellation-stars{display:flex;gap:5px;margin:8px 0}.cd-constellation-stars button{padding:0!important;min-width:24px;min-height:28px;background:none!important;border:0!important;color:#8e8b82;font-size:25px!important}#charDetailPopup .cd-constellation-stars .is-filled{color:#FFD700;text-shadow:0 0 9px #ffd70066}.cd-constellation-node{padding:12px;margin:10px 0;border:1px solid #ffffff20;border-radius:12px;color:#aaa}.cd-constellation-node h3{margin:0 0 7px;font-size:15px}.cd-constellation-node p{margin:0;line-height:1.7;font-size:13px}.cd-constellation-node.is-unlocked{border-color:#ffd70055;color:#eee}.cd-constellation-node.is-unlocked h3{color:#FFD700}.cd-constellation-node.is-selected{background:#ffd70012;outline:1px solid #FFD700}.cd-nav{gap:0}

.cd-constellation-node h3 .crystal-star{--crystal-size:20px;margin-right:5px}.cd-constellation-stars{gap:4px;justify-content:flex-end}.cd-constellation-stars button{display:inline-flex;align-items:center;justify-content:center;flex:1;min-width:0!important;max-width:30px;min-height:32px!important}.cd-constellation-stars .crystal-star{width:100%;max-width:26px;height:auto;aspect-ratio:1}.cd-constellation-node.is-unlocked{border-color:#b4d7f65c;background:linear-gradient(135deg,#afdcff08,#e4b4ff08)}.cd-constellation-node.is-unlocked h3{color:#daefff}.cd-constellation-node.is-selected{background:linear-gradient(120deg,#b9f5ed15,#d3b7ff19);outline-color:#c9eaff}

/* Actions belong to the overview scroll area. */
.cd-content .cd-footer{margin-top:18px;padding:14px 0 max(14px,env(safe-area-inset-bottom));background:none}
.cd-weapon-label{display:flex;flex-direction:column;gap:8px;font-size:14px}
.cd-weapon-label select{width:100%;padding:12px;color:#f3ecd9;background:#17223b;border:1px solid #c9b78266;border-radius:8px}
.cd-loadout-skills{border:1px solid #ffffff25;border-radius:10px;margin:12px 0;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cd-loadout-skills legend{color:var(--skill-color);font-size:13px}.cd-loadout-skills label{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;font-size:12px;padding:2px 0}.cd-loadout-pick{display:flex;align-items:center;gap:6px;min-height:22px}.cd-loadout-skill-desc{color:#b5b9c9;font-size:11px;line-height:1.55;overflow-wrap:anywhere}.cd-loadout-skills input{accent-color:var(--skill-color);width:18px;height:18px}
.cd-loadout-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}#charDetailPopup .cd-loadout-actions button{border:1px solid #c9b78266;border-radius:12px;font-size:12px}
.cd-appearance-columns{display:flex;flex-direction:column;gap:24px}
.cd-appearance-columns>section{min-width:0}.cd-appearance-columns>section+section{border-top:1px solid #7d789942;padding-top:20px}
.cd-appearance-columns .cd-section-title{gap:4px;flex-wrap:wrap}.cd-appearance-columns .cd-muted{font-size:11px;min-height:32px}
.cd-appearance-columns .cd-skins,.cd-holo-cards{display:grid;grid-template-columns:repeat(2,minmax(0,150px));justify-content:center;align-items:start;gap:10px;margin-top:12px}
#charDetailPopup .cd-holo-card{padding:6px;border:1px solid #7d78996e;border-radius:12px;min-width:0;background:#1a2032;text-align:center;overflow:hidden}
.cd-holo-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:7px}
.cd-holo-card span,.cd-holo-card small{display:block;margin:6px 0;font-size:13px;overflow-wrap:anywhere}.cd-holo-card small{font-size:11px}
.cd-holo-card.is-unengraved img{filter:grayscale(1);opacity:.42}.cd-holo-card.is-unengraved .cd-holo-engraving{color:#b5b9c9}.cd-holo-card.is-engraved .cd-holo-engraving{color:#FFD700}#charDetailPopup .cd-holo-card.is-engraved{border-color:#ffd70066;background:linear-gradient(140deg,#ffd7000e,#1a2032)}
.cd-appearance-columns .cd-skin-card img{height:auto;aspect-ratio:9/16}
@media(max-width:500px){.cd-appearance-columns{gap:20px}.cd-appearance-columns>section+section{padding-top:16px}.cd-appearance-columns .cd-section-title span{font-size:15px}}