/* Shared workspace shell and quiet reading surfaces. The accepted option B
   home keeps its own atmosphere, card artwork, and layout. */
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; }
.migration-app { min-height: 100vh; overflow-x: clip; overflow-y: visible; }
html:has(.migration-app), body:has(.migration-app) { overflow-x: clip; overflow-y: visible; }
html:has(.migration-app) { scrollbar-gutter: stable; }
.migration-header { height: 58px; position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; padding: 0 20px; }
.migration-label { margin-left: auto; font-size: 12px; color: var(--ep-text-muted); }
.migration-header .ep-global-site-entry { right: 20px; }
#sidebar { position: fixed; top: 58px; bottom: 0; display: flex; flex-direction: column; width: 260px; padding: 24px 16px 16px; overflow-y: auto; scrollbar-width: thin; z-index: 10; }
#sidebar h2 { font-size: 19px; font-weight: 700; line-height: 1.2; margin: 0; padding: 0; }
.ep-workspace-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 7px; }
.ep-workspace-brand__mark { display: grid; place-items: center; width: 36px; height: 39px; border: 1px solid #5c729899; border-radius: 12px; background: var(--ep-button-dark); color: #f3f7ff; box-shadow: inset 0 1px 0 #ffffff55, 0 5px 12px #233d6618; }
.ep-workspace-brand__mark svg { width: 26px; height: 26px; }
.ep-workspace-brand p { margin: 4px 0 0; color: #75849a; font-size: 12px; letter-spacing: .07em; }
.stCaption, #sidebar small { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#sidebar > .stCaption { margin: 4px 0 12px; line-height: 1.4; }
#desktop-nav { display: grid; flex: 0 0 auto; gap: 14px; margin: 28px 0 22px; }
#desktop-nav a { position: relative; display: flex; align-items: center; gap: 12px; color: #54657e; text-decoration: none; padding: 11px 14px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 500; text-align: left; transition: background .15s, border-color .15s; }
#desktop-nav a svg, .ep-sidebar-avatar svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#desktop-nav a svg { color: #7a8ba4; }
#desktop-nav a:not([aria-current="page"]):hover { background: #eaf0f880; color: #304b73; }
#desktop-nav a[aria-current="page"] { background: linear-gradient(115deg, #fbf9f5, #edf3fc); border-color: #b5c7e177; color: #304c78; box-shadow: 0 3px 10px #29476e08; font-weight: 700; }
#desktop-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -1px; top: 13px; bottom: 13px; width: 3px; border-radius: 4px; background: #526e9b; }
#desktop-nav a[aria-current="page"] svg { color: #4a6893; }
.ep-nav-group { display: grid; gap: 3px; }
.ep-nav-group__label { padding: 0 14px 5px; color: #8591a3; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
#sidebar hr { border: 0; border-top: 1px solid var(--ep-border); margin: 18px 0; }
#sidebar .migration-button { width: 100%; min-height: 42px; padding: 8px 10px; margin: 4px 0; }
#sidebar .ep-sidebar-quota { gap: .4rem; padding: .7rem .8rem; }
#sidebar #sidebar-account .migration-button { margin-top: .5rem; }
.ep-sidebar-footer { display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px; margin-top: auto; padding: 13px; border: 1px solid #c5d2e366; border-radius: 16px; background: linear-gradient(145deg, #fbf9f5db, #f5f8fce6); box-shadow: 0 6px 22px #324d7205; }
.ep-sidebar-footer #sidebar-account { display: contents; }
#sidebar .ep-sidebar-footer .ep-sidebar-quota { order: 0; gap: 7px; padding: 0 1px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#sidebar .ep-sidebar-quota strong { color: #536783; font-size: 12px; font-weight: 650; }
#sidebar .ep-sidebar-quota p { font-size: 12px; }
#sidebar .ep-sidebar-quota b { font-variant-numeric: tabular-nums; font-weight: 650; }
#sidebar .ep-sidebar-purchase { display: flex; order: 1; align-items: center; justify-content: space-between; min-height: 36px; margin: 0; padding: 7px 10px; border-color: #bbcce380; border-radius: 8px; color: #3e587e; background: linear-gradient(110deg, #fbf9f5, #eef3fb); font-size: 12px; font-weight: 600; box-shadow: inset 0 1px 0 #fff; }
.ep-sidebar-account-action, .ep-sidebar-identity { display: flex; order: 2; align-items: center; gap: 9px; min-width: 0; width: 100%; padding: 11px 0 0; border: 0; border-top: 1px solid #ccd7e566; color: #3f5574; background: transparent; font: inherit; text-align: left; }
.ep-sidebar-account-action { cursor: pointer; }
.ep-sidebar-account-action > span:last-child { margin-left: auto; color: #8494ad; }
.ep-sidebar-avatar { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border: 1px solid #c6d4e77a; border-radius: 50%; background: #eaf0f8; color: #6580a5; font-size: 12px; font-weight: 700; }
.ep-sidebar-account-action strong, .ep-sidebar-identity strong { display: block; color: #465b79; font-size: 12px; font-weight: 650; }
#sidebar .ep-sidebar-account-action small, #sidebar .ep-sidebar-identity small { display: block; margin-top: 2px; color: #8190a6; font-size: 12px; line-height: 1.3; }
.ep-sidebar-identity button { margin-left: auto; padding: 5px 0 5px 6px; border: 0; background: transparent; color: #7a899f; font: inherit; font-size: 12px; cursor: pointer; }
.ep-sidebar-account-action:hover strong, .ep-sidebar-identity button:hover { color: #254774; }
.migration-main { margin-left: 260px; padding-top: 58px; }
/* Accepted background A for work pages; the learning home keeps its original atmosphere. */
.migration-app:not(:has(.ep-home-welcome--layout-b)),
.migration-main:not(:has(.ep-home-welcome--layout-b)) {
  background:
    radial-gradient(ellipse at 100% 0%, #dfe9f6 0%, transparent 52%),
    linear-gradient(155deg, #f0f3f7 0%, #e8edf4 72%);
  background-attachment: fixed;
}
.migration-app:not(:has(.ep-home-welcome--layout-b)) #sidebar {
  background: linear-gradient(160deg, #fbf9f5ee, #f6f9fd);
  border-right-color: #b4c2d533;
}
.migration-main:not(:has(.ep-home-welcome--layout-b)) {
  --ep-text: #283f62;
  --ep-text-muted: #495e7d;
  --ep-mountain: #243c60;
  --ep-reading-surface: linear-gradient(112deg, #fbf9f5 0%, #fbf9f5 70%, #f5f7fb 100%);
  --ep-glass: var(--ep-reading-surface);
  --ep-surface: #fbf9f5;
  --ep-surface-alt: #f5f8fc;
  min-height: 100vh;
  color: var(--ep-text);
}
.migration-main .block-container { margin: 0 auto; padding-left: 5rem; padding-right: 5rem; }
.migration-account { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; margin: 0 0 .55rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.migration-account:empty { display: none; }
.st-key-desktop_account_bar { display: flex; }
.st-key-mobile_account_bar { display: none; }
.migration-account .migration-button { min-height: 36px; padding: 6px 12px; }
.migration-account p { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.migration-button { min-height: 44px; border: 1px solid rgba(151,175,208,.48); border-radius: 12px; background: var(--ep-reading-surface); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(53,81,124,.06); color: var(--ep-text); padding: 10px 12px; cursor: pointer; font: inherit; font-size: 14px; }
.migration-button:hover { border-color: var(--ep-primary); }
.migration-notice { font-size: 12px; line-height: 1.6; padding: 8px 0; margin: 8px 0; color: var(--ep-text-muted); }
.migration-notice:empty { display: none; }
.migration-error { border: 1px solid #ddc59e; border-radius: 12px; padding: 12px; background: #fff9eb; }
.migration-write-page { max-width: 1100px; margin: 0 auto; }
.migration-write-page > h1 { margin: 0.3rem 0 1.5rem; color: var(--ep-mountain); }
.migration-write-page > .stCaption { margin-bottom: 1rem; }
.migration-write-page details > summary { cursor: pointer; padding: 1rem 1.1rem; border: 1px solid var(--ep-border); border-radius: 12px; color: var(--ep-mountain); font-weight: 700; }
.migration-topic-bank { padding: 1rem; border: 1px solid var(--ep-border); border-top: 0; border-radius: 0 0 12px 12px; }
.migration-topic-bank h3 { margin: 0 0 0.7rem; }
.migration-category-label { display: block; margin-bottom: .4rem; color: var(--ep-text-muted); }
.migration-write-page .migration-category-picker { margin: 0 0 .85rem; }
.migration-write-page .migration-category-picker > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: .85rem 1rem; list-style: none; border: 1px solid rgba(151,175,208,.48); border-radius: 12px; background: var(--ep-reading-surface); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(53,81,124,.06); font-weight: 600; }
.migration-category-picker > summary::-webkit-details-marker { display: none; }
.migration-category-chevron { width: 9px; height: 9px; margin-right: .25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease; }
.migration-category-picker[open] .migration-category-chevron { transform: translateY(2px) rotate(225deg); }
.migration-category-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .55rem; padding: .65rem; border: 1px solid rgba(151,175,208,.48); border-radius: 12px; background: var(--ep-reading-surface); box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(53,81,124,.08); }
.migration-category-option { min-height: 44px; padding: .65rem .8rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ep-text); font: inherit; text-align: left; cursor: pointer; }
.migration-category-option:hover { border-color: rgba(151,175,208,.48); background: rgba(221,232,249,.54); }
.migration-category-option.is-selected { border-color: rgba(62,94,144,.28); background: var(--ep-button-silk); color: var(--ep-button-ink); box-shadow: inset 0 1px 0 rgba(216,234,255,.24); }
.migration-category-option:focus-visible, .migration-category-picker > summary:focus-visible { outline: 2px solid #426fa9; outline-offset: 2px; }
.migration-topic-card { padding: 1rem; border: 1px solid rgba(151,175,208,.48) !important; border-radius: 12px; background: var(--ep-reading-surface) !important; box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(53,81,124,.06); }
.migration-topic-card p { margin: 0.5rem 0; white-space: pre-line; }
.migration-topic-card .migration-button { width: 100%; }
.migration-info { padding: 0.7rem 0.85rem; border-radius: 8px; background: var(--ep-primary-soft); color: var(--ep-mountain); line-height: 1.6; }
.migration-info .migration-button { margin-right: 0.5rem; }
.st-key-essay_editor label { display: block; margin: 0.95rem 0 0.4rem; color: var(--ep-mountain); font-weight: 700; }
.st-key-essay_editor textarea { display: block; width: 100%; resize: vertical; padding: 0.9rem; border: 1px solid rgba(151,175,208,.48); border-radius: 12px; color: var(--ep-text); background: var(--ep-reading-surface); font: inherit; }
.migration-write-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 1rem 0; }
.migration-write-stats .score-card { display: grid; padding: 0.85rem; }
.migration-write-stats .score-card small { color: var(--ep-text-muted); }
.migration-write-submit { width: 100%; border-color: rgba(62,94,144,.28); background: var(--ep-button-silk); background-size: 115% 150%; background-position: 50% 45%; box-shadow: inset 0 1px 0 rgba(216,234,255,.24), 0 8px 22px rgba(40,71,116,.12); color: var(--ep-button-ink); font-weight: 700; }
.migration-write-submit:hover { background: var(--ep-button-silk); background-size: 115% 150%; background-position: 62% 55%; color: var(--ep-button-ink); }
#sidebar-toggle { display: none; border: 0; background: transparent; color: var(--ep-text); font-size: 22px; min-width: 44px; min-height: 44px; cursor: pointer; }
.migration-mobile-nav { display: none; }
.migration-mobile-nav a { min-width: 0; color: var(--ep-text-muted); text-align: center; padding: 14px 2px; text-decoration: none; font-size: 12px; font-weight: 720; border-radius: 8px; }
.migration-mobile-nav a[aria-current] { background: var(--ep-primary-soft); color: var(--ep-primary-hover); }
button:focus-visible, a:focus-visible { outline: 2px solid #426fa9; outline-offset: 3px; }
@media (max-height: 819px) and (min-width: 1001px) {
  #sidebar { padding: 18px 16px 12px; }
  #desktop-nav { gap: 10px; margin: 22px 0 18px; }
  #desktop-nav a { min-height: 39px; padding: 8px 13px; }
  .ep-nav-group { gap: 2px; }
}
@media (max-height: 700px) and (min-width: 1001px) {
  #sidebar { padding-top: 12px; }
  #desktop-nav { gap: 8px; margin: 16px 0 12px; }
  #desktop-nav a { min-height: 33px; padding: 5px 13px; }
  #desktop-nav a[aria-current="page"]::before { top: 10px; bottom: 10px; }
  .ep-nav-group__label { padding-bottom: 2px; }
  .ep-sidebar-footer { gap: 8px; padding: 11px; }
}
@media (max-width: 1000px) {
  #sidebar-toggle { display: block; }
  #sidebar { display: none; width: min(300px, 90vw); overflow-y: auto; background: #f9fcff; box-shadow: 10px 0 30px #15345122; }
  #sidebar.is-open { display: flex; }
  .migration-main { margin-left: 0; }
  .migration-main .block-container { padding: 20px 24px 32px; }
  .st-key-desktop_account_bar { display: none; }
  .st-key-mobile_account_bar { display: flex; }
  .migration-mobile-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .migration-header .ep-global-site-entry { position: static; margin-left: auto; padding: 7px; }
}
@media (max-width: 768px) {
  .migration-main .block-container { padding: 14px 12px 32px; }
  .migration-label { font-size: 12px; max-width: 96px; text-align: right; }
  .migration-header .ep-global-site-entry small { display: none; }
  .migration-write-stats { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .migration-category-options { grid-template-columns: 1fr; }
}