/* ============================================================
   AI 广告投放助手 — 全局样式
   设计规范：DESIGN.md (Mintlify aesthetic)
   - Inter for UI, Geist Mono for code
   - Black primary + mint green accent
   - Pill buttons, hairline-bordered cards
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --color-primary: #0a0a0a;
  --color-on-primary: #ffffff;
  --color-brand-green: #00d4a4;
  --color-brand-green-deep: #00b48a;
  --color-brand-green-soft: #7cebcb;
  --color-brand-tag: #3772cf;
  --color-brand-warn: #c37d0d;
  --color-brand-error: #d45656;
  --color-testimonial-orange: #f55a3c;

  --color-canvas: #ffffff;
  --color-canvas-dark: #0a0a0a;
  --color-surface: #f7f7f7;
  --color-surface-soft: #fafafa;
  --color-surface-code: #1c1c1e;

  --color-hairline: #e5e5e5;
  --color-hairline-soft: #ededed;
  --color-hairline-dark: #1f1f1f;

  --color-ink: #0a0a0a;
  --color-charcoal: #1c1c1e;
  --color-slate: #3a3a3c;
  --color-steel: #5a5a5c;
  --color-stone: #888888;
  --color-muted: #a8a8aa;

  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b3b3b3;

  /* Atmospheric hero gradients */
  --hero-sky-from: #87a8c8;
  --hero-sky-to: #f5e9d8;
  --hero-dark-from: #1a3d4a;
  --hero-dark-to: #2d5a4f;

  /* ---------- Typography ---------- */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  --text-hero: 600 72px/1.05 var(--font-ui);
  --text-hero-ls: -2px;
  --text-display-lg: 600 56px/1.10 var(--font-ui);
  --text-display-lg-ls: -1.5px;
  --text-h1: 600 48px/1.10 var(--font-ui);
  --text-h1-ls: -1px;
  --text-h2: 600 36px/1.20 var(--font-ui);
  --text-h2-ls: -0.5px;
  --text-h3: 600 28px/1.25 var(--font-ui);
  --text-h4: 600 22px/1.30 var(--font-ui);
  --text-h5: 600 18px/1.40 var(--font-ui);
  --text-subtitle: 400 18px/1.50 var(--font-ui);
  --text-body-md: 400 16px/1.50 var(--font-ui);
  --text-body-md-medium: 500 16px/1.50 var(--font-ui);
  --text-body-sm: 400 14px/1.50 var(--font-ui);
  --text-body-sm-medium: 500 14px/1.50 var(--font-ui);
  --text-caption: 400 13px/1.40 var(--font-ui);
  --text-caption-bold: 600 13px/1.40 var(--font-ui);
  --text-micro: 500 12px/1.40 var(--font-ui);
  --text-micro-uppercase: 600 11px/1.40 var(--font-ui);
  --text-micro-uppercase-ls: 0.5px;
  --text-button: 500 14px/1.30 var(--font-ui);
  --text-code-md: 400 14px/1.50 var(--font-mono);
  --text-code-sm: 400 13px/1.40 var(--font-mono);
  --text-code-inline: 500 13px/1.30 var(--font-mono);

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xxl: 24px;
  --r-full: 9999px;

  /* ---------- Spacing ---------- */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 20px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-xxxl: 40px;
  --s-section-sm: 48px;
  --s-section: 64px;
  --s-section-lg: 96px;
  --s-hero: 120px;

  /* ---------- Elevation ---------- */
  --shadow-1: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
  --shadow-2: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
  --shadow-3: rgba(0, 0, 0, 0.12) 0px 24px 48px -8px;
  --shadow-brand: rgba(0, 212, 164, 0.08) 0px 8px 24px;
}

/* ============================================================
   Base reset + page setup
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font: var(--text-body-md);
  color: var(--color-ink);
  background: var(--color-surface-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-charcoal); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-ui); }

/* ============================================================
   Top navigation (shared)
   ============================================================ */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-canvas);
  height: 64px;
  padding: 0 var(--s-xxl);
  border-bottom: 1px solid var(--color-hairline-soft);
  display: flex;
  align-items: center;
  gap: var(--s-xxl);
}

