:root{--bg:#f4f8fd;--surface:#fff;--soft:#eef4ff;--text:#172033;--muted:#65708a;--border:#dce5f2;--accent:#2f67e8;--accent2:#1e4fc4;--hero1:#102c69;--hero2:#2f67e8;--heroText:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}.wrap{width:min(calc(100% - 32px),1220px);margin:auto}.hero{padding:68px 0 52px;background:linear-gradient(135deg,var(--hero1),var(--hero2));color:var(--heroText)}.hero-grid{display:grid;grid-template-columns:1.6fr .7fr;gap:28px;align-items:end}.hero h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1;margin:.4rem 0}.eyebrow{font-weight:900;letter-spacing:.12em;font-size:.78rem}.actions{display:flex;gap:10px;margin-top:22px}button{font:inherit;cursor:pointer}.actions button,.nav button{border:0;border-radius:999px;padding:11px 18px;font-weight:900}.ghost{background:transparent;color:#fff;border:1px solid #ffffff55!important}.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.themes button,.pills button,.candidate-pills button,.stage-tabs button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 14px;font-weight:800}.themes button.active,.pills button.active,.candidate-pills button.active,.stage-tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}main section{padding:42px 0}.soft{background:var(--soft)}.pills,.candidate-pills,.stage-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px}.subtopics{display:grid;grid-template-columns:repeat(9,minmax(135px,1fr));gap:10px;overflow-x:auto;margin:10px 0 20px}.subtopics button{min-width:135px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:16px;padding:14px;text-align:left}.subtopics button.active{background:var(--soft);border-color:var(--accent)}.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 24px 60px #17203318;overflow:hidden}.head{display:flex;justify-content:space-between;gap:14px;padding:22px 24px 0}.head h2{margin:4px 0}.head span,.metrics span,.highlight span,.candidate-head span{font-size:.75rem;font-weight:900;color:var(--muted);letter-spacing:.08em}.body{padding:18px 24px 24px}.candidate-head{display:flex;justify-content:space-between;align-items:center}.candidate-head h3{margin:3px 0 10px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.metrics>div,.highlight{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--soft)}.metrics strong{display:block;color:var(--accent2)}.highlight p{margin:0;font-weight:800}.nav{display:flex;justify-content:space-between;margin-top:20px}.dialogue{display:grid;gap:10px;padding:20px}.line{max-width:85%;padding:11px 13px;border:1px solid var(--border);border-radius:15px;background:var(--soft)}.line.child{margin-left:auto}.line.active{outline:2px solid var(--accent);outline-offset:2px}.line span{display:block;font-size:.72rem;font-weight:900;color:var(--muted)}.line p{margin:0;font-weight:700}@media(max-width:900px){.hero-grid,.grid{grid-template-columns:1fr}}@media(max-width:640px){.metrics{grid-template-columns:1fr}}@media print{.themes,.actions,.candidate-pills{display:none!important}.hero{background:#fff!important;color:#111!important;padding:0 0 15px}.soft{background:#fff!important}.card{box-shadow:none!important}}
/* V6 active hierarchy and active-conversation refinements */
#topicTabs + h3,
#subtopicTabs + h3{
margin-top:22px
}
#dialogue .line.active{
background:var(--surface);
border-color:var(--accent);
box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)
}
#finalDialogue .line{
max-width:72%
}
#finalDialogue .line.child{
margin-left:auto
}

/* V7 full active conversation summary */
#finalDialogue{
display:grid;
gap:10px
}
#finalDialogue .stage-label{
margin:14px 0 2px;
padding:8px 12px;
border-radius:10px;
background:var(--soft);
border:1px solid var(--border);
color:var(--muted);
font-size:.78rem;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase
}
#finalDialogue .stage-label:first-child{
margin-top:0
}
#finalDialogue .stage-label.active-stage-label{
background:var(--accent);
color:#fff;
border-color:var(--accent)
}
#finalDialogue .line.active{
outline:2px solid var(--accent);
outline-offset:2px;
background:var(--surface)
}

/* V8 — Topic and Conversation Stage use the same card-pill language as Sub Topic */
.pills,
.stage-tabs{
display:grid;
grid-template-columns:repeat(9,minmax(135px,1fr));
gap:10px;
overflow-x:auto;
padding:0 0 10px
}

.pills button,
.stage-tabs button{
min-width:135px;
min-height:62px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
border-radius:16px;
padding:14px;
text-align:left;
font-weight:800;
white-space:normal;
line-height:1.3;
transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}

.pills button:hover,
.stage-tabs button:hover{
transform:translateY(-2px);
border-color:var(--accent)
}

.pills button.active,
.stage-tabs button.active{
background:var(--soft);
color:var(--text);
border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent)
}

/* Preserve compact pill behavior only for Candidate Structures */
.candidate-pills{
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:10px
}

.candidate-pills button{
min-width:auto;
min-height:auto;
border-radius:999px;
padding:9px 14px;
text-align:center;
white-space:nowrap
}

