/* ===== 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;
}




/* Invoice channel-2 callout — solid high-contrast (dark+light) */
.sz-callout-warn {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: #3a2a12 !important;
  background-image: linear-gradient(135deg, #4a3414 0%, #3d2610 55%, #2f1c0c 100%) !important;
  border: 1.5px solid #d4a24a !important;
  box-shadow: 0 0 0 1px rgba(212,162,74,.25), 0 10px 28px rgba(0,0,0,.35) !important;
  color: #ffe7b0 !important;
  animation: sz-fade-up .22s ease;
}
.sz-callout-warn-icon {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #c9892a !important;
  color: #1a1206 !important;
  border: 1px solid #e8b85a !important;
  box-shadow: 0 2px 8px rgba(201,137,42,.35) !important;
}
.sz-callout-warn-body { min-width: 0; flex: 1; }
.sz-callout-warn-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  color: #ffe9b4 !important;
  margin-bottom: 5px !important;
  line-height: 1.35 !important;
}
.sz-callout-warn-desc {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #f0d9a0 !important;
}
.sz-callout-warn-desc strong {
  color: #fff0c8 !important;
  font-weight: 700 !important;
}

.sz-inline-note-warn {
  background: var(--sz-warn-soft);
  color: var(--sz-warn);
  border: 1px solid rgba(176, 122, 42, 0.28);
}
.sz-inline-note-warn strong { color: inherit; }

/* 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;
}


/* ============================================================
   交互动画增强 v1 (20260702) — 主按钮点击转圈 + K12 悬停发光
   ============================================================ */

/* 通用主按钮:悬停微升 + 点击加载转圈(loading = disabled 期间) */
.sz-btn-primary { position: relative; transition: background .15s ease, box-shadow .2s ease, transform .1s ease; }
.sz-btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 14px -4px rgba(201,100,66,.5); }
.sz-btn-primary:not(:disabled):active { transform: translateY(0); }
.sz-btn-primary:disabled {
  opacity: .92 !important;
  cursor: progress !important;
  color: transparent !important;
}
.sz-btn-primary:disabled svg { visibility: hidden; }
.sz-btn-primary:disabled::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: sz-spin .62s linear infinite;
}

/* K12「Join Workspace」黑底按钮:悬停白色微光 + 点击转圈 */
.szk12-join-btn { transition: background .2s ease, box-shadow .22s ease, transform .12s ease !important; }
.szk12-join-btn:hover:not(:disabled) {
  background: #000 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 8px 26px rgba(255,255,255,.20);
  transform: translateY(-1px);
}
.szk12-join-btn:active:not(:disabled) { transform: translateY(0); }
.szk12-join-btn:disabled { cursor: progress; opacity: .9; }

/* 行内 spinner(K12 按钮 innerHTML 使用) */
.sz-btn-spin {
  display: inline-block;
  width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: sz-spin .62s linear infinite;
}