.top-nav .brand {
  font: var(--text-body-md-medium);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}

.top-nav .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--color-brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-mono);
}

.top-nav .links {
  display: flex;
  gap: var(--s-xs);
  flex: 1;
}

.top-nav .links a {
  font: var(--text-body-sm-medium);
  color: var(--color-steel);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.top-nav .links a:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.top-nav .links a.active {
  background: var(--color-surface);
  color: var(--color-ink);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  font: var(--text-button);
  font-family: var(--font-ui);
  padding: 10px 20px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--color-ink);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  background: var(--color-hairline) !important;
  color: var(--color-muted) !important;
  cursor: not-allowed !important;
  border-color: transparent !important;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:not(:disabled):active { background: var(--color-charcoal); }

.btn-green {
  background: var(--color-brand-green);
  color: var(--color-primary);
}
.btn-green:not(:disabled):active { background: var(--color-brand-green-deep); }

.btn-on-dark {
  background: var(--color-on-dark);
  color: var(--color-primary);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.btn-secondary:not(:disabled):hover { background: var(--color-surface); }

.btn-ghost {
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--color-ink);
}
.btn-ghost:not(:disabled):hover { background: var(--color-surface); }

.btn-danger {
  background: var(--color-brand-error);
  color: var(--color-on-dark);
}
.btn-danger:not(:disabled):active { background: #b94545; }

.btn-link {
  padding: 0;
  border-radius: 0;
  font: var(--text-body-sm-medium);
  color: var(--color-ink);
}
.btn-link:not(:disabled):hover { color: var(--color-charcoal); text-decoration: underline; }

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-full);
  background: var(--color-canvas);
  border-color: var(--color-hairline);
  color: var(--color-ink);
}
.btn-icon:not(:disabled):hover { background: var(--color-surface); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--color-canvas);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  border: 1px solid var(--color-hairline);
}
.card-wide { max-width: 720px; }
.card-feature {
  background: var(--color-surface);
  border-radius: var(--r-lg);
  padding: var(--s-xxl);
}

.card-title {
  font: var(--text-h3);
  margin: 0 0 var(--s-md);
}
.card-subtitle {
  font: var(--text-body-sm);
  color: var(--color-steel);
  margin: 0 0 var(--s-xl);
}

/* ============================================================
   Forms
   ============================================================ */
.form-row { margin-bottom: var(--s-lg); }
.form-row label {
  display: block;
  font: var(--text-body-sm-medium);
  color: var(--color-ink);
  margin-bottom: var(--s-xs);
}
.form-row .helper {
  font: var(--text-caption);
  color: var(--color-steel);
  margin-top: var(--s-xs);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  width: 100%;
  font: var(--text-body-md);
  font-family: var(--font-ui);
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
  height: 40px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  appearance: none;
}

select {
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--s-md);
}

select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a5c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

textarea {
  height: auto;
  min-height: 80px;
  line-height: 1.5;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-brand-green);
  box-shadow: 0 0 0 1px var(--color-brand-green);
}

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

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font: var(--text-micro-uppercase);
  letter-spacing: var(--text-micro-uppercase-ls);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--color-surface);
  color: var(--color-steel);
  white-space: nowrap;
}

.badge-owner {
  background: var(--color-brand-green);
  color: var(--color-primary);
}
.badge-admin {
  background: rgba(55, 114, 207, 0.15);
  color: var(--color-brand-tag);
}
.badge-member {
  background: var(--color-surface);
  color: var(--color-steel);
}

