:root {
  --bg: #f4f5f1;
  --surface: #fbfbf8;
  --surface-strong: #ffffff;
  --surface-soft: #edf2ec;
  --ink: #28312d;
  --muted: #7a847f;
  --subtle: #a8afab;
  --line: #dde1dc;
  --line-strong: #ccd3cd;
  --accent: #2d8d6d;
  --accent-dark: #1f6e55;
  --accent-soft: #dff1e9;
  --orange: #d47752;
  --orange-soft: #f8e9e1;
  --blue: #3d7fae;
  --blue-soft: #e2edf5;
  --gold: #b2842d;
  --gold-soft: #f4edd9;
  --danger: #c75e5e;
  --shadow: 0 14px 40px rgba(48, 63, 55, .09);
  --shadow-soft: 0 7px 22px rgba(48, 63, 55, .07);
}

:root[data-palette="lavender"] {
  --accent: #675fb7;
  --accent-dark: #51499b;
  --accent-soft: #ece9fa;
  --surface-soft: #f0eef8;
  --orange: #c96f78;
  --blue: #527eb2;
}

:root[data-palette="ocean"] {
  --accent: #287d91;
  --accent-dark: #1f6576;
  --accent-soft: #dff0f2;
  --surface-soft: #e9f2f2;
  --orange: #d67c55;
  --blue: #3974ac;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
html { background: var(--bg); }
body { color: var(--ink); background: var(--bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 14px; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, textarea, input, select { outline: none; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

.app-shell {
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(70, 90, 79, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 90, 79, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

.topbar {
  height: 72px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--ink);
  background: rgba(250, 250, 247, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.topbar-left, .top-actions, .top-nav, .brand, .search-button, .composer-tools, .send-tools, .chat-head-actions { display: flex; align-items: center; }
.topbar-left { gap: 11px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); border: 1px solid transparent; border-radius: 9px; background: transparent; transition: .2s ease; }
.icon-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.brand { gap: 10px; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; }
.brand-mark { width: 28px; height: 30px; position: relative; display: block; }
.brand-mark i { position: absolute; width: 22px; height: 8px; left: 3px; border: 2px solid var(--accent); border-radius: 50%; transform-origin: center; }
.brand-mark i:nth-child(1) { top: 5px; transform: rotate(0); }
.brand-mark i:nth-child(2) { top: 10px; transform: rotate(60deg); border-color: var(--orange); }
.brand-mark i:nth-child(3) { top: 10px; transform: rotate(-60deg); border-color: var(--blue); }
.brand-name, .brand > span:last-child { display: block; }
.brand b { display: block; font-size: 15px; letter-spacing: .03em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .16em; }
.top-nav { gap: 28px; height: 100%; }
.top-nav button { height: 100%; padding: 0 2px; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; transition: .2s ease; }
.top-nav button:hover, .top-nav button.active { color: var(--ink); border-bottom-color: var(--accent); }
.top-actions { gap: 8px; }
.search-button { min-width: 174px; height: 38px; gap: 9px; padding: 0 9px 0 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.search-button span:nth-child(2) { flex: 1; text-align: left; }
kbd { padding: 3px 6px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.notice-button { position: relative; }
.notice-button i { position: absolute; top: -3px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 99px; font: normal 10px/1 sans-serif; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: var(--accent); border: 0; border-radius: 50%; font-size: 12px; font-weight: 800; }

.body-grid { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 236px minmax(0, 1fr); transition: grid-template-columns .28s ease; }
.body-grid.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar { height: calc(100vh - 72px); position: sticky; top: 72px; display: flex; flex-direction: column; min-width: 0; background: rgba(248, 248, 244, .84); border-right: 1px solid var(--line); backdrop-filter: blur(12px); overflow: hidden; }
.sidebar-scroll { padding: 18px 12px; flex: 1; overflow: auto; scrollbar-width: thin; }
.nav-label { margin: 16px 10px 7px; color: var(--subtle); font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.nav-label:first-child { margin-top: 2px; }
.side-link, .history-link { width: 100%; border: 0; background: transparent; }
.side-link { min-height: 42px; padding: 0 11px; display: flex; align-items: center; gap: 10px; position: relative; color: #58615d; border-radius: 10px; text-align: left; white-space: nowrap; transition: .2s ease; }
.side-link:hover { color: var(--ink); background: var(--surface-soft); transform: translateX(2px); }
.side-link.active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 650; }
.side-icon { width: 20px; flex: none; display: inline-grid; place-items: center; color: currentColor; font-size: 17px; }
.live-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); animation: pulse 1.8s infinite; }
.side-badge { min-width: 19px; height: 19px; margin-left: auto; display: grid; place-items: center; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 13%, white); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 99px; font-size: 10px; }
.history-link { padding: 8px 10px; display: grid; gap: 3px; color: var(--muted); border-radius: 8px; text-align: left; white-space: nowrap; }
.history-link:hover { color: var(--ink); background: var(--surface-soft); }
.history-link span { overflow: hidden; text-overflow: ellipsis; }
.history-link small { color: var(--subtle); font-size: 10px; }
.sidebar-footer { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: rgba(255,255,255,.45); overflow: hidden; white-space: nowrap; }
.quota-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.quota-row b { color: var(--accent); }
.quota-track { height: 5px; margin: 8px 0 12px; overflow: hidden; border-radius: 5px; background: var(--line); }
.quota-track i { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); border-radius: inherit; animation: grow-bar .9s ease both; }
.sidebar-footer button { width: 100%; height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: var(--accent-dark); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 8px; }
.body-grid.sidebar-collapsed .sidebar-scroll { padding-inline: 9px; }
.body-grid.sidebar-collapsed .nav-label, .body-grid.sidebar-collapsed .side-link > span:not(.side-icon), .body-grid.sidebar-collapsed .side-link em, .body-grid.sidebar-collapsed .side-link b, .body-grid.sidebar-collapsed .history-link, .body-grid.sidebar-collapsed .sidebar-footer { display: none; }
.body-grid.sidebar-collapsed .side-link { justify-content: center; padding: 0; }

.workspace { min-width: 0; }
.page { display: none; min-width: 0; min-height: calc(100vh - 72px); animation: page-in .35s ease; }
.page.active { display: block; }

.playground-page.active { display: grid; grid-template-columns: minmax(0, 1fr) 292px; }
.chat-stage { min-width: 0; min-height: calc(100vh - 72px); display: flex; flex-direction: column; }
.chat-head { padding: 26px clamp(26px, 5vw, 72px) 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.workspace-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.workspace-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.chat-head h1 { margin: 12px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: clamp(27px, 3vw, 38px); font-weight: 500; letter-spacing: -.035em; }
.chat-head p { margin: 0; color: var(--muted); font-size: 12px; }
code { color: var(--accent-dark); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.chat-head-actions { gap: 8px; }
.soft-btn, .primary-btn { min-height: 38px; padding: 0 13px; border-radius: 8px; transition: .2s ease; }
.soft-btn { color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.soft-btn:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.primary-btn { color: white; background: var(--accent); border: 1px solid var(--accent); font-weight: 650; }
.primary-btn:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-soft); }

.conversation { width: min(900px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 216px; }
.message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13px; padding: 20px 0; animation: message-in .42s cubic-bezier(.2,.8,.2,1) both; }
.message + .message { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.message-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 12px; font-weight: 800; }
.user-avatar { color: white; background: var(--ink); }
.assistant-avatar { color: var(--accent-dark); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.mini-mark { animation: spin-slow 7s linear infinite; }
.message-meta { min-height: 25px; display: flex; align-items: center; gap: 9px; }
.message-meta b { font-size: 13px; }
.message-meta time { margin-left: auto; color: var(--subtle); font-size: 10px; }
.model-chip { padding: 3px 7px; color: var(--accent-dark); background: var(--accent-soft); border-radius: 99px; font-size: 10px; }
.message-content > p { margin: 7px 0; color: #505955; font-size: 15px; line-height: 1.9; }
.message-content ul { margin: 13px 0; padding-left: 22px; color: #505955; }
.message-content li { margin: 10px 0; padding-left: 4px; line-height: 1.7; }
.message-content li::marker { color: var(--accent); }
.message-content li b { color: var(--ink); }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.action-row button { min-height: 34px; padding: 0 11px; color: var(--accent-dark); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 7px; font-size: 12px; }
.action-row button:hover { color: white; background: var(--accent); }
.message-tools { min-height: 28px; display: flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--subtle); font-size: 10px; }
.message-tools button { width: 27px; height: 27px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }
.message-tools button:hover { color: var(--accent); background: var(--accent-soft); }
.message-tools span { margin-left: 6px; }
.typing-row { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; }
.typing-row i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: typing 1s infinite; }
.typing-row i:nth-child(2) { animation-delay: .15s; }.typing-row i:nth-child(3) { animation-delay: .3s; }
.stream-caret { display: inline-block; width: 2px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink .7s steps(2) infinite; }

.composer-wrap { position: fixed; z-index: 25; left: calc(236px + (100vw - 236px - 292px) / 2); bottom: 0; width: min(850px, calc(100vw - 236px - 292px - 70px)); transform: translateX(-50%); padding: 18px 0 14px; background: linear-gradient(180deg, rgba(244,245,241,0), rgba(244,245,241,.96) 23%, var(--bg) 60%); transition: left .28s ease, width .28s ease; }
.body-grid.sidebar-collapsed .composer-wrap { left: calc(72px + (100vw - 72px - 292px) / 2); width: min(850px, calc(100vw - 72px - 292px - 70px)); }
.composer { background: rgba(255,255,252,.95); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 18px 50px rgba(50, 64, 57, .13); overflow: hidden; transition: border-color .2s, box-shadow .2s; backdrop-filter: blur(14px); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 18px 52px rgba(50,64,57,.14), 0 0 0 3px var(--accent-soft); }
.composer textarea { width: 100%; min-height: 90px; resize: none; padding: 19px 20px 8px; color: var(--ink); background: transparent; border: 0; font-size: 15px; line-height: 1.6; }
.composer textarea::placeholder { color: var(--subtle); }
.composer-footer { min-height: 58px; padding: 8px 11px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-tools, .send-tools { gap: 6px; }
.tool-pill { width: 36px; height: 36px; display: inline-grid; place-items: center; position: relative; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 9px; }
.tool-pill:hover, .tool-pill.active { color: var(--accent-dark); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 15%, transparent); }
.tool-pill sup { position: absolute; right: 1px; top: 0; min-width: 15px; height: 15px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 99px; font-size: 8px; }
.model-selector { height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.model-selector b { color: #5a625e; font-size: 12px; }
.model-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.send-button { width: 38px; height: 38px; color: white; background: var(--accent); border: 0; border-radius: 10px; font-size: 19px; transition: .2s ease; }
.send-button:hover { background: var(--accent-dark); transform: translateY(-2px); }
.send-button:disabled { opacity: .5; cursor: default; transform: none; }
.composer-tip { margin: 7px 0 0; color: var(--subtle); font-size: 10px; text-align: center; }
.status-pulse { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s infinite; }

.context-panel { height: calc(100vh - 72px); position: sticky; top: 72px; border-left: 1px solid var(--line); background: rgba(249,249,246,.82); backdrop-filter: blur(10px); overflow: auto; }
.context-head { min-height: 64px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.context-head b { display: block; font-size: 13px; }.context-head small { display: block; margin-top: 3px; color: var(--subtle); font-size: 10px; }
.context-head button { width: 28px; height: 28px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }.context-head button:hover { background: var(--surface-soft); }
.context-section { padding: 17px; border-bottom: 1px solid var(--line); }
.context-label { margin: 0 0 10px; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.file-card { min-height: 54px; padding: 8px 7px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; border-radius: 8px; }
.file-card:hover { background: var(--surface-soft); }
.file-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--orange); background: var(--orange-soft); border-radius: 7px; font: 9px ui-monospace, monospace; }.file-icon.css { color: var(--blue); background: var(--blue-soft); }
.file-card b { display: block; font-size: 11px; }.file-card small { display: block; margin-top: 3px; color: var(--subtle); font-size: 9px; }.file-card > i { color: var(--accent); font-style: normal; }
.steps { margin: 0; padding: 0; list-style: none; }.steps li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; position: relative; min-height: 56px; }.steps li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 21px; bottom: 1px; width: 1px; background: var(--line-strong); }.steps li > i { width: 19px; height: 19px; position: relative; z-index: 1; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: white; font-style: normal; font-size: 9px; }.steps li.done > i { border-color: var(--accent); background: var(--accent); }.steps li.active > i { border-color: var(--accent); background: var(--surface); }.steps li.active > i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }.steps b { display: block; padding-top: 1px; font-size: 11px; }.steps small { display: block; margin-top: 3px; color: var(--subtle); font-size: 9px; }
.activity-line { min-height: 37px; display: grid; grid-template-columns: 7px 1fr auto; gap: 8px; align-items: center; color: var(--muted); font-size: 10px; }.activity-line i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }.activity-line:nth-child(3) i { background: var(--orange); }.activity-line:nth-child(4) i { background: var(--blue); }.activity-line time { color: var(--subtle); font-size: 9px; }

.console-page { padding: 36px clamp(22px, 4vw, 54px) 72px; }
.page-header { max-width: 1240px; margin: 0 auto 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.page-header h2 { margin: 8px 0 5px; font-family: Georgia, "Songti SC", serif; font-size: 34px; font-weight: 500; letter-spacing: -.035em; }
.page-header p { margin: 0; color: var(--muted); }
.metrics-grid, .console-grid, .dashboard-layout, .wallet-grid, .profile-grid, .task-board { max-width: 1240px; margin-inline: auto; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.metric-card { min-height: 140px; padding: 19px; position: relative; overflow: hidden; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; }
.metric-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.metric-card > span { color: var(--muted); font-size: 11px; }.metric-card strong { display: block; margin: 13px 0 4px; font-size: 28px; font-weight: 650; letter-spacing: -.04em; }.metric-card small { color: var(--subtle); font-size: 10px; }.metric-card.mint strong { color: var(--accent); }.metric-card.orange strong { color: var(--orange); }.metric-card.blue strong { color: var(--blue); }.metric-card.gold strong { color: var(--gold); }
.spark { width: 94px; height: 42px; position: absolute; right: 10px; bottom: 11px; opacity: .85; }
.console-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 14px; }
.panel { padding: 20px; background: rgba(255,255,252,.86); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.panel h3 { margin: 0; font-size: 14px; }.panel-head p, .panel > p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.period-tabs { display: flex; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }.period-tabs button { min-height: 27px; padding: 0 9px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 10px; }.period-tabs button.active { color: var(--accent-dark); background: var(--surface-strong); box-shadow: 0 2px 5px rgba(40,50,45,.08); }
#mainChart { width: 100%; height: 250px; margin-top: 15px; display: block; }.chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 10px; }.chart-legend i { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--accent); }.chart-legend span:last-child i { background: var(--orange); }
.healthy { padding: 4px 8px; color: var(--accent-dark); background: var(--accent-soft); border-radius: 99px; font-size: 9px; }.status-list { margin-top: 14px; }.status-list > div { min-height: 53px; display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid var(--line); }.status-list > div:last-child { border: 0; }.status-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }.status-list i.warn { background: var(--gold); }.status-list b { display: block; font-size: 11px; }.status-list small { display: block; margin-top: 3px; color: var(--subtle); font-size: 9px; }.status-list em { color: var(--accent); font-style: normal; font-size: 9px; }.status-list em.warning { color: var(--gold); }

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr); gap: 14px; }.wide-panel { min-height: 390px; }.live-label { color: var(--accent); font: 9px ui-monospace, monospace; }.live-label i { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }#liveChart { width: 100%; height: 300px; display: block; }.donut-wrap { min-height: 295px; display: grid; align-content: center; justify-items: center; }.donut { width: 175px; height: 175px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--accent) 0 48%, var(--orange) 48% 79%, var(--blue) 79% 100%); animation: donut-in .9s ease both; }.donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: var(--surface-strong); }.donut > span { position: relative; z-index: 1; text-align: center; }.donut b { display: block; font-size: 24px; }.donut small { color: var(--muted); font-size: 9px; }.donut-wrap ul { width: 100%; margin: 23px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }.donut-wrap li { display: flex; align-items: center; color: var(--muted); font-size: 10px; }.donut-wrap li i { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); }.donut-wrap li:nth-child(2) i { background: var(--orange); }.donut-wrap li:nth-child(3) i { background: var(--blue); }.donut-wrap li b { margin-left: auto; color: var(--ink); }

.table-panel { max-width: 1240px; margin-inline: auto; padding: 10px 18px; overflow: auto; }.table-panel table { width: 100%; min-width: 680px; border-collapse: collapse; }.table-panel th, .table-panel td { padding: 15px 8px; text-align: left; border-bottom: 1px solid var(--line); }.table-panel tbody tr:last-child td { border-bottom: 0; }.table-panel th { color: var(--muted); font-size: 10px; font-weight: 650; }.table-panel td { color: #505955; font-size: 12px; }.table-panel td b { display: block; color: var(--ink); }.table-panel td small { display: block; margin-top: 3px; color: var(--subtle); font-size: 9px; }.table-panel code { color: var(--blue); }.table-panel td:last-child { text-align: right; }.row-menu { width: 30px; height: 30px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }.row-menu:hover { background: var(--surface-soft); }.tag { display: inline-flex; padding: 4px 8px; border-radius: 99px; font-size: 9px; }.tag.success { color: var(--accent-dark); background: var(--accent-soft); }.tag.running { color: var(--blue); background: var(--blue-soft); }.tag.paused { color: var(--muted); background: var(--surface-soft); }.filters { padding: 8px 0 14px; display: grid; grid-template-columns: minmax(220px,1fr) 150px auto; gap: 9px; }.filters input, .filters select { height: 38px; padding: 0 11px; color: var(--ink); background: var(--surface-strong); border: 1px solid var(--line); border-radius: 8px; }.filters button { padding: 0 16px; color: white; background: var(--accent); border: 0; border-radius: 8px; }

.task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }.task-column { min-width: 0; padding: 12px; background: color-mix(in srgb, var(--surface-soft) 65%, transparent); border: 1px solid var(--line); border-radius: 12px; }.task-column-title { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; color: var(--muted); font-size: 11px; }.task-column-title b { width: 20px; height: 20px; display: grid; place-items: center; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 50%; font-size: 9px; }.task-card { margin-top: 8px; padding: 15px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 5px 15px rgba(40,55,47,.05); transition: transform .2s ease, box-shadow .2s ease; }.task-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }.task-card-head { display: flex; justify-content: space-between; }.task-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent-dark); background: var(--accent-soft); border-radius: 8px; }.task-icon.blue { color: var(--blue); background: var(--blue-soft); }.task-icon.gold { color: var(--gold); background: var(--gold-soft); }.task-card-head button { color: var(--muted); background: transparent; border: 0; }.task-card h3 { margin: 15px 0 7px; font-size: 13px; }.task-card p { margin: 0; min-height: 42px; color: var(--muted); font-size: 10px; line-height: 1.6; }.task-progress { height: 6px; margin: 16px 0 8px; overflow: hidden; background: var(--line); border-radius: 6px; }.task-progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; animation: grow-bar 1s ease both; }.task-progress.blue i { background: var(--blue); }.task-foot { margin-top: 13px; display: flex; justify-content: space-between; color: var(--accent); font-size: 9px; }.task-foot small { color: var(--subtle); }.muted-card { opacity: .78; }.done-card .task-icon { color: white; background: var(--accent); }

