.guided-journey {
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgba(58, 228, 224, .2);
  border-radius: 12px;
  background: linear-gradient(115deg, rgba(58, 228, 224, .075), rgba(154, 122, 255, .09));
}
.guided-journey-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.guided-journey-head .eyebrow { margin-bottom: 5px; }
.guided-journey h3 { margin: 0; font-size: 16px; letter-spacing: -.45px; }
.guided-step-count { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(58, 228, 224, .25); border-radius: 999px; color: var(--cyan); background: rgba(4, 8, 25, .34); font-size: 10px; font-weight: 700; }
.guided-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 17px 0 11px; padding: 0; list-style: none; }
.guided-steps::before { content: ''; position: absolute; top: 17px; left: 16%; right: 16%; height: 1px; background: rgba(170, 189, 255, .18); }
.guided-step { position: relative; z-index: 1; min-width: 0; display: grid; justify-items: center; gap: 6px; color: var(--muted-2); text-align: center; font-size: 10px; line-height: 1.4; }
.guided-step > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: #111832; color: var(--muted); font-size: 12px; font-weight: 750; }
.guided-step.active { color: #e8efff; }
.guided-step.active > span { border-color: var(--cyan); color: #0e2034; background: var(--cyan); box-shadow: 0 0 0 5px rgba(58, 228, 224, .11), 0 0 20px rgba(58, 228, 224, .28); }
.guided-step.done { color: #c9f66e; }
.guided-step.done > span { border-color: rgba(201, 246, 110, .48); color: #1c302d; background: var(--lime); }
.guided-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.guided-source-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px; border: 1px solid rgba(58, 228, 224, .18); border-radius: 9px; background: rgba(4, 8, 25, .28); }
.guided-source-preview img { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; background: #101735; }
.guided-source-preview span { display: grid; gap: 3px; min-width: 0; }
.guided-source-preview b { color: #eaf2ff; font-size: 11px; }
.guided-source-preview small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.guided-download { display: inline-flex; align-items: center; margin-top: 12px; padding: 9px 11px; border: 1px solid rgba(201, 246, 110, .42); border-radius: 8px; color: var(--lime); background: rgba(201, 246, 110, .07); font-size: 11px; font-weight: 700; }
.guided-download:hover { background: rgba(201, 246, 110, .13); }
.beginner-side-card { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 9px; border: 1px solid rgba(58, 228, 224, .25); border-radius: 11px; background: linear-gradient(95deg, rgba(58, 228, 224, .11), rgba(154, 122, 255, .1)); }
.beginner-side-card > div { display: grid; gap: 3px; min-width: 0; }
.beginner-side-card b { font-size: 13px; }
.beginner-side-card small { color: var(--muted); font-size: 10px; }
.beginner-side-card i { color: var(--cyan); font-size: 9px; font-style: normal; }
.advanced-mode-card { margin-top: 4px; }
.advanced-mode-card i { opacity: 1; }
.comic-mode-card { margin-top: 7px; border-color: rgba(255, 132, 184, .18); background: linear-gradient(96deg, rgba(255, 132, 184, .08), rgba(154, 122, 255, .1)); }
.comic-mode-card:hover, .comic-mode-card.active { border-color: rgba(255, 132, 184, .42); background: linear-gradient(96deg, rgba(255, 132, 184, .15), rgba(154, 122, 255, .16)); }
.comic-mode-card .prompt-icon { color: var(--pink); }
.comic-entry-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: 22px; padding: 30px; overflow: hidden; border: 1px solid rgba(255, 132, 184, .26); border-radius: 16px; background: radial-gradient(circle at 87% 12%, rgba(255, 132, 184, .16), transparent 26%), linear-gradient(118deg, rgba(57, 20, 63, .68), rgba(23, 31, 79, .65) 60%, rgba(8, 42, 61, .52)); }
.comic-entry-copy h2 { margin: 0; font-size: 27px; letter-spacing: -1.15px; }
.comic-entry-copy > p:not(.eyebrow) { max-width: 700px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.comic-entry-points { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.comic-entry-points li { padding: 5px 8px; border: 1px solid rgba(255, 178, 209, .2); border-radius: 999px; color: #f0c8e1; background: rgba(255, 255, 255, .04); font-size: 10px; }
.comic-entry-action { display: grid; justify-items: end; gap: 10px; min-width: 175px; }
.comic-entry-action > span { color: #f2b5d6; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.comic-entry-button { display: inline-flex; align-items: center; gap: 12px; border: 0; background: linear-gradient(105deg, #f4cae1, #cabaff); color: #231a3e; }
.comic-entry-button b { color: #6d579b; font-size: 16px; }
.comic-project { margin-top: 20px; padding: 17px; border: 1px solid rgba(117, 172, 255, .3); border-radius: 12px; background: linear-gradient(115deg, rgba(52, 111, 184, .12), rgba(126, 73, 159, .1)); }
.comic-project-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }.comic-project-head .eyebrow { margin-bottom: 5px; }.comic-project-head h3 { margin: 0; font-size: 16px; letter-spacing: -.45px; }.comic-project-head button { flex: 0 0 auto; border: 1px solid rgba(135, 190, 255, .37); border-radius: 8px; padding: 8px 10px; background: rgba(95, 150, 227, .11); color: #d9e9ff; cursor: pointer; font-size: 10px; font-weight: 750; }.comic-project-head button:hover { border-color: rgba(155, 208, 255, .72); background: rgba(95, 150, 227, .2); }
.comic-project-fields { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr); gap: 11px; margin-top: 14px; }.comic-project-fields .field { display: grid; gap: 6px; min-width: 0; }.comic-project-fields .field span { color: #dce6ff; font-size: 10px; font-weight: 700; }.comic-project-fields input, .comic-project-fields textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 10px; outline: none; color: var(--text); background: rgba(3, 7, 21, .47); font: inherit; font-size: 11px; line-height: 1.5; }.comic-project-fields textarea { min-height: 54px; resize: vertical; }.comic-project-fields input:focus, .comic-project-fields textarea:focus { border-color: #86c5ff; box-shadow: 0 0 0 3px rgba(119, 188, 255, .1); }
.comic-project-scenes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: #dce5ff; font-size: 11px; }.comic-project-scenes-head span { color: var(--muted); font-size: 10px; }.comic-scene-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px 1px 3px; scrollbar-width: thin; }.comic-scene-tab { min-width: 126px; display: grid; gap: 4px; padding: 10px; text-align: left; color: #d9e2fc; border: 1px solid rgba(176, 194, 255, .2); border-radius: 9px; background: rgba(8, 13, 35, .42); cursor: pointer; transition: .18s; }.comic-scene-tab:hover { border-color: rgba(139, 191, 255, .5); background: rgba(38, 61, 111, .35); }.comic-scene-tab.active { border-color: rgba(130, 214, 255, .75); background: linear-gradient(135deg, rgba(46, 139, 191, .27), rgba(107, 70, 169, .24)); box-shadow: inset 0 0 0 1px rgba(130, 214, 255, .12); }.comic-scene-tab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.comic-scene-tab small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }.comic-scene-tab i { color: var(--cyan); font-style: normal; font-size: 9px; }.comic-scene-tab[data-progress="complete"] i { color: #8ceec3; }.comic-scene-tab[data-progress="keyframe-running"] i, .comic-scene-tab[data-progress="video-running"] i { color: #ffd38a; }.comic-project-note { margin: 11px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.55; }
.comic-brief { margin-top: 20px; padding: 17px; border: 1px solid rgba(255, 132, 184, .25); border-radius: 12px; background: linear-gradient(115deg, rgba(255, 132, 184, .075), rgba(154, 122, 255, .09)); }
.comic-brief-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.comic-brief-head .eyebrow { margin-bottom: 5px; }
.comic-brief-head h3 { margin: 0; font-size: 16px; letter-spacing: -.45px; }
.comic-brief-head button { flex: 0 0 auto; border: 1px solid rgba(185, 204, 255, .22); border-radius: 8px; padding: 7px 9px; background: rgba(4, 8, 25, .25); color: var(--muted); cursor: pointer; font-size: 10px; }
.comic-brief-head button:hover { color: var(--text); border-color: rgba(58, 228, 224, .42); }
.comic-brief-note { margin: 10px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.58; }
.comic-brief-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.comic-brief-fields .field { display: grid; gap: 6px; min-width: 0; }
.comic-brief-fields .field span { color: #dce6ff; font-size: 10px; font-weight: 700; }
.comic-brief-fields .field span b { margin-left: 4px; color: var(--pink); font-size: 9px; font-weight: 700; }
.comic-brief-fields textarea { min-height: 84px; resize: vertical; }
.comic-brief-fields textarea, .comic-brief-fields select { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 10px; outline: none; color: var(--text); background: rgba(3, 7, 21, .47); font: inherit; font-size: 11px; line-height: 1.5; }
.comic-brief-fields textarea:focus, .comic-brief-fields select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 132, 184, .1); }
.comic-brief-fields textarea:disabled, .comic-brief-fields select:disabled { cursor: not-allowed; opacity: .57; }
.comic-lock-note { margin: 11px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.5; }
body.comic-guided-mode .guided-journey { border-color: rgba(255, 132, 184, .28); background: linear-gradient(115deg, rgba(255, 132, 184, .08), rgba(154, 122, 255, .11)); }
body.comic-guided-mode .guided-step.active > span { border-color: var(--pink); background: var(--pink); box-shadow: 0 0 0 5px rgba(255, 132, 184, .11), 0 0 20px rgba(255, 132, 184, .28); }
body.comic-guided-mode .guided-step-count { border-color: rgba(255, 132, 184, .36); color: #ffc6e0; }
body.guided-mode .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.guided-mode .control-grid .model-control { display: none; }
body.guided-mode .reference-section.is-guided-video { display: none; }
body.guided-mode .prompt-label { margin-top: 21px; }
body.guided-mode .generate-button.is-complete { grid-template-columns: 26px 1fr; color: #1d352a; background: linear-gradient(100deg, #ddf7a8, #c7f5dd); }
body.guided-mode .generate-button.is-busy { cursor: wait; }
.comic-storyboard-planner { margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 177, 209, .24); border-radius: 10px; background: linear-gradient(120deg, rgba(83, 36, 99, .26), rgba(36, 66, 117, .19)); }
.comic-storyboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.comic-storyboard-head .eyebrow { margin-bottom: 4px; }.comic-storyboard-head h4 { margin: 0; color: #f1e7ff; font-size: 13px; letter-spacing: -.2px; }.comic-storyboard-head > span { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(255, 178, 209, .22); border-radius: 999px; color: #f2b7d6; background: rgba(255, 255, 255, .035); font-size: 9px; }
.comic-storyboard-fields { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(160px, .45fr); gap: 11px; margin-top: 11px; }.comic-storyboard-fields .field { display: grid; gap: 6px; min-width: 0; }.comic-storyboard-fields .field span { color: #dce6ff; font-size: 10px; font-weight: 700; }.comic-storyboard-fields .field span b { margin-left: 4px; color: var(--pink); font-size: 9px; }.comic-storyboard-fields textarea, .comic-storyboard-fields select { width: 100%; box-sizing: border-box; border: 1px solid rgba(198, 168, 255, .34); border-radius: 8px; padding: 9px 10px; outline: none; color: var(--text); background: rgba(3, 7, 21, .5); font: inherit; font-size: 11px; line-height: 1.5; }.comic-storyboard-fields textarea { min-height: 94px; resize: vertical; }.comic-storyboard-fields textarea:focus, .comic-storyboard-fields select:focus { border-color: #e69cc8; box-shadow: 0 0 0 3px rgba(255, 132, 184, .1); }.comic-storyboard-fields small { color: var(--muted-2); font-size: 9px; line-height: 1.48; }
.comic-storyboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }.comic-storyboard-actions p { flex: 1; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.comic-storyboard-actions button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 178, 209, .42); border-radius: 8px; padding: 8px 10px; color: #2c1b3f; background: linear-gradient(105deg, #f4cae1, #cabaff); cursor: pointer; font-size: 10px; font-weight: 800; }.comic-storyboard-actions button b { color: #775395; font-size: 14px; }.comic-storyboard-actions button:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.5); }.comic-storyboard-actions button.is-busy { cursor: wait; }
.comic-storyboard-draft { display: grid; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(221, 192, 255, .16); }.comic-storyboard-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.comic-storyboard-draft-head b { color: #eeddf8; font-size: 11px; }.comic-storyboard-draft-head span { color: var(--muted); font-size: 9px; }.comic-storyboard-character { display: grid; gap: 5px; }.comic-storyboard-character > span, .comic-storyboard-draft-card label > span { color: #d7cbe9; font-size: 9px; font-weight: 700; }.comic-storyboard-character textarea, .comic-storyboard-draft-card input, .comic-storyboard-draft-card textarea, .comic-storyboard-draft-card select { width: 100%; box-sizing: border-box; border: 1px solid rgba(194, 177, 230, .24); border-radius: 7px; padding: 7px 8px; outline: none; color: var(--text); background: rgba(2, 6, 19, .42); font: inherit; font-size: 10px; line-height: 1.45; }.comic-storyboard-character textarea, .comic-storyboard-draft-card textarea { min-height: 52px; resize: vertical; }.comic-storyboard-character textarea:focus, .comic-storyboard-draft-card input:focus, .comic-storyboard-draft-card textarea:focus, .comic-storyboard-draft-card select:focus { border-color: rgba(236, 166, 209, .8); }
.comic-storyboard-draft-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.comic-storyboard-draft-card { padding: 10px; border: 1px solid rgba(184, 166, 227, .2); border-radius: 8px; background: rgba(6, 10, 28, .29); }.comic-storyboard-draft-card > b { display: block; margin-bottom: 7px; color: #f3cce4; font-size: 10px; }.comic-storyboard-draft-card label { display: grid; gap: 4px; margin-top: 7px; }.comic-storyboard-draft-card .storyboard-shot-row { display: grid; grid-template-columns: 1fr 108px; gap: 7px; }.comic-storyboard-apply { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid rgba(140, 238, 195, .22); border-radius: 8px; background: rgba(73, 150, 108, .08); }.comic-storyboard-apply p { margin: 0; color: #c1e7d1; font-size: 10px; line-height: 1.45; }.comic-storyboard-apply button { flex: 0 0 auto; border: 1px solid rgba(157, 247, 205, .44); border-radius: 7px; padding: 7px 9px; color: #173727; background: linear-gradient(100deg, #dcf5bd, #c4f0dc); cursor: pointer; font-size: 10px; font-weight: 800; }.comic-storyboard-apply button:disabled { cursor: not-allowed; opacity: .52; }
@media (max-width: 760px) {
  .comic-entry-section { display: block; padding: 23px 17px; }
  .comic-entry-copy h2 { font-size: 22px; }
  .comic-entry-action { justify-items: start; margin-top: 18px; }
  .comic-brief { padding: 14px; }
  .comic-brief-head { gap: 10px; }
  .comic-brief-head h3 { font-size: 15px; }
  .comic-project { padding: 14px; }
  .comic-project-head { gap: 10px; align-items: center; }
  .comic-project-fields { grid-template-columns: 1fr; }
  .comic-storyboard-fields, .comic-storyboard-draft-list { grid-template-columns: 1fr; }
  .comic-storyboard-head, .comic-storyboard-actions, .comic-storyboard-apply { align-items: flex-start; flex-direction: column; }
  .comic-storyboard-head > span { white-space: nowrap; }
  .comic-storyboard-actions button, .comic-storyboard-apply button { width: 100%; justify-content: center; }
  .comic-brief-fields { grid-template-columns: 1fr; }
  .guided-journey { padding: 14px; }
  .guided-steps { gap: 5px; }
  .guided-step { font-size: 9px; }
  .guided-step > span { width: 30px; height: 30px; }
  .guided-steps::before { top: 15px; left: 17%; right: 17%; }
  .beginner-side { display: block !important; }
  .beginner-side .side-label, .beginner-side .side-divider, .beginner-side .side-note { display: block !important; }
  .beginner-side .side-label { margin-top: 12px; }
  .beginner-side .side-note { margin-top: 16px; }
}