.badge-error {
  background: var(--color-brand-error);
  color: var(--color-on-dark);
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  top: var(--s-xl);
  right: var(--s-xl);
  z-index: 1000;
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-md);
  background: var(--color-surface-code);
  color: var(--color-on-dark);
  font: var(--text-body-sm);
  box-shadow: var(--shadow-2);
  animation: toast-in 200ms ease;
}
.toast-success {
  background: var(--color-brand-green);
  color: var(--color-primary);
}
.toast-error {
  background: var(--color-brand-error);
  color: var(--color-on-dark);
}
@keyframes toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Auth pages (login / register)
   ============================================================ */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.auth-hero {
  position: relative;
  background: linear-gradient(135deg, var(--hero-dark-from) 0%, var(--hero-dark-to) 100%);
  color: var(--color-on-dark);
  padding: var(--s-section-lg) var(--s-section);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--color-brand-green-soft) 0%, transparent 60%);
  opacity: 0.15;
  pointer-events: none;
}
.auth-hero .brand {
  font: var(--text-body-md-medium);
  color: var(--color-on-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  position: relative;
  z-index: 1;
}
.auth-hero .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--color-brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: 700;
  font-family: var(--font-mono);
}
.auth-hero .headline {
  font: var(--text-display-lg);
  letter-spacing: var(--text-display-lg-ls);
  margin: 0 0 var(--s-lg);
  position: relative;
  z-index: 1;
}
.auth-hero .lead {
  font: var(--text-subtitle);
  color: var(--color-on-dark-muted);
  max-width: 480px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.auth-hero .accent {
  color: var(--color-brand-green-soft);
  font-family: var(--font-mono);
  font-weight: 500;
}

.auth-hero .feature-list {
  list-style: none;
  padding: 0;
  margin: var(--s-xxl) 0 0;
  position: relative;
  z-index: 1;
}
.auth-hero .feature-list li {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font: var(--text-body-sm);
  color: var(--color-on-dark-muted);
  margin-bottom: var(--s-sm);
}
.auth-hero .feature-list .check {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--color-brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-section-lg) var(--s-section);
  background: var(--color-surface-soft);
}
.auth-card {
  width: 100%;
  max-width: 400px;
}
.auth-card-title {
  font: var(--text-h3);
  margin: 0 0 var(--s-xs);
}
.auth-card-subtitle {
  font: var(--text-body-sm);
  color: var(--color-steel);
  margin: 0 0 var(--s-xxl);
}
.auth-card .btn-primary {
  width: 100%;
  height: 44px;
}
.auth-card .switch-link {
  text-align: center;
  margin-top: var(--s-lg);
  font: var(--text-body-sm);
  color: var(--color-steel);
}
.auth-card .switch-link a {
  color: var(--color-ink);
  font-weight: 500;
}

/* ============================================================
   Chat page
   ============================================================ */
.chat-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.session-list {
  background: var(--color-canvas);
  border-right: 1px solid var(--color-hairline-soft);
  overflow-y: auto;
  padding: var(--s-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  height: 100%;
  box-sizing: border-box;
}

.session-list .session-section-header {
  font: var(--text-micro-uppercase);
  letter-spacing: var(--text-micro-uppercase-ls);
  color: var(--color-steel);
  padding: var(--s-md) var(--s-md) var(--s-xs);
}

.session-item {
  padding: var(--s-xs) var(--s-md);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: var(--text-body-sm);
  color: var(--color-steel);
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 150ms ease, color 150ms ease;
}
.session-item:hover { background: var(--color-surface); color: var(--color-ink); }
.session-item.streaming::after {
  content: "⏳";
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.7;
}
.session-item.active {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 500;
}

.new-session-btn {
  margin-bottom: var(--s-xs);
  padding: var(--s-xs) var(--s-md);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: var(--text-body-sm-medium);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  width: 100%;
  transition: background-color 150ms ease;
}
.new-session-btn:hover { background: var(--color-canvas); }
.new-session-btn .plus {
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.chat-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: var(--s-section) var(--s-section);
}

.messages .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: var(--s-md);
}
.messages .empty-state .glyph {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--color-brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 24px;
}
.messages .empty-state h3 {
  font: var(--text-h3);
  margin: 0;
}
.messages .empty-state p {
  font: var(--text-body-md);
  color: var(--color-steel);
  margin: 0;
  max-width: 420px;
}