.wallet-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 14px; }.balance-card { min-height: 250px; padding: 28px; position: relative; overflow: hidden; color: white; background: linear-gradient(135deg, var(--accent-dark), var(--accent) 62%, var(--blue)); border-radius: 14px; box-shadow: var(--shadow); }.balance-card > span { opacity: .75; }.balance-card strong { display: block; margin: 22px 0 7px; font: 500 52px Georgia, serif; letter-spacing: -.05em; }.balance-card small { opacity: .7; }.balance-art { position: absolute; width: 240px; height: 240px; right: -45px; bottom: -77px; }.balance-art i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; animation: orbit 13s linear infinite; }.balance-art i:nth-child(2) { inset: 25px; animation-direction: reverse; animation-duration: 9s; }.balance-art i:nth-child(3) { inset: 50px; animation-duration: 7s; }.usage-panel .panel-head > b { color: var(--orange); font-size: 20px; }.usage-bars { margin-top: 28px; display: grid; gap: 23px; }.usage-bars label > span { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 10px; }.usage-bars label b { color: var(--ink); }.usage-bars label > i { height: 7px; display: block; overflow: hidden; background: var(--line); border-radius: 7px; }.usage-bars em { display: block; height: 100%; background: var(--accent); border-radius: inherit; animation: grow-bar .9s ease both; }.usage-bars label:nth-child(2) em { background: var(--orange); animation-delay: .12s; }.usage-bars label:nth-child(3) em { background: var(--blue); animation-delay: .24s; }

