.app-shell{min-height:100dvh}
.topbar{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--topbar-h);display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(260px,1fr);align-items:center;gap:20px;padding:0 22px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(8,7,5,.92),rgba(12,10,7,.74) 48%,rgba(8,7,5,.9));backdrop-filter:blur(18px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid var(--line-strong);transform:rotate(45deg);color:var(--gold)}
.brand-mark span{transform:rotate(-45deg);font-family:Georgia,serif;font-size:13px}
.brand-copy{min-width:0}
.brand-copy strong{display:block;overflow:hidden;font-family:Georgia,"Noto Serif SC",serif;font-size:18px;white-space:nowrap;text-overflow:ellipsis}
.brand-copy small{display:block;color:var(--muted);font-size:12px}
.build-status{text-align:center;min-width:0}
.build-status strong{display:block;overflow:hidden;font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.build-status span{display:block;color:var(--gold);font-size:13px}
.top-actions{display:flex;justify-content:flex-end;gap:6px}
.workspace{position:fixed;inset:var(--topbar-h) 0 var(--actionbar-h);display:grid;grid-template-columns:var(--step-w) minmax(0,1fr) var(--detail-w);gap:0;overflow:hidden}
.step-rail{padding:24px 14px;border-right:1px solid var(--line);background:linear-gradient(90deg,rgba(8,7,5,.9),rgba(8,7,5,.48));backdrop-filter:blur(10px);overflow:auto}
.step-rail h2{margin:0 10px 18px;font-size:17px}
.step-list{display:grid;gap:3px}
.step-link{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;min-height:48px;padding:6px 8px;border:0;border-radius:9px;background:transparent;text-align:left;color:var(--muted)}
.step-link::after{content:"";position:absolute;left:22px;top:42px;width:1px;height:12px;background:var(--line)}
.step-link:last-child::after{display:none}
.step-link:hover{color:var(--text);background:var(--surface-soft)}
.step-link.active{color:var(--text);background:linear-gradient(90deg,rgba(143,52,48,.28),transparent)}
.step-index{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-size:12px}
.step-link.active .step-index{border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 3px rgba(223,189,114,.08)}
.step-copy strong{display:block;font-size:14px}.step-copy small{display:block;color:var(--muted);font-size:12px}
.decision-pane{min-width:0;padding:30px 32px 24px;overflow:hidden;background:linear-gradient(90deg,rgba(13,11,8,.62),rgba(13,11,8,.40));backdrop-filter:blur(7px)}
.decision-view{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px}
.view-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;padding-bottom:18px;border-bottom:1px solid var(--line)}
.view-heading h1{margin:4px 0 4px;font-size:clamp(25px,2vw,31px);line-height:1.18}
.view-heading p{margin:0;color:var(--text-soft);font-size:15px}
.view-progress{flex:0 0 auto;color:var(--gold);font-weight:700}
.decision-content{min-height:0;overflow:auto;scrollbar-gutter:stable;padding-right:4px}
.detail-pane{min-width:0;padding:28px 24px;border-left:1px solid var(--line);background:linear-gradient(90deg,rgba(10,8,6,.66),rgba(9,8,6,.88));backdrop-filter:blur(10px);overflow:auto}
.detail-pane h2{font-size:24px}.detail-pane h3{font-size:16px}.detail-pane p{color:var(--text-soft)}
.detail-empty{display:grid;align-content:center;height:100%;color:var(--muted);text-align:center}
.actionbar{position:fixed;inset:auto 0 0 0;z-index:31;height:var(--actionbar-h);display:grid;grid-template-columns:var(--step-w) minmax(0,1fr) var(--detail-w);border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(8,7,5,.94),rgba(10,8,6,.82),rgba(8,7,5,.94));backdrop-filter:blur(18px)}
.actionbar-left,.actionbar-center,.actionbar-right{display:flex;align-items:center;padding:0 20px}
.actionbar-center{justify-content:space-between;border-left:1px solid transparent;border-right:1px solid var(--line)}
.action-hint{color:var(--muted);font-size:13px}
.mobile-step-trigger,.mobile-character-button{display:none}

