/* Screen layouts: use native content and selected-state logic. */
.c-screen{--c-gap:24px;display:block;width:100%;min-width:0}
.c-screen .c-surface{background-color:#141517;background-image:none;border:1px solid #2c2d31;border-radius:18px;box-shadow:0 8px 28px #0002;overflow:hidden}
.c-screen .panel-h{padding:18px 22px;background:none}
.c-screen .panel-h h3{font-size:16px}
.c-screen .panel-b{padding:20px 22px}
.c-screen .c-list{background:#101113;border:1px solid #2c2d31;border-radius:16px;padding:14px;min-width:0}
.c-screen .c-detail{background:#17181a;border:1px solid #3c3930;border-radius:18px;padding:24px;min-width:0}
.c-screen .c-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:4px 0 18px;margin-bottom:8px}
.c-screen .c-tabs button{flex:none;white-space:nowrap;min-height:40px;font-size:13px}
.c-screen .ui-toolbar{display:flex;gap:8px;margin-bottom:14px;align-items:center}
.c-screen .ui-toolbar input{min-width:0;flex:1;min-height:40px}
.c-screen .ui-master-detail{grid-template-columns:minmax(250px,.85fr) minmax(0,1.7fr);gap:var(--c-gap);align-items:start}
.c-screen .ui-master-detail:has(>.ui-compare){grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr) minmax(230px,.75fr)}
.c-screen .ui-list-card{margin:0 0 10px;padding:16px;background:#1a1b1e;border:1px solid #303135;border-radius:12px;color:#e8e8e3;min-height:68px;box-shadow:none}
.c-screen .ui-list-card.on,.c-screen .ui-list-card.selected,.c-screen .ui-list-card.open{background:#27251b;border-color:#a18c3a}
.c-screen .ui-list-card b{font-size:14px;line-height:1.4}
.c-screen .ui-hero-head{padding:18px;background:#202124;border:1px solid #353639;border-radius:14px;margin-bottom:18px}
.c-screen .ui-costs{gap:10px;margin:16px 0}
.c-screen .ui-costs>div,.c-screen .ui-stats>div{padding:12px;border-radius:10px;background:#202124;border:1px solid #303135}
.c-screen .ui-compare h3{font-size:15px;margin-bottom:12px}
.c-screen table{width:100%}.c-screen .tablewrap{border:1px solid #303135;border-radius:12px;overflow:auto}
.c-screen .empty{min-height:0;padding:28px;border:1px dashed #44433a;background:#151618;text-align:left}
.c-screen .empty h3{font-size:18px;margin-bottom:12px}
.c-screen .empty .btn{margin-top:16px;width:auto}
.c-screen details{background:#111214;border:1px solid #303135;border-radius:10px;margin:10px 0}
.c-screen details>summary{font-size:13px;padding:13px 16px}
.c-screen details[open]{border-color:#756628}
.c-screen details[open]>summary{border-bottom:1px solid #303135;color:#d4bd60}
/* HQ: hero and actions first; operational overview underneath. */
.c-home .ui-home-dashboard{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:24px}
.c-home .c-home-hero{grid-column:1;grid-row:1;min-height:340px;border-radius:20px;overflow:hidden}
.c-home .c-home-actions{grid-column:1;grid-row:2}
.c-home .c-home-operator{grid-column:2;grid-row:1}
.c-home .ui-home-status{grid-column:1;grid-row:3}
.c-home .ui-home-recommend{grid-column:2;grid-row:2/4}
.c-home .ui-home-news{grid-column:1/-1;grid-row:4;max-height:260px}
.c-home .ui-home-six{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px;gap:14px}
.c-home .ui-home-stat{min-height:110px;padding:18px;background:#202124}
.c-home .ui-home-stat img{width:34px;height:34px}
.c-home .hqgo{display:flex;gap:12px;padding:16px}
.c-home .hqgo .btn{flex:1;min-height:60px;font-size:15px}
/* Contract / raid / squad / bounty operations. */
.c-contracts .exact-contract-columns,.c-contracts .contract-columns,.c-raid .ui-raid-layout,.c-squad .exact-lobby-columns,.c-bounty .exact-bounty-columns{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.65fr);gap:24px;align-items:start}
.c-contracts .contract,.c-raid .contract,.c-squad .contract,.c-bounty .bcard{background:#1b1c1f;border:1px solid #353639;border-radius:14px;box-shadow:none}
.c-contracts .contract.open,.c-raid .contract.open{border-color:#a18c3a;background:#24231b}
.c-contracts .ui-npc-header,.c-raid .ui-npc-header{border-radius:18px;overflow:hidden;margin-bottom:20px}
.c-raid .raid-objectives,.c-raid .raid-phases{gap:12px}
.c-squad .exact-lobby-detail .empty,.c-bounty .exact-bounty-detail .empty{min-height:200px}
.c-daily .ui-daily-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:24px}
.c-story .ui-story-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}
.c-story .stchs{display:flex;flex-direction:column;gap:8px}
.c-story .stchs button{padding:14px;text-align:left;min-height:54px;border-radius:10px}
/* Relationship: character stage retained, reading/actions in a separate surface. */
.c-bond .exact-bond-grid,.c-bond .bstage-separated{gap:24px}
.c-bond .blist{gap:10px;padding:14px;background:#101113;border-radius:16px}
.c-bond .blist button{border-radius:10px;padding:10px;min-height:64px}
.c-bond .bvisual{border-radius:20px;overflow:hidden;border:1px solid #3c3930}
.c-bond .bside,.c-bond .exact-bond-detail{background:#141517;border:1px solid #303135;border-radius:18px;padding:22px}
.c-bond .bacts{gap:10px}.c-bond .bacts .btn{min-height:44px}
.c-bond .beps>*{border-radius:10px;margin-bottom:8px}
/* Equipment, procurement and exchange. */
.c-gear .gear-columns{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:24px;align-items:start}
.c-gear .gear-main,.c-gear .gear-operator{padding:22px;background:#141517;border:1px solid #303135;border-radius:18px}
.c-gear .gear-loadout-card{background:#202124;border-radius:12px}
.c-gear .gear-operator .ui-stats{gap:8px}
.c-shop .shop-preview-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.65fr);gap:24px}
.c-shop .shop-preview-left{background:#111214;border:1px solid #303135;border-radius:16px;padding:18px}
.c-shop .shop-preview-right{padding:24px;border-radius:18px}
.c-market .ui-master-detail{grid-template-columns:minmax(290px,1fr) minmax(0,1.6fr)}
.c-hire .ui-master-detail{grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr) minmax(230px,.8fr)}
.c-talent .ui-talent-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}
.c-talent .ui-talent-weapons{padding:18px;background:#111214;border:1px solid #303135;border-radius:16px}
.c-perk .ui-perk-nodes{gap:12px}.c-perk .ui-perk-node{border-radius:12px;min-height:76px}
/* Base and strategic planning. */
.c-hideout .ui-hideout-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px}
.c-hideout .ui-hideout-queues{display:flex;flex-direction:column;gap:18px}
.c-hideout .ui-master-detail{grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr)}
.c-res .resgrid,.c-inf .infkinds,.c-inf .infregions{gap:16px}
.c-inf .ui-inf-recruit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(240px,.8fr);gap:20px}
.c-front .exact-front-grid{gap:24px;grid-template-columns:minmax(230px,.8fr) minmax(0,1.8fr) minmax(240px,.85fr)}
.c-front .exact-front-map{border-radius:20px;overflow:hidden;border:1px solid #3c3930}
/* Progress, records and reference screens. */
.c-quest .ui-master-detail{grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr)}
.c-goals .ui-goals-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:24px}
.c-goals .achievement,.c-goals .goal,.c-goals .passstep{border-radius:12px;background:#1b1c1f;border-color:#303135}
.c-career .review-career-grid,.c-company .review-company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.c-intel .ui-summary-layout,.c-ranking .ui-summary-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px}
.c-ledger .ui-ledger-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px}
.c-pvp .ui-master-detail{grid-template-columns:minmax(280px,1fr) minmax(0,1.6fr)}
.c-league .panel,.c-company .panel{margin-bottom:18px}
.c-codex .codexgrid,.c-codex .colgrid{gap:14px}
.c-manual .manual-layout,.c-manual .manualgrid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px}
.c-manual .manual-nav{padding:18px;border:1px solid #303135;border-radius:16px;background:#111214}
.c-manual .manual-body{padding:26px;border:1px solid #303135;border-radius:18px;background:#17181a;line-height:1.8}
.c-admin .panel{border-radius:14px;background:#141517}
.c-contracts .exact-contract-layout{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.4fr);gap:24px;align-items:start}
.c-contracts .exact-contract-toolbar{background:#141517;border:1px solid #303135;border-radius:14px;padding:14px;gap:12px;margin-bottom:22px}
.c-contracts .exact-contract-row{background:#1b1c1f;border:1px solid #343538;border-radius:12px;margin-bottom:10px;padding:14px;min-height:94px}
.c-contracts .exact-contract-row.on{background:#28251b;border-color:#b7a044}
.c-contracts .exact-contract-detail{background:#17181a;border:1px solid #3c3930;border-radius:18px;padding:20px}
.c-contracts .exact-condition,.c-contracts .exact-rewards,.c-contracts .exact-departure{background:#202124;border:1px solid #343538;border-radius:12px;padding:14px}
.c-contracts .exact-contract-title{background:none;padding:0 0 16px}
.c-contracts .exact-contract-scene{border-radius:12px;margin-bottom:16px}
.c-bond .exact-bond-bio,.c-bond .exact-bond-dialogue{background:#17181a;border-color:#343538;border-radius:14px}
.c-bond .exact-bond-list-filter{display:flex;gap:8px;margin-bottom:12px}
.c-bond .bcard{background:#1b1c1f;border-color:#343538;border-radius:10px}
.c-bond .bcard.on{border-color:#b7a044;background:#28251b}
.c-bond .exact-episode{background:#1b1c1f;border-color:#343538;border-radius:12px}
.c-bond .pc-section-tabs .btn{background:#202124;border-color:#343538}
.c-bond .pc-section-tabs .btn.primary{background:#b7a044;color:#11120f}
/* Live combat, intermission and result panels share the same visual language. */
.combat.v2{gap:22px;grid-template-columns:minmax(240px,.8fr) minmax(0,1.9fr) minmax(280px,1fr)}
.combat.v2 .panel{background:#141517;border:1px solid #303135;border-radius:16px;overflow:hidden}
.combat.v2 .panel-h{background:none;padding:16px 20px}
.combat.v2 .panel-b{padding:18px}
.combat.v2 .turnbar,.combat.v2 .telebar,.combat.v2 .tstrip{background:#202124;border-color:#414033;border-radius:12px}
.combat.v2 .enemy,.combat.v2 .ecard,.combat.v2 .member{background:#1b1c1f;border-color:#343538;border-radius:12px}
.combat.v2 .combat-range-notice{background:#202124;border-color:#756628;border-radius:12px;padding:14px}
.combat.v2 .btn{min-height:42px;border-radius:10px}
.combat.v2 .btn.primary{background:#b7a044;color:#11120f}
.combat.v2 .log{background:#101113;border-radius:12px;padding:12px}
.combat.v2.over .main>.panel{border-color:#756628}
.cw-panel{background:#17181a;border:1px solid #756628;border-radius:20px;box-shadow:0 28px 90px #0008;color:#efefeb}
.cw-panel header{background:none;border-color:#303135;padding:18px 22px}
.cw-panel .cw-layout{gap:24px;padding:22px}
.cw-panel .cw-art{background:#111214;border-radius:14px}
.cw-panel .cw-ring{border-color:#b7a044}
.cw-panel .cw-status{color:#c5b05e}
.cw-panel .cw-option,.cw-panel .cw-row{background:#202124;border-color:#343538;border-radius:9px}
.cw-panel .btn.primary{background:#b7a044;color:#11120f}
.stable-dialog .modal{background:#17181a;border-radius:20px;border-color:#756628}
.stable-dialog .dialog-closebar{background:none;border-bottom:1px solid #303135}
.stable-dialog .modal .panel{background:#202124;border:1px solid #343538;border-radius:12px}
@media(min-width:901px) and (max-width:1399px){
 .c-screen .ui-master-detail:has(>.ui-compare),.c-hire .ui-master-detail,.c-front .exact-front-grid{grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr)}
 .c-screen .ui-compare,.c-front .exact-front-grid>*:last-child{grid-column:1/-1}
 .c-home .ui-home-dashboard{grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr)}
 .c-hideout .ui-hideout-workspace{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
 .c-screen{--c-gap:14px}
 .c-screen .panel-h{padding:15px}.c-screen .panel-b{padding:15px}
 .c-screen .c-detail,.c-screen .c-list{padding:15px}
 .c-screen .c-tabs{position:relative;margin:0 0 10px;padding-bottom:10px}
 .c-screen .c-tabs button{min-height:42px}
 .c-screen .ui-master-detail,.c-screen .ui-master-detail:has(>.ui-compare),.c-home .ui-home-dashboard,.c-contracts .exact-contract-columns,.c-contracts .contract-columns,.c-raid .ui-raid-layout,.c-squad .exact-lobby-columns,.c-bounty .exact-bounty-columns,.c-daily .ui-daily-layout,.c-story .ui-story-layout,.c-gear .gear-columns,.c-shop .shop-preview-grid,.c-market .ui-master-detail,.c-hire .ui-master-detail,.c-talent .ui-talent-layout,.c-hideout .ui-hideout-workspace,.c-hideout .ui-master-detail,.c-inf .ui-inf-recruit,.c-front .exact-front-grid,.c-quest .ui-master-detail,.c-goals .ui-goals-layout,.c-career .review-career-grid,.c-company .review-company-grid,.c-intel .ui-summary-layout,.c-ranking .ui-summary-layout,.c-ledger .ui-ledger-layout,.c-pvp .ui-master-detail,.c-manual .manual-layout,.c-manual .manualgrid{grid-template-columns:minmax(0,1fr);gap:14px}
 .c-home .ui-home-dashboard>*{grid-column:auto;grid-row:auto}
 .c-home .c-home-hero{min-height:260px;order:0}.c-home .c-home-actions{order:1}.c-home .ui-home-recommend{order:2}.c-home .ui-home-status{order:3}.c-home .c-home-operator{order:4}.c-home .ui-home-news{order:5}
 .c-home .ui-home-six{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}
 .c-home .ui-home-stat{min-height:92px;padding:12px;gap:8px}
 .c-home .hqgo{flex-direction:column;padding:12px}.c-home .hqgo .btn{min-height:46px}
 .c-screen .empty{padding:22px;min-height:0}
 .c-story .stchs{flex-direction:row;overflow:auto}.c-story .stchs button{flex:none;min-width:180px}
 .c-gear .gear-main,.c-gear .gear-operator,.c-shop .shop-preview-left,.c-shop .shop-preview-right{padding:14px}
 .c-bond .bside{padding:15px}.c-screen .ui-compare{grid-column:auto}
 .c-manual .manual-body{padding:18px}
 .c-contracts .exact-contract-layout{grid-template-columns:minmax(0,1fr);gap:14px}
 .c-contracts .exact-contract-detail{padding:15px}
 .c-bond .blist{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;align-items:stretch}
 .c-bond .exact-bond-list-filter{flex-direction:column;flex:none;width:90px;margin:0}
 .c-bond .blist .bcard{flex:none;width:155px;min-height:84px;padding:10px}
 .combat.v2{grid-template-columns:minmax(0,1fr);gap:14px}
 .combat.v2 .col{min-width:0}.combat.v2 .main{order:0}.combat.v2 .side{order:1}.combat.v2 .ops{order:2}
 .combat.v2 .panel-b{padding:14px}
 .cw-panel{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;border-radius:16px}
 .cw-panel .cw-layout{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
}

/* Background art: keep the complete frame at every viewport. */
.c-hideout .ui-detail .himg{height:auto!important;aspect-ratio:8/3;max-height:230px!important;margin:0 0 14px}
.c-hideout .ui-detail .himg img{width:100%;height:100%;object-fit:contain}