.candidate-pills button.active{
background:var(--accent);
color:#fff;
border-color:var(--accent);
box-shadow:none
}

@media(max-width:900px){
.pills,
.stage-tabs{
grid-template-columns:repeat(9,minmax(150px,1fr))
}
}

/* V9 — Mood layer, same primary navigation language */
.mood-tabs{
display:grid;
grid-template-columns:repeat(9,minmax(135px,1fr));
gap:10px;
overflow-x:auto;
padding:0 0 10px
}
.mood-tabs button{
min-width:135px;
min-height:62px;
display:flex;
align-items:center;
gap:9px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
border-radius:16px;
padding:14px;
text-align:left;
font-weight:800;
white-space:normal;
line-height:1.3;
transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.mood-tabs button span{
font-size:1.15rem
}
.mood-tabs button:hover{
transform:translateY(-2px);
border-color:var(--accent)
}
.mood-tabs button.active{
background:var(--soft);
color:var(--text);
border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent)
}
@media(max-width:900px){
.mood-tabs{
grid-template-columns:repeat(9,minmax(150px,1fr))
}
}

/* V10 — Connected all-topic summary */
#finalDialogue .summary-topic{
margin:24px 0 10px;
padding:12px 14px;
border-radius:14px;
background:var(--accent);
color:#fff;
font-weight:900;
font-size:1rem;
letter-spacing:.02em
}
#finalDialogue .summary-topic:first-child{
margin-top:0
}
#finalDialogue .summary-subtopic{
margin:16px 0 8px;
padding:9px 12px;
border-radius:12px;
background:var(--surface);
border:1px solid var(--border);
color:var(--text);
font-weight:900
}
#finalDialogue .summary-transition{
margin:18px 0;
padding:10px 12px;
border-left:4px solid var(--accent);
background:var(--soft);
color:var(--accent2);
font-weight:900
}
#finalDialogue .stage-label{
margin-top:10px
}

/* V11 — Global conversation opening and closing */
#finalDialogue .global-stage-label{
margin-top:22px;
background:var(--accent2);
border-color:var(--accent2);
color:#fff
}
#finalDialogue .global-stage-label:first-child{
margin-top:0
}
#finalDialogue .global-stage-label.active-stage-label{
background:var(--accent);
border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)
}

/* V12 layout refinements */
.active-conversation-path{
margin:6px 0 0;
color:var(--muted);
font-size:.9rem;
font-weight:700
}

.active-mood-toolbar{
display:grid;
grid-template-columns:auto 1fr auto;
gap:10px;
align-items:center;
padding:14px 20px 0
}

.mood-nav-btn{
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
border-radius:999px;
padding:9px 14px;
font-weight:900;
cursor:pointer;
transition:.2s
}

.mood-nav-btn:hover{
border-color:var(--accent);
transform:translateY(-1px)
}

.active-mood-state{
text-align:center;
padding:8px 12px;
border-radius:14px;
background:var(--soft);
border:1px solid var(--border)
}

.active-mood-state span,
.active-mood-state strong{
display:block
}

.active-mood-state span{
color:var(--muted);
font-size:.72rem;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase
}

.active-mood-state strong{
color:var(--accent2)
}

/* Candidate Structure now lives in the main hierarchy area */
#structureGrid.candidate-pills{
margin-bottom:18px
}

@media(max-width:640px){
.active-mood-toolbar{
grid-template-columns:1fr 1fr
}
.active-mood-state{
grid-column:1/-1;
grid-row:1
}
}

/* V13 — simplified trainer */
#trainer .wrap{
display:block
}
#trainer .card{
max-width:900px;
margin-inline:auto
}

/* V14 selected-topic summary */
#finalDialogue .active-summary-subtopic{
border-color:var(--accent);
background:var(--soft);
box-shadow:inset 0 0 0 1px var(--accent)
}
#finalDialogue .summary-subtopic-transition{
margin:12px 0;
padding:8px 12px;
border-left:3px solid var(--accent);
background:var(--soft);
color:var(--accent2);
font-size:.82rem;
font-weight:900
}

/* V15 — Candidate Structure styled exactly like Sub Topic navigation */
#structureGrid.candidate-pills{
display:grid;
grid-template-columns:repeat(9,minmax(135px,1fr));
gap:10px;
overflow-x:auto;
padding:0 0 10px;
margin-bottom:18px
}

#structureGrid.candidate-pills button{
min-width:135px;
min-height:62px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
border-radius:16px;
padding:14px;
text-align:left;
font-weight:800;
white-space:normal;
line-height:1.3;
box-shadow:none;
transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}

#structureGrid.candidate-pills button:hover{
transform:translateY(-2px);
border-color:var(--accent)
}

#structureGrid.candidate-pills button.active{
background:var(--soft);
color:var(--text);
border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent)
}

@media(max-width:900px){
#structureGrid.candidate-pills{
grid-template-columns:repeat(9,minmax(150px,1fr))
}
}