/* ===== suzheai.css v2 — 1:1 原始设计 + 主站融合 ===== */

/* ── 设计 token（与原始 HTML 一致）── */
:root {
  --sz-bg:         #F5F1EB;
  --sz-bg2:        #EFE9DF;
  --sz-paper:      #FAF7F2;
  --sz-paper2:     #F2EDE3;
  --sz-ink:        #1F1B16;
  --sz-ink2:       #3A342C;
  --sz-ink3:       #6B6359;
  --sz-ink4:       #9A9085;
  --sz-rule:       #E3DCCF;
  --sz-rule2:      #D6CDBC;
  --sz-accent:     #C96442;
  --sz-accent-ink: #8A3D22;
  --sz-accent-soft:#F2D9CB;
  --sz-ok:         #4D7C5A;
  --sz-ok-soft:    #DCE7DC;
  --sz-warn:       #B07A2A;
  --sz-warn-soft:  #F2E4C8;
  --sz-err:        #B14A3B;
  --sz-err-soft:   #F3D8D1;
  --sz-shadow-sm:  0 1px 0 rgba(31,27,22,.04), 0 1px 2px rgba(31,27,22,.04);
  --sz-shadow-md:  0 1px 0 rgba(31,27,22,.04), 0 6px 16px -8px rgba(31,27,22,.12);
  --sz-r-sm: 6px;
  --sz-r-md: 10px;
  --sz-r-lg: 16px;
  --sz-serif: "Newsreader", ui-serif, Georgia, serif;
  --sz-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sz-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Body reset ── */
.sz-body {
  background: var(--sz-bg);
  font-family: var(--sz-sans);
  color: var(--sz-ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sz-body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(201,100,66,.04), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(31,27,22,.03), transparent 50%);
  z-index: 0;
}

/* ── CDK激活 导航高亮（仅字重，不覆盖主站配色） ── */
.sz-cdk-active-link {
  font-weight: 600 !important;
}

/* Toast */
.sz-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 9px 18px;
  background: var(--sz-ink);
  color: #fff;
  border-radius: var(--sz-r-md);
  font-size: 13px;
  font-family: var(--sz-sans);
  box-shadow: var(--sz-shadow-md);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.sz-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Layout ── */
.sz-shell {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 32px 80px;
  position: relative;
  z-index: 1;
}

.sz-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* ── Sidebar ── */
.sz-sidebar {
  position: sticky;
  top: 80px;
}

.sz-sidebar-section-label {
  font-size: 11px;
  color: var(--sz-ink4);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-left: 10px;
}

.sz-sidebar-divider {
  height: 1px;
  background: var(--sz-rule);
  margin: 18px 8px;
}

.sz-tabnav {
  display: grid;
  gap: 2px;
}

.sz-tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  font-family: var(--sz-sans);
  color: var(--sz-ink2);
  text-align: left;
  transition: background .12s ease, color .1s ease, border-color .1s ease;
}

.sz-tab:hover {
  background: var(--sz-bg2);
}

.sz-tab.is-active {
  background: var(--sz-paper);
  border-color: var(--sz-rule);
  color: var(--sz-ink);
  font-weight: 500;
  box-shadow: var(--sz-shadow-sm);
}

.sz-tab-icon {
  display: flex;
  align-items: center;
  color: var(--sz-ink4);
  flex-shrink: 0;
}

.sz-tab.is-active .sz-tab-icon { color: var(--sz-accent); }

.sz-tab-label { flex: 1; }

.sz-tab-stock {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sz-ink4);
  flex-shrink: 0;
  display: none;
}

.sz-tab-stock[data-tone="ok"]   { background: var(--sz-ok);   display: block; }
.sz-tab-stock[data-tone="warn"] { background: var(--sz-warn); display: block; }
.sz-tab-stock[data-tone="err"]  { background: var(--sz-err);  display: block; }

.sz-tab-count {
  font-size: 10.5px;
  font-family: var(--sz-mono);
  font-weight: 500;
  color: var(--sz-ink4);
}

/* Stock widget */
.sz-stock-widget {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-md);
}

.sz-stock-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--sz-ink3);
}

.sz-refresh-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--sz-accent);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.sz-refresh-btn.spinning svg { animation: sz-spin .8s linear infinite; }