.reward-hero { max-width: 1240px; min-height: 390px; margin: auto; padding: 55px; display: grid; grid-template-columns: 1fr 360px; align-items: center; overflow: hidden; background: linear-gradient(120deg, #e2f3eb, #f9eee7 58%, #e6eff7); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }.reward-hero > div:first-child > span { color: var(--muted); }.reward-hero strong { display: block; margin: 13px 0; color: var(--accent-dark); font: 500 62px Georgia, serif; }.reward-hero p { color: var(--muted); }.reward-hero button { min-height: 42px; margin-top: 16px; padding: 0 17px; color: white; background: var(--accent); border: 0; border-radius: 8px; }.reward-orbits { width: 310px; height: 310px; position: relative; display: grid; place-items: center; }.reward-orbits i { position: absolute; width: 100%; height: 36%; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 50%; animation: orbit 12s linear infinite; }.reward-orbits i:nth-child(2) { transform: rotate(60deg); border-color: color-mix(in srgb, var(--orange) 40%, transparent); animation-duration: 9s; }.reward-orbits i:nth-child(3) { transform: rotate(-60deg); border-color: color-mix(in srgb, var(--blue) 40%, transparent); animation-direction: reverse; }.reward-orbits b { width: 100px; height: 100px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 50%; font-size: 27px; box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 25%, transparent); }

.profile-grid { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: 14px; }.profile-card { min-height: 210px; display: flex; align-items: center; gap: 18px; }.large-avatar { width: 76px; height: 76px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--accent), var(--blue)); border-radius: 22px; font-size: 25px; font-weight: 800; }.profile-card h3 { margin: 0 0 5px; font: 500 25px Georgia, serif; }.profile-card p { margin: 0 0 12px; color: var(--muted); }.settings-card > h3 { margin-bottom: 10px; }.settings-card label { min-height: 63px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); cursor: pointer; }.settings-card label:last-child { border: 0; }.settings-card label b { display: block; font-size: 11px; }.settings-card label small { display: block; margin-top: 4px; color: var(--subtle); font-size: 9px; }.settings-card input { position: absolute; opacity: 0; pointer-events: none; }.settings-card label > i { width: 38px; height: 21px; position: relative; flex: none; background: var(--line-strong); border-radius: 99px; transition: .2s; }.settings-card label > i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; background: white; border-radius: 50%; box-shadow: 0 2px 5px rgba(30,40,35,.17); transition: .2s; }.settings-card input:checked + i { background: var(--accent); }.settings-card input:checked + i::after { transform: translateX(17px); }

