/*
 * 万千心途 · 男主培养视觉系统
 * Direction: 心域共鸣档案 / mineral-dark editorial interface
 * Loaded after the structural styles so the complete interaction model remains intact.
 */

:root{
  --fd-ink:#071015;
  --fd-ink-2:#0b181e;
  --fd-surface:rgba(13,27,32,.84);
  --fd-surface-strong:rgba(8,19,24,.96);
  --fd-paper:#f2ead8;
  --fd-paper-soft:rgba(242,234,216,.72);
  --fd-paper-faint:rgba(242,234,216,.5);
  --fd-gold:#d8b96f;
  --fd-gold-bright:#f2d89a;
  --fd-mint:#72cfc5;
  --fd-rose:#d995a9;
  --fd-line:rgba(226,215,188,.16);
  --fd-line-strong:rgba(226,215,188,.34);
  --top:58px;
  --bottom:48px;
  --portrait-rail:72px;
  --function-rail:126px;
  --detail-width:47vw;
}

#app{
  background:
    radial-gradient(ellipse at 28% 46%,rgba(107,176,167,.23),transparent 34%),
    radial-gradient(ellipse at 76% 18%,rgba(189,151,88,.09),transparent 30%),
    linear-gradient(115deg,#14282c 0%,#102127 38%,#0a171d 65%,#071116 100%);
}
#app::before{
  opacity:.5;
  background:
    linear-gradient(112deg,transparent 0 46%,rgba(216,185,111,.16) 46.06%,transparent 46.12%),
    linear-gradient(36deg,transparent 0 60%,rgba(114,207,197,.08) 60.08%,transparent 60.16%),
    repeating-linear-gradient(90deg,transparent 0 159px,rgba(255,255,255,.018) 160px);
}
#app::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.1;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.backdrop{opacity:.22;background-size:124px 124px}
.backdrop i{border-color:rgba(114,207,197,.13)}

/* Stable HUD: clear information on a single dark datum line. */
.topbar{
  height:calc(var(--top) + env(safe-area-inset-top));
  padding-left:max(10px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
  gap:10px;
  border-bottom:1px solid var(--fd-line);
  background:rgba(5,14,18,.94);
  box-shadow:0 12px 34px rgba(0,0,0,.2);
}
.brand{min-width:156px;padding-right:18px;border-right:1px solid var(--fd-line)}
.brand small{color:var(--fd-paper-faint);font-size:8px;letter-spacing:.18em}
.brand strong{margin-top:3px;color:var(--fd-paper);font-size:15px;letter-spacing:.12em}
.resource-bar{gap:5px}
.resource-bar button{
  min-width:44px;
  padding:0 11px;
  gap:7px;
  border:1px solid transparent;
  background:transparent;
}
.resource-bar button:hover{border-color:var(--fd-line);background:rgba(255,255,255,.04)}
.resource-bar span{color:var(--fd-paper-soft);font-size:10px}
.resource-bar b{font-size:13px;color:var(--fd-paper)}
.slot-state{
  min-height:38px;
  padding:0 13px;
  gap:6px;
  border:1px solid var(--fd-line);
  background:rgba(255,255,255,.025);
}
.top-spacer+.slot-state{margin-left:10px}
.slot-state span{font-size:11px;color:var(--fd-paper-soft)}
.slot-state b,.slot-state em{font-size:12px}
.icon-btn{color:var(--fd-paper-soft)}
.icon-btn:hover{color:var(--fd-paper);background:rgba(255,255,255,.04)}

/* Character index: a restrained contact sheet rather than a generic sidebar. */
.character-rail{
  width:calc(var(--portrait-rail) + env(safe-area-inset-left));
  padding:15px 9px 10px max(9px,env(safe-area-inset-left));
  border-right:1px solid rgba(226,215,188,.08);
  background:linear-gradient(90deg,rgba(5,15,19,.86),rgba(5,15,19,.48));
}
.character-list{gap:9px}
.portrait-tab{
  width:54px;
  height:54px;
  padding:3px;
  border:1px solid rgba(242,234,216,.14);
  background:rgba(4,12,16,.56);
}
.portrait-tab::after{inset:3px;border-color:rgba(242,234,216,.12)}
.portrait-tab img{filter:saturate(.54) brightness(.64);transition:filter .22s,transform .22s}
.portrait-tab:hover img{filter:saturate(.8) brightness(.84);transform:scale(1.04)}
.portrait-tab.active{
  border-color:var(--fd-gold-bright);
  box-shadow:0 0 0 1px rgba(242,216,154,.22),0 0 22px rgba(216,185,111,.2);
}
.portrait-tab.active img{filter:saturate(.88) brightness(.96)}
.rail-all{
  width:52px;
  min-height:44px;
  border:1px solid var(--fd-line);
  color:var(--fd-paper-soft);
  background:rgba(7,18,22,.62);
}

/* The relationship chapters sit on top of the portrait like a book index. */
.section-tabs{
  left:calc(var(--portrait-rail) + env(safe-area-inset-left) + 12px);
  top:calc(var(--top) + env(safe-area-inset-top) + 18px);
  bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 18px);
  width:var(--function-rail);
  gap:4px;
}
.section-tabs::before{
  content:"关系档案";
  position:absolute;
  left:10px;
  top:2px;
  color:rgba(242,234,216,.38);
  font:500 8px "DM Mono",monospace;
  letter-spacing:.24em;
}
.section-tabs button{
  min-height:48px;
  padding:0 10px 0 43px;
  border-left:2px solid transparent;
  color:rgba(242,234,216,.62);
  font-size:12px;
  letter-spacing:.08em;
  background:transparent;
}
.section-tabs button::before{
  left:13px;
  width:19px;
  height:19px;
  border-color:rgba(242,234,216,.38);
  border-radius:2px;
  transform:translateY(-50%) rotate(45deg);
  font-size:9px;
}
.section-tabs button:hover{color:var(--fd-paper);transform:none;background:rgba(255,255,255,.035)}
.section-tabs button.active{
  color:var(--fd-paper);
  border-left-color:var(--fd-gold);
  background:linear-gradient(90deg,rgba(216,185,111,.16),rgba(216,185,111,.025));
  box-shadow:none;
}
.section-tabs button.active::before{color:var(--fd-gold-bright);border-color:var(--fd-gold)}