.message {
  margin-bottom: var(--s-lg);
  display: flex;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.message.user {
  flex-direction: row-reverse;
}
.message .avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.message.assistant .avatar {
  background: var(--color-brand-green);
  color: var(--color-primary);
  margin-right: var(--s-md);
}
.message.user .avatar {
  background: var(--color-primary);
  color: var(--color-on-primary);
  margin-left: var(--s-md);
}
.message .bubble {
  font: var(--text-body-md);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-lg);
  max-width: 720px;
}
.message.user .bubble {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-top-right-radius: var(--r-xs);
}
.message.assistant .bubble {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-top-left-radius: var(--r-xs);
}
.message pre {
  margin: 0;
  font-family: var(--font-ui);
  white-space: pre-wrap;
  word-break: break-word;
}
.message.assistant pre code,
.message.assistant .bubble code {
  font-family: var(--font-mono);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 13px;
  border: 1px solid var(--color-hairline);
}

/* streaming cursor */
.message.assistant.streaming::after {
  content: '▋';
  display: inline-block;
  margin-left: 4px;
  color: var(--color-brand-green);
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.composer {
  border-top: 1px solid var(--color-hairline-soft);
  background: var(--color-canvas);
  padding: var(--s-md) var(--s-section);
  flex-shrink: 0;
}
.composer .composer-inner {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-end;
  max-width: 880px;
  margin: 0 auto;
}
.composer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 200px;
  border-radius: var(--r-lg);
  padding: var(--s-sm) var(--s-md);
  font: var(--text-body-md);
}
.composer .send-btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 var(--s-lg);
}
.composer .send-btn.streaming {
  background: var(--color-hairline);
  color: var(--color-muted);
}

/* ============================================================
   Team page
   ============================================================ */
.team-container {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-section) var(--s-xxl);
}

.team-section { margin-bottom: var(--s-section); }

.team-section h2 {
  font: var(--text-h3);
  margin: 0 0 var(--s-xs);
}
.team-section .desc {
  font: var(--text-body-sm);
  color: var(--color-steel);
  margin: 0 0 var(--s-xl);
}

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-hairline-soft);
  margin-bottom: var(--s-xs);
  background: var(--color-canvas);
  transition: background-color 150ms ease;
}
.member-row:hover { background: var(--color-surface-soft); }

.member-row .info { display: flex; align-items: center; gap: var(--s-md); min-width: 0; }
.member-row .avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--color-surface);
  color: var(--color-steel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.member-row .meta { display: flex; flex-direction: column; min-width: 0; }
.member-row .name {
  font: var(--text-body-md-medium);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}
.member-row .email {
  font: var(--text-caption);
  color: var(--color-steel);
  font-family: var(--font-mono);
}

.member-actions { display: flex; gap: var(--s-xs); align-items: center; }
.member-actions .btn,
.member-actions select {
  padding: 6px 12px;
  font: var(--text-body-sm-medium);
  height: 32px;
  border-radius: var(--r-md);
}
.member-actions select {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  width: auto;
}

/* ============================================================
   Settings page
   ============================================================ */
.settings-container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-section) var(--s-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--s-section-sm);
}

.settings-card { padding: var(--s-xxxl); }
.settings-card h2 { font: var(--text-h3); margin: 0 0 var(--s-xs); }
.settings-card .desc {
  font: var(--text-body-sm);
  color: var(--color-steel);
  margin: 0 0 var(--s-xxl);
}
.settings-card .actions { display: flex; gap: var(--s-sm); margin-top: var(--s-md); }

.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-sm);
  margin-bottom: var(--s-xs);
}
.provider-option {
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-hairline);
  cursor: pointer;
  background: var(--color-canvas);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.provider-option:hover { background: var(--color-surface-soft); }
.provider-option.selected {
  border-color: var(--color-brand-green);
  box-shadow: 0 0 0 1px var(--color-brand-green);
}
.provider-option .name {
  font: var(--text-body-md-medium);
  color: var(--color-ink);
}
.provider-option .desc {
  font: var(--text-caption);
  color: var(--color-steel);
  margin: 0;
}