.sz-stock-ago {
  font-size: 11px;
  color: var(--sz-ink4);
  display: flex;
  align-items: center;
  gap: 5px;
}

.sz-stock-ago::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sz-ok);
  animation: sz-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Help widget */
.sz-help-widget {
  margin-top: 14px;
  padding: 14px;
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-md);
}

.sz-help-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--sz-ink);
  margin-bottom: 4px;
}

.sz-help-body {
  font-size: 11.5px;
  color: var(--sz-ink3);
  line-height: 1.5;
  margin-bottom: 8px;
}

.sz-help-link {
  font-size: 12px;
  color: var(--sz-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* ── Content area ── */
.sz-content { min-width: 0; max-width: 680px; }

.sz-panel { animation: sz-fade-up .25s ease; }

/* Page header */
.sz-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.sz-page-title {
  font-family: var(--sz-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  color: var(--sz-ink);
  letter-spacing: -.015em;
}

.sz-page-sub {
  margin: 8px 0 0;
  color: var(--sz-ink3);
  font-size: 14px;
}

/* Stock pill */
.sz-stock-pill {
  padding: 12px 16px;
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-lg);
  min-width: 200px;
  box-shadow: var(--sz-shadow-sm);
  flex-shrink: 0;
}

.sz-stock-pill-label {
  font-size: 11.5px;
  color: var(--sz-ink3);
  letter-spacing: .03em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sz-stock-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sz-stock-bar-track {
  flex: 1;
  height: 4px;
  background: var(--sz-bg2);
  border-radius: 999px;
  overflow: hidden;
}

.sz-stock-bar-fill {
  height: 100%;
  background: var(--sz-ok);
  border-radius: 999px;
  transition: width .3s ease, background .3s ease;
}

.sz-stock-bar-fill.tone-warn { background: var(--sz-warn); }
.sz-stock-bar-fill.tone-err  { background: var(--sz-err); }

.sz-stock-nums {
  font-size: 11.5px;
  font-family: var(--sz-mono);
  color: var(--sz-ink);
  white-space: nowrap;
}

.sz-stock-sep { color: var(--sz-ink4); }

.sz-stock-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  background: var(--sz-bg2);
  color: var(--sz-ink3);
}

.sz-stock-badge.tone-ok   { background: var(--sz-ok-soft);   color: var(--sz-ok); }
.sz-stock-badge.tone-warn { background: var(--sz-warn-soft); color: var(--sz-warn); }
.sz-stock-badge.tone-err  { background: var(--sz-err-soft);  color: var(--sz-err); }

/* ── Steps ── */
.sz-steps { display: grid; gap: 0; }

.sz-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding-bottom: 24px;
}

.sz-step-last { padding-bottom: 0; }

.sz-step-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sz-step-circle {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--sz-accent-soft);
  color: var(--sz-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sz-serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1;
}

.sz-step-line {
  width: 1px;
  flex: 1;
  background: var(--sz-rule);
  min-height: 16px;
}

.sz-step-body { padding-top: 2px; }

.sz-step-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sz-step-title {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sz-ink);
  letter-spacing: -.005em;
}

.sz-step-head-row .sz-step-title { margin-bottom: 0; }

.sz-step-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--sz-ink2);
  line-height: 1.55;
}

.sz-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sz-accent);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-sm);
  background: var(--sz-paper);
  transition: background .12s ease;
  white-space: nowrap;
}

.sz-ext-link:hover { background: var(--sz-paper2); }

/* ── Form elements ── */
.sz-field { display: grid; gap: 6px; }

.sz-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sz-field-head label {
  font-size: 12.5px;
  color: var(--sz-ink2);
  font-weight: 500;
  letter-spacing: .01em;
}

.sz-required { color: var(--sz-accent); margin-left: 3px; }

.sz-field-hint {
  font-size: 11.5px;
  color: var(--sz-ink3);
}

.sz-field-err {
  font-size: 11.5px;
  color: var(--sz-err);
}