/* Full-bleed portrait with editorial identity lockup. */
.character-card{
  left:calc(var(--portrait-rail) + var(--function-rail) + env(safe-area-inset-left) + 18px);
  width:calc(54vw - var(--portrait-rail) - var(--function-rail));
}
.character-card::before{
  left:4%;right:0;bottom:0;height:20%;
  background:radial-gradient(ellipse,rgba(114,207,197,.23),transparent 66%);
}
.character-card>img{
  inset:-4% -5% -2%;
  width:110%;height:108%;
  filter:saturate(.78) contrast(1.02) brightness(.92) drop-shadow(0 28px 42px rgba(0,0,0,.38));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 87%,transparent 100%),linear-gradient(0deg,transparent 0,#000 12%,#000 100%);
}
.card-shade{
  inset:auto -6% 0;height:48%;
  background:linear-gradient(0deg,rgba(5,14,18,.94),rgba(5,14,18,.24) 60%,transparent);
}
.world-mark{
  left:24px;top:22px;
  color:rgba(242,234,216,.62);
  font:500 10px "DM Mono",monospace;
  letter-spacing:.24em;
}
.world-mark::before{content:"WORLD / ";color:var(--fd-gold)}
.primary-resonance{
  left:24px;right:auto;top:58px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--fd-line);
  color:var(--fd-paper-soft);
  background:rgba(6,17,21,.72);
  backdrop-filter:blur(10px);
}
.primary-resonance.selected{border-color:rgba(216,185,111,.45);color:var(--fd-paper)}
.primary-resonance i{background:var(--fd-gold-bright)}
.card-identity{left:28px;right:22px;bottom:28px}
.card-identity small{font-size:10px;letter-spacing:.18em;color:var(--fd-gold-bright)}
.card-identity h1{
  margin:5px 0 6px;
  font-size:clamp(40px,4.5vw,64px);
  letter-spacing:.16em;
  color:#fffaf0;
  text-shadow:0 6px 28px rgba(0,0,0,.7);
}
.card-identity p{font-size:12px;color:rgba(242,234,216,.78)}