.key-status-row {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-top: var(--s-xs);
}
.key-status-row .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--color-muted);
}
.key-status-row .dot.set { background: var(--color-brand-green); }
.key-status-row .label {
  font: var(--text-caption);
  color: var(--color-steel);
}

/* ============================================================
   Misc utility
   ============================================================ */
.text-mono { font-family: var(--font-mono); }
.text-steel { color: var(--color-steel); }
.text-stone { color: var(--color-stone); }

code, .inline-code {
  font-family: var(--font-mono);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--color-charcoal);
  border: 1px solid var(--color-hairline);
}

.invite-result {
  margin-top: var(--s-md);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
}
.invite-result .success {
  font: var(--text-body-sm-medium);
  color: var(--color-brand-green-deep);
  margin: 0 0 var(--s-xs);
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1023px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .chat-layout { grid-template-columns: 1fr; }
  .session-list { display: none; }
  .top-nav { padding: 0 var(--s-lg); }
  .messages { padding: var(--s-lg); }
  .composer { padding: var(--s-md); }
}
@media (max-width: 600px) {
  .top-nav .links a { padding: 8px 10px; font-size: 13px; }
  .provider-grid { grid-template-columns: 1fr; }
  .member-row { flex-direction: column; align-items: stretch; gap: var(--s-md); }
  .member-actions { justify-content: flex-end; }
}

/* ============================================================
   Markdown 排版（消息气泡内 .bubble）
   ============================================================ */
.message.assistant .bubble {
  overflow-x: auto;
}
.message .bubble > *:first-child { margin-top: 0; }
.message .bubble > *:last-child { margin-bottom: 0; }

.message .bubble p {
  font: var(--text-body-md);
  margin: 0 0 var(--s-sm);
}
.message .bubble h1 {
  font: var(--text-h3);
  margin: var(--s-md) 0 var(--s-sm);
}
.message .bubble h2 {
  font: var(--text-h4);
  margin: var(--s-md) 0 var(--s-sm);
}
.message .bubble h3 {
  font: var(--text-h5);
  margin: var(--s-md) 0 var(--s-xs);
}
.message .bubble h4,
.message .bubble h5,
.message .bubble h6 {
  font: 600 16px/1.4 var(--font-ui);
  margin: var(--s-sm) 0 var(--s-xs);
}

.message .bubble ul,
.message .bubble ol {
  margin: 0 0 var(--s-sm);
  padding-left: var(--s-lg);
}
.message .bubble li { margin-bottom: var(--s-xxs); font: var(--text-body-md); }

.message .bubble code {
  font-family: var(--font-mono);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--color-charcoal);
  border: 1px solid var(--color-hairline);
}
.message .bubble pre {
  background: var(--color-surface-code);
  color: var(--color-on-dark);
  padding: var(--s-md);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 0 0 var(--s-sm);
  font: var(--text-code-md);
}
.message .bubble pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: 14px;
}

.message .bubble blockquote {
  margin: 0 0 var(--s-sm);
  padding: var(--s-xs) var(--s-md);
  border-left: 3px solid var(--color-brand-green);
  background: var(--color-surface);
  color: var(--color-steel);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.message .bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--s-sm);
  font: var(--text-body-sm);
}
.message .bubble th,
.message .bubble td {
  border: 1px solid var(--color-hairline);
  padding: var(--s-xs) var(--s-sm);
  text-align: left;
}
.message .bubble th {
  background: var(--color-surface);
  font-weight: 600;
}

.message .bubble a {
  color: var(--color-brand-tag);
  text-decoration: underline;
}
.message .bubble hr {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: var(--s-md) 0;
}

/* ---------- 消息时间行 ---------- */
.message .meta-row {
  font: var(--text-caption);
  color: var(--color-stone);
  margin-bottom: var(--s-xxs);
  display: flex;
  gap: var(--s-xs);
  align-items: center;
}
.message .meta-row .role {
  font-weight: 500;
  color: var(--color-steel);
}

