:root {
  --bg: #ffffff;
  --bg-soft: #fbfaff;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-muted: #f8f6fc;
  --text: #18171d;
  --text-2: #595762;
  --muted: #96919d;
  --line: #e9e5ed;
  --line-strong: #dcd6e2;
  --primary: #7132df;
  --primary-2: #9a72ef;
  --primary-soft: #f0e9ff;
  --green: #31a873;
  --green-soft: #e9f8f1;
  --amber: #d79420;
  --amber-soft: #fff6df;
  --danger: #ed5772;
  --shadow: 0 18px 60px rgba(57, 31, 83, 0.12);
  --shadow-soft: 0 8px 28px rgba(57, 31, 83, 0.07);
  --header-h: 72px;
  --sidebar-w: 296px;
  --radius: 20px;
  --font: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}

body {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(113, 50, 223, 0.22);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea {
  color: var(--text);
}

body.dark {
  --bg: #121116;
  --bg-soft: #17151d;
  --surface: rgba(25, 23, 31, 0.94);
  --surface-strong: #1b1921;
  --surface-muted: #211e28;
  --text: #f4f1f7;
  --text-2: #c0bac7;
  --muted: #8e8798;
  --line: #302c39;
  --line-strong: #403a4a;
  --primary-soft: #2a2140;
  --green-soft: #172b24;
  --amber-soft: #302817;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.36);
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.app-root {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(129, 68, 228, 0.08), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(179, 142, 245, 0.1), transparent 24%),
    var(--bg);
}

.icon {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.btn {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-strong);
  color: var(--text-2);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: 160ms ease;
  white-space: nowrap;
}

.btn:hover {
  border-color: #cfc4dd;
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7637e8, #a27bed);
  color: white;
  box-shadow: 0 10px 22px rgba(113, 50, 223, 0.24);
}

.btn.soft {
  background: var(--primary-soft);
  border-color: rgba(113, 50, 223, 0.12);
  color: var(--primary);
}

.btn.green {
  background: var(--green-soft);
  border-color: rgba(49, 168, 115, 0.16);
  color: var(--green);
}

.btn.ghost {
  border-color: transparent;
  background: transparent;
}

.btn.round {
  width: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 14px;
}

.btn.small {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 11px;
  font-size: 12px;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.header {
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(232, 227, 237, 0.7);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(22px);
  position: relative;
  z-index: 20;
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-center {
  justify-content: center;
}

.header-right {
  justify-content: flex-end;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-mark {
  width: 43px;
  height: 32px;
  position: relative;
  filter: drop-shadow(0 5px 8px rgba(96, 26, 143, 0.22));
}

.brand-mark::before {
  content: "∞";
  position: absolute;
  inset: -11px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -8px;
  color: #8b2ae8;
  text-shadow: 3px 0 0 #e052cd, -2px 0 0 #5921a6;
}

.brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: -0.5px;
}

.layout-badge {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text-2);
  border-radius: 12px;
  height: 35px;
  padding: 0 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.top-nav-item {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #45414b;
  cursor: pointer;
  position: relative;
  transition: 160ms ease;
}

.dark .top-nav-item {
  color: var(--text-2);
}

.top-nav-item:hover,
.top-nav-item.active {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: rgba(113, 50, 223, 0.08);
}

.top-nav-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff5d78;
  position: absolute;
  top: 7px;
  right: 7px;
  box-shadow: 0 0 0 3px var(--surface-strong);
}

.user-pill {
  height: 44px;
  padding: 0 12px 0 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #fff 0 17%, transparent 18%),
    radial-gradient(circle at 50% 78%, #ffeef1 0 34%, transparent 35%),
    linear-gradient(135deg, #ffd7e3, #eee1ff);
  border: 1px solid rgba(113, 50, 223, 0.08);
  position: relative;
}

.avatar::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c788;
  border: 2px solid var(--surface-strong);
  position: absolute;
  right: -2px;
  bottom: -1px;
}

.workspace {
  height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 0;
  transition: grid-template-columns 180ms ease;
  position: relative;
}

.workspace.sidebar-hidden {
  grid-template-columns: 0 minmax(0, 1fr);
}

.workspace.no-sidebar {
  display: block;
}

.sidebar {
  margin: 4px 0 10px 9px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: 0 6px 24px rgba(55, 37, 74, 0.035);
  transition: transform 180ms ease, opacity 150ms ease, margin 180ms ease;
}

.workspace.sidebar-hidden .sidebar {
  margin-left: 0;
  margin-right: 0;
  transform: translateX(calc(-100% - 12px));
  opacity: 0;
  pointer-events: none;
}

.sidebar-reopen {
  position: absolute;
  z-index: 20;
  left: 10px;
  top: 14px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 0 12px 12px 0;
  background: var(--surface-strong);
  color: var(--text-2);
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 9px;
  cursor: pointer;
  animation: popIn 160ms ease;
}

.sidebar-reopen:hover {
  color: var(--primary);
  border-color: rgba(113, 50, 223, .28);
  background: var(--primary-soft);
}

.sidebar-reopen span {
  font-size: 11px;
  font-weight: 700;
}

.sidebar.collapse {
  width: 78px;
}

.sidebar-top {
  padding: 16px 13px 8px;
  flex: 0 0 auto;
}

.sidebar-collapse {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.sidebar-collapse button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.side-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mode-btn {
  min-height: 62px;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}

.mode-btn:hover,
.mode-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(113, 50, 223, 0.22);
  box-shadow: inset 0 0 0 1px rgba(113, 50, 223, 0.04);
}

.hot {
  position: absolute;
  top: 5px;
  right: 7px;
  border-radius: 6px;
  background: #f04a67;
  color: white;
  font-size: 8px;
  line-height: 14px;
  padding: 0 4px;
  font-weight: 700;
}

.skill-mode {
  width: 88px;
  min-height: 58px;
  margin-top: 5px;
}

.sidebar-filters {
  border-top: 1px solid var(--line);
  padding: 12px 12px 8px;
  flex: 0 0 auto;
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  min-width: 42px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.filter-tab.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.filter-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
}

.select-like,
.search-like {
  height: 39px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  min-width: 0;
}

.search-like input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  font-size: 12px;
}

.model-list,
.agent-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 4px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 50, 223, 0.18) transparent;
}

.model-card {
  width: 100%;
  min-height: 78px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  padding: 9px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: start;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  position: relative;
  margin-bottom: 4px;
}

.model-card:hover {
  background: var(--surface-muted);
  border-color: var(--line);
}

.model-card.active {
  background: linear-gradient(90deg, rgba(113, 50, 223, 0.11), rgba(113, 50, 223, 0.035));
  border-color: rgba(113, 50, 223, 0.16);
  box-shadow: inset 3px 0 0 var(--primary);
}

.provider-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  color: var(--primary);
}

.provider-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.model-meta {
  min-width: 0;
}

.model-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.model-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  font-size: 13px;
}

.health {
  color: #65b690;
  font-size: 10px;
  flex: 0 0 auto;
}

.model-sub,
.model-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.model-desc {
  font-size: 10px;
  color: var(--text-2);
  opacity: 0.7;
}

.favorite {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #b8b0bf;
  cursor: pointer;
  padding: 0;
}

.favorite.active {
  color: #f4a82c;
}

.super-agent-card {
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  margin: 4px 0 8px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--surface-strong), var(--surface-muted));
}

.sidebar-user {
  margin: 0 12px 12px;
  min-height: 61px;
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-muted);
  flex: 0 0 auto;
}

.balance {
  font-size: 10px;
  color: var(--amber);
  margin-top: 3px;
}

.main-stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.chat-stage {
  height: 100%;
  padding: 18px 28px 18px;
  display: flex;
  flex-direction: column;
}

.chat-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.chat-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px 0 4px;
}

.model-hero {
  text-align: center;
  max-width: 760px;
  width: 100%;
}

.hero-orb {
  width: 74px;
  height: 74px;
  border-radius: 25px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.95), transparent 24%),
    linear-gradient(145deg, #f3eaff, #dbc3ff);
  box-shadow: 0 20px 40px rgba(104, 53, 171, 0.18);
}

.hero-orb img {
  width: 42px;
  height: 42px;
}

.model-hero h1 {
  margin: 0;
  font-size: clamp(25px, 2.2vw, 34px);
  letter-spacing: -1px;
}

.model-hero .provider {
  color: var(--muted);
  margin-top: 7px;
  font-size: 12px;
}

.model-hero .description {
  max-width: 650px;
  margin: 12px auto 0;
  color: var(--text-2);
  line-height: 1.8;
}

.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.suggestion {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-strong);
  padding: 13px;
  color: var(--text-2);
  line-height: 1.55;
  cursor: pointer;
  text-align: left;
}

.suggestion:hover {
  border-color: rgba(113, 50, 223, 0.28);
  background: var(--primary-soft);
  color: var(--primary);
}

.role-strip {
  width: min(920px, 100%);
  margin: 14px auto 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.role-strip::-webkit-scrollbar {
  display: none;
}

.role-chip {
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
  padding: 0 12px;
  white-space: nowrap;
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
}

.role-chip.active,
.role-chip:hover {
  border-color: rgba(113, 50, 223, 0.25);
  color: var(--primary);
  background: var(--primary-soft);
}

.composer {
  width: min(920px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 19px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  padding: 12px 13px 10px;
  flex: 0 0 auto;
}

.composer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.composer textarea {
  display: block;
  width: 100%;
  height: 74px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  line-height: 1.6;
  padding: 6px 4px;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.tool-btn {
  height: 31px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 11px;
  cursor: pointer;
}

.tool-btn:hover,
.tool-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
}

.composer-spacer {
  flex: 1 1 auto;
}

.send-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7437e7, #a77bf2);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(113, 50, 223, 0.22);
}

.send-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.messages {
  width: min(920px, 100%);
  margin: 6px auto 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.message.user {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 72%;
  border-radius: 16px;
  padding: 11px 14px;
  line-height: 1.65;
  background: var(--surface-muted);
  border: 1px solid var(--line);
}

.message.user .message-bubble {
  background: linear-gradient(135deg, #7c44e7, #9a6ee7);
  color: white;
  border-color: transparent;
}

.dashboard-wrap {
  height: calc(100vh - var(--header-h));
  padding: 15px 24px 24px;
  overflow: auto;
}

.dashboard-panel {
  min-height: calc(100vh - var(--header-h) - 40px);
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 5px 24px rgba(50, 31, 70, 0.035);
}

.dashboard-toolbar {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.dashboard-title {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.work-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.work-tab {
  height: 34px;
  padding: 0 10px;
  border-radius: 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}

.work-tab.active {
  color: var(--primary);
  background: var(--primary-soft);
}

.dashboard-search {
  height: 37px;
  flex: 0 1 260px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.dashboard-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: 0;
}

.retention {
  height: 35px;
  flex: 0 1 330px;
  border: 1px solid rgba(214, 148, 32, 0.2);
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.toolbar-spacer {
  flex: 1 1 auto;
}

.empty-board {
  min-height: calc(100vh - var(--header-h) - 135px);
  border: 1px solid var(--line);
  border-radius: 17px;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border: 3px solid #9b6fe9;
  border-radius: 12px;
  color: #9b6fe9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-board h3 {
  margin: 0 0 10px;
}

.empty-board p {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 15px;
}

.skills-page,
.inspiration-page {
  height: 100%;
  padding: 32px 42px 42px;
  overflow: auto;
}

.page-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.display-title {
  margin: 0;
  font-size: clamp(44px, 5.4vw, 76px);
  letter-spacing: -5px;
  line-height: 0.96;
  font-weight: 900;
  position: relative;
  display: inline-block;
}

.display-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: linear-gradient(90deg, #e3508c, transparent 72%);
  transform: rotate(-2deg);
  opacity: 0.75;
  pointer-events: none;
}

.page-subtitle {
  margin: 17px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

.page-action-row {
  display: flex;
  gap: 9px;
}

.segment-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 28px;
  border-bottom: 1px solid var(--line);
  height: 51px;
}

.segment-tab {
  height: 51px;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  position: relative;
}

.segment-tab.active {
  color: var(--primary);
}

.segment-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
}

.market-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.market-search {
  flex: 1 1 280px;
  max-width: 340px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.market-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.category-pill {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  padding: 0 18px;
  cursor: pointer;
}

.category-pill.active,
.category-pill:hover {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: rgba(113, 50, 223, 0.2);
}

.section-label {
  display: inline-flex;
  margin-top: 16px;
  height: 38px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-weight: 650;
}

.skill-grid,
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  padding-bottom: 40px;
}

.skill-card {
  border: 1px solid var(--line);
  border-radius: 19px;
  overflow: hidden;
  background: var(--surface-strong);
  cursor: pointer;
  transition: 160ms ease;
  min-height: 340px;
}

.skill-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(113, 50, 223, 0.2);
}

.skill-cover {
  height: 250px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.5), transparent 30%),
    linear-gradient(135deg, #7e4bdd, #9b74e3 55%, #8862c8);
  color: #17131a;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -3px;
}

.recommend-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  padding: 5px 8px;
  font-size: 10px;
}

.skill-author {
  position: absolute;
  bottom: 12px;
  left: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
}

.skill-body {
  padding: 14px 15px 17px;
}

.skill-body h3 {
  margin: 0;
  font-size: 17px;
}

.skill-body p {
  color: var(--text-2);
  line-height: 1.65;
  margin: 8px 0 10px;
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tag-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.tag {
  height: 23px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-2);
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
}

.inspiration-card {
  min-height: 260px;
  border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--surface-muted);
}

.inspiration-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 60% 22%, rgba(255,255,255,.92) 0 5%, transparent 6%),
    radial-gradient(circle at 60% 22%, rgba(162,122,235,.32) 0 21%, transparent 22%),
    linear-gradient(160deg, #ede5ff 0 35%, #c9b0ef 36% 58%, #8053c2 59% 100%);
}

.inspiration-card:nth-child(2n) .inspiration-art {
  background:
    radial-gradient(circle at 25% 20%, #fff 0 3%, transparent 4%),
    linear-gradient(145deg, #272438, #8d6fb1 48%, #efbacf);
}

.inspiration-card:nth-child(3n) .inspiration-art {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.75), transparent 18%),
    linear-gradient(145deg, #0f3949, #59a6ae 48%, #f1d49b);
}

.inspiration-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 17px 16px;
  background: linear-gradient(transparent, rgba(20, 14, 28, 0.82));
  color: white;
}

.inspiration-overlay h3 {
  margin: 0 0 5px;
}

.inspiration-overlay p {
  margin: 0;
  opacity: 0.78;
  font-size: 12px;
}

.agent-list {
  padding-top: 5px;
}

.agent-card {
  border-bottom: 1px solid var(--line);
  padding: 13px 8px;
}

.agent-head {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.agent-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.agent-head h4 {
  margin: 0;
  font-size: 14px;
}

.agent-head p {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.45;
}

.agent-subnav {
  margin: 10px 0 0 20px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.agent-subitem {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  cursor: pointer;
  text-align: left;
}

.agent-subitem.active,
.agent-subitem:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.comic-page,
.studio-page {
  min-height: 100%;
  padding: 28px 42px 60px;
}

.comic-hero {
  max-width: 860px;
  margin: 72px auto 0;
}

.comic-hero h1 {
  margin: 0 0 48px;
  text-align: center;
  font-size: clamp(45px, 5.5vw, 76px);
  letter-spacing: -5px;
}

.story-box {
  border: 1.5px solid var(--primary);
  border-left-color: transparent;
  border-radius: 23px;
  min-height: 188px;
  padding: 13px 16px 10px;
  position: relative;
  box-shadow: 0 20px 45px rgba(113, 50, 223, 0.09);
}

.cover-upload {
  width: 54px;
  height: 73px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface-strong);
  position: absolute;
  left: -63px;
  top: 40px;
  font-size: 9px;
  color: var(--text-2);
  cursor: pointer;
}

.story-box input,
.story-box textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.story-box input {
  height: 38px;
  font-size: 17px;
}

.story-box textarea {
  resize: none;
  height: 70px;
  line-height: 1.6;
}

.story-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.option-chip {
  height: 31px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  padding: 0 11px;
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
}

.option-chip strong {
  color: var(--text);
  font-weight: 600;
}

.story-send {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #7935e9, #aa79f0);
  color: white;
  cursor: pointer;
  transform: translate(36%, 32%);
  box-shadow: 0 10px 22px rgba(113, 50, 223, 0.3);
}

.story-prompts {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  flex-wrap: wrap;
}

.story-prompt {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  padding: 0 13px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 68px;
}

.tier-card {
  min-height: 245px;
  border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-strong);
  position: relative;
  padding: 28px;
}

.tier-card.premium {
  background:
    linear-gradient(180deg, transparent, rgba(24, 14, 39, 0.1)),
    linear-gradient(135deg, #34234e, #9a77bc 55%, #c6a5cf);
  color: white;
}

.tier-card.batch {
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.48), transparent 24%),
    linear-gradient(135deg, #d9d2df, #44566b 60%, #172737);
  color: white;
}

.tier-card h3 {
  font-size: 22px;
  margin: 0 0 8px;
}

.tier-card p {
  opacity: 0.8;
  line-height: 1.6;
}

.workflow {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.workflow-step {
  border-top: 2px solid rgba(255,255,255,.42);
  padding-top: 10px;
  font-size: 10px;
  text-align: center;
}

.project-list {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

.project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.project-head h2 {
  margin: 0;
}

.project-empty {
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.studio-hero {
  border-radius: 26px;
  min-height: 310px;
  padding: 46px;
  background:
    radial-gradient(circle at 78% 15%, rgba(255,255,255,.8), transparent 24%),
    linear-gradient(135deg, #efe7ff, #d7c0fa 50%, #ad82e4);
  position: relative;
  overflow: hidden;
}

.studio-hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  margin: 0;
  max-width: 720px;
  letter-spacing: -4px;
}

.studio-hero p {
  max-width: 620px;
  line-height: 1.8;
  color: #4f425e;
  font-size: 16px;
}

.studio-orb {
  width: 260px;
  height: 260px;
  border-radius: 46% 54% 61% 39% / 51% 42% 58% 49%;
  position: absolute;
  right: 50px;
  bottom: -90px;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(95,37,175,.5));
  box-shadow: inset -25px -24px 55px rgba(72, 24, 146, 0.26);
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.studio-card {
  min-height: 200px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
  padding: 22px;
}

.studio-card h3 {
  margin: 14px 0 8px;
}

.studio-card p {
  color: var(--text-2);
  line-height: 1.7;
}

.login-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 18, 37, 0.14), rgba(5, 10, 26, 0.72)),
    radial-gradient(ellipse at 70% 12%, rgba(230, 221, 255, .58) 0 4%, rgba(93, 112, 161, .55) 5% 25%, transparent 26%),
    radial-gradient(ellipse at 20% 88%, #a5a8ca 0 12%, #555d87 13% 28%, transparent 29%),
    linear-gradient(165deg, #314166 0%, #747ba1 42%, #3b456e 58%, #141b33 100%);
  color: white;
}

.login-page::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -20%;
  height: 64%;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(226, 224, 255, .8) 0 1.8%, transparent 2%),
    radial-gradient(ellipse at 24% 42%, rgba(218, 213, 255, .65) 0 1.5%, transparent 1.8%),
    radial-gradient(ellipse at 50% 18%, rgba(240, 236, 255, .58) 0 1.8%, transparent 2%),
    radial-gradient(ellipse at 70% 35%, rgba(240, 236, 255, .62) 0 1.7%, transparent 2%),
    radial-gradient(ellipse at 85% 10%, rgba(240, 236, 255, .5) 0 1.4%, transparent 1.8%),
    linear-gradient(160deg, rgba(201, 203, 239, .5), rgba(75, 82, 129, .2));
  transform: rotate(-2deg);
  filter: blur(0.2px);
  opacity: .92;
}

