/* 槿榕AI · Release refinement
   Final product surface layer. Business markup and API contracts remain unchanged. */

:root {
  --jr-brand-500: #4f6fda;
  --jr-brand-600: #3f5ec5;
  --jr-brand-700: #334da8;
  --jr-brand-rgb: 79, 111, 218;
  --jr-bg: #f2f4f8;
  --jr-bg-elevated: #fbfcfe;
  --jr-surface: rgba(255, 255, 255, .88);
  --jr-surface-soft: rgba(246, 248, 252, .78);
  --jr-glass-low: rgba(248, 250, 253, .64);
  --jr-glass-mid: rgba(249, 251, 254, .78);
  --jr-glass-high: rgba(255, 255, 255, .91);
  --jr-line: rgba(25, 34, 55, .095);
  --jr-line-strong: rgba(25, 34, 55, .15);
  --jr-text: #161922;
  --jr-text-secondary: #596171;
  --jr-text-tertiary: #7d8798;
  --jr-blur-md: 18px;
  --jr-blur-lg: 28px;
  --jr-radius-md: 16px;
  --jr-radius-lg: 24px;
  --jr-radius-xl: 30px;
  --jr-shadow-1: 0 1px 2px rgba(25, 34, 55, .035), 0 10px 28px rgba(25, 34, 55, .065);
  --jr-shadow-2: 0 18px 52px rgba(25, 34, 55, .105), 0 3px 10px rgba(25, 34, 55, .045);
  --jr-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .78);
}

:root[data-theme="dark"] {
  --jr-bg: #0e121a;
  --jr-bg-elevated: #151b26;
  --jr-surface: rgba(24, 30, 42, .86);
  --jr-surface-soft: rgba(29, 36, 50, .74);
  --jr-glass-low: rgba(21, 27, 39, .64);
  --jr-glass-mid: rgba(24, 31, 44, .78);
  --jr-glass-high: rgba(29, 37, 52, .91);
  --jr-line: rgba(226, 234, 255, .105);
  --jr-line-strong: rgba(226, 234, 255, .17);
  --jr-text: #f2f5fb;
  --jr-text-secondary: #b7bfce;
  --jr-text-tertiary: #8993a5;
  --jr-shadow-1: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .18);
  --jr-shadow-2: 0 20px 58px rgba(0, 0, 0, .3), 0 3px 12px rgba(0, 0, 0, .2);
  --jr-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .085);
}

html {
  min-width: 320px;
  background: var(--jr-bg);
}

body {
  min-width: 320px;
  background:
    radial-gradient(820px 520px at 92% -8%, rgba(var(--jr-brand-rgb), .11), transparent 70%),
    radial-gradient(760px 520px at -12% 100%, rgba(47, 148, 163, .075), transparent 72%),
    var(--jr-bg);
  color: var(--jr-text);
  text-rendering: optimizeLegibility;
}

#app {
  isolation: isolate;
}

#app::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), transparent 26%),
    radial-gradient(480px 260px at 48% 0%, rgba(var(--jr-brand-rgb), .05), transparent 78%);
  content: "";
}

header {
  width: min(calc(100% - 32px), 1760px) !important;
  min-height: 72px !important;
  margin: 16px auto 0 !important;
  padding: 0 20px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 38%),
    var(--jr-glass-mid) !important;
  box-shadow: var(--jr-shadow-1), var(--jr-inner-highlight) !important;
  backdrop-filter: blur(22px) saturate(1.13) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.13) !important;
}

header::after {
  background: linear-gradient(90deg, transparent, rgba(var(--jr-brand-rgb), .22), transparent) !important;
  opacity: .6 !important;
}

.logo-wrap {
  gap: 11px !important;
}

.logo-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 16px rgba(19, 29, 52, .14), 0 0 0 1px rgba(255, 255, 255, .4) !important;
}

.logo-main {
  font-size: 18px !important;
  font-weight: 760 !important;
}

.logo-sub {
  font-size: 9px !important;
  letter-spacing: .16em !important;
}

.hd-right {
  gap: 9px !important;
}

.lang-toggle,
.badge,
.model-switch-button,
.jr-theme-toggle {
  min-height: 40px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--jr-glass-high) 86%, transparent) !important;
  color: var(--jr-text-secondary) !important;
  box-shadow: var(--jr-shadow-1), var(--jr-inner-highlight) !important;
}

