/* 槿榕 AI · iOS studio workspace
 *
 * This is the final visual layer for the authenticated creator.  It keeps the
 * production DOM and handlers intact, but restores the visual hierarchy from
 * the studio reference: floating control bar, narrow rail, cinematic stage,
 * film-strip queue, inspector and prompt console.
 */

body.jr-authenticated {
  --ios-bg: #e9eef1;
  --ios-bg-deep: #dce5e9;
  --ios-surface: rgba(249, 252, 252, .78);
  --ios-surface-strong: rgba(255, 255, 255, .90);
  --ios-surface-soft: rgba(244, 248, 248, .70);
  --ios-line: rgba(20, 48, 49, .14);
  --ios-line-strong: rgba(20, 48, 49, .22);
  --ios-text: #122321;
  --ios-muted: #63726f;
  --ios-faint: #8b9896;
  --ios-accent: #118768;
  --ios-accent-strong: #087455;
  --ios-accent-soft: rgba(17, 135, 104, .12);
  --ios-shadow: 0 24px 65px rgba(37, 62, 66, .13), 0 2px 9px rgba(37, 62, 66, .07);
  --ios-shadow-soft: 0 10px 28px rgba(37, 62, 66, .09);
  --ios-highlight: inset 0 1px 0 rgba(255, 255, 255, .88);
  --ios-radius-xl: 26px;
  --ios-radius-lg: 22px;
  --ios-radius-md: 16px;
  --ios-blur: blur(26px) saturate(1.14);
  background:
    radial-gradient(58% 46% at 50% 105%, rgba(72, 170, 144, .14), transparent 72%),
    radial-gradient(30% 50% at 7% 22%, rgba(118, 160, 185, .12), transparent 76%),
    linear-gradient(180deg, #f2f5f6 0%, var(--ios-bg) 56%, var(--ios-bg-deep) 100%) !important;
  color: var(--ios-text) !important;
}

:root[data-theme="dark"] body.jr-authenticated {
  --ios-bg: #081011;
  --ios-bg-deep: #050b0c;
  --ios-surface: rgba(13, 24, 24, .76);
  --ios-surface-strong: rgba(17, 30, 30, .90);
  --ios-surface-soft: rgba(14, 26, 26, .70);
  --ios-line: rgba(182, 232, 216, .15);
  --ios-line-strong: rgba(182, 232, 216, .24);
  --ios-text: #eef8f4;
  --ios-muted: #a4b6b1;
  --ios-faint: #778b86;
  --ios-accent: #53d7ac;
  --ios-accent-strong: #2ec18f;
  --ios-accent-soft: rgba(83, 215, 172, .14);
  --ios-shadow: 0 28px 78px rgba(0, 0, 0, .43), 0 2px 10px rgba(0, 0, 0, .24);
  --ios-shadow-soft: 0 13px 35px rgba(0, 0, 0, .26);
  --ios-highlight: inset 0 1px 0 rgba(226, 255, 245, .08);
  background:
    radial-gradient(58% 52% at 50% 108%, rgba(24, 132, 101, .18), transparent 73%),
    radial-gradient(34% 50% at 8% 22%, rgba(18, 77, 91, .18), transparent 74%),
    linear-gradient(180deg, #071010 0%, var(--ios-bg) 58%, var(--ios-bg-deep) 100%) !important;
}

body.jr-authenticated #app,
body.jr-authenticated #app.show {
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: transparent !important;
  color: var(--ios-text) !important;
}

body.jr-authenticated::before {
  display: block !important;
  z-index: -1 !important;
  opacity: .12 !important;
  filter: blur(24px) saturate(.66) brightness(1.15) !important;
  mix-blend-mode: normal !important;
}

:root[data-theme="dark"] body.jr-authenticated::before {
  opacity: .34 !important;
  filter: blur(22px) saturate(.84) brightness(.72) !important;
}

/* Floating control bar --------------------------------------------------- */
body.jr-authenticated header {
  position: relative !important;
  z-index: 60 !important;
  display: flex !important;
  width: min(calc(100% - 32px), 1420px) !important;
  height: 66px !important;
  min-height: 66px !important;
  margin: 12px auto 10px !important;
  padding: 0 16px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 62%), var(--ios-surface) !important;
  box-shadow: var(--ios-shadow), var(--ios-highlight) !important;
  backdrop-filter: var(--ios-blur) !important;
  -webkit-backdrop-filter: var(--ios-blur) !important;
}

:root[data-theme="dark"] body.jr-authenticated header {
  background: linear-gradient(180deg, rgba(211,255,241,.06), transparent 62%), var(--ios-surface) !important;
}

