.extras-nav,.extras-choices { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.extras-nav { margin:var(--space-4) 0 var(--space-6); }
.extras-mobile-nav { display:none; }
.extras-mobile-nav summary { min-height:44px; font-weight:700; cursor:pointer; padding:var(--space-3) 0; }
.extras-mobile-nav nav { display:flex; flex-wrap:wrap; gap:var(--space-2); padding-bottom:var(--space-4); }
.extras-nav .chip,.extras-choices .chip { min-height:44px; }
.extras-hub { margin:var(--space-6) 0; padding:var(--space-6); display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-6); border-top:3px solid var(--color-primary); }
.extras-hub h2 { font-size:var(--text-lg); font-weight:800; margin:var(--space-2) 0; }
.extras-hub p { color:var(--color-text-muted); }
.extras-hub__links { display:flex; flex-wrap:wrap; gap:var(--space-2); align-content:center; }
.extras-hub__links .btn { white-space:normal; }
.extras-panel { padding:var(--space-6); margin-bottom:var(--space-4); min-width:0; }
.extras-panel h2 { font-size:var(--text-lg); font-weight:800; margin-bottom:var(--space-3); }
.extras-panel p { margin-bottom:var(--space-3); }
.extras-two,.extras-ice { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.extras-ice > :last-child { grid-column:1/-1; }
.extras-ice blockquote { border-left:3px solid var(--color-primary); padding:var(--space-3); margin:var(--space-4) 0; font-weight:700; }
.extras-list,.extras-checklist { list-style:none; margin:var(--space-3) 0; padding:0; }
.extras-list li,.extras-checklist li { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); }
.extras-list li > span,.extras-checklist li > div { flex:1; min-width:0; }
.extras-checklist strong,.extras-checklist li > div > span { display:block; }
.extras-checklist li > div > span { color:var(--color-text-muted); font-size:var(--text-sm); }
.extras-step svg { width:20px; height:20px; }
.extras-step.is-done { color:var(--color-primary); }
.extras-panel progress { width:100%; height:12px; accent-color:var(--color-primary); }
.extras-rules { padding-left:var(--space-5); margin-bottom:var(--space-4); }
.extras-rules li { padding:var(--space-2) 0; }
.extras-urgent { border-left:3px solid var(--color-accent,var(--color-primary)); }
.extras-bingo-panel { max-width:760px; }
.extras-bingo { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.extras-square { padding:var(--space-4); min-height:150px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); text-align:left; font-weight:700; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:var(--space-2); font-size:var(--text-sm); }
.extras-square svg { width:20px; height:20px; color:var(--color-primary); }
.extras-square small { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:400; }
.extras-square.is-done { background:var(--color-primary-highlight); border-color:var(--color-primary); }
.extras-square:hover { border-color:var(--color-primary); }
.extras-celebrate { padding:var(--space-4) 0 0; font-weight:700; color:var(--color-primary); }
.extras-report { padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); }
.extras-report > div > span { display:block; color:var(--color-text-muted); font-size:var(--text-sm); margin-top:var(--space-1); }
.extras-report > .badge { margin:var(--space-3) 0; }
.extras-report ul { padding-left:var(--space-5); font-size:var(--text-sm); color:var(--color-text-muted); }
.extras-notes { display:grid; gap:var(--space-4); }
.extras-note { border:1px solid var(--color-border); border-left:3px solid var(--color-primary); padding:var(--space-5); border-radius:var(--radius-md); }
.extras-note h3 { font-size:var(--text-lg); font-weight:800; margin:var(--space-2) 0 var(--space-3); }
.extras-note__text { white-space:pre-wrap; overflow-wrap:anywhere; }
.extras-panel .btn { min-height:44px; }
.extras-panel .section-head { gap:var(--space-3); flex-wrap:wrap; }
@media(max-width:700px) {
 .extras-nav { display:none; }
 .extras-mobile-nav { display:block; margin-bottom:var(--space-4); }
 .extras-mobile-nav .chip { min-height:44px; }
 .extras-hub,.extras-two,.extras-ice { grid-template-columns:minmax(0,1fr); }
 .extras-hub,.extras-panel { padding:var(--space-4); }
 .extras-bingo { gap:var(--space-2); }
 .extras-square { min-height:150px; padding:var(--space-2); }
 .extras-checklist li { flex-wrap:wrap; }
 .extras-checklist .btn { margin-left:var(--space-8); }
}
.extras-nav,.extras-panel,.extras-hub {
 --text-xs:clamp(.75rem,.72rem + .12vw,.8125rem);
 --text-sm:clamp(.875rem,.84rem + .14vw,.9375rem);
 --text-lg:clamp(1.125rem,1.08rem + .2vw,1.25rem);
}