/* ---------- 列表项时间行 ---------- */
.session-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-item .session-title {
  font: var(--text-body-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-item.active .session-title { font-weight: 500; }
.session-item .session-time {
  font: var(--text-micro);
  color: var(--color-stone);
  font-family: var(--font-mono);
}

/* ---------- 思考过程折叠区 ---------- */
.message .thinking-block {
  margin: 0 0 var(--s-sm);
  padding: var(--s-xs) var(--s-md);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--r-md);
  font: var(--text-body-sm);
}
.message .thinking-block summary {
  cursor: pointer;
  color: var(--color-steel);
  font-weight: 500;
  padding: var(--s-xxs) 0;
  list-style: none;
  user-select: none;
}
.message .thinking-block summary::-webkit-details-marker {
  display: none;
}
.message .thinking-block summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--s-xs);
  transition: transform 150ms ease;
  color: var(--color-stone);
}
.message .thinking-block[open] summary::before {
  transform: rotate(90deg);
}
.message .thinking-block .thinking-content {
  margin-top: var(--s-xs);
  padding: var(--s-xs) 0;
  color: var(--color-stone);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  border-top: 1px dashed var(--color-hairline-soft);
}

/* ---------- debug session_id 显示（URL 加 ?debug=1 启用） ---------- */
.debug-session-id {
  margin-top: auto;
  padding: var(--s-sm) var(--s-md);
  font: var(--text-micro);
  color: var(--color-stone);
  border-top: 1px dashed var(--color-hairline-soft);
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}
.debug-session-id code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-steel);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--color-hairline);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debug-session-id button {
  background: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-steel);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.debug-session-id button:hover { background: var(--color-surface); }

.session-list {
  display: flex;
  flex-direction: column;
}
.session-list #sessions {
  flex: 1;
  overflow-y: auto;
}

/* ---------- accounts 页面状态点 ---------- */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-left: 8px;
  vertical-align: middle;
}
.status-dot.untested { background: var(--color-muted); }
.status-dot.ok { background: var(--color-brand-green); }
.status-dot.fail { background: var(--color-brand-error); }

/* ---------- select 通用修复（高度 + 可滚动） ---------- */
select[size], select[size] option {
  height: auto;
}
.member-actions select {
  height: 32px;
  padding: 4px 24px 4px 8px;
}
.invite-result select {
  width: 100%;
  height: auto;
  padding: 6px 8px;
}
.invite-result select option {
  padding: 6px 8px;
}

/* ============================================================
   OAuth 区域（spec §5.1，Task D）
   - .oauth-section: 3 区域容器（A/B admin only，C all users）
   - .oauth-msg: 保存反馈
   - .oauth-table: 历史/广告主列表
   Mintlify aesthetic：紧凑圆角 + surface-code 背景 + brand-green 强调
   ============================================================ */