/* DARK MODE (suzheai) 20260716 - token override, scoped html.theme-dark */
html.theme-dark {
  --sz-bg:#0a0a0a; --sz-bg2:#141414; --sz-paper:#161616; --sz-paper2:#1c1c1c;
  --sz-ink:#f5f5f5; --sz-ink2:#e2e2e2; --sz-ink3:#b2b2b2; --sz-ink4:#8a8a8a;
  --sz-rule:rgba(255,255,255,0.10); --sz-rule2:rgba(255,255,255,0.16);
  --sz-hair:rgba(255,255,255,0.08);
  --sz-accent:#d97757; --sz-accent-ink:#f0b49c; --sz-accent-soft:rgba(217,119,87,0.16);
  --sz-ok:#4ade80; --sz-ok-soft:rgba(74,222,128,0.14);
  --sz-warn:#e6b657; --sz-warn-soft:rgba(230,182,87,0.16);
  --sz-err:#f0836c; --sz-err-soft:rgba(240,131,108,0.16);
  --sz-shadow-sm:0 1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.35);
  --sz-shadow-md:0 1px 0 rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.6);
}
html.theme-dark .sz-body { background:#0a0a0a; }
html.theme-dark .sz-body::before {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(217,119,87,.08), transparent 42%),
    radial-gradient(circle at 90% 80%, rgba(107,163,255,.05), transparent 52%) !important;
}
/* primary buttons use var(--sz-ink) bg (now light) + #fff text -> force dark text */
html.theme-dark .sz-toast { background:#2a2a2a !important; color:#f5f5f5 !important; }
/* END DARK MODE (suzheai) */


/* SUZHE DARK GRAY ALIGN (20260716) - match store #1f1f1e */
html.theme-dark {
  --sz-bg:#1f1f1e !important; --sz-bg2:#262625 !important;
  --sz-paper:#262625 !important; --sz-paper2:#2c2c2a !important;
  --sz-rule:rgba(255,255,255,0.10) !important; --sz-rule2:rgba(255,255,255,0.16) !important;
}
html.theme-dark .sz-body { background:#1f1f1e !important; }
/* END SUZHE DARK GRAY ALIGN */

/* SUZHE TAB BLACK HOVER - gray-black interaction */
html.theme-dark .sz-tab:hover { background:#141312 !important; }
html.theme-dark .sz-tab.is-active { background:#0d0d0d !important; border-color:rgba(255,255,255,0.12) !important; box-shadow:none !important; }
/* END SUZHE TAB BLACK HOVER */


/* SUZHE R4 - softer ink (less harsh) + active-page nav accent */
html.theme-dark { --sz-ink:#e8e5df !important; --sz-ink2:#d2cec6 !important; }
html.theme-dark .sz-cdk-active-link { color:#d97757 !important; font-weight:600 !important; }
/* END SUZHE R4 */


/* ===== NAV UNIFY 20260717: account / contact / language = store gray-black ===== */
/* Kill white primary CTA on logged-in account chip (beats html.theme-dark .nav-primary-cta white) */
html.theme-dark .nav-account-menu #centerLink.nav-primary-cta-main,
html.theme-dark .nav-account-menu #accountMenuToggleBtn,
html.theme-dark .nav-account-menu .nav-primary-cta,
html.theme-dark body.store-page .nav-account-menu #centerLink.nav-primary-cta-main,
html.theme-dark body.store-page .nav-account-menu #accountMenuToggleBtn,
html.theme-dark body.pc-page .nav-account-menu #centerLink.nav-primary-cta-main,
html.theme-dark body.pc-page .nav-account-menu #accountMenuToggleBtn,
html.theme-dark body.sz-body .nav-account-menu #centerLink.nav-primary-cta-main,
html.theme-dark body.sz-body .nav-account-menu #accountMenuToggleBtn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #f5f5f5 !important;
  box-shadow: none !important;
}
html.theme-dark .nav-account-menu #centerLink.nav-primary-cta-main:hover,
html.theme-dark .nav-account-menu #accountMenuToggleBtn:hover,
html.theme-dark .nav-account-menu[data-menu-open="true"] #centerLink,
html.theme-dark .nav-account-menu[data-menu-open="true"] #accountMenuToggleBtn,
html.theme-dark body.pc-page .nav-account-menu #centerLink.nav-primary-cta-main:hover,
html.theme-dark body.pc-page .nav-account-menu #accountMenuToggleBtn:hover,
html.theme-dark body.sz-body .nav-account-menu #centerLink.nav-primary-cta-main:hover,
html.theme-dark body.sz-body .nav-account-menu #accountMenuToggleBtn:hover {
  background: rgba(0,0,0,0.50) !important;
  color: #ffffff !important;
}
/* store-page 账户按钮黑底（20260812）
   上面那组黑底只写了 pc-page / sz-body 变体，主站 body 只有 store-page，
   特异性输给基础态里的 body.store-page 规则，所以主站悬停一直没有黑底反馈。
   这里补上 store-page 变体，并把 :hover 提到外壳层——
   鼠标停在「账户」文字或右侧箭头任意一半，整颗胶囊一起变黑。 */
html.theme-dark body.store-page .nav-account-menu:hover #centerLink.nav-primary-cta-main,
html.theme-dark body.store-page .nav-account-menu:hover #accountMenuToggleBtn,
html.theme-dark body.store-page .nav-account-menu:focus-within #centerLink.nav-primary-cta-main,
html.theme-dark body.store-page .nav-account-menu:focus-within #accountMenuToggleBtn,
html.theme-dark body.store-page .nav-account-menu[data-menu-open="true"] #centerLink.nav-primary-cta-main,
html.theme-dark body.store-page .nav-account-menu[data-menu-open="true"] #accountMenuToggleBtn {
  background: rgba(0,0,0,0.50) !important;
  color: #ffffff !important;
}
html.theme-dark body.store-page .nav-account-menu:hover .nav-primary-cta-chevron,
html.theme-dark body.store-page .nav-account-menu[data-menu-open="true"] .nav-primary-cta-chevron {
  opacity: 1 !important;
}
html.theme-dark .nav-avatar {
  background: rgba(255,255,255,0.14) !important;
  color: #f5f5f5 !important;
}

/* Dropdown panels */
html.theme-dark .nav-account-card,
html.theme-dark .nav-contact-card,
html.theme-dark .nav-language-card,
html.theme-dark .nav-free-tools-card {
  background: #141414 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55) !important;
  color: #f5f5f5 !important;
}
html.theme-dark .nav-account-card-label { color: rgba(255,255,255,0.55) !important; }
html.theme-dark .nav-account-card-account,
html.theme-dark #accountMenuValue { color: #f5f5f5 !important; }

/* Menu row hover = Claude-black, NOT light gray glow */
html.theme-dark .nav-account-card-link,
html.theme-dark .nav-contact-link,
html.theme-dark .nav-language-option,
html.theme-dark .nav-free-tools-item {
  color: #f0f0f0 !important;
  background: transparent !important;
  border-radius: 8px !important;
}
html.theme-dark .nav-account-card-link:hover,
html.theme-dark .nav-account-card-link:focus-visible,
html.theme-dark .nav-contact-link:hover,
html.theme-dark .nav-contact-link:focus-visible,
html.theme-dark .nav-language-option:hover,
html.theme-dark .nav-language-option:focus-visible,
html.theme-dark .nav-free-tools-item:hover,
html.theme-dark .nav-free-tools-item:focus-visible,
html.theme-dark body.pc-page .nav-account-card-link:hover,
html.theme-dark body.sz-body .nav-account-card-link:hover {
  background: #0d0d0d !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Logout: dark red-black, no bright fill */
html.theme-dark .nav-account-card-link-danger,
html.theme-dark body.pc-page .nav-account-card-link-danger,
html.theme-dark body.sz-body .nav-account-card-link-danger {
  background: rgba(120, 40, 32, 0.22) !important;
  border: 1px solid rgba(200, 80, 60, 0.28) !important;
  color: #f0b4a8 !important;
}
html.theme-dark .nav-account-card-link-danger:hover,
html.theme-dark body.pc-page .nav-account-card-link-danger:hover,
html.theme-dark body.sz-body .nav-account-card-link-danger:hover {
  background: #1a0a08 !important;
  border-color: rgba(200, 80, 60, 0.45) !important;
  color: #ffd2c8 !important;
}

/* Topbar utility links hover also gray-black */
html.theme-dark .topbar-nav-link:hover,
html.theme-dark .nav-utility-btn:hover,
html.theme-dark .nav-link:hover {
  background: rgba(0,0,0,0.38) !important;
  border-radius: 8px;
  color: #ffffff !important;
}
/* END NAV UNIFY 20260717 */


/* ============================================================
   移动端顶栏修复 (20260718) — 内容页固定透明头会盖住内容，
   改回 sticky（回到文档流自动占位）+ 不透明背景，消除重叠
   ============================================================ */
@media (max-width:900px){
  html.theme-dark body.sz-body .topbar,
  html.theme-dark.nav-scrolled body.sz-body .topbar,
  html.theme-dark body.sz-body .topbar.is-scrolled{
    position:sticky !important; top:0 !important;
    background:#1f1f1e !important; background-color:#1f1f1e !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
}

/* 移动端背景一致 (20260719) — 内容页与桌面同为 #1f1f1e，而非落地页星空黑 */
@media (max-width:900px){
  html.theme-dark body.sz-body{ background:#1f1f1e !important; }
}

/* 优雅流光加载 (20260721) —— 充值过程动画，不暴露阶段 */
.sz-progress-track.sz-progress-indeterminate{position:relative;background:rgba(255,255,255,.05);}
.sz-progress-track.sz-progress-indeterminate .sz-progress-shine{
  position:absolute;top:0;left:-45%;height:100%;width:45%;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--sz-accent,#c25a35),#E8956B,transparent);
  box-shadow:0 0 10px 1px rgba(217,119,87,.35);
  animation:sz-indet 1.2s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes sz-indet{0%{left:-45%}60%{left:100%}100%{left:100%}}