.login-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(ellipse at 73% 16%, transparent 0 19px, rgba(230,235,255,.16) 20px 22px, transparent 23px 36px);
  mix-blend-mode: screen;
  opacity: .52;
}

.login-header {
  height: 66px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

.login-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-link {
  border: 0;
  background: transparent;
  color: white;
  font-weight: 650;
  cursor: pointer;
}

.signup-link {
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: white;
  color: #15141a;
  padding: 0 20px;
  font-weight: 700;
  cursor: pointer;
}

.login-hero {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 66px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px 110px;
}

.login-copy {
  max-width: 1150px;
  transform: translateY(-4%);
}

.login-copy h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(52px, 7vw, 92px);
  line-height: 1;
  letter-spacing: -5px;
}

.login-copy p {
  max-width: 690px;
  margin: 32px auto 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.hero-btn {
  min-width: 132px;
  height: 49px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(22, 25, 45, .48);
  backdrop-filter: blur(12px);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.hero-btn.primary {
  background: white;
  color: #17151a;
}

.login-features {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 65px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.legal-page {
  min-height: 100vh;
  overflow: auto;
  background: var(--bg-soft);
  padding-bottom: 50px;
}

.legal-header {
  height: 68px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.legal-card {
  width: min(900px, calc(100% - 40px));
  margin: 42px auto;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--surface-strong);
  padding: 42px;
  box-shadow: var(--shadow-soft);
}

.legal-card h1 {
  margin: 0 0 24px;
  font-size: 34px;
}

.legal-card h2 {
  margin-top: 30px;
}

.legal-card p,
.legal-card li {
  line-height: 1.9;
  color: var(--text-2);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(19, 15, 27, 0.44);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 160ms ease;
}

.modal {
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  position: relative;
  animation: popIn 180ms ease;
}

.modal.wide {
  width: min(880px, 100%);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  cursor: pointer;
  z-index: 2;
}

.modal-header {
  padding: 26px 28px 16px;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
}

.modal-header p {
  margin: 7px 0 0;
  color: var(--muted);
}

.modal-body {
  padding: 0 28px 28px;
}

.auth-modal {
  width: min(470px, 100%);
}

.auth-head {
  text-align: center;
  padding: 24px 28px 8px;
}

.auth-head h2 {
  margin: 0;
  font-size: 28px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  background: var(--surface-muted);
  border-radius: 13px;
  margin: 11px 0 13px;
}

.auth-tab {
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.auth-tab.active {
  background: var(--surface-strong);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(43, 23, 67, 0.06);
}

.field {
  margin-bottom: 14px;
}

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--text-2);
}

.field input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface-strong);
  padding: 0 13px;
  outline: 0;
}

.field input:focus {
  border-color: rgba(113, 50, 223, 0.55);
  box-shadow: 0 0 0 4px rgba(113, 50, 223, 0.08);
}

.agreements {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-muted);
  padding: 11px;
  margin: 11px 0;
}

.agreement {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--text-2);
  line-height: 1.55;
  font-size: 11px;
  margin: 7px 0;
}

.agreement input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.auth-submit {
  width: 100%;
  height: 48px;
  border-radius: 13px;
  border: 0;
  background: linear-gradient(135deg, #7334e5, #a071ea);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.auth-footer {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 15px 0 4px;
}

.announcement-body {
  line-height: 1.75;
}

.announcement-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  margin-top: 12px;
}

.announcement-section h3 {
  margin: 0 0 8px;
}

.announcement-section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
}

.search-modal-input {
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
}

.search-modal-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.search-results {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.search-result:hover {
  background: var(--surface-muted);
}

.menu-pop {
  position: fixed;
  z-index: 80;
  top: 65px;
  right: 22px;
  width: 230px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  padding: 8px;
}

.menu-item {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--text-2);
  text-align: left;
}

.menu-item:hover {
  background: var(--surface-muted);
  color: var(--primary);
}

.menu-sep {
  height: 1px;
  background: var(--line);
  margin: 6px 2px;
}

.toast-wrap {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  min-width: 260px;
  max-width: min(520px, calc(100vw - 30px));
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  animation: toastIn 180ms ease;
}

.toast-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

.mobile-menu-btn {
  display: none;
}

.compact .sidebar {
  --sidebar-w: 264px;
}

.compact .model-card {
  min-height: 66px;
}

.compact .model-desc {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 1080px) {
  :root { --sidebar-w: 272px; }
  .header { grid-template-columns: auto 1fr auto; padding: 0 15px; }
  .layout-badge, .header-center .top-nav-item:nth-child(3) { display: none; }
  .chat-stage { padding-left: 18px; padding-right: 18px; }
  .skills-page, .inspiration-page { padding-left: 26px; padding-right: 26px; }
  .studio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-copy h1 { font-size: clamp(48px, 7vw, 74px); }
}