body.jr-authenticated .logo-wrap { gap: 10px !important; }
body.jr-authenticated .logo-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 7px 20px rgba(17, 135, 104, .14) !important;
}
body.jr-authenticated .logo-main { color: var(--ios-text) !important; font-size: 16px !important; font-weight: 780 !important; letter-spacing: -.02em !important; }
body.jr-authenticated .logo-sub { color: var(--ios-faint) !important; font-size: 9px !important; letter-spacing: .10em !important; }
body.jr-authenticated .hd-right { gap: 8px !important; }
body.jr-authenticated .hd-right > .lang-toggle,
body.jr-authenticated .hd-right > .jr-theme-toggle,
body.jr-authenticated #acct-badge,
body.jr-authenticated .model-switch-button {
  min-height: 40px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 999px !important;
  background: var(--ios-surface-strong) !important;
  color: var(--ios-muted) !important;
  box-shadow: var(--ios-highlight) !important;
}
body.jr-authenticated .hd-right > .lang-toggle,
body.jr-authenticated .hd-right > .jr-theme-toggle { min-width: 42px !important; padding: 8px 12px !important; }
body.jr-authenticated header .jr-theme-toggle svg { width: 18px !important; height: 18px !important; }
body.jr-authenticated .hd-right > button:hover,
body.jr-authenticated .model-switch-button:hover { background: var(--ios-accent-soft) !important; color: var(--ios-text) !important; border-color: rgba(17,135,104,.28) !important; }
body.jr-authenticated #acct-badge {
  order: 3 !important;
  width: auto !important;
  min-width: 148px !important;
  padding: 0 15px !important;
  color: var(--ios-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
body.jr-authenticated #acct-badge::before { color: var(--ios-accent) !important; }
body.jr-authenticated .workspace-model-segmented { order: 1 !important; }
body.jr-authenticated #acct-badge { order: 2 !important; }
body.jr-authenticated #lang-toggle { order: 3 !important; }
body.jr-authenticated header .jr-theme-toggle { order: 4 !important; }
body.jr-authenticated .model-switcher { order: 1 !important; }

body.jr-authenticated .workspace-model-segmented {
  display: flex !important;
  min-height: 42px !important;
  padding: 3px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 999px !important;
  background: var(--ios-surface-soft) !important;
}
body.jr-authenticated .workspace-model-segmented button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ios-muted) !important;
  font-size: 10.5px !important;
  font-weight: 720 !important;
}
body.jr-authenticated .workspace-model-segmented button.active {
  background: var(--ios-accent-soft) !important;
  color: var(--ios-accent-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(17,135,104,.18), 0 4px 12px rgba(17,135,104,.08) !important;
}

/* Shell ------------------------------------------------------------------ */
body.jr-authenticated .layout.jr-workspace {
  display: grid !important;
  width: min(calc(100% - 32px), 1420px) !important;
  height: calc(100dvh - 100px) !important;
  min-height: 560px !important;
  margin: 0 auto 12px !important;
  grid-template-columns: 78px minmax(0, 1fr) 284px !important;
  gap: 12px !important;
  overflow: visible !important;
}

body.jr-authenticated .workspace-rail,
body.jr-authenticated .workspace-main > .panel-left,
body.jr-authenticated .workspace-main > .panel-right,
body.jr-authenticated .workspace-inspector {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: var(--ios-radius-xl) !important;
  background: var(--ios-surface) !important;
  box-shadow: var(--ios-shadow-soft), var(--ios-highlight) !important;
  backdrop-filter: var(--ios-blur) !important;
  -webkit-backdrop-filter: var(--ios-blur) !important;
}

:root[data-theme="dark"] body.jr-authenticated .workspace-rail,
:root[data-theme="dark"] body.jr-authenticated .workspace-main > .panel-left,
:root[data-theme="dark"] body.jr-authenticated .workspace-inspector {
  background: linear-gradient(180deg, rgba(208,255,241,.042), transparent 45%), var(--ios-surface) !important;
}

body.jr-authenticated .workspace-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 8px !important;
  overflow: hidden !important;
}
body.jr-authenticated .workspace-rail-spacer { flex: 1 1 auto !important; }
body.jr-authenticated .workspace-rail-button {
  width: 58px !important;
  min-height: 74px !important;
  padding: 8px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--ios-muted) !important;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}
body.jr-authenticated .workspace-rail-button strong {
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 11px !important;
  color: inherit !important;
  font-size: 16px !important;
  line-height: 34px !important;
}
body.jr-authenticated .workspace-rail-button span { margin-top: 5px !important; font-size: 11px !important; }
body.jr-authenticated .workspace-rail-button:hover { transform: translateY(-1px) !important; background: var(--ios-accent-soft) !important; color: var(--ios-text) !important; }
body.jr-authenticated .workspace-rail-button.active { background: var(--ios-accent-soft) !important; border-color: rgba(17,135,104,.18) !important; color: var(--ios-accent-strong) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.56) !important; }

body.jr-authenticated .workspace-main {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) clamp(250px, 29vh, 286px) !important;
  gap: 12px !important;
}