/* The archive sheet is calm, precise, and data-forward. */
.development-panel{
  width:var(--detail-width);
  border-left:1px solid rgba(226,215,188,.08);
  background:
    linear-gradient(90deg,rgba(7,17,21,.36),rgba(7,17,21,.88) 20%,rgba(5,14,18,.97)),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.018) 48px);
}
.development-panel::before{
  content:"";
  position:absolute;
  left:0;top:42px;bottom:42px;width:1px;
  background:linear-gradient(transparent,var(--fd-gold),var(--fd-mint),transparent);
  opacity:.38;
}
.tab-content{
  padding:44px clamp(30px,3.1vw,58px) 72px clamp(28px,3vw,54px);
  scrollbar-color:rgba(216,185,111,.35) transparent;
}
.tab-content>*{animation:archiveEnter .42s cubic-bezier(.2,.78,.25,1) both}
.page-head{gap:20px;padding-bottom:18px;border-bottom:1px solid var(--fd-line)}
.eyebrow{color:var(--fd-gold);font-size:9px;letter-spacing:.28em}
.page-head h2{
  margin-top:8px;
  font-size:clamp(30px,2.6vw,42px);
  letter-spacing:.1em;
  color:var(--fd-paper);
}
.page-subtitle{max-width:520px;margin-top:10px;font-size:12px;line-height:1.7;color:var(--fd-paper-soft)}
.status-badge{
  padding:8px 11px;
  border:1px solid var(--fd-line);
  border-radius:6px;
  color:var(--fd-paper-soft);
  background:rgba(255,255,255,.025);
}
.status-badge.ready{border-color:rgba(114,207,197,.38);color:#a9e4dd}

.attribute-level{margin-top:22px;padding-bottom:16px}
.attribute-level>span{font-size:11px;letter-spacing:.08em;color:var(--fd-paper-soft)}
.attribute-level strong{font-size:36px;color:var(--fd-paper)}
.attribute-level em{font-size:12px}
.level-track{height:3px;margin-top:14px;background:rgba(242,234,216,.14)}
.level-track>i{background:linear-gradient(90deg,var(--fd-mint),var(--fd-gold-bright));box-shadow:0 0 16px rgba(114,207,197,.28)}
.level-track .mark{width:10px;height:10px;border-color:rgba(242,234,216,.34);background:#0a181d}
.level-track .mark.next{border-color:var(--fd-mint);background:#0d2427}

.attribute-stats{
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--fd-line);
  background:rgba(255,255,255,.018);
}
.attribute-stats>div{
  min-height:58px;
  padding:11px 14px;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--fd-line);
  border-bottom:1px solid var(--fd-line);
}
.attribute-stats>div:nth-child(2n){border-right:0}
.attribute-stats>div:nth-last-child(-n+2){border-bottom:0}
.attribute-stats span{font-size:11px;letter-spacing:.06em;color:var(--fd-paper-faint)}
.attribute-stats b{margin-top:5px;font-size:17px;color:var(--fd-paper)}
.detail-link{margin:3px 0 8px;color:var(--fd-paper-soft)}
.breakthrough-strip{
  min-height:66px;
  padding:12px 15px;
  border:1px solid rgba(216,185,111,.3);
  background:linear-gradient(90deg,rgba(216,185,111,.1),rgba(216,185,111,.018));
}
.breakthrough-strip small{color:var(--fd-paper-faint)}
.breakthrough-strip strong{font-size:14px;color:var(--fd-paper)}
.growth-actions{gap:10px}
.plain-button,.gold-button{
  min-height:48px;
  padding:0 22px;
  border-radius:8px;
  font-size:14px;
  letter-spacing:.12em;
  transition:transform .16s,filter .16s,border-color .16s,background .16s;
}
.primary-resonance{min-width:46px;min-height:46px}
.plain-button{border-color:var(--fd-line-strong);background:rgba(7,17,21,.48);color:var(--fd-paper)}
.gold-button{
  border-color:#e7ca83;
  color:#172126;
  background:linear-gradient(135deg,#f0d998,#d7b66a);
  box-shadow:inset 0 1px rgba(255,255,255,.45),0 8px 24px rgba(0,0,0,.18);
}
.plain-button:hover,.gold-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.plain-button:active,.gold-button:active{transform:translateY(0);filter:brightness(.96)}

/* Secondary pages */
.stage-orbit{margin-top:18px;gap:8px 14px}
.stage-orbit::before{background:linear-gradient(transparent,rgba(114,207,197,.46),rgba(216,185,111,.44),transparent)}
.stage-sigil{
  min-height:68px;
  padding:8px 10px;
  border-color:var(--fd-line);
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.stage-sigil:hover{border-color:rgba(242,234,216,.38);background:rgba(255,255,255,.05)}
.stage-sigil i{border-color:var(--fd-line-strong);background:#0a191e}
.stage-sigil b{color:var(--fd-paper)}
.stage-sigil small{color:var(--fd-paper-faint)}
.stage-sigil.current{border-color:rgba(114,207,197,.55);background:linear-gradient(90deg,rgba(114,207,197,.12),transparent)}
.stage-sigil.done{border-color:rgba(216,185,111,.4)}
.stage-sigil.locked{opacity:.58}
.orbit-hint{padding-top:11px;color:var(--fd-paper-faint)}

.memory-loadout{margin-top:18px;gap:7px}
.memory-core{border-color:rgba(217,149,169,.5);background:radial-gradient(circle,rgba(217,149,169,.15),rgba(5,14,18,.86))}
.memory-slot,.talent-row,.ability-row{
  border-color:var(--fd-line);
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.memory-slot:hover,.talent-row:hover,.ability-row:hover{border-color:var(--fd-line-strong);background:rgba(255,255,255,.05)}
.memory-slot span strong,.talent-row span strong,.ability-row span strong{color:var(--fd-paper)}
.memory-slot span small,.talent-row span small,.ability-row span small{color:var(--fd-paper-faint)}
.memory-slot.locked,.talent-row.locked,.ability-row.locked{opacity:.56}
.talent-list,.ability-list{margin-top:18px;gap:7px}
.talent-note{padding:11px 2px;color:var(--fd-paper-faint)}

.base-rewards{margin-top:16px;border-color:var(--fd-line);background:rgba(114,207,197,.035)}
.base-rewards b{border-color:var(--fd-line);border-radius:5px;color:var(--fd-paper-soft)}
.reward-catalog{margin-top:12px}
.reward-pack{padding:12px 14px;border-color:var(--fd-line);background:rgba(255,255,255,.018)}
.reward-pack.current{background:linear-gradient(90deg,rgba(114,207,197,.1),transparent)}
.reward-pack li{border-color:rgba(226,215,188,.1);color:var(--fd-paper-soft)}

.flow-footer{
  height:calc(var(--bottom) + env(safe-area-inset-bottom));
  border-top:1px solid var(--fd-line);
  background:rgba(5,14,18,.93);
}
.flow-footer>button:first-child{border-right:1px solid var(--fd-line)}
.flow-footer span{color:var(--fd-paper-faint)}
.flow-footer b{color:var(--fd-gold-bright)}
.flow-footer p{color:var(--fd-paper-faint)}
.reset-button{border-color:var(--fd-line);color:var(--fd-paper-soft);background:rgba(255,255,255,.02)}

/* Dialogs are archival sheets, not floating generic cards. */
.scrim{background:rgba(1,7,9,.8);backdrop-filter:blur(8px)}
.modal{
  border:1px solid var(--fd-line-strong);
  border-radius:10px;
  background:
    linear-gradient(135deg,rgba(22,40,43,.99),rgba(7,18,22,.99)),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.018) 40px);
  box-shadow:0 32px 110px rgba(0,0,0,.64);
}
.modal::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--fd-gold),var(--fd-mint));
}
.modal h2{color:var(--fd-paper)}
.modal-intro{color:var(--fd-paper-soft)}
.choice-card,.route-node,.material-card,.amount-box.upgrade-range,.upgrade-preview>div{
  border-color:var(--fd-line);
  background:rgba(255,255,255,.025);
}
.choice-card:hover{border-color:var(--fd-line-strong);background:rgba(255,255,255,.05)}
.choice-card.selected{border-color:var(--fd-gold);background:rgba(216,185,111,.1)}
.toast{border-color:var(--fd-line-strong);background:rgba(7,18,22,.96)}