.lang-toggle,
.jr-theme-toggle {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.jr-theme-toggle svg {
  width: 17px;
  height: 17px;
}

.badge:hover,
.model-switch-button:hover,
.lang-toggle:hover,
.jr-theme-toggle:hover {
  border-color: rgba(var(--jr-brand-rgb), .28) !important;
  background: var(--jr-brand-50) !important;
  color: var(--jr-brand-600) !important;
}

.layout.jr-workspace {
  width: min(calc(100% - 32px), 1760px) !important;
  grid-template-columns: 86px minmax(0, 1fr) 360px !important;
  gap: 16px !important;
  margin: 16px auto 18px !important;
}

.workspace-rail,
.workspace-main > .panel-left,
.workspace-main > .panel-right,
.workspace-inspector {
  border-color: var(--jr-line) !important;
  background: var(--jr-surface) !important;
  box-shadow: var(--jr-shadow-1), var(--jr-inner-highlight) !important;
}

.workspace-rail {
  padding: 10px 8px !important;
  border-radius: 26px !important;
  background: var(--jr-glass-low) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

.workspace-points-meter {
  min-height: 0 !important;
  padding: 10px 0 12px !important;
  border-radius: 19px !important;
  transition: background-color 180ms ease, transform 180ms var(--jr-ease-standard) !important;
}

.workspace-points-meter:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--jr-brand-50) 72%, transparent) !important;
}

.points-meter-track {
  width: 42px !important;
  min-height: 238px !important;
  margin: 9px 0 11px !important;
  border-color: var(--jr-line-strong) !important;
}

.points-meter-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 20%),
    linear-gradient(180deg, #7894ef, var(--jr-brand-600)) !important;
}

.points-meter-readout strong {
  font-size: 17px !important;
}

.points-meter-caption {
  margin-top: 8px !important;
  font-size: 9px !important;
}

.workspace-main {
  grid-template-rows: minmax(388px, .96fr) minmax(294px, .74fr) !important;
  gap: 16px !important;
}

.workspace-main > .panel-left,
.workspace-main > .panel-right,
.workspace-inspector {
  border-radius: 26px !important;
}

.workspace-main > .panel-left .panel-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 16px 21px 12px !important;
  border-bottom: 1px solid var(--jr-line) !important;
}

.workspace-main > .panel-left .panel-title > span {
  font-size: 17px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em;
}

.workspace-main > .panel-left .form-body {
  gap: 16px 18px !important;
  padding: 15px 21px 22px !important;
}

.workspace-main .creator-tabs {
  min-height: 48px !important;
  padding: 4px !important;
  border: 1px solid var(--jr-line) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--jr-text-tertiary) 9%, transparent) !important;
}

.workspace-main .creator-tab {
  min-height: 38px !important;
  border-radius: 11px !important;
  font-weight: 680 !important;
}

.workspace-main .creator-tab.active {
  color: var(--jr-text) !important;
  box-shadow: 0 3px 10px rgba(22, 30, 48, .08) !important;
}