@media (max-width: 820px) {
  body { overflow-y: auto; overflow-x: hidden; }
  .app-root, .workspace, .main-stage, .comic-page, .studio-page { overflow-x: hidden; }
  .header {
    height: 64px;
    grid-template-columns: minmax(0,1fr) auto;
    padding: 0 12px;
  }
  .header-center { display: none; }
  .header-right .top-nav-item:nth-child(-n+3), .header-right .btn.green { display: none; }
  .brand-name { font-size: 18px; }
  .mobile-menu-btn { display: inline-flex; }
  .workspace { height: calc(100vh - 64px); grid-template-columns: 1fr; }
  .workspace.sidebar-hidden { grid-template-columns: 1fr; }
  .workspace.sidebar-hidden .sidebar { margin: 0; opacity: 1; pointer-events: auto; }
  .sidebar-reopen { display: none; }
  .sidebar {
    position: fixed;
    z-index: 50;
    top: 64px;
    left: 0;
    bottom: 0;
    width: min(318px, calc(100vw - 38px));
    margin: 0;
    border-radius: 0 20px 20px 0;
    transform: translateX(-104%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-scrim {
    position: fixed;
    z-index: 45;
    inset: 64px 0 0;
    background: rgba(19,15,27,.32);
  }
  .chat-stage { padding: 12px 13px; min-height: calc(100vh - 64px); }
  .chat-top-actions .btn span:not(.icon) { display: none; }
  .chat-empty { justify-content: flex-start; overflow: auto; padding-top: 38px; }
  .model-hero .description { padding: 0 6px; }
  .suggestion-grid { grid-template-columns: 1fr; }
  .role-strip { margin-top: 15px; }
  .composer { border-radius: 16px; }
  .tool-btn span:last-child { display: none; }
  .dashboard-wrap { height: auto; min-height: calc(100vh - 64px); padding: 10px; }
  .dashboard-panel { min-height: calc(100vh - 84px); }
  .dashboard-toolbar { flex-wrap: wrap; }
  .dashboard-search, .retention { order: 3; flex: 1 1 100%; max-width: none; }
  .empty-board { min-height: 480px; }
  .skills-page, .inspiration-page { padding: 26px 16px 50px; }
  .page-title-row { align-items: flex-start; flex-direction: column; }
  .display-title { font-size: 50px; letter-spacing: -4px; }
  .skill-grid, .inspiration-grid { grid-template-columns: 1fr; }
  .skill-cover { height: 210px; }
  .comic-page, .studio-page { padding: 18px 15px 50px; }
  .comic-hero { margin-top: 35px; }
  .comic-hero h1 { font-size: 48px; letter-spacing: -4px; margin-bottom: 30px; }
  .cover-upload { position: static; width: 100%; height: 46px; margin-bottom: 8px; }
  .tier-grid, .studio-grid { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .studio-hero { padding: 30px 22px; }
  .studio-hero h1 { font-size: 46px; }
  .studio-orb { opacity: .35; right: -90px; }
  .login-header { padding: 0 16px; }
  .login-copy { transform: translateY(-7%); }
  .login-copy h1 { font-size: 49px; letter-spacing: -3px; }
  .login-copy p { font-size: 14px; margin-top: 24px; }
  .login-features { gap: 14px; flex-wrap: wrap; padding: 0 20px; bottom: 24px; }
  .legal-card { padding: 25px 20px; margin-top: 24px; }
}

@media (max-width: 520px) {
  .brand-mark { width: 38px; }
  .header-right .top-nav-item { display: none; }
  .user-pill { height: 40px; }
  .user-pill strong { display: none; }
  .chat-top-actions { gap: 6px; }
  .chat-top-actions .btn { padding: 0 10px; }
  .model-hero h1 { font-size: 27px; }
  .hero-orb { width: 62px; height: 62px; border-radius: 20px; }
  .role-strip { display: none; }
  .composer textarea { height: 92px; }
  .filter-tabs { gap: 0; }
  .dashboard-title { width: calc(100% - 70px); }
  .work-tabs { width: 100%; overflow-x: auto; }
  .retention { font-size: 10px; }
  .display-title { font-size: 42px; }
  .page-action-row { width: 100%; }
  .page-action-row .btn { flex: 1; }
  .category-pill { padding: 0 13px; }
  .comic-hero h1 { font-size: 39px; }
  .story-options { padding-right: 25px; }
  .login-copy h1 { font-size: 42px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-btn { width: 190px; }
  .login-features { font-size: 10px; }
}

/* 账户菜单与字体大小 */
body.font-large { font-size: 15px; }
body.font-xlarge { font-size: 16px; }

.user-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: transparent;
}

.menu-pop.user-menu-full {
  top: 63px;
  right: 14px;
  width: 338px;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 18px;
  padding: 14px;
  z-index: 120;
  box-shadow: 0 18px 55px rgba(39, 25, 53, .18);
}

.user-menu-account {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.avatar.large { width: 42px; height: 42px; }
.user-menu-account p { margin: 4px 0 0; color: var(--text-2); font-size: 12px; }
.user-menu-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.user-menu-name strong { font-size: 15px; }
.user-menu-name span { color: var(--muted); font-size: 11px; }
.user-menu-name button {
  width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.user-menu-name button:hover { background: var(--surface-muted); color: var(--primary); }

.user-menu-balance {
  height: 42px;
  margin: 12px 0 8px;
  padding: 0 11px;
  border: 1px solid #efe4bd;
  border-radius: 10px;
  background: linear-gradient(90deg, #fffdf5, #fff8df);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.dark .user-menu-balance { background: #2e291c; border-color: #54492a; }
.user-menu-balance strong { color: #b27b13; }

.user-menu-section { padding-top: 10px; }
.user-menu-section > small { display: block; color: var(--muted); font-size: 11px; margin: 0 0 5px 2px; }
.user-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; }
.user-menu-item {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  text-align: left;
  color: var(--text-2);
  cursor: pointer;
}
.user-menu-item:hover { background: var(--surface-muted); color: var(--primary); }
.user-menu-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-entry {
  width: 100%;
  min-height: 58px;
  margin-top: 9px;
  padding: 8px 7px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  text-align: left;
  cursor: pointer;
}
.team-entry > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.team-entry small { color: var(--muted); font-size: 10px; font-weight: 500; }
.team-entry:hover { background: var(--primary-soft); }

.font-size-block { padding: 11px 2px 8px; border-bottom: 1px solid var(--line); }
.font-size-block > div:first-child { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 12px; }
.font-size-block > div:first-child span { display: inline-flex; align-items: center; gap: 7px; }
.font-size-block > div:first-child strong { color: var(--text); font-size: 11px; }
.font-size-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.font-size-options button {
  min-height: 45px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
}
.font-size-options button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.font-size-options small { font-size: 9px; }
.user-menu-logout {
  width: 100%; min-height: 40px; margin-top: 7px; border: 0; border-radius: 9px; background: transparent;
  display: flex; align-items: center; gap: 9px; padding: 0 8px; color: var(--text-2); cursor: pointer;
}
.user-menu-logout:hover { background: #fff0f2; color: var(--danger); }

.support-card { text-align: center; }
.support-card > small { display: block; margin-top: 10px; color: var(--muted); }
.security-row, .api-key-card {
  min-height: 58px; padding: 10px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.security-row span { display: flex; flex-direction: column; gap: 3px; }
.security-row small { color: var(--muted); }
.api-key-card { border: 1px solid var(--line); border-radius: 13px; padding: 12px; }
.api-key-card > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.api-key-card code { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.billing-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }
.billing-summary article { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); }
.billing-summary small { display: block; color: var(--muted); margin-bottom: 7px; }
.public-profile-card { text-align: center; overflow: hidden; position: relative; padding-bottom: 10px; }
.profile-cover { height: 140px; border-radius: 15px; background: linear-gradient(135deg, #4e168f, #ae78ed 55%, #f0c5aa); }
.public-profile-card > .avatar { margin: -23px auto 0; border: 4px solid var(--surface-strong); position: relative; }
.profile-stats { display: flex; justify-content: center; gap: 32px; margin: 18px 0; }
.profile-stats span { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.profile-stats b { color: var(--text); font-size: 17px; }
.team-plan h2 { font-size: 25px; line-height: 1.35; }
.team-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
.team-benefits span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }

/* API 文档 */
.api-docs-page { min-height: 100vh; background: var(--bg); overflow: auto; }
.api-docs-layout { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.api-docs-nav { padding: 30px 18px; border-right: 1px solid var(--line); background: var(--bg-soft); }
.api-docs-nav > strong { display: block; font-size: 18px; margin: 0 10px 20px; }
.api-docs-nav button { width: 100%; min-height: 39px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; text-align: left; color: var(--text-2); cursor: pointer; }
.api-docs-nav button:hover, .api-docs-nav button.active { background: var(--primary-soft); color: var(--primary); }
.api-docs-content { width: min(900px, 100%); padding: 55px 60px 100px; }
.api-docs-content h1 { font-size: 43px; margin: 13px 0 12px; }
.api-docs-content h2 { margin-top: 32px; }
.api-docs-content p { color: var(--text-2); line-height: 1.8; }
.api-docs-content pre { overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #16131c; color: #efeafa; line-height: 1.7; }
.api-warning { margin: 20px 0; padding: 13px 15px; border: 1px solid #eed8a7; border-radius: 10px; background: var(--amber-soft); color: #966710; }

/* 无限画布首页微调 */
.canvas-home { min-height: 100%; }
.canvas-setting-label { align-self: center; color: var(--text-2); font-size: 12px; }
.canvas-settings .option-chip.active { border-color: #cfb7f7; background: var(--primary-soft); color: var(--primary); }
.canvas-start { min-width: 94px; }
.canvas-hero .story-prompts { align-items: center; }
.canvas-hero .story-prompts > span { color: var(--muted); font-size: 12px; }
.canvas-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.canvas-project-card { display: block; text-align: left; color: var(--text); cursor: pointer; }
.canvas-project-card:hover { border-color: #cdb3f8; transform: translateY(-2px); box-shadow: var(--shadow); }
.canvas-project-card .btn { pointer-events: none; }

/* 无限画布编辑器 */
.canvas-editor-page {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background: var(--bg);
}
.canvas-editor-header {
  position: absolute; inset: 0 0 auto; z-index: 50; height: 56px; padding: 0 18px;
  border-bottom: 1px solid var(--line); background: var(--surface-strong);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.canvas-editor-brand, .canvas-editor-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark.small { width: 27px; height: 27px; flex: 0 0 27px; }
.canvas-icon-btn {
  width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2);
}
.canvas-icon-btn:hover { background: var(--surface-muted); color: var(--primary); }
.canvas-project-title { height: 34px; border: 0; background: transparent; display: flex; align-items: center; gap: 5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.canvas-updated { color: var(--muted); font-size: 11px; white-space: nowrap; }
.canvas-strategy { display: flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.canvas-strategy button { height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); cursor: pointer; }
.canvas-strategy button.active { background: var(--primary-soft); color: var(--primary); box-shadow: 0 2px 8px rgba(83,44,139,.08); }
.canvas-publish-btn { height: 36px; padding: 0 15px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #7a36e5, #963cf2); color: white; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; }
.canvas-balance { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-muted); color: #d58d1a; cursor: pointer; }
.canvas-person { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

.canvas-board {
  position: absolute; inset: 56px 0 0;
  overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(123, 108, 143, .18) 1px, transparent 1px);
  background-size: 22px 22px;
}
.canvas-scene { position: absolute; left: 42px; top: 20px; width: 1600px; height: 1080px; transform: scale(var(--canvas-scale)); transform-origin: 0 0; transition: transform 160ms ease; }
.canvas-links { position: absolute; inset: 0; width: 1600px; height: 1040px; overflow: visible; pointer-events: none; }
.canvas-links path { fill: none; stroke: #8b46e9; stroke-width: 4; stroke-dasharray: 10 8; opacity: .75; }
.canvas-flow-node {
  position: absolute; width: 290px; min-height: 150px; border: 2px solid #cfb4f6; border-radius: 13px;
  background: var(--surface-strong); box-shadow: 0 8px 26px rgba(66, 35, 93, .09); overflow: hidden; cursor: pointer;
}
.canvas-flow-node:hover { border-color: var(--primary); box-shadow: 0 12px 35px rgba(91, 48, 136, .16); }
.canvas-flow-node > header { height: 34px; padding: 0 10px; border-bottom: 1px solid var(--line); background: #fbf8ff; display: flex; align-items: center; justify-content: space-between; color: #7041aa; font-weight: 700; font-size: 12px; }
.dark .canvas-flow-node > header { background: #241d30; }
.canvas-flow-node > header span { display: inline-flex; align-items: center; gap: 6px; }
.canvas-flow-node > header button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.canvas-flow-node > p { min-height: 78px; margin: 0; padding: 11px; color: var(--text-2); font-size: 12px; line-height: 1.55; }
.node-footer { min-height: 36px; padding: 6px 9px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.node-footer button { min-height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.node-footer button.run { background: var(--primary); border-color: var(--primary); color: white; }
.node-upload { width: 300px; min-height: 190px; }
.node-upload-zone { margin: 11px; min-height: 130px; border: 1px dashed #cbb8dd; border-radius: 10px; background: var(--surface-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); }
.node-upload-zone strong { color: var(--primary); }
.node-upload-zone input { width: calc(100% - 22px); height: 29px; margin-top: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-strong); padding: 0 8px; font-size: 10px; }
.node-generate { width: 300px; min-height: 142px; }
.node-model { display: flex; align-items: center; justify-content: space-between; padding: 14px 11px 7px; }
.node-model span { padding: 4px 7px; border-radius: 7px; background: var(--surface-muted); color: var(--text-2); font-size: 10px; }
.node-price { min-height: auto !important; padding: 5px 11px !important; color: #bd8318 !important; }
.canvas-extra-node { border-color: #9fd7bf; }

.canvas-toolbox {
  position: absolute; z-index: 30; left: 18px; top: 84px; width: 80px; max-height: calc(100vh - 102px);
  padding: 9px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-strong); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; overflow-y: auto;
}
.canvas-toolbox button { min-height: 51px; border: 0; border-radius: 10px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); font-size: 10px; cursor: pointer; }
.canvas-toolbox button:hover { background: var(--surface-muted); }
.canvas-toolbox button.active { background: var(--primary-soft); color: var(--primary); }
.canvas-toolbox button:disabled { opacity: .3; cursor: not-allowed; }
.canvas-tool-sep { height: 1px; margin: 3px; background: var(--line); }

.canvas-ai-panel {
  position: absolute; z-index: 35; top: 84px; right: 18px; bottom: 18px; width: 360px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface-strong); box-shadow: var(--shadow-soft); overflow: hidden;
  display: grid; grid-template-rows: 60px minmax(0,1fr) auto;
}
.canvas-ai-panel > header { padding: 0 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.canvas-ai-panel > header strong { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.canvas-ai-panel > header button { border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.canvas-ai-body { padding: 17px; overflow: auto; }
.canvas-ai-body p { margin: 0 0 16px; color: var(--text-2); line-height: 1.7; font-size: 14px; }
.canvas-ai-body button { width: 100%; min-height: 36px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); padding: 0 11px; text-align: left; color: var(--text-2); cursor: pointer; }
.canvas-ai-body button:hover { border-color: #c9aef4; background: var(--primary-soft); }
.canvas-ai-composer { margin: 0 14px 14px; min-height: 59px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); display: grid; grid-template-columns: 34px minmax(0,1fr) 38px; align-items: end; gap: 4px; padding: 6px; }
.canvas-ai-composer textarea { min-height: 38px; max-height: 100px; resize: none; border: 0; outline: 0; background: transparent; padding: 9px 3px; }
.canvas-ai-composer button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.canvas-ai-composer button.canvas-ai-send { background: var(--primary); color: white; }
.canvas-assistant-reopen { position: absolute; z-index: 30; right: 18px; top: 78px; height: 42px; padding: 0 14px; border: 1px solid #d1baf5; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; gap: 7px; cursor: pointer; }

/* The monitor is deliberately fed from Studio Core job and asset records.
   A completed card is therefore a private asset preview, never a browser-side
   stand-in for a video or other asynchronous result. */
.canvas-run-monitor { position: absolute; z-index: 34; left: 112px; top: 84px; width: min(440px, calc(100vw - 510px)); max-height: calc(100vh - 190px); overflow: auto; padding: 13px; border: 1px solid #cdb7f2; border-radius: 15px; background: var(--surface-strong); box-shadow: var(--shadow-soft); }
.canvas-run-monitor.status-failed, .canvas-run-monitor.status-timeout, .canvas-run-monitor.status-cancelled { border-color: #e5afb6; }
.canvas-run-monitor.status-succeeded { border-color: #9fd7bf; }
.canvas-run-monitor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.canvas-run-monitor header strong, .canvas-run-kicker { display: block; }
.canvas-run-monitor header strong { margin-top: 2px; font-size: 14px; }
.canvas-run-kicker { color: var(--muted); font-size: 10px; }
.canvas-run-status { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; }
.status-succeeded .canvas-run-status { background: #e7f8ef; color: #147c4d; }
.status-failed .canvas-run-status, .status-timeout .canvas-run-status, .status-cancelled .canvas-run-status { background: #fff0f0; color: #b3434b; }
.canvas-run-id, .canvas-run-wait, .canvas-run-note, .canvas-run-error { margin: 8px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.55; }
.canvas-run-id { color: var(--muted); font-family: Consolas, "Microsoft YaHei", monospace; }
.canvas-run-error { padding: 8px; border-radius: 8px; background: #fff3f3; color: #9d3c45; }
.canvas-run-preview { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.canvas-run-preview .generated-media { display: block; width: 100%; max-height: 210px; object-fit: contain; background: #111; }
.canvas-run-preview-actions, .canvas-run-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.canvas-run-preview-actions { justify-content: space-between; padding: 8px 9px; color: var(--text-2); font-size: 11px; }
.canvas-run-actions { margin-top: 10px; }
.canvas-run-actions .danger { border-color: #e4b0b6; color: #b3434b; }
.canvas-run-note { padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); }

.canvas-minimap { position: absolute; z-index: 25; left: 112px; bottom: 72px; width: 200px; height: 115px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); box-shadow: var(--shadow-soft); overflow: hidden; }
.canvas-minimap i { position: absolute; height: 9px; background: #7242bd; border-radius: 1px; }
.canvas-minimap i:nth-of-type(2), .canvas-minimap i:nth-of-type(4) { background: #118a48; }
.mini-viewport { position: absolute; inset: 14px; border: 2px solid var(--primary); background: rgba(113,50,223,.04); }
.canvas-zoom { position: absolute; z-index: 30; left: 18px; bottom: 18px; min-width: 190px; height: 46px; padding: 0 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: space-around; }
.canvas-zoom button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.canvas-zoom button:hover { background: var(--surface-muted); }
.canvas-zoom strong { font-size: 11px; min-width: 36px; text-align: center; }
.canvas-add-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.canvas-add-grid button { min-height: 120px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.canvas-add-grid button:hover { border-color: #c4a6f3; background: var(--primary-soft); color: var(--primary); }
.canvas-add-grid small { color: var(--muted); }

@media (max-width: 1100px) {
  .canvas-editor-header { padding: 0 10px; }
  .canvas-updated, .canvas-strategy, .canvas-editor-actions .canvas-icon-btn:nth-of-type(1), .canvas-editor-actions .canvas-icon-btn:nth-of-type(2) { display: none; }
  .canvas-ai-panel { width: 320px; right: 10px; }
  .canvas-toolbox { left: 10px; }
  .canvas-run-monitor { left: 98px; width: min(390px, calc(100vw - 440px)); }
}

@media (max-width: 820px) {
  .menu-pop.user-menu-full { top: 58px; right: 8px; width: min(338px, calc(100vw - 16px)); max-height: calc(100vh - 68px); }
  .api-docs-layout { grid-template-columns: 1fr; }
  .api-docs-nav { display: none; }
  .api-docs-content { padding: 35px 20px 70px; }
  .canvas-home { padding: 35px 16px 70px; }
  .canvas-hero h1 { font-size: 48px; letter-spacing: -3px; }
  .canvas-project-grid { grid-template-columns: 1fr; }
  .canvas-editor-header { height: 58px; }
  .canvas-editor-brand .brand-mark, .canvas-editor-actions .canvas-balance { display: none; }
  .canvas-project-title { max-width: 125px; overflow: hidden; text-overflow: ellipsis; }
  .canvas-publish-btn { padding: 0 10px; }
  .canvas-board { top: 58px; }
  .canvas-toolbox { top: 72px; width: 58px; max-height: calc(100vh - 145px); padding: 5px; }
  .canvas-toolbox button { min-height: 45px; }
  .canvas-minimap { display: none; }
  .canvas-zoom { left: 76px; min-width: 160px; }
  .canvas-ai-panel { top: 66px; right: 8px; bottom: 8px; width: min(340px, calc(100vw - 76px)); }
  .canvas-assistant-reopen { top: 68px; right: 8px; }
  .canvas-scene { left: 50px; }
  .canvas-run-monitor { left: 76px; top: 66px; width: min(360px, calc(100vw - 84px)); max-height: 44vh; }
}

@media (max-width: 520px) {
  .user-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canvas-editor-actions .canvas-icon-btn, .canvas-editor-actions .canvas-person { display: none; }
  .canvas-add-grid { grid-template-columns: repeat(2, 1fr); }
  .team-benefits { grid-template-columns: 1fr; }
}

/* Extended full-flow demo pages */
.media-workspace,
.super-agent-page,
.canvas-home,
.ecommerce-page,
.ecom-board,
.asset-center-page,
.publish-page,
.skill-editor-page,
.square-page,
.vibe-page {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.media-workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 28%, rgba(126, 77, 225, .10), transparent 33%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
}

.video-workspace { background: radial-gradient(circle at 50% 30%, rgba(56, 123, 222, .11), transparent 35%), var(--bg); }
.audio-workspace { background: radial-gradient(circle at 50% 30%, rgba(47, 174, 127, .10), transparent 35%), var(--bg); }

.media-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px 12px;
  background: linear-gradient(var(--bg-soft), rgba(255,255,255,0));
}

.media-top-left,
.media-top-right,
.generation-tools,
.page-action-row,
.editor-actions,
.work-card-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.media-scroll {
  width: min(1120px, calc(100% - 38px));
  margin: 0 auto;
  padding: 6px 0 48px;
}

.media-hero-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 180px;
  text-align: left;
}

.media-hero-card h1 { margin: 3px 0 9px; font-size: clamp(30px, 4vw, 48px); letter-spacing: -2px; }
.media-hero-card p { max-width: 680px; margin: 0; color: var(--text-2); line-height: 1.75; }
.media-eyebrow { color: var(--primary); font-weight: 800; font-size: 11px; letter-spacing: 2px; }
.media-role-strip { margin: 0 auto 13px; }

.recent-output-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.mini-output {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
}
.mini-output strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-output small { grid-column: 2; color: var(--muted); }
.output-kind { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 25px; padding: 0 8px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; }

.generation-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}

.generation-modes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.mode-pill { border: 1px solid var(--line); background: var(--surface-muted); height: 34px; padding: 0 16px; border-radius: 11px; cursor: pointer; color: var(--text-2); white-space: nowrap; }
.mode-pill.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 800; }

.generation-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 15px 0 10px;
}
.generation-model-row > div { min-width: 0; flex: 1; }
.generation-model-row strong { display: block; }
.generation-model-row small { display: block; color: var(--muted); margin-top: 3px; }

.generation-panel > textarea,
.skill-editor-grid textarea,
.vibe-copy textarea,
.canvas-hero > textarea,
.publish-card textarea {
  width: 100%;
  resize: vertical;
  border: 0;
  border-radius: 14px;
  background: var(--surface-muted);
  color: var(--text);
  padding: 16px;
  min-height: 128px;
  line-height: 1.65;
}

.upload-zone {
  position: relative;
  margin: 12px 0;
  min-height: 98px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
}
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone > div { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 5px 8px; }
.upload-zone small { grid-column: 2 / -1; color: var(--muted); }
.upload-zone .btn { position: relative; z-index: 2; }

.generation-tools { padding: 9px 0; }
.generation-tools #generation-char-count { margin-left: auto; font-size: 11px; color: var(--muted); }

.generation-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 10px 0 13px;
}
.generation-option {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-muted);
  min-height: 60px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.generation-option small { display: block; color: var(--muted); margin-bottom: 5px; }
.generation-option strong { display: inline-block; max-width: calc(100% - 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generation-option .icon { float: right; color: var(--muted); }
.generate-btn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), #9b6ef3);
  color: white;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.generate-btn:disabled { opacity: .38; cursor: not-allowed; }

/* GPT Image 2 workspace: dense, inspectable controls inspired by the supplied
   reference while keeping every action inside the Xingtu product shell. */
.image-workspace-v2 { background: radial-gradient(circle at 52% 22%, rgba(137, 84, 237, .13), transparent 33%), linear-gradient(180deg, #fbfaff 0%, var(--bg) 68%); }
.image-scroll-v2 { width: min(1320px, calc(100% - 40px)); padding-bottom: 66px; }
.image-hero-v2 { min-height: 176px; display: flex; align-items: center; justify-content: center; gap: 20px; text-align: left; }
.image-hero-v2 .hero-orb { width: 68px; height: 68px; border-radius: 22px; background: linear-gradient(135deg, #f2e9ff, #d7bbff); box-shadow: 0 16px 34px rgba(120, 68, 220, .18); }
.image-hero-v2 h1 { font-size: clamp(33px, 4vw, 54px); margin: 4px 0 8px; letter-spacing: -2.5px; }
.image-hero-v2 p { max-width: 740px; margin: 0; color: var(--text-2); line-height: 1.7; }
.image-role-strip { margin-bottom: 15px; padding: 2px 0 9px; }
.image-role-strip .role-chip { display: inline-flex; align-items: center; gap: 4px; }
.image-panel-v2 { border: 1px solid rgba(112, 78, 180, .22); border-radius: 24px; background: rgba(255,255,255,.93); box-shadow: 0 18px 60px rgba(82, 44, 137, .10); padding: 0 20px 16px; overflow: hidden; }
.image-mode-tabs { display: flex; align-items: center; gap: 8px; min-height: 65px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.image-mode-tab { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 11px; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.image-mode-tab.active { color: var(--primary); border-color: #9b6df1; background: #f1e9ff; font-weight: 800; }
.image-model-label { margin-left: 4px; font-weight: 800; color: var(--text-2); white-space: nowrap; }
.image-cost-pill, .image-balance-pill { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; white-space: nowrap; font-size: 12px; }
.image-cost-pill b { color: #4e32a5; }
.image-balance-pill { border-color: #ffd8a4; background: #fff8eb; color: #d17b08; cursor: pointer; }
.image-info-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
.compression-toggle { margin-left: auto; border: 1px solid #b98df4; background: #f3eaff; color: var(--primary); border-radius: 14px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.toggle-switch { width: 30px; height: 18px; border-radius: 12px; background: #c8b8dd; padding: 2px; transition: .2s; }
.toggle-switch i { display: block; width: 14px; height: 14px; background: white; border-radius: 50%; transition: .2s; }
.compression-toggle.active .toggle-switch { background: #6d25d9; }
.compression-toggle.active .toggle-switch i { transform: translateX(12px); }
.image-mode-note { color: var(--muted); font-size: 12px; padding: 12px 0 3px; }
.image-asset-slots { display: flex; gap: 9px; flex-wrap: wrap; padding: 7px 0 10px; }
.image-asset-slot { width: 66px; height: 66px; border: 1px dashed #baa4d4; border-radius: 12px; background: #faf7ff; color: var(--primary); display: grid; place-items: center; position: relative; cursor: pointer; }
.image-asset-slot span { font-size: 23px; line-height: 1; }
.image-asset-slot small { font-size: 10px; color: var(--muted); }
.image-asset-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.image-asset-slot.filled > span { position: absolute; right: 4px; bottom: 4px; width: 17px; height: 17px; border-radius: 50%; background: rgba(32, 18, 56, .75); color: white; display: grid; place-items: center; font-size: 10px; }
.image-asset-add { border: 1px solid var(--line); border-radius: 12px; min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); background: var(--surface); cursor: pointer; }
.image-prompt-wrap { border: 1px solid var(--line); border-radius: 15px; background: #fbfaff; overflow: hidden; }
.image-prompt-wrap textarea { min-height: 174px; background: transparent; border: 0; border-radius: 0; padding: 17px; font-size: 14px; }
.image-prompt-actions { display: flex; align-items: center; gap: 5px; padding: 0 13px 10px; }
.image-prompt-actions #generation-char-count { margin-left: auto; color: var(--muted); font-size: 11px; }
.image-channel-btn { color: var(--primary); background: #f1e9ff; border-color: #c4a2f5; }
.image-options-v2 { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin-top: 15px; }
.image-options-v2 .generation-option { background: #fbf9ff; min-height: 66px; }
.image-submit-row { display: flex; align-items: stretch; gap: 9px; }
.image-generate-btn { flex: 1; }
.image-side-action { width: 47px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.image-footer-note { color: var(--muted); font-size: 11px; text-align: center; padding-top: 12px; }
.modal-intro { color: var(--text-2); line-height: 1.7; margin: 0 0 14px; }
.role-manage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 65vh; overflow: auto; }
.role-manage-card { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 11px; background: var(--surface); }
.role-manage-card.active { border-color: #b185f2; background: #faf7ff; }
.role-manage-card > div:nth-child(2) { min-width: 0; }
.role-manage-card strong, .role-manage-card small { display: block; }
.role-manage-card small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.role-manage-card .btn { grid-column: span 1; }
.role-manage-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: #eee4ff; }
.capability-list { display: grid; gap: 10px; }
.capability-list > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.capability-list span, .modal-footnote { color: var(--muted); font-size: 12px; line-height: 1.6; }
.channel-strategy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.channel-strategy-card { text-align: left; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); cursor: pointer; }
.channel-strategy-card.active { border-color: #b185f2; background: #faf7ff; box-shadow: 0 0 0 2px #eadcff inset; }
.channel-strategy-card .icon { color: var(--primary); }
.channel-strategy-card span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.channel-current { color: var(--primary); font-size: 11px; }
.channel-divider { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; color: var(--muted); font-size: 12px; }
.channel-list { display: grid; gap: 7px; margin-top: 9px; max-height: 38vh; overflow: auto; }
.channel-row { border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.channel-row strong, .channel-row small { display: block; }
.channel-row small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.image-choice-list { display: grid; gap: 6px; max-height: 63vh; overflow: auto; }
.image-choice { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; padding: 11px 13px; text-align: left; cursor: pointer; }
.image-choice:hover, .image-choice.active { border-color: #d4baf8; background: #f1eaff; }
.image-choice strong, .image-choice small { display: block; }
.image-choice small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.image-choice .icon { color: var(--primary); }
.parameter-summary { display: grid; gap: 8px; }
.parameter-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; background: var(--surface-muted); }
.parameter-summary span { color: var(--muted); }
.image-upload-drop { min-height: 170px; border: 1px dashed #b69cda; border-radius: 14px; background: #faf7ff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--primary); cursor: pointer; }
.image-upload-drop input { display: none; }
.image-upload-drop small, .image-upload-tips { color: var(--muted); font-size: 11px; }
.image-upload-tips { display: flex; justify-content: space-between; gap: 10px; padding-top: 9px; }

.generation-result .result-preview {
  min-height: 280px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #261a40, #7b43d9 52%, #d8b9ff);
  color: white;
}
.generation-result .result-视频 { background: linear-gradient(135deg, #071b38, #165b9d, #66c5e8); }
.generation-result .result-音频 { background: linear-gradient(135deg, #063c2a, #18a875, #87e9c4); }
.generation-result > p { color: var(--text-2); line-height: 1.7; }

.works-grid,
.square-grid,
.prompt-grid,
.asset-grid,
.ecom-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
}
.work-card,
.square-card,
.prompt-card,
.asset-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.work-preview { height: 180px; padding: 13px; display: flex; justify-content: space-between; align-items: flex-start; color: white; background: linear-gradient(135deg, #4c2b7d, #b78aef); }
.work-preview.work-视频 { background: linear-gradient(135deg, #163d6f, #52b6e0); }
.work-preview.work-音频 { background: linear-gradient(135deg, #0c674b, #63dbad); }
.work-preview.work-灵感 { background: linear-gradient(135deg, #723c28, #e1aa61); }
.work-preview span, .work-preview b { background: rgba(0,0,0,.25); border-radius: 8px; padding: 5px 8px; font-size: 11px; }
.work-card-body, .square-body { padding: 15px; }
.work-card-body h3, .square-body h3 { margin: 0 0 7px; }
.work-card-body p, .square-body p { color: var(--muted); min-height: 38px; line-height: 1.5; }

.compact-empty { min-height: 330px; grid-column: 1 / -1; }
.task-list { display: grid; gap: 9px; }
.task-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; padding: 11px; }
.task-row > div { min-width: 0; flex: 1; }
.task-row strong, .task-row small { display: block; }
.task-row small { color: var(--muted); margin-top: 3px; }
.history-conversation-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.history-conversation-main > div { min-width: 0; flex: 1; }
.history-conversation-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option-choice-grid { display: flex; gap: 9px; flex-wrap: wrap; }

.prompt-library { overflow: auto; }
.prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 0 50px; }
.prompt-card { padding: 18px; display: flex; flex-direction: column; }
.prompt-card-head { display: flex; align-items: center; gap: 11px; }
.prompt-card-head h3 { margin: 0 0 4px; }
.prompt-card-head p { margin: 0; color: var(--muted); }
.prompt-card blockquote { margin: 16px 0; padding: 13px 15px; border-left: 3px solid var(--primary); border-radius: 0 12px 12px 0; background: var(--surface-muted); color: var(--text-2); line-height: 1.65; flex: 1; }
.prompt-meta, .prompt-actions { display: flex; align-items: center; gap: 9px; }
.prompt-meta { color: var(--muted); font-size: 11px; }
.prompt-meta span:last-child { margin-left: auto; }
.prompt-actions { justify-content: flex-end; margin-top: 13px; }

.square-page,
.asset-center-page,
.skill-editor-page,
.vibe-page,
.ecom-board,
.publish-page { padding: 38px 44px 60px; }
.square-grid { padding: 10px 0; }
.square-art { height: 230px; position: relative; background: linear-gradient(135deg, #231438, #8b57d7, #f5cf9e); }
.square-art.art-2 { background: linear-gradient(135deg, #061a2c, #17568d, #e34789); }
.square-art.art-3 { background: linear-gradient(135deg, #0e3d32, #4f9d6a, #e6d599); }
.square-art.art-4 { background: linear-gradient(135deg, #552d22, #d89e65, #f7e8c8); }
.square-art.art-5 { background: linear-gradient(135deg, #1f1b18, #776040, #e6cf9a); }
.square-art.art-6 { background: linear-gradient(135deg, #171a27, #4e506d, #d294bc); }
.square-art span { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.38); color: white; border-radius: 8px; padding: 5px 8px; font-size: 11px; }

.skill-editor-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 22px; }
.editor-card, .editor-preview, .publish-card, .publish-checklist { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 22px; box-shadow: var(--shadow-soft); }
.editor-card label, .publish-card label { display: grid; gap: 7px; color: var(--text-2); font-weight: 700; margin-bottom: 15px; }
.editor-card input, .editor-card select, .publish-card input, .publish-card select { height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-muted); color: var(--text); padding: 0 12px; }
.editor-preview .skill-cover { border-radius: 16px; margin: 14px 0; }

.super-agent-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.agent-session-panel { border-right: 1px solid var(--line); background: var(--surface); padding: 17px; display: flex; flex-direction: column; gap: 13px; }
.session-group { display: grid; gap: 6px; }
.session-group small { color: var(--muted); padding: 5px; }
.agent-session-entry { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 4px; }
.session-item { min-width: 0; border: 0; border-radius: 10px; background: transparent; padding: 10px; text-align: left; cursor: pointer; }
.session-item.active { background: var(--primary-soft); color: var(--primary); }
.session-item span { display: block; overflow: hidden; color: inherit; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.session-item small { display: block; padding: 3px 0 0; font-size: 10px; }
.agent-session-archive { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.agent-session-archive:hover { background: var(--danger-soft, #fff0f0); color: var(--danger, #d33); }
.agent-chat-area { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }
.agent-chat-header { border-bottom: 1px solid var(--line); padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agent-chat-header strong, .agent-chat-header small { display: block; }
.agent-chat-header small { color: var(--muted); margin-top: 2px; }
.agent-message-list { overflow: auto; padding: 28px max(25px, 9%); }
.agent-message { display: flex; gap: 11px; margin-bottom: 21px; }
.agent-message.user { flex-direction: row-reverse; }
.agent-message > div { max-width: 78%; }
.agent-message p { margin: 0; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: var(--surface); padding: 13px 15px; line-height: 1.7; }
.agent-message.user p { background: var(--primary); color: white; border-color: var(--primary); border-radius: 16px 4px 16px 16px; }
.message-mini-actions { display: flex; gap: 8px; margin-top: 5px; }
.message-mini-actions button { border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.agent-composer { margin: 0 max(22px, 8%) 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-soft); padding: 12px; }
.agent-composer textarea { width: 100%; min-height: 90px; border: 0; background: transparent; resize: vertical; color: var(--text); }
.agent-tool-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.canvas-home { padding: 45px; background: radial-gradient(circle at 50% 15%, rgba(110,61,220,.15), transparent 34%), var(--bg); }
.canvas-hero { width: min(900px, 100%); margin: 0 auto; text-align: center; }
.canvas-hero h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -5px; margin: 18px 0; }
.canvas-hero p { color: var(--text-2); font-size: 16px; }
.canvas-hero > textarea { margin-top: 22px; min-height: 145px; text-align: left; border: 1px solid var(--line); box-shadow: var(--shadow); }
.canvas-settings { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.recent-projects { width: min(1040px, 100%); margin: 58px auto 0; }
.canvas-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.canvas-project { min-height: 190px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 15px; box-shadow: var(--shadow-soft); }
.canvas-project.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--primary); }
.canvas-thumb { height: 100px; border-radius: 12px; background: linear-gradient(135deg, #312149, #a776e5, #f0cfad); }
.canvas-project h3 { margin: 11px 0 4px; }
.canvas-project p { color: var(--muted); }
.canvas-simulation { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; padding: 25px 0; }
.canvas-node { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }

.ecommerce-page { padding-bottom: 60px; }
.ecommerce-nav { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); padding: 12px 20px; }
.ecommerce-nav button { border: 0; background: transparent; border-radius: 10px; padding: 10px 13px; white-space: nowrap; cursor: pointer; }
.ecommerce-nav button.active { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.ecommerce-hero { padding: 58px 45px 35px; background: radial-gradient(circle at 20% 10%, rgba(113,50,223,.17), transparent 30%), linear-gradient(135deg, var(--bg-soft), var(--bg)); }
.ecommerce-hero h1 { font-size: clamp(40px, 5vw, 70px); letter-spacing: -4px; margin: 0 0 12px; }
.ecommerce-hero p { color: var(--text-2); font-size: 16px; }
.quick-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.quick-links button { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 10px 13px; cursor: pointer; }
.ecom-section { padding: 28px 45px; }
.ecom-section > h2 { font-size: 27px; margin-bottom: 5px; }
.ecom-section > p { color: var(--muted); }
.ecom-card-grid { padding: 14px 0; }
.ecom-card { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 17px; text-align: left; cursor: pointer; box-shadow: var(--shadow-soft); }
.ecom-card h3 { margin: 14px 0 6px; }
.ecom-card p { color: var(--muted); min-height: 38px; }
.ecom-card b { color: var(--primary); font-size: 12px; }
.system-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 15px 0; }

.board-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.board-stats article { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 17px; }
.board-stats small, .board-stats strong { display: block; }
.board-stats small { color: var(--muted); }
.board-stats strong { font-size: 28px; margin-top: 8px; }
.board-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.board-columns section { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-muted); min-height: 360px; padding: 12px; }
.board-columns h3 { margin: 0 0 12px; display: flex; justify-content: space-between; }
.board-columns h3 span { color: var(--muted); }
.board-add, .board-empty { width: 100%; min-height: 86px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; }

.asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 0; }
.asset-add { min-height: 220px; border: 1px dashed var(--line-strong); border-radius: 17px; background: var(--surface-muted); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.asset-add small { color: var(--muted); }
.asset-card { padding: 13px; }
.asset-thumb { height: 135px; border-radius: 12px; background: linear-gradient(135deg, #2b1d44, #8e60d2, #dcb6f2); }
.asset-card h3 { margin: 11px 0 4px; }
.asset-card p { color: var(--muted); }

.publish-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr); gap: 20px; }
.publish-checklist { height: fit-content; }
.check-row { display: flex; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.check-row span { color: var(--primary); font-weight: 900; }

.checkin-modal { display: grid; gap: 16px; text-align: center; }
.checkin-head { display: flex; align-items: center; justify-content: center; gap: 13px; text-align: left; }
.checkin-head h3, .checkin-head p { margin: 0; }
.checkin-head p { color: var(--muted); margin-top: 3px; }
.checkin-reward { border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(135deg, var(--primary-soft), var(--surface)); padding: 18px; display: grid; gap: 4px; }
.checkin-reward strong { font-size: 31px; color: var(--primary); }
.checkin-reward span, .checkin-tip { color: var(--muted); }
.milestone { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; text-align: left; }
.milestone small { grid-column: 1 / -1; color: var(--muted); }
.week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.week-row span { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.week-row b { width: 32px; height: 32px; margin: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-muted); }
.week-row .done b { background: var(--primary); color: white; }

.balance-card { border-radius: 17px; background: linear-gradient(135deg, #372050, #7b3fd1); color: white; padding: 20px; display: grid; gap: 4px; }
.balance-card strong { font-size: 29px; }
.balance-card small { opacity: .7; }
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.amount-card, .payment-option { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); padding: 13px; cursor: pointer; }
.amount-card strong, .amount-card span { display: block; }
.amount-card span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.amount-card.active, .payment-option.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.payment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.vibe-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 24px; align-items: stretch; }
.vibe-copy, .vibe-preview { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 26px; box-shadow: var(--shadow-soft); }
.vibe-copy h2 { font-size: 37px; letter-spacing: -2px; }
.vibe-copy p { color: var(--text-2); line-height: 1.7; }
.vibe-copy textarea { border: 1px solid var(--line); margin: 12px 0; }
.vibe-preview { padding: 0; overflow: hidden; }
.browser-dots { display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: #f36c65; }
.browser-dots i:nth-child(2) { background: #e8bd4f; }
.browser-dots i:nth-child(3) { background: #58bd6a; }
.vibe-empty { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.vibe-generated { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.vibe-generated > h3 { padding: 0 18px; }
.fake-app-ui { margin: 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.fake-app-ui input, .fake-app-ui button { height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; }
.fake-app-ui button { background: var(--primary); color: white; }
.fake-app-ui div { grid-column: 1 / -1; min-height: 100px; border-radius: 10px; background: var(--surface-muted); padding: 13px; color: var(--muted); }

.guide-page { height: 100vh; overflow: auto; background: radial-gradient(circle at 50% 10%, rgba(113,50,223,.13), transparent 32%), var(--bg); }
.guide-content { width: min(1050px, calc(100% - 36px)); margin: 60px auto; text-align: center; }
.guide-content > h1 { font-size: clamp(48px, 7vw, 86px); letter-spacing: -6px; margin: 0 0 13px; }
.guide-content > p { color: var(--text-2); font-size: 17px; }
.guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 40px 0; text-align: left; }
.guide-grid article { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 19px; box-shadow: var(--shadow-soft); }
.guide-grid article > span { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary); color: white; font-weight: 900; }
.guide-grid p { color: var(--muted); line-height: 1.65; }

@media (max-width: 1100px) {
  .generation-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .works-grid, .square-grid, .asset-grid, .ecom-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .media-topbar { padding: 12px; align-items: flex-start; }
  .media-top-left, .media-top-right { gap: 5px; }
  .media-topbar .btn { padding: 0 9px; font-size: 11px; }
  .media-scroll { width: calc(100% - 22px); }
  .media-hero-card { min-height: 145px; align-items: flex-start; padding-top: 15px; }
  .recent-output-strip { grid-template-columns: 1fr; }
  .generation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-zone { align-items: flex-start; flex-direction: column; }
  .works-grid, .square-grid, .prompt-grid, .asset-grid, .ecom-card-grid { grid-template-columns: 1fr; padding-left: 12px; padding-right: 12px; }
  .square-page, .asset-center-page, .skill-editor-page, .vibe-page, .ecom-board, .publish-page { padding: 24px 15px 50px; }
  .skill-editor-grid, .vibe-builder, .publish-layout { grid-template-columns: 1fr; }
  .super-agent-page { grid-template-columns: 1fr; }
  .agent-session-panel { display: none; }
  .agent-message-list { padding: 20px 14px; }
  .agent-composer { margin: 0 12px 12px; }
  .canvas-home { padding: 32px 15px; }
  .canvas-hero h1 { letter-spacing: -3px; }
  .canvas-project-grid { grid-template-columns: 1fr; }
  .ecommerce-hero, .ecom-section { padding-left: 16px; padding-right: 16px; }
  .board-stats { grid-template-columns: repeat(2, 1fr); }
  .board-columns { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-content > h1 { letter-spacing: -3px; }
}

@media (max-width: 520px) {
  .media-hero-card .hero-orb { display: none; }
  .media-hero-card h1 { font-size: 31px; }
  .generation-panel { padding: 13px; border-radius: 17px; }
  .generation-options { grid-template-columns: 1fr 1fr; }
  .media-top-right .btn:nth-child(1) { display: none; }
  .week-row { gap: 2px; }
  .week-row b { width: 27px; height: 27px; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .board-stats { grid-template-columns: 1fr 1fr; }
}

/* 保持无限画布首页与原站最近项目的双卡布局 */
@media (min-width: 821px) {
  .canvas-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}

/* 经典布局 / 新版布局：两套独立的页面骨架 */
.layout-badge.modern-active {
  border-color: #7b35df;
  box-shadow: inset 0 0 0 1px rgba(123, 53, 223, .16);
  color: var(--text);
}

.dashboard-header {
  display: flex;
  justify-content: flex-end;
  padding-left: 20px;
  padding-right: 24px;
}

.dashboard-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.dashboard-header-controls .header-center {
  display: flex;
}

.dashboard-header-divider {
  width: 1px;
  height: 28px;
  margin: 0 3px;
  background: var(--line);
}

.workspace.layout-modern {
  grid-template-columns: 70px minmax(0, 1fr);
}

.workspace.layout-modern .main-stage {
  grid-column: 2;
}

.workspace.layout-modern.modern-panel-visible {
  grid-template-columns: 70px 298px minmax(0, 1fr);
}

.workspace.layout-modern.modern-panel-visible .main-stage {
  grid-column: 3;
}

.modern-rail {
  grid-column: 1;
  min-width: 70px;
  min-height: 0;
  padding: 3px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface-strong);
  position: relative;
  z-index: 31;
}

.modern-rail-feature,
.modern-rail-item,
.modern-rail-user {
  width: 68px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.modern-rail-feature {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-agent-orb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 6%, transparent 7%),
    repeating-conic-gradient(from 30deg, #17121f 0 7deg, transparent 8deg 15deg),
    radial-gradient(circle, #f6f2fa 0 45%, transparent 67%);
  filter: blur(.15px);
  opacity: .86;
}

.modern-rail-item {
  min-height: 63px;
  padding: 7px 2px 6px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  white-space: nowrap;
  position: relative;
}

.modern-rail-item.active {
  color: var(--primary);
}

.modern-rail-item:hover,
.modern-rail-item[aria-expanded="true"] {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: #7b35df;
}

.modern-rail-item .hot {
  top: 4px;
  right: 4px;
}

.modern-rail-user {
  height: 48px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-drawer {
  position: absolute;
  z-index: 30;
  left: 80px;
  top: 4px;
  bottom: 10px;
  width: 288px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong) 98%, transparent);
  box-shadow: 0 12px 36px rgba(44, 29, 65, .12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modernDrawerIn 150ms ease;
}

@keyframes modernDrawerIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.modern-drawer-head {
  height: 54px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.modern-drawer-head button {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modern-drawer-head button:hover {
  background: var(--surface-muted);
}

.modern-drawer-body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modern-drawer-body .sidebar-filters {
  border-top: 0;
  padding-top: 0;
}

.modern-drawer-body .model-list,
.modern-drawer-body .agent-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-reopen {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  border-color: #d7c1f7;
  background: #eadcff;
  color: #7132df;
  justify-content: center;
  box-shadow: 0 7px 16px rgba(85, 42, 132, .22);
}

.sidebar-reopen:hover {
  color: #6421d1;
  background: #e3d1ff;
  border-color: #c5a4f4;
}

/* 无限画布首页与截图一致的独立工具坞和项目布局 */
.canvas-home {
  min-height: 100%;
  padding: 45px 45px 80px;
  background: var(--bg);
}

.canvas-hero {
  width: min(780px, calc(100% - 32px));
}

.canvas-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 3vw, 44px);
  letter-spacing: -2.5px;
  line-height: 1.18;
}

.canvas-hero p {
  margin: 0 0 34px;
  font-size: 14px;
}

.canvas-project-composer {
  min-height: 202px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.canvas-project-composer textarea {
  width: 100%;
  min-height: 135px;
  padding: 20px 19px 10px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.canvas-composer-bottom {
  min-height: 66px;
  padding: 8px 18px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.canvas-settings {
  margin: 0;
  justify-content: flex-start;
  align-items: center;
}

.canvas-settings .option-chip {
  min-height: 39px;
}

.canvas-settings .option-chip small {
  color: #9a70d5;
  font-size: 9px;
}

.canvas-start {
  min-width: 130px;
  height: 42px;
  border-radius: 13px;
  font-weight: 800;
}

.canvas-hero .story-prompts {
  margin-top: 20px;
  gap: 16px;
  justify-content: flex-start;
}

.canvas-hero .story-prompt,
.canvas-hero .story-refresh {
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 4px 0;
  box-shadow: none;
}

.canvas-hero .story-prompt:hover,
.canvas-hero .story-refresh:hover {
  color: var(--primary);
  background: transparent;
  transform: none;
}

.canvas-hero .story-refresh {
  font-size: 23px;
  cursor: pointer;
}

.recent-projects {
  width: min(1080px, calc(100% - 70px));
  margin: 66px auto 0;
}

.recent-projects .page-title-row {
  margin-bottom: 20px;
}

.recent-projects .page-title-row h2 {
  margin: 0;
  font-size: 20px;
}

.canvas-new-project {
  border-radius: 12px;
}

@media (min-width: 821px) {
  .canvas-project-grid {
    grid-template-columns: 258px;
    max-width: none;
  }
}

.canvas-project-card {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.canvas-project-card:hover {
  border-color: transparent;
  box-shadow: none;
}

.canvas-empty-thumb {
  height: 145px;
  border: 1px solid #d8d8d8;
  border-radius: 13px;
  background: #eeeeee;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 150ms ease;
}

.canvas-project-card:hover .canvas-empty-thumb {
  border-color: #bfa2ee;
  box-shadow: var(--shadow-soft);
}

.canvas-project-card h3 {
  margin: 11px 3px 2px;
  font-size: 14px;
}

.canvas-project-card p {
  margin: 0 3px;
  font-size: 12px;
}

.canvas-home-dock {
  position: absolute;
  z-index: 18;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface-strong);
  box-shadow: 0 4px 16px rgba(50, 34, 68, .04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.canvas-home-dock button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.canvas-home-dock button:hover,
.canvas-home-dock button.active {
  background: #6825ca;
  color: white;
}

.canvas-home-dock > span {
  width: 28px;
  height: 1px;
  background: var(--line);
}

@media (max-width: 1080px) and (min-width: 821px) {
  .layout-badge { display: inline-flex; }
}

@media (max-width: 820px) {
  .workspace.layout-modern,
  .workspace.layout-modern.modern-panel-visible { grid-template-columns: 1fr; }
  .workspace.layout-modern .main-stage,
  .workspace.layout-modern.modern-panel-visible .main-stage { grid-column: 1; }
  .modern-rail, .modern-drawer { display: none; }
  .dashboard-header { padding: 0 10px; }
  .dashboard-header-controls .top-nav-item:nth-of-type(3),
  .dashboard-header-controls .top-nav-item:nth-of-type(4),
  .dashboard-header-controls .top-nav-item:nth-of-type(5),
  .dashboard-header-controls .btn.green { display: none; }
  .dashboard-header-controls { width: 100%; }
  .dashboard-header-controls .user-pill { margin-left: auto; }
  .canvas-home { padding: 34px 15px 80px; }
  .canvas-hero { width: 100%; }
  .canvas-hero h1 { font-size: 34px; letter-spacing: -2px; }
  .canvas-project-composer { min-height: 230px; }
  .canvas-composer-bottom { align-items: stretch; flex-direction: column; }
  .canvas-settings { align-items: flex-start; }
  .canvas-start { width: 100%; }
  .canvas-hero .story-prompts { gap: 8px 13px; }
  .recent-projects { width: 100%; margin-top: 48px; }
  .canvas-home-dock { display: none; }
}

/* 星图平台接入状态与开发验收辅助界面 */
.platform-loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-2); background: radial-gradient(circle at 50% 30%, var(--primary-soft), transparent 38%), var(--bg); }
.platform-loading .brand-mark { width: 58px; height: 58px; animation: xingtu-pulse 1.35s ease-in-out infinite; }
.platform-loading h1 { margin: 8px 0 0; color: var(--text); font-size: 24px; }
.platform-loading p { margin: 0; }
@keyframes xingtu-pulse { 50% { transform: scale(.9); opacity: .58; } }
.platform-state { position: relative; }
.platform-state-dot { position: absolute; right: 7px; bottom: 7px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px var(--surface); }
.platform-state.online .platform-state-dot { background: #22c55e; }
.login-kicker { display: inline-flex; padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 11px; letter-spacing: .16em; }
.auth-brand-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 17px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.auth-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.auth-error { min-height: 20px; margin: 9px 0; color: #dc2626; font-size: 12px; line-height: 1.5; }
.legal-review-note { padding: 12px 14px; border: 1px solid #f59e0b66; border-radius: 12px; background: #f59e0b12; }
.contract-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.contract-summary span { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.contract-summary b { color: var(--text); font-size: 22px; }
.contract-table-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.contract-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.contract-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; }
.contract-table th, .contract-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.contract-table code { white-space: nowrap; font-size: 11px; }
.contract-status { display: inline-flex; white-space: nowrap; padding: 3px 7px; border-radius: 999px; font-weight: 700; }
.status-connected { color: #047857; background: #10b9811a; }
.status-local { color: #1d4ed8; background: #3b82f61a; }
.status-pending { color: #b45309; background: #f59e0b1a; }
.inline-loading, .request-error { padding: 28px; text-align: center; color: var(--muted); }
.request-error { border: 1px solid #ef444444; border-radius: 14px; background: #ef44440c; }
.request-error strong { color: #dc2626; }
.api-key-list { display: grid; gap: 10px; }
.api-key-card { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.api-key-card > div:first-child { min-width: 0; display: grid; gap: 5px; }
.api-key-card code { overflow: hidden; text-overflow: ellipsis; }
.api-key-card small { color: var(--muted); }
.api-key-actions { display: flex; gap: 6px; }
.btn.danger { color: #dc2626; border-color: #ef444455; }
.api-key-created { display: grid; gap: 12px; }
.api-key-created code { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow-wrap: anywhere; }
.generated-media { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 16px; background: #070b16; }
.message.pending .message-bubble, .agent-message.pending p { opacity: .7; }
.message.error .message-bubble, .agent-message.error p { color: #b91c1c; background: #ef444412; }
.message-bubble, .agent-message p { white-space: pre-wrap; }

/* GPT Image 2 conversation mode: the generator lives inside the chat thread,
   matching the reference product where prompts and generated images share one
   continuous conversation surface. */
.image-chat-stage {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 32px 14px;
  background: radial-gradient(circle at 54% 28%, rgba(137, 84, 237, .10), transparent 34%), var(--bg);
}

.image-chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.image-chat-top-left,
.image-chat-top-right {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.image-chat-top-right { justify-content: flex-end; }

.image-chat-model-pill {
  height: 38px;
  border: 1px solid #c8a8fa;
  border-radius: 12px;
  padding: 0 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}

.image-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 9px;
}

.image-chat-empty {
  width: min(780px, 100%);
  text-align: center;
  padding: 16px 0 22px;
}

.image-chat-hero-orb {
  width: 78px;
  height: 78px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.98), transparent 25%), linear-gradient(145deg, #f3eaff, #dbc3ff);
  box-shadow: 0 20px 42px rgba(104, 53, 171, .18);
}

.image-chat-hero-orb .provider-icon { width: 45px; height: 45px; font-size: 24px; }
.image-chat-empty h1 { margin: 0; font-size: clamp(30px, 3vw, 50px); letter-spacing: -2px; }
.image-chat-provider { margin-top: 8px; color: var(--muted); letter-spacing: 5px; font-size: 11px; font-weight: 700; }
.image-chat-empty p { max-width: 700px; margin: 15px auto 0; color: var(--text-2); line-height: 1.8; }

.image-chat-messages {
  width: min(980px, 100%);
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 30px 0 10px;
}

.image-chat-message { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; }
.image-chat-message.user { align-self: flex-end; flex-direction: row-reverse; }
.image-chat-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; }
.image-chat-message.user .image-chat-avatar { background: #efe7ff; }
.image-chat-message-body { min-width: 0; }
.image-chat-message-text { display: inline-block; max-width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-muted); color: var(--text); line-height: 1.65; white-space: pre-wrap; }
.image-chat-message.user .image-chat-message-text { background: linear-gradient(135deg, #7c44e7, #9a6ee7); border-color: transparent; color: #fff; }
.image-chat-message.pending .image-chat-message-text { opacity: .68; }
.image-chat-message.error .image-chat-message-text { color: #b91c1c; background: #ef444412; }
.image-chat-message-meta { margin-top: 5px; color: var(--muted); font-size: 10px; }
.image-chat-message.user .image-chat-message-meta { text-align: right; }
.image-chat-result { width: min(440px, 100%); margin-top: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); box-shadow: var(--shadow-soft); }
.image-chat-result img { display: block; width: 100%; max-height: 460px; object-fit: contain; background: #f6f3fa; }
.image-chat-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; color: var(--muted); font-size: 11px; }

.image-chat-role-strip { width: min(1180px, 100%); margin: 0 auto 9px; display: flex; align-items: center; gap: 7px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.image-chat-role-strip::-webkit-scrollbar { display: none; }

.image-chat-composer { width: min(1180px, 100%); margin: 0 auto; flex: 0 0 auto; overflow: hidden; border: 1px solid #d9c5f7; border-radius: 20px; background: color-mix(in srgb, var(--surface-strong) 98%, transparent); box-shadow: 0 15px 40px rgba(82, 44, 137, .12); }
.image-chat-composer-head { min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 9px 14px 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.image-chat-composer-head::-webkit-scrollbar { display: none; }
.image-chat-modes { display: flex; align-items: center; gap: 4px; }
.image-chat-mode { height: 33px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 10px; padding: 0 11px; background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.image-chat-mode.active, .image-chat-mode:hover { border-color: #b48af1; background: #f0e5ff; color: var(--primary); }
.image-chat-model-label { margin-left: 2px; color: var(--text); font-size: 13px; font-weight: 700; }
.image-chat-estimate { color: var(--text-2); font-size: 12px; }
.image-chat-balance { height: 31px; border: 0; border-radius: 9px; padding: 0 9px; background: var(--amber-soft); color: var(--amber); font-size: 11px; cursor: pointer; }
.image-chat-info { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.image-chat-prompt-row { min-height: 164px; display: flex; align-items: stretch; gap: 9px; padding: 11px 14px 5px; }
.image-chat-prompt-row textarea { flex: 1 1 auto; min-width: 0; min-height: 130px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); line-height: 1.7; padding: 5px 4px; }
.image-chat-assets { width: 56px; flex: 0 0 56px; display: flex; flex-direction: column; gap: 6px; align-items: center; overflow: auto; padding-right: 2px; }
.image-chat-assets .image-asset-slot { width: 48px; height: 48px; }
.image-chat-asset-add { width: 48px; min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.image-chat-asset-add:hover { border-color: #b48af1; color: var(--primary); background: var(--primary-soft); }
.image-chat-side-tools { display: flex; flex-direction: column; gap: 6px; }
.image-chat-side-tool { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); color: var(--text-2); cursor: pointer; }
.image-chat-side-tool:hover { border-color: #b48af1; color: var(--primary); }
.image-chat-composer-foot { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 5px 13px 12px; flex-wrap: wrap; }
.image-chat-channel { border: 1px solid #b48af1; background: #f1e7ff; color: var(--primary); }
.image-chat-count { color: var(--muted); font-size: 10px; }
.image-chat-options { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.image-chat-options::-webkit-scrollbar { display: none; }
.image-chat-option { min-width: 106px; height: 49px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; background: var(--surface-muted); color: var(--text); cursor: pointer; text-align: left; }
.image-chat-option:hover { border-color: #b48af1; background: #f4edff; }
.image-chat-option small { color: var(--muted); font-size: 10px; }
.image-chat-option strong { font-size: 12px; }
.image-chat-send { margin-left: auto; width: 41px; height: 41px; border-radius: 50%; flex: 0 0 auto; }

.compact-options { justify-content: flex-start; }
.role-icon-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.role-icon-choice { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-strong); color: var(--text-2); cursor: pointer; }
.role-icon-choice:hover, .role-icon-choice.active { border-color: #a46fed; color: var(--primary); background: var(--primary-soft); }
.required-mark { color: var(--danger); }
.field-label-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-label-between small { color: var(--muted); font-weight: 400; }
.role-system-prompt { min-height: 210px !important; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 5px; }

@media (max-width: 1120px) {
  .image-chat-stage { padding-left: 18px; padding-right: 18px; }
  .image-chat-composer-head { flex-wrap: wrap; }
  .image-chat-composer-head .compression-toggle { margin-left: auto; }
}

@media (max-width: 820px) {
  .image-chat-stage { padding: 10px 10px 12px; }
  .image-chat-topbar { gap: 6px; }
  .image-chat-top-left .btn span, .image-chat-top-right .btn { font-size: 0; padding: 0 8px; }
  .image-chat-top-right .btn .icon { margin: 0; }
  .image-chat-model-pill { display: none; }
  .image-chat-empty h1 { font-size: 34px; }
  .image-chat-composer-head { padding-left: 9px; padding-right: 9px; }
  .image-chat-prompt-row { min-height: 142px; padding: 8px 9px 3px; }
  .image-chat-options { order: 3; width: 100%; overflow-x: auto; padding-bottom: 3px; }
  .image-chat-send { order: 4; }
  .image-chat-option { min-width: 96px; }
}
.toast-wrap.runtime-warning { border-color: #f59e0b66; }
@media (max-width: 720px) { .contract-table { min-width: 760px; } .api-key-card { align-items: flex-start; flex-direction: column; } }
@media (max-width: 820px) {
  .image-scroll-v2 { width: calc(100% - 22px); }
  .image-hero-v2 { min-height: 145px; justify-content: flex-start; padding: 16px 5px 8px; }
  .image-hero-v2 .hero-orb { display: none; }
  .image-hero-v2 h1 { font-size: 34px; }
  .image-panel-v2 { padding: 0 12px 14px; border-radius: 18px; }
  .image-mode-tabs { flex-wrap: nowrap; min-height: 58px; }
  .image-model-label, .image-cost-pill, .image-balance-pill, .image-info-btn { display: none; }
  .compression-toggle { margin-left: auto; }
  .image-options-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-manage-grid, .channel-strategy-grid { grid-template-columns: 1fr; }
  .image-topbar { padding: 12px 10px 8px; }
}
.classic-compat-block{margin-top:16px;padding:12px 10px 4px;border-top:1px solid var(--line)}
.classic-compat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:700}
.classic-compat-head .tiny{padding:3px 7px;font-size:10px;border-radius:7px}
.classic-compat-links{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.classic-compat-link{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 6px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:11px;cursor:pointer;text-align:left}
.classic-compat-link:hover,.classic-compat-link:focus-visible{background:var(--surface-soft);color:var(--primary)}
.classic-compat-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geekai-page,.geekai-workspace{padding:26px 30px 42px;max-width:1440px;margin:0 auto;width:100%}
.geekai-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:20px 0 24px;padding:28px 30px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--surface-strong),rgba(139,42,232,.08));box-shadow:var(--shadow)}
.geekai-hero h2{margin:0 0 8px;font-size:25px}.geekai-hero p{max-width:760px;color:var(--text-2);line-height:1.8}
.geekai-hero-orb{display:grid;place-items:center;width:116px;height:116px;border-radius:36px;background:linear-gradient(145deg,#6f24d9,#d74fc7);color:#fff;font:700 76px/1 Georgia,serif;box-shadow:0 16px 36px rgba(111,36,217,.28);flex:0 0 auto}
.geekai-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.geekai-tool-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;min-height:112px;padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-strong);box-shadow:0 8px 22px rgba(35,38,52,.05)}
.geekai-tool-card h3{margin:7px 0 4px;font-size:16px}.geekai-tool-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.geekai-tool-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:linear-gradient(145deg,rgba(139,42,232,.16),rgba(208,79,199,.12));color:var(--primary)}.geekai-tool-icon.large{width:52px;height:52px;border-radius:16px}
.geekai-capability-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.geekai-capability-strip span{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-soft)}
.geekai-toolbar{display:flex;align-items:center;gap:10px;min-height:44px;padding-bottom:15px;border-bottom:1px solid var(--line)}.geekai-toolbar-title{font-weight:750;color:var(--text)}
.geekai-title{display:flex;align-items:center;gap:14px;margin:24px 0}.geekai-title h1{margin:0;font-size:28px}.geekai-title p{margin:6px 0 0;color:var(--muted)}
.geekai-workspace-grid,.geekai-document-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}.geekai-compose-card,.geekai-info-card,.geekai-outline-card{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-strong);box-shadow:var(--shadow)}
.compose-card-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:15px}.compose-card-head strong{font-size:17px}.compose-card-head span{color:var(--muted);font-size:11px}.generation-tabs{display:flex;gap:6px;margin-bottom:13px}.generation-tabs button{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);color:var(--text-2);cursor:pointer}.generation-tabs button.active{background:rgba(139,42,232,.13);border-color:rgba(139,42,232,.35);color:var(--primary)}
.geekai-compose-card textarea{width:100%;min-height:240px;padding:15px;border:1px solid var(--line);border-radius:14px;resize:vertical;background:var(--surface-soft);color:var(--text);font:inherit}.geekai-upload-row{display:flex;align-items:center;gap:7px;margin-top:12px}.form-note{margin:12px 0 0;color:var(--muted);font-size:11px}.geekai-info-card h3,.geekai-outline-card h3{margin-top:0}.geekai-step-list{display:grid;gap:12px;margin:18px 0}.geekai-step-list div{display:flex;align-items:center;gap:11px}.geekai-step-list b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(139,42,232,.12);color:var(--primary);font-size:11px}.geekai-step-list span{color:var(--text-2);font-size:12px}.outline-tree{display:grid;gap:11px;margin:18px 0 22px}.outline-tree span{padding:11px 13px;border-left:3px solid var(--primary);border-radius:8px;background:var(--surface-soft);color:var(--text-2);font-size:12px}.geekai-business-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px}.geekai-business-nav{display:grid;align-content:start;gap:5px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface-strong)}.geekai-business-nav button{display:flex;align-items:center;gap:8px;padding:10px 11px;border:0;border-radius:9px;background:transparent;color:var(--text-2);text-align:left;cursor:pointer}.geekai-business-nav button.active,.geekai-business-nav button:hover{background:rgba(139,42,232,.11);color:var(--primary)}
.magic-login-page{background:#fbfbfd;color:#202124}.magic-login-page:before,.magic-login-page:after{opacity:.08;mix-blend-mode:normal}.magic-login-page .login-header{border-bottom:1px solid #ececf1;background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}.magic-login-page .login-link{color:#24222b}.magic-login-page .brand-name{color:#27212e}.login-layout-switch{display:flex;align-items:center;gap:12px;margin-left:auto;margin-right:24px}.login-layout-switch .layout-badge{height:36px}.login-help{font-size:12px;color:#777581}.magic-login-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:80px;align-items:center;max-width:1180px;min-height:calc(100vh - 140px);margin:0 auto;padding:54px 30px}.magic-login-copy{max-width:680px}.magic-login-copy h1{margin:16px 0 18px;font:700 clamp(48px,6vw,82px)/1.06 Georgia,serif;letter-spacing:-3px;color:#24212a}.magic-login-copy h1 em{font-style:normal;color:#7b2ce3}.magic-login-copy p{max-width:600px;margin:0;color:#666673;font-size:16px;line-height:1.85}.magic-login-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.magic-login-chips span{padding:7px 11px;border:1px solid #e7e4ec;border-radius:999px;color:#6e6878;background:#fff;font-size:11px}.magic-login-body .hero-actions{justify-content:flex-start;margin-top:28px}.magic-login-body .hero-btn{border:1px solid #e5e1eb;background:#fff;color:#312938;box-shadow:0 8px 18px rgba(50,36,73,.07)}.magic-login-body .hero-btn.primary{background:#6e2ad4;border-color:#6e2ad4;color:#fff}.magic-login-card{padding:32px 30px;border:1px solid #e9e4f0;border-radius:24px;background:#fff;box-shadow:0 22px 60px rgba(55,34,83,.12)}.magic-card-orb{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#7027d9,#d549c7);color:#fff;font:700 40px/1 Georgia,serif}.magic-login-card h2{margin:23px 0 7px;font-size:24px}.magic-login-card p{margin:0;color:#777581;font-size:13px}.magic-card-action{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;margin-top:22px;padding:0 15px;border:1px solid #e4dbee;border-radius:12px;background:#f8f4ff;color:#6321b7;font-weight:700;cursor:pointer}.magic-card-action.secondary{margin-top:9px;background:#fff;color:#4b4652;border-color:#e7e5eb}.magic-card-note{margin-top:19px;padding-top:15px;border-top:1px solid #f0eef3;color:#98939f;font-size:11px;line-height:1.7}.magic-login-page .login-features{color:#8c8793}.magic-login-page .login-kicker{color:#7a36ca}
@media (max-width:900px){.geekai-tool-grid{grid-template-columns:1fr}.geekai-workspace-grid,.geekai-document-grid{grid-template-columns:1fr}.geekai-business-layout{grid-template-columns:1fr}.geekai-business-nav{grid-template-columns:repeat(2,1fr)}.magic-login-body{grid-template-columns:1fr;gap:30px;min-height:auto;padding-top:45px}.magic-login-copy{max-width:none}.magic-login-card{max-width:520px}.login-layout-switch{display:none}}
@media (max-width:600px){.geekai-page,.geekai-workspace{padding:18px 14px 35px}.geekai-hero{padding:20px;align-items:flex-start}.geekai-hero-orb{width:78px;height:78px;font-size:50px;border-radius:24px}.geekai-toolbar{overflow:auto}.geekai-title h1{font-size:23px}.magic-login-body{padding:30px 18px}.magic-login-copy h1{font-size:48px;letter-spacing:-2px}.magic-login-card{padding:24px}.login-help{display:none}}

/* Server-return monitor: every asynchronous submit point renders the same
   job/assets truth where the user originally created the task. */
.job-return-panel{margin:17px 0 0;padding:13px;border:1px solid #cdb7f2;border-radius:15px;background:linear-gradient(145deg,#fbf9ff,#fff);box-shadow:0 8px 22px rgba(89,50,143,.08)}
.job-return-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.job-return-panel>header span{display:block;color:var(--muted);font:700 10px/1.4 Consolas,"Microsoft YaHei",sans-serif}.job-return-panel>header h3{margin:3px 0 0;font-size:14px}.job-return-empty{margin:11px 0 1px;color:var(--muted);font-size:11px;line-height:1.7}.job-return-list{display:grid;gap:10px;margin-top:11px}
.job-return-card{padding:11px;border:1px solid var(--line);border-left:4px solid #a983ea;border-radius:11px;background:var(--surface-strong)}.job-return-card.status-running{border-left-color:#258cc7}.job-return-card.status-succeeded{border-left-color:#2fa76c}.job-return-card.status-failed,.job-return-card.status-timeout,.job-return-card.status-cancelled{border-left-color:#dc6971}
.job-return-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.job-return-card-head strong,.job-return-card-head small{display:block}.job-return-card-head strong{font-size:13px}.job-return-card-head small,.job-return-meta,.job-return-prompt,.job-return-wait,.job-return-note,.job-return-error{margin:5px 0 0;color:var(--text-2);font-size:11px;line-height:1.65}.job-return-card-head>b{flex:0 0 auto;padding:3px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:10px}.status-succeeded .job-return-card-head>b{background:#e7f8ef;color:#147c4d}.status-failed .job-return-card-head>b,.status-timeout .job-return-card-head>b,.status-cancelled .job-return-card-head>b{background:#fff0f0;color:#b3434b}
.job-return-meta{color:var(--muted);font-family:Consolas,"Microsoft YaHei",monospace}.job-return-meta code{font-size:10px}.job-return-prompt{padding:7px 8px;border-radius:7px;background:var(--surface-muted);white-space:pre-wrap}.job-return-wait{padding:7px 8px;border-radius:7px;background:#eef8ff;color:#296788}.job-return-error{padding:7px 8px;border-radius:7px;background:#fff2f2;color:#a33e47}.job-return-assets{display:grid;gap:8px;margin-top:10px}.job-return-asset{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--surface-muted)}.job-return-asset .generated-media{display:block;width:100%;max-height:280px;object-fit:contain;background:#111}.job-return-asset>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;color:var(--text-2);font-size:10px}.job-return-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.job-return-actions .danger{border-color:#e4b0b6;color:#b3434b}.job-return-note{padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}
.comic-video-submit{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(240px,1.35fr) auto;align-items:center;gap:12px;margin:15px 0;padding:14px;border:1px solid #cbb8ef;border-radius:15px;background:linear-gradient(135deg,#f7f1ff,#fbfdff)}.comic-video-submit b,.comic-video-submit span{display:block}.comic-video-submit b{font-size:13px}.comic-video-submit span{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.6}.comic-video-submit textarea{min-height:76px;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font:12px/1.55 inherit;resize:vertical}
@media(max-width:820px){.job-return-panel>header{align-items:flex-start;flex-direction:column}.comic-video-submit{grid-template-columns:1fr}.job-return-card-head{align-items:flex-start}.job-return-asset>div:last-child{align-items:flex-start;flex-direction:column}}

/* Skill selection, private knowledge documents and citation snapshots. */
.context-filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.context-filter-row input { flex:1; min-width:180px; }
.context-filter-row input,.context-filter-row select { padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-strong); color:var(--text); }
.context-choice-list { display:grid; gap:10px; max-height:48vh; overflow:auto; margin:14px 0; }
.context-choice-list article { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.context-choice-list article[hidden] { display:none; }
.context-choice-list article>div,.context-choice-list article>label { min-width:0; flex:1; }
.context-choice-list article button { flex-shrink:0; }
.context-choice-list small,.context-sources small { display:block; color:var(--muted); margin:5px 0; }
.context-choice-list pre,.skill-template-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; font:inherit; padding:12px; border:1px solid var(--line); border-radius:8px; }
.context-choice-list p,.context-sources p,.knowledge-result p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.context-choice-list label input { margin-right:10px; }
.context-warning { color:var(--muted); font-size:12px; line-height:1.6; }
.message-context { margin-top:12px; font-size:12px; white-space:normal; }
.context-sources { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.context-sources summary,.knowledge-add summary { cursor:pointer; font-weight:600; }
.context-sources article,.knowledge-result { padding:10px 0; border-bottom:1px solid var(--line); }
.context-sources article p { max-height:240px; overflow:auto; }
.knowledge-add { margin:20px 0; }
.knowledge-add .field { margin-top:12px; }
.knowledge-add .field label,#knowledge-detail > .field label { display:block; margin-bottom:7px; color:var(--text-2); font-size:13px; }
.knowledge-add textarea { width:100%; min-height:140px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-strong); color:var(--text); font:inherit; line-height:1.7; }
.agent-tool-row { flex-wrap:wrap; }
@media(max-width:640px) { .context-filter-row>* { width:100%; } .context-choice-list article { flex-wrap:wrap; } .context-choice-list article>div { flex-basis:100%; } .modal-actions { flex-wrap:wrap; } }

.moderation-item{border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0;min-width:0}.moderation-item h3{overflow-wrap:anywhere}.moderation-item pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow:auto;font-size:12px}.moderation-item textarea{display:block;width:100%;min-height:70px}.moderation-item small{font-weight:400}


/* Xingtu Stellar: first-party product design, September 2026. */
.header.stellar-header{display:flex;grid-template-columns:none}.stellar-header .header-right{flex-shrink:0}.shell.stellar-workspace{margin:0}.stellar-nav-link{font-size:12px!important}.stellar-model-trigger h2{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root{--primary:#2563eb;--primary-2:#38bdf8;--primary-soft:#eaf1ff;--bg:#f6f8fc;--bg-soft:#edf2f8;--surface:#fff;--surface-strong:#fff;--surface-muted:#f2f5fa;--text:#17243c;--text-2:#56657b;--muted:#7b8799;--line:#e1e7f0;--line-strong:#c7d2e2;--shadow:0 24px 70px #12243c18;--shadow-soft:0 4px 20px #17263d08;--header-h:66px;--sidebar-w:224px;--radius:14px}
body.dark{--bg:#0c111b;--bg-soft:#101722;--surface:#131c29;--surface-strong:#141e2b;--surface-muted:#192435;--text:#e6edf7;--text-2:#a1b0c5;--muted:#73859d;--line:#253144;--line-strong:#3b4c65;--primary:#5c9dff;--primary-2:#5eead4;--primary-soft:#1a2d48;--green:#50d4b1;--green-soft:#16362e;--shadow:0 24px 70px #0006;--shadow-soft:0 4px 20px #0002}
body{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif}.app-root{background:var(--bg)}button{transition:background .16s,border-color .16s,color .16s;cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #37bcdc;outline-offset:3px}.btn{border-radius:8px;min-height:36px;font-size:12px;box-shadow:none}.btn:hover{transform:none;box-shadow:none;border-color:var(--primary)}.btn.primary,.generate-btn,.auth-submit{background:#2563eb;box-shadow:none;border-radius:9px;color:#fff}.btn.green{background:var(--primary-soft);color:var(--primary);border:1px solid var(--line);border-radius:8px}.btn.soft{background:var(--primary-soft);color:var(--primary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brand{gap:10px}.brand-mark{width:30px;height:32px;display:inline-block;background:linear-gradient(150deg,#50e5d4,#427dff);border-radius:0;transform:none;box-shadow:none;clip-path:polygon(50% 0,61% 33%,96% 19%,76% 49%,100% 76%,65% 69%,50% 100%,37% 67%,3% 80%,24% 50%,0 22%,36% 32%)}.brand-mark:before,.brand-mark:after{display:none}.brand-name{font-size:19px;font-weight:650;letter-spacing:1px}.brand-name small{font:600 9px/1.1 "Segoe UI",sans-serif;letter-spacing:2px;display:block;margin-top:3px;color:var(--muted)}.avatar{background:var(--primary-soft);width:30px;height:30px;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border-radius:9px;border:1px solid var(--line)}.avatar:before,.avatar:after{display:none}.stellar-eyebrow{font:600 10px/1.5 "Segoe UI",sans-serif;letter-spacing:2px;color:var(--primary)}
/* Site: generous editorial typography and an original vector orbital scene. */
.stellar-site{--text:#eef5ff;--text-2:#99abc5;--muted:#70839f;--line:#203047;--primary:#64e9df;--surface-strong:#101b2d;background:#080f1d;color:var(--text);height:100dvh;overflow:auto;scroll-behavior:smooth;scrollbar-color:#263b58 #080f1d}.stellar-site button{font:inherit}.stellar-site-header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 max(28px,calc((100% - 1240px)/2));border-bottom:1px solid #1d2a3c;background:#080f1de8;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.stellar-site-header nav{display:flex;gap:32px}.stellar-site-header nav button,.stellar-site-footer button,.stellar-login{border:0;background:none;color:#aabbd2;font-size:13px;padding:10px 0}.stellar-site-header nav button:hover,.stellar-site-footer button:hover,.stellar-login:hover{color:#77f5e5}.stellar-site-account{display:flex;align-items:center;gap:25px}.stellar-site-primary,.stellar-site-secondary{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:49px;padding:0 24px;border:1px solid #355775;border-radius:6px;font-size:14px;font-weight:600;white-space:nowrap}.stellar-site-primary{color:#06131a;background:#76eee2;border-color:#76eee2;box-shadow:0 0 24px #65d6da10}.stellar-site-primary:hover{background:#a3fff1;border-color:#a3fff1}.stellar-site-secondary{background:#111d31;color:#e1edff}.stellar-site-secondary:hover{border-color:#4b88b7;background:#15283c}.stellar-site-account .stellar-site-primary{min-height:38px;font-size:12px;padding:0 18px}.stellar-hero{position:relative;max-width:1240px;min-height:680px;padding:98px 0 95px;margin:auto;display:grid;grid-template-columns:1.06fr 1fr;gap:32px;align-items:center}.stellar-hero:before{content:"";position:absolute;inset:0 -50px;pointer-events:none;background:radial-gradient(ellipse at 80% 45%,#244c9a1e,transparent 60%)}.stellar-hero-copy{position:relative;z-index:1}.stellar-pill{display:inline-flex;gap:10px;align-items:center;border:1px solid #2b4a54;background:#152a3180;padding:8px 12px;border-radius:4px;font-size:11px;letter-spacing:1px;color:#9fe3e1}.stellar-pill i,.orbit-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#77f1cf;box-shadow:0 0 10px #77f1cf88}.stellar-hero h1{font-size:clamp(42px,4.7vw,64px);font-weight:650;letter-spacing:-2px;line-height:1.28;margin:28px 0 24px}.stellar-hero h1 span{background:linear-gradient(90deg,#8df6df,#64c9f6 70%,#a9beff);background-clip:text;color:transparent}.stellar-hero p{font-size:15px;color:#99abc5;line-height:1.95;margin:0}.stellar-hero-actions{display:flex;gap:15px;margin:35px 0 22px}.stellar-hero-note{display:flex;align-items:center;gap:13px;font-size:11px;color:#7187a4}.stellar-hero-note i{height:3px;width:3px;border-radius:50%;background:#3d597b}.stellar-hero-bottom{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:space-between;font:9px/1.5 "Segoe UI",sans-serif;letter-spacing:2px;color:#657997}.stellar-hero-bottom>span:last-child{display:flex;gap:12px;align-items:center}.stellar-orbit{position:relative;aspect-ratio:1.05;min-width:0}.stellar-orbit svg{width:100%;height:100%;position:relative;z-index:1;filter:drop-shadow(0 0 13px #5de5e311)}.orbit-grid{position:absolute;inset:0;background-image:linear-gradient(#1c385455 1px,transparent 1px),linear-gradient(90deg,#1c385455 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse,#000,transparent 70%)}.orbit-spin{transform-origin:300px 278px;animation:stellar-orbit 50s linear infinite}.orbit-label{position:absolute;z-index:2;font:8px/1.5 Consolas,monospace;letter-spacing:1px;color:#99bfcb;border:1px solid #274457;background:#0c1a2bdf;padding:11px 13px;border-radius:3px;display:flex;align-items:center;gap:10px}.orbit-label-a{left:5%;top:17%}.orbit-label-b{right:0;bottom:19%}.orbit-label-b b{font-size:16px;color:#87f0dd}.orbit-coordinate{position:absolute;bottom:7%;left:30%;font:8px Consolas,monospace;letter-spacing:1px;color:#516981}.stellar-feature-strip{max-width:1240px;margin:auto;padding:29px 0;border-top:1px solid #1e2b3e;border-bottom:1px solid #1e2b3e;display:grid;grid-template-columns:repeat(4,1fr)}.stellar-feature-strip span{display:flex;gap:14px;align-items:center;justify-content:center;font-size:13px;color:#9eafc4;border-right:1px solid #263346}.stellar-feature-strip span:last-child{border:0}.stellar-feature-strip .icon{color:#65afa9}.stellar-section{max-width:1240px;margin:auto;padding:92px 0;scroll-margin-top:86px}.stellar-section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}.stellar-site .stellar-eyebrow{color:#6bc8ce;font-size:9px}.stellar-site h2{font-size:37px;line-height:1.45;letter-spacing:-1px;font-weight:600;margin:18px 0 0}.stellar-section-heading>p{color:#8093ae;font-size:13px;line-height:1.9}.stellar-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stellar-feature{position:relative;background:linear-gradient(145deg,#132037,#0c1525);border:1px solid #23334c;border-radius:8px;padding:29px;min-height:252px;transition:transform .2s,border-color .2s}.stellar-feature:hover{transform:translateY(-4px);border-color:#3b7887}.stellar-feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.stellar-feature-top>span{color:#7acfcf;padding:11px;background:#1a34434d;border:1px solid #2a48554d;border-radius:8px;display:flex}.stellar-feature-top small{font:11px Consolas,monospace;color:#425876}.stellar-feature-category{font-size:11px;color:#90a2bd}.stellar-feature h3{font-size:17px;line-height:1.6;font-weight:500;margin:9px 0 12px}.stellar-feature p{font-size:12px;line-height:1.85;color:#8396af;margin:0}.stellar-workflow{border-top:1px solid #16263b;border-bottom:1px solid #16263b}.stellar-product-preview{border:1px solid #365173;border-radius:10px;background:#101827;box-shadow:0 35px 100px #0005;overflow:hidden;max-width:1080px;margin:auto}.preview-top{display:flex;align-items:center;gap:10px;padding:16px 23px;border-bottom:1px solid #243348;font-size:10px;color:#91a4c0}.preview-top .brand-mark{width:18px;height:20px}.preview-top>span:nth-of-type(2){margin-left:auto;font-size:9px;color:#5c7698}.preview-top i{height:5px;width:5px;border-radius:50%;background:#3a4e68}.preview-body{display:flex;min-height:410px}.preview-nav{width:180px;padding:27px 16px;border-right:1px solid #243348;display:flex;flex-direction:column;gap:12px;color:#7287a4;font-size:11px}.preview-nav span{padding:12px}.preview-nav .chosen{background:#1c3554;color:#86b9f4;border:1px solid #29496a;border-radius:5px}.preview-main{flex:1;padding:38px 50px 30px;text-align:center;min-width:0;background:radial-gradient(ellipse at top,#1a30484d,transparent 60%)}.preview-spark{display:block;color:#77d7d2;font-size:33px}.preview-main h3{font-size:26px;font-weight:500;margin:15px 0 12px}.preview-main p{font-size:11px;color:#67809c}.preview-suggestions{display:flex;justify-content:center;gap:10px;margin:28px 0}.preview-suggestions span{font-size:10px;border:1px solid #243b57;padding:10px 18px;border-radius:5px;color:#9aadc4}.preview-composer{text-align:left;max-width:610px;margin:0 auto;border:1px solid #354965;border-radius:11px;padding:18px 20px;background:#162234;font-size:11px;color:#8298b3}.preview-composer>div{margin-top:34px;font-size:10px;color:#a0b6d1}.preview-composer b{float:right;color:#03151b;background:#7be7dd;border-radius:4px;padding:2px 8px}.stellar-workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin:45px 25px 0}.stellar-workflow-steps article{position:relative;padding-left:43px}.stellar-workflow-steps b{position:absolute;left:0;top:2px;font:20px Consolas,monospace;color:#3d667f}.stellar-workflow-steps h3{font-size:15px;font-weight:500}.stellar-workflow-steps p{font-size:12px;line-height:1.9;color:#8195af}.stellar-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stellar-scenarios article{padding:35px 30px;border-left:1px solid #36556e;background:linear-gradient(110deg,#14223855,transparent)}.stellar-scenarios span{font:8px Consolas,monospace;letter-spacing:2px;color:#5d9cab}.stellar-scenarios h3{font-size:24px;font-weight:500;margin:23px 0 15px}.stellar-scenarios p{color:#8a9cb5;font-size:13px;line-height:1.9;min-height:70px}.stellar-scenarios b{font-weight:400;font-size:10px;color:#658ca5;letter-spacing:1px}.stellar-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;border-top:1px solid #213048}.stellar-faq details{border-bottom:1px solid #28374c;padding:22px 0}.stellar-faq summary{list-style:none;display:flex;justify-content:space-between;gap:18px;cursor:pointer;font-size:14px}.stellar-faq summary::-webkit-details-marker{display:none}.stellar-faq summary span{color:#6ca1b6}.stellar-faq details[open] summary span{transform:rotate(45deg)}.stellar-faq details p{font-size:12px;line-height:1.95;color:#8ca0bb;margin:18px 30px 2px 0}.stellar-final-cta{padding:72px 30px 90px;text-align:center;border-block:1px solid #233047;background:radial-gradient(ellipse at 50% 120%,#16375966,transparent 75%)}.stellar-final-cta h2{font-size:43px;margin-bottom:30px}.stellar-account-login{display:flex;align-items:center;gap:9px;margin:20px auto 0;border:0;background:none;color:#96b0c7;font-size:12px}.stellar-site-footer{max-width:1240px;margin:auto;display:flex;align-items:center;gap:34px;padding:40px 0}.stellar-site-footer>span{font-size:11px;color:#647c99}.stellar-site-footer>div{display:flex;gap:24px;margin-left:auto}.stellar-site-footer button,.stellar-site-footer small{font-size:10px;color:#70849e}.stellar-site-footer small{white-space:nowrap}
/* Studio: persistent product navigation; models live in a separate drawer. */
.stellar-header{height:66px;position:relative;padding:0 22px 0 24px;gap:25px;background:var(--surface-strong);border-bottom:1px solid var(--line);box-shadow:none;z-index:35}.stellar-header .header-left{width:174px;flex-shrink:0;gap:14px}.workspace-edition{color:var(--muted);font-size:8px;letter-spacing:1px;border-left:1px solid var(--line);padding-left:12px}.stellar-breadcrumb{display:flex;align-items:center;gap:12px;font-size:11px;white-space:nowrap}.stellar-breadcrumb>span{color:var(--muted)}.stellar-breadcrumb strong{font-weight:500}.stellar-command{margin:auto;display:flex;align-items:center;gap:9px;min-width:250px;max-width:320px;padding:9px 12px;background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:11px}.stellar-command kbd{margin-left:auto;font:9px inherit;border:1px solid var(--line);border-radius:3px;padding:2px 4px}.stellar-header .header-right{gap:10px;margin-left:auto}.stellar-header .top-nav-item{width:31px;height:33px;border-radius:7px;color:var(--muted);background:none;border:0}.stellar-header .user-pill{border:0;background:none;gap:9px;padding:0 0 0 10px;max-width:155px;border-left:1px solid var(--line);border-radius:0}.stellar-header .user-pill strong{font-size:11px;text-overflow:ellipsis;overflow:hidden}.stellar-header-more,.stellar-chat-settings,.stellar-compose-options{position:relative}.stellar-header-more>summary,.stellar-chat-settings>summary,.stellar-compose-options>summary{display:flex;align-items:center;justify-content:center;padding:9px;border-radius:6px;cursor:pointer;list-style:none;color:var(--muted)}summary::-webkit-details-marker{display:none}.stellar-settings{position:absolute;right:0;top:calc(100% + 7px);z-index:90;min-width:190px;padding:7px;background:var(--surface-strong);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);display:grid;gap:2px}.stellar-settings button{background:none;border:0;color:var(--text-2);text-align:left;display:flex;align-items:center;gap:10px;padding:11px;border-radius:5px;font-size:12px;white-space:nowrap}.stellar-settings button:hover{background:var(--primary-soft);color:var(--primary)}.stellar-workspace{height:calc(100dvh - 66px);display:flex;gap:0;padding:0;position:relative;background:var(--bg);overflow:hidden}.stellar-sidebar{width:224px;min-width:224px;height:100%;position:relative;inset:auto;background:var(--surface-strong);border:0;border-right:1px solid var(--line);border-radius:0;padding:0;display:flex;flex-direction:column;transform:none}.stellar-space-label{display:flex;align-items:center;gap:10px;padding:22px 19px 14px}.space-avatar{display:flex;padding:7px;background:var(--surface-muted);border:1px solid var(--line);border-radius:7px;color:var(--text-2)}.stellar-space-label strong{font-size:11px;font-weight:600}.stellar-space-label small{display:block;font-size:7px;letter-spacing:1px;color:var(--muted);margin-top:4px}.stellar-space-label>button{border:0;background:none;color:var(--muted);padding:3px;margin-left:auto}.stellar-new-chat{display:flex;align-items:center;gap:9px;margin:8px 16px 18px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:12px}.stellar-new-chat kbd{margin-left:auto;font-size:13px;color:var(--muted)}.stellar-nav-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding:0 12px;scrollbar-width:thin}.stellar-nav-group{margin-bottom:21px}.stellar-nav-label{display:block;padding:0 13px;margin:0 0 9px;font-size:9px;color:var(--muted);letter-spacing:1px}.stellar-nav-link{width:100%;display:flex;align-items:center;gap:12px;border:1px solid transparent;background:none;border-radius:6px;min-height:37px;padding:9px 12px;color:var(--text-2);font-size:11px;text-align:left;white-space:nowrap;margin-bottom:3px}.stellar-nav-link .icon{color:var(--muted)}.stellar-nav-link:hover{background:var(--surface-muted);color:var(--text)}.stellar-nav-link.active{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 18%,transparent)}.stellar-nav-link.active .icon{color:var(--primary)}.stellar-nav-link>i{margin-left:auto;font-style:normal;font-size:7px;letter-spacing:.7px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 4px}.stellar-sidebar-bottom{padding:12px;border-top:1px solid var(--line)}.stellar-usage{display:block;width:100%;margin-top:8px;text-align:left;padding:14px 12px;border:1px solid var(--line);border-radius:7px;background:linear-gradient(130deg,var(--primary-soft),var(--surface-strong));color:var(--text-2)}.stellar-usage>span{display:flex;justify-content:space-between;align-items:center;font-size:9px}.stellar-usage strong{display:block;font-size:11px;font-weight:500;margin:9px 0;color:var(--text)}.stellar-usage small{font-size:9px;color:var(--muted)}.stellar-subnavigation{margin:0 8px 20px;border-top:1px solid var(--line)}.stellar-subnavigation>summary{display:flex;justify-content:space-between;padding:12px 0;font-size:10px;color:var(--muted);cursor:pointer}.stellar-subnavigation .agent-list{padding:0;overflow:visible}.stellar-subnavigation .agent-card{border-radius:7px;margin-bottom:8px;background:var(--bg);border:1px solid var(--line)}.stellar-subnavigation .agent-head{padding:10px;gap:8px}.stellar-subnavigation .agent-head p,.stellar-subnavigation .agent-head .tag{display:none}.stellar-subnavigation .agent-head h4{font-size:11px}.stellar-subnavigation .agent-logo{font-size:11px;width:25px;height:25px;border-radius:5px}.stellar-subnavigation .agent-subitem{font-size:10px;padding:9px}.stellar-rail{width:70px;min-width:70px;padding:14px 5px;background:var(--surface-strong);border-right:1px solid var(--line);border-radius:0;gap:10px}.stellar-rail .stellar-nav-scroll{padding:0;width:100%}.stellar-rail .stellar-nav-label,.stellar-rail .stellar-nav-link>i{display:none}.stellar-rail .stellar-nav-group{margin:8px 0 15px}.stellar-rail .stellar-nav-link{padding:8px 0;gap:4px;min-height:49px;flex-direction:column;justify-content:center;font-size:8px;white-space:normal}.stellar-rail-expand{background:none;border:0;color:var(--muted);padding:6px}.stellar-workspace .main-stage{flex:1;width:auto;min-width:0;height:100%;border:0;border-radius:0;background:var(--bg);overflow:auto}.stellar-workspace.sidebar-hidden>.stellar-sidebar{display:none}.stellar-model-drawer{position:absolute;top:12px;right:14px;bottom:12px;left:auto;height:auto;width:300px;z-index:30;display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-strong);box-shadow:var(--shadow);margin:0;animation:stellar-reveal .15s ease}.stellar-model-drawer .modern-drawer-head{padding:20px 17px;border-bottom:1px solid var(--line);min-height:72px}.stellar-model-drawer .modern-drawer-head strong{display:block;margin-top:7px;font-size:16px}.stellar-model-drawer .modern-drawer-body{min-height:0;flex:1;overflow:auto}.stellar-model-drawer .sidebar-filters{padding:12px}.stellar-model-drawer .filter-tabs{overflow-x:auto;display:flex}.stellar-model-drawer .filter-tab{font-size:10px;padding:8px 6px}.stellar-model-drawer .filter-row{flex-wrap:wrap}.stellar-model-drawer .search-like{flex:1;min-width:0}.stellar-model-drawer .select-like{font-size:9px;width:auto}.stellar-model-drawer .model-list{padding:2px 10px;overflow:visible}.stellar-model-drawer .model-card{border:1px solid var(--line);border-radius:8px;padding:13px 9px;background:var(--bg);margin-bottom:7px;gap:8px}.stellar-model-drawer .model-card.active{background:var(--primary-soft);border-color:var(--primary);box-shadow:none}.model-library-note{color:var(--muted);font-size:10px;padding:12px 18px;border-top:1px solid var(--line);margin:0}.model-title{font-size:11px}.model-desc{font-size:9px}.provider-icon{color:var(--primary);background:var(--primary-soft);border:1px solid var(--line);box-shadow:none;border-radius:8px}
/* Conversation workspace and input hierarchy. */
.stellar-chat{height:100%;min-height:0;display:flex;flex-direction:column;position:relative;padding:0 36px 14px;background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--primary) 4%,transparent),transparent 60%)}.stellar-chat-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;padding:21px 0 16px}.stellar-model-trigger{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:8px;color:var(--text);padding:4px 8px 4px 0;text-align:left;min-width:0;max-width:65%}.stellar-model-trigger:hover{background:var(--surface-muted)}.stellar-model-trigger>span{min-width:0}.stellar-model-trigger h2{font-size:12px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stellar-model-trigger small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.stellar-model-trigger .provider-icon{width:32px;height:32px;font-size:13px}.stellar-chat .chat-top-actions{position:static;display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:0}.stellar-chat .chat-empty{flex:1;min-height:0;width:100%;max-width:940px;margin:0 auto;padding:0;overflow:auto}.stellar-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:30px 0!important}.stellar-welcome-mark{width:62px;height:62px;display:flex;align-items:center;justify-content:center;margin:0 0 23px;background:linear-gradient(140deg,var(--primary-soft),var(--surface-strong));color:var(--primary);border:1px solid var(--line);border-radius:19px;box-shadow:0 0 55px color-mix(in srgb,var(--primary) 8%,transparent)}.stellar-chat-empty>.stellar-eyebrow{font-size:8px;letter-spacing:2.5px;color:var(--muted)}.stellar-chat-empty h1{font-size:32px;font-weight:550;letter-spacing:-1px;margin:15px 0 13px;line-height:1.35}.stellar-chat-empty>p{font-size:12px;color:var(--muted);margin:0 0 34px}.stellar-chat .suggestion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:850px;gap:12px}.stellar-chat .suggestion{padding:18px 15px;min-height:145px;background:var(--surface-strong);border:1px solid var(--line);border-radius:9px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;position:relative;box-shadow:none;color:var(--text-2)}.stellar-chat .suggestion:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-3px)}.stellar-suggestion-icon{display:flex;color:var(--primary);margin-bottom:17px}.stellar-chat .suggestion>strong{font-size:12px;font-weight:600;color:var(--text);margin-bottom:8px}.stellar-chat .suggestion>span:not(.stellar-suggestion-icon){font-size:10px;line-height:1.7;color:var(--muted)}.stellar-chat .suggestion>.icon{position:absolute;right:12px;top:21px;color:var(--muted)}.stellar-conversation-bottom{width:100%;max-width:940px;margin:22px auto 0;flex:0 0 auto}.stellar-chat .role-strip{display:flex;gap:8px;padding:0 0 12px;margin:0;flex-shrink:0;overflow-x:auto;scrollbar-width:none}.role-chip{border-radius:5px;font-size:10px;padding:7px 11px;border:1px solid var(--line);background:var(--surface-strong);color:var(--text-2)}.role-chip.active{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--primary)}.stellar-composer{width:100%;max-width:none;padding:0;background:var(--surface-strong);border:1px solid var(--line-strong);border-radius:12px;margin:0;box-shadow:0 8px 40px #00122d05;overflow:visible}.stellar-composer:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 7%,transparent)}.stellar-composer textarea{font-size:13px;padding:22px 21px 14px;line-height:1.75;height:101px;min-height:101px;max-height:200px;resize:vertical;border:0;outline:0;background:transparent;width:100%;border-radius:12px;color:var(--text)}.stellar-composer textarea::placeholder{color:var(--muted)}.stellar-composer .composer-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 14px 12px;min-height:44px}.stellar-context-tools,.stellar-compose-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.stellar-compose-right{margin-left:auto}.stellar-composer .tool-btn{border-radius:6px;padding:7px 8px;min-height:32px;font-size:10px;color:var(--text-2);background:transparent;border:1px solid transparent;white-space:nowrap}.stellar-composer .tool-btn:hover{border-color:var(--line);background:var(--surface-muted)}.stellar-composer .send-btn{width:34px;height:34px;border-radius:8px;background:#3275ed;color:white;border:0;margin:0 0 0 5px;box-shadow:none;display:flex;align-items:center;justify-content:center}.stellar-composer .send-btn:disabled{background:var(--surface-muted);color:var(--muted);opacity:.65}.stellar-composer #char-count{font-size:9px;color:var(--muted);min-width:27px}.stellar-composer .composer-top{position:static;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);background:var(--bg);padding:9px 17px;border-radius:0 0 12px 12px;font-size:9px;color:var(--muted);min-height:0}.stellar-compose-options .stellar-settings{top:auto;bottom:calc(100% + 8px);max-height:350px;overflow:auto}.stellar-input-note{margin:10px 3px 0;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:var(--muted)}.stellar-chat .messages{width:100%;padding:15px 0 25px;display:flex;flex-direction:column;gap:25px;margin:0}.stellar-chat .message{display:flex;gap:12px;align-items:flex-start;max-width:100%;width:100%;margin:0}.stellar-chat .message.user{flex-direction:row-reverse}.stellar-message-avatar{display:flex;align-items:center;justify-content:center;width:29px;height:29px;flex:0 0 auto;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:11px}.stellar-chat .message-bubble{font-size:13px;line-height:1.85;padding:15px 18px;max-width:88%;border:1px solid var(--line);background:var(--surface-strong);color:var(--text);border-radius:0 10px 10px 10px;overflow-wrap:anywhere}.stellar-chat .message.user .message-bubble{background:var(--primary-soft);border-color:var(--line);color:var(--text);border-radius:10px 0 10px 10px}.stellar-chat .message.failed .message-bubble{border-color:var(--danger)}
/* Shared screens keep one visual language without changing business contracts. */
.display-title{font-size:29px;font-weight:600;letter-spacing:-.8px;color:var(--text)}.page-subtitle{font-size:12px;line-height:1.8;color:var(--muted)}.page-title-row{margin-bottom:27px}.skills-page,.inspiration-page,.square-page,.vibe-page,.geekai-page,.comic-page,.ecommerce-page,.canvas-page{padding:34px 36px;background:var(--bg)}.segment-tab,.category-pill,.work-tab{border-radius:6px;font-size:11px}.segment-tab.active,.category-pill.active,.work-tab.active{background:var(--primary-soft);color:var(--primary);border-color:var(--line-strong)}.skill-card,.inspiration-card,.square-card,.studio-card,.geekai-tool-card,.work-card,.comic-project-card{border-radius:10px;border:1px solid var(--line);background:var(--surface-strong);box-shadow:none}.skill-cover{height:125px;background:linear-gradient(145deg,#193d5f,#172847)!important;color:#86c8e2}.skill-cover>span:nth-child(2){font:500 24px Consolas,monospace;letter-spacing:7px;color:#8ccfd180}.skill-body{padding:20px}.skill-body h3{font-size:15px}.skill-body p{color:var(--muted);font-size:11px}.recommend-tag{border-radius:4px;background:#18374c;color:#9be6df;border:1px solid #315a6a}.skill-author{color:#a6bdcf}.tag{border-radius:4px;background:var(--surface-muted);color:var(--muted)}.market-search,.search-like,.select-like,.dashboard-search{background:var(--surface-strong);border-color:var(--line);border-radius:7px}.empty-board{border-radius:12px;background:var(--surface-strong);border:1px dashed var(--line-strong);box-shadow:none}.empty-board h3{font-size:17px;color:var(--text)}.empty-board p{color:var(--muted);font-size:12px}.empty-icon{background:var(--primary-soft);color:var(--primary);border-radius:14px}.geekai-hero,.vibe-builder,.canvas-hero,.ecommerce-hero,.story-hero{border-radius:12px;border-color:var(--line);background:linear-gradient(135deg,var(--primary-soft),var(--surface-strong));box-shadow:none}.geekai-hero-orb,.hero-orb{background:var(--primary-soft);color:var(--primary);box-shadow:none}.studio-card,.geekai-tool-card{transition:border-color .18s,transform .18s}.studio-card:hover,.geekai-tool-card:hover{border-color:var(--primary);transform:translateY(-2px)}.image-chat-stage,.media-workspace{background:var(--bg)}.image-chat-composer,.media-settings,.geekai-editor-card,.geekai-info-card,.board-stats article,.story-create-card,.canvas-project-card,.editor-form,.editor-preview{background:var(--surface-strong);border:1px solid var(--line);border-radius:11px;box-shadow:none}.image-chat-stage{padding:25px}.image-chat-hero-orb{background:var(--primary-soft);box-shadow:none}.image-chat-role-strip{gap:7px}.image-chat-option,.image-chat-model-pill,.image-chat-channel,.image-chat-model-label{color:var(--text-2);background:var(--surface-muted);border-color:var(--line)}.image-chat-composer textarea{background:transparent;color:var(--text)}.image-chat-composer-head,.image-chat-composer-foot{border-color:var(--line)}.job-return-panel{border:1px solid var(--line);background:var(--surface-strong);border-radius:10px;box-shadow:none}.job-return-panel>header span{color:var(--muted)}.job-return-card{background:var(--bg);border-color:var(--line);border-left-color:var(--primary)}.job-return-wait{background:var(--primary-soft);color:var(--text-2)}.job-return-error{background:color-mix(in srgb,var(--danger) 9%,var(--surface-strong));color:var(--danger)}.comic-video-submit{background:var(--surface-strong);border-color:var(--line)}.comic-video-submit textarea{background:var(--bg)}.modal-backdrop{background:#020917b3;backdrop-filter:blur(8px)}.modal{background:var(--surface-strong);color:var(--text);border:1px solid var(--line-strong);border-radius:15px;box-shadow:0 32px 100px #0005}.modal h2{font-size:20px;font-weight:600}.modal-close{background:var(--surface-muted);color:var(--text-2);border-color:var(--line);border-radius:7px}.modal-body input,.modal-body textarea,.modal-body select,.field input,.field textarea,.field select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:7px}.auth-modal{max-width:455px}.auth-brand-icon{background:var(--primary-soft);color:var(--primary);border-radius:12px}.auth-tabs{background:var(--bg);border:1px solid var(--line);border-radius:7px}.auth-tab{color:var(--muted);font-size:10px}.auth-tab.active{background:var(--surface-strong);color:var(--primary);border-radius:5px}.auth-head p,.auth-footer,.auth-footer-note{color:var(--muted);font-size:11px}.field-label{color:var(--text-2)}.agreements{color:var(--muted);font-size:10px}.modal .balance-card,.modal .user-menu-head{background:var(--primary-soft);border-color:var(--line)}.modal .api-warning,.api-warning{background:color-mix(in srgb,#e6b866 8%,var(--surface-strong));color:var(--text-2);border-color:color-mix(in srgb,#e6b866 25%,var(--line));font-size:11px}.modal .option-choice-grid button{background:var(--bg);border-color:var(--line);color:var(--text-2)}.modal .option-choice-grid button.active{background:var(--primary-soft);color:var(--primary)}.modal .announcement-section{background:var(--bg);border-color:var(--line)}.modal .search-result,.modal .task-row,.modal .api-key-card,.modal .team-member-card{border-color:var(--line);background:var(--bg);color:var(--text)}.toast{background:var(--surface-strong);border:1px solid var(--line-strong);color:var(--text);box-shadow:var(--shadow)}.legal-page,.guide-page,.api-doc-page{background:var(--bg);color:var(--text)}.legal-card,.guide-card{background:var(--surface-strong);border-color:var(--line)}.stellar-dashboard{padding:34px 36px}.stellar-dashboard .dashboard-wrap{height:auto;padding:0;max-width:none}.stellar-dashboard .dashboard-panel{border:0;background:none;border-radius:0}.stellar-dashboard .dashboard-toolbar{flex-wrap:wrap;gap:12px;padding:0 0 25px}.stellar-dashboard .dashboard-title,.stellar-dashboard .dashboard-toolbar>.btn.round,.stellar-dashboard .retention{display:none}.stellar-dashboard .dashboard-search{margin-left:auto;min-width:210px}.stellar-dashboard .works-grid{gap:18px}.stellar-loader{width:14px;height:14px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:stellar-orbit .8s linear infinite}
@keyframes stellar-orbit{to{transform:rotate(360deg)}}@keyframes stellar-reveal{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@media(min-width:1600px){.stellar-chat{padding-inline:54px}.stellar-chat-empty h1{font-size:38px}.stellar-chat .suggestion-grid{max-width:940px}.stellar-chat .suggestion{min-height:158px;padding:22px}.stellar-conversation-bottom{max-width:1000px}}
@media(max-width:1320px){.stellar-hero,.stellar-feature-strip,.stellar-section,.stellar-site-footer{margin-inline:36px}.stellar-hero h1{font-size:52px}.stellar-breadcrumb{display:none}.stellar-header .header-left{width:174px}.stellar-command{margin-left:0}.stellar-chat .suggestion-grid{gap:9px}.stellar-chat .suggestion{padding:15px 11px}.stellar-chat-empty h1{font-size:29px}.stellar-workflow-steps{gap:25px}.stellar-header{gap:15px}}
@media(max-width:1000px){.stellar-site-header nav{gap:20px}.stellar-site-header{padding:0 25px;gap:20px}.stellar-hero{min-height:580px;gap:0;padding-top:75px}.stellar-hero h1{font-size:44px}.stellar-orbit{margin-right:-10px}.stellar-hero-actions{gap:10px;flex-wrap:wrap}.stellar-hero-actions button{font-size:12px;padding:0 17px;min-height:44px}.stellar-hero p{font-size:13px}.stellar-feature-grid{grid-template-columns:repeat(2,1fr)}.stellar-feature-strip span{font-size:11px;gap:9px}.stellar-section{padding-block:65px}.stellar-site h2{font-size:31px}.stellar-section-heading>p{max-width:300px}.stellar-faq{gap:45px}.stellar-site-footer{flex-wrap:wrap;gap:20px}.stellar-site-footer>div{gap:20px}.stellar-command{min-width:170px}.stellar-command kbd{display:none}.stellar-header .user-pill strong{display:none}.stellar-header .user-pill{padding-left:8px}.stellar-sidebar{width:204px;min-width:204px}.stellar-chat{padding:0 24px 14px}.stellar-chat .suggestion-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:650px}.stellar-chat .suggestion{min-height:110px}.stellar-suggestion-icon{margin-bottom:8px}.stellar-chat .suggestion>span:not(.stellar-suggestion-icon){display:none}.stellar-chat-empty>p{margin-bottom:25px}.stellar-welcome-mark{width:48px;height:48px;margin-bottom:18px}.stellar-chat .suggestion>strong{margin:0}.stellar-chat-empty{justify-content:flex-start;padding-top:24px!important}.stellar-conversation-bottom{margin-top:16px}.stellar-composer textarea{height:84px;min-height:84px}.stellar-context-tools,.stellar-compose-right{gap:1px}.stellar-composer .tool-btn{padding:6px}.stellar-space-label{padding-inline:14px}.stellar-site-account{gap:15px}}
@media(max-width:760px){.stellar-site-header{height:67px;padding:0 20px}.stellar-site-header nav{display:none}.stellar-site-header .brand-name{font-size:16px}.stellar-site-account{gap:16px}.stellar-site-account .stellar-site-primary{font-size:11px;min-height:35px;padding:0 12px}.stellar-login{font-size:12px}.stellar-hero{margin:0 22px;display:flex;flex-direction:column;padding:57px 0 67px;gap:12px;min-height:auto;overflow:hidden}.stellar-hero-copy{width:100%}.stellar-hero h1{font-size:44px;line-height:1.32;letter-spacing:-1.6px;margin-top:25px}.stellar-hero p{font-size:13px}.stellar-hero-actions{margin-top:27px}.stellar-hero-actions button{font-size:12px}.stellar-hero-note{gap:10px;font-size:9px}.stellar-orbit{width:100%;max-width:430px;margin:0 auto}.stellar-hero-bottom{bottom:18px;font-size:7px;letter-spacing:1px}.orbit-label{font-size:6px;padding:8px}.stellar-feature-strip{margin:0 22px;grid-template-columns:repeat(2,1fr);padding:8px 0;row-gap:0}.stellar-feature-strip span{padding:16px 0;font-size:11px;justify-content:flex-start;padding-left:12px}.stellar-feature-strip span:nth-child(2){border:0}.stellar-section{margin:0 22px;padding:53px 0;scroll-margin-top:67px}.stellar-section-heading{display:block;margin-bottom:26px}.stellar-site h2{font-size:29px;letter-spacing:-.5px}.stellar-section-heading>p{margin-top:23px;max-width:none;font-size:12px}.stellar-section-heading>.stellar-site-secondary{margin-top:23px;font-size:12px;min-height:40px}.stellar-feature-grid{grid-template-columns:1fr;gap:12px}.stellar-feature{padding:24px;min-height:0}.stellar-feature-top{margin-bottom:18px}.stellar-feature-top>span{padding:9px}.stellar-feature h3{font-size:17px}.stellar-product-preview{border-radius:7px}.preview-top{padding:12px;gap:7px;font-size:8px}.preview-top>span:nth-of-type(2){font-size:7px}.preview-nav{display:none}.preview-body{min-height:320px}.preview-main{padding:27px 18px}.preview-main h3{font-size:20px}.preview-suggestions{gap:6px;margin:20px 0}.preview-suggestions span{font-size:8px;padding:8px}.preview-composer{padding:14px;font-size:10px}.stellar-workflow-steps{grid-template-columns:1fr;gap:18px;margin:28px 0 0}.stellar-workflow-steps h3{margin:0 0 8px}.stellar-workflow-steps p{margin:0}.stellar-scenarios{grid-template-columns:1fr;gap:14px}.stellar-scenarios article{padding:26px}.stellar-scenarios p{min-height:0}.stellar-scenarios h3{margin:17px 0 11px}.stellar-faq{display:block}.stellar-faq>div:first-child{margin-bottom:28px}.stellar-faq summary{font-size:13px}.stellar-final-cta{padding:55px 22px 62px}.stellar-final-cta h2{font-size:32px}.stellar-site-footer{margin:0 22px;padding:30px 0;display:grid;grid-template-columns:1fr 1fr;gap:23px}.stellar-site-footer>span{text-align:right;font-size:9px;line-height:1.7}.stellar-site-footer>div{margin:0;gap:13px;grid-column:1/-1}.stellar-site-footer small{grid-column:1/-1}.stellar-site-footer .brand-name{font-size:16px}.stellar-header{height:58px;padding:0 12px;gap:10px}.stellar-header .header-left{width:auto;gap:8px;flex:1}.stellar-header .mobile-menu-btn{display:flex;padding:0;min-height:30px;width:28px}.stellar-header .brand-mark{width:24px;height:26px}.stellar-header .brand-name{font-size:15px}.stellar-header .brand-name small{font-size:6px;letter-spacing:1.5px}.workspace-edition,.stellar-command,.stellar-header .header-right>.top-nav-item,.stellar-header .header-right>.btn.green{display:none}.stellar-header .header-right{gap:8px;flex:0 0 auto}.stellar-header .user-pill{display:flex;border-left:0;padding:0}.stellar-header .user-pill>.icon{display:none}.stellar-workspace{height:calc(100dvh - 58px)}.stellar-sidebar,.stellar-rail{display:none}.stellar-sidebar.mobile-open{display:flex;position:absolute;inset:0 auto 0 0;width:min(286px,84vw);height:100%;z-index:60;transform:none;box-shadow:var(--shadow);border-right:1px solid var(--line-strong)}.stellar-sidebar.mobile-open .stellar-nav-link{min-height:42px;font-size:12px}.stellar-sidebar.mobile-open .stellar-nav-label{font-size:10px}.stellar-workspace .sidebar-scrim{position:absolute;inset:0;background:#0008;z-index:50;border:0;width:100%;height:100%}.stellar-model-drawer{width:calc(100% - 24px);max-width:360px;top:8px;right:12px;bottom:8px;z-index:45}.stellar-chat{padding:0 15px 12px}.stellar-chat-toolbar{padding:13px 0 15px;gap:8px}.stellar-model-trigger{max-width:68%;gap:7px}.stellar-model-trigger h2{font-size:10px}.stellar-model-trigger small{font-size:8px}.stellar-model-trigger .provider-icon{width:26px;height:26px;flex:0 0 auto}.stellar-chat .chat-top-actions{gap:4px}.stellar-chat .chat-top-actions .btn{padding:0 7px;min-height:29px;font-size:10px}.stellar-chat .chat-top-actions .btn[data-action="new-chat"]{display:none}.stellar-chat-settings>summary{padding:6px}.stellar-chat-empty{justify-content:center;padding:16px 0!important}.stellar-chat-empty h1{font-size:25px;margin:12px 0 10px}.stellar-chat-empty>p{font-size:11px;margin-bottom:24px}.stellar-chat-empty>.stellar-eyebrow{font-size:7px}.stellar-welcome-mark{width:42px;height:42px;border-radius:12px;margin-bottom:17px}.stellar-welcome-mark .icon{width:24px;height:24px}.stellar-chat .suggestion-grid{gap:9px}.stellar-chat .suggestion{min-height:80px;padding:13px}.stellar-chat .suggestion>.icon{top:16px}.stellar-chat .suggestion>strong{font-size:11px}.stellar-suggestion-icon{margin-bottom:10px}.stellar-suggestion-icon .icon{width:16px;height:16px}.stellar-conversation-bottom{margin-top:16px}.stellar-chat .role-strip{padding-bottom:9px;gap:6px}.role-chip{font-size:9px;padding:6px 8px}.stellar-composer textarea{height:82px;min-height:82px;padding:15px 14px 8px;font-size:12px;max-height:160px}.stellar-composer .composer-actions{gap:5px;padding:0 7px 8px;flex-wrap:nowrap}.stellar-context-tools{gap:0;flex:1;min-width:0}.stellar-composer .tool-btn{font-size:9px;gap:4px;padding:6px 4px;min-height:28px}.stellar-composer .tool-btn .icon{width:13px;height:13px}.stellar-compose-right{flex-wrap:nowrap;margin-left:0;gap:0}.stellar-compose-right>[data-action="thinking"]{display:none}.stellar-context-tools>[data-action="attachment"]>span{display:none}.stellar-compose-options>summary{padding:6px}.stellar-composer #char-count{display:none}.stellar-composer .send-btn{height:29px;width:29px;margin-left:4px}.stellar-composer .composer-top{padding:8px 12px;font-size:7px;gap:5px}.stellar-composer .composer-top>span:first-child{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stellar-input-note{font-size:8px;margin-top:8px}.stellar-input-note>span{display:none}.stellar-chat .message-bubble{font-size:12px;max-width:88%;padding:12px}.stellar-message-avatar{display:none}.stellar-chat .messages{padding-top:6px;gap:18px}.skills-page,.inspiration-page,.square-page,.vibe-page,.geekai-page,.comic-page,.ecommerce-page,.canvas-page,.stellar-dashboard{padding:23px 16px}.display-title{font-size:25px}.page-subtitle{font-size:11px}.page-title-row{gap:18px;margin-bottom:22px}.image-chat-stage{padding:14px}.modal-backdrop{padding:14px}.modal{max-width:100%;width:100%;max-height:calc(100dvh - 28px);border-radius:12px}.auth-modal{padding:20px}.stellar-dashboard .dashboard-search{min-width:0;flex:1}.stellar-dashboard .work-tabs{width:100%;overflow:auto}.stellar-dashboard .dashboard-toolbar{gap:9px}.stellar-header-more .stellar-settings{right:-43px}.stellar-compose-options .stellar-settings{right:-42px}.stellar-settings{min-width:185px}.stellar-workspace .sidebar-reopen{display:none}}
@media(max-height:760px) and (min-width:761px){.stellar-chat-empty{padding:12px 0!important}.stellar-chat-empty h1{font-size:26px}.stellar-chat-empty>p{margin-bottom:20px}.stellar-welcome-mark{width:40px;height:40px;margin-bottom:12px}.stellar-chat .suggestion{min-height:110px}.stellar-chat .suggestion>span:not(.stellar-suggestion-icon){display:none}.stellar-suggestion-icon{margin-bottom:12px}.stellar-conversation-bottom{margin-top:12px}.stellar-sidebar-bottom .stellar-usage{display:none}.stellar-nav-group{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.stellar-site{scroll-behavior:auto}.orbit-spin,.stellar-loader{animation:none}.stellar-site *, .stellar-workspace *{transition:none!important}}
/* Shared product finishes on creative subpages. */
.workspace.stellar-workspace{padding:0;gap:0}.workspace.stellar-workspace .main-stage{border-radius:0}
.tier-card.premium{background:linear-gradient(125deg,#183b5f,#1b5264);border-color:#35667b;color:#e9f5ff}.tier-card.batch{background:linear-gradient(125deg,#263c52,#182c3c);border-color:#405b73;color:#dfeaf7}.tier-card p{line-height:1.8}.story-send,.image-chat-send{background:#2563eb;box-shadow:none}.story-create-card,.story-composer{border-color:var(--line-strong)}
.image-chat-mode.active,.image-mode-tab.active,.compression-toggle{background:var(--primary-soft);color:var(--primary);border-color:var(--line-strong)}.compression-toggle.active .toggle-switch{background:#2563eb}.image-chat-provider{color:var(--muted)}.image-chat-empty p{color:var(--muted);max-width:560px;line-height:1.9;margin-inline:auto}.image-chat-model-pill:hover{border-color:var(--primary)}
.contract-status.status-connected{color:#50d4b1;background:#163b33}.contract-status.status-pending{color:#e5ba74;background:#3a3021}.api-docs-page{background:var(--bg);height:100dvh;overflow:auto}.api-docs-layout{min-height:0}.api-docs-content pre{overflow:auto;max-width:100%;background:var(--surface-strong);border-color:var(--line);color:var(--text)}
@media(max-width:760px){.workspace.sidebar-hidden .stellar-sidebar.mobile-open{display:flex}.stellar-header .header-right{grid-column:auto}.stellar-header .header-left{grid-column:auto}.image-chat-empty h1{font-size:26px}.tier-card{padding:22px}.tier-card h3{font-size:20px}}
.geekai-business-main .empty-board{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:32px;gap:15px;min-height:340px}.geekai-business-main .empty-board h3{margin:0;font-size:21px}.geekai-business-main .empty-board p{margin:0;max-width:640px;line-height:1.9}.geekai-business-main .empty-icon{border:0;flex-shrink:0}.geekai-business-nav button.active{background:var(--primary-soft);color:var(--primary)}.geekai-page .login-kicker{display:inline-flex;position:static;margin-bottom:14px}.skill-editor-page{padding:34px 36px}.skill-editor-page .editor-preview{position:relative;padding:30px 22px}.skill-editor-page .editor-preview>.recommend-tag{position:static;display:inline-flex;margin:0 0 18px}.guide-content h1{font-size:48px}.guide-grid article{border-radius:10px}.board-stats strong{font-size:24px}
@media(max-width:760px){.skill-editor-page{padding:23px 16px}.geekai-business-main .empty-board{padding:22px;min-height:280px}.guide-content h1{font-size:31px}.board-stats strong{font-size:19px}}