.song-wizard-shell { padding:0; overflow:hidden; }
.song-wizard-header { padding:22px 26px 18px; border-bottom:1px solid rgba(0,0,0,.08); display:grid; gap:13px; }
.song-wizard-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.song-package-pill { display:inline-flex; align-items:center; width:fit-content; padding:7px 13px; border-radius:999px; background:rgba(255,122,0,.12); border:1px solid rgba(255,122,0,.3); color:#c95700; font-size:12px; font-weight:800; }
.story-nav-controls { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.story-nav-btn { appearance:none; border:1px solid rgba(0,0,0,.16); background:#fff; color:#333; border-radius:8px; min-height:34px; padding:6px 11px; font-size:12px; font-weight:800; line-height:1; cursor:pointer; transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease; }
.story-nav-btn:hover:not(:disabled) { border-color:rgba(255,122,0,.65); transform:translateY(-1px); }
.story-nav-btn:focus-visible, .story-choice-card:focus-visible { outline:3px solid rgba(255,122,0,.24); outline-offset:2px; }
.story-nav-btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.story-nav-primary { background:#ff7a00; border-color:#ff7a00; color:#fff; }
.story-nav-primary:hover:not(:disabled) { background:#e96f00; color:#fff; }
.story-nav-danger { color:#6b5555; }
.song-progress { width:100%; height:7px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; }
.song-progress-fill { height:100%; width:0; background:#ff7a00; transition:width .22s ease; }
.song-step-label { margin:0; color:#666; font-size:13px; font-weight:700; }
.story-topic-note { margin:-3px 0 0; color:#777; font-size:11px; line-height:1.4; }
.story-topic-map { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:5px; align-items:start; }
.story-topic-item { min-width:0; text-align:center; color:#999; }
.story-topic-number { display:flex; width:22px; height:22px; margin:0 auto 4px; border-radius:50%; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.14); background:#fff; font-size:10px; font-weight:900; }
.story-topic-label { display:block; font-size:9px; line-height:1.15; font-weight:750; white-space:normal; }
.story-topic-item.complete { color:#8a4a13; }
.story-topic-item.complete .story-topic-number { background:rgba(255,122,0,.12); border-color:rgba(255,122,0,.35); color:#c95700; }
.story-topic-item.active { color:#222; }
.story-topic-item.active .story-topic-number { background:#ff7a00; border-color:#ff7a00; color:#fff; box-shadow:0 0 0 3px rgba(255,122,0,.12); }
.story-complete-actions { justify-content:center; }
.story-question-panel, .story-complete { padding:30px 32px 32px; }
.story-question-panel h3, .story-complete h3 { margin:0 0 10px; color:#ff7a00; font-weight:900; }
.story-question-support { margin:0 0 18px; color:#777; font-size:13px; line-height:1.45; font-weight:400; }
.story-choice-grid { display:grid; gap:8px; }
.story-choice-grid--one { grid-template-columns:minmax(0,1fr); }
.story-choice-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-choice-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.story-choice-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.story-choice-grid--odd-tail > .story-choice-card:last-child { grid-column:1 / -1; width:calc(50% - 4px); justify-self:center; }
.story-choice-card { min-height:42px; padding:8px 11px; border-radius:9px; border:1px solid rgba(0,0,0,.14); background:#fff; color:#222; font-size:13px; font-weight:750; line-height:1.25; text-align:center; cursor:pointer; box-shadow:0 2px 7px rgba(0,0,0,.035); transition:transform .14s ease,border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease; }
.story-choice-card:hover { transform:translateY(-1px); border-color:rgba(255,122,0,.6); box-shadow:0 4px 10px rgba(0,0,0,.06); }
.story-choice-card.selected { background:#ff7a00; border-color:#ff7a00; color:#fff; box-shadow:0 4px 12px rgba(255,122,0,.18); }
.story-choice-card:disabled { opacity:.62; cursor:wait; transform:none; }
.story-freeform, .story-scalar { margin-top:16px; }
.story-freeform label, .story-scalar label { display:block; margin-bottom:7px; font-weight:800; }
.story-freeform .form-control, .story-scalar .form-control { width:100%; min-height:44px; border:1px solid rgba(0,0,0,.22); border-radius:9px; padding:10px 12px; box-shadow:none; }
.story-scalar textarea.form-control { resize:vertical; min-height:88px; }
.story-question-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:22px; }
.story-question-actions .btn { min-width:110px; }
#storyDnaAlert { margin:18px 32px 0; padding:12px 15px; border-radius:10px; background:rgba(255,80,80,.1); border:1px solid rgba(255,80,80,.3); color:#8a1f1f; font-weight:700; }
.story-complete-kicker { display:block; color:#777; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; margin-bottom:8px; }
.story-context-preview { margin:20px 0 0; padding:18px; border-radius:10px; background:#f7f7f7; border:1px solid rgba(0,0,0,.08); white-space:pre-wrap; font:13px/1.65 inherit; color:#444; }
@media (max-width:900px) { .story-choice-grid--four { grid-template-columns:repeat(2,minmax(0,1fr)); } .story-topic-map { grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:9px; } }
@media (max-width:640px) { .song-wizard-meta { align-items:flex-start; flex-direction:column; } .story-nav-controls { width:100%; justify-content:space-between; } .story-nav-btn { flex:1 1 auto; } }
@media (max-width:560px) { .song-wizard-header,.story-question-panel,.story-complete { padding:18px; } #storyDnaAlert { margin:16px 18px 0; } .story-choice-grid--one,.story-choice-grid--two,.story-choice-grid--three,.story-choice-grid--four { grid-template-columns:1fr; } .story-choice-grid--odd-tail > .story-choice-card:last-child { grid-column:auto; width:100%; } .story-choice-card { min-height:40px; padding:8px 10px; } .story-question-actions .btn { width:100%; } .story-topic-map { grid-template-columns:repeat(4,minmax(0,1fr)); } }