.sz-input, .sz-textarea {
  width: 100%;
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-md);
  padding: 10px 12px;
  font-family: var(--sz-sans);
  font-size: 13.5px;
  color: var(--sz-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

.sz-input:hover, .sz-textarea:hover { border-color: var(--sz-rule2); }

.sz-input:focus, .sz-textarea:focus {
  border-color: var(--sz-accent);
  box-shadow: 0 0 0 3px rgba(201,100,66,.14);
  background: #fff;
}

.sz-input::placeholder, .sz-textarea::placeholder { color: var(--sz-ink4); }

.sz-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  font-family: var(--sz-sans);
}

.sz-mono { font-family: var(--sz-mono) !important; font-size: 12.5px !important; letter-spacing: -.01em; }

/* Session preview */
.sz-session-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--sz-ok-soft);
  border-radius: var(--sz-r-sm);
  font-size: 12px;
  color: var(--sz-ok);
}

.sz-session-preview.err {
  background: var(--sz-err-soft);
  color: var(--sz-err);
}

/* Search row */
.sz-search-row {
  display: flex;
  gap: 10px;
}

.sz-search-row .sz-input { flex: 1; }

/* Buttons */
.sz-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sz-sans);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--sz-r-md);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  user-select: none;
  padding: 9px 16px;
  font-size: 13.5px;
}

.sz-btn-lg { padding: 12px 22px; font-size: 14.5px; }

.sz-btn:disabled { opacity: .45; cursor: not-allowed; }
.sz-btn:not(:disabled):active { transform: translateY(.5px); }

.sz-btn-primary {
  background: var(--sz-accent);
  color: #fff;
  border-color: var(--sz-accent);
}
.sz-btn-primary:not(:disabled):hover { background: #B5573A; }

.sz-btn-ghost {
  background: transparent;
  color: var(--sz-ink2);
  border-color: transparent;
}
.sz-btn-ghost:not(:disabled):hover { background: var(--sz-bg2); }

/* Alert */
.sz-alert {
  padding: 10px 12px;
  border-radius: var(--sz-r-md);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  animation: sz-fade-up .2s ease;
}

.sz-alert-err {
  background: var(--sz-err-soft);
  color: var(--sz-err);
}

.sz-alert-ok {
  background: var(--sz-ok-soft);
  color: var(--sz-ok);
}

.sz-alert-info {
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  color: var(--sz-ink2);
}

.sz-alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.sz-alert-force-btn {
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-family: var(--sz-sans);
  font-weight: 500;
  border: 1px solid var(--sz-rule);
  border-radius: 8px;
  background: var(--sz-paper);
  color: var(--sz-ink);
  cursor: pointer;
  display: inline-block;
}
.sz-alert-force-btn:hover { background: var(--sz-paper2); }

/* ── Task Monitor ── */
.sz-task-monitor {
  margin-top: 28px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  box-shadow: var(--sz-shadow-md);
  animation: sz-fade-up .25s ease;
}

.sz-task-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--sz-rule);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sz-paper2);
}

.sz-task-head.pending { background: var(--sz-paper2); }
.sz-task-head.success { background: var(--sz-ok-soft); }
.sz-task-head.failed  { background: var(--sz-err-soft); }

.sz-task-head-main {
  flex: 1;
}

.sz-task-head-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--sz-ink);
}

.sz-task-head-sub {
  font-size: 12px;
  color: var(--sz-ink3);
  margin-top: 2px;
}

.sz-task-body { padding: 18px 22px; }

/* Progress bar */
.sz-progress-track {
  height: 6px;
  background: var(--sz-bg2);
  border-radius: 999px;
  overflow: hidden;
}

.sz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sz-accent), #E8956B);
  border-radius: 999px;
  transition: width .5s ease;
  min-width: 6%;
}

.sz-progress-stages {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sz-ink4);
}

.sz-progress-stage { transition: color .2s ease, font-weight .2s ease; }
.sz-progress-stage.active { color: var(--sz-ink2); font-weight: 500; }

.sz-progress-note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--sz-ink4);
  text-align: center;
}

/* KV */
.sz-kv {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--sz-rule);
  align-items: baseline;
  font-size: 13px;
}

.sz-kv-k { color: var(--sz-ink3); font-size: 12px; }
.sz-kv-v { color: var(--sz-ink); word-break: break-all; }
.sz-kv-v.mono { font-family: var(--sz-mono); font-size: 12px; }

