:root {
  --blue: #1677ff;
  --blue-dark: #0f56c9;
  --ink: #12213f;
  --muted: #7c8ba7;
  --muted-dark: #60708e;
  --line: #e7edf6;
  --surface: #ffffff;
  --canvas: #f6f9fe;
  --mint: #2bb78b;
  --shadow: 0 16px 45px rgba(32, 77, 140, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: 261px;
  padding: 24px 18px 24px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .8);
  border-right: 1px solid #e9eff8;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 5px;
  text-decoration: none;
}
.brand-mark { width: 52px; height: 52px; display: block; flex: 0 0 auto; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; transform: translateY(2px); }
.brand-copy strong { font-size: 23px; letter-spacing: -.045em; line-height: 1.15; }
.brand-copy small { color: #91a0ba; font-size: 13px; letter-spacing: .03em; }
.primary-nav { display: flex; flex-direction: column; gap: 8px; width: 243px; margin-top: 56px; margin-left: -18px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  height: 52px;
  padding: 0 18px 0 31px;
  width: 243px;
  border-radius: 0 12px 12px 0;
  color: #172746;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.nav-item:hover { background: #f0f5fd; }
.nav-item.active { color: var(--blue); background: #e7f0ff; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); }
.nav-icon { width: 25px; height: 25px; display: grid; place-items: center; color: #526584; }
.nav-item.active .nav-icon { color: var(--blue); }
.nav-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding: 20px 9px 1px;
  border-top: 1px solid #edf1f7;
}
.avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 800; background: linear-gradient(145deg, #79b7ff, #166dff); border: 4px solid #e5efff; }
.profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-copy strong { font-size: 14px; }
.profile-copy small { color: #8a9ab3; font-size: 11px; white-space: nowrap; }
.profile-arrow { margin-left: auto; color: #8190aa; font-size: 28px; font-weight: 300; line-height: 1; }

.main-content { margin-left: 261px; padding: 0 24px 54px 32px; }
.top-header { position: relative; min-height: 164px; max-width: 1269px; margin: 0 auto; padding: 40px 10px 0; }
.welcome h1 { margin: 0; font-size: 39px; line-height: 1.18; letter-spacing: -.055em; font-weight: 800; }
.welcome p { margin: 10px 0 0; color: #8492aa; font-size: 18px; }
.sparkle { color: #f5bd35; margin-left: 4px; font-size: 20px; }
.header-actions { position: absolute; right: 7px; top: 18px; display: flex; align-items: center; gap: 22px; }
.global-search { width: 325px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid #e1e8f3; border-radius: 13px; background: rgba(246, 249, 254, .8); }
.global-search:focus-within { border-color: #a8c9ff; box-shadow: 0 0 0 4px rgba(22, 119, 255, .08); }
.global-search svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: #6c7e9e; stroke-width: 2; stroke-linecap: round; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.global-search input::placeholder { color: #9aa8be; }
.header-icon { position: relative; width: 29px; height: 34px; padding: 4px; border: 0; color: #5f7190; background: transparent; }
.header-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-icon.has-notice::after { content: ""; position: absolute; top: 2px; right: 0; width: 8px; height: 8px; border: 2px solid var(--canvas); border-radius: 50%; background: #f04b50; }
.quote { position: absolute; right: 12px; bottom: -8px; margin: 0; color: #71819d; font-size: 14px; line-height: 1.65; text-align: right; }
.quote span { display: block; margin-top: 1px; color: #8b99ae; }

.dashboard-layout { max-width: 1269px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 900px) 348px; gap: 21px; align-items: start; }
.primary-column { min-width: 0; }
.resume-banner { position: relative; min-height: 199px; overflow: hidden; display: grid; grid-template-columns: 154px minmax(0, 1fr) 182px; align-items: center; padding: 24px 26px 24px 31px; border: 1px solid #e8eef7; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.banner-scene { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.banner-wave { display: none; }
.resume-illustration { position: relative; z-index: 1; width: 112px; height: 132px; display: block; transform: translate(-14px, -11px); }
.paper { position: absolute; left: 16px; top: 16px; width: 109px; height: 120px; padding: 21px 18px 12px; border-radius: 5px 12px 5px 5px; background: #fff; box-shadow: 0 10px 22px rgba(48, 93, 166, .12); }
.paper::before { content: ""; position: absolute; top: 0; right: 0; width: 25px; height: 25px; background: linear-gradient(225deg, #bfd7ff 50%, #eaf2ff 50%); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.paper i { display: block; height: 7px; margin-bottom: 10px; border-radius: 4px; background: #b7d1ff; }.paper i:nth-child(1) { width: 58px; }.paper i:nth-child(2) { width: 62px; }.paper i:nth-child(3) { width: 45px; }.paper i:nth-child(4) { width: 34px; }
.check-badge { position: absolute; right: -21px; bottom: 4px; width: 52px; height: 52px; display: grid; place-items: center; border: 5px solid #fff; border-radius: 50%; color: #fff; font-size: 27px; font-weight: 700; background: #38c79b; box-shadow: 0 7px 14px rgba(43, 183, 139, .28); }
.resume-summary { position: relative; z-index: 1; min-width: 0; transform: translate(-1px, -11px); }
.resume-summary h2 { margin: 0; font-size: 26px; letter-spacing: -.045em; line-height: 1.25; }
.resume-summary p { margin: 7px 0 13px; color: #8492aa; font-size: 16px; }
.skill-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.skill-chips span { padding: 6px 18px; border-radius: 99px; color: #315b9e; background: #eaf2ff; font-size: 13px; font-weight: 600; }
.banner-cta { position: relative; z-index: 1; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 9px; transform: translateY(1px); }
.banner-cta small { color: #8190a9; font-size: 11px; white-space: nowrap; }
.banner-cta .primary-button { width: 185px; min-height: 54px; padding-left: 14px; padding-right: 14px; }
.primary-button, .secondary-button { min-height: 47px; padding: 0 25px; border-radius: 12px; border: 0; font-size: 15px; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 9px 18px rgba(22, 119, 255, .24); }
.primary-button:hover { transform: translateY(-1px); background: #0f6df2; box-shadow: 0 12px 23px rgba(22, 119, 255, .3); }
.primary-button span { margin-left: 9px; font-size: 20px; font-weight: 400; line-height: 0; vertical-align: -1px; }
.secondary-button { color: #536886; background: #eef3fa; }
.secondary-button:hover { background: #e4ecf8; }

.matched-section { margin-top: 36px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -.045em; }
.section-heading p { margin: 7px 0 0; color: #8492aa; font-size: 14px; }
.section-heading > a { padding-bottom: 5px; color: var(--blue); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.section-heading > a span { margin-left: 5px; font-size: 18px; vertical-align: -1px; }
.featured-courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.featured-courses.plan-courses[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-placeholder { height: 423px; border-radius: 15px; background: linear-gradient(110deg, #edf3fb 25%, #f9fbff 40%, #edf3fb 55%); background-size: 220% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.course-card { min-width: 0; height: 423px; overflow: hidden; border: 1px solid #e7edf6; border-radius: 15px; background: #fff; box-shadow: 0 9px 25px rgba(31, 76, 137, .07); transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(31, 76, 137, .13); }
.course-art { position: relative; height: 237px; overflow: hidden; background: #dce7fb; }
.course-art::before, .course-art::after { display: none; }
.art-scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.course-cover-image, .course-cover-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-cover-fallback[hidden] { display: none; }
.course-cover-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,35,78,.04) 24%, rgba(8,31,72,.84) 100%); }
.course-cover-copy { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 17px; display: flex; flex-direction: column; align-items: flex-start; color: #fff; text-shadow: 0 2px 12px rgba(5,27,66,.28); }
.course-cover-copy small { max-width: calc(100% - 5px); overflow: hidden; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.course-cover-copy strong { display: -webkit-box; max-width: 95%; overflow: hidden; margin-top: 7px; font-size: 18px; line-height: 1.26; letter-spacing: -.02em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.course-cover-copy span { margin-top: 9px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: rgba(255,255,255,.12); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.art-label { position: absolute; z-index: 1; left: 16px; top: 15px; padding: 6px 10px; border-radius: 99px; color: #fff; background: rgba(17, 65, 145, .2); font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); }
.favorite { position: absolute; z-index: 2; top: 14px; right: 14px; width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #60759e; background: rgba(255,255,255,.86); font-size: 21px; line-height: 1; }
.favorite.active { color: #f06173; }
.course-body { height: 185px; display: flex; flex-direction: column; padding: 16px 16px 15px; }
.course-body h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.035em; }
.course-body p { height: 42px; overflow: hidden; margin: 7px 0 13px; color: #8391a8; font-size: 12px; line-height: 1.65; }
.course-meta-line { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #6f7f9b; font-size: 12px; }
.level { padding: 4px 9px; border-radius: 99px; color: #2872d9; background: #eaf2ff; font-weight: 700; }
.level.mid { color: #168b69; background: #e5f8f0; }
.match { color: #263c62; font-weight: 700; }.match b { margin-right: 3px; color: #ff5d36; font-size: 15px; }
.course-progress { display: flex; align-items: center; gap: 9px; margin-top: auto; color: #8a98ae; font-size: 11px; }
.progress-track { height: 8px; flex: 1; overflow: hidden; border-radius: 99px; background: #e8eef8; }.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.library-panel, .workspace-panel, .plan-output-panel { max-width: 1269px; margin: 110px auto 0; padding: 28px 30px; border: 1px solid #e6edf7; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.workspace-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; scroll-margin-top: 25px; }
.workspace-intro h2, .plan-output-panel h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }.workspace-intro > p:not(.eyebrow), .plan-output-panel > div:first-child > p:not(.eyebrow) { margin: 8px 0 0; color: #8492aa; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.workspace-points { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; color: #4f6b98; font-size: 13px; }.workspace-points span::first-letter { color: var(--mint); }
.resume-editor label { display: block; margin: 0 0 7px; color: #253b61; font-size: 13px; font-weight: 700; }.optional { color: #9aa7ba; font-weight: 400; }
textarea, select, .library-tools input { width: 100%; border: 1px solid #dce5f2; border-radius: 11px; outline: 0; color: var(--ink); background: #fbfdff; }.resume-editor textarea { min-height: 132px; resize: vertical; padding: 12px; }.resume-editor textarea:focus, select:focus, .library-tools input:focus { border-color: #91bbff; box-shadow: 0 0 0 4px rgba(22, 119, 255, .08); }
.upload-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; }.file-picker { flex: 1; display: flex !important; align-items: center; min-height: 45px; margin: 0 !important; padding: 0 13px; border: 1px dashed #b7c9e4; border-radius: 11px; color: #55729e !important; cursor: pointer; }.file-picker span { margin-right: 6px; font-size: 21px; }.upload-row input[type=file] { display: none; }.upload-row .secondary-button { min-height: 45px; padding: 0 17px; font-size: 13px; }.field-note { margin: 8px 0 0; color: #95a2b6; font-size: 12px; }
.library-panel { scroll-margin-top: 24px; margin-top: 110px; }.library-tools { display: flex; align-items: center; gap: 12px; }.library-tools input { width: 260px; padding: 10px 12px; font-size: 13px; }.library-tools span { color: #8291a9; font-size: 12px; white-space: nowrap; }.library-list { margin-top: 19px; border-top: 1px solid var(--line); }.library-row { position: relative; padding: 15px 8px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }.library-row:hover { background: #fafcff; }.library-row small { display: block; margin-bottom: 5px; color: #5f7fac; font-size: 12px; font-weight: 650; }.library-row h3 { margin: 0; padding-right: 95px; font-size: 14px; }.library-row p { margin: 4px 0 0; color: #8492aa; font-size: 12px; }.library-row .row-action { position: absolute; top: 26px; right: 8px; color: var(--blue); font-size: 12px; }.empty-state { padding: 24px 8px; color: #8492aa; text-align: center; }
.plan-output-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; scroll-margin-top: 24px; }.plan-result { min-height: 150px; max-height: 430px; overflow: auto; padding: 16px; border-radius: 12px; color: #34496e; background: #f6f9fd; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.75; }.plan-result.empty { color: #94a1b4; }

dialog { max-width: calc(100vw - 24px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(24, 57, 106, .28); }.plan-dialog { width: 570px; min-height: 394px; }.course-dialog { width: 560px; padding: 34px; }.course-dialog::backdrop, .plan-dialog::backdrop { background: rgba(24, 50, 91, .38); backdrop-filter: blur(3px); }.dialog-close { position: absolute; z-index: 2; top: 14px; right: 17px; width: 28px; height: 28px; border: 0; color: #7b8ba4; background: transparent; font-size: 27px; font-weight: 300; line-height: 1; }.dialog-layout { display: grid; grid-template-columns: 205px 1fr; min-height: 394px; }.dialog-visual { position: relative; overflow: hidden; padding: 47px 15px 24px 27px; background: linear-gradient(145deg, #f3f8ff, #fff); }.dialog-orb { position: absolute; top: 48px; left: 30px; width: 145px; height: 145px; border-radius: 50%; background: #edf5ff; }.dialog-doc { position: absolute; z-index: 1; top: 88px; left: 54px; width: 78px; height: 103px; padding: 25px 14px 12px; border-radius: 6px; background: #fff; box-shadow: 0 10px 20px rgba(57, 107, 188, .12); transform: rotate(-2deg); }.dialog-doc::after { content: ""; position: absolute; right: -18px; bottom: -11px; width: 68px; height: 88px; border-radius: 6px; background: #fff; box-shadow: 0 10px 20px rgba(57, 107, 188, .12); transform: rotate(5deg); z-index: -1; }.dialog-doc i { display: block; height: 7px; margin-bottom: 11px; border-radius: 5px; background: #b8d1ff; }.dialog-doc i:nth-child(1) { width: 49px; }.dialog-doc i:nth-child(2) { width: 45px; }.dialog-doc i:nth-child(3) { width: 29px; }.dialog-doc i:nth-child(4) { width: 39px; }.dialog-star { position: absolute; z-index: 2; top: 76px; right: 20px; color: #f6c23b; font-size: 24px; }.dialog-visual ul { position: absolute; z-index: 2; left: 28px; right: 7px; bottom: 21px; margin: 0; padding: 0; list-style: none; color: #8091ae; font-size: 12px; line-height: 2.4; }.dialog-visual li::before { content: "✓"; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 7px; border-radius: 50%; color: #fff; background: var(--mint); font-size: 11px; font-weight: 800; }.dialog-content { padding: 47px 26px 24px; }.dialog-content h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; line-height: 1.3; }.dialog-lead { margin: 7px 0 18px; color: #8795ad; font-size: 12px; }.dialog-content form > label { display: block; margin: 13px 0 6px; color: #293e63; font-size: 12px; font-weight: 700; }.dialog-content select { height: 40px; padding: 0 12px; font-size: 13px; background: #fff; }.resume-details { margin-top: 12px; color: #6880a3; font-size: 12px; }.resume-details summary { cursor: pointer; }.resume-details p { margin: 7px 0; color: #94a1b3; font-size: 11px; }.resume-details textarea { width: 100%; min-height: 62px; padding: 8px; resize: vertical; font-size: 12px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 21px; }.dialog-actions button { min-height: 46px; min-width: 105px; }.dialog-actions .primary-button { min-width: 134px; }.detail-title { margin: 0; font-size: 23px; }.detail-block { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.detail-block p { color: #71819d; line-height: 1.7; }.tag { display: inline-block; margin: 3px; padding: 4px 9px; border-radius: 99px; color: #315b9e; background: #eaf2ff; font-size: 12px; }.course-dialog a { display: inline-flex; margin-top: 10px; text-decoration: none; }
.resume-jump { display: block; margin-top: 8px; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 12px; cursor: pointer; }
.toast { position: fixed; z-index: 50; right: 28px; bottom: 28px; max-width: 350px; padding: 12px 17px; border-radius: 11px; color: #fff; background: #1d3155; box-shadow: 0 12px 30px rgba(20, 48, 91, .2); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.right-column { padding-top: 38px; }.weekly-card { min-height: 620px; padding: 26px 20px 18px; border: 1px solid #e7edf6; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }.weekly-card h2 { position: relative; top: -3px; margin: 0; font-size: 23px; letter-spacing: -.04em; }.weekly-summary { display: flex; align-items: center; gap: 28px; margin-top: 19px; }.progress-ring { width: 159px; height: 159px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) var(--progress), #e9eff8 0); }.progress-ring::before { content: ""; position: absolute; width: 119px; height: 119px; border-radius: 50%; background: #fff; }.progress-ring > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }.progress-ring strong { font-size: 31px; line-height: 1; letter-spacing: -.05em; }.progress-ring small { margin-top: 5px; color: #8b99ae; font-size: 12px; }.weekly-numbers { display: flex; flex-direction: column; gap: 15px; transform: translateY(9px); }.weekly-numbers small { display: block; color: #8d9bb0; font-size: 12px; }.weekly-numbers strong { display: block; margin-top: 1px; font-size: 16px; letter-spacing: -.02em; }.week-chart { position: relative; height: 158px; margin-top: 69px; padding: 0 4px 28px; }.chart-grid { position: absolute; inset: 0 0 28px 14px; display: flex; flex-direction: column; justify-content: space-between; }.chart-grid i { display: block; border-top: 1px solid #e5ebf4; }.bars { position: absolute; inset: 0 14px 28px 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 0; }.bars span { position: relative; width: 19px; height: var(--bar); min-height: 15px; border-radius: 5px 5px 0 0; background: linear-gradient(#b5cff8, #d9e5f8); }.bars span.today { background: linear-gradient(#39bf97, #a8ead1); }.bars b { position: absolute; top: -21px; left: 50%; color: #8492a9; font-size: 11px; font-weight: 500; transform: translateX(-50%); }.bars em { position: absolute; bottom: -30px; left: 50%; color: #8492a9; font-size: 10px; font-style: normal; white-space: nowrap; transform: translateX(-50%); }.weekly-note { display: flex; align-items: center; gap: 15px; min-height: 110px; margin-top: 29px; padding: 17px 18px; border-radius: 15px; color: #3d9c7d; background: #e8f9f3; }.weekly-note > span { font-size: 43px; line-height: 1; transform: rotate(-35deg); }.weekly-note p { margin: 0; color: #54a98d; font-size: 12px; line-height: 1.9; }.weekly-note strong { color: #2e9b79; font-size: 13px; }
.plan-dialog { position: fixed; top: calc(50% + 45px); left: calc(50% + 24px); transform: translate(-50%, -50%); width: 570px; height: 394px; min-height: 394px; margin: 0; }
.plan-dialog .dialog-layout { grid-template-columns: 181px 1fr; min-height: 394px; height: 394px; }
.plan-dialog .dialog-content { padding: 53px 26px 20px 40px; overflow: hidden; }
.plan-dialog .dialog-content > .eyebrow { display: none; }
.plan-dialog .resume-details { display: none; }
.plan-dialog .dialog-content form > label:nth-of-type(1) { margin-top: 31px; }
.plan-dialog .dialog-content form > label:nth-of-type(2) { margin-top: 26px; }
.plan-dialog .dialog-actions { margin-top: 34px; }
.plan-dialog .dialog-visual ul { bottom: 61px; }

@media (max-width: 1250px) { .dashboard-layout { grid-template-columns: minmax(0, 1fr) 315px; }.resume-banner { grid-template-columns: 125px minmax(0, 1fr) 190px; padding-left: 21px; }.banner-cta small { font-size: 10px; }.global-search { width: 280px; } }
@media (max-width: 1050px) { .sidebar { width: 216px; }.main-content { margin-left: 216px; padding-left: 22px; }.dashboard-layout { grid-template-columns: 1fr; }.right-column { padding-top: 24px; }.weekly-card { min-height: 0; }.weekly-summary { justify-content: center; }.week-chart { max-width: 500px; margin-left: auto; margin-right: auto; }.quote { display: none; }.header-actions { right: 0; }.workspace-panel, .plan-output-panel { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sidebar { position: sticky; width: 100%; height: auto; padding: 12px 15px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid #e9eff8; }.brand { padding: 0; }.brand-mark { width: 36px; height: 36px; }.brand-copy strong { font-size: 17px; }.brand-copy small, .sidebar-profile { display: none; }.primary-nav { flex: 1; flex-direction: row; justify-content: flex-end; gap: 2px; margin: 0; }.nav-item { width: 45px; height: 42px; justify-content: center; padding: 0; border-radius: 10px; }.nav-item span:last-child { display: none; }.nav-icon { width: 22px; }.nav-item.active::before { display: none; }.main-content { margin-left: 0; padding: 0 16px 40px; }.top-header { min-height: 145px; padding: 25px 2px 0; }.welcome h1 { font-size: 30px; }.welcome p { font-size: 14px; }.header-actions { top: auto; left: 0; right: 0; bottom: 14px; gap: 10px; }.global-search { width: auto; flex: 1; }.header-icon { display: none; }.resume-banner { grid-template-columns: 90px minmax(0, 1fr); min-height: 225px; padding: 22px 18px; }.resume-illustration { transform: scale(.82); transform-origin: left center; }.resume-summary h2 { font-size: 21px; }.resume-summary p { font-size: 12px; }.banner-cta { grid-column: 1 / -1; align-items: stretch; margin-top: 10px; }.banner-cta small { text-align: center; }.featured-courses { grid-template-columns: 1fr; }.course-card { display: grid; grid-template-columns: 42% 58%; }.course-art { height: 100%; min-height: 175px; }.course-body p { height: 38px; }.library-panel, .workspace-panel, .plan-output-panel { padding: 22px 17px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.section-heading > a { padding: 0; }.library-tools { width: 100%; }.library-tools input { width: 100%; }.plan-dialog { width: 520px; }.dialog-layout { grid-template-columns: 175px 1fr; }.dialog-visual { padding-left: 18px; }.dialog-content { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 500px) { .brand-copy strong { font-size: 15px; }.primary-nav { gap: 0; }.nav-item { width: 39px; }.nav-icon svg { width: 21px; }.top-header { min-height: 137px; }.welcome h1 { font-size: 27px; }.resume-banner { grid-template-columns: 1fr; text-align: center; }.resume-illustration { margin: -4px auto 5px; transform-origin: center; }.skill-chips { justify-content: center; }.featured-courses { margin-top: 19px; }.course-card { display: block; }.course-art { height: 180px; min-height: 0; }.weekly-summary { gap: 16px; }.progress-ring { width: 132px; height: 132px; }.progress-ring::before { width: 99px; height: 99px; }.weekly-numbers strong { font-size: 14px; }.dialog-layout { display: block; }.dialog-visual { display: none; }.plan-dialog { min-height: 0; }.dialog-content { padding: 40px 22px 22px; }.dialog-actions { margin-top: 17px; }.upload-row { flex-direction: column; align-items: stretch; }.upload-row .secondary-button { width: 100%; } }
.dialog-close:focus { outline: 0 !important; box-shadow: none; }
.weekly-card { height: 620px; overflow: hidden; }
.weekly-numbers { transform: translateY(13px); }
.bars { inset: 0 14px 28px 28px; }
.weekly-note { margin-left: -2px; margin-right: -7px; }
.weekly-note { gap: 9px; }
.leaf-icon { width: 45px; height: 45px; flex: 0 0 auto; display: block; color: #2eaf87; }
.weekly-note > .leaf-icon { transform: none; font-size: inherit; }
.leaf-icon .leaf-body { fill: currentColor; stroke: none; }
.leaf-icon .leaf-vein { fill: none; stroke: #e8f9f3; stroke-width: 2.2; }
.weekly-numbers { transform: translateY(9px); }
.weekly-summary, .weekly-numbers { height: 159px; }
.weekly-numbers strong { margin-top: 6px; }
.banner-cta { gap: 12px; }
.leaf-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.weekly-note p { margin-top: -2px; }
.dialog-orb { top: 52px; left: 28px; width: 168px; height: 168px; }
.dialog-doc { width: 82px; border-radius: 6px; }
.dialog-doc::after { content: none; }
.dialog-doc-back { top: 88px; left: 54px; height: 101px; padding: 25px 14px 12px; transform: rotate(-2deg); z-index: 1; }
.dialog-doc-front { top: 131px; left: 87px; height: 77px; padding: 14px 13px 10px; transform: rotate(1.5deg); z-index: 2; }
.dialog-doc-front i { height: 7px; margin-bottom: 9px; }
.dialog-doc-front i:nth-child(1) { width: 52px; background: #4c8ff3; }
.dialog-doc-front i:nth-child(2) { width: 48px; }
.dialog-doc-front i:nth-child(3) { width: 35px; }
.dialog-doc-front i:nth-child(4) { width: 42px; }
.dialog-star { top: 83px; right: 16px; }
.plan-dialog .dialog-content { padding-left: 41px; }
.plan-dialog .dialog-content h2 { font-size: 22px; }
.plan-dialog .dialog-lead { font-size: 14px; }
.plan-dialog .dialog-content form > label { font-size: 13px; }
.plan-dialog .dialog-content select { font-size: 14px; }

/* Routed application views and complete interaction states */
.page-view[hidden] { display: none !important; }
.page-view.active { animation: page-in .22s ease both; }
@keyframes page-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-kicker { margin: 0 0 7px !important; color: var(--blue) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .17em; }
body[data-route="overview"] .page-kicker { display: none; }
body:not([data-route="overview"]) .top-header { min-height: 164px; }
body:not([data-route="overview"]) .welcome h1 { font-size: 34px; }
body:not([data-route="overview"]) .quote { display: none; }

.profile-wrap { position: relative; margin-top: auto; }
.sidebar-profile { width: 100%; margin-top: 0; border: 0; border-top: 1px solid #edf1f7; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.sidebar-profile:hover { border-radius: 12px; background: #f4f7fc; }
.sidebar-profile:focus-visible, .nav-item:focus-visible, .header-icon:focus-visible, .course-card:focus-visible, .library-row:focus-visible { outline: 3px solid rgba(22, 119, 255, .2); outline-offset: 2px; }
.profile-menu { position: absolute; z-index: 40; left: 5px; right: 5px; bottom: 68px; padding: 7px; border: 1px solid #e4ebf5; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(28, 62, 112, .16); }
.profile-menu[hidden] { display: none; }
.profile-menu button { width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; color: #263b60; background: transparent; text-align: left; font-size: 13px; }
.profile-menu button:hover { color: var(--blue); background: #eef5ff; }
.header-icon { border-radius: 9px; transition: color .15s ease, background .15s ease, transform .15s ease; }
.header-icon:hover { color: var(--blue); background: #eaf2ff; transform: translateY(-1px); }

.resume-banner.resume-empty .check-badge { background: #7daeff; }
.resume-banner.resume-empty .skill-chips span { color: #788ba9; background: #eff3f9; }
.course-card { cursor: pointer; }
.course-card:active, .library-row:active { transform: translateY(0); }

.resume-page-panel, .course-page-panel, .plan-page-panel { margin-top: 0; min-height: 560px; }
.resume-page-panel { grid-template-columns: .72fr 1.28fr; gap: 58px; padding: 46px 48px; }
.resume-page-panel .resume-editor textarea { min-height: 285px; font-size: 14px; line-height: 1.75; }
.ability-profile { margin-top: 18px; border: 1px solid #dce8f8; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(26, 66, 120, .04); }
.ability-profile > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; }
.ability-profile > summary::-webkit-details-marker, .ability-domain > summary::-webkit-details-marker { display: none; }
.ability-profile > summary span { display: grid; gap: 5px; }
.ability-profile > summary strong { color: #102449; font-size: 19px; }
.ability-profile > summary small, .ability-profile > summary b { color: #7890b1; font-size: 13px; font-weight: 500; }
.ability-profile-content { padding: 0 26px 24px; }
.ability-profile-content > p { margin: 0 0 18px; color: #6e83a4; font-size: 13px; }
.ability-profile-domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ability-domain { min-width: 0; border: 1px solid #e2ebf6; border-radius: 12px; background: #fbfdff; }
.ability-domain > summary { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.ability-domain > summary strong { color: #183157; font-size: 14px; }
.ability-domain > summary small { color: #7e93af; white-space: nowrap; }
.ability-domain-grid { display: grid; gap: 11px; padding: 0 16px 16px; }
.ability-domain-grid label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #3f5b82; font-size: 13px; }
.ability-domain-grid select { max-width: 130px; padding: 7px; border: 1px solid #d4e2f3; border-radius: 8px; background: #fff; color: #20416e; }
.ability-profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
.ability-profile-actions span { color: #6283a8; font-size: 12px; }
@media (max-width: 760px) { .ability-profile-domains { grid-template-columns: 1fr; } .ability-profile > summary { padding: 18px; } .ability-profile-content { padding: 0 18px 18px; } }
.resume-success-card { margin-top: 30px; padding: 16px; border: 1px solid #c8eee1; border-radius: 13px; color: #247f64; background: #edfaf6; }
.resume-success-card strong, .resume-success-card span { display: block; }
.resume-success-card span { margin-top: 4px; color: #5e9b88; font-size: 12px; word-break: break-word; }
.text-button { margin-top: 12px; padding: 0; border: 0; color: var(--blue); background: transparent; font-weight: 700; }
.resume-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.resume-actions button { min-width: 150px; }
.upload-progress { margin-top: 12px; padding: 11px 13px; border-radius: 11px; background: #f0f6ff; }
.upload-progress[hidden] { display: none; }
.upload-progress > span { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: #dfeafb; }
.upload-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1677ff, #69a8ff); transition: width .3s ease; }
.upload-progress strong { display: block; margin-top: 7px; color: #52709f; font-size: 12px; }
.upload-progress.failed { background: #fff2f3; }
.upload-progress.failed i { background: #ef6370; }
.upload-progress.failed strong, .field-note[data-state="error"] { color: #c94655; }
.field-note[data-state="loading"] { color: #5575a7; }
.field-note[data-state="success"] { color: #239171; }
.file-picker { overflow: hidden; }
.file-picker #filePickerLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.course-page-panel { padding: 38px 36px; }
.library-tools .tiny-button { min-height: 39px; padding: 0 14px; border: 1px solid #d9e5f4; border-radius: 10px; color: #4f6d99; background: #f7faff; font-weight: 700; }
.library-tools .tiny-button:hover { color: var(--blue); border-color: #a8c9ff; background: #eef5ff; }
.library-loading { display: grid; gap: 10px; padding-top: 15px; }
.library-loading i { height: 62px; border-radius: 10px; background: linear-gradient(110deg, #eff4fb 25%, #fafcff 40%, #eff4fb 55%); background-size: 220% 100%; animation: shimmer 1.4s infinite; }
.load-error { grid-column: 1 / -1; min-height: 190px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 25px; border: 1px solid #f1d8dc; border-radius: 14px; color: #5e6f8c; background: #fff8f9; }
.load-error > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #e76472; font-size: 20px; font-weight: 800; }
.load-error strong { color: #253a5d; font-size: 15px; }
.load-error p { margin: 5px 0 10px; }
.load-error button { padding: 7px 12px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font-weight: 700; }

.plan-page-panel { grid-template-columns: 310px minmax(0, 1fr); align-items: start; padding: 38px 36px; }
.plan-page-intro { position: sticky; top: 28px; }
.plan-page-intro > p:not(.eyebrow) { color: #8492aa; line-height: 1.8; }
.plan-page-intro .primary-button { margin-top: 18px; }
.plan-page-panel .plan-result { min-height: 480px; max-height: none; }

.utility-dialog { width: 440px; padding: 31px; }
.utility-dialog::backdrop { background: rgba(24, 50, 91, .35); backdrop-filter: blur(3px); }
.utility-dialog h2 { margin: 0 0 21px; font-size: 24px; }
.notice-list { border-top: 1px solid var(--line); }
.notice-list article { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 17px 3px; border-bottom: 1px solid var(--line); }
.notice-list article > span { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #d9e2f0; }
.notice-list article > span.notice-dot { background: var(--blue); box-shadow: 0 0 0 4px #e8f1ff; }
.notice-list strong { color: #20375d; }
.notice-list p { margin: 4px 0; color: #73839f; line-height: 1.6; }
.notice-list small { color: #9aa7b9; }
.utility-action { width: 100%; margin-top: 20px; }
.utility-dialog form > label { display: block; margin: 14px 0 6px; color: #304668; font-weight: 700; }
.utility-dialog input, .utility-dialog select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #dce5f2; border-radius: 10px; color: var(--ink); background: #fbfdff; }
.auth-dialog { width: 460px; }
.auth-dialog[data-required]::backdrop { background: rgba(14, 32, 62, .66); backdrop-filter: blur(9px); }
.auth-security-note { display: grid; gap: 4px; margin: -7px 0 19px; padding: 13px 15px; border: 1px solid #dce9ff; border-radius: 12px; color: #315b9e; background: #f2f7ff; }
.auth-security-note strong { font-size: 13px; }
.auth-security-note span { color: #6d82a5; font-size: 12px; line-height: 1.6; }
.auth-actions { align-items: stretch; }
.auth-actions button { flex: 1; min-width: 0; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-line { display: flex; align-items: center; gap: 11px; margin-top: 22px; padding: 12px; border-radius: 11px; background: #f5f8fc; }
.service-line > span { width: 10px; height: 10px; border-radius: 50%; background: #e15d69; }
.service-line > span.online { background: #2bb78b; box-shadow: 0 0 0 4px #dff7ef; }
.service-line div { display: flex; flex-direction: column; }
.service-line small { color: #8090a8; }

.boot-error { position: fixed; z-index: 100; left: 50%; top: 22px; width: min(470px, calc(100vw - 28px)); padding: 17px 18px; border: 1px solid #f1cbd0; border-radius: 13px; color: #5d6c84; background: #fff; box-shadow: 0 18px 45px rgba(55, 35, 48, .2); transform: translateX(-50%); }
.boot-error strong { color: #b83d4a; }
.boot-error p { margin: 5px 0 11px; }
.boot-error button { padding: 7px 12px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); }

@media (max-width: 1050px) {
  .resume-page-panel, .plan-page-panel { grid-template-columns: 1fr; }
  .plan-page-intro { position: static; }
}
@media (max-width: 760px) {
  .profile-wrap { display: none; }
  .top-header, body:not([data-route="overview"]) .top-header { min-height: 190px; }
  .resume-page-panel, .course-page-panel, .plan-page-panel { min-height: 0; padding: 24px 18px; }
  .resume-actions { flex-direction: column-reverse; }
  .resume-actions button { width: 100%; }
  .plan-page-panel .plan-result { min-height: 260px; }
  .page-kicker { font-size: 10px !important; }
}
@media (max-width: 500px) {
  .settings-grid { grid-template-columns: 1fr; gap: 0; }
  .utility-dialog { padding: 27px 20px; }
  .library-tools { flex-wrap: wrap; }
  .library-tools .tiny-button { flex: 1; }
}
.plan-dialog .dialog-content form > label:nth-of-type(1) { margin-top: 25px; }
.plan-dialog .dialog-content form > label:nth-of-type(2) { margin-top: 24px; }
.plan-dialog .dialog-visual ul { left: 30px; bottom: 64px; }
.plan-dialog .dialog-star { top: 86px; right: 12px; }
.dialog-doc-back { padding-top: 18px; }
.dialog-doc-back i:nth-child(1) { width: 53px; }
.dialog-doc-back i:nth-child(2) { width: 49px; }
.dialog-doc-back i:nth-child(3) { width: 35px; }
.dialog-doc-back i:nth-child(4) { width: 42px; }
.plan-dialog .dialog-content h2 { position: relative; top: -4px; }
.plan-dialog .dialog-content form > label { position: relative; top: -5px; }
.plan-dialog .dialog-actions { gap: 16px; margin-top: 32px; }
.plan-dialog .dialog-actions button { min-height: 47px; }
.plan-dialog .dialog-actions #cancelPlan { width: 117px; min-width: 117px; padding: 0 12px; }
.plan-dialog .dialog-actions #submitPlan { width: 134px; min-width: 134px; padding: 0 9px; }
.plan-result.rendered { max-height: none; overflow: visible; padding: 0; background: transparent; white-space: normal; }
.plan-rendered { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 16px; overflow-wrap: anywhere; }
.plan-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.plan-hero span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.plan-hero h3 { margin: 4px 0 0; color: var(--ink); font-size: 21px; line-height: 1.3; }
.plan-hero > small { min-width: 0; max-width: 100%; padding: 6px 9px; border-radius: 8px; color: #7b8ba4; background: #f2f6fb; font-size: 10px; white-space: normal; }
.plan-summary { margin: 0; padding: 14px 16px; border-radius: 12px; color: #506582; background: #f4f8fe; line-height: 1.75; }
.plan-quality { padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.plan-quality.passed { border-color: #bcebdc; background: linear-gradient(120deg, #f3fffa, #fbfdff); }
.plan-quality.failed { border-color: #ffd0d3; background: #fff8f8; }
.plan-quality.legacy{border-color:#eadbb8;background:#fffaf0}.plan-quality.legacy .plan-quality-heading>b{color:#8d641f;background:#fff0c8}.plan-quality.legacy p{margin:12px 0 0;color:#665b45;line-height:1.7}.legacy-outline{margin-top:16px;padding:15px 18px;border:1px solid #e3eaf4;border-radius:12px;color:#536783}.legacy-outline summary{cursor:pointer;font-weight:700}.legacy-outline li{margin-top:8px}
.plan-regenerate{margin-top:14px;padding:11px 17px;border:0;border-radius:10px;background:#1677ff;color:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer;box-shadow:0 8px 18px #1677ff30}.plan-regenerate:hover{background:#075fd4}
.plan-quality-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-quality-heading > div { display: grid; gap: 3px; }
.plan-quality-heading span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.plan-quality-heading strong { color: var(--ink); font-size: 16px; }
.plan-quality-heading > b { padding: 6px 10px; border-radius: 999px; color: #138869; background: #ddf8ee; font-size: 12px; white-space: nowrap; }
.plan-quality.failed .plan-quality-heading > b { color: #c24a57; background: #ffe4e7; }
.plan-quality-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.quality-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; color: #52708e; background: #f1f6fb; font-size: 12px; }
.quality-check i { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #fff; background: #31b992; font-size: 11px; font-style: normal; font-weight: 800; }
.quality-check.bad i { background: #e75b66; }
.quality-check small { color: #7b91ac; font-size: 11px; }
.plan-quality-failures{margin:12px 0 0;color:#ad4050;font-size:12px;line-height:1.6}.plan-quality-weeks{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.plan-quality-weeks span{padding:5px 8px;border-radius:7px;background:#eef5ff;color:#526c8e;font-size:11px}.lesson-line .plan-lesson-play{border:0;background:transparent;color:var(--blue);font-size:11px;font-weight:700;cursor:pointer}
.plan-goals { padding: 14px 16px; border: 1px solid #dce8f8; border-radius: 12px; background: #fff; }
.plan-goals > strong, .week-block > strong, .week-lessons > strong { color: #29436b; font-size: 12px; }
.plan-goals ul, .week-block ul { margin: 8px 0 0; padding-left: 18px; color: #657794; line-height: 1.7; }
.plan-capability-clues { padding: 13px 16px; border: 1px solid #dce8f8; border-radius: 12px; background: #f9fbff; color: #536b8c; }
.plan-capability-clues summary { cursor: pointer; color: #29436b; font-size: 12px; font-weight: 750; }
.plan-capability-clues > div { margin-top: 12px; }
.plan-capability-clues strong { font-size: 11px; }
.plan-capability-clues p { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.plan-capability-clues p span { padding: 5px 8px; border-radius: 999px; background: #eaf2ff; color: #315d9d; font-size: 11px; }
.plan-capability-clues p em, .plan-capability-clues small { color: #8292a9; font-size: 11px; font-style: normal; }
.plan-capability-clues small { display: block; margin-top: 12px; line-height: 1.5; }
.plan-weeks { display: grid; gap: 13px; }
.plan-week-card { overflow: hidden; border: 1px solid #e0e8f4; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(30, 75, 138, .06); }
.plan-week-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: linear-gradient(135deg, #edf5ff, #f9fbff); }
.plan-week-card > header span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.plan-week-card > header h3 { margin: 2px 0 0; color: var(--ink); font-size: 16px; }
.plan-week-card > header > div { min-width: 0; }
.plan-week-card > header b { display: grid; place-items: center; min-width: 45px; height: 32px; padding: 0 8px; border-radius: 10px; color: #2373e7; background: #fff; font-size: 13px; box-shadow: 0 5px 14px rgba(34, 100, 198, .1); }
.week-block, .week-lessons { padding: 12px 16px 0; }
.week-lessons { display: grid; gap: 7px; }
.lesson-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; color: #405676; background: #f7f9fd; }
.lesson-line small { color: #8795aa; font-size: 10px; white-space: nowrap; }
.lesson-line a { color: var(--blue); font-size: 11px; font-weight: 700; text-decoration: none; }
.checkpoint { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: start; gap: 7px; margin: 13px 16px 15px; padding: 11px 12px; border-radius: 10px; color: #4f7f71; background: #eaf9f4; line-height: 1.6; }
.checkpoint span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--mint); font-size: 10px; }
.checkpoint strong { white-space: nowrap; }
.plan-sources { padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; color: #5f7392; background: #fbfcfe; }
.plan-sources summary { cursor: pointer; color: #345781; font-weight: 700; }
.plan-sources p { margin: 9px 0 0; }
.plan-sources small { margin-left: 8px; color: #9aa6b8; }
@media (max-width: 760px) { .plan-dialog { left: 50%; top: 50%; width: calc(100vw - 24px); height: auto; min-height: 0; transform: translate(-50%, -50%); }.plan-dialog .dialog-layout { height: auto; min-height: 0; } }
@media (max-width: 1050px) { .weekly-card { height: auto; overflow: visible; } }
@media (max-width: 500px) { .plan-hero { display: block; }.plan-hero > small { display: inline-block; margin-top: 9px; }.plan-quality-heading { align-items: flex-start; flex-direction: column; }.lesson-line { grid-template-columns: minmax(0, 1fr) auto; }.lesson-line a,.lesson-line .plan-lesson-play { grid-column: 1 / -1; justify-self:start; }.checkpoint { grid-template-columns: 18px minmax(0, 1fr); }.checkpoint strong { white-space: normal; }.checkpoint:not(:has(strong)) { grid-template-columns: 18px 1fr; } }

/* The optional planning prompt made the original 394px dialog too short and
   clipped its actions. Let the dialog grow, and scroll only when the viewport
   is genuinely too small so the primary action remains reachable. */
.plan-dialog {
  top: 50%;
  height: min(700px, calc(100dvh - 40px));
  min-height: 0;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
.plan-dialog .dialog-layout {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}
.plan-dialog .dialog-content {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  scrollbar-gutter: stable;
}
.plan-dialog .dialog-actions {
  position: sticky;
  bottom: -1px;
  z-index: 1;
  padding: 12px 0 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), #fff 30%);
}
.plan-availability {
  margin: 10px 0 5px;
  padding: 10px 12px;
  border: 1px solid #dceafa;
  border-radius: 10px;
  background: #f5f9ff;
  color: #48638b;
  font-size: 12px;
  line-height: 1.5;
}
.plan-availability[data-state="error"] {
  border-color: #f2d9dd;
  background: #fff6f7;
  color: #a44150;
}
.plan-dialog select:disabled,
.plan-dialog button:disabled { cursor: not-allowed; opacity: .58; }
@media (max-height: 620px) {
  .plan-dialog,
  .plan-dialog .dialog-layout {
    min-height: 0;
  }
}
@media (max-width: 500px) {
  .plan-dialog {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  .plan-dialog .dialog-layout {
    max-height: none;
  }
  .plan-dialog .dialog-content {
    overflow: visible;
  }
  .plan-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-right: -8px;
    margin-left: -8px;
    padding: 12px 8px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.88), #fff 28%);
  }
}
.continue-plan{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding:18px 22px;border:1px solid #dbe6f7;border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(40,74,130,.06)}
.continue-plan strong,.continue-plan span{display:block}.continue-plan strong{font-size:18px;color:#142b4f}.continue-plan span{margin-top:4px;color:#7184a4;font-size:13px}.continue-plan .eyebrow{margin:0 0 5px;color:#3c80ef;font-size:11px;letter-spacing:.14em}
.course-video{display:block;width:100%;max-height:360px;margin:18px 0;border-radius:14px;background:#071a36}.course-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.course-detail-actions .primary-button,.course-detail-actions .secondary-button{display:inline-flex;align-items:center;justify-content:center}
.course-playback-status{margin:0 0 12px;padding:12px 14px;border:1px solid #f2c9ce;border-radius:11px;background:#fff3f4;color:#a7394a;font-size:13px;line-height:1.5}
#settingCompleted{display:block;margin-top:6px;padding:10px 12px;border:1px solid #e0e8f4;border-radius:10px;background:#f8fbff;color:#7184a4;font-size:13px;font-weight:500}
.empty-bar{opacity:.55}

/* AI plan poster studio */
.plan-page-actions { display: grid; gap: 10px; margin-top: 20px; }
.plan-page-intro .plan-page-actions .primary-button { margin-top: 0; }
.plan-page-actions button { width: 100%; justify-content: center; }
.poster-entry { border: 1px solid #d9e5f5; color: #315c99; background: #f7faff; }
.poster-entry:hover { border-color: #b6d1f7; color: var(--blue); background: #eef5ff; }
.poster-entry:disabled { cursor: not-allowed; opacity: .52; }

.poster-dialog { position: fixed; inset: 50% auto auto 50%; width: min(1180px, calc(100vw - 44px)); height: min(780px, calc(100dvh - 44px)); margin: 0; overflow: hidden; border-radius: 26px; background: #fff; transform: translate(-50%, -50%); }
.poster-dialog::backdrop { background: rgba(12, 31, 63, .58); backdrop-filter: blur(9px); }
.poster-dialog-close { z-index: 5; top: 18px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #657794; background: rgba(255,255,255,.9); box-shadow: 0 5px 18px rgba(24,57,106,.12); cursor: pointer; }
.poster-studio { display: grid; grid-template-columns: 390px minmax(0, 1fr); height: 100%; }
.poster-controls { position: relative; z-index: 1; padding: 34px 30px 26px; overflow-y: auto; border-right: 1px solid #e8eef7; background: #fff; }
.poster-controls h2 { margin: 0; color: #10284f; font-size: 28px; line-height: 1.22; letter-spacing: -.045em; }
.poster-lead { margin: 9px 0 0; color: #7b8aa1; font-size: 13px; line-height: 1.58; }
.poster-control-group { margin-top: 18px; }
.poster-control-group > strong { color: #2c4264; font-size: 13px; }
.poster-theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.poster-theme { display: flex; min-width: 0; min-height: 76px; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 8px; border: 1px solid #e0e8f3; border-radius: 13px; color: #31496d; background: #fff; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.poster-theme:hover { transform: translateY(-1px); border-color: #b9d1f3; }
.poster-theme.active { border-color: #6ca8fb; box-shadow: 0 0 0 3px rgba(22,119,255,.1), 0 9px 20px rgba(44,95,170,.08); }
.poster-theme span { display: block; min-width: 0; font-size: 12px; font-weight: 750; }
.poster-theme small { display: block; margin-top: 1px; overflow: hidden; color: #91a0b5; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.theme-swatch { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.theme-swatch.aurora { background: linear-gradient(145deg, #1677ff, #7b68fa 58%, #dceaff); }
.theme-swatch.midnight { background: linear-gradient(145deg, #07152f, #1f4b82 62%, #8d7cff); }
.theme-swatch.paper-tone { background: linear-gradient(145deg, #fffaf0, #e7d5ba 64%, #e15b3f); }
.poster-export-note { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 10px; border-radius: 11px; background: #f4f8fd; }
.poster-export-note span { display: inline-block; padding: 4px 8px; border-radius: 7px; color: #2871d4; background: #e5f0ff; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.poster-export-note p { margin: 0; color: #7c8da7; font-size: 10px; line-height: 1.35; }
.poster-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.poster-actions button { width: 100%; }
.poster-prompt { display: grid; gap: 6px; margin-top: 14px; color: #2c4264; font-size: 12px; font-weight: 750; }
.poster-prompt textarea { width: 100%; min-height: 62px; resize: vertical; padding: 9px 11px; border: 1px solid #dce6f3; border-radius: 11px; color: #203a60; background: #fbfdff; font: 500 12px/1.45 inherit; outline: 0; }
.poster-prompt textarea:focus { border-color: #6ca8fb; box-shadow: 0 0 0 3px rgba(22,119,255,.1); }

/* Read-only course knowledge graph on the learner course-library page. */
.page-view[data-page="courses"].active{display:flex;flex-direction:column}.learner-graph-section{order:-1;margin:0 0 24px}.graph-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.graph-stats>div{position:relative;min-width:0;padding:18px 20px;border:1px solid #dfe8f3;border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(30,75,138,.055);overflow:hidden}.graph-stats>div:after{content:"";position:absolute;right:-12px;bottom:-20px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#e4f0ff,transparent 68%)}.graph-stats span,.graph-stats strong,.graph-stats small{display:block}.graph-stats span{color:#7185a2;font-size:11px;font-weight:700}.graph-stats strong{margin:5px 0 2px;color:#10284d;font-size:27px;letter-spacing:-.045em}.graph-stats small{color:#91a0b5;font-size:10px}
.graph-panel{overflow:hidden;border:1px solid #d7e4f2;border-radius:24px;background:#fff;box-shadow:0 20px 55px rgba(21,61,116,.1)}.graph-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 25px 19px;border-bottom:1px solid #e2eaf4}.graph-toolbar h2{margin:4px 0 2px;font-size:24px;letter-spacing:-.03em}.graph-toolbar>div:first-child>p:last-child{margin:0;color:#7487a3;font-size:12px}.graph-filters{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:8px}.graph-filters label{display:grid;gap:5px;margin:0;color:#7183a0;font-size:10px;font-weight:700}.graph-filters select,.graph-filters input{height:40px;padding:8px 11px;border:1px solid #d8e4f1;border-radius:10px;background:#f9fbfe;color:#1c3354;font:inherit;font-size:12px}.graph-filters select{width:210px}.graph-filters input{width:205px}.graph-filters button{height:40px;padding:0 15px;border:1px solid #d8e4f1;border-radius:10px;background:#fff;color:#496584;font-size:12px;font-weight:700;cursor:pointer}
.graph-visibility{margin:0;padding:12px 25px;background:#f2f7ff;border-bottom:1px solid #dce8f8;color:#426489;font-size:13px;line-height:1.5}
.graph-search-results{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #dce7f3;background:#f6f9fe}.graph-search-results[hidden]{display:none}.graph-search-results>span{flex:0 0 auto;color:#6b809d;font-size:10px;font-weight:750}.graph-search-results>div{display:flex;gap:6px;min-width:0;overflow:auto;scrollbar-width:thin}.graph-search-results button{flex:0 0 auto;max-width:230px;overflow:hidden;padding:6px 10px;border:1px solid #d9e4f2;border-radius:999px;color:#456587;background:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:10px;cursor:pointer}.graph-search-results button:hover{border-color:#96bdf0;color:#176ddc;background:#eef6ff}
.graph-workspace{position:relative;height:min(690px,calc(100vh - 210px));min-height:570px;overflow:hidden;background:radial-gradient(circle at 30% 10%,rgba(28,82,151,.42),transparent 35%),linear-gradient(145deg,#07182d 0,#061326 52%,#040d1c 100%)}#knowledgeGraphCanvas{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:none}#knowledgeGraphCanvas.dragging{cursor:grabbing}#knowledgeGraphCanvas:focus-visible{box-shadow:inset 0 0 0 2px #4b9aff}.graph-loading{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#ddebff;background:linear-gradient(145deg,#07182df2,#040d1cf2)}.graph-loading[hidden]{display:none}.graph-loading i{width:34px;height:34px;margin-bottom:8px;border:2px solid #31567f;border-top-color:#68a4ff;border-radius:50%;animation:graphSpin .8s linear infinite}.graph-loading strong{font-size:15px}.graph-loading span{color:#7896b9;font-size:11px}@keyframes graphSpin{to{transform:rotate(360deg)}}
.graph-controls{position:absolute;z-index:4;left:18px;top:18px;display:grid;overflow:hidden;border:1px solid rgba(153,190,230,.2);border-radius:12px;background:rgba(5,21,42,.76);box-shadow:0 12px 35px rgba(0,0,0,.18);backdrop-filter:blur(14px)}.graph-controls button{width:39px;height:37px;border:0;border-bottom:1px solid rgba(153,190,230,.14);background:transparent;color:#c6dbf4;font-size:20px;cursor:pointer}.graph-controls button:last-child{border:0;font-size:17px}.graph-controls button:hover{background:rgba(71,139,224,.23);color:#fff}.graph-hint{position:absolute;z-index:2;left:18px;bottom:17px;padding:7px 11px;border:1px solid rgba(143,181,221,.13);border-radius:999px;color:#809dbd;background:rgba(4,17,35,.6);font-size:10px;letter-spacing:.02em;backdrop-filter:blur(10px)}
.graph-inspector{position:absolute;z-index:3;right:14px;top:14px;bottom:14px;width:292px;padding:22px;border:1px solid rgba(146,185,226,.18);border-radius:18px;color:#dceaff;background:linear-gradient(165deg,rgba(15,42,75,.91),rgba(5,22,44,.92));box-shadow:0 20px 55px rgba(0,0,0,.25);backdrop-filter:blur(18px);overflow:auto}.graph-inspector h3{margin:8px 0 10px;color:#fff;font-size:19px;line-height:1.35;letter-spacing:-.02em}.inspector-empty{display:flex;height:100%;align-items:flex-start;justify-content:center;flex-direction:column}.inspector-empty>p:last-child{margin:4px 0 0;color:#819dbc;font-size:12px;line-height:1.7}.inspector-orbit{position:relative;width:68px;height:68px;margin-bottom:24px;border:1px solid rgba(102,162,229,.4);border-radius:50%;box-shadow:inset 0 0 25px rgba(35,112,208,.18)}.inspector-orbit:before,.inspector-orbit:after{content:"";position:absolute;border-radius:50%;background:#5a9cff;box-shadow:0 0 15px #3d8bf0}.inspector-orbit:before{left:27px;top:27px;width:12px;height:12px}.inspector-orbit:after{right:-3px;top:12px;width:7px;height:7px}.inspector-type{display:inline-block;padding:5px 8px;border:1px solid rgba(96,155,224,.25);border-radius:999px;color:#75adf4;background:rgba(43,103,178,.13);font-size:9px;font-weight:800;letter-spacing:.1em}.inspector-path{padding-bottom:15px;border-bottom:1px solid rgba(151,185,221,.15);color:#829ebd;font-size:10px;line-height:1.65}.inspector-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0}.inspector-metrics>div{padding:10px 7px;border:1px solid rgba(142,179,217,.13);border-radius:11px;background:rgba(255,255,255,.035);text-align:center}.inspector-metrics strong,.inspector-metrics span{display:block}.inspector-metrics strong{color:#fff;font-size:14px}.inspector-metrics span{margin-top:3px;color:#7896b9;font-size:9px}.inspector-tags{display:flex;gap:5px;flex-wrap:wrap}.inspector-tags span{padding:4px 7px;border-radius:999px;color:#92daca;background:rgba(49,196,158,.12);font-size:9px}.inspector-play,.graph-inspector button{display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:14px;padding:11px 12px;border:0;border-radius:10px;text-decoration:none;font-size:11px;font-weight:700}.inspector-play{color:#fff;background:#1677ff;box-shadow:0 8px 20px rgba(22,119,255,.24)}.inspector-play[hidden]{display:none}.graph-inspector button{justify-content:center;color:#a9c2df;background:rgba(255,255,255,.07);cursor:pointer}.graph-inspector button:hover{color:#fff;background:rgba(255,255,255,.11)}.inspector-empty[hidden],#inspectorContent[hidden]{display:none!important}
.graph-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:49px;padding:10px 20px;border-top:1px solid #dfe8f2;background:#fbfdff}.graph-footer p{margin:0;color:#7387a3;font-size:10px;white-space:nowrap}.graph-legend{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.graph-legend span{display:flex;align-items:center;gap:6px;color:#647994;font-size:10px}.graph-legend i{width:8px;height:8px;border-radius:50%;background:#7894bb}.graph-legend .root-dot{background:#eaf5ff;box-shadow:0 0 0 2px #c7dcf6}.graph-legend .collection-dot{background:#4d8dff}.graph-legend .group-dot{background:#9b86ff}.graph-legend .lesson-dot{width:5px;height:5px;background:#7894bb}.graph-legend .indexed-dot{width:5px;height:5px;background:#43ddb0}
@media(max-width:1050px){.graph-stats{grid-template-columns:repeat(3,1fr)}.graph-toolbar{align-items:flex-start;flex-direction:column}.graph-filters{width:100%;justify-content:flex-start}.graph-workspace{height:660px}.graph-inspector{width:265px}}@media(max-width:760px){.graph-stats{grid-template-columns:repeat(2,1fr)}.graph-filters{display:grid;grid-template-columns:1fr 1fr}.graph-filters label,.graph-filters select,.graph-filters input{width:100%}.graph-filters button{align-self:end}.graph-workspace{height:760px;min-height:700px;padding-bottom:245px}.graph-inspector{top:auto;left:12px;right:12px;bottom:12px;width:auto;height:220px}.inspector-empty{justify-content:center}.inspector-orbit{display:none}.inspector-metrics{margin:10px 0}.graph-hint{bottom:244px}.graph-footer{align-items:flex-start;flex-direction:column}.graph-footer p{white-space:normal}}@media(max-width:520px){.graph-stats{gap:8px}.graph-stats>div{padding:15px}.graph-stats>div:last-child{grid-column:span 2}.graph-toolbar{padding:18px}.graph-filters{grid-template-columns:1fr}.graph-workspace{height:720px}.graph-legend{gap:9px}}
.poster-generate-button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; margin-top: 14px; padding: 11px 14px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(135deg,#1677ff,#6d5dfc); box-shadow: 0 12px 25px rgba(46,104,229,.24); cursor: pointer; text-align: left; }
.poster-generate-button > span:first-child { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255,255,255,.16); font-size: 19px; }
.poster-generate-button > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.poster-generate-button strong { font-size: 14px; }
.poster-generate-button small { overflow: hidden; color: rgba(255,255,255,.73); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.poster-generate-button b { font-size: 18px; }
.poster-generate-button:disabled { cursor: wait; opacity: .7; }
.poster-ai-status { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding: 9px 2px 0; color: #7d8da6; font-size: 11px; line-height: 1.45; }
.poster-ai-status i { flex: 0 0 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #a8b6c9; }
.poster-ai-status[data-state="busy"] i { background: #1677ff; box-shadow: 0 0 0 4px rgba(22,119,255,.12); animation: poster-pulse 1.1s infinite; }
.poster-ai-status[data-state="ready"] { color: #168869; }
.poster-ai-status[data-state="ready"] i { background: #29b98c; }
.poster-ai-status[data-state="error"] { color: #c84a4a; }
.poster-ai-status[data-state="error"] i { background: #e15b5b; }
@keyframes poster-pulse { 50% { opacity: .36; transform: scale(.75); } }
.poster-preview-area { display: flex; min-width: 0; flex-direction: column; padding: 31px 44px 38px; overflow: hidden; background: radial-gradient(circle at 78% 18%, #f8fbff, transparent 42%), #edf2f8; }
.poster-preview-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 30px; color: #76879f; font-size: 12px; }
.poster-preview-toolbar span { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.poster-preview-toolbar i { width: 8px; height: 8px; border-radius: 50%; background: #32bb91; box-shadow: 0 0 0 4px rgba(50,187,145,.12); }
.poster-preview-toolbar small { padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.72); }
.poster-preview-frame { min-height: 0; flex: 1; display: grid; place-items: start center; padding: 13px 0 0; overflow: auto; scrollbar-width: thin; }
.poster-preview { height: 100%; max-height: 665px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 5px; background: #fff; box-shadow: 0 26px 65px rgba(24,50,91,.22), 0 0 0 1px rgba(28,60,105,.07); }
.poster-preview svg { display: block; width: 100%; height: 100%; }
.poster-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.poster-preview.long { width: min(100%, 420px); height: auto; max-height: none; aspect-ratio: 1 / 4; overflow: visible; }
.poster-preview.long > img { height: auto; }
.poster-preview:has(.poster-page-viewer) { width: min(100%, 720px); height: auto; max-height: none; aspect-ratio: auto; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.poster-page-viewer { width: 100%; display: grid; gap: 16px; justify-items: center; }
.poster-page-viewer > img { display: block; width: min(100%, 720px); aspect-ratio: 3 / 4; object-fit: contain; border-radius: 8px; box-shadow: 0 22px 56px rgba(18,45,83,.18); background: #fff; }
.poster-page-nav { width: min(100%, 720px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.poster-page-nav button { min-height: 40px; border: 1px solid #cfddf0; border-radius: 12px; background: #fff; color: #315077; font-weight: 750; cursor: pointer; }
.poster-page-nav button:disabled { opacity: .42; cursor: default; }
.poster-page-nav strong { color: #17335b; font-size: 14px; }
.poster-page-dots { display: flex; gap: 8px; justify-content: center; }
.poster-page-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #c4d2e6; cursor: pointer; }
.poster-page-dots button.active { width: 26px; background: #1f76ff; }
.poster-preview:has(.poster-empty-preview) { width: min(100%, 720px); height: min(64vh, 665px); aspect-ratio: 3 / 4; }
.poster-empty-preview { height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 44px; text-align: center; color: #7a8ba5; background: linear-gradient(145deg,#fff,#f5f8fd); }
.poster-empty-preview span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; font-size: 25px; background: linear-gradient(135deg,#1677ff,#7258ff); box-shadow: 0 14px 32px rgba(31,118,255,.22); }
.poster-empty-preview strong { color: #17335b; font-size: 20px; }
.poster-empty-preview p { max-width: 320px; margin: 0; line-height: 1.7; }

@media (max-width: 900px) {
  .poster-dialog { width: min(700px, calc(100vw - 24px)); height: calc(100dvh - 24px); overflow-y: auto; }
  .poster-studio { grid-template-columns: 1fr; height: auto; }
  .poster-controls { padding: 42px 26px 27px; overflow: visible; border-right: 0; border-bottom: 1px solid #e8eef7; }
  .poster-theme-picker { grid-template-columns: repeat(3, 1fr); }
  .poster-theme { min-height: 86px; flex-direction: column; align-items: flex-start; }
  .poster-theme span { display: block; }
  .poster-theme small { display: block; margin-top: 2px; }
  .poster-actions { grid-template-columns: 1fr 1fr; }
  .poster-preview-area { min-height: 760px; padding: 24px; }
}
@media (max-width: 560px) {
  .poster-dialog { border-radius: 19px; }
  .poster-controls { padding: 40px 18px 22px; }
  .poster-controls h2 { padding-right: 28px; font-size: 25px; }
  .poster-theme-picker { grid-template-columns: 1fr; }
  .poster-theme { min-height: 60px; flex-direction: row; align-items: center; }
  .poster-theme span { display: flex; }
  .poster-actions { grid-template-columns: 1fr; }
  .poster-preview-area { min-height: 560px; padding: 18px 12px 26px; }
  .poster-preview { width: min(100%, 390px); height: auto; }
}

/* Course navigation and dedicated learning workspace. */
.featured-navigation{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.featured-navigation>span{color:#7187a9;font-size:12px;font-variant-numeric:tabular-nums}.featured-navigation button{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d6e4f5;border-radius:10px;background:#fff;color:#2475ee;font-size:18px;cursor:pointer}.featured-navigation button:disabled{opacity:.35;cursor:default}.featured-courses.slide-in{animation:featured-slide .22s ease-out}@keyframes featured-slide{from{opacity:.55;transform:translateX(10px)}to{opacity:1;transform:none}}
.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}.study-main,.study-sidebar{min-width:0;border:1px solid #dce8f7;border-radius:22px;background:#fff;box-shadow:0 15px 40px rgba(33,73,129,.07)}.study-main{overflow:hidden}.study-heading{padding:28px 30px 20px}.study-heading h2{margin:6px 0 8px;color:#10284d;font-size:26px;line-height:1.35}.study-heading p:last-child{margin:0;color:#7185a3}.study-media{display:grid;min-height:410px;place-items:center;background:#07162b}.study-video{display:block;width:100%;max-height:65vh;min-height:360px;background:#07162b}.study-empty{display:grid;gap:10px;place-items:center;color:#d7e8ff;text-align:center}.study-empty span{font-size:38px}.study-empty p{margin:0;color:#91a9c8}.study-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 30px;border-bottom:1px solid #e5edf7}.study-actions>span{color:#6681a2;font-size:13px}.study-description{padding:24px 30px 30px;color:#526b8b;line-height:1.7}.study-description h3{margin:0 0 9px;color:#173b69}.study-course-meta{font-size:12px}.study-sidebar{position:sticky;top:16px;overflow:hidden}.study-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px}.study-sidebar-head h3{margin:0;color:#16345c}.study-sidebar-head span{color:#7088a9;font-size:12px}.study-sidebar-search{display:block;margin:0 18px 9px}.study-sidebar-search input{width:100%;padding:9px 12px;border:1px solid #d9e6f5;border-radius:10px;color:#264e78;background:#f8fbff;outline:0}.study-sidebar-search input:focus{border-color:#6aa7f5;box-shadow:0 0 0 3px rgba(22,119,255,.1)}.study-lesson-list{max-height:min(74vh,720px);overflow:auto;padding:0 12px 14px}.study-lesson{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0;padding:12px;border:0;border-radius:12px;background:transparent;color:#213f67;text-align:left;cursor:pointer}.study-lesson:hover,.study-lesson.active{background:#eaf3ff}.study-lesson-index{color:#8aa1bf;font-size:11px}.study-lesson-copy{display:grid;gap:3px;min-width:0;flex:1}.study-lesson-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.study-lesson-copy small{color:#8397b0;font-size:11px}.study-lesson-progress{flex:0 0 auto;color:#1978ee;font-size:11px;font-weight:800}
.plan-page-panel{display:block;padding:30px 36px}.plan-page-intro{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px;align-items:center;margin-bottom:24px}.plan-page-intro>.eyebrow,.plan-page-intro>h2,.plan-page-intro>p:not(.eyebrow){grid-column:1}.plan-page-intro>h2{margin:4px 0}.plan-page-intro>p:not(.eyebrow){margin:4px 0 0}.plan-page-actions{grid-column:2;grid-row:1 / span 3;display:flex;gap:10px;margin:0}.plan-page-actions button{width:auto;min-width:156px}.plan-page-body{min-width:0}.plan-study-list{margin-bottom:20px;border:1px solid #dce8f7;border-radius:19px;background:#f9fbff;overflow:hidden}.plan-study-list[hidden]{display:none}.plan-study-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;background:#eff6ff}.plan-study-heading h3{margin:4px 0;color:#14375e;font-size:21px}.plan-study-heading p:last-child{margin:0;color:#7187a5;font-size:12px}.plan-study-heading>strong{color:#1677ff;font-size:28px}.plan-study-week{padding:14px 20px;border-top:1px solid #e1ebf7}.plan-study-week h4{display:flex;justify-content:space-between;margin:0 0 8px;color:#16345c}.plan-study-week h4 span{color:#8092aa;font-size:11px;font-weight:500}.plan-study-lesson{display:flex;align-items:center;gap:12px;width:100%;margin:5px 0;padding:11px 12px;border:1px solid #e6edf7;border-radius:10px;background:#fff;color:#254465;text-align:left;cursor:pointer}.plan-study-lesson:hover{border-color:#8bbafa;background:#f4f9ff}.plan-study-lesson>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:#e8f2ff;color:#1677ff;font-size:10px}.plan-study-lesson.done>span{background:#e0f7ef;color:#189871}.plan-study-lesson strong{flex:1;min-width:0;font-size:12px}.plan-study-lesson small{color:#7890ad;font-size:11px}.plan-details{margin-top:18px}.plan-details summary{padding:14px 17px;border:1px solid #dce7f5;border-radius:10px;color:#456a96;background:#f5f9ff;cursor:pointer;font-weight:700}.plan-details .plan-weeks{margin-top:12px}.plan-page-panel .plan-result{min-height:0}.plan-page-panel .plan-rendered{padding:0}
.file-picker{min-height:78px!important;gap:10px;padding:13px 17px!important;background:#f8fbff}.file-picker.drag-over,.file-picker:focus-visible{border-color:#1677ff;box-shadow:0 0 0 4px rgba(22,119,255,.12);outline:0}.file-picker>span:last-child{display:grid;gap:3px;min-width:0}.file-picker strong{color:#204872;font-size:13px}.file-picker #filePickerLabel{color:#8499b4!important;font-size:11px!important}.file-picker .upload-icon{font-size:25px}
.graph-search-results{display:block;padding:14px 20px}.graph-search-results>span{display:block;margin-bottom:8px;font-size:12px}.graph-search-results>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:260px;overflow:auto}.graph-search-results button{display:grid;gap:4px;max-width:none;min-width:0;padding:11px 13px;border-radius:11px;text-align:left;white-space:normal}.graph-search-results button small{color:#1677ff;font-size:10px}.graph-search-results button strong{overflow:hidden;color:#244667;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.graph-search-results button span{color:#8598b2;font-size:10px}.course-search-panel{margin-bottom:20px;padding:20px;border:1px solid #dce8f7;border-radius:18px;background:#fff}.course-search-panel[hidden]{display:none}.course-search-heading{display:flex;align-items:center;justify-content:space-between}.course-search-heading h2{margin:4px 0 12px;color:#183b65;font-size:21px}.course-search-heading button,.course-search-list button{padding:8px 12px;border:1px solid #cfe0f6;border-radius:9px;background:#fff;color:#1677ff;cursor:pointer}.course-search-list{display:grid;gap:8px;max-height:420px;overflow:auto}.course-search-list article{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;border:1px solid #e5edf7;border-radius:11px}.course-search-list strong{font-size:13px}.course-search-list p{margin:4px 0 0;color:#8395ae;font-size:11px}
.notice-item{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}.notice-item.read{opacity:.55}.notice-dot.read{visibility:hidden}.background-task{position:fixed;z-index:80;right:22px;bottom:22px;display:flex;align-items:center;gap:8px;padding:12px 15px;border:1px solid #bad5f7;border-radius:14px;color:#174a84;background:#fff;box-shadow:0 12px 35px rgba(17,55,110,.18);cursor:pointer}.background-task[hidden]{display:none}.background-task-dot{width:8px;height:8px;border-radius:50%;background:#2cc6a2;animation:poster-pulse 1.1s infinite}.background-task small{color:#1677ff}
@media(max-width:1100px){.study-layout{grid-template-columns:1fr}.study-sidebar{position:static}.study-lesson-list{max-height:300px}}@media(max-width:760px){.graph-search-results>div{grid-template-columns:1fr}.study-heading,.study-actions,.study-description{padding-left:18px;padding-right:18px}.study-video{min-height:220px}.study-media{min-height:250px}.plan-study-lesson{flex-wrap:wrap}.plan-study-lesson small{margin-left:36px}}
@media(max-width:900px){.plan-page-intro{display:block}.plan-page-actions{margin-top:18px}.plan-page-panel{padding:24px 18px}}@media(max-width:560px){.plan-page-actions{display:grid;grid-template-columns:1fr}.plan-page-actions button{width:100%}}

/* Long-running AI work: show server-reported stages instead of a spinner. */
.generation-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(850px, calc(100vw - 32px));
  margin: 0;
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 26px;
  transform: translate(-50%, -50%);
}
.generation-dialog::backdrop { background: rgba(10, 28, 58, .62); backdrop-filter: blur(10px); }
.generation-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 510px; background: #fff; }
.generation-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 26% 18%, rgba(103,219,255,.55), transparent 24%), linear-gradient(145deg, #0d55d9, #2537ad 54%, #6b48db);
}
.generation-visual::before, .generation-visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.generation-visual::before { width: 340px; height: 340px; }
.generation-visual::after { width: 450px; height: 450px; }
.generation-orbit { position: relative; width: 148px; height: 148px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; }
.generation-orbit::before, .generation-orbit::after { content: ""; position: absolute; inset: 17px; border: 1px dashed rgba(255,255,255,.34); border-radius: 50%; animation: generation-spin 12s linear infinite; }
.generation-orbit::after { inset: 37px; border-style: solid; animation-direction: reverse; animation-duration: 7s; }
.generation-orbit > span { position: relative; z-index: 2; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 19px; color: #1e5ad4; background: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 16px 38px rgba(8,25,73,.28); }
.generation-orbit > i { position: absolute; z-index: 3; width: 9px; height: 9px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: #6ff0cf; box-shadow: 0 0 18px rgba(111,240,207,.85); }
.generation-orbit > i:nth-child(1) { top: -4px; left: 67px; }
.generation-orbit > i:nth-child(2) { right: 8px; bottom: 23px; }
.generation-orbit > i:nth-child(3) { left: 4px; bottom: 32px; }
.generation-visual-copy { position: absolute; left: 30px; right: 30px; bottom: 33px; display: flex; align-items: end; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.24); padding-top: 17px; }
.generation-visual-copy small { font-size: 10px; font-weight: 800; letter-spacing: .16em; opacity: .8; }
.generation-visual-copy strong { font-size: 25px; }
@keyframes generation-spin { to { transform: rotate(360deg); } }

.generation-content { display: flex; min-width: 0; flex-direction: column; padding: 40px 42px 34px; }
.generation-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.generation-heading time { color: #8492aa; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.generation-content h2 { margin: 23px 0 7px; color: #10284f; font-size: 29px; letter-spacing: -.04em; }
.generation-content > p { min-height: 45px; margin: 0; color: #73849f; line-height: 1.7; }
.generation-progress { height: 9px; overflow: hidden; margin: 20px 0 24px; border-radius: 99px; background: #eaf0f8; }
.generation-progress > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1777ff, #6d55ff, #42d7b0); box-shadow: 0 0 18px rgba(41,120,255,.28); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.generation-steps { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.generation-steps li { position: relative; min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 42px; border-radius: 11px; color: #8a97aa; font-size: 13px; transition: color .2s, background .2s; }
.generation-steps li::before { content: ""; position: absolute; left: 13px; width: 14px; height: 14px; border: 2px solid #cbd6e6; border-radius: 50%; background: #fff; }
.generation-steps li.active { color: #224b86; background: #f0f6ff; font-weight: 700; }
.generation-steps li.active::before { border-color: var(--blue); border-top-color: transparent; animation: generation-spin .85s linear infinite; }
.generation-steps li.done { color: #3f6b61; }
.generation-steps li.done::before { content: "✓"; display: grid; place-items: center; border-color: #35bf96; color: #fff; background: #35bf96; font-size: 9px; font-weight: 900; }
.generation-steps li.failed { color: #ba4050; background: #fff2f4; }
.generation-steps li.failed::before { content: "!"; display: grid; place-items: center; border-color: #dc5365; color: #fff; background: #dc5365; font-size: 9px; font-weight: 900; }
.generation-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; color: #8a98ad; font-size: 11px; }
.generation-foot > span { display: flex; align-items: center; gap: 7px; }
.generation-foot > span i { width: 7px; height: 7px; border-radius: 50%; background: #3bc99f; box-shadow: 0 0 0 5px rgba(59,201,159,.1); }
.generation-foot button { min-height: 38px; padding: 0 18px; font-size: 12px; }

/* Routed workspaces already contain their own title; remove the duplicated page intro. */
body:not([data-route="overview"]) .welcome { display: none; }
body:not([data-route="overview"]) .top-header { min-height: 78px; padding-top: 0; }
body:not([data-route="overview"]) .library-panel,
body:not([data-route="overview"]) .workspace-panel,
body:not([data-route="overview"]) .plan-output-panel { margin-top: 12px; }

@media (max-width: 700px) {
  .generation-shell { grid-template-columns: 1fr; min-height: 0; }
  .generation-visual { min-height: 175px; }
  .generation-orbit { width: 105px; height: 105px; }
  .generation-visual-copy { bottom: 18px; }
  .generation-content { padding: 27px 21px 23px; }
  body:not([data-route="overview"]) .top-header { min-height: 78px; }
}

/* Course cards: stable information hierarchy at every viewport width. */
.course-card {
  height: auto;
  min-height: 450px;
  display: flex;
  flex-direction: column;
}
.course-art { height: 225px; flex: 0 0 225px; }
.course-cover-copy { bottom: 18px; gap: 5px; }
.course-cover-copy small,
.course-cover-copy em {
  display: block;
  max-width: calc(100% - 4px);
  overflow: hidden;
  color: rgba(255,255,255,.84);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .045em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-cover-copy em { color: rgba(255,255,255,.68); font-size: 9px; }
.course-cover-copy strong { display: none; }
.course-cover-copy span { margin-top: 3px; }
.course-body {
  height: auto;
  min-height: 225px;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto auto minmax(30px, auto) auto;
  align-content: start;
  gap: 10px;
  padding: 17px 17px 16px;
}
.course-body h3 {
  display: -webkit-box;
  min-height: 45px;
  overflow: hidden;
  margin: 0;
  font-size: 17px;
  line-height: 1.32;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.course-body p {
  display: -webkit-box;
  height: auto;
  min-height: 39px;
  max-height: 39px;
  overflow: hidden;
  margin: 0;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.course-meta-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  gap: 7px;
}
.level {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-duration { white-space: nowrap; }
.course-meta-line .match { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
.course-progress { width: 100%; min-width: 0; margin-top: 0; align-self: end; }
.course-progress > span:last-child { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1100px) and (min-width: 761px) {
  .featured-courses,
  .featured-courses.plan-courses[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .featured-courses,
  .featured-courses.plan-courses[data-count="4"] { grid-template-columns: 1fr; }
  .course-card { min-height: 245px; display: grid; grid-template-columns: minmax(170px, 40%) minmax(0, 1fr); }
  .course-art { width: 100%; height: 100%; min-height: 245px; }
  .course-body { min-height: 245px; }
}
@media (max-width: 500px) {
  .course-card { min-height: 0; display: flex; }
  .course-art { height: 200px; min-height: 200px; flex-basis: 200px; }
  .course-body { min-height: 220px; }
}

/* Poster studio: keep the complete 3:4 artwork in view; only the controls
   should scroll on desktop. The generated image itself is never cropped. */
.poster-dialog {
  width: min(1280px, calc(100vw - 48px));
  height: min(850px, calc(100dvh - 48px));
}
.poster-studio { grid-template-columns: minmax(340px, 390px) minmax(0, 1fr); }
.poster-controls {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 32px 28px 24px;
  scrollbar-width: thin;
}
.poster-controls h2 { font-size: 27px; }
.poster-lead { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.poster-control-group { margin-top: 27px; }
.poster-theme { min-height: 74px; }
.poster-prompt { margin-top: 23px; }
.poster-prompt textarea { min-height: 76px; }
.poster-generate-button { margin-top: 23px; }
.poster-clear-button { width: 100%; min-height: 40px; margin-top: 9px; padding: 9px 12px; font-size: 12px; line-height: 1.35; white-space: normal; }
.poster-controls-footer { margin-top: auto; padding-top: 24px; }
.poster-controls-footer { position: sticky; z-index: 2; bottom: -24px; margin: 14px -28px -24px; padding: 14px 28px 20px; border-top: 1px solid #e6edf7; background: #fff; box-shadow: 0 -12px 24px rgba(255,255,255,.88); }
.poster-export-note { margin-top: 0; }
.poster-actions { margin-top: 12px; }
.poster-actions button { min-height: 46px; padding-inline: 10px; white-space: nowrap; }
.poster-preview-area { min-height: 0; padding: 24px 32px 28px; }
.poster-preview-toolbar { flex: 0 0 auto; justify-content: flex-start; gap: 15px; padding-right: 50px; }
.poster-preview-frame {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px 8px 4px;
}
.poster-preview:has(.poster-page-viewer) {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
.poster-page-viewer {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}
.poster-page-viewer > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 16px 26px rgba(18,45,83,.18));
  object-fit: contain;
}
.poster-page-nav { justify-self: center; }
.poster-page-dots { justify-self: center; }

@media (max-width: 900px) {
  .poster-dialog { width: min(700px, calc(100vw - 24px)); height: calc(100dvh - 24px); overflow-y: auto; }
  .poster-studio { display: block; height: auto; }
  .poster-controls { overflow: visible; padding: 36px 26px 25px; }
  .poster-controls-footer { padding-top: 18px; }
  .poster-preview-area { min-height: 0; padding: 22px 24px 30px; }
  .poster-preview-frame { height: auto; overflow: visible; padding: 15px 0 0; }
  .poster-preview:has(.poster-page-viewer) { height: auto; overflow: visible; }
  .poster-page-viewer { height: auto; grid-template-rows: auto auto auto; }
  .poster-page-viewer > img { width: min(100%, 520px); height: auto; aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
  .poster-controls { padding: 30px 18px 22px; }
  .poster-controls h2 { font-size: 25px; }
  .poster-theme-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .poster-theme { min-height: 82px; flex-direction: column; align-items: flex-start; }
  .poster-theme span { display: block; }
  .poster-actions { grid-template-columns: 1fr 1fr; }
  .poster-preview-area { padding: 18px 14px 24px; }
  .poster-preview-toolbar { gap: 9px; font-size: 11px; }
}
.plan-week-workload { margin: 8px 0 14px; color: #7184a4; font-size: 13px; line-height: 1.6; }

.generation-detail[hidden] { display: none !important; }
.generation-detail { padding: 16px; margin: -8px 0 18px; border: 1px solid #dce8f8; border-radius: 14px; background: #f7faff; min-width: 0; }
.generation-detail-heading, .generation-batches li > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.generation-detail-heading { color: #25558c; font-size: 13px; }
.generation-detail-counts { margin: 8px 0; color: #617691; font-size: 12px; line-height: 1.7; }
.generation-phase-progress { height: 5px; overflow: hidden; background: #e0e9f6; border-radius: 4px; }
.generation-phase-progress i { display: block; height: 100%; background: #287bde; transition: width .3s; }
.generation-batches { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.generation-batches li { padding: 9px 10px; background: #fff; border-radius: 8px; font-size: 12px; }
.generation-batches strong { color: #335a87; white-space: nowrap; }
.generation-batches span, .generation-batches p { color: #72839a; }
.generation-batches p { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.6; }
@media(max-width:600px) { .generation-batches li > div { flex-wrap: wrap; gap: 4px; } }