.workspace-main textarea.prompt-box {
  min-height: 152px !important;
  padding: 17px 18px !important;
  border-radius: 19px !important;
  background: color-mix(in srgb, var(--jr-bg-elevated) 86%, transparent) !important;
  box-shadow: inset 0 1px 2px rgba(22, 30, 48, .045), inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

.workspace-main textarea.prompt-box:focus {
  border-color: rgba(var(--jr-brand-rgb), .46) !important;
  box-shadow: 0 0 0 4px rgba(var(--jr-brand-rgb), .1), inset 0 1px 2px rgba(22, 30, 48, .04) !important;
}

.workspace-main .quick-chip {
  min-height: 35px !important;
  padding: 7px 12px !important;
  border-radius: 11px !important;
  font-weight: 620 !important;
}

.workspace-main .quick-chip:hover:not(.active) {
  border-color: rgba(var(--jr-brand-rgb), .25) !important;
  color: var(--jr-brand-600) !important;
  transform: translateY(-1px);
}

.material-section,
.workspace-main .field,
.workspace-main .settings-block {
  min-width: 0;
}

.material-head b,
.workspace-main .field > label,
.workspace-main .settings-title {
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.result-head {
  min-height: 64px !important;
  padding: 11px 17px !important;
  border-bottom-color: var(--jr-line) !important;
  background: var(--jr-surface-soft) !important;
}

.result-title h2 {
  font-size: 16px !important;
  letter-spacing: -.02em;
}

.result-tabs {
  padding: 3px !important;
  border-radius: 13px !important;
}

.result-tab {
  min-height: 32px !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

.result-tab em {
  opacity: .72;
}

.result-scroll {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: 20px !important;
  overflow-y: auto !important;
}

.idle-hint {
  align-self: center;
  width: min(100%, 520px) !important;
  margin: auto !important;
  padding: 34px 24px 28px;
  border: 1px dashed var(--jr-line-strong);
  border-radius: 22px;
  background: color-mix(in srgb, var(--jr-glass-low) 72%, transparent);
}

.idle-hint .ih-ico {
  width: 68px !important;
  height: 68px !important;
  margin-bottom: 15px !important;
  border-radius: 20px !important;
  background: var(--jr-brand-50) !important;
  box-shadow: none !important;
}

.idle-hint h3 {
  margin-bottom: 7px !important;
  font-size: 20px !important;
}

.idle-hint p {
  max-width: 410px;
  margin-inline: auto;
  line-height: 1.7 !important;
}

.idle-steps {
  margin-top: 19px !important;
  gap: 8px !important;
}

.idle-steps span {
  min-height: 32px;
  border-radius: 999px !important;
  background: var(--jr-bg-elevated) !important;
  color: var(--jr-text-secondary) !important;
}

.workspace-inspector {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .15), transparent 24%),
    var(--jr-glass-mid) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

.workspace-inspector-header {
  min-height: 64px !important;
  padding: 15px 17px !important;
}

.workspace-inspector-title b {
  font-size: 16px !important;
}

.workspace-inspector-title span {
  margin-top: 3px !important;
  font-size: 10px !important;
}

.workspace-inspector-scroll {
  padding: 15px !important;
  scrollbar-gutter: stable;
}

.workspace-inspector .settings-block {
  padding: 14px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--jr-surface-soft) 88%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.workspace-inspector .choice-btn {
  min-height: 38px !important;
  border-radius: 11px !important;
  font-weight: 620 !important;
}

.workspace-inspector .choice-btn:hover:not(.active) {
  border-color: rgba(var(--jr-brand-rgb), .26) !important;
  color: var(--jr-brand-600) !important;
}

.inspector-actions {
  padding: 13px 15px 15px !important;
  background: color-mix(in srgb, var(--jr-glass-high) 90%, transparent) !important;
}

.inspector-actions .cost-card {
  min-height: 60px !important;
  border-radius: 18px !important;
}

.inspector-actions .submit-btn {
  min-height: 52px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  box-shadow: 0 13px 26px rgba(var(--jr-brand-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.inspector-actions .submit-btn:not(:disabled):active,
.mobile-parameter-trigger:active,
.tc-action:active,
.model-switch-button:active {
  transform: scale(.975) !important;
}

.tc-action,
.dl-btn,
.m-cancel,
.acct-mini-btn {
  min-height: 38px !important;
  border-radius: 12px !important;
}

.tc-action.primary,
.dl-btn {
  box-shadow: 0 7px 15px rgba(var(--jr-brand-rgb), .14) !important;
}

.tc-tag {
  min-height: 24px;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

.tc-video {
  border-radius: 20px 20px 0 0;
}

.tc-vinfo {
  padding: 15px 17px 12px !important;
}

.tc-taskbar {
  padding: 11px 14px !important;
}

.site-icp-footer {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  font-size: 11px !important;
}

@media (min-width: 1600px) {
  .layout.jr-workspace {
    grid-template-columns: 94px minmax(0, 1fr) 380px !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .layout.jr-workspace {
    grid-template-columns: 78px minmax(0, 1fr) 320px !important;
    gap: 12px !important;
  }

  .workspace-main {
    grid-template-rows: minmax(420px, auto) minmax(300px, auto) !important;
  }
}

@media (max-width: 900px) {
  header {
    width: calc(100% - 24px) !important;
    margin-top: max(10px, env(safe-area-inset-top)) !important;
  }

  .layout.jr-workspace {
    width: calc(100% - 24px) !important;
    margin-top: 12px !important;
  }

  .workspace-main > .panel-left,
  .workspace-main > .panel-right {
    border-radius: 24px !important;
  }

  .workspace-main > .panel-left .form-body {
    gap: 15px !important;
  }

  .workspace-inspector {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    border-radius: 26px !important;
  }

  .mobile-parameter-trigger {
    right: 18px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    background: var(--jr-brand-600) !important;
  }

  .mobile-bottom-nav {
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 600px) {
  header {
    min-height: 62px !important;
    padding: 8px 9px !important;
    border-radius: 19px !important;
  }

  .logo-img {
    width: 40px !important;
    height: 40px !important;
  }

  .hd-right {
    gap: 5px !important;
  }

  .layout.jr-workspace {
    margin-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }

  .workspace-main > .panel-left .panel-title {
    min-height: 58px !important;
    padding: 14px 15px 10px !important;
  }

  .workspace-main > .panel-left .form-body {
    padding: 12px 14px 20px !important;
  }

  .workspace-main textarea.prompt-box {
    min-height: 190px !important;
    padding: 16px !important;
  }

  .result-scroll {
    min-height: 64vh !important;
    padding: 14px !important;
  }

  .idle-hint {
    padding: 28px 16px 22px !important;
  }

  .idle-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .tc-actions {
    gap: 7px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  header,
  .workspace-rail,
  .workspace-inspector,
  .mobile-bottom-nav,
  .model-switch-menu,
  .modal,
  .idle-hint {
    background: var(--jr-bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}