@keyframes archiveEnter{
  from{opacity:0}
  to{opacity:1}
}

@media(max-width:920px){
  :root{--top:48px;--bottom:42px;--portrait-rail:0px;--function-rail:86px;--detail-width:58vw}
  .topbar{gap:4px;padding-left:max(4px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .brand{min-width:92px;padding-right:8px;border-right:0}.brand small{display:none}.brand strong{font-size:12px}
  .resource-bar{gap:1px}.resource-bar button{padding:0 5px}.resource-bar span{display:none}
  .slot-state{display:none}
  .character-rail{display:none}
  .section-tabs{left:max(4px,env(safe-area-inset-left));top:calc(var(--top) + 2px);bottom:calc(var(--bottom) + 2px);width:var(--function-rail);gap:0}
  .section-tabs::before{display:none}
  .section-tabs button{min-height:44px;padding-left:32px;font-size:12px;letter-spacing:.02em}
  .section-tabs button::before{left:8px;width:17px;height:17px}
  .character-card{left:calc(var(--function-rail) + env(safe-area-inset-left));width:calc(42vw - var(--function-rail));min-width:0}
  #app:not([data-active-tab="growth"]) .character-card{width:calc(34vw - var(--function-rail))}
  .development-panel{width:var(--detail-width);min-width:0}
  #app:not([data-active-tab="growth"]) .development-panel{width:66vw}
  .tab-content{padding:12px 14px 54px}
  .page-head{padding-bottom:8px}.page-head h2{margin-top:2px;font-size:23px}.page-subtitle{display:none}
  .status-badge{padding:5px 7px}
  .attribute-level{margin-top:7px;padding-bottom:8px}.attribute-level strong{font-size:29px}.attribute-level .level-track{margin-top:7px}
  .attribute-stats>div{min-height:44px;padding:6px 8px}.attribute-stats span{font-size:10px}.attribute-stats b{margin-top:2px;font-size:13px}
  .detail-link{margin:0 0 4px}
  .breakthrough-strip{min-height:48px;padding:7px 9px}
  .attribute-page .growth-actions,.life-rank~.growth-actions{right:10px;width:calc(var(--detail-width) - 20px)}
  #app:not([data-active-tab="growth"]) .attribute-page .growth-actions,#app:not([data-active-tab="growth"]) .life-rank~.growth-actions{width:calc(66vw - 20px)}
  .plain-button,.gold-button{min-height:46px;font-size:13px}
  .card-identity{left:13px;bottom:10px}.card-identity h1{font-size:29px}.card-identity p{display:none}
  .world-mark{left:10px;top:10px;font-size:9px}.world-mark::before{display:none}
  .primary-resonance{left:auto;right:5px;top:7px;padding:0 8px}.primary-resonance span{display:none}
  .flow-footer p,.reset-button{display:none}.flow-footer>button:first-child{min-width:158px}
}

@media(max-width:760px){
  :root{--function-rail:82px;--detail-width:58vw}
  .section-tabs button{font-size:12px}.section-tabs button[data-tab="heartlife"]{font-size:11px}
  .character-card{width:calc(42vw - var(--function-rail))}
  #app:not([data-active-tab="growth"]) .character-card{width:calc(34vw - var(--function-rail))}
  .tab-content{padding-left:14px;padding-right:11px}
  .attribute-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-orbit{grid-template-columns:1fr;gap:5px}.stage-orbit::before{left:17px}
  .stage-sigil{min-height:54px;padding:5px 8px}
  .memory-loadout{padding-left:0;gap:5px}
  .memory-core{position:relative;left:auto;top:auto;width:100%;height:44px;padding:0 10px;display:flex;align-items:center;gap:10px;transform:none;border-radius:6px}
  .memory-core i{position:relative;inset:auto;width:24px;height:24px}.memory-core small{position:static;width:auto;margin-left:auto}
  .memory-slot{min-height:50px}
}

@media(max-height:420px){
  .page-head h2{font-size:21px}
  .attribute-level{height:64px;margin-top:4px;padding-bottom:5px}
  .attribute-level strong{font-size:26px}
  .attribute-stats{height:78px;grid-template-rows:repeat(2,38px)}
  .attribute-stats>div{min-height:0;padding:2px 7px;align-items:center;flex-direction:row;justify-content:space-between}
  .attribute-stats b{margin-top:0}
  .attribute-page>.detail-link,.attribute-page>.breakthrough-strip{display:none}
  .breakthrough-strip{min-height:44px}
  .stage-sigil{min-height:52px}
  .modal h2{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  .tab-content>*{animation:none}
  .portrait-tab img,.plain-button,.gold-button{transition:none}
}