/* Prompt console at the bottom ----------------------------------------- */
body.jr-authenticated .workspace-main > .panel-left {
  position: relative !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--ios-radius-lg) !important;
}
body.jr-authenticated .workspace-main > .panel-left .panel-title {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 12px 16px 5px 18px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
body.jr-authenticated .workspace-main > .panel-left .panel-title span { color: var(--ios-text) !important; font-size: 14px !important; font-weight: 760 !important; }
body.jr-authenticated .workspace-main > .panel-left .panel-title small { display: none !important; }
body.jr-authenticated .workspace-main > .panel-left .form-body {
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 14px 14px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 36px minmax(90px, 1fr) 56px !important;
  grid-template-areas: "tabs tabs" "prompt prompt" "material actions" !important;
  gap: 8px !important;
  overflow: hidden !important;
}
body.jr-authenticated .workspace-main .creator-tabs {
  grid-area: tabs !important;
  display: inline-grid !important;
  width: max-content !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 3px !important;
  grid-template-columns: repeat(3, auto) !important;
  gap: 2px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 12px !important;
  background: var(--ios-surface-soft) !important;
}
body.jr-authenticated .workspace-main .creator-tab { min-height: 28px !important; padding: 5px 14px !important; border: 0 !important; border-radius: 9px !important; color: var(--ios-muted) !important; font-size: 10px !important; font-weight: 720 !important; }
body.jr-authenticated .workspace-main .creator-tab.active { background: var(--ios-accent-soft) !important; color: var(--ios-accent-strong) !important; box-shadow: inset 0 0 0 1px rgba(17,135,104,.15) !important; }
body.jr-authenticated .workspace-main .field:has(#prompt) { grid-area: prompt !important; min-height: 0 !important; height: 100% !important; margin: 0 !important; }
body.jr-authenticated .workspace-main .field:has(#prompt) .prompt-label-row { display: none !important; }
body.jr-authenticated .workspace-main .prompt-wrap { height: 100% !important; }
body.jr-authenticated .workspace-main textarea.prompt-box {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  padding: 13px 15px 28px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 16px !important;
  background: var(--ios-surface-strong) !important;
  color: var(--ios-text) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50) !important;
}
body.jr-authenticated .workspace-main textarea.prompt-box:focus { border-color: rgba(17,135,104,.45) !important; box-shadow: 0 0 0 4px rgba(17,135,104,.10), inset 0 1px 0 rgba(255,255,255,.55) !important; }
body.jr-authenticated .workspace-main .material-section { grid-area: material !important; min-width: 0 !important; margin: 0 !important; }
body.jr-authenticated .workspace-main .material-head { display: none !important; }
body.jr-authenticated .workspace-main .upload-card { display: flex !important; min-height: 54px !important; height: 54px !important; border-color: var(--ios-line) !important; border-radius: 14px !important; background: var(--ios-surface-soft) !important; }
body.jr-authenticated .workspace-main .quick-chip { min-height: 30px !important; padding: 6px 10px !important; border: 1px solid var(--ios-line) !important; border-radius: 999px !important; background: var(--ios-surface-strong) !important; color: var(--ios-muted) !important; font-size: 10px !important; }
body.jr-authenticated .workspace-main .prompt-examples { display: none !important; }
body.jr-authenticated .workspace-main .prompt-controls { display: none !important; }
body.jr-authenticated .workspace-main .workspace-prompt-actions {
  grid-area: actions !important;
  display: none !important;
}
body.jr-authenticated .workspace-main .workspace-prompt-summary { display: none !important; }
body.jr-authenticated .workspace-compose-submit {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.jr-authenticated .workspace-compose-submit .cost-card {
  min-width: 0 !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(17,135,104,.20) !important;
  border-radius: 14px !important;
  background: var(--ios-accent-soft) !important;
  box-shadow: none !important;
}
body.jr-authenticated .workspace-compose-submit .cost-copy b { color: var(--ios-accent-strong) !important; font-size: 10px !important; }
body.jr-authenticated .workspace-compose-submit .cost-copy span,
body.jr-authenticated .workspace-compose-submit .cost-balance { color: var(--ios-muted) !important; font-size: 9px !important; }
body.jr-authenticated .workspace-compose-submit .submit-btn {
  min-width: 132px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--ios-accent) !important;
  color: #fff !important;
  box-shadow: 0 11px 24px rgba(17,135,104,.23), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}
body.jr-authenticated .workspace-compose-submit .submit-btn:hover:not(:disabled) { transform: translateY(-1px) !important; background: var(--ios-accent-strong) !important; box-shadow: 0 14px 28px rgba(17,135,104,.28), inset 0 1px 0 rgba(255,255,255,.28) !important; }
body.jr-authenticated .workspace-compose-submit .submit-btn:active:not(:disabled) { transform: scale(.975) !important; }
body.jr-authenticated .workspace-compose-submit .submit-sub { display: none !important; }

/* Stage + film strip ----------------------------------------------------- */
body.jr-authenticated .workspace-main > .panel-right {
  position: relative !important;
  grid-row: 1 !important;
  display: grid !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) 34px 108px !important;
  overflow: hidden !important;
  border-radius: var(--ios-radius-xl) !important;
  background: rgba(5, 13, 13, .84) !important;
  isolation: isolate !important;
}
body.jr-authenticated .workspace-main > .panel-right::before { display: block !important; opacity: .70 !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-main > .panel-right { background: rgba(245, 249, 248, .86) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-main > .panel-right::before { opacity: .10 !important; filter: saturate(.45) brightness(1.35) !important; }

body.jr-authenticated .workspace-stage-primary {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 14px 14px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(218,255,243,.24) !important;
  border-radius: 20px !important;
  background: #030908 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 48px rgba(0,0,0,.24) !important;
}
body.jr-authenticated .workspace-stage-media { position: absolute !important; inset: 0 !important; display: block !important; }
body.jr-authenticated .workspace-stage-media::before { opacity: 1 !important; }
body.jr-authenticated .workspace-stage-empty { display: flex !important; }
body.jr-authenticated .workspace-stage-empty[hidden] { display: none !important; }
body.jr-authenticated .workspace-stage-progress {
  display: grid !important;
  top: 14px !important;
  width: min(620px, calc(100% - 28px)) !important;
  min-height: 76px !important;
  padding: 11px 15px !important;
  border: 1px solid rgba(219,255,244,.25) !important;
  border-radius: 18px !important;
  background: rgba(8, 20, 20, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 30px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}
:root[data-theme="light"] body.jr-authenticated .workspace-stage-progress { background: rgba(255,255,255,.72) !important; border-color: rgba(18,83,69,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 30px rgba(32,71,62,.13) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-stage-progress-copy strong { color: var(--ios-text) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-stage-progress-copy span { color: var(--ios-muted) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-stage-step-track > span { color: rgba(26,61,51,.52) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-stage-step-track > span.active,
:root[data-theme="light"] body.jr-authenticated .workspace-stage-step-track > span.complete { color: var(--ios-accent-strong) !important; }
body.jr-authenticated .workspace-stage-toolbar { right: 12px !important; bottom: 12px !important; left: 12px !important; border-radius: 15px !important; }

body.jr-authenticated .result-head {
  z-index: 3 !important;
  display: flex !important;
  min-height: 34px !important;
  padding: 4px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(5,13,13,.54) !important;
  color: #eef8f4 !important;
}
:root[data-theme="light"] body.jr-authenticated .result-head { background: rgba(250,252,251,.86) !important; color: var(--ios-text) !important; }
:root[data-theme="light"] body.jr-authenticated .result-title h2 { color: var(--ios-text) !important; }
body.jr-authenticated .result-title h2 { font-size: 11px !important; }
body.jr-authenticated .result-tabs { margin-left: auto !important; }
body.jr-authenticated .result-scroll,
body.jr-authenticated .result-scroll:has(.task-card) {
  z-index: 2 !important;
  display: grid !important;
  height: 108px !important;
  min-height: 108px !important;
  padding: 8px 12px 10px !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(152px, 1fr) !important;
  grid-template-columns: none !important;
  grid-template-rows: 1fr !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: rgba(5,13,13,.54) !important;
}
:root[data-theme="light"] body.jr-authenticated .result-scroll,
:root[data-theme="light"] body.jr-authenticated .result-scroll:has(.task-card) { background: rgba(249,252,251,.82) !important; }
body.jr-authenticated .result-scroll > .task-card { width: auto !important; min-width: 152px !important; height: 86px !important; max-height: 86px !important; border-radius: 14px !important; }
body.jr-authenticated .result-scroll .idle-hint { height: 86px !important; min-width: 260px !important; border-radius: 14px !important; }

/* Inspector ------------------------------------------------------------- */
body.jr-authenticated .workspace-inspector {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--ios-radius-xl) !important;
}
body.jr-authenticated .workspace-inspector-header { min-height: 66px !important; padding: 17px 17px 12px !important; border-bottom: 1px solid var(--ios-line) !important; }
body.jr-authenticated .workspace-inspector-title b { color: var(--ios-text) !important; font-size: 16px !important; }
body.jr-authenticated .workspace-inspector-title span { color: var(--ios-muted) !important; font-size: 10px !important; }
body.jr-authenticated .workspace-inspector-close { color: var(--ios-muted) !important; }
body.jr-authenticated .workspace-inspector-scroll { flex: 1 1 auto !important; min-height: 0 !important; padding: 14px 13px !important; overflow-y: auto !important; }
body.jr-authenticated .workspace-inspector .section-divider { justify-content: flex-start !important; margin: 2px 2px 10px !important; color: var(--ios-muted) !important; font-size: 11px !important; }
body.jr-authenticated .workspace-inspector .section-divider::before,
body.jr-authenticated .workspace-inspector .section-divider::after { display: none !important; }
body.jr-authenticated .workspace-inspector .settings-block { margin: 0 0 12px !important; padding: 13px !important; border: 1px solid var(--ios-line) !important; border-radius: 17px !important; background: var(--ios-surface-soft) !important; box-shadow: none !important; }
body.jr-authenticated .workspace-inspector .settings-title,
body.jr-authenticated .workspace-inspector .workspace-inspector-creative-field > label { color: var(--ios-muted) !important; font-size: 11px !important; }
body.jr-authenticated .workspace-inspector .choice-row { gap: 6px !important; }
body.jr-authenticated .workspace-inspector .choice-btn { min-height: 38px !important; padding: 7px 8px !important; border: 1px solid var(--ios-line) !important; border-radius: 12px !important; background: var(--ios-surface-strong) !important; color: var(--ios-muted) !important; font-size: 10px !important; }
body.jr-authenticated .workspace-inspector .choice-btn.active { border-color: rgba(17,135,104,.28) !important; background: var(--ios-accent-soft) !important; color: var(--ios-accent-strong) !important; box-shadow: inset 0 0 0 1px rgba(17,135,104,.08) !important; }
body.jr-authenticated .workspace-inspector .advanced-toggle { color: var(--ios-text) !important; border-color: var(--ios-line) !important; background: var(--ios-surface-soft) !important; }
body.jr-authenticated .workspace-inspector .inspector-actions { display: none !important; }

body.jr-authenticated .site-icp-footer { color: var(--ios-faint) !important; font-size: 10px !important; }

@media (max-width: 1100px) {
  body.jr-authenticated #app,
  body.jr-authenticated #app.show { height: auto !important; min-height: 100dvh !important; overflow: visible !important; }
  body.jr-authenticated header { width: calc(100% - 20px) !important; height: 58px !important; min-height: 58px !important; margin: 10px auto 9px !important; border-radius: 20px !important; }
  body.jr-authenticated .logo-img { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  body.jr-authenticated .logo-main { font-size: 14px !important; }
  body.jr-authenticated .logo-sub { display: none !important; }
  body.jr-authenticated #acct-badge { width: 42px !important; min-width: 42px !important; padding: 0 !important; overflow: hidden !important; font-size: 0 !important; }
  body.jr-authenticated #acct-badge::after { content: "✦"; color: var(--ios-accent) !important; font-size: 15px !important; }
  body.jr-authenticated .workspace-model-segmented { display: none !important; }
  body.jr-authenticated .layout.jr-workspace { display: block !important; width: calc(100% - 20px) !important; height: auto !important; min-height: 0 !important; margin: 0 auto 88px !important; }
  body.jr-authenticated .workspace-rail { display: none !important; }
  body.jr-authenticated .workspace-main { display: grid !important; grid-template-rows: minmax(420px, 60vh) auto !important; gap: 10px !important; }
  body.jr-authenticated .workspace-main > .panel-right { grid-row: 1 !important; min-height: 420px !important; grid-template-rows: minmax(0, 1fr) 34px 118px !important; }
  body.jr-authenticated .workspace-main > .panel-left { grid-row: 2 !important; min-height: 230px !important; }
  body.jr-authenticated .workspace-main > .panel-left .form-body { grid-template-rows: 34px 120px 56px !important; }
  body.jr-authenticated .workspace-inspector { position: fixed !important; z-index: 2200 !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; left: 8px !important; max-height: min(82dvh, 680px) !important; border-radius: 26px !important; visibility: hidden !important; opacity: 0 !important; transform: translateY(calc(100% + 20px)) !important; transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), visibility 220ms ease !important; }
  body.jr-authenticated .workspace-inspector.open { visibility: visible !important; opacity: 1 !important; transform: none !important; }
  body.jr-authenticated .mobile-parameter-trigger { display: flex !important; position: fixed !important; z-index: 1800 !important; right: 18px !important; bottom: calc(78px + env(safe-area-inset-bottom)) !important; min-height: 46px !important; padding: 10px 15px !important; border: 1px solid rgba(17,135,104,.26) !important; border-radius: 999px !important; background: var(--ios-accent) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(17,135,104,.24) !important; }
  body.jr-authenticated .mobile-bottom-nav { display: grid !important; position: fixed !important; z-index: 1700 !important; right: 10px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; left: 10px !important; grid-template-columns: repeat(4, 1fr) !important; min-height: 58px !important; padding: 5px !important; border: 1px solid var(--ios-line) !important; border-radius: 22px !important; background: var(--ios-surface) !important; box-shadow: var(--ios-shadow-soft), var(--ios-highlight) !important; backdrop-filter: var(--ios-blur) !important; -webkit-backdrop-filter: var(--ios-blur) !important; }
  body.jr-authenticated .mobile-bottom-nav .workspace-rail-button { width: auto !important; min-height: 46px !important; border-radius: 15px !important; }
  body.jr-authenticated .inspector-scrim { z-index: 2190 !important; background: rgba(5,12,14,.36) !important; }
}

@media (max-width: 560px) {
  body.jr-authenticated .hd-right { gap: 5px !important; }
  body.jr-authenticated .hd-right > .lang-toggle,
  body.jr-authenticated .hd-right > .jr-theme-toggle { min-width: 36px !important; padding: 7px 9px !important; }
  body.jr-authenticated .model-switch-button { max-width: 98px !important; overflow: hidden !important; white-space: nowrap !important; }
  body.jr-authenticated .model-switch-button #active-model-badge { max-width: 48px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body.jr-authenticated .workspace-main { grid-template-rows: minmax(360px, 57vh) auto !important; }
  body.jr-authenticated .workspace-main > .panel-right { min-height: 360px !important; grid-template-rows: minmax(0,1fr) 32px 108px !important; }
  body.jr-authenticated .workspace-stage-primary { margin: 10px 10px 6px !important; border-radius: 17px !important; }
  body.jr-authenticated .workspace-stage-progress { min-height: 64px !important; padding: 8px 9px !important; grid-template-columns: 1fr !important; gap: 5px !important; }
  body.jr-authenticated .workspace-stage-progress-copy span { display: none !important; }
  body.jr-authenticated .result-scroll,
  body.jr-authenticated .result-scroll:has(.task-card) { height: 108px !important; min-height: 108px !important; padding: 6px 8px 8px !important; grid-auto-columns: 132px !important; }
  body.jr-authenticated .result-scroll > .task-card { min-width: 132px !important; height: 92px !important; max-height: 92px !important; }
  body.jr-authenticated .workspace-main > .panel-left .panel-title { min-height: 40px !important; padding: 10px 12px 4px !important; }
  body.jr-authenticated .workspace-main > .panel-left .form-body { padding: 0 10px 10px !important; grid-template-rows: 32px 112px 52px !important; gap: 6px !important; }
  body.jr-authenticated .workspace-main .creator-tab { padding-inline: 10px !important; font-size: 9px !important; }
  body.jr-authenticated .workspace-compose-submit .submit-btn { min-width: 112px !important; padding-inline: 12px !important; }
  body.jr-authenticated .workspace-compose-submit .cost-card { padding-inline: 8px !important; }
}

/* Generative Rail --------------------------------------------------------
 * The left rail is a living creation instrument rather than navigation.
 * It keeps the existing progress DOM/handlers, but adds a clear light-field
 * hierarchy: ambient column, flowing energy ribbon, numbered states and a
 * few frame fragments taken from the studio visual language.
 */
body.jr-authenticated .workspace-rail.workspace-timeline-rail {
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  border: 1px solid rgba(182, 232, 216, .16) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(120% 46% at 50% 42%, rgba(70, 209, 169, .08), transparent 66%),
    linear-gradient(180deg, rgba(13, 27, 27, .76), rgba(7, 17, 17, .72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 255, 246, .10),
    0 22px 56px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(24px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail::before {
  position: absolute !important;
  inset: 10% 14% 7% !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(94, 226, 186, .16), transparent 48%),
    radial-gradient(ellipse at 50% 72%, rgba(51, 159, 195, .12), transparent 46%) !important;
  filter: blur(18px) !important;
  content: "" !important;
  pointer-events: none !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress.workspace-side-progress {
  position: relative !important;
  min-height: 100% !important;
  padding: 18px 15px 15px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy {
  position: relative !important;
  z-index: 3 !important;
  padding: 2px 3px 0 !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy strong {
  display: block !important;
  color: rgba(236, 255, 248, .96) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy strong::before {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 7px 2px 0 !important;
  border-radius: 50% !important;
  background: var(--ios-accent) !important;
  box-shadow: 0 0 0 4px rgba(83, 215, 172, .10), 0 0 16px rgba(83, 215, 172, .42) !important;
  content: "" !important;
  vertical-align: middle !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy span {
  display: block !important;
  max-width: 174px !important;
  margin-top: 6px !important;
  color: rgba(177, 206, 197, .68) !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 34px 0 10px 12px !important;
  counter-reset: rail-step !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::before {
  top: 35px !important;
  bottom: 34px !important;
  left: 8px !important;
  width: 2px !important;
  height: auto !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(95, 224, 187, .16), rgba(68, 205, 167, .70) 45%, rgba(80, 158, 195, .18)) !important;
  box-shadow: 0 0 12px rgba(70, 210, 174, .16) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after {
  position: absolute !important;
  top: 34px !important;
  left: 4px !important;
  z-index: 0 !important;
  width: 10px !important;
  height: 20% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent, rgba(165, 255, 224, .9), transparent) !important;
  filter: blur(3px) !important;
  content: "" !important;
  pointer-events: none !important;
  animation: jr-rail-energy 5.6s cubic-bezier(.45, 0, .24, 1) infinite !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  min-height: 54px !important;
  gap: 12px !important;
  color: rgba(185, 208, 201, .64) !important;
  text-align: left !important;
  counter-increment: rail-step !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em {
  display: block !important;
  overflow: visible !important;
  max-width: none !important;
  color: inherit !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 640 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em::before {
  display: block !important;
  margin-bottom: 3px !important;
  color: rgba(151, 188, 177, .42) !important;
  content: counter(rail-step, decimal-leading-zero) !important;
  font-size: 8px !important;
  font-weight: 720 !important;
  letter-spacing: .12em !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span i {
  position: relative !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(142, 220, 197, .42) !important;
  border-radius: 50% !important;
  background: rgba(7, 21, 20, .88) !important;
  box-shadow: 0 0 0 5px rgba(7, 21, 20, .44), inset 0 0 0 2px rgba(220, 255, 244, .06) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span i::after {
  position: absolute !important;
  inset: 4px !important;
  border-radius: inherit !important;
  background: rgba(124, 218, 190, .38) !important;
  content: "" !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.complete,
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active {
  color: rgba(233, 255, 247, .96) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.complete i,
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active i {
  border-color: rgba(133, 246, 206, .94) !important;
  background: rgba(34, 151, 115, .90) !important;
  box-shadow: 0 0 0 5px rgba(34, 151, 115, .14), 0 0 22px rgba(76, 229, 180, .45) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active i {
  width: 20px !important;
  height: 20px !important;
  margin-left: -2px !important;
  animation: jr-rail-node-pulse 2.4s ease-in-out infinite !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active em {
  color: #6be2b7 !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(2)::after,
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(3)::after,
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(4)::after {
  position: absolute !important;
  right: 1px !important;
  z-index: -1 !important;
  width: 44px !important;
  height: 28px !important;
  border: 1px solid rgba(116, 211, 187, .20) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(135deg, rgba(5, 18, 18, .12), rgba(78, 180, 157, .10)),
    url("../../assets/workspace-stage.jpg") center / cover !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .12) !important;
  content: "" !important;
  opacity: .22 !important;
  transform: rotate(-7deg) translateY(3px) !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(3)::after { transform: rotate(6deg) translate(4px, -5px) !important; opacity: .28 !important; }
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(4)::after { transform: rotate(-3deg) translate(1px, 5px) !important; opacity: .20 !important; }
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active::after { opacity: .56 !important; transform: rotate(-4deg) translate(8px, -2px) scale(1.08) !important; }

@keyframes jr-rail-energy {
  0% { transform: translateY(-8px); opacity: 0; }
  12% { opacity: .72; }
  72% { opacity: .52; }
  100% { transform: translateY(470%); opacity: 0; }
}

@keyframes jr-rail-node-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail {
  border-color: rgba(26, 104, 85, .16) !important;
  background:
    radial-gradient(120% 48% at 50% 40%, rgba(87, 213, 176, .14), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(240, 248, 247, .78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 24px 58px rgba(41, 83, 83, .14) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(78, 211, 176, .24), transparent 50%),
    radial-gradient(ellipse at 50% 72%, rgba(63, 153, 202, .14), transparent 46%) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy strong { color: #17332e !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy span { color: rgba(62, 91, 84, .72) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::before {
  background: linear-gradient(180deg, rgba(74, 190, 159, .20), rgba(30, 159, 116, .76) 46%, rgba(79, 151, 194, .18)) !important;
  box-shadow: 0 0 14px rgba(50, 176, 140, .20) !important;
}
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span { color: rgba(34, 72, 62, .56) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em::before { color: rgba(36, 106, 85, .48) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span i {
  border-color: rgba(31, 126, 96, .46) !important;
  background: rgba(247, 253, 251, .94) !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .70), inset 0 0 0 2px rgba(31, 126, 96, .08) !important;
}
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span i::after { background: rgba(47, 175, 137, .46) !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.complete,
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active { color: #176f54 !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.complete i,
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active i {
  border-color: #2a9b75 !important;
  background: #55c49a !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .78), 0 0 20px rgba(69, 196, 151, .38) !important;
}
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active em { color: #087455 !important; }
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(2)::after,
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(3)::after,
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(4)::after {
  border-color: rgba(28, 130, 101, .16) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .36), rgba(67, 185, 151, .12)),
    url("../../assets/workspace-stage.jpg") center / cover !important;
  box-shadow: 0 9px 18px rgba(44, 103, 96, .12) !important;
}

@media (max-width: 1100px) {
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress.workspace-side-progress { min-height: 0 !important; }
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track { height: auto !important; padding: 8px 0 2px !important; }
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::before { top: 14px !important; left: 10% !important; right: 10% !important; bottom: auto !important; width: auto !important; height: 2px !important; }
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after { top: 10px !important; left: 10% !important; width: 20% !important; height: 10px !important; animation-name: jr-rail-energy-horizontal !important; }
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span { min-height: 44px !important; }
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em::before { margin-bottom: 1px !important; }
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(2)::after,
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(3)::after,
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(4)::after { display: none !important; }
}

@keyframes jr-rail-energy-horizontal {
  0% { transform: translateX(-8px); opacity: 0; }
  12% { opacity: .72; }
  72% { opacity: .52; }
  100% { transform: translateX(380%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after,
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span.active i { animation: none !important; }
}

/* Final light-field tuning ----------------------------------------------- */
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress::before {
  position: absolute !important;
  top: 108px !important;
  bottom: 34px !important;
  left: 4px !important;
  z-index: 0 !important;
  width: 54px !important;
  border-right: 3px solid rgba(91, 224, 185, .52) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 16px rgba(66, 209, 168, .24), inset -2px 0 5px rgba(96, 234, 198, .18) !important;
  content: "" !important;
  opacity: .88 !important;
  transform: rotate(7deg) !important;
  pointer-events: none !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress::after {
  position: absolute !important;
  top: 108px !important;
  bottom: 34px !important;
  left: 17px !important;
  z-index: 0 !important;
  width: 40px !important;
  border-right: 1px solid rgba(120, 206, 222, .25) !important;
  border-radius: 50% !important;
  content: "" !important;
  opacity: .72 !important;
  transform: rotate(-8deg) !important;
  pointer-events: none !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after {
  width: 14px !important;
  height: 26% !important;
  background: linear-gradient(180deg, transparent, rgba(193, 255, 232, 1), rgba(69, 220, 177, .72), transparent) !important;
  filter: blur(2px) !important;
  animation-duration: 3.8s !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(2)::after,
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(3)::after,
body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span:nth-child(4)::after {
  opacity: .36 !important;
  filter: saturate(1.22) contrast(1.1) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress::before {
  border-right-color: rgba(51, 188, 146, .68) !important;
  box-shadow: 0 0 18px rgba(55, 192, 148, .26), inset -2px 0 5px rgba(82, 211, 171, .18) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress::after {
  border-right-color: rgba(84, 163, 197, .30) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after {
  background: linear-gradient(180deg, transparent, rgba(244, 255, 251, .98), rgba(55, 206, 157, .82), transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.jr-authenticated *, body.jr-authenticated *::before, body.jr-authenticated *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  body.jr-authenticated header,
  body.jr-authenticated .workspace-rail,
  body.jr-authenticated .workspace-main > .panel-left,
  body.jr-authenticated .workspace-main > .panel-right,
  body.jr-authenticated .workspace-inspector,
  body.jr-authenticated .mobile-bottom-nav { background: var(--ios-surface-strong) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Light studio scene -----------------------------------------------------
 * The rainy tram image is intentionally a dark-mode scene.  Light mode
 * gets its own pearl-white AI studio so the empty stage remains bright and
 * readable; real generated videos still take over the stage when available.
 */
:root[data-theme="light"] body.jr-authenticated::before {
  opacity: .56 !important;
  filter: blur(22px) saturate(.86) brightness(1.08) !important;
  background:
    linear-gradient(180deg, rgba(247,250,252,.56), rgba(228,239,242,.24)),
    url("../../assets/workspace-light-studio.jpg") center / cover no-repeat !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-main > .panel-right {
  background: rgba(246,250,250,.78) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-main > .panel-right::before {
  opacity: .48 !important;
  filter: saturate(.78) brightness(1.08) !important;
  background:
    linear-gradient(180deg, rgba(247,250,251,.14), rgba(239,247,248,.48)),
    url("../../assets/workspace-light-studio.jpg") center 52% / cover no-repeat !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-primary {
  background: rgba(245,250,251,.46) !important;
  border-color: rgba(20,78,72,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 48px rgba(64,93,98,.14) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-media {
  background: #f3f8fa !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-media::before {
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(248,251,252,.06), rgba(238,247,248,.16)),
    url("../../assets/workspace-light-studio.jpg") center / cover no-repeat !important;
  filter: none !important;
  transform: scale(1.012) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(241,248,249,.25)) !important;
  color: var(--ios-text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty > span {
  color: var(--ios-accent-strong) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty h2 {
  color: var(--ios-text) !important;
  text-shadow: 0 1px 12px rgba(255,255,255,.7) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty p {
  color: var(--ios-muted) !important;
}

:root[data-theme="light"] body.jr-authenticated .result-scroll .tc-video::before,
:root[data-theme="light"] body.jr-authenticated .result-scroll .tc-running,
:root[data-theme="light"] body.jr-authenticated .result-scroll .tc-error,
:root[data-theme="light"] body.jr-authenticated .result-scroll .tc-history-placeholder {
  background-image:
    linear-gradient(180deg, rgba(247,251,252,.08), rgba(232,242,244,.46)),
    url("../../assets/workspace-light-studio.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Side timeline + no navigation buttons ---------------------------------
 * The timeline now occupies the former left rail. The old
 * create/history/credits buttons are removed visually in both themes while
 * their DOM handlers remain intact for backwards-compatible actions.
 */
body.jr-authenticated .workspace-rail,
body.jr-authenticated .mobile-bottom-nav {
  display: none !important;
}

body.jr-authenticated .layout.jr-workspace {
  grid-template-columns: minmax(0, 1fr) 284px !important;
}

body.jr-authenticated .layout.jr-workspace > .workspace-main {
  grid-column: 1 !important;
}

body.jr-authenticated .layout.jr-workspace > .workspace-inspector {
  grid-column: 2 !important;
}

body.jr-authenticated .workspace-stage-progress.workspace-side-progress {
  position: relative !important;
  z-index: 3 !important;
  inset: auto !important;
  left: auto !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 12px 12px 0 !important;
  padding: 13px 12px 12px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 11px !important;
  transform: none !important;
  border: 1px solid rgba(189, 239, 222, .18) !important;
  border-radius: 18px !important;
  background: rgba(8, 20, 20, .66) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.16) !important;
}

body.jr-authenticated .workspace-stage-progress.workspace-side-progress .workspace-stage-progress-copy strong {
  font-size: 12px !important;
}

body.jr-authenticated .workspace-stage-progress.workspace-side-progress .workspace-stage-progress-copy span {
  font-size: 9px !important;
}

body.jr-authenticated .workspace-stage-progress.workspace-side-progress .workspace-stage-step-track {
  min-width: 0 !important;
  width: 100% !important;
  gap: 0 !important;
}

body.jr-authenticated .workspace-stage-progress.workspace-side-progress .workspace-stage-step-track em {
  max-width: 46px !important;
  overflow: hidden !important;
  font-size: 7px !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-progress.workspace-side-progress {
  border-color: rgba(24, 105, 83, .15) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 12px 28px rgba(47,79,82,.11) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-progress.workspace-side-progress .workspace-stage-step-track::before {
  background: rgba(21, 104, 80, .22) !important;
}

@media (max-width: 1100px) {
  body.jr-authenticated .layout.jr-workspace > .workspace-main,
  body.jr-authenticated .layout.jr-workspace > .workspace-inspector {
    grid-column: auto !important;
  }

  body.jr-authenticated .workspace-stage-progress.workspace-side-progress {
    margin: 10px 10px 0 !important;
  }
}

/* Clarification: the timeline occupies the former left navigation rail. */
body.jr-authenticated .layout.jr-workspace {
  grid-template-columns: 232px minmax(0, 1fr) 284px !important;
}

body.jr-authenticated .layout.jr-workspace > .workspace-main {
  grid-column: 2 !important;
}

body.jr-authenticated .layout.jr-workspace > .workspace-inspector {
  grid-column: 3 !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail {
  display: flex !important;
  align-items: stretch !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress.workspace-side-progress {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 16px 13px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  gap: 18px !important;
  border-radius: 20px !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy strong {
  font-size: 13px !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress-copy span {
  margin-top: 5px !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: 250px !important;
  padding: 2px 0 3px 10px !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::before {
  top: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  left: 5px !important;
  width: 1px !important;
  height: auto !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 9px !important;
  text-align: left !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span i {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em {
  grid-column: 2 !important;
  grid-row: 1 !important;
  max-width: none !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail {
  background: rgba(248,252,252,.74) !important;
}

:root[data-theme="dark"] body.jr-authenticated .workspace-rail.workspace-timeline-rail {
  background: rgba(10,22,22,.76) !important;
}

@media (max-width: 1100px) {
  body.jr-authenticated .layout.jr-workspace {
    grid-template-columns: 1fr !important;
  }

  body.jr-authenticated .layout.jr-workspace > .workspace-main,
  body.jr-authenticated .layout.jr-workspace > .workspace-inspector {
    grid-column: auto !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail {
    display: block !important;
    width: calc(100% - 20px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 10px !important;
    padding: 8px !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress.workspace-side-progress {
    display: grid !important;
    min-height: 0 !important;
    padding: 10px 11px !important;
    grid-template-rows: auto auto !important;
    gap: 9px !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::before {
    top: 6px !important;
    right: 10% !important;
    bottom: auto !important;
    left: 10% !important;
    width: auto !important;
    height: 1px !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 30px !important;
    justify-items: center !important;
    gap: 4px !important;
    text-align: center !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span i,
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track > span em {
    font-size: 7px !important;
  }
}

@media (max-width: 560px) {
  body.jr-authenticated .workspace-stage-progress.workspace-side-progress {
    margin: 8px 9px 0 !important;
    padding: 10px 10px 9px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }

  body.jr-authenticated .workspace-stage-progress.workspace-side-progress .workspace-stage-progress-copy strong {
    font-size: 11px !important;
  }
}

/* Final selected-reference overrides: keep the Pearl Glass shell and use the
 * Pearl Light Studio image for the empty light-mode stage. */
:root[data-theme="light"] body.jr-authenticated .workspace-stage-media {
  background: #f3f8fa !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-media::before {
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(248, 251, 252, .06), rgba(238, 247, 248, .16)),
    url("../../assets/workspace-light-studio.jpg") center / cover no-repeat !important;
  filter: none !important;
  transform: scale(1.012) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(241, 248, 249, .25)) !important;
  color: var(--ios-text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty h2 {
  color: var(--ios-text) !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .72) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-stage-empty p {
  color: var(--ios-muted) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after {
  width: 14px !important;
  height: 26% !important;
  background: linear-gradient(180deg, transparent, rgba(193, 255, 232, 1), rgba(69, 220, 177, .72), transparent) !important;
  filter: blur(2px) !important;
  animation-duration: 3.8s !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-step-track::after {
  background: linear-gradient(180deg, transparent, rgba(244, 255, 251, .98), rgba(55, 206, 157, .82), transparent) !important;
}

@media (max-width: 1100px) {
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress::before,
  body.jr-authenticated .workspace-rail.workspace-timeline-rail .workspace-stage-progress::after { display: none !important; }
}

/* Final Generative Rail pass ---------------------------------------------
 * The rail is a composed creation path, not a miniature status widget.  Keep
 * one luminous path, one quiet guide, and three restrained frame fragments so
 * the active stage reads clearly in both themes. */
body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track::before {
  background: rgba(33, 110, 88, .10) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track::before {
  background: rgba(150, 220, 201, .10) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-progress::after {
  display: none !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-progress::before {
  left: 8px !important;
  width: 60px !important;
  border-right-width: 4px !important;
  border-right-color: rgba(75, 211, 169, .74) !important;
  opacity: 1 !important;
  box-shadow: 0 0 22px rgba(57, 202, 159, .30),
    inset -2px 0 6px rgba(120, 245, 205, .22) !important;
  transform: rotate(5deg) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-progress::before {
  border-right-color: rgba(48, 188, 145, .88) !important;
  box-shadow: 0 0 24px rgba(58, 196, 150, .38),
    inset -2px 0 6px rgba(120, 245, 205, .24) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span {
  transition: transform 180ms ease, color 180ms ease !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:hover {
  transform: translateX(3px) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span.idle-focus {
  color: #6be2b7 !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span.idle-focus i {
  width: 20px !important;
  height: 20px !important;
  margin-left: -2px !important;
  border-color: rgba(133, 246, 206, .94) !important;
  background: rgba(34, 151, 115, .90) !important;
  box-shadow: 0 0 0 5px rgba(34, 151, 115, .14),
    0 0 22px rgba(76, 229, 180, .45) !important;
  animation: jr-rail-node-pulse 2.4s ease-in-out infinite !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span.idle-focus {
  color: #087455 !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span.idle-focus i {
  border-color: #2a9b75 !important;
  background: #55c49a !important;
  box-shadow: 0 0 0 5px rgba(42, 155, 117, .14),
    0 0 22px rgba(52, 190, 145, .44) !important;
}

body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:nth-child(2)::after,
body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:nth-child(3)::after,
body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:nth-child(4)::after {
  z-index: 2 !important;
  opacity: .52 !important;
  filter: saturate(1.45) contrast(1.28) brightness(.96) !important;
  border-color: rgba(55, 158, 126, .36) !important;
  box-shadow: 0 10px 22px rgba(32, 100, 82, .18) !important;
}

:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:nth-child(2)::after,
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:nth-child(3)::after,
:root[data-theme="light"] body.jr-authenticated .workspace-rail.workspace-timeline-rail
  .workspace-stage-step-track > span:nth-child(4)::after {
  opacity: .62 !important;
  filter: saturate(1.55) contrast(1.24) brightness(.93) !important;
  border-color: rgba(37, 139, 108, .30) !important;
}

@media (max-width: 1100px) {
  body.jr-authenticated .workspace-rail.workspace-timeline-rail
    .workspace-stage-step-track > span.idle-focus i {
    width: 14px !important;
    height: 14px !important;
    margin-left: 0 !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.jr-authenticated .workspace-rail.workspace-timeline-rail
    .workspace-stage-step-track > span.idle-focus i {
    animation: none !important;
  }
}