.oauth-section {
  /* 继承 .team-section 间距，OAuth 区域不强加额外样式 */
}
.oauth-msg {
  margin-top: var(--s-sm, 8px);
  font-size: 13px;
  color: var(--color-text-secondary, #4b5563);
  min-height: 18px;
}
.oauth-msg.success { color: var(--color-brand-green, #059669); }
.oauth-msg.error { color: var(--color-brand-error, #dc2626); }
.oauth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--color-surface, #fff);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.oauth-table thead th {
  background: var(--color-surface-soft, #f9fafb);
  color: var(--color-text-secondary, #4b5563);
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.oauth-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #f3f4f6);
  color: var(--color-text-primary, #111827);
  vertical-align: middle;
}
.oauth-table tbody tr:last-child td {
  border-bottom: none;
}
.oauth-table tbody tr:hover {
  background: var(--color-surface-soft, #fafafa);
}
.oauth-table .badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--r-sm, 4px);
}


/* OAuth 改造：手动添加表单默认折叠（降级显示） */
.manual-add-toggle {
  margin: 16px 0 8px;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  background: var(--surface-alt, #fafafa);
  padding: 12px 16px;
}
.manual-add-toggle > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary, #666);
  list-style: none;
  user-select: none;
}
.manual-add-toggle > summary::-webkit-details-marker { display: none; }
.manual-add-toggle > summary::before {
  content: '▶ ';
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.15s;
  display: inline-block;
}
.manual-add-toggle[open] > summary::before {
  transform: rotate(90deg);
}
.manual-add-toggle[open] > summary {
  margin-bottom: 8px;
}

/* 防菜单闪烁：admin-only 菜单默认隐藏（CSS 第一帧就生效，不依赖 JS）。
   body.is-admin 由 common.js applyCachedRoleToBody() 同步加（cached_role from localStorage）。
   syncRoleFromApi() 异步校准。 */
body:not(.is-admin) a[data-admin-only="true"] {
  display: none !important;
}

/* wt-pa-c：PLATFORM_ADMIN 专属菜单项默认隐藏（防闪烁同 admin-only 逻辑）。
   body.is-platform-admin 由 common.js syncRoleFromApi() 异步加。 */
body:not(.is-platform-admin) a[data-platform-admin-only="true"] {
  display: none !important;
}

/* 邀请制警告横幅（register 页无 invite 时显示） */
.invite-warning {
  background: #fef3c7;  /* amber-100 */
  border: 1px solid #f59e0b;  /* amber-500 */
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #92400e;  /* amber-800 */
}
.invite-warning strong { display: block; margin-bottom: 4px; }
.invite-warning p { margin: 0; line-height: 1.5; }

/* === team 页美化（wt-pa-c 后 platform admin 视觉优化） === */

/* 平台管理员顶部 banner（指引去 /platform） */
.info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 20px;
}
.info-banner-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.info-banner-content {
  flex: 1;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.4;
}
.info-banner-content strong {
  font-weight: 600;
  color: #1e3a8a;
  margin-right: 6px;
}
.info-banner-content p {
  display: inline;
  margin: 0;
}
.info-banner-content a {
  color: #1d4ed8;
  font-weight: 500;
  text-decoration: none;
}
.info-banner-content a:hover { text-decoration: underline; }

/* section header 加 meta（成员计数等） */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.section-header h2 { margin: 0; }
.section-meta {
  font-size: 12px;
  color: var(--color-steel, #64748b);
  font-weight: 500;
  padding: 2px 8px;
  background: var(--surface-alt, #f1f5f9);
  border-radius: 10px;
}

/* invite card 美化 */
.invite-card {
  max-width: 560px;
  padding: 20px 24px;
}
.invite-card .form-row { margin-bottom: 14px; }
.invite-card .btn-primary { width: 100%; padding: 10px; }

/* badge 加 platform_admin 样式 */
.badge-platform_admin {
  background: #1e3a8a;  /* blue-900，最深 */
  color: white;
}

/* === /platform 页面美化（团队卡片网格） === */

/* page hero（页面顶部标题） */
.page-hero {
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.page-hero h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-ink, #0f172a);
}
.page-hero p {
  margin: 0;
  font-size: 13px;
  color: var(--color-steel, #64748b);
}

/* 团队卡片网格 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.team-card {
  background: white;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.team-card:hover {
  border-color: var(--color-brand, #2563eb);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.team-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* 团队头像（首字母） */
.team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);  /* blue-100 → blue-200 */
  color: #1e40af;  /* blue-800 */
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.team-card-title {
  flex: 1;
  min-width: 0;  /* allow truncate */
}
.team-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink, #0f172a);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-id {
  font-size: 11px;
  color: var(--color-steel, #94a3b8);
}
.team-id code {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
}

/* 成员数 badge */
.team-size-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--surface-alt, #f1f5f9);
  color: var(--color-steel, #64748b);
  flex-shrink: 0;
}
.team-size-badge.active {
  background: #ecfdf5;  /* green-50 */
  color: #047857;  /* green-700 */
}

.team-card-meta {
  border-top: 1px solid var(--border, #f1f5f9);
  padding-top: 8px;
  font-size: 12px;
  color: var(--color-steel, #64748b);
}
.team-card-meta code {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
}

/* 总计摘要 */
.team-count-summary {
  font-size: 12px;
  color: var(--color-steel, #94a3b8);
  margin: 8px 0 0;
  text-align: right;
}