.sz-copy-btn {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: var(--sz-ink3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color .12s ease;
}
.sz-copy-btn:hover { color: var(--sz-ok); }
.sz-copy-btn.copied { color: var(--sz-ok); }

/* CDK lookup result card */
.sz-lookup-card {
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-lg);
  box-shadow: var(--sz-shadow-sm);
  padding: 24px;
  animation: sz-fade-up .25s ease;
}

.sz-lookup-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.sz-lookup-card-platform {
  font-size: 11px;
  color: var(--sz-ink3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sz-lookup-card-cdk {
  font-family: var(--sz-mono);
  font-size: 12.5px;
  color: var(--sz-ink2);
  word-break: break-all;
}

/* Badge */
.sz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}

.sz-badge-ok     { background: var(--sz-ok-soft);   color: var(--sz-ok); }
.sz-badge-accent { background: var(--sz-accent-soft); color: var(--sz-accent-ink); }
.sz-badge-err    { background: var(--sz-err-soft);   color: var(--sz-err); }
.sz-badge-neutral{ background: var(--sz-bg2);        color: var(--sz-ink3); }

/* Inline note */
.sz-inline-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--sz-bg2);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--sz-ink3);
  margin-top: 14px;
  line-height: 1.5;
}

/* Inline link */
.sz-inline-link {
  color: var(--sz-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sz-inline-link:hover { opacity: .75; }

/* Inline code */
.sz-inline-code {
  font-family: var(--sz-mono);
  font-size: 12px;
  background: var(--sz-bg2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--sz-ink2);
}

/* Spinner */
.sz-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: middle;
}

/* Subscription result card */
.sz-sub-card {
  background: var(--sz-paper);
  border: 1px solid var(--sz-rule);
  border-radius: var(--sz-r-lg);
  padding: 24px;
  animation: sz-fade-up .25s ease;
}

.sz-sub-card-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.sz-sub-plan-name {
  font-family: var(--sz-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--sz-ink);
}

/* Skeleton */
.sz-skeleton {
  background: linear-gradient(90deg, var(--sz-bg2) 25%, var(--sz-rule) 50%, var(--sz-bg2) 75%);
  background-size: 200% 100%;
  animation: sz-shimmer 1.4s infinite;
  border-radius: 4px;
}

/* 品牌图标在 tab 中的尺寸统一 */
.sz-tab-brand-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* GPT / Grok 强制纯黑（saturate 先去色，brightness 压到0，contrast 拉满） */
.sz-tab-brand-dark {
  filter: saturate(0) brightness(0) contrast(100) !important;
}

/* ── Animations ── */
@keyframes sz-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sz-spin {
  to { transform: rotate(360deg); }
}

@keyframes sz-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

@keyframes sz-shimmer {
  to { background-position: -200% 0; }
}

/* ── Project switcher CDK link (store.html) ── */
.project-switcher-cdk-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 34px;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity .15s;
  flex-shrink: 0;
  align-self: center;
}
.project-switcher-cdk-link:hover { opacity: .85; }

/* ── Responsive ── */
@media (max-width: 720px) {
  .sz-shell { padding: 16px 16px 60px; }
  .sz-layout { grid-template-columns: 1fr; gap: 16px; }
  .sz-sidebar { position: static; }
  .sz-tabnav { flex-direction: row; flex-wrap: wrap; display: flex; gap: 6px; }
  .sz-tab { width: auto; flex: 0 0 auto; padding: 7px 12px; }
  .sz-tab-stock, .sz-tab-count { display: none; }
  .sz-stock-widget, .sz-help-widget { display: none; }
  .sz-sidebar-section-label, .sz-sidebar-divider { display: none; }
  .sz-page-title { font-size: 24px; }
  .sz-stock-pill { min-width: unset; width: 100%; }
}

/* no-subscription badge */
.sz-page-title .sz-nosub-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sz-accent, #c0562a);
  background: color-mix(in srgb, var(--sz-accent, #c0562a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sz-accent, #c0562a) 18%, transparent);
  border-radius: 20px;
  padding: 3px 12px;
  margin-left: 12px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
  top: -3px;
}