.popover { position: fixed; z-index: 80; width: 290px; padding: 10px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }.popover[hidden] { display: none; }.model-popover p { margin: 5px 7px 8px; color: var(--subtle); font-size: 9px; font-weight: 750; letter-spacing: .1em; }.model-popover button { width: 100%; min-height: 58px; padding: 7px; display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; color: var(--ink); background: transparent; border: 0; border-radius: 8px; text-align: left; }.model-popover button:hover { background: var(--surface-soft); }.model-popover button > i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }.model-popover button > i.orange { background: var(--orange); }.model-popover button > i.blue { background: var(--blue); }.model-popover b { display: block; font-size: 11px; }.model-popover small { display: block; margin-top: 3px; color: var(--subtle); font-size: 9px; }.model-popover em { color: var(--accent); font-style: normal; font-size: 9px; }
.modal-backdrop, .command-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(35,44,40,.24); backdrop-filter: blur(5px); animation: fade-in .2s ease; }.modal-backdrop[hidden], .command-backdrop[hidden] { display: none; }.modal { width: min(440px,100%); padding: 27px; position: relative; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); animation: modal-in .26s ease both; }.modal-close { width: 31px; height: 31px; position: absolute; right: 15px; top: 15px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; }.modal-close:hover { background: var(--surface-soft); }.modal h2 { margin: 9px 0 7px; font: 500 28px Georgia, "Songti SC", serif; }.modal > p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }.modal input { width: 100%; height: 43px; padding: 0 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }.modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }.modal-actions button { min-height: 38px; padding: 0 14px; border-radius: 8px; }.modal-actions button:first-child { color: var(--muted); background: transparent; border: 1px solid var(--line); }.modal-actions button:last-child { color: white; background: var(--accent); border: 0; }
.command-backdrop { place-items: start center; padding-top: 12vh; background: rgba(35,44,40,.18); }.command-palette { width: min(580px,100%); background: var(--surface-strong); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; animation: modal-in .22s ease both; }.command-search { height: 58px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.command-search input { flex: 1; height: 100%; color: var(--ink); background: transparent; border: 0; }.command-results { padding: 8px; }.command-results p { margin: 6px 9px; color: var(--subtle); font-size: 9px; font-weight: 750; letter-spacing: .08em; }.command-results button { width: 100%; min-height: 45px; padding: 0 10px; display: grid; grid-template-columns: 25px 1fr auto; gap: 7px; align-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 8px; text-align: left; }.command-results button:hover { color: var(--ink); background: var(--surface-soft); }.command-results b { font-size: 11px; }
.toast-region { position: fixed; z-index: 150; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }.toast { min-width: 250px; padding: 12px 14px; display: flex; align-items: center; gap: 9px; color: var(--ink); background: var(--surface-strong); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: toast-in .3s ease both; }.toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes message-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes grow-bar { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes donut-in { from { transform: rotate(-90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } }

@media (max-width: 1120px) {
  .playground-page.active { grid-template-columns: minmax(0, 1fr); }
  .context-panel { display: none; }
  .composer-wrap { left: calc(236px + (100vw - 236px) / 2); width: min(850px, calc(100vw - 236px - 70px)); }
  .body-grid.sidebar-collapsed .composer-wrap { left: calc(72px + (100vw - 72px) / 2); width: min(850px, calc(100vw - 72px - 70px)); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .topbar { padding: 0 13px; }
  .top-nav, .search-button span:nth-child(2), .search-button kbd { display: none; }
  .search-button { min-width: 36px; width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .body-grid, .body-grid.sidebar-collapsed { grid-template-columns: 67px minmax(0,1fr); }
  .sidebar-scroll { padding-inline: 7px; }
  .nav-label, .side-link > span:not(.side-icon), .side-link em, .side-link b, .history-link, .sidebar-footer { display: none; }
  .side-link { justify-content: center; padding: 0; }
  .chat-head { padding-inline: 22px; }
  .conversation { width: calc(100% - 36px); }
  .composer-wrap, .body-grid.sidebar-collapsed .composer-wrap { left: calc(67px + (100vw - 67px) / 2); width: calc(100vw - 67px - 30px); }
  .console-grid, .dashboard-layout, .wallet-grid, .profile-grid { grid-template-columns: 1fr; }
  .task-board { grid-template-columns: 1fr; }
  .reward-hero { grid-template-columns: 1fr; padding: 35px; }
  .reward-orbits { margin: auto; }
}

@media (max-width: 560px) {
  .brand small, .top-actions .icon-btn:not(.notice-button), .chat-head-actions { display: none; }
  .brand b { font-size: 13px; }
  .topbar-left { gap: 2px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .chat-head h1 { font-size: 27px; }
  .chat-head p { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conversation { padding-bottom: 205px; }
  .composer textarea { min-height: 75px; }
  .model-selector b { display: none; }
  .filters { grid-template-columns: 1fr; }
  .page-header { align-items: flex-start; }.page-header p { display: none; }.page-header h2 { font-size: 28px; }
  .reward-orbits { width: 240px; height: 240px; }
}

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

/* Workspace completion: anchored composer, visible execution and full pages. */
* { letter-spacing: 0 !important; }
.playground-page.active { height:calc(100dvh - 72px); min-height:0; animation:none; }
.chat-stage { height:100%; min-height:0; overflow:hidden; }
.chat-head { flex:none; padding:22px 28px 17px; }
.chat-head h1 { font-size:30px; }
.chat-head-actions { flex-wrap:wrap; }
.conversation { flex:1; min-height:0; overflow-y:auto; width:100%; padding:14px 28px 24px; scroll-behavior:smooth; }
.message-content { min-width:0; overflow-wrap:anywhere; }
.composer-wrap,.body-grid.sidebar-collapsed .composer-wrap { position:static; left:auto; bottom:auto; transform:none; width:auto; flex:none; margin:0 24px; padding:8px 0 12px; background:transparent; }
.composer textarea { min-height:72px; }
.composer { border-radius:12px; box-shadow:0 6px 22px #30403710; }
.context-panel { height:100%; }
.context-hidden.active { grid-template-columns:minmax(0,1fr); }
.context-hidden .context-panel { display:none; }
.execution-strip { margin:12px 28px 0; flex:none; padding:14px 0 12px; border-bottom:1px solid var(--line); }
.execution-title { display:flex; align-items:center; gap:8px; font-size:12px; }
.execution-title button { margin-left:auto; min-height:30px; font-size:11px; }
.execution-flow { display:flex; align-items:center; gap:10px; margin:17px 0 12px; }
.execution-flow span { padding:6px 8px; font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:5px; transition:background .35s,color .35s,transform .35s; white-space:nowrap; }
.execution-flow span.current { color:var(--accent-dark); background:var(--accent-soft); border-color:var(--accent); transform:translateY(-3px); }
.execution-flow span.complete { color:var(--accent-dark); background:var(--accent-soft); }
.execution-flow > i { flex:1; height:1px; background:var(--line-strong); position:relative; overflow:hidden; }
.execution-flow > i::after { content:''; position:absolute; width:24px; height:2px; background:var(--accent); animation:signal-pass 1.5s linear infinite; }
.execution-track { height:3px; background:var(--line); overflow:hidden; }
.execution-track i { display:block; height:100%; width:0; background:var(--accent); }
.execution-strip small { display:block; margin-top:7px; color:var(--muted); font-size:10px; }
@keyframes signal-pass { from{left:-24px}to{left:100%} }
.chat-empty { padding:20px 0; }.chat-empty h2{font-size:22px}.chat-empty p{color:var(--muted)}
.attachments { display:flex; flex-wrap:wrap; gap:7px; padding:0 14px; }.attachments:empty{display:none}.attachments>span{margin-top:10px;padding:6px 9px;background:var(--accent-soft);border-radius:5px;font-size:11px}.attachments button{border:0;background:transparent}
.edit-area { width:100%;min-height:140px;padding:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;resize:vertical;line-height:1.8; }
.tool-setting,.plan-options label { display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px;border-bottom:1px solid var(--line); }.tool-setting input,.plan-options input{width:18px;height:18px;accent-color:var(--accent)}
.catalog-toolbar{display:flex;gap:12px;max-width:1240px;margin:0 auto 24px}.catalog-toolbar input{flex:1;min-width:0}.catalog-toolbar input,.catalog-toolbar select{height:42px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:6px;color:var(--ink)}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1240px;margin:auto}
.catalog-item{padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);animation:message-in .5s ease;transition:transform .25s,box-shadow .25s}.catalog-item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.catalog-item h3{font-size:22px}.catalog-item p{line-height:1.8;color:var(--muted);min-height:48px}.catalog-item dl{display:flex;gap:30px;margin:24px 0}.catalog-item dt{font-size:11px;color:var(--muted)}.catalog-item dd{margin:6px 0 0}.catalog-item[hidden]{display:none}
.model-emblem{height:100px;position:relative;display:grid;place-items:center;margin-bottom:18px}.model-emblem span{position:absolute;width:70px;height:35px;border:2px solid var(--model-color);border-radius:50%;animation:emblem-turn 8s linear infinite}.model-emblem span:nth-child(2){animation-delay:-2.6s}.model-emblem span:nth-child(3){animation-delay:-5.2s}@keyframes emblem-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.docs-layout{max-width:1240px;margin:auto;display:grid;grid-template-columns:180px minmax(0,1fr);gap:36px}.docs-nav{display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);padding-right:18px}.docs-nav button{border:0;background:transparent;text-align:left;padding:12px;color:var(--muted);border-radius:6px}.docs-nav button.active{background:var(--accent-soft);color:var(--accent-dark)}.doc-content h2{font-size:25px}.doc-content p{line-height:1.9;max-width:760px}.doc-content pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-soft);padding:22px;line-height:1.8;border:1px solid var(--line)}
.task-actions{display:flex;gap:8px;margin-top:14px}.task-actions .soft-btn{min-height:30px;font-size:11px}.task-progress i{animation:none;transition:width 1.2s linear}.queue-empty,.no-results{color:var(--muted);padding:20px}.message-tools button[aria-pressed=true]{color:var(--orange);background:var(--orange-soft)}
.command-results button[hidden]{display:none}.panel,.metrics-grid,.console-grid,.dashboard-layout,.wallet-grid,.profile-grid{min-width:0}.metric-card,.panel,.task-column{border-radius:8px}
.modal{max-height:85dvh;overflow-y:auto}.modal-actions{position:sticky;bottom:0;background:var(--surface-strong);padding-top:10px}
@media(max-width:1120px){.playground-page.active{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.chat-head{padding:18px}.chat-head h1{font-size:26px}.conversation{padding:12px 18px 20px}.composer-wrap,.body-grid.sidebar-collapsed .composer-wrap{width:auto;margin:0 14px}.execution-strip{margin:6px 18px 0}.catalog-grid{grid-template-columns:1fr}.docs-layout{grid-template-columns:1fr;gap:14px}.docs-nav{flex-direction:row;flex-wrap:wrap;border:0;padding:0}.context-panel{display:none}.reward-orbits{max-width:100%}}
@media(max-width:560px){.execution-flow{gap:5px}.execution-flow span{padding:5px 3px;font-size:9px}.execution-strip{margin-inline:12px}.execution-title{font-size:11px}.composer-footer{gap:5px;padding:7px}.composer-tools{gap:0}.tool-pill{width:30px}.send-tools{gap:4px}.model-selector{padding:0 7px}.chat-head h1{font-size:23px}.chat-head p{max-width:210px}.catalog-toolbar{flex-wrap:wrap}.console-page{padding:20px 12px 40px}.profile-card{flex-wrap:wrap}.page-header{flex-wrap:wrap}.brand-mark{width:24px}.top-actions{gap:2px}}
@media(prefers-reduced-motion:reduce){.execution-flow>i::after,.model-emblem span{animation:none}.conversation{scroll-behavior:auto}.task-progress i{transition:none}}