/* M3 visual rhythm */
.decision-pane::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 0,rgba(223,189,114,.055),transparent 32%)}
.decision-pane{position:relative}.decision-pane>*{position:relative;z-index:1}
.view-heading{min-height:92px}.detail-pane{box-shadow:inset 1px 0 rgba(255,255,255,.018)}
.live-build-summary{display:grid;gap:12px;padding-bottom:18px}
.live-build-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.live-build-head h2{margin:2px 0 3px;font-size:22px}.live-build-head p{margin:0;color:var(--muted);font-size:13px}
.live-level{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold-light);font:25px Georgia,serif;background:rgba(223,189,114,.06)}
.live-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.live-score-grid div,.live-combat-grid div{padding:8px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)}
.live-score-grid span,.live-combat-grid span{display:block;color:var(--muted);font-size:11px}.live-score-grid b,.live-combat-grid b{display:block;margin-top:2px;color:var(--gold-light);font-size:17px}
.live-combat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.live-summary-block{padding-top:3px}.live-summary-block>span{display:block;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.06em}.live-summary-block p{margin:5px 0 0;font-size:13px;line-height:1.55}
.live-issue-list{display:grid;gap:5px;margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.45}
.live-character-button{width:100%}
.current-option-detail{padding-top:22px;border-top:1px solid var(--line)}
.detail-divider{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.1em}.detail-divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* M6: current option detail is visible without scrolling the entire sidebar */
.detail-pane{padding:0;overflow:hidden}
.detail-pane-layout{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.compact-build-summary{display:grid;gap:10px;padding:18px 20px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(12,10,8,.92),rgba(12,10,8,.72));backdrop-filter:blur(14px)}
.compact-build-identity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.compact-build-identity strong,.compact-build-identity small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.compact-build-identity strong{margin-top:2px;font:19px Georgia,"Noto Serif SC",serif}
.compact-build-identity small{margin-top:2px;color:var(--muted);font-size:12px}
.compact-level{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold-light);font:21px Georgia,serif;background:rgba(223,189,114,.055)}
.compact-combat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.compact-combat span{display:grid;gap:2px;padding:6px 4px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;text-align:center}
.compact-combat b{color:var(--gold-light);font-size:14px}
.compact-build-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}
.text-button{min-height:30px;padding:4px 0;border:0;background:transparent;color:var(--gold);font-weight:700}
.text-button:hover,.text-button:focus-visible{text-decoration:underline}
.current-option-detail{min-height:0;padding:20px 20px 24px;overflow:auto;scrollbar-gutter:stable;background:linear-gradient(180deg,rgba(8,7,5,.48),rgba(8,7,5,.68))}
.current-option-detail.is-empty{display:grid;place-items:center}
.current-option-detail .detail-divider{position:sticky;top:-20px;z-index:3;margin:-20px -20px 18px;padding:18px 20px 12px;background:linear-gradient(180deg,rgba(11,9,7,.98),rgba(11,9,7,.9));backdrop-filter:blur(12px)}
.full-build-disclosure{border-top:1px solid var(--line);background:rgba(8,7,5,.9)}
.full-build-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 20px;cursor:pointer;list-style:none;color:var(--gold);font-size:12px;font-weight:700}
.full-build-disclosure>summary::-webkit-details-marker{display:none}
.full-build-disclosure>summary::after{content:"＋";font-size:16px}
.full-build-disclosure[open]>summary::after{content:"−"}
.full-build-disclosure>summary b{color:var(--muted);font-size:10px;font-weight:500}
.full-build-content{max-height:min(52dvh,520px);padding:18px 20px 26px;overflow:auto;border-top:1px solid var(--line)}
.full-build-content .live-build-summary{padding-bottom:0}
.full-build-content .live-character-button{display:none}
@media(max-width:1439px){
  .detail-pane{padding:0}
  .detail-pane-layout{min-height:100%}
}


/* M7: left workflow / center decision / right final effect */
.decision-pane{padding:24px 22px 20px}
.decision-stage{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.decision-stage.with-inspector{grid-template-columns:minmax(0,1fr) minmax(310px,34%)}
.decision-primary{min-width:0;min-height:0;overflow:hidden}
.decision-primary>.decision-view{height:100%}
.decision-inspector{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(12,10,8,.78),rgba(8,7,5,.62));box-shadow:inset 3px 0 rgba(223,189,114,.12)}
.decision-inspector-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;border-bottom:1px solid var(--line);color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.08em}
.decision-inspector-head small{color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0}
.decision-inspector-body{min-height:0;padding:18px 18px 24px;overflow:auto;scrollbar-gutter:stable}
.decision-inspector-body h2{font-size:23px}.decision-inspector-body h3{font-size:15px}.decision-inspector-body p{color:var(--text-soft);line-height:1.65}
.effect-pane-layout{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.effect-pane-scroll{min-height:0;padding:18px 20px 22px;overflow:auto;scrollbar-gutter:stable;background:linear-gradient(180deg,rgba(8,7,5,.42),rgba(8,7,5,.68))}
.decision-effect-card{display:grid;gap:14px}
.decision-effect-card h2{margin:0;font-size:22px}.effect-subtitle{margin:-6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.effect-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.effect-metric-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.effect-metric{padding:10px 9px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)}
.effect-metric span{display:block;color:var(--muted);font-size:11px}.effect-metric b{display:block;margin-top:3px;color:var(--gold-light);font-size:16px}
.effect-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.effect-score-grid div{padding:9px 7px;border-bottom:1px solid var(--line);text-align:center;background:rgba(255,255,255,.018)}
.effect-score-grid span{display:block;color:var(--muted);font-size:11px}.effect-score-grid b{display:block;margin-top:2px;color:var(--gold-light);font-size:18px}
.effect-route-list{display:grid;gap:5px}.effect-route-list div,.effect-result-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.effect-route-list span,.effect-result-line span{color:var(--muted);font-size:12px}.effect-route-list b,.effect-result-line b{font-size:14px}
.effect-tag-list{display:flex;flex-wrap:wrap;gap:6px}.effect-tag-list span{padding:6px 8px;border:1px solid var(--line);border-radius:8px;color:var(--text-soft);font-size:12px;background:rgba(223,189,114,.04)}
.effect-empty{margin:0;color:var(--muted);font-size:13px}
.effect-status{padding:10px 12px;border-left:2px solid var(--gold);background:rgba(223,189,114,.045);color:var(--text-soft);font-size:12px}
.effect-status.has-issues{border-left-color:var(--warning);color:var(--warning)}.effect-status.complete{border-left-color:var(--green);color:var(--green)}
.effect-pane .live-selection-group{padding-top:4px}.effect-pane .live-icon-row{gap:6px}.effect-pane .summary-icon{width:38px;height:38px}
.effect-build-disclosure{background:rgba(8,7,5,.92)}

/* M10 app height and mobile result trigger */
.app-shell{height:var(--app-height,100dvh);min-height:0}
.mobile-result-summary{display:none}