body {
      background-color: #000000;
      color: #E2E8F0;
      -webkit-font-smoothing: antialiased;
      background-image:
        radial-gradient(1400px 700px at 50% -5%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        linear-gradient(to right, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
      background-size: 100% 100%, 32px 32px, 32px 32px;
      background-attachment: fixed;
    }

    .glass-panel {
      background: rgba(14, 14, 20, 0.65);
      backdrop-filter: blur(40px) saturate(190%);
      -webkit-backdrop-filter: blur(40px) saturate(190%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 1.25rem;
      box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-panel:hover {
      background: rgba(20, 20, 30, 0.78);
      border-color: rgba(255, 255, 255, 0.15);
      border-top-color: rgba(255, 255, 255, 0.32);
      box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .btn-solid {
      background: #FFFFFF;
      color: #000000;
      font-weight: 600;
      border-radius: 9999px;
      letter-spacing: -0.01em;
      box-shadow: 0 4px 14px -2px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-solid:hover {
      background: #F5F5F7;
      transform: translateY(-1px) scale(1.01);
      box-shadow: 0 8px 24px -4px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .btn-solid:active { transform: translateY(0) scale(0.98); }

    .btn-glass {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.22);
      color: #F1F5F9;
      border-radius: 9999px;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-glass:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.18);
      transform: translateY(-1px);
      box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .nav-tab-active {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #FFFFFF;
      font-weight: 600;
    }

    .workflow-pill-active {
      background: #FFFFFF;
      color: #000000;
      font-weight: 700;
    }

    .perspective-container {
      perspective: 1000px;
      transform-style: preserve-3d;
    }

    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

    /* 折叠区块 (渠道级管理凭据等): details/summary 自定义箭头 */
    details.fold > summary { list-style: none; cursor: pointer; }
    details.fold > summary::-webkit-details-marker { display: none; }
    details.fold > summary svg.fold-chev { transition: transform .15s ease; }
    details.fold[open] > summary svg.fold-chev { transform: rotate(90deg); }


    :root {
      --bg-primary: #030305;
      --bg-secondary: #08080c;
      --bg-elevated: #0f0f14;
      --bg-card: rgba(18, 18, 26, 0.55);
      --bg-card-hover: rgba(26, 26, 38, 0.7);

      --text-primary: #f5f5f7;
      --text-secondary: #86868b;
      --text-tertiary: #515157;

      --accent-blue: #2997ff;
      --accent-purple: #a855f7;
      --accent-cyan: #06b6d4;
      --accent-amber: #f59e0b;
      --accent-emerald: #10b981;

      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-light: rgba(255, 255, 255, 0.14);
      --border-glow: rgba(41, 151, 255, 0.3);

      --glass-blur: blur(28px);
      --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      background-color: var(--bg-primary);
      color: var(--text-primary);
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
      overflow-x: hidden;
      line-height: 1.5;
      letter-spacing: -0.015em;
    }

    ::selection {
      background: rgba(41, 151, 255, 0.3);
      color: #fff;
    }

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

    /* Top Navigation */
    .nav-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      /* 必须**低于**弹窗层: 此前是 1000, 把二次验证/确认弹窗 (130/131) 与各类弹窗
         (60-110) 全压在下面 —— 实测表现为"跳转的二次验证被顶部导航遮挡"。
         着陆页内容最高只到 z=10, 45 既在内容之上, 又让任何弹窗都能正常盖住它。
         (会员入场是原生 <dialog>, 走浏览器顶层, 不受此值影响。) */
      z-index: 45;
      background: rgba(3, 3, 5, 0.72);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-bottom: 1px solid var(--border-subtle);
      transition: all 0.4s var(--ease-apple);
    }

    .nav-inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 32px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 19px;
      letter-spacing: -0.03em;
    }

    .brand-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, #2997ff 0%, #a855f7 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 16px rgba(41, 151, 255, 0.4);
    }

    .brand-icon svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: #ffffff;
      stroke-width: 2.2;
    }

    .brand-tag {
      font-size: 11px;
      font-weight: 500;
      font-family: 'DM Mono', monospace;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      margin-left: 4px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .nav-link {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: var(--text-primary);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-family: 'DM Mono', monospace;
      color: var(--accent-emerald);
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(16, 185, 129, 0.08);
      border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-emerald);
      box-shadow: 0 0 8px var(--accent-emerald);
      animation: pulse 2s infinite ease-in-out;
    }
    .status-dot-warning {
      background: var(--accent-amber);
      box-shadow: 0 0 8px var(--accent-amber);
      animation: none;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }

    .btn-connect {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      color: #000000;
      font-size: 13.5px;
      font-weight: 600;
      padding: 8px 18px;
      border-radius: 999px;
      transition: all 0.25s var(--ease-apple);
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
      cursor: pointer;
    }

    .btn-connect:hover {
      background: #f0f0f5;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 500;
      padding: 11px 24px;
      border-radius: 999px;
      border: 1px solid var(--border-light);
      backdrop-filter: blur(12px);
      transition: all 0.25s var(--ease-apple);
      cursor: pointer;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-1px);
    }

    .btn-primary-lg {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #ffffff;
      color: #000000;
      font-size: 15px;
      font-weight: 600;
      padding: 13px 30px;
      border-radius: 999px;
      transition: all 0.3s var(--ease-apple);
      border: 1px solid #ffffff;
      box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2), 0 0 40px rgba(41, 151, 255, 0.25);
      cursor: pointer;
    }

    .btn-primary-lg:hover {
      background: #f5f5f7;
      transform: scale(1.02);
      box-shadow: 0 8px 32px rgba(255, 255, 255, 0.35), 0 0 60px rgba(41, 151, 255, 0.4);
    }

    /* Hero Section */
    .hero-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 130px 24px 60px;
      overflow: hidden;
    }

    .hero-canvas-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 980px;
      margin: 0 auto;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-light);
      margin-bottom: 28px;
      backdrop-filter: blur(16px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .hero-badge-tag {
      background: linear-gradient(135deg, #2997ff, #a855f7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
      font-family: 'DM Mono', monospace;
      font-size: 11.5px;
    }

    .hero-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(40px, 7vw, 76px);
      font-weight: 800;
      line-height: 1.06;
      letter-spacing: -0.045em;
      margin-bottom: 24px;
      background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.65) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-title .gradient-span {
      background: linear-gradient(135deg, #2997ff 0%, #9333ea 50%, #f43f5e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-subtitle {
      font-size: clamp(17px, 2.2vw, 20px);
      color: var(--text-secondary);
      font-weight: 400;
      line-height: 1.6;
      max-width: 760px;
      margin: 0 auto 38px;
      letter-spacing: -0.01em;
    }

    .hero-subtitle strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .hero-cta-group {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 56px;
    }

    .hero-specs-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--border-subtle);
      max-width: 720px;
      margin: 0 auto;
    }

    .hero-spec-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      text-align: left;
    }

    .hero-spec-value {
      font-family: 'Outfit', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.02em;
    }

    .hero-spec-label {
      font-size: 11.5px;
      color: var(--text-secondary);
      font-family: 'DM Mono', monospace;
    }

    /* Upstream Provider Marquee */
    .provider-section {
      position: relative;
      z-index: 10;
      padding: 30px 0 60px;
      border-bottom: 1px solid var(--border-subtle);
      background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 12, 0.5) 100%);
    }

    .provider-title {
      text-align: center;
      font-size: 12.5px;
      font-family: 'DM Mono', monospace;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 24px;
    }

    .provider-grid {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 16px;
      align-items: center;
    }

    .provider-chip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s var(--ease-apple);
    }

    .provider-chip:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.18);
      transform: translateY(-2px);
    }

    .provider-logo-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .dot-anthropic { background: #d97706; box-shadow: 0 0 8px rgba(217, 119, 6, 0.5); }
    .dot-openai { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
    .dot-deepseek { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); }
    .dot-google { background: #ea4335; box-shadow: 0 0 8px rgba(234, 67, 53, 0.5); }
    .dot-midjourney { background: #ec4899; box-shadow: 0 0 8px rgba(236, 72, 153, 0.5); }
    .dot-runway { background: #8b5cf6; box-shadow: 0 0 8px rgba(139, 92, 246, 0.5); }

    .provider-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      font-family: 'Space Grotesk', sans-serif;
    }

    .provider-chip:hover .provider-name {
      color: var(--text-primary);
    }

    /* Core Architectural Pillars */
    .section-container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 100px 32px;
      position: relative;
      z-index: 10;
    }

    .section-header {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 64px;
    }

    .section-tag {
      display: inline-block;
      font-size: 12px;
      font-family: 'DM Mono', monospace;
      color: var(--accent-blue);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
      padding: 4px 12px;
      background: rgba(41, 151, 255, 0.08);
      border-radius: 999px;
      border: 1px solid rgba(41, 151, 255, 0.2);
    }

    .section-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(30px, 4.5vw, 48px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.15;
      margin-bottom: 16px;
      color: #ffffff;
    }

    .section-desc {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* Feature Bento Grid */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
    }

    .bento-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 24px;
      padding: 36px;
      position: relative;
      overflow: hidden;
      transition: all 0.4s var(--ease-apple);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .bento-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-light);
      transform: translateY(-3px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(41, 151, 255, 0.08);
    }

    .card-col-8 { grid-column: span 8; }
    .card-col-4 { grid-column: span 4; }
    .card-col-6 { grid-column: span 6; }
    .card-col-12 { grid-column: span 12; }

    @media (max-width: 960px) {
      .card-col-8, .card-col-4, .card-col-6 {
        grid-column: span 12;
      }
    }

    .card-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-family: 'DM Mono', monospace;
      color: var(--accent-cyan);
      margin-bottom: 16px;
    }

    .card-title {
      font-family: 'Outfit', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
      line-height: 1.25;
    }

    .card-desc {
      font-size: 14.5px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 24px;
    }

    /* Live Interactive Gateway Console */
    .gateway-console {
      background: #09090e;
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .console-header {
      background: rgba(255, 255, 255, 0.03);
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .console-dots {
      display: flex;
      gap: 6px;
    }

    .console-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
    }

    .console-title {
      font-family: 'DM Mono', monospace;
      font-size: 11.5px;
      color: var(--text-secondary);
    }

    .console-body {
      padding: 16px;
      font-family: 'DM Mono', monospace;
      font-size: 12.5px;
      line-height: 1.7;
      color: #e2e8f0;
      overflow-x: auto;
    }

    .code-comment { color: var(--text-tertiary); }
    .code-keyword { color: #f43f5e; font-weight: 600; }
    .code-string { color: #34d399; }
    .code-prop { color: #38bdf8; }
    .code-highlight { color: #fbbf24; }

    /* Docs copy button (代码块右上角复制) */
    .docs-copy-btn {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 10px;
      font-family: 'DM Mono', monospace;
      padding: 2px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.55);
      cursor: pointer;
      transition: all 0.15s ease;
      z-index: 2;
    }
    .docs-copy-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
    .docs-toc-item.active { color: var(--th-accent, #2997ff) !important; background: color-mix(in srgb, var(--th-accent, #2997ff) 10%, transparent); }

    /* Model Routing Matrix Table */
    .matrix-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      margin-top: 16px;
    }

    .matrix-table-shell {
      width: 100%;
      overflow-x: auto;
    }

    .matrix-table th {
      text-align: left;
      padding: 10px 14px;
      font-size: 11.5px;
      font-family: 'DM Mono', monospace;
      color: var(--text-tertiary);
      border-bottom: 1px solid var(--border-subtle);
    }

    .matrix-table td {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
    }

    .matrix-table tr:hover td {
      background: rgba(255, 255, 255, 0.02);
      color: var(--text-primary);
    }

    .landing-model-catalog-footer {
      display: flex;
      justify-content: flex-end;
      padding-top: 18px;
      margin-top: 6px;
      border-top: 1px solid var(--border-subtle);
    }

    .landing-model-catalog-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--accent-blue);
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .landing-model-catalog-link:hover {
      color: #8cc8ff;
    }

    .landing-model-catalog-link svg {
      width: 15px;
      height: 15px;
    }

    .model-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      color: var(--text-primary);
      font-family: 'Space Grotesk', sans-serif;
    }

    .latency-tag {
      font-family: 'DM Mono', monospace;
      font-size: 11.5px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(16, 185, 129, 0.1);
      color: var(--accent-emerald);
      border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .status-active {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      color: #38bdf8;
      font-family: 'DM Mono', monospace;
    }

    /* Verification Shield Graphic */
    .shield-box {
      background: linear-gradient(145deg, rgba(16, 185, 129, 0.05), rgba(41, 151, 255, 0.05));
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 16px;
    }

    .shield-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .shield-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(16, 185, 129, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-emerald);
      flex-shrink: 0;
    }

    .shield-text h4 {
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 2px;
    }

    .shield-text p {
      font-size: 12.5px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* Creative Suite Section */
    .creative-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    @media (max-width: 860px) {
      .nav-inner {
        height: 58px;
        padding: 0 16px;
        gap: 12px;
      }

      .nav-links,
      .status-pill {
        display: none;
      }

      .brand {
        gap: 8px;
        min-width: 0;
        font-size: 16px;
      }

      .brand-tag {
        display: none;
      }

      .btn-connect {
        padding: 7px 12px;
        font-size: 12px;
      }

      .creative-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .section-container {
        padding-right: 16px;
        padding-left: 16px;
      }

      .bento-card {
        padding: 24px;
      }

      .matrix-table {
        min-width: 520px;
      }
    }

    .creative-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 20px;
      padding: 30px;
      transition: all 0.3s var(--ease-apple);
    }

    .creative-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-light);
      transform: translateY(-3px);
    }

    .creative-icon-wrap {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: var(--accent-blue);
    }

    .creative-card:nth-child(2) .creative-icon-wrap { color: var(--accent-purple); }
    .creative-card:nth-child(3) .creative-icon-wrap { color: var(--accent-cyan); }

    .creative-card h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 10px;
    }

    .creative-card p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .model-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .m-tag {
      font-size: 11px;
      font-family: 'DM Mono', monospace;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
    }

    /* Connection CTA Banner */
    .cta-banner {
      background: radial-gradient(circle at 50% 0%, rgba(41, 151, 255, 0.15), rgba(8, 8, 12, 0.8) 70%);
      border: 1px solid rgba(41, 151, 255, 0.25);
      border-radius: 32px;
      padding: 80px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(41, 151, 255, 0.15);
    }

    .cta-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800;
      letter-spacing: -0.035em;
      margin-bottom: 18px;
      color: #ffffff;
    }

    .cta-desc {
      font-size: 17px;
      color: var(--text-secondary);
      max-width: 600px;
      margin: 0 auto 36px;
      line-height: 1.6;
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--border-subtle);
      padding: 60px 32px;
      background: #020204;
      font-size: 13px;
      color: var(--text-tertiary);
    }

    .footer-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    .footer-legal {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .footer-legal a:hover {
      color: var(--text-secondary);
    }


    /* ==========================================================================
       APPLE PRO CONSOLE DESIGN SYSTEM (Internal App Components)
       ========================================================================== */
    .input-apple {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
      border-radius: 12px !important;
      color: #FFFFFF !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .input-apple::placeholder { color: rgba(255, 255, 255, 0.28); }
    .input-apple:focus {
      outline: none !important;
      background: rgba(255, 255, 255, 0.08) !important;
      border-color: rgba(41, 151, 255, 0.55) !important;
      box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    select.input-apple option { background: #101016; color: #fff; }

    /* Apple Bento metric card */
    .bento-metric {
      background: linear-gradient(160deg, rgba(24, 24, 34, 0.72), rgba(12, 12, 18, 0.82));
      backdrop-filter: blur(36px) saturate(180%);
      -webkit-backdrop-filter: blur(36px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 22px 24px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .bento-metric:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.13);
      border-top-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 32px 70px -14px rgba(0, 0, 0, 1);
    }
    .bento-metric::after {
      content: '';
      position: absolute;
      top: -60%;
      right: -20%;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle, var(--metric-glow, rgba(41, 151, 255, 0.14)) 0%, transparent 70%);
      pointer-events: none;
    }
    .bento-label {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: 'DM Mono', monospace;
      color: rgba(255, 255, 255, 0.42);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bento-value {
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      font-size: 30px;
      letter-spacing: -0.03em;
      line-height: 1;
      color: #FFFFFF;
    }

    /* Apple data table */
    .table-apple thead tr { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
    .table-apple thead th {
      font-family: 'DM Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.38);
      font-weight: 500;
      padding: 12px 16px;
    }
    .table-apple tbody td { padding: 14px 16px; vertical-align: middle; }
    .table-apple tbody tr {
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      transition: background 0.2s ease;
    }
    .table-apple tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
    .table-apple tbody tr:last-child { border-bottom: none; }

    /* Apple modal shell */
    .modal-apple {
      background: rgba(18, 18, 26, 0.88) !important;
      backdrop-filter: blur(50px) saturate(200%) !important;
      -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
      border-radius: 24px !important;
      box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    /* Apple status badges */
    .badge-apple {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 9999px;
      letter-spacing: 0.04em;
      border: 1px solid transparent;
    }
    .badge-green { background: rgba(52, 211, 153, 0.12); color: #34D399; border-color: rgba(52, 211, 153, 0.3); }
    .badge-blue { background: rgba(41, 151, 255, 0.12); color: #64B5FF; border-color: rgba(41, 151, 255, 0.3); }
    .badge-amber { background: rgba(245, 158, 11, 0.12); color: #FBBF24; border-color: rgba(245, 158, 11, 0.32); }
    .badge-red { background: rgba(244, 63, 94, 0.12); color: #FB7185; border-color: rgba(244, 63, 94, 0.32); }
    .badge-gray { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.12); }

    /* Refined scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 6px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

    /* Header user capsule (Dynamic Island style) */
    .user-capsule {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 5px 6px 5px 5px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 9999px;
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      cursor: pointer;
      position: relative;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }
    .user-capsule:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }
    .user-avatar-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2997ff 0%, #a855f7 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: white;
      font-family: 'Outfit', sans-serif;
      flex-shrink: 0;
      box-shadow: 0 0 12px rgba(41, 151, 255, 0.45);
    }
    .user-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 220px;
      background: rgba(20, 20, 28, 0.92);
      backdrop-filter: blur(50px) saturate(200%);
      -webkit-backdrop-filter: blur(50px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.26);
      border-radius: 18px;
      padding: 6px;
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px) scale(0.97);
      transform-origin: top right;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 30px 80px -16px rgba(0, 0, 0, 1);
    }
    .user-capsule.open .user-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 12.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.78);
      cursor: pointer;
      border: none;
      background: transparent;
      text-align: left;
      transition: all 0.15s ease;
    }
    .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
    .dropdown-sep { height: 1px; margin: 5px 10px; background: rgba(255, 255, 255, 0.07); }


    /* Apple Auth Modal */
    .auth-field {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 16px;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 14px;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: text;
    }
    /* `.auth-field` owns the layout display value, so make mode-controlled
       fields explicitly win over that rule when hidden. */
    .auth-field.hidden { display: none !important; }
    .auth-field:focus-within {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(41, 151, 255, 0.6);
      box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.13);
    }
    @keyframes authCardIn {
      from { opacity: 0; transform: translateY(16px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }


    /* ==========================================================================
       MULTI-THEME SYSTEM (Obsidian / Pearl / Midnight / Aurora)
       ========================================================================== */
    :root, html[data-theme="obsidian"] {
      --th-bg: #030305;
      --th-bg-2: #08080c;
      --th-card: rgba(15, 16, 21, 0.88);
      --th-card-hover: rgba(24, 26, 33, 0.96);
      --th-text: #f5f5f7;
      --th-text-2: #86868b;
      --th-text-secondary: #d4d4d8;
      --th-text-muted: #a1a1aa;
      --th-surface-subtle: rgba(255, 255, 255, 0.035);
      --th-surface-muted: rgba(255, 255, 255, 0.07);
      --th-border: rgba(255, 255, 255, 0.08);
      --th-border-top: rgba(255, 255, 255, 0.22);
      --th-accent: #2997ff;
      --th-accent-2: #34d399;
      --th-success: #34d399;
      --th-warning: #fbbf24;
      --th-danger: #fb7185;
      --th-info: #38bdf8;
      --th-overlay: rgba(0, 0, 0, 0.68);
      --th-grid: rgba(255, 255, 255, 0.05);
      --th-glass: rgba(3, 3, 5, 0.72);
      --th-input-bg: rgba(255, 255, 255, 0.05);
      --th-logo-grad: linear-gradient(135deg, #10131a 0%, #2997ff 68%, #7dd3fc 100%);
      --th-hero-glow-1: rgba(41, 151, 255, 0.16);
      --th-hero-glow-2: rgba(125, 211, 252, 0.08);
    }

    /* ---------- PEARL: Apple light mode ---------- */
    html[data-theme="pine-green"] {
      --th-bg: #f5f5f7;
      --th-bg-2: #ffffff;
      --th-card: rgba(255, 255, 255, 0.75);
      --th-card-hover: rgba(255, 255, 255, 0.95);
      --th-text: #1d1d1f;
      --th-text-2: #6e6e73;
      --th-text-secondary: #48484a;
      --th-text-muted: #6e6e73;
      --th-surface-subtle: #f2f2f4;
      --th-surface-muted: #e8e8ed;
      --th-border: rgba(0, 0, 0, 0.08);
      --th-border-top: rgba(255, 255, 255, 0.9);
      --th-accent: #0071e3;
      --th-accent-2: #8944ab;
      --th-success: #047857;
      --th-warning: #a16207;
      --th-danger: #be123c;
      --th-info: #0369a1;
      --th-overlay: rgba(29, 29, 31, 0.28);
      --th-grid: rgba(0, 0, 0, 0.06);
      --th-glass: rgba(255, 255, 255, 0.78);
      --th-input-bg: rgba(0, 0, 0, 0.04);
      --th-logo-grad: linear-gradient(135deg, #0071e3 0%, #7c5cff 55%, #8944ab 100%);
      --th-hero-glow-1: rgba(0, 113, 227, 0.12);
      --th-hero-glow-2: rgba(137, 68, 171, 0.08);
    }

    /* ---------- TITANIUM: Apple Pro Deep Titanium ---------- */
    html[data-theme="graphite-amber"] {
      --th-bg: #121214;
      --th-bg-2: #1c1c1f;
      --th-card: rgba(28, 28, 32, 0.65);
      --th-card-hover: rgba(38, 38, 44, 0.85);
      --th-text: #f2f2f5;
      --th-text-2: #98989f;
      --th-text-secondary: #d7d7dc;
      --th-text-muted: #b0b0b8;
      --th-surface-subtle: rgba(255, 255, 255, 0.04);
      --th-surface-muted: rgba(255, 255, 255, 0.08);
      --th-border: rgba(255, 255, 255, 0.1);
      --th-border-top: rgba(255, 255, 255, 0.26);
      --th-accent: #38bdf8;
      --th-accent-2: #cbd5e1;
      --th-success: #34d399;
      --th-warning: #fbbf24;
      --th-danger: #fb7185;
      --th-info: #38bdf8;
      --th-overlay: rgba(0, 0, 0, 0.72);
      --th-grid: rgba(255, 255, 255, 0.06);
      --th-glass: rgba(18, 18, 20, 0.82);
      --th-input-bg: rgba(255, 255, 255, 0.05);
      --th-logo-grad: linear-gradient(135deg, #f2f2f5 0%, #cbd5e1 55%, #38bdf8 100%);
      --th-hero-glow-1: rgba(56, 189, 248, 0.15);
      --th-hero-glow-2: rgba(203, 213, 225, 0.1);
    }

    /* 全局暗色与浅色自适应组件层 (消除死黑/死白残留) */
    html[data-theme="graphite-amber"] body,
    html[data-theme="obsidian"] body {
      background-color: var(--th-bg);
      color: var(--th-text);
    }

    html[data-theme="graphite-amber"] .glass-panel,
    html[data-theme="graphite-amber"] .modal-apple {
      background: var(--th-card);
      border-color: var(--th-border);
      border-top-color: var(--th-border-top);
      color: var(--th-text);
    }

    html[data-theme="graphite-amber"] .nav-subbar,
    html[data-theme="graphite-amber"] #app-header-bar {
      background: var(--th-glass);
      border-bottom-color: var(--th-border);
    }

    /* 修复写死的 bg-black / bg-[#0B0E14] / bg-[#161617] 在各主题下的表现 */
    html:not([data-theme="obsidian"]) .bg-black\/50,
    html:not([data-theme="obsidian"]) .bg-black\/60,
    html:not([data-theme="obsidian"]) .bg-black\/80,
    html:not([data-theme="obsidian"]) .bg-black\/85,
    html:not([data-theme="obsidian"]) .bg-black\/90 {
      background-color: var(--th-input-bg) !important;
      border-color: var(--th-border) !important;
    }

    html[data-theme="pine-green"] .bg-black\/50,
    html[data-theme="pine-green"] .bg-black\/60,
    html[data-theme="pine-green"] .bg-black\/80,
    html[data-theme="pine-green"] .bg-black\/85,
    html[data-theme="pine-green"] .bg-black\/90 {
      background-color: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: #1d1d1f !important;
    }

    html[data-theme="pine-green"] #system-status-bar,
    html[data-theme="pine-green"] #acct-batch-bar,
    html[data-theme="pine-green"] #channels-batch-bar {
      background-color: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      color: #1d1d1f !important;
    }

    html[data-theme="pine-green"] select.input-apple,
    html[data-theme="pine-green"] select {
      color: #1d1d1f !important;
      background-color: #ffffff !important;
    }


    /* ==========================================================================
       NEW-API STYLE SIDEBAR & WORKSPACE LAYOUT (经典专业侧边栏布局)
       ========================================================================== */
    .console-layout {
      display: flex;
      min-height: calc(100vh - 4rem);
      width: 100%;
      position: relative;
    }

    .console-sider {
      width: 220px;
      min-width: 220px;
      background: var(--th-glass);
      border-right: 1px solid var(--th-border);
      backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease;
      z-index: 35;
      user-select: none;
      position: sticky;
      top: 4rem;
      height: calc(100vh - 4rem);
    }

    .console-sider.collapsed {
      width: 64px;
      min-width: 64px;
    }

    .sider-group-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--th-text-secondary, var(--th-text-2));
      opacity: 1;
      padding: 0.75rem 1rem 0.35rem 1rem;
      white-space: nowrap;
      overflow: hidden;
      transition: opacity 0.2s;
    }

    /* 分组标题着色变体: 提到全亮度 (原 /80 透明度过暗) */
    .sider-group-title.text-amber-300\/80 { color: #fcd34d; }
    .sider-group-title.text-rose-300\/80 { color: #fda4af; }
    .sider-group-title.text-white\/50 { color: var(--th-text-secondary, var(--th-text-2)); }

    .console-sider.collapsed .sider-group-title {
      opacity: 0;
      height: 0;
      padding: 0;
      margin: 0;
    }

    /* 全局可读性: 控制台小字号整体上调 (反馈: 字太小看不清) */
    [class*="text-[9"], [class*="text-[10"] { font-size: 12px !important; }
    [class*="text-[11"] { font-size: 13px !important; }
    [class*="text-[12"] { font-size: 13.5px !important; }
    .text-xs { font-size: 13px !important; }

    .sider-nav-item {
      display: flex;
      width: calc(100% - 1rem);
      align-items: center;
      gap: 0.75rem;
      padding: 0.55rem 0.85rem;
      margin: 0.15rem 0.5rem;
      border-radius: 0.65rem;
      color: var(--th-text-secondary, var(--th-text-2));
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.18s ease;
      white-space: nowrap;
      text-decoration: none;
      border: 1px solid transparent;
      position: relative;
      text-align: left;
    }

    .sider-nav-item:hover {
      color: var(--th-text);
      background: rgba(255, 255, 255, 0.05);
    }

    html[data-theme="pine-green"] .sider-nav-item:hover {
      background: rgba(0, 0, 0, 0.05);
      color: var(--th-text);
    }

    .sider-nav-item.active {
      color: #ffffff;
      background: var(--th-accent);
      font-weight: 600;
      box-shadow: 0 4px 14px rgba(41, 151, 255, 0.3);
    }

    html[data-theme="pine-green"] .sider-nav-item.active {
      color: #ffffff;
      background: #0071e3;
    }

    .sider-nav-item i {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .console-sider.collapsed .sider-nav-item {
      justify-content: center;
      padding: 0.6rem 0;
      margin: 0.2rem 0.35rem;
    }

    .console-sider.collapsed .sider-nav-item span.nav-text {
      display: none;
    }

    .sider-footer-toggle {
      border-top: 1px solid var(--th-border);
      padding: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .console-sider.collapsed .sider-footer-toggle {
      justify-content: center;
    }

    .console-sider.collapsed .sider-footer-text {
      display: none;
    }

    .console-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    /* ---- Theme application layer (overrides hardcoded values) ---- */
    html[data-theme="pine-green"] body {
      background-color: var(--th-bg);
      color: var(--th-text);
      background-image:
        radial-gradient(1400px 700px at 50% -5%, rgba(0, 113, 227, 0.06) 0%, transparent 60%),
        linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    }
    html[data-theme="pine-green"] .glass-panel,
    html[data-theme="pine-green"] .modal-apple {
      background: rgba(255, 255, 255, 0.82);
      border-color: rgba(0, 0, 0, 0.07);
      border-top-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    html[data-theme="pine-green"] .glass-panel:hover { border-color: rgba(0, 0, 0, 0.13); }
    html[data-theme="pine-green"] .nav-container,
    html[data-theme="pine-green"] #app-header-bar {
      background: rgba(255, 255, 255, 0.8);
      border-bottom-color: rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    }
    html[data-theme="pine-green"] .brand, html[data-theme="pine-green"] .nav-link:hover,
    html[data-theme="pine-green"] .hero-title, html[data-theme="pine-green"] .bento-value,
    html[data-theme="pine-green"] h1, html[data-theme="pine-green"] h2, html[data-theme="pine-green"] h3 { color: var(--th-text) !important; }
    html[data-theme="pine-green"] .nav-link, html[data-theme="pine-green"] .brand-tag { color: var(--th-text-2); }
    html[data-theme="pine-green"] .hero-subtitle, html[data-theme="pine-green"] .section-desc,
    html[data-theme="pine-green"] .card-desc, html[data-theme="pine-green"] .creative-card p { color: var(--th-text-2) !important; }
    html[data-theme="pine-green"] .btn-connect { background: #0071e3; color: #fff; border-color: #0071e3; box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35); }
    html[data-theme="pine-green"] .btn-connect:hover { background: #0077ed; }
    html[data-theme="pine-green"] .btn-solid { background: #0071e3; color: #fff; box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35); }
    html[data-theme="pine-green"] .btn-solid:hover { background: #0077ed; }
    html[data-theme="pine-green"] .btn-glass { background: rgba(0, 0, 0, 0.045); border-color: rgba(0, 0, 0, 0.09); border-top-color: rgba(255, 255, 255, 0.8); color: #1d1d1f; }
    html[data-theme="pine-green"] .input-apple,
    html[data-theme="pine-green"] .auth-field {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.1) !important;
      border-top-color: rgba(255, 255, 255, 0.8) !important;
    }
    html[data-theme="pine-green"] .input-apple::placeholder, html[data-theme="pine-green"] .auth-field input::placeholder { color: rgba(0, 0, 0, 0.35); }
    html[data-theme="pine-green"] .input-apple, html[data-theme="pine-green"] .auth-field input { color: #1d1d1f !important; }
    html[data-theme="pine-green"] .user-capsule { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); }
    html[data-theme="pine-green"] .user-dropdown { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); }
    html[data-theme="pine-green"] .user-dropdown .dropdown-item { color: #3a3a3c; }
    html[data-theme="pine-green"] .user-dropdown .dropdown-item:hover { background: rgba(0, 0, 0, 0.06); color: #000; }
    html[data-theme="pine-green"] .bento-metric { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.07); border-top-color: rgba(255, 255, 255, 0.95); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.12); }
    html[data-theme="pine-green"] .bento-value { color: #1d1d1f; }
    html[data-theme="pine-green"] .bento-label { color: rgba(0, 0, 0, 0.45); }
    html[data-theme="pine-green"] .table-apple tbody td, html[data-theme="pine-green"] td, html[data-theme="pine-green"] .text-white { color: var(--th-text); }
    html[data-theme="pine-green"] .table-apple thead th { color: rgba(0, 0, 0, 0.45); }
    html[data-theme="pine-green"] .table-apple tbody tr:hover { background: rgba(0, 0, 0, 0.035); }
    html[data-theme="pine-green"] .auth-card-title-fix, html[data-theme="pine-green"] #login-modal h3,
    html[data-theme="pine-green"] #login-modal .text-white, html[data-theme="pine-green"] #login-modal input { color: #1d1d1f !important; }
    html[data-theme="pine-green"] #login-modal { background: rgba(245, 245, 247, 0.55); }
    html[data-theme="pine-green"] #login-modal .modal-apple { background: rgba(255, 255, 255, 0.9) !important; }
    html[data-theme="pine-green"] #login-modal .auth-field i { color: rgba(0, 0, 0, 0.35); }
    html[data-theme="pine-green"] ::selection { background: rgba(0, 113, 227, 0.2); color: #000; }
    html[data-theme="pine-green"] .status-pill { color: #0071e3; background: rgba(0, 113, 227, 0.07); border-color: rgba(0, 113, 227, 0.2); }
    html[data-theme="pine-green"] .status-dot { background: #0071e3; box-shadow: 0 0 8px rgba(0, 113, 227, 0.6); }

    /* Midnight & Aurora: tint accents + logo */
    html[data-theme="graphite-amber"] .brand-icon,
    html[data-theme="graphite-amber"] .user-avatar-dot,
    html[data-theme="graphite-amber"] #app-header-bar .w-8.h-8 { background: var(--th-logo-grad) !important; box-shadow: 0 0 16px rgba(77, 163, 255, 0.5) !important; }
    html[data-theme="graphite-amber"] body { background-image: radial-gradient(1400px 700px at 50% -5%, rgba(77, 163, 255, 0.07) 0%, transparent 60%); }
    html[data-theme="graphite-amber"] .btn-connect { background: #4da3ff; border-color: #4da3ff; }
    html[data-theme="graphite-amber"] .btn-connect:hover { background: #63b0ff; }

    html[data-theme="pine-green"] .brand-icon,
    html[data-theme="pine-green"] .user-avatar-dot,
    html[data-theme="pine-green"] #app-header-bar .w-8.h-8 { background: var(--th-logo-grad) !important; box-shadow: 0 0 16px rgba(52, 211, 153, 0.5) !important; }
    html[data-theme="pine-green"] body { background-image: radial-gradient(1400px 700px at 50% -5%, rgba(52, 211, 153, 0.07) 0%, transparent 60%); }
    html[data-theme="pine-green"] .btn-connect { background: #34d399; border-color: #34d399; color: #04120d; }
    html[data-theme="pine-green"] .btn-connect:hover { background: #4ce0b0; }

    /* Theme switcher UI */
    .theme-switcher { position: relative; }
    .theme-trigger {
      width: 34px; height: 34px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-top-color: rgba(255,255,255,0.22);
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      color: rgba(255,255,255,0.75);
    }
    .theme-trigger:hover { background: rgba(255,255,255,0.12); transform: rotate(30deg); }
    .theme-menu {
      position: absolute; top: calc(100% + 10px); right: 0;
      min-width: 190px;
      background: var(--th-glass, rgba(20, 20, 28, 0.92));
      backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%);
      border: 1px solid var(--th-border, rgba(255,255,255,0.1));
      border-top: 1px solid var(--th-border-top, rgba(255,255,255,0.26));
      border-radius: 16px; padding: 6px; z-index: 200;
      opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97);
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 30px 80px -16px rgba(0, 0, 0, 0.9);
    }
    .theme-switcher.open .theme-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    .theme-option {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 12px; border-radius: 11px;
      font-size: 12.5px; font-weight: 500; color: var(--th-text-2, rgba(255,255,255,0.75));
      cursor: pointer; border: none; background: transparent; text-align: left;
      transition: all 0.15s ease;
    }
    .theme-option:hover { background: rgba(255,255,255,0.08); color: var(--th-text, #fff); }
    html[data-theme="pine-green"] .theme-option:hover { background: rgba(0,0,0,0.06); color: #000; }
    .theme-option.active { color: var(--th-text, #fff); }
    html[data-theme="pine-green"] .theme-option.active { color: #000; }
    .theme-swatch {
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.25);
      box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
    }
    .theme-option .check-icon { margin-left: auto; opacity: 0; transition: opacity 0.15s; color: var(--th-accent, #2997ff); }
    .theme-option.active .check-icon { opacity: 1; }


    /* ==========================================================================
       PEARL THEME: Complete contrast compatibility layer
       Dark-theme opacity utilities are mapped to light-theme semantic tokens.
       All text colors below meet WCAG AA on #fff and the Pearl canvas.
       ========================================================================== */
    html[data-theme="pine-green"] .text-white\/90,
    html[data-theme="pine-green"] .text-white\/85,
    html[data-theme="pine-green"] .text-white\/80,
    html[data-theme="pine-green"] .text-white\/75,
    html[data-theme="pine-green"] .text-white\/70,
    html[data-theme="pine-green"] .text-white\/65,
    html[data-theme="pine-green"] .text-white\/60 { color: var(--th-text-secondary) !important; }

    html[data-theme="pine-green"] .text-white\/55,
    html[data-theme="pine-green"] .text-white\/50,
    html[data-theme="pine-green"] .text-white\/45,
    html[data-theme="pine-green"] .text-white\/40 { color: #5f6368 !important; }

    html[data-theme="pine-green"] .text-white\/35,
    html[data-theme="pine-green"] .text-white\/30,
    html[data-theme="pine-green"] .text-white\/25,
    html[data-theme="pine-green"] .text-white\/20 { color: var(--th-text-muted) !important; }

    html[data-theme="pine-green"] .bg-black\/20,
    html[data-theme="pine-green"] .bg-black\/25,
    html[data-theme="pine-green"] .bg-black\/30,
    html[data-theme="pine-green"] .bg-black\/40,
    html[data-theme="pine-green"] .bg-black\/45,
    html[data-theme="pine-green"] .bg-black\/50 { background-color: var(--th-surface-subtle) !important; }

    html[data-theme="pine-green"] .bg-black\/80,
    html[data-theme="pine-green"] .bg-black\/85,
    html[data-theme="pine-green"] .bg-black\/90 { background-color: rgba(255, 255, 255, 0.94) !important; }

    html[data-theme="pine-green"] .fixed.inset-0.bg-black\/80,
    html[data-theme="pine-green"] .fixed.inset-0.bg-black\/85 { background-color: rgba(29, 29, 31, 0.28) !important; }

    html[data-theme="pine-green"] .bg-white\/\[0\.02\],
    html[data-theme="pine-green"] .bg-white\/\[0\.025\],
    html[data-theme="pine-green"] .bg-white\/\[0\.03\],
    html[data-theme="pine-green"] .bg-white\/\[0\.035\],
    html[data-theme="pine-green"] .bg-white\/\[0\.04\],
    html[data-theme="pine-green"] .bg-white\/\[0\.05\] { background-color: var(--th-surface-subtle) !important; }

    html[data-theme="pine-green"] .bg-white\/\[0\.06\],
    html[data-theme="pine-green"] .bg-white\/\[0\.07\],
    html[data-theme="pine-green"] .bg-white\/\[0\.08\],
    html[data-theme="pine-green"] .bg-white\/10 { background-color: var(--th-surface-muted) !important; }

    html[data-theme="pine-green"] .bg-white\/\[0\.14\],
    html[data-theme="pine-green"] .bg-white\/15,
    html[data-theme="pine-green"] .bg-white\/20,
    html[data-theme="pine-green"] .bg-white\/25,
    html[data-theme="pine-green"] .bg-white\/30 { background-color: #dcdce1 !important; }

    html[data-theme="pine-green"] .border-white\/\[0\.04\],
    html[data-theme="pine-green"] .border-white\/\[0\.06\],
    html[data-theme="pine-green"] .border-white\/\[0\.07\],
    html[data-theme="pine-green"] .border-white\/\[0\.08\],
    html[data-theme="pine-green"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.10) !important; }

    html[data-theme="pine-green"] .border-white\/\[0\.1\],
    html[data-theme="pine-green"] .border-white\/\[0\.12\],
    html[data-theme="pine-green"] .border-white\/\[0\.15\] { border-color: rgba(0, 0, 0, 0.16) !important; }

    html[data-theme="pine-green"] .text-cyan-400 { color: #0e7490 !important; }        /* cyan-600 */
    html[data-theme="pine-green"] .text-cyan-300 { color: #155e75 !important; }        /* cyan-700 */
    html[data-theme="pine-green"] .text-cyan-300\/60,
    html[data-theme="pine-green"] .text-cyan-300\/70,
    html[data-theme="pine-green"] .text-cyan-300\/80,
    html[data-theme="pine-green"] .text-cyan-200,
    html[data-theme="pine-green"] .text-cyan-200\/80 { color: #155e75 !important; }
    html[data-theme="pine-green"] .text-amber-300 { color: #b45309 !important; }       /* amber-700 */
    html[data-theme="pine-green"] .text-amber-400 { color: #92400e !important; }       /* amber-800 */
    html[data-theme="pine-green"] .text-amber-300\/60,
    html[data-theme="pine-green"] .text-amber-300\/70,
    html[data-theme="pine-green"] .text-amber-300\/80,
    html[data-theme="pine-green"] .text-amber-200,
    html[data-theme="pine-green"] .text-amber-200\/80 { color: #92400e !important; }
    html[data-theme="pine-green"] .text-emerald-400 { color: #047857 !important; }     /* emerald-700 */
    html[data-theme="pine-green"] .text-emerald-300 { color: #065f46 !important; }     /* emerald-800 */
    html[data-theme="pine-green"] .text-blue-400 { color: #1d4ed8 !important; }        /* blue-700 */
    html[data-theme="pine-green"] .text-blue-300 { color: #1e40af !important; }        /* blue-800 */
    html[data-theme="pine-green"] .text-purple-400 { color: #7e22ce !important; }      /* purple-700 */
    html[data-theme="pine-green"] .text-purple-300 { color: #6b21a8 !important; }      /* purple-800 */
    html[data-theme="pine-green"] .text-rose-400 { color: #be123c !important; }        /* rose-700 */
    html[data-theme="pine-green"] .text-rose-300 { color: #9f1239 !important; }        /* rose-800 */
    html[data-theme="pine-green"] .text-rose-300\/70,
    html[data-theme="pine-green"] .text-rose-300\/80,
    html[data-theme="pine-green"] .text-rose-200,
    html[data-theme="pine-green"] .text-rose-200\/80 { color: #9f1239 !important; }
    html[data-theme="pine-green"] .text-green-400 { color: #15803d !important; }
    html[data-theme="pine-green"] .text-yellow-400 { color: #a16207 !important; }
    html[data-theme="pine-green"] .text-orange-400 { color: #c2410c !important; }
    html[data-theme="pine-green"] .text-red-400 { color: #b91c1c !important; }
    html[data-theme="pine-green"] .text-indigo-400 { color: #4338ca !important; }
    html[data-theme="pine-green"] .text-sky-400 { color: #0369a1 !important; }
    html[data-theme="pine-green"] .text-sky-300 { color: #075985 !important; }
    html[data-theme="pine-green"] .text-teal-400 { color: #0f766e !important; }
    html[data-theme="pine-green"] .text-violet-400 { color: #6d28d9 !important; }
    html[data-theme="pine-green"] .text-slate-300 { color: #4b5563 !important; }
    html[data-theme="pine-green"] .text-slate-400 { color: #6b7280 !important; }
    html[data-theme="pine-green"] .text-orange-300 { color: #c2410c !important; }

    html[data-theme="pine-green"] .hover\:text-white:hover { color: var(--th-text) !important; }
    html[data-theme="pine-green"] .hover\:text-cyan-200:hover,
    html[data-theme="pine-green"] .hover\:text-cyan-300:hover,
    html[data-theme="pine-green"] .hover\:text-cyan-400:hover { color: #164e63 !important; }
    html[data-theme="pine-green"] .hover\:text-amber-200:hover,
    html[data-theme="pine-green"] .hover\:text-amber-300:hover { color: #78350f !important; }
    html[data-theme="pine-green"] .hover\:text-rose-200:hover,
    html[data-theme="pine-green"] .hover\:text-rose-400:hover { color: #881337 !important; }
    html[data-theme="pine-green"] .hover\:text-blue-300:hover { color: #1e3a8a !important; }
    html[data-theme="pine-green"] .hover\:text-emerald-300:hover,
    html[data-theme="pine-green"] .hover\:text-emerald-400:hover { color: #064e3b !important; }

    html[data-theme="pine-green"] .placeholder\:text-white\/20::placeholder,
    html[data-theme="pine-green"] .placeholder\:text-white\/25::placeholder,
    html[data-theme="pine-green"] .placeholder\:text-white\/30::placeholder {
      color: var(--th-text-muted) !important;
      opacity: 1;
    }

    /* Inline colors are used by a few legacy/dynamic surfaces; semantic classes
       below keep those surfaces readable without changing the dark themes. */
    html[data-theme="pine-green"] [style*="color:#fff"],
    html[data-theme="pine-green"] [style*="color: #fff"],
    html[data-theme="pine-green"] [style*="color:#ffffff"],
    html[data-theme="pine-green"] [style*="color: #ffffff"] { color: var(--th-text) !important; }
    html[data-theme="pine-green"] [style*="color:rgba(255,255,255"],
    html[data-theme="pine-green"] [style*="color: rgba(255,255,255"] { color: var(--th-text-secondary) !important; }
    html[data-theme="pine-green"] #header-balance { color: #047857 !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="OpenAI"] { color: #047857 !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Anthropic"] { color: #92400e !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="DeepSeek"] { color: #1d4ed8 !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Google"] { color: #b91c1c !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Qwen"] { color: #6b21a8 !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Meta"] { color: #0e7490 !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Mistral"] { color: #c2410c !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Midjourney"] { color: #9d174d !important; }
    html[data-theme="pine-green"] .model-vendor-badge[data-vendor="Other"] { color: #475569 !important; }
    html[data-theme="pine-green"] .tier-badge { color: #1d1d1f !important; border-color: rgba(0, 0, 0, 0.18) !important; background: #eef0f3 !important; }
    html[data-theme="pine-green"] .membership-tier-icon { color: #475569 !important; }

    /* White-ish text on colored translucent backgrounds -> darken bg + text */
    html[data-theme="pine-green"] .bg-amber-400\/10 { background-color: rgba(180, 83, 9, 0.1) !important; }
    html[data-theme="pine-green"] .bg-cyan-400\/15 { background-color: rgba(14, 116, 144, 0.1) !important; }
    html[data-theme="pine-green"] .bg-purple-400\/15 { background-color: rgba(126, 34, 206, 0.1) !important; }
    html[data-theme="pine-green"] .bg-emerald-400\/10 { background-color: rgba(4, 120, 87, 0.1) !important; }
    html[data-theme="pine-green"] .bg-rose-400\/10 { background-color: rgba(190, 18, 60, 0.08) !important; }
    html[data-theme="pine-green"] .bg-blue-400\/20 { background-color: rgba(29, 78, 216, 0.1) !important; }
    html[data-theme="pine-green"] .bg-orange-400\/10 { background-color: rgba(194, 65, 12, 0.09) !important; }
    html[data-theme="pine-green"] .border-orange-400\/20 { border-color: rgba(194, 65, 12, 0.24) !important; }

    /* Sidebar section labels use opacity in dark themes; keep small labels legible on white. */
    html[data-theme="pine-green"] .sider-group-title { color: var(--th-text-secondary, #48484a); opacity: 1; }
    html[data-theme="pine-green"] .sider-group-title.text-amber-300\/80 { color: #b45309; }
    html[data-theme="pine-green"] .sider-group-title.text-rose-300\/80 { color: #be123c; }
    html[data-theme="pine-green"] .sider-group-title.text-white\/50 { color: #6e6e73; }

    /* Badge system on light */
    html[data-theme="pine-green"] .badge-green { background: rgba(4, 120, 87, 0.1); color: #047857; border-color: rgba(4, 120, 87, 0.3); }
    html[data-theme="pine-green"] .badge-blue { background: rgba(29, 78, 216, 0.09); color: #1d4ed8; border-color: rgba(29, 78, 216, 0.28); }
    html[data-theme="pine-green"] .badge-amber { background: rgba(180, 83, 9, 0.1); color: #b45309; border-color: rgba(180, 83, 9, 0.3); }
    html[data-theme="pine-green"] .badge-red { background: rgba(190, 18, 60, 0.08); color: #be123c; border-color: rgba(190, 18, 60, 0.28); }
    html[data-theme="pine-green"] .badge-gray { background: rgba(0, 0, 0, 0.05); color: #48484a; border-color: rgba(0, 0, 0, 0.14); }

    /* Lucide icons inherit currentColor - ensure svg stroke visibility */
    html[data-theme="pine-green"] svg.lucide { color: inherit; }

    /* Buttons with white text on dark translucent -> dark text */
    html[data-theme="pine-green"] .nav-tab-active {
      background: rgba(0, 113, 227, 0.1);
      border-color: rgba(0, 113, 227, 0.3);
      color: #0071e3 !important;
    }
    html[data-theme="pine-green"] .workflow-pill-active { background: #0071e3; color: #fff; }

    /* Toggle switches */
    html[data-theme="pine-green"] .peer-checked\:bg-emerald-500 { background-color: #047857; }

    /* Scrollbar */
    html[data-theme="pine-green"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
    html[data-theme="pine-green"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }

    /* Hero area on light theme */
    html[data-theme="pine-green"] .hero-badge { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); }
    html[data-theme="pine-green"] .hero-badge span:last-child { color: #3a3a3c; }
    html[data-theme="pine-green"] .hero-spec-value { color: #1d1d1f; }
    html[data-theme="pine-green"] .hero-spec-label { color: #6e6e73; }
    html[data-theme="pine-green"] .provider-chip { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.09); }
    html[data-theme="pine-green"] .provider-name { color: #3a3a3c; }
    html[data-theme="pine-green"] .provider-section .provider-title { color: #1d1d1f; }
    html[data-theme="pine-green"] .section-tag { color: #0071e3; }
    html[data-theme="pine-green"] .section-title { color: #1d1d1f; }
    html[data-theme="pine-green"] .card-title, html[data-theme="pine-green"] .creative-card h3 { color: #1d1d1f !important; }
    html[data-theme="pine-green"] .m-tag { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #48484a; }
    html[data-theme="pine-green"] .bento-label svg, html[data-theme="pine-green"] .creative-icon-wrap { color: #0071e3; }
    html[data-theme="pine-green"] .creative-icon-wrap { background: rgba(0, 113, 227, 0.07); border-color: rgba(0, 113, 227, 0.15); }
    html[data-theme="pine-green"] .footer { border-top-color: rgba(0, 0, 0, 0.08); }
    html[data-theme="pine-green"] .landing-footer span, html[data-theme="pine-green"] .footer-legal a { color: #6e6e73; }

    /* Terminal/console code block on light */
    html[data-theme="pine-green"] .terminal-body, html[data-theme="pine-green"] pre, html[data-theme="pine-green"] code {
      background: rgba(0, 0, 0, 0.04) !important; color: #1d1d1f;
    }

    /* Theme trigger button on light */
    html[data-theme="pine-green"] .theme-trigger { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: #48484a; }
    html[data-theme="pine-green"] .theme-trigger:hover { background: rgba(0, 0, 0, 0.1); }
    html[data-theme="pine-green"] .theme-menu { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.2); }
    html[data-theme="pine-green"] .theme-option { color: #3a3a3c; }
    html[data-theme="pine-green"] .theme-option .check-icon { color: #0071e3; }

    /* Login modal on light */
    html[data-theme="pine-green"] #login-modal { background: rgba(245, 245, 247, 0.6); }
    html[data-theme="pine-green"] #login-modal .modal-apple { background: rgba(255, 255, 255, 0.92) !important; }
    html[data-theme="pine-green"] #login-modal .auth-field { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
    html[data-theme="pine-green"] #login-modal .auth-field:focus-within { border-color: rgba(0, 113, 227, 0.55) !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12); }
    html[data-theme="pine-green"] #login-modal .text-white\/45, html[data-theme="pine-green"] #login-modal .text-white\/40 { color: #86868b !important; }
    html[data-theme="pine-green"] #login-modal .bg-white\/\[0\.07\] { background: rgba(0, 0, 0, 0.06) !important; }
    html[data-theme="pine-green"] #login-modal .bg-white\/\[0\.07\]:hover { background: rgba(0, 0, 0, 0.12) !important; }
    html[data-theme="pine-green"] #login-modal h3 { color: #1d1d1f !important; }
    html[data-theme="pine-green"] #login-modal .bg-white\/\[0\.07\] + div, html[data-theme="pine-green"] #login-modal .h-px.bg-white\/\[0\.07\] { background: rgba(0, 0, 0, 0.08) !important; }

    /* User dropdown on light */
    html[data-theme="pine-green"] .dropdown-sep { background: rgba(0, 0, 0, 0.08); }

    /* Announcement banner */
    html[data-theme="pine-green"] .bg-amber-400\/10 { background-color: rgba(180, 83, 9, 0.08) !important; }


    /* ==========================================================================
       THEME DISTINCTIVENESS BOOST (Midnight / Aurora clearly distinct)
       ========================================================================== */

    /* ---- MIDNIGHT: deep ocean blue world ---- */
    html[data-theme="graphite-amber"] body {
      background-color: #060b18 !important;
      background-image:
        radial-gradient(1200px 600px at 50% -8%, rgba(77, 140, 255, 0.16) 0%, transparent 55%),
        radial-gradient(900px 500px at 85% 20%, rgba(64, 100, 200, 0.1) 0%, transparent 50%),
        radial-gradient(800px 500px at 8% 70%, rgba(40, 80, 180, 0.08) 0%, transparent 55%) !important;
    }
    html[data-theme="graphite-amber"] .glass-panel {
      background: rgba(16, 28, 52, 0.6);
      border-color: rgba(120, 170, 255, 0.12);
      border-top-color: rgba(150, 190, 255, 0.3);
    }
    html[data-theme="graphite-amber"] .glass-panel:hover {
      background: rgba(22, 38, 68, 0.72);
      border-color: rgba(130, 180, 255, 0.22);
    }
    html[data-theme="graphite-amber"] .modal-apple {
      background: rgba(14, 24, 46, 0.92) !important;
      border-color: rgba(120, 170, 255, 0.14) !important;
      border-top-color: rgba(150, 190, 255, 0.32) !important;
    }
    html[data-theme="graphite-amber"] .nav-container,
    html[data-theme="graphite-amber"] #app-header-bar { background: rgba(6, 12, 26, 0.85); border-bottom-color: rgba(120, 170, 255, 0.12); }
    html[data-theme="graphite-amber"] .btn-solid { background: linear-gradient(135deg, #4da3ff, #6f8cff); color: #04101f; }
    html[data-theme="graphite-amber"] .btn-solid:hover { background: linear-gradient(135deg, #63b2ff, #829cff); }
    html[data-theme="graphite-amber"] .btn-glass { border-color: rgba(120, 170, 255, 0.18); border-top-color: rgba(150, 190, 255, 0.32); }
    html[data-theme="graphite-amber"] .btn-glass:hover { background: rgba(90, 140, 255, 0.14); border-color: rgba(130, 180, 255, 0.32); }
    html[data-theme="graphite-amber"] .input-apple, html[data-theme="graphite-amber"] .auth-field {
      background: rgba(90, 140, 255, 0.07) !important;
      border-color: rgba(120, 170, 255, 0.16) !important;
      border-top-color: rgba(150, 190, 255, 0.28) !important;
    }
    html[data-theme="graphite-amber"] .input-apple:focus { border-color: rgba(100, 165, 255, 0.65) !important; box-shadow: 0 0 0 4px rgba(80, 140, 255, 0.18) !important; }
    html[data-theme="graphite-amber"] .bento-metric {
      background: linear-gradient(160deg, rgba(22, 38, 70, 0.75), rgba(12, 22, 44, 0.85));
      border-color: rgba(120, 170, 255, 0.12);
      border-top-color: rgba(150, 190, 255, 0.28);
    }
    html[data-theme="graphite-amber"] .user-capsule { background: rgba(90, 140, 255, 0.1); border-color: rgba(130, 180, 255, 0.2); }
    html[data-theme="graphite-amber"] .user-dropdown { background: rgba(12, 22, 44, 0.95); border-color: rgba(120, 170, 255, 0.14); }
    html[data-theme="graphite-amber"] .badge-blue { background: rgba(77, 163, 255, 0.14); color: #7db8ff; border-color: rgba(77, 163, 255, 0.35); }
    html[data-theme="graphite-amber"] .badge-amber { background: rgba(255, 190, 90, 0.12); color: #ffd28a; border-color: rgba(255, 190, 90, 0.3); }
    html[data-theme="graphite-amber"] .badge-green { background: rgba(80, 220, 180, 0.12); color: #6fe3c0; border-color: rgba(80, 220, 180, 0.3); }
    html[data-theme="graphite-amber"] .status-pill { background: rgba(80, 220, 180, 0.1); border-color: rgba(80, 220, 180, 0.25); }
    html[data-theme="graphite-amber"] .hero-badge { background: rgba(77, 163, 255, 0.1); border-color: rgba(120, 170, 255, 0.3); }
    html[data-theme="graphite-amber"] .gradient-span {
      background: linear-gradient(135deg, #7db8ff 0%, #8f9bff 50%, #b39dff 100%) !important;
      -webkit-background-clip: text; background-clip: text;
    }
    html[data-theme="graphite-amber"] .provider-chip { background: rgba(16, 30, 58, 0.7); border-color: rgba(120, 170, 255, 0.14); }
    html[data-theme="graphite-amber"] .creative-card, html[data-theme="pine-green"] .creative-card { transition: all 0.3s var(--ease-apple); }
    html[data-theme="graphite-amber"] .creative-card { background: rgba(16, 28, 52, 0.55); border-color: rgba(120, 170, 255, 0.1); }
    html[data-theme="graphite-amber"] .cta-banner { background: radial-gradient(circle at 50% 0%, rgba(77, 140, 255, 0.2), rgba(8, 14, 30, 0.85) 70%); border-color: rgba(120, 170, 255, 0.28); }
    html[data-theme="graphite-amber"] ::selection { background: rgba(77, 140, 255, 0.35); }
    html[data-theme="graphite-amber"] .auth-field:focus-within { border-color: rgba(100, 165, 255, 0.65) !important; box-shadow: 0 0 0 4px rgba(80, 140, 255, 0.16) !important; }
    html[data-theme="graphite-amber"] #login-modal .modal-apple { background: rgba(14, 24, 46, 0.94) !important; }

    /* ---- AURORA: emerald teal world ---- */
    html[data-theme="pine-green"] body {
      background-color: #04100c !important;
      background-image:
        radial-gradient(1200px 600px at 50% -8%, rgba(52, 211, 153, 0.14) 0%, transparent 55%),
        radial-gradient(900px 500px at 85% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
        radial-gradient(800px 500px at 8% 70%, rgba(34, 211, 238, 0.06) 0%, transparent 55%) !important;
    }
    html[data-theme="pine-green"] .glass-panel {
      background: rgba(10, 32, 26, 0.58);
      border-color: rgba(52, 211, 153, 0.12);
      border-top-color: rgba(110, 231, 183, 0.3);
    }
    html[data-theme="pine-green"] .glass-panel:hover {
      background: rgba(14, 44, 36, 0.72);
      border-color: rgba(80, 230, 180, 0.24);
    }
    html[data-theme="pine-green"] .modal-apple {
      background: rgba(8, 28, 22, 0.92) !important;
      border-color: rgba(52, 211, 153, 0.14) !important;
      border-top-color: rgba(110, 231, 183, 0.32) !important;
    }
    html[data-theme="pine-green"] .nav-container,
    html[data-theme="pine-green"] #app-header-bar { background: rgba(4, 16, 12, 0.85); border-bottom-color: rgba(52, 211, 153, 0.12); }
    html[data-theme="pine-green"] .btn-solid { background: linear-gradient(135deg, #34d399, #22d3ee); color: #02120c; }
    html[data-theme="pine-green"] .btn-solid:hover { background: linear-gradient(135deg, #4ce0b0, #3ddff2); }
    html[data-theme="pine-green"] .btn-glass { border-color: rgba(52, 211, 153, 0.18); border-top-color: rgba(110, 231, 183, 0.32); }
    html[data-theme="pine-green"] .btn-glass:hover { background: rgba(52, 211, 153, 0.12); border-color: rgba(80, 230, 180, 0.34); }
    html[data-theme="pine-green"] .input-apple, html[data-theme="pine-green"] .auth-field {
      background: rgba(52, 211, 153, 0.06) !important;
      border-color: rgba(52, 211, 153, 0.16) !important;
      border-top-color: rgba(110, 231, 183, 0.28) !important;
    }
    html[data-theme="pine-green"] .input-apple:focus { border-color: rgba(52, 211, 153, 0.65) !important; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16) !important; }
    html[data-theme="pine-green"] .bento-metric {
      background: linear-gradient(160deg, rgba(12, 40, 32, 0.75), rgba(6, 26, 20, 0.85));
      border-color: rgba(52, 211, 153, 0.12);
      border-top-color: rgba(110, 231, 183, 0.28);
    }
    html[data-theme="pine-green"] .user-capsule { background: rgba(52, 211, 153, 0.09); border-color: rgba(80, 230, 180, 0.2); }
    html[data-theme="pine-green"] .user-dropdown { background: rgba(8, 28, 22, 0.95); border-color: rgba(52, 211, 153, 0.14); }
    html[data-theme="pine-green"] .badge-blue { background: rgba(34, 211, 238, 0.12); color: #67e8f9; border-color: rgba(34, 211, 238, 0.32); }
    html[data-theme="pine-green"] .badge-amber { background: rgba(250, 204, 21, 0.12); color: #fde047; border-color: rgba(250, 204, 21, 0.3); }
    html[data-theme="pine-green"] .badge-green { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); }
    html[data-theme="pine-green"] .status-pill { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.28); }
    html[data-theme="pine-green"] .hero-badge { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); }
    html[data-theme="pine-green"] .gradient-span {
      background: linear-gradient(135deg, #6ee7b7 0%, #34d399 50%, #22d3ee 100%) !important;
      -webkit-background-clip: text; background-clip: text;
    }
    html[data-theme="pine-green"] .provider-chip { background: rgba(10, 32, 26, 0.7); border-color: rgba(52, 211, 153, 0.14); }
    html[data-theme="pine-green"] .creative-card { background: rgba(10, 32, 26, 0.55); border-color: rgba(52, 211, 153, 0.1); }
    html[data-theme="pine-green"] .cta-banner { background: radial-gradient(circle at 50% 0%, rgba(52, 211, 153, 0.18), rgba(4, 16, 12, 0.85) 70%); border-color: rgba(52, 211, 153, 0.28); }
    html[data-theme="pine-green"] ::selection { background: rgba(52, 211, 153, 0.35); }
    html[data-theme="pine-green"] .auth-field:focus-within { border-color: rgba(52, 211, 153, 0.65) !important; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15) !important; }
    html[data-theme="pine-green"] #login-modal .modal-apple { background: rgba(8, 28, 22, 0.94) !important; }
    html[data-theme="pine-green"] .brand-icon { box-shadow: 0 0 18px rgba(52, 211, 153, 0.55) !important; }

    /* Obsidian: pure black identity with a restrained blue signal accent */
    html[data-theme="obsidian"] body {
      background-color: #030305 !important;
      background-image:
        radial-gradient(1200px 600px at 50% -8%, rgba(120, 120, 140, 0.07) 0%, transparent 55%),
        radial-gradient(800px 500px at 90% 15%, rgba(41, 151, 255, 0.045) 0%, transparent 50%) !important;
    }


    /* Theme-aware sub navigation bars */
    .nav-subbar {
      background: rgba(6, 9, 19, 0.95);
      border-bottom-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.6);
    }
    html[data-theme="pine-green"] .nav-subbar {
      background: rgba(255, 255, 255, 0.88);
      border-bottom-color: rgba(0, 0, 0, 0.08);
      color: #48484a;
    }
    html[data-theme="graphite-amber"] .nav-subbar {
      background: rgba(6, 12, 26, 0.95);
      border-bottom-color: rgba(120, 170, 255, 0.12);
    }
    html[data-theme="pine-green"] .nav-subbar {
      background: rgba(4, 16, 12, 0.95);
      border-bottom-color: rgba(52, 211, 153, 0.12);
    }
    /* Subbar text/borders on pine-green */
    html[data-theme="pine-green"] .nav-subbar .text-white\/30,
    html[data-theme="pine-green"] .nav-subbar .text-white\/40,
    html[data-theme="pine-green"] .nav-subbar .text-white\/60 { color: #6e6e73 !important; }
    html[data-theme="pine-green"] .nav-subbar .h-3\.5.w-px { background: rgba(0, 0, 0, 0.12) !important; }
    html[data-theme="pine-green"] .nav-subbar .text-white\/70 { color: #3a3a3c !important; }

    /* ==========================================================================
       NEW-API WORKSPACE SHELL REFINEMENT
       ========================================================================== */
    :root { --app-header-height: 52px; }
    #app-header-bar {
      height: var(--app-header-height) !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
    #app-header-bar .app-header-leading { flex: 1; min-width: 0; gap: 16px; }
    #app-header-bar .app-brand, #app-header-bar .app-header-actions { flex-shrink: 0; }
    #app-header-bar .app-header-actions { margin-left: 12px; }
    #workspace-switcher { min-width: 0; overflow-x: auto; white-space: nowrap; }
    #workspace-switcher > button { flex-shrink: 0; }
    #workspace-switcher > button:focus-visible { outline: 2px solid var(--th-accent); outline-offset: -2px; }
    #header-username { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #user-dropdown-menu { max-height: calc(100svh - var(--app-header-height) - 24px); overflow-y: auto; }
    #user-dropdown-menu .dropdown-item.hidden,
    #workspace-switcher > button.hidden,
    .mobile-workspace-menu button.hidden { display: none !important; }
    @media (max-width: 1500px) {
      #app-header-bar .app-brand-subtitle { display: none; }
    }
    @media (max-width: 600px) {
      #app-header-bar .app-brand-copy { display: none; }
      #app-header-bar .app-header-leading { gap: 8px; }
      #app-header-bar .app-header-actions { margin-left: 8px; gap: 6px; }
    }
    #mobile-workspace-switcher { display: none; position: relative; }
    .mobile-workspace-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 80;
      display: none;
      width: 190px;
      padding: 6px;
      border: 1px solid var(--th-border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--th-bg-2) 96%, transparent);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
    }
    .mobile-workspace-menu.open { display: grid; gap: 3px; }
    .mobile-workspace-menu button {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 10px;
      border-radius: 6px;
      color: var(--th-text-2);
      font-size: 12px;
      text-align: left;
    }
    .mobile-workspace-menu button:hover,
    .mobile-workspace-menu button.active { color: var(--th-text); background: color-mix(in srgb, var(--th-accent) 10%, transparent); }
    .mobile-workspace-menu svg { width: 15px; height: 15px; }
    #console-layout-wrapper.console-layout {
      min-height: calc(100svh - var(--app-header-height));
      height: calc(100svh - var(--app-header-height));
      align-items: stretch;
    }
    body.has-announcement #console-layout-wrapper.console-layout {
      min-height: calc(100svh - var(--app-header-height) - var(--announcement-height, 0px));
      height: calc(100svh - var(--app-header-height) - var(--announcement-height, 0px));
    }
    body.has-announcement .console-sider {
      height: calc(100svh - var(--app-header-height) - var(--announcement-height, 0px));
    }
    #console-layout-wrapper.landing-mode { display: flex !important; }
    #console-layout-wrapper.landing-mode {
      height: auto;
      min-height: 100svh;
    }
    #console-layout-wrapper.landing-mode .console-sider,
    #console-layout-wrapper.models-mode .console-sider,
    #console-layout-wrapper.standalone-mode .console-sider,
    #console-layout-wrapper.studio-mode .console-sider { display: none !important; }
    #console-layout-wrapper.landing-mode .console-content { overflow: visible; }
    .console-sider {
      width: 232px;
      min-width: 232px;
      top: var(--app-header-height);
      height: calc(100svh - var(--app-header-height));
      background: var(--th-glass);
      border-right-color: var(--th-border);
    }
    .console-sider.collapsed { width: 64px; min-width: 64px; }
    .console-content {
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      background: color-mix(in srgb, var(--th-bg) 86%, transparent);
    }
    .console-content > .page-container {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 24px clamp(18px, 3vw, 42px) 48px;
      box-sizing: border-box;
    }
    .console-content > #page-landing {
      max-width: none;
      padding: 0;
    }
    .console-content .glass-panel { border-radius: 8px; }
    .sider-group-title { padding-left: 14px; padding-right: 14px; }
    .sider-nav-item { margin-left: 6px; margin-right: 6px; border-radius: 8px; }
    .sider-nav-item.active { box-shadow: none; }
    #sider-context-header button.sider-nav-item { width: calc(100% - 12px); text-align: left; }
    .settings-section { scroll-margin-top: 18px; }

    /* 桌面侧栏参与布局流：展开 232px，折叠为 64px 图标栏，不覆盖右侧内容。 */
    @media (min-width: 901px) {
      .console-sider.collapsed {
        width: 64px;
        min-width: 64px;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
      }
      body.has-announcement #console-layout-wrapper .console-sider {
        top: calc(var(--app-header-height) + var(--announcement-height, 0px));
        height: calc(100svh - var(--app-header-height) - var(--announcement-height, 0px));
      }
      @media (prefers-reduced-motion: reduce) {
        .console-sider { transition: none; }
      }
    }

    /* 使用密钥弹窗: 固定宽度 + 内容最小高度 (防切换跳动) */

    /* 设置页子导航: 移动端横滑药丸条, 桌面端左侧竖栏 */
    .settings-nav-item {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 0.75rem; border-radius: 0.75rem;
      color: rgba(255,255,255,0.78); font-size: 0.8rem; font-weight: 500;
      transition: all .15s ease; text-align: left; white-space: nowrap;
      flex-shrink: 0; border: 1px solid transparent;
    }
    .settings-nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
    .settings-nav-item.active {
      color: #fff; background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    html[data-theme="pine-green"] .settings-nav-item { color: rgba(29,29,31,0.68); }
    html[data-theme="pine-green"] .settings-nav-item:hover { color: #1d1d1f; background: rgba(0,0,0,0.05); }
    html[data-theme="pine-green"] .settings-nav-item.active { color: #1d1d1f; background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.14); box-shadow: none; }
    @media (min-width: 1024px) {
      .settings-nav-item { white-space: normal; }
    }

    .sider-context-back { border-bottom: 1px solid var(--th-border); margin-bottom: 8px; }
    .console-sidebar-backdrop { display: none; }

    /* Landing page: full-width Nexus Studio entry surface */
    #landing-nav-bar.landing-nav {
      background: linear-gradient(180deg, rgba(3, 3, 5, .9), rgba(3, 3, 5, .58) 72%, transparent);
      border-bottom-color: transparent;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    #landing-nav-bar.landing-nav .nav-inner {
      width: 100%;
      max-width: none;
      min-height: 72px;
      padding: 0 clamp(18px, 4vw, 72px);
    }
    #landing-nav-bar.landing-nav .brand { gap: 10px; }
    #landing-nav-bar.landing-nav .brand-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: linear-gradient(145deg, #101923, #1787b8);
      border: 1px solid rgba(125, 211, 252, .34);
      box-shadow: 0 8px 24px rgba(6, 182, 212, .18), inset 0 1px rgba(255, 255, 255, .24);
    }
    #landing-nav-bar.landing-nav .brand > span:not(.brand-tag) { font-size: 15px; letter-spacing: .12em; }
    #landing-nav-bar.landing-nav .brand-tag {
      color: rgba(165, 243, 252, .7);
      border-color: rgba(103, 232, 249, .24);
      background: rgba(8, 145, 178, .1);
    }
    #landing-nav-bar.landing-nav .nav-links { gap: 24px; }
    #landing-nav-bar.landing-nav .nav-link {
      color: rgba(226, 232, 240, .64);
      font-size: 12px;
      letter-spacing: .02em;
    }
    #landing-nav-bar.landing-nav button.nav-link { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
    #landing-nav-bar.landing-nav .nav-link:hover { color: #a5f3fc; }
    #landing-nav-bar.landing-nav .nav-actions { gap: 10px; }
    #landing-nav-bar.landing-nav .status-pill { display: none; }
    .landing-nav-login {
      min-height: 36px;
      padding: 0 8px;
      border: 0;
      border-radius: 8px;
      color: rgba(226, 232, 240, .9);
      background: transparent;
      font-size: 12px;
      transition: border-color .2s ease, background .2s ease, color .2s ease;
    }
    .landing-nav-login:hover { color: #fff; background: rgba(148, 163, 184, .1); }
    .landing-nav-connect {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 15px;
      border-radius: 8px;
      color: rgba(248, 250, 252, .94);
      background: transparent;
      border: 1px solid rgba(226, 232, 240, .78);
      font-size: 12px;
      font-weight: 700;
      box-shadow: none;
      transition: transform .2s ease, background .2s ease;
    }
    .landing-nav-connect:hover { background: rgba(148, 163, 184, .1); transform: translateY(-1px); }

    /* 已登录时的着陆页用户下拉 (对齐 new-api UserArea: 头像 + 名称 + 下拉)。 */
    .landing-user-menu { position: relative; }
    .landing-user-trigger {
      display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 10px 3px 3px;
      border: 1px solid rgba(226, 232, 240, .22); border-radius: 999px;
      color: rgba(248, 250, 252, .94); background: rgba(148, 163, 184, .08);
      font-size: 12px; font-weight: 600;
    }
    .landing-user-trigger:hover { background: rgba(148, 163, 184, .16); }
    .landing-user-avatar {
      display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(135deg, #38bdf8, #818cf8); color: #06121f; font-weight: 800; font-size: 13px;
    }
    .landing-user-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .landing-user-dropdown {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 168px; padding: 6px;
      display: grid; gap: 2px; border: 1px solid rgba(226, 232, 240, .16); border-radius: 12px;
      background: rgba(10, 14, 23, .98); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    }
    .landing-user-dropdown[hidden] { display: none; }
    .landing-user-dropdown button {
      width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; text-align: left;
      color: rgba(248, 250, 252, .9); background: transparent; font-size: 12px; cursor: pointer;
    }
    .landing-user-dropdown button:hover { background: rgba(148, 163, 184, .16); }
    .landing-user-signout { color: #fda4af; }

    .landing-page-shell {
      min-height: 100svh;
      overflow: hidden;
      background: #030507;
      color: #e2e8f0;
    }
    .landing-hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      padding: 104px clamp(18px, 4vw, 72px) 28px;
      background:
        radial-gradient(70% 80% at 80% 48%, rgba(7, 93, 133, .18), transparent 68%),
        linear-gradient(180deg, rgba(3, 5, 7, .7), #030507 92%);
    }
    .landing-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .18;
      background-image: linear-gradient(rgba(148, 163, 184, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .12) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(90deg, #000 0 52%, transparent 88%);
    }
    .landing-particle-layer { z-index: 5; opacity: .78; mix-blend-mode: screen; pointer-events: none; }
    .landing-hero-grid {
      position: relative;
      z-index: 2;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
      align-items: center;
      gap: clamp(24px, 5vw, 88px);
      flex: 1;
      min-height: 0;
    }
    .landing-copy { max-width: 620px; padding: 4vh 0 2vh; }
    .landing-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #67e8f9;
      font: 600 11px/1.2 'DM Mono', monospace;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .landing-eyebrow::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #67e8f9;
      box-shadow: 0 0 0 4px rgba(103, 232, 249, .12), 0 0 18px rgba(34, 211, 238, .64);
    }
    .landing-title {
      max-width: 680px;
      margin: 22px 0 20px;
      color: #f8fafc;
      font: 800 68px/1.04 'Outfit', sans-serif;
      letter-spacing: -.045em;
    }
    .landing-title span { color: #67e8f9; }
    .landing-lede {
      max-width: 510px;
      margin: 0 0 28px;
      color: rgba(203, 213, 225, .72);
      font-size: 16px;
      line-height: 1.72;
    }
    .landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .landing-primary-action,
    .landing-secondary-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      padding: 0 17px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .landing-primary-action { color: #031117; background: #a5f3fc; border: 1px solid #cffafe; box-shadow: 0 12px 30px rgba(34, 211, 238, .16); }
    .landing-primary-action:hover { background: #cffafe; transform: translateY(-1px); }
    .landing-secondary-action { color: rgba(226, 232, 240, .82); background: rgba(15, 23, 42, .54); border: 1px solid rgba(148, 163, 184, .24); }
    .landing-secondary-action:hover { color: #fff; background: rgba(30, 41, 59, .7); border-color: rgba(103, 232, 249, .36); transform: translateY(-1px); }
    .landing-search-entry {
      display: flex;
      align-items: center;
      gap: 10px;
      width: min(100%, 430px);
      min-height: 46px;
      margin-top: 30px;
      padding: 0 13px;
      color: rgba(148, 163, 184, .7);
      background: rgba(2, 6, 23, .55);
      border: 1px solid rgba(100, 116, 139, .24);
      border-radius: 8px;
      font-size: 12px;
      text-align: left;
      transition: border-color .2s ease, background .2s ease;
    }
    .landing-search-entry:hover { color: #cbd5e1; border-color: rgba(103, 232, 249, .34); background: rgba(8, 47, 73, .36); }
    .landing-search-entry kbd { margin-left: auto; padding: 3px 6px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 4px; color: rgba(148, 163, 184, .6); font: 10px 'DM Mono', monospace; }
    .landing-visual-wrap { position: relative; min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
    .landing-visual-frame {
      position: relative;
      width: min(100%, 860px);
      aspect-ratio: 1.42;
      overflow: hidden;
      border: 1px solid rgba(103, 232, 249, .22);
      border-radius: 12px;
      background: rgba(2, 6, 23, .6);
      box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 90px rgba(8, 145, 178, .12);
    }
    .landing-capability-rail {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 1px;
      margin-top: 24px;
      border: 1px solid rgba(100, 116, 139, .2);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(100, 116, 139, .16);
    }
    .landing-capability {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      min-height: 58px;
      padding: 0 13px;
      color: rgba(203, 213, 225, .68);
      background: rgba(3, 7, 12, .84);
      text-align: left;
      transition: color .2s ease, background .2s ease;
    }
    .landing-capability:hover { color: #e0f2fe; background: rgba(8, 47, 73, .46); }
    .landing-capability i { flex: 0 0 auto; width: 15px; height: 15px; color: #67e8f9; }
    .landing-capability strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
    .landing-capability small { display: block; margin-top: 2px; color: rgba(148, 163, 184, .5); font: 9px 'DM Mono', monospace; letter-spacing: .05em; }
    @media (max-width: 1120px) {
      #landing-nav-bar.landing-nav .nav-links { gap: 14px; }
      #landing-nav-bar.landing-nav .nav-link:nth-child(n+4) { display: none; }
      .landing-hero-grid { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 30px; }
      .landing-title { font-size: 56px; }
      .landing-capability-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      #landing-nav-bar.landing-nav .nav-links { display: none; }
      #landing-nav-bar.landing-nav .brand-tag { display: none; }
      #landing-nav-bar.landing-nav .nav-inner { min-height: 64px; }
      .landing-hero { padding: 92px 16px 18px; }
      .landing-hero-grid { grid-template-columns: 1fr; gap: 22px; }
      .landing-copy { max-width: none; padding: 2vh 0 0; }
      .landing-title { margin-top: 18px; font-size: 46px; line-height: 1.06; }
      .landing-lede { max-width: none; font-size: 14px; line-height: 1.65; }
      .landing-search-entry { margin-top: 22px; }
      .landing-visual-wrap { align-self: auto; justify-content: stretch; }
      .landing-visual-frame { width: 100%; aspect-ratio: 1.45; }
      .landing-capability-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
      .landing-capability { min-height: 52px; padding: 0 11px; }
      .landing-capability strong { font-size: 11px; }
      .landing-capability small { font-size: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .landing-nav-login, .landing-nav-connect, .landing-primary-action, .landing-secondary-action, .landing-search-entry, .landing-capability { transition: none; }
    }

    /* Landing reference composition: studio visual with connected capability cards. */
    #landing-nav-bar.landing-nav .brand { gap: 10px; font-size: 24px; letter-spacing: -.03em; text-transform: none; }
    #landing-nav-bar.landing-nav .brand > span:not(.brand-tag) { font-size: inherit; letter-spacing: inherit; text-transform: none; }
    #landing-nav-bar.landing-nav .landing-brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
    #landing-nav-bar.landing-nav .nav-inner { min-height: 72px; }
    #landing-nav-bar.landing-nav .nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
    #landing-nav-bar.landing-nav .nav-link { font-size: 15px; color: rgba(248, 250, 252, .86); }
    #landing-nav-bar.landing-nav .nav-actions { margin-left: auto; }
    .landing-hero { min-height: 0; justify-content: flex-start; padding-top: 88px; padding-bottom: 38px; }
    .landing-hero::before { opacity: .08; background-size: 72px 72px; mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%); }
    .landing-hero-grid { grid-template-columns: 50% 50%; gap: 0; flex: none; min-height: 600px; max-width: 1680px; margin: 0 auto; z-index: auto; }
    .landing-copy { position: relative; z-index: 7; max-width: 560px; align-self: center; padding: 0 24px 0 clamp(24px, 5vw, 110px); }
    .landing-eyebrow { color: #cbd5e1; font-size: 14px; letter-spacing: .08em; }
    .landing-eyebrow::before { display: none; }
    .landing-eyebrow::first-letter { color: #e2e8f0; }
    .landing-title { max-width: 500px; margin: 24px 0 20px; font-size: 50px; line-height: 1.08; letter-spacing: -.04em; }
    .landing-title span { color: inherit; }
    .landing-lede { max-width: 540px; margin-bottom: 28px; font-size: 17px; color: rgba(226, 232, 240, .86); }
    .landing-search-entry { width: min(100%, 510px); min-height: 62px; margin-top: 0; padding: 0 20px; gap: 12px; border-color: rgba(226, 232, 240, .72); border-radius: 10px; color: rgba(203, 213, 225, .78); font-size: 16px; background: rgba(15, 23, 42, .28); }
    .landing-search-entry:hover { border-color: #e2e8f0; background: rgba(15, 23, 42, .52); }
    .landing-search-entry .landing-search-arrow { margin-left: auto; width: 24px; height: 24px; padding-left: 14px; box-sizing: content-box; border-left: 1px solid rgba(226, 232, 240, .62); }
    .landing-inspiration-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 34px; color: rgba(226, 232, 240, .9); font-size: 16px; background: transparent; border: 0; cursor: pointer; }
    .landing-inspiration-link:hover { color: #67e8f9; }
    .landing-visual-wrap { position: relative; z-index: 3; align-self: center; min-height: 0; overflow: visible; justify-content: flex-start; }
    .landing-visual-wrap::after { display: none; }
    .landing-visual-frame { flex: 0 0 100%; width: 100%; max-width: none; aspect-ratio: 1.722; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
    .landing-visual-frame::after { display: none; }
    .landing-status-rail { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; min-height: 70px; margin-top: 8px; width: 100%; max-width: min(1680px, 100%); margin-left: auto; margin-right: auto; border: 1px solid rgba(148, 163, 184, .35); border-radius: 10px; overflow: hidden; background: rgba(2, 8, 14, .72); }
    .landing-status-item { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; color: rgba(226, 232, 240, .88); background: transparent; border: 0; border-right: 1px solid rgba(148, 163, 184, .28); font-size: 16px; cursor: pointer; }
    .landing-status-item:last-child { border-right: 0; }
    .landing-status-item:hover { color: #67e8f9; background: rgba(8, 47, 73, .3); }
    .landing-status-item i { width: 24px; height: 24px; color: #cbd5e1; }
    .landing-status-online { color: #2dd4bf; font: 13px 'DM Mono', monospace; letter-spacing: .08em; }
    .landing-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 14px rgba(45, 212, 191, .9); }
    .landing-teaser-grid { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; width: 100%; max-width: min(1680px, 100%); margin-left: auto; margin-right: auto; }
    .landing-teaser-card { position: relative; display: flex; align-items: flex-end; min-width: 0; min-height: 250px; padding: 20px; overflow: hidden; border: 1px solid rgba(148, 163, 184, .36); border-radius: 10px; color: #f8fafc; background-color: #081018; background-image: linear-gradient(180deg, transparent 42%, rgba(2, 6, 12, .92) 100%); background-size: cover; background-position: center; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
    .landing-teaser-card:hover { border-color: rgba(103, 232, 249, .7); transform: translateY(-2px); }
    .landing-teaser-story { background-position: 14% center; }
    .landing-teaser-script { background-position: 38% center; }
    .landing-teaser-image { background-position: 66% center; }
    .landing-teaser-3d { background-position: 92% center; }
    .landing-teaser-story { background-image: linear-gradient(180deg, transparent 42%, rgba(2, 6, 12, .92) 100%), url('/assets/landing/001-editorial-still-life-for-a-premium-creative-writing-workspac.png'); background-position: center; }
    .landing-teaser-script { background-image: linear-gradient(180deg, transparent 42%, rgba(2, 6, 12, .92) 100%), url('/assets/landing/002-editorial-still-life-for-a-premium-screenplay-workspace-stor.png'); background-position: center; }
    .landing-teaser-image { background-image: linear-gradient(180deg, transparent 42%, rgba(2, 6, 12, .92) 100%), url('/assets/landing/003-premium-futuristic-image-generation-studio-card-a-cinematic-.png'); background-position: center; }
    .landing-teaser-3d { background-image: linear-gradient(180deg, transparent 42%, rgba(2, 6, 12, .92) 100%), url('/assets/landing/004-premium-futuristic-3d-director-stage-card-a-dark-spacecraft-.png'); background-position: center; }
    .landing-teaser-card strong { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; }
    .landing-teaser-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #67e8f9; }
    .landing-teaser-icon i { width: 24px; height: 24px; }
    .landing-features { width: 100%; max-width: min(1680px, 100%); margin: 0 auto; padding: 40px 0 26px; }
    .landing-features-head { max-width: 760px; margin-bottom: 26px; }
    .landing-features-head h2 { color: #f8fafc; font: 700 34px/1.15 'Outfit', sans-serif; letter-spacing: -.03em; }
    .landing-features-head p { margin-top: 12px; color: rgba(203, 213, 225, .66); font-size: 15px; line-height: 1.6; }
    .landing-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .landing-feature-card {
      display: flex; flex-direction: column; gap: 12px;
      min-height: 240px; padding: 26px 24px;
      border: 1px solid rgba(148, 163, 184, .3); border-radius: 12px;
      background: linear-gradient(170deg, rgba(13, 22, 36, .72), rgba(6, 10, 18, .86));
      text-align: left;
    }
    .landing-feature-card:hover { border-color: rgba(103, 232, 249, .4); }
    .landing-feature-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 10px;
      color: #67e8f9; background: rgba(34, 211, 238, .1); border: 1px solid rgba(103, 232, 249, .22);
    }
    .landing-feature-icon i { width: 19px; height: 19px; }
    .landing-feature-card h3 { color: #f8fafc; font: 600 16.5px 'Outfit', sans-serif; }
    .landing-feature-card p { color: rgba(203, 213, 225, .62); font-size: 13px; line-height: 1.65; }
    .landing-feature-card button {
      display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
      padding: 0; color: #67e8f9; font: 600 12.5px 'Outfit', sans-serif;
      background: transparent; border: 0; cursor: pointer;
    }
    .landing-feature-card button i { width: 14px; height: 14px; transition: transform .2s ease; }
    .landing-feature-card button:hover i { transform: translateX(3px); }
    .landing-footer { width: 100%; max-width: min(1680px, 100%); margin: 0 auto; padding: 18px 0 26px; }
    .landing-footer-inner {
      display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
      padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, .18);
    }
    .landing-footer-brand { display: flex; align-items: baseline; gap: 10px; }
    .landing-footer-logo { color: #f8fafc; font: 700 17px 'Outfit', sans-serif; }
    .landing-footer-tag { color: rgba(148, 163, 184, .55); font: 500 10.5px 'DM Mono', monospace; letter-spacing: .1em; }
    .landing-footer-links { display: flex; gap: 18px; }
    .landing-footer-links button {
      color: rgba(203, 213, 225, .6); font-size: 12px;
      background: transparent; border: 0; cursor: pointer;
    }
    .landing-footer-links button:hover { color: #e2e8f0; }
    .landing-footer-copy { color: rgba(148, 163, 184, .45); font: 500 10.5px 'DM Mono', monospace; }
    @media (max-width: 1120px) {
      .landing-hero-grid { grid-template-columns: minmax(430px, .9fr) minmax(0, 1.1fr); gap: 8px; min-height: 560px; }
      .landing-visual-frame { flex-basis: 108%; width: 108%; aspect-ratio: 1.48; transform: translateX(-4%); }
      .landing-hero-grid { grid-template-columns: minmax(430px, .88fr) minmax(0, 1.12fr); }
      .landing-title { font-size: 46px; }
      .landing-callout { display: none; }
      .landing-status-item { font-size: 14px; }
      .landing-teaser-card { min-height: 210px; }
    }
    @media (max-width: 760px) {
      #landing-nav-bar.landing-nav .nav-links { display: none; }
      #landing-nav-bar.landing-nav .nav-inner { min-height: 64px; padding: 0 16px; }
      #landing-nav-bar.landing-nav .brand { font-size: 28px; }
      .landing-hero { padding: 92px 16px 24px; }
      .landing-hero-grid { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
      .landing-copy { padding: 16px 0 0; }
      .landing-eyebrow { font-size: 12px; }
      .landing-title { margin: 18px 0 16px; font-size: 44px; line-height: 1.08; }
      .landing-lede { margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
      .landing-search-entry { width: 100%; min-height: 56px; padding: 0 15px; font-size: 13px; }
      .landing-inspiration-link { margin-top: 22px; font-size: 14px; }
      .landing-visual-wrap { width: 100%; }
      .landing-visual-frame { flex-basis: 100%; width: 100%; aspect-ratio: 1.28; transform: none; }
      .landing-status-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 112px; }
      .landing-status-item { min-height: 55px; padding: 0 8px; font-size: 12px; }
      .landing-status-item:nth-child(2) { border-right: 0; }
      .landing-status-item:nth-child(-n+2) { border-bottom: 1px solid rgba(148, 163, 184, .28); }
      .landing-status-online { font-size: 10px; }
      .landing-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
      .landing-teaser-card { min-height: 170px; padding: 13px; }
      .landing-teaser-card strong { gap: 8px; font-size: 13px; }
      .landing-teaser-icon { width: 22px; height: 22px; }
      .landing-teaser-icon i { width: 19px; height: 19px; }
    }

    /* Hero showcase: pre-rendered holographic studio artwork. */
    .landing-visual-frame { aspect-ratio: auto; }
    .landing-hero-shot {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45)) drop-shadow(0 0 50px rgba(34, 211, 238, .15));
    }

    @media (max-width: 900px) {
      #app-header-bar { padding-left: 10px !important; padding-right: 10px !important; }
      #app-header-bar > div:first-of-type { gap: 10px; }
      #workspace-switcher { display: none !important; }
      #mobile-workspace-switcher:not(.hidden) { display: block !important; }
      .console-sider {
        position: fixed;
        left: 0;
        top: var(--app-header-height);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 18px 0 48px rgba(0, 0, 0, 0.38);
      }
      .console-sider.collapsed { width: 232px; min-width: 232px; }
      .console-sider.collapsed .sider-nav-item { justify-content: flex-start; padding: 0.55rem 0.85rem; margin: 0.15rem 0.5rem; }
      .console-sider.collapsed .sider-nav-item span.nav-text { display: block; }
      .console-sider.collapsed .sider-group-title { opacity: 0.65; height: auto; padding: 0.75rem 1rem 0.35rem; margin: 0; }
      #console-layout-wrapper.mobile-nav-open .console-sider { transform: translateX(0); }
      #console-layout-wrapper.mobile-nav-open .console-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--app-header-height) 0 0 0;
        z-index: 30;
        background: rgba(0, 0, 0, 0.45);
        border: 0;
      }
      body.has-announcement .console-sider { top: calc(var(--app-header-height) + var(--announcement-height, 0px)); }
      body.has-announcement #console-layout-wrapper.mobile-nav-open .console-sidebar-backdrop {
        inset: calc(var(--app-header-height) + var(--announcement-height, 0px)) 0 0 0;
      }
      .console-content > .page-container { padding: 18px 14px 36px; }
    }

    /* ========================================================================
       CONSOLE PAGES V3
       Shared product language for authenticated operational pages.
       ======================================================================== */
    .console-content > .console-page-v3 {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 20px clamp(16px, 2.2vw, 32px) 40px !important;
      gap: 16px !important;
      box-sizing: border-box;
    }
    .console-page-v3 {
      --console-v3-surface: color-mix(in srgb, var(--th-bg-2) 76%, transparent);
      --console-v3-surface-strong: color-mix(in srgb, var(--th-bg-2) 90%, transparent);
      color: var(--th-text);
    }
    .console-page-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 3px 1px 1px;
    }
    .console-page-heading h1 {
      margin: 0 0 5px;
      color: var(--th-text);
      font: 700 23px/1.25 'Outfit', sans-serif;
    }
    .console-page-heading p {
      max-width: 72ch;
      margin: 0;
      color: var(--th-text-2);
      font-size: 12px;
      line-height: 1.55;
    }
    .console-page-heading-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .console-page-v3 .glass-panel {
      border: 1px solid var(--th-border) !important;
      border-radius: 8px !important;
      background: var(--console-v3-surface) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: none !important;
    }
    .console-page-v3 > .glass-panel { padding: 18px !important; }
    .console-page-v3 .glass-panel:hover {
      border-color: var(--th-border-top) !important;
      background: var(--console-v3-surface-strong) !important;
      box-shadow: none !important;
      transform: none !important;
    }
    .console-page-v3 .glass-panel h1,
    .console-page-v3 .glass-panel h2,
    .console-page-v3 .glass-panel h3 {
      color: var(--th-text) !important;
      letter-spacing: 0 !important;
    }
    .console-page-v3 .glass-panel h1 > svg,
    .console-page-v3 .glass-panel h2 > svg,
    .console-page-v3 .glass-panel h3 > svg,
    .console-page-v3 .glass-panel h1 > i,
    .console-page-v3 .glass-panel h2 > i,
    .console-page-v3 .glass-panel h3 > i { color: var(--th-accent) !important; }
    .console-page-v3 .btn-solid,
    .console-page-v3 .btn-glass,
    .studio-workspace-v3 .btn-solid,
    .studio-workspace-v3 .btn-glass {
      min-height: 30px;
      border-radius: 6px !important;
      box-shadow: none !important;
      transform: none !important;
      white-space: nowrap;
    }
    .console-page-v3 .btn-solid,
    .studio-workspace-v3 .btn-solid {
      border: 1px solid var(--th-accent) !important;
      background: var(--th-accent) !important;
      color: color-mix(in srgb, var(--th-bg) 92%, #000) !important;
    }
    .console-page-v3 .btn-solid:hover,
    .studio-workspace-v3 .btn-solid:hover { filter: brightness(1.08); }

    .model-details-overlay {
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .model-details-overlay.hidden { display: none !important; }
    .model-details-drawer {
      width: min(760px, 100vw);
      height: 100%;
      overflow-y: auto;
      background: var(--th-bg-2);
      border-left: 1px solid var(--th-border-top);
      box-shadow: -18px 0 56px rgba(0, 0, 0, 0.35);
    }
    .model-details-tab.active {
      color: var(--th-text);
      border-color: color-mix(in srgb, var(--th-accent) 45%, transparent);
      background: color-mix(in srgb, var(--th-accent) 12%, transparent);
    }
    @media (max-width: 900px) {
      .model-details-drawer { width: 100vw; border-left: 0; }
    }
    .console-page-v3 .btn-glass,
    .studio-workspace-v3 .btn-glass {
      border: 1px solid var(--th-border) !important;
      background: color-mix(in srgb, var(--th-bg-2) 70%, transparent) !important;
      color: var(--th-text-2) !important;
    }
    .console-page-v3 .btn-glass:hover,
    .studio-workspace-v3 .btn-glass:hover {
      border-color: var(--th-border-top) !important;
      background: color-mix(in srgb, var(--th-accent) 8%, transparent) !important;
      color: var(--th-text) !important;
    }
    .nexus-toast-region {
      position: fixed;
      top: calc(var(--app-header-height, 64px) + 14px);
      right: 18px;
      z-index: 120;
      display: flex;
      width: min(420px, calc(100vw - 28px));
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
    }
    .nexus-toast {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      padding: 12px 12px 12px 10px;
      border: 1px solid color-mix(in srgb, var(--th-border-top) 72%, transparent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--th-bg-2) 94%, #000);
      color: var(--th-text);
      box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
      pointer-events: auto;
      opacity: 0;
      transform: translate3d(18px, -8px, 0) scale(.98);
      animation: nexus-toast-in .22s ease forwards;
    }
    .nexus-toast.is-leaving { animation: nexus-toast-out .18s ease forwards; }
    .nexus-toast-icon {
      display: inline-flex;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      background: color-mix(in srgb, var(--toast-accent) 16%, transparent);
      color: var(--toast-accent);
    }
    .nexus-toast-title {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }
    .nexus-toast-message {
      max-height: 180px;
      margin-top: 3px;
      overflow: auto;
      color: var(--th-text-2);
      font: 11px/1.55 'DM Mono', monospace;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .nexus-toast-action {
      align-self: end;
      min-height: 26px;
      padding: 0 9px;
      border: 1px solid color-mix(in srgb, var(--toast-accent) 38%, transparent);
      border-radius: 6px;
      background: color-mix(in srgb, var(--toast-accent) 10%, transparent);
      color: var(--toast-accent);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .nexus-toast-action:hover { background: color-mix(in srgb, var(--toast-accent) 18%, transparent); }
    .nexus-toast-close {
      display: inline-flex;
      width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      align-self: start;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--th-text-2);
      cursor: pointer;
    }
    .nexus-toast-close:hover { background: rgba(255, 255, 255, .07); color: var(--th-text); }
    .nexus-toast[data-type='success'] { --toast-accent: #34d399; }
    .nexus-toast[data-type='error'] { --toast-accent: #fb7185; }
    .nexus-toast[data-type='warning'] { --toast-accent: #fbbf24; }
    .nexus-toast[data-type='info'] { --toast-accent: #67e8f9; }
    @keyframes nexus-toast-in { to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
    @keyframes nexus-toast-out { to { opacity: 0; transform: translate3d(18px, -8px, 0) scale(.98); } }
    @media (max-width: 640px) {
      .nexus-toast-region { top: calc(var(--app-header-height, 64px) + 10px); right: 14px; width: calc(100vw - 28px); }
      .nexus-toast { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 10px; }
      .nexus-toast-icon { width: 26px; height: 26px; }
    }
    :root, html[data-theme="obsidian"] {
      --nexus-prompt-overlay: rgba(0, 0, 0, .72);
      --nexus-prompt-bg: #0a0b10;
      --nexus-prompt-text: #f5f5f7;
      --nexus-prompt-muted: #a1a1aa;
      --nexus-prompt-border: rgba(255, 255, 255, .14);
      --nexus-prompt-border-top: rgba(255, 255, 255, .24);
      --nexus-prompt-input-bg: rgba(255, 255, 255, .06);
      --nexus-prompt-input-border: rgba(255, 255, 255, .15);
      --nexus-prompt-accent: #67e8f9;
      --nexus-prompt-accent-soft: rgba(103, 232, 249, .10);
      --nexus-prompt-confirm-bg: #e8fbff;
      --nexus-prompt-confirm-text: #081014;
      --nexus-prompt-cancel-bg: transparent;
      --nexus-prompt-cancel-hover: rgba(255, 255, 255, .07);
    }
    html[data-theme="pine-green"] {
      --nexus-prompt-overlay: rgba(245, 245, 247, .72);
      --nexus-prompt-bg: rgba(255, 255, 255, .97);
      --nexus-prompt-text: #1d1d1f;
      --nexus-prompt-muted: #5f6368;
      --nexus-prompt-border: rgba(0, 0, 0, .14);
      --nexus-prompt-border-top: rgba(255, 255, 255, .95);
      --nexus-prompt-input-bg: rgba(0, 0, 0, .04);
      --nexus-prompt-input-border: rgba(0, 0, 0, .16);
      --nexus-prompt-accent: #0071e3;
      --nexus-prompt-accent-soft: rgba(0, 113, 227, .10);
      --nexus-prompt-confirm-bg: #0071e3;
      --nexus-prompt-confirm-text: #ffffff;
      --nexus-prompt-cancel-bg: rgba(0, 0, 0, .04);
      --nexus-prompt-cancel-hover: rgba(0, 0, 0, .08);
    }
    html[data-theme="graphite-amber"] {
      --nexus-prompt-overlay: rgba(0, 0, 0, .72);
      --nexus-prompt-bg: #17181c;
      --nexus-prompt-text: #f2f2f5;
      --nexus-prompt-muted: #a5a6ad;
      --nexus-prompt-border: rgba(255, 255, 255, .14);
      --nexus-prompt-border-top: rgba(255, 255, 255, .24);
      --nexus-prompt-input-bg: rgba(255, 255, 255, .07);
      --nexus-prompt-input-border: rgba(255, 255, 255, .17);
      --nexus-prompt-accent: #7dd3fc;
      --nexus-prompt-accent-soft: rgba(125, 211, 252, .11);
      --nexus-prompt-confirm-bg: #d6f3ff;
      --nexus-prompt-confirm-text: #0b1720;
      --nexus-prompt-cancel-bg: transparent;
      --nexus-prompt-cancel-hover: rgba(255, 255, 255, .08);
    }
    html[data-theme="graphite-amber"] {
      --nexus-prompt-overlay: rgba(2, 7, 18, .76);
      --nexus-prompt-bg: #0e1830;
      --nexus-prompt-text: #eef5ff;
      --nexus-prompt-muted: #9db0d0;
      --nexus-prompt-border: rgba(120, 170, 255, .20);
      --nexus-prompt-border-top: rgba(160, 200, 255, .32);
      --nexus-prompt-input-bg: rgba(120, 170, 255, .09);
      --nexus-prompt-input-border: rgba(120, 170, 255, .22);
      --nexus-prompt-accent: #8fb5ff;
      --nexus-prompt-accent-soft: rgba(143, 181, 255, .12);
      --nexus-prompt-confirm-bg: #7db8ff;
      --nexus-prompt-confirm-text: #09152b;
      --nexus-prompt-cancel-bg: transparent;
      --nexus-prompt-cancel-hover: rgba(120, 170, 255, .12);
    }
    html[data-theme="pine-green"] {
      --nexus-prompt-overlay: rgba(1, 12, 8, .76);
      --nexus-prompt-bg: #081c16;
      --nexus-prompt-text: #e6fff3;
      --nexus-prompt-muted: #9bc7b3;
      --nexus-prompt-border: rgba(52, 211, 153, .20);
      --nexus-prompt-border-top: rgba(110, 240, 190, .30);
      --nexus-prompt-input-bg: rgba(52, 211, 153, .08);
      --nexus-prompt-input-border: rgba(52, 211, 153, .22);
      --nexus-prompt-accent: #67e8b0;
      --nexus-prompt-accent-soft: rgba(103, 232, 176, .12);
      --nexus-prompt-confirm-bg: #b7f7d5;
      --nexus-prompt-confirm-text: #062016;
      --nexus-prompt-cancel-bg: transparent;
      --nexus-prompt-cancel-hover: rgba(52, 211, 153, .12);
    }
    .nexus-prompt-overlay {
      position: fixed;
      inset: 0;
      margin: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      border: 0;
      outline: 0;
      z-index: 130;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: var(--nexus-prompt-overlay);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, visibility .18s ease;
    }
    .nexus-prompt-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
    .nexus-prompt-overlay::backdrop { background: transparent; }
    .nexus-prompt-card {
      width: min(460px, 100%);
      padding: 18px;
      border: 1px solid var(--nexus-prompt-border);
      border-top-color: var(--nexus-prompt-border-top);
      border-radius: 14px;
      background: var(--nexus-prompt-bg);
      color: var(--nexus-prompt-text);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
      transform: translateY(8px) scale(.98);
      transition: transform .2s cubic-bezier(.16, 1, .3, 1);
    }
    .nexus-prompt-overlay.is-open .nexus-prompt-card { transform: translateY(0) scale(1); }
    .nexus-prompt-heading { display: flex; align-items: center; gap: 10px; }
    .nexus-prompt-icon {
      display: inline-flex;
      width: 30px;
      height: 30px;
      align-items: center;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--nexus-prompt-accent) 34%, transparent);
      border-radius: 8px;
      background: var(--nexus-prompt-accent-soft);
      color: var(--nexus-prompt-accent);
    }
    .nexus-prompt-title { color: var(--nexus-prompt-text); font: 700 14px/1.35 'Outfit', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
    .nexus-prompt-close {
      display: inline-flex;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--nexus-prompt-muted);
      cursor: pointer;
    }
    .nexus-prompt-close:hover { background: var(--nexus-prompt-cancel-hover); color: var(--nexus-prompt-text); }
    .nexus-prompt-message {
      margin: 14px 0 10px;
      color: var(--nexus-prompt-muted);
      font: 12px/1.55 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .nexus-prompt-input {
      display: block;
      width: 100%;
      min-height: 40px;
      padding: 9px 11px;
      border: 1px solid var(--nexus-prompt-input-border);
      border-radius: 8px;
      outline: 0;
      background: var(--nexus-prompt-input-bg);
      color: var(--nexus-prompt-text);
      font: 12px/1.4 'DM Mono', 'PingFang SC', 'Microsoft YaHei', monospace;
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .nexus-prompt-input:focus { border-color: color-mix(in srgb, var(--nexus-prompt-accent) 70%, transparent); background: color-mix(in srgb, var(--nexus-prompt-input-bg) 70%, var(--nexus-prompt-accent-soft)); box-shadow: 0 0 0 3px var(--nexus-prompt-accent-soft); }
    .nexus-prompt-input::placeholder { color: var(--nexus-prompt-muted); opacity: .82; }
    .nexus-prompt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
    .nexus-prompt-button {
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid var(--nexus-prompt-border);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .nexus-prompt-button.cancel { background: var(--nexus-prompt-cancel-bg); color: var(--nexus-prompt-muted); }
    .nexus-prompt-button.cancel:hover { background: var(--nexus-prompt-cancel-hover); color: var(--nexus-prompt-text); }
    .nexus-prompt-button.confirm { border-color: color-mix(in srgb, var(--nexus-prompt-accent) 42%, transparent); background: var(--nexus-prompt-confirm-bg); color: var(--nexus-prompt-confirm-text); }
    .nexus-prompt-button.confirm:hover { filter: brightness(1.06); }
    @media (max-width: 640px) {
      .nexus-prompt-overlay { padding: 14px; }
      .nexus-prompt-card { padding: 16px; }
    }
    .nexus-confirm-overlay {
      position: fixed;
      inset: 0;
      margin: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      border: 0;
      outline: 0;
      z-index: 131;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: var(--nexus-prompt-overlay);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, visibility .18s ease;
    }
    .nexus-confirm-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
    .nexus-confirm-overlay::backdrop { background: transparent; }
    .nexus-confirm-card {
      width: min(460px, 100%);
      padding: 18px;
      border: 1px solid var(--nexus-prompt-border);
      border-top-color: var(--nexus-prompt-border-top);
      border-radius: 14px;
      background: var(--nexus-prompt-bg);
      color: var(--nexus-prompt-text);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
      transform: translateY(8px) scale(.98);
      transition: transform .2s cubic-bezier(.16, 1, .3, 1);
    }
    .nexus-confirm-overlay.is-open .nexus-confirm-card { transform: translateY(0) scale(1); }
    .nexus-confirm-message { margin: 14px 0 10px; color: var(--nexus-prompt-muted); font: 12px/1.55 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; white-space: pre-line; }
    @media (max-width: 640px) { .nexus-confirm-overlay { padding: 14px; } .nexus-confirm-card { padding: 16px; } }
    .console-page-v3 .input-apple,
    .console-page-v3 input,
    .console-page-v3 select,
    .console-page-v3 textarea,
    .studio-workspace-v3 .input-apple,
    .studio-workspace-v3 input,
    .studio-workspace-v3 select,
    .studio-workspace-v3 textarea {
      border-radius: 6px !important;
      border-color: var(--th-border) !important;
      background: var(--th-input-bg) !important;
      box-shadow: none !important;
    }
    .console-page-v3 .input-apple:focus,
    .console-page-v3 input:focus,
    .console-page-v3 select:focus,
    .console-page-v3 textarea:focus,
    .studio-workspace-v3 .input-apple:focus,
    .studio-workspace-v3 input:focus,
    .studio-workspace-v3 select:focus,
    .studio-workspace-v3 textarea:focus {
      border-color: color-mix(in srgb, var(--th-accent) 65%, transparent) !important;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-accent) 12%, transparent) !important;
    }
    .console-page-v3 .overflow-x-auto:has(> table) {
      border: 1px solid var(--th-border);
      border-radius: 7px;
      background: color-mix(in srgb, var(--th-bg) 55%, transparent);
    }
    .console-page-v3 .table-apple:not(.channel-directory-table) { min-width: 720px; }
    .console-page-v3 .table-apple thead th {
      padding: 10px 12px !important;
      background: color-mix(in srgb, var(--th-bg-2) 88%, transparent);
      color: var(--th-text-2) !important;
      font: 500 12px 'DM Mono', monospace !important;
      letter-spacing: 0 !important;
      white-space: nowrap;
    }
    .console-page-v3 .table-apple tbody td { padding: 10px 12px !important; color: var(--th-text-secondary); font-size: 13px; }
    .console-page-v3 .table-apple tbody tr { border-color: color-mix(in srgb, var(--th-border) 55%, transparent) !important; }
    .console-page-v3 .table-apple tbody tr:hover { background: color-mix(in srgb, var(--th-accent) 5%, transparent) !important; }
    /* 指标区布局由 ui-readability.css (最后加载的语义层) 定义: 独立卡片 + 间距。
       这里原先把四张卡拼成"整块 + 竖分隔条" (gap:0 / 容器外框 / border-right),
       与独立卡片设计冲突 —— 实测 gap 被压成 0px, 卡片变成连体分格。已移除。 */
    .dashboard-v3 .bento-metric:last-child { border-right: 0; }
    .dashboard-v3 .bento-metric::after { display: none; }
    .dashboard-v3 .bento-metric:hover { background: color-mix(in srgb, var(--th-accent) 4%, transparent) !important; transform: none !important; }
    .dashboard-v3 .bento-label { letter-spacing: 0; }
    .dashboard-v3 .bento-label svg { color: var(--th-accent) !important; }
    .dashboard-v3 .bento-value { color: var(--th-text) !important; font: 700 26px/1.1 'Outfit', sans-serif; letter-spacing: 0; }
    .dashboard-v3 #dash-recent-logs > * { border-radius: 6px !important; }
    /* 我的号池 · 选择栏: 勾选后才出现批量按钮 (按钮自身带 hidden 由 JS 切换),
       常驻会让"未选择"状态下出现一排无效按钮。 */
    .my-pool-selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0 2px; }
    .my-pool-selection-bar input[type="checkbox"] { width: 13px; height: 13px; }
    /* 选择列窄且居中, 其余列左对齐。 */
    #my-pool-account-table th:nth-child(1), #my-pool-account-table td:nth-child(1) { text-align: center; padding-inline: 4px; }
    #my-pool-account-table .my-pool-row-select { width: 13px; height: 13px; }
    /* 6 列宽度必须全部显式声明: table-layout:fixed 下未声明宽度的列会被压成 0 宽 ——
       实测"操作"列曾因此变成 0px, 按钮全部不可见 (用户无法操作账号)。
       加/删列时务必同步这张表 (护栏测试会拦下不一致)。 */
    #my-pool-account-table { width: 100%; table-layout: fixed; }
    #my-pool-account-table th:nth-child(1) { width: 4%; }   /* 选择 */
    #my-pool-account-table th:nth-child(2) { width: 18%; }  /* 账号 */
    #my-pool-account-table th:nth-child(3) { width: 16%; }  /* 今日用量 */
    #my-pool-account-table th:nth-child(4) { width: 20%; }  /* 状态 */
    #my-pool-account-table th:nth-child(5) { width: 12%; }  /* 出口 */
    #my-pool-account-table th:nth-child(6) { width: 30%; }  /* 操作 */
    #my-pool-account-table td { vertical-align: top; }
    #my-pool-account-table .my-account-status { white-space: nowrap; }
    #my-pool-account-table .my-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
    #my-pool-account-table .my-account-more { text-align: left; }
    #my-pool-account-table .my-account-more[open] { flex-basis: 100%; }
    #my-pool-account-table .my-account-more-content { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
    /* 出口下拉收窄以适配 12% 列宽; 否则它会撑开该列并把整张表顶成横向滚动。 */
    #my-pool-account-table .my-egress-select { max-width: 100%; }
    #page-billing .billing-band { scroll-margin-top: calc(var(--app-header-height, 64px) + 16px); background: transparent; }
    #page-billing .billing-section-nav { position: sticky; top: calc(var(--app-header-height, 64px) + 8px); z-index: 20; padding: 8px 0; background: color-mix(in srgb, var(--th-bg) 92%, transparent); backdrop-filter: blur(12px); }
    #page-billing .billing-section-focus { outline: 1px solid var(--th-accent); outline-offset: 5px; }
    #page-billing .billing-band > .rounded-xl { border-color: var(--th-border); }
    @media (max-width: 767px) {
      #my-pool-account-table, #my-pool-account-table tbody { display: block; min-width: 0 !important; width: 100%; }
      #my-pool-account-table thead { display: none; }
      #my-pool-account-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 0; gap: 12px; }
      #my-pool-account-table td { display: block; padding: 0; min-width: 0; text-align: left; }
      #my-pool-account-table td:first-child, #my-pool-account-table td:last-child { grid-column: 1 / -1; }
      #my-pool-account-table td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--th-text-2); font-size: 11px; }
      #my-pool-account-table .my-account-actions { gap: 8px; }
    }
    .console-page-v3 #system-status-bar,
    .console-page-v3 #acct-batch-bar,
    .console-page-v3 #channels-batch-bar {
      border-radius: 7px !important;
      border-color: var(--th-border) !important;
      background: color-mix(in srgb, var(--th-bg) 58%, transparent) !important;
      box-shadow: none !important;
    }
    .console-page-v3 .badge-apple { border-radius: 5px !important; }
    .console-page-v3 .rounded-2xl,
    .console-page-v3 .rounded-3xl { border-radius: 8px !important; }
    .console-page-v3 .rounded-xl { border-radius: 7px !important; }
    .console-page-v3 .rounded-lg { border-radius: 6px !important; }
    .console-page-v3 .text-purple-400,
    .console-page-v3 .text-purple-300 { color: var(--th-accent) !important; }
    .console-sider .sider-nav-item > svg { width: 16px; height: 16px; color: var(--th-text-2) !important; stroke-width: 1.65; }
    .console-sider .sider-nav-item.active { color: var(--th-text) !important; border-color: color-mix(in srgb, var(--th-accent) 18%, transparent); background: color-mix(in srgb, var(--th-accent) 12%, transparent) !important; }
    .console-sider .sider-nav-item.active > svg { color: var(--th-accent) !important; }
    .studio-workspace-v3 {
      width: 100%;
      max-width: none !important;
      margin: 0;
      padding: 16px clamp(14px, 2vw, 28px) 32px !important;
      gap: 14px !important;
      box-sizing: border-box;
    }
    .studio-workspace-v3 > .glass-panel,
    .studio-workspace-v3 .glass-panel {
      border: 1px solid var(--th-border) !important;
      border-radius: 8px !important;
      background: color-mix(in srgb, var(--th-bg-2) 78%, transparent) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: none !important;
    }
    .studio-workspace-v3 > .glass-panel:first-child { padding: 10px 14px !important; }
    .studio-workspace-v3 .glass-panel:hover { transform: none !important; border-color: var(--th-border-top) !important; }
    .studio-workspace-v3 .text-purple-400,
    .studio-workspace-v3 .text-purple-300 { color: var(--th-accent) !important; }
    @media (max-width: 1023px) {
      .console-content > .console-page-v3 { padding: 16px 14px 32px !important; }
      .console-page-heading { align-items: flex-start; flex-direction: column; }
      .dashboard-v3 .dashboard-metrics-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .studio-workspace-v3 { padding: 12px 14px 28px !important; }
    }
    @media (max-width: 767px) {
      .console-content > .console-page-v3 { padding: 13px 10px 28px !important; gap: 12px !important; }
      .console-page-heading h1 { font-size: 20px; }
      .console-page-heading-actions { width: 100%; }
      .console-page-heading-actions .btn-solid,
      .console-page-heading-actions .btn-glass { flex: 1 1 auto; justify-content: center; }
      .console-page-v3 > .glass-panel { padding: 13px !important; }
      .console-page-v3 .glass-panel > .flex.items-center.justify-between,
      .console-page-v3 .glass-panel > .flex.flex-col.lg\:flex-row { align-items: flex-start !important; }
      .studio-workspace-v3 { padding: 10px !important; }
      .studio-workspace-v3 > .glass-panel:first-child { align-items: flex-start !important; }
      .studio-workspace-v3 .studio-canvas-toolbar { align-items: flex-start !important; flex-direction: column; gap: 9px; }
      .studio-workspace-v3 .studio-canvas-actions { width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; }
      .studio-workspace-v3 .studio-canvas-actions > button { min-width: 0; justify-content: center; }
      .studio-workspace-v3 .studio-canvas-actions > button:last-child { grid-column: 1 / -1; }
      .console-page-v3 #settings-operations .settings-operations-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px !important; }
      .console-page-v3 #settings-operations .settings-operations-row > .settings-divider,
      .console-page-v3 #settings-operations .settings-operations-row > span { display: none; }
      .console-page-v3 #settings-operations .settings-operations-row > button { width: 100%; grid-column: 1 / -1; justify-content: center; }
    }

    /* ========================================================================
       WRITING WORKSPACE V3
       Project-level manuscript, outline and setting library share one shell.
       The existing page ids and handlers remain stable for the current API.
       ======================================================================== */
    #page-novel.novel-workspace-page {
      padding: 0 !important;
      gap: 0 !important;
      min-height: calc(100svh - var(--app-header-height));
      height: calc(100svh - var(--app-header-height));
      max-width: none;
      overflow: hidden;
    }
    .novel-workspace-shell {
      display: grid;
      grid-template-rows: 54px minmax(0, 1fr);
      min-height: 100%;
      height: 100%;
      background: var(--th-bg, #061117);
      color: var(--th-text, #e8fbff);
    }
    .novel-workspace-topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 16px;
      border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16));
      background: var(--th-glass, rgba(5, 20, 27, .92));
      min-width: 0;
    }
    .novel-back-button,
    .novel-icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      border: 1px solid var(--th-border, rgba(73, 211, 232, .16));
      border-radius: 7px;
      background: color-mix(in srgb, var(--th-bg-2) 84%, transparent);
      color: var(--th-text-2, #8db4bd);
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }
    .novel-back-button:hover,
    .novel-icon-button:hover {
      color: var(--th-accent, #27d3e6);
      border-color: var(--th-border-top, rgba(115, 235, 245, .36));
      background: color-mix(in srgb, var(--th-accent) 10%, transparent);
    }
    .novel-back-button svg,
    .novel-icon-button svg { width: 15px; height: 15px; }
    .novel-brand-lockup {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      width: 145px;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .novel-brand-lockup svg { width: 17px; height: 17px; color: var(--th-accent, #27d3e6); }
    .novel-project-lockup { min-width: 0; width: 180px; }
    .novel-project-lockup strong,
    .novel-project-lockup span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .novel-project-lockup strong { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; color: var(--th-text, #e8fbff); }
    .novel-project-lockup span { margin-top: 2px; color: var(--th-text-2, #8db4bd); font: 400 9px 'DM Mono', monospace; }
    .novel-mode-switch {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--th-border, rgba(73, 211, 232, .16));
      border-radius: 7px;
      background: color-mix(in srgb, var(--th-bg-2) 88%, transparent);
      flex: 0 0 auto;
    }
    .novel-mode-switch button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 25px;
      padding: 0 10px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--th-text-2, #8db4bd);
      font-size: 10px;
      white-space: nowrap;
    }
    .novel-mode-switch button.active { background: color-mix(in srgb, var(--th-accent) 13%, transparent); color: var(--th-text, #e8fbff); }
    .novel-mode-switch svg { width: 13px; height: 13px; }
    .novel-top-spacer { flex: 1 1 auto; min-width: 8px; }
    .novel-save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--th-accent-2, #35e0a1); font: 500 10px 'DM Mono', monospace; white-space: nowrap; }
    .novel-save-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--th-accent-2, #35e0a1); }
    .novel-save-state.pending { color: var(--th-text-2, #8db4bd); }
    .novel-save-state.pending::before { background: var(--th-warning); }
    .novel-workspace-grid {
      display: grid;
      grid-template-columns: 58px 240px minmax(0, 1fr) 320px;
      min-height: 0;
      height: 100%;
    }
    .novel-activity-rail {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 10px 0;
      border-right: 1px solid var(--th-border, rgba(73, 211, 232, .16));
      background: color-mix(in srgb, var(--th-bg) 92%, transparent);
    }
    .novel-activity-spacer { flex: 1 1 auto; }
    .novel-activity-button {
      position: relative;
      display: flex;
      width: 48px;
      min-height: 43px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 3px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--th-text-2, #8db4bd);
      font-size: 9px;
      transition: background .18s ease, color .18s ease;
    }
    .novel-activity-button:hover { background: color-mix(in srgb, var(--th-accent) 8%, transparent); color: var(--th-text, #e8fbff); }
    .novel-activity-button.active { background: color-mix(in srgb, var(--th-accent) 12%, transparent); color: var(--th-accent, #27d3e6); }
    .novel-activity-button.active::before { content: ''; position: absolute; left: -5px; top: 8px; width: 2px; height: 27px; background: var(--th-accent, #27d3e6); border-radius: 2px; }
    .novel-activity-button svg { width: 16px; height: 16px; }
    .novel-side-panel {
      min-width: 0;
      overflow: hidden;
      border-right: 1px solid var(--th-border, rgba(73, 211, 232, .16));
      background: color-mix(in srgb, var(--th-bg-2) 92%, transparent);
    }
    .novel-side-panel-header { height: 47px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-side-panel-header strong { font: 700 12px 'Outfit', sans-serif; }
    .novel-side-panel-header .novel-top-spacer { min-width: 0; }
    .novel-side-panel-header button { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--th-text-2, #8db4bd); }
    .novel-side-panel-header button:hover { background: color-mix(in srgb, var(--th-accent) 10%, transparent); color: var(--th-accent, #27d3e6); }
    .novel-side-panel-header svg { width: 13px; height: 13px; }
    .novel-side-search { display: flex; align-items: center; gap: 7px; height: 30px; margin: 10px; padding: 0 8px; border: 1px solid var(--th-border, rgba(73, 211, 232, .16)); border-radius: 6px; background: color-mix(in srgb, var(--th-bg) 84%, transparent); color: var(--th-text-2, #8db4bd); font-size: 10px; }
    .novel-side-search svg { width: 13px; height: 13px; flex: 0 0 auto; }
    .novel-side-scroll { height: calc(100% - 50px); overflow-y: auto; padding-bottom: 16px; }
    .novel-side-section { padding: 7px 9px 2px; }
    .novel-side-section-title { display: flex; align-items: center; gap: 6px; height: 26px; color: var(--th-text-2, #8db4bd); font-size: 10px; }
    .novel-side-section-title svg { width: 13px; height: 13px; }
    .novel-side-row { display: flex; align-items: center; gap: 7px; min-height: 31px; margin: 2px 0; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: var(--th-text-2, #8db4bd); font-size: 10px; text-align: left; width: 100%; background: transparent; }
    .novel-side-row:hover { background: color-mix(in srgb, var(--th-accent) 6%, transparent); color: var(--th-text, #e8fbff); }
    .novel-side-row.active { border-color: color-mix(in srgb, var(--th-accent) 28%, transparent); background: color-mix(in srgb, var(--th-accent) 11%, transparent); color: var(--th-text, #e8fbff); }
    .novel-side-row svg { width: 13px; height: 13px; color: var(--th-text-2, #8db4bd); flex: 0 0 auto; }
    .novel-side-row.active svg { color: var(--th-accent, #27d3e6); }
    .novel-side-row .count { margin-left: auto; color: var(--th-text-2, #8db4bd); font: 400 9px 'DM Mono', monospace; }
    .novel-side-row.indent { padding-left: 23px; }
    .novel-side-empty { margin: 10px 9px; padding: 14px 11px; border: 1px dashed var(--th-border, rgba(73, 211, 232, .16)); border-radius: 7px; color: var(--th-text-2, #8db4bd); font-size: 10px; line-height: 1.65; }
    .novel-side-empty strong { display: block; margin-bottom: 4px; color: var(--th-text, #e8fbff); font-size: 11px; }
    .novel-add-button { display: flex; align-items: center; justify-content: center; gap: 5px; height: 29px; width: calc(100% - 18px); margin: 8px 9px; border: 1px dashed color-mix(in srgb, var(--th-accent) 42%, transparent); border-radius: 6px; background: transparent; color: var(--th-accent, #27d3e6); font-size: 10px; }
    .novel-add-button:hover { background: color-mix(in srgb, var(--th-accent) 8%, transparent); }
    .novel-add-button svg { width: 12px; height: 12px; }
    .novel-editor-panel { display: grid; grid-template-rows: 45px minmax(0, 1fr) 28px; min-width: 0; background: color-mix(in srgb, var(--th-bg-2) 96%, transparent); }
    .novel-editor-toolbar { display: flex; align-items: center; gap: 5px; padding: 0 11px; border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16)); background: color-mix(in srgb, var(--th-bg-2) 92%, transparent); }
    .novel-breadcrumb { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--th-text-2, #8db4bd); font: 400 10px 'DM Mono', monospace; }
    .novel-breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--th-text, #e8fbff); font-weight: 500; }
    .novel-breadcrumb svg { width: 11px; height: 11px; flex: 0 0 auto; }
    .novel-tool-button { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--th-text-2, #8db4bd); display: inline-flex; align-items: center; justify-content: center; }
    .novel-tool-button:hover { background: color-mix(in srgb, var(--th-accent) 10%, transparent); color: var(--th-accent, #27d3e6); }
    .novel-tool-button svg { width: 14px; height: 14px; }
    .novel-editor-stage { position: relative; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--th-bg) 96%, transparent); }
    .novel-editor-copy { width: 100%; max-width: none; margin: 0; padding: 42px clamp(20px, 4vw, 54px) 80px; box-sizing: border-box; }
    .novel-editor-copy .novel-meta { margin-bottom: 13px; color: var(--th-text-2, #8db4bd); font: 500 10px 'DM Mono', monospace; }
    .novel-editor-copy h2 { margin: 0 0 28px; color: var(--th-text, #e8fbff); font: 700 28px/1.2 'Outfit', sans-serif; }
    .novel-editor-copy p { margin: 0 0 17px; color: color-mix(in srgb, var(--th-text) 78%, transparent); font-size: 14px; line-height: 2.05; }
    .novel-editor-copy textarea#novel-editor-text { display: block; width: 100%; min-height: 430px; padding: 0; border: 0; outline: 0; resize: vertical; background: transparent; color: color-mix(in srgb, var(--th-text) 84%, transparent); font: 400 14px/2.05 'Inter', sans-serif; box-shadow: none; }
    .novel-editor-copy textarea#novel-editor-text::placeholder { color: var(--th-text-2, #8db4bd); opacity: .72; }
    .novel-script-format-toolbar { display: flex; align-items: center; gap: 5px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-script-format-toolbar.hidden { display: none; }
    #novel-editor-empty[hidden], #novel-editor-document[hidden], #novel-editor-empty button[hidden] { display: none; }
    #novel-editor-empty { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
    #novel-editor-empty h2 { font-size: 20px; }
    #novel-editor-empty button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 6px; font-size: 14px; }
    .novel-script-format-toolbar button { height: 26px; padding: 0 8px; border: 1px solid var(--th-border, rgba(73, 211, 232, .16)); border-radius: 5px; background: color-mix(in srgb, var(--th-bg) 88%, transparent); color: var(--th-text-2, #8db4bd); font-size: 9px; }
    .novel-script-format-toolbar button:hover { border-color: var(--th-border-top, rgba(115, 235, 245, .36)); color: var(--th-text, #e8fbff); }
    .novel-workspace-shell[data-novel-mode="script"] .novel-editor-copy textarea#novel-editor-text { font-family: 'DM Mono', monospace; line-height: 1.9; }
    .novel-editor-actions { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-editor-actions .btn-solid, .novel-editor-actions .btn-glass { border-radius: 7px; font-size: 11px; }
    .novel-mention-menu { position: absolute; top: 175px; left: 48%; z-index: 2; width: 210px; padding: 5px; border: 1px solid var(--th-border-top, rgba(115, 235, 245, .36)); border-radius: 7px; background: color-mix(in srgb, var(--th-bg-2) 98%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
    .novel-mention-menu > small { display: block; padding: 5px 7px; color: var(--th-text-2, #8db4bd); font: 500 9px 'DM Mono', monospace; }
    .novel-mention-option { display: flex; align-items: center; gap: 7px; width: 100%; height: 30px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: var(--th-text-2, #8db4bd); font-size: 10px; text-align: left; }
    .novel-mention-option:hover, .novel-mention-option.active { background: color-mix(in srgb, var(--th-accent) 12%, transparent); color: var(--th-text, #e8fbff); }
    .novel-mention-option svg { width: 13px; height: 13px; }
    .novel-mention-option span { margin-left: auto; color: var(--th-text-2, #8db4bd); font: 400 8px 'DM Mono', monospace; }
    .novel-editor-status { display: flex; align-items: center; gap: 12px; padding: 0 11px; border-top: 1px solid var(--th-border, rgba(73, 211, 232, .16)); color: var(--th-text-2, #8db4bd); font: 400 9px 'DM Mono', monospace; }
    .novel-editor-status span:last-child { margin-left: auto; }
    .novel-editor-status .ok { color: var(--th-accent-2, #35e0a1); }
    .novel-inspector-panel { display: grid; grid-template-rows: 45px minmax(0, 1fr); min-width: 0; border-left: 1px solid var(--th-border, rgba(73, 211, 232, .16)); background: color-mix(in srgb, var(--th-bg-2) 94%, transparent); }
    .novel-inspector-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px; border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-inspector-tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 5px; background: transparent; color: var(--th-text-2, #8db4bd); font-size: 9px; }
    .novel-inspector-tab:hover, .novel-inspector-tab.active { background: color-mix(in srgb, var(--th-accent) 12%, transparent); color: var(--th-text, #e8fbff); }
    .novel-inspector-tab svg { width: 12px; height: 12px; }
    .novel-inspector-scroll { min-height: 0; overflow-y: auto; padding: 12px; }
    .novel-inspector-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
    .novel-inspector-title strong { font: 700 12px 'Outfit', sans-serif; }
    .novel-inspector-title span { color: var(--th-text-2, #8db4bd); font: 400 9px 'DM Mono', monospace; }
    .novel-inspector-section { padding: 11px 0; border-top: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-inspector-section:first-of-type { border-top: 0; }
    .novel-inspector-label { margin-bottom: 7px; color: var(--th-text-2, #8db4bd); font: 500 9px 'DM Mono', monospace; }
    .novel-inspector-section p { margin: 0; color: color-mix(in srgb, var(--th-text) 72%, transparent); font-size: 10px; line-height: 1.65; }
    .novel-context-row { display: flex; align-items: center; gap: 7px; min-height: 31px; border-bottom: 1px solid rgba(100, 198, 214, .08); color: var(--th-text-2, #8db4bd); font-size: 10px; }
    .novel-context-row:last-child { border-bottom: 0; }
    .novel-context-row svg { width: 13px; height: 13px; color: var(--th-text-2, #8db4bd); flex: 0 0 auto; }
    .novel-context-row strong { color: var(--th-text, #e8fbff); font-weight: 500; }
    .novel-context-row span { margin-left: auto; color: var(--th-text-2, #8db4bd); font: 400 8px 'DM Mono', monospace; }
    .novel-context-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .novel-context-tag { padding: 4px 6px; border: 1px solid var(--th-border, rgba(73, 211, 232, .16)); border-radius: 5px; color: var(--th-text-2, #8db4bd); font-size: 9px; }
    .novel-lock-note { display: flex; align-items: flex-start; gap: 7px; padding: 8px; border: 1px solid color-mix(in srgb, var(--th-success) 22%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--th-success) 5%, transparent); color: color-mix(in srgb, var(--th-text) 76%, transparent); font-size: 9px; line-height: 1.55; }
    .novel-lock-note svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--th-accent-2, #35e0a1); }
    .novel-empty-main { width: 100%; max-width: none; margin: 0; padding: 56px clamp(20px, 4vw, 48px); box-sizing: border-box; }
    .novel-empty-main h2 { margin: 0 0 8px; font: 700 24px 'Outfit', sans-serif; }
    .novel-empty-main p { margin: 0; color: var(--th-text-2, #8db4bd); font-size: 12px; line-height: 1.8; }
    .novel-outline-board { padding: 20px 24px; overflow: auto; }
    .novel-outline-board h2 { margin: 0 0 6px; font: 700 21px 'Outfit', sans-serif; }
    .novel-outline-board > p { margin: 0 0 18px; color: var(--th-text-2, #8db4bd); font-size: 11px; }
    .novel-outline-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
    .novel-outline-column { min-width: 0; padding-left: 12px; border-left: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-outline-column h3 { margin: 0 0 8px; font: 600 12px 'Outfit', sans-serif; color: var(--th-text, #e8fbff); }
    .novel-outline-node { margin-bottom: 8px; padding: 9px 10px; border: 1px solid var(--th-border, rgba(73, 211, 232, .16)); border-radius: 7px; background: color-mix(in srgb, var(--th-bg-2) 88%, transparent); }
    .novel-outline-node.active { border-color: color-mix(in srgb, var(--th-accent) 46%, transparent); background: color-mix(in srgb, var(--th-accent) 7%, transparent); }
    .novel-outline-node small { display: block; margin-bottom: 4px; color: var(--th-text-2, #8db4bd); font: 500 8px 'DM Mono', monospace; }
    .novel-outline-node strong { display: block; font-size: 11px; font-weight: 600; }
    .novel-outline-node p { margin: 5px 0 0; color: var(--th-text-2, #8db4bd); font-size: 9px; line-height: 1.55; }
    .novel-setting-editor { padding: 19px 24px; overflow: auto; }
    .novel-entity-header { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-entity-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--th-border-top, rgba(115, 235, 245, .36)); border-radius: 8px; background: color-mix(in srgb, var(--th-accent) 8%, transparent); color: var(--th-accent, #27d3e6); font: 700 16px 'Outfit', sans-serif; flex: 0 0 auto; }
    .novel-entity-header h2 { margin: 0 0 4px; font: 700 18px 'Outfit', sans-serif; }
    .novel-entity-header p { margin: 0; color: var(--th-text-2, #8db4bd); font-size: 10px; }
    .novel-entity-header .novel-top-spacer { min-width: 0; }
    .novel-form-section { padding: 14px 0; border-bottom: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
    .novel-form-section h3 { margin: 0 0 9px; font: 600 11px 'Outfit', sans-serif; }
    .novel-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .novel-field label { display: block; margin-bottom: 5px; color: var(--th-text-2, #8db4bd); font: 500 8px 'DM Mono', monospace; }
    .novel-field-value { min-height: 30px; padding: 7px 8px; border: 1px solid var(--th-border, rgba(73, 211, 232, .16)); border-radius: 6px; background: color-mix(in srgb, var(--th-bg) 86%, transparent); color: color-mix(in srgb, var(--th-text) 78%, transparent); font-size: 10px; line-height: 1.5; }
    .novel-field-wide { grid-column: 1 / -1; }
    .novel-ability { margin: 6px 0; padding: 8px 10px; border-left: 2px solid color-mix(in srgb, var(--th-accent) 60%, transparent); background: color-mix(in srgb, var(--th-accent) 5%, transparent); }
    .novel-ability.warning { border-left-color: color-mix(in srgb, var(--th-warning) 65%, transparent); background: color-mix(in srgb, var(--th-warning) 5%, transparent); }
    .novel-ability strong { display: block; font-size: 10px; font-weight: 600; }
    .novel-ability p { margin: 4px 0 0; color: var(--th-text-2, #8db4bd); font-size: 9px; line-height: 1.55; }
    .novel-settings-drawer,
    .novel-inspector-drawer,
    .novel-mobile-bottom-sheet { display: none; }
    @media (max-width: 1279px) {
      .novel-workspace-grid { grid-template-columns: 58px 240px minmax(0, 1fr); }
      .novel-inspector-panel { position: absolute; top: var(--app-header-height); right: 0; bottom: 0; z-index: 20; width: min(320px, 42vw); box-shadow: -18px 0 42px rgba(0, 0, 0, .28); }
      .novel-inspector-panel.is-collapsed { display: none; }
    }
    @media (max-width: 900px) {
      #page-novel.novel-workspace-page { min-height: calc(100svh - var(--app-header-height)); height: calc(100svh - var(--app-header-height)); }
      .novel-workspace-topbar { padding: 0 10px; gap: 7px; }
      .novel-brand-lockup { width: 92px; font-size: 11px; }
      .novel-project-lockup { width: 135px; }
      .novel-mode-switch button { padding: 0 7px; }
      .novel-save-state { display: none; }
      .novel-workspace-grid { grid-template-columns: 54px minmax(0, 1fr); }
      .novel-side-panel { position: absolute; top: var(--app-header-height); left: 54px; bottom: 0; z-index: 22; width: 250px; box-shadow: 18px 0 38px rgba(0, 0, 0, .32); }
      .novel-side-panel.is-collapsed { display: none; }
      .novel-inspector-panel { top: var(--app-header-height); width: min(340px, 72vw); }
      .novel-editor-panel { grid-column: 2; }
    }
    @media (max-width: 767px) {
      .novel-workspace-topbar { grid-template-columns: auto; }
      .novel-brand-lockup { width: auto; }
      .novel-project-lockup { width: auto; max-width: 130px; }
      .novel-mode-switch { margin-left: auto; }
      .novel-mode-switch button { font-size: 0; width: 30px; padding: 0; justify-content: center; }
      .novel-mode-switch svg { width: 14px; height: 14px; }
      .novel-topbar-action { display: none; }
      .novel-workspace-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 48px; }
      .novel-activity-rail { grid-row: 2; grid-column: 1; flex-direction: row; justify-content: space-around; padding: 3px 6px; border-right: 0; border-top: 1px solid var(--th-border, rgba(73, 211, 232, .16)); }
      .novel-activity-button { width: 52px; min-height: 40px; }
      .novel-activity-button.active::before { left: 17px; top: -3px; width: 18px; height: 2px; }
      .novel-side-panel { top: 0; left: 0; bottom: 48px; width: min(330px, 88vw); }
      .novel-side-panel { display: none; }
      .novel-workspace-shell.mobile-side-open .novel-side-panel { display: block; }
      .novel-inspector-panel { top: auto; right: 8px; bottom: 56px; width: calc(100% - 16px); height: min(56svh, 430px); border: 1px solid var(--th-border-top, rgba(115, 235, 245, .36)); border-radius: 8px; box-shadow: 0 18px 42px rgba(0, 0, 0, .38); }
      .novel-inspector-panel { display: none; }
      .novel-workspace-shell.inspector-mobile-open .novel-inspector-panel { display: grid; }
      .novel-editor-panel { grid-column: 1; grid-row: 1; grid-template-rows: 43px minmax(0, 1fr) 25px; }
      .novel-editor-copy { max-width: none; padding: 28px 20px 68px; }
      .novel-editor-copy h2 { font-size: 23px; margin-bottom: 21px; }
      .novel-editor-copy p, .novel-editor-copy textarea#novel-editor-text { font-size: 14px; line-height: 1.9; }
      .novel-editor-actions { flex-wrap: wrap; }
      .novel-editor-actions .btn-solid, .novel-editor-actions .btn-glass { font-size: 10px; }
      .novel-mention-menu { top: 130px; left: 12px; right: 12px; width: auto; }
      .novel-outline-columns { grid-template-columns: 1fr; }
      .novel-setting-editor { padding: 16px; }
      .novel-field-grid { grid-template-columns: 1fr; }
      .novel-field-wide { grid-column: auto; }
      .novel-editor-status { gap: 7px; font-size: 8px; }
      .novel-editor-status span:nth-child(2), .novel-editor-status span:nth-child(4) { display: none; }
    }
    .novel-workspace-shell.side-collapsed .novel-side-panel { display: none; }
    .novel-workspace-shell.side-collapsed .novel-workspace-grid { grid-template-columns: 58px minmax(0, 1fr) 320px; }
    .novel-workspace-shell.inspector-collapsed .novel-inspector-panel { display: none; }
    .novel-workspace-shell.inspector-collapsed .novel-workspace-grid { grid-template-columns: 58px 240px minmax(0, 1fr); }
    .novel-workspace-shell.side-collapsed.inspector-collapsed .novel-workspace-grid { grid-template-columns: 58px minmax(0, 1fr); }
    .novel-workspace-shell.focus-mode .novel-activity-rail,
    .novel-workspace-shell.focus-mode .novel-side-panel,
    .novel-workspace-shell.focus-mode .novel-inspector-panel { display: none; }
    .novel-workspace-shell.focus-mode.side-collapsed.inspector-collapsed .novel-workspace-grid { grid-template-columns: minmax(0, 1fr); }
    .novel-workspace-shell.focus-mode .novel-editor-panel { grid-column: 1; width: 100%; }
    .novel-script-editor { width: 100%; max-width: none; margin: 0; padding: 38px clamp(20px, 4vw, 54px) 80px; box-sizing: border-box; }
    .novel-script-editor .novel-meta { margin-bottom: 13px; color: var(--th-text-2, #8db4bd); font: 500 10px 'DM Mono', monospace; }
    .novel-script-editor h2 { margin: 0 0 22px; color: var(--th-text, #e8fbff); font: 700 25px/1.2 'Outfit', sans-serif; }
    .novel-script-scene { margin: 0 0 16px; color: var(--th-text, #e8fbff); font: 600 12px/1.6 'DM Mono', monospace; }
    .novel-script-action { margin: 0 0 16px; color: color-mix(in srgb, var(--th-text) 78%, transparent); font-size: 13px; line-height: 1.9; }
    .novel-script-character { width: 54%; margin: 17px auto 3px; color: var(--th-accent, #27d3e6); text-align: center; font: 600 11px 'DM Mono', monospace; }
    .novel-script-dialogue { width: 68%; margin: 0 auto 16px; color: color-mix(in srgb, var(--th-text) 78%, transparent); font-size: 13px; line-height: 1.9; }
    .novel-script-transition { margin-top: 18px; color: var(--th-text-2, #8db4bd); text-align: right; font: 500 10px 'DM Mono', monospace; }
    @media (max-width: 1279px) {
      .novel-workspace-shell.side-collapsed .novel-workspace-grid { grid-template-columns: 58px minmax(0, 1fr); }
      .novel-workspace-shell.inspector-collapsed .novel-workspace-grid { grid-template-columns: 58px 240px minmax(0, 1fr); }
      .novel-workspace-shell.side-collapsed.inspector-collapsed .novel-workspace-grid { grid-template-columns: 58px minmax(0, 1fr); }
    }
    @media (max-width: 900px) {
      .novel-workspace-shell.side-collapsed .novel-workspace-grid,
      .novel-workspace-shell.inspector-collapsed .novel-workspace-grid,
      .novel-workspace-shell.side-collapsed.inspector-collapsed .novel-workspace-grid { grid-template-columns: 54px minmax(0, 1fr); }
    }
    @media (max-width: 767px) {
      .novel-workspace-shell.side-collapsed .novel-workspace-grid,
      .novel-workspace-shell.inspector-collapsed .novel-workspace-grid,
      .novel-workspace-shell.side-collapsed.inspector-collapsed .novel-workspace-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 48px; }
      .novel-script-editor { max-width: none; padding: 28px 20px 68px; }
      .novel-script-editor h2 { font-size: 22px; }
      .novel-script-character, .novel-script-dialogue { width: 82%; }
    }

    /* ========================================================================
       CREATIVE WORKSPACE V4
       A full-width production surface inspired by canvas and writing tools.
       Existing ids and handlers remain stable; this layer only changes layout.
       ======================================================================== */
    .creative-workspace-v4 {
      --creative-surface: var(--th-bg-2);
      --creative-surface-2: var(--th-card);
      --creative-surface-3: var(--th-card-hover);
      --creative-line: var(--th-border);
      --creative-line-strong: var(--th-border-top);
      --creative-muted: var(--th-text-2);
      --creative-soft: var(--th-text-secondary);
      --creative-blue: var(--th-accent);
      background: var(--th-bg) !important;
      color: var(--th-text);
    }
    #page-studio.creative-workspace-v4 {
      height: calc(100svh - var(--app-header-height));
      min-height: calc(100svh - var(--app-header-height));
      max-width: none;
      padding: 0 !important;
      overflow: hidden;
    }
    .studio-v4-shell { display: grid; grid-template-rows: 56px minmax(0, 1fr); height: 100%; min-height: 0; }
    .studio-v4-topbar { display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--creative-line); background: var(--creative-surface); }
    .studio-v4-title { min-width: 0; display: flex; align-items: baseline; gap: 9px; overflow: hidden; }
    .studio-v4-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px 'Outfit', sans-serif; color: var(--th-text); }
    .studio-v4-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creative-muted); font: 400 10px 'DM Mono', monospace; }
    .studio-v4-kicker { color: var(--creative-muted); font: 500 9px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
    .studio-v4-stage-tabs { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--creative-line); border-radius: 7px; background: var(--creative-surface-3); }
    .studio-v4-stage-tabs .studio-stage-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 74px; justify-content: center; height: 30px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--creative-muted); font-size: 10px; white-space: nowrap; }
    .studio-v4-stage-tabs .studio-stage-btn:hover { color: var(--th-text); background: color-mix(in srgb, var(--th-text) 5%, transparent); }
    .studio-v4-stage-tabs .studio-stage-btn.workflow-pill-active,
    .studio-v4-stage-tabs .studio-stage-btn.is-active { color: var(--th-text); background: color-mix(in srgb, var(--th-accent) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-accent) 26%, transparent); }
    .studio-v4-stage-tabs .studio-stage-btn svg { width: 14px; height: 14px; }
    .studio-v4-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
    .studio-v4-status { display: inline-flex; align-items: center; gap: 6px; color: var(--creative-muted); font: 400 10px 'DM Mono', monospace; white-space: nowrap; }
    .studio-v4-status > span { width: 6px; height: 6px; border-radius: 50%; background: var(--th-text-2); }
    .studio-v4-ghost { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--creative-line); border-radius: 6px; background: transparent; color: var(--creative-soft); font-size: 10px; }
    .studio-v4-ghost:hover { color: var(--th-text); border-color: var(--creative-line-strong); background: color-mix(in srgb, var(--th-text) 4%, transparent); }
    .studio-v4-ghost svg { width: 13px; height: 13px; }
    .studio-v4-grid { display: grid; grid-template-columns: 52px minmax(0, 1fr) 300px; min-height: 0; height: 100%; }
    .studio-v4-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-right: 1px solid var(--creative-line); background: var(--creative-surface-3); }
    .studio-v4-rail-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--creative-muted); font-size: 8px; }
    .studio-v4-rail-button:hover { color: var(--th-text); background: color-mix(in srgb, var(--th-text) 5%, transparent); }
    .studio-v4-rail-button.is-active { color: var(--creative-blue); background: color-mix(in srgb, var(--creative-blue) 12%, transparent); }
    .studio-v4-rail-button svg { width: 16px; height: 16px; stroke-width: 1.7; }
    .studio-v4-rail-rule { width: 26px; height: 1px; margin: 3px 0; background: var(--creative-line); }
    .studio-v4-canvas-column { display: grid; grid-template-rows: 44px minmax(280px, 1fr) auto auto; min-width: 0; min-height: 0; background: var(--creative-surface); }
    .studio-v4-canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--creative-line); }
    .studio-v4-canvas-head > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .studio-v4-canvas-head > div:first-child > span:first-child { color: var(--th-text); font: 600 12px 'Outfit', sans-serif; }
    .studio-v4-inline-status { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--th-warning) 24%, transparent); border-radius: 4px; color: var(--th-warning); font: 400 9px 'DM Mono', monospace; }
    .studio-v4-canvas-actions { display: flex; align-items: center; gap: 3px; }
    .studio-v4-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--creative-muted); font-size: 9px; }
    .studio-v4-icon-button:hover:not(:disabled) { border-color: var(--creative-line); color: var(--th-text); background: rgba(255,255,255,.04); }
    .studio-v4-icon-button:disabled { opacity: .42; cursor: not-allowed; }
    .studio-v4-icon-button svg { width: 14px; height: 14px; }
    .studio-v4-viewport { position: relative; min-height: 0; margin: 12px; overflow: hidden; border: 1px solid var(--creative-line); border-radius: 7px; background: var(--th-bg); }
    .studio-v4-viewport::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--th-grid) 1px, transparent 1px), linear-gradient(90deg, var(--th-grid) 1px, transparent 1px); background-size: 32px 32px; opacity: .25; }
    .studio-v4-viewport-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    #viewport-image-container { overflow: hidden; }
    #studio-real-canvas { width: min(76%, 620px); height: min(76%, 620px); object-fit: contain; opacity: .58; }
    .studio-v4-empty-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; pointer-events: none; text-align: center; }
    .studio-v4-empty-overlay svg { width: 26px; height: 26px; color: var(--creative-blue); opacity: .8; }
    .studio-v4-empty-overlay strong { color: var(--creative-soft); font: 600 13px 'Outfit', sans-serif; }
    .studio-v4-empty-overlay span { color: var(--creative-muted); font: 400 10px 'DM Mono', monospace; }
    .studio-v4-viewport-meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--creative-line); border-radius: 5px; background: color-mix(in srgb, var(--th-bg-2) 86%, transparent); color: var(--creative-muted); font: 400 9px 'DM Mono', monospace; }
    .studio-v4-viewport-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .studio-v4-capability-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: min(420px, 82%); height: 100%; margin: auto; color: var(--creative-muted); text-align: center; }
    .studio-v4-capability-state > svg { width: 30px; height: 30px; color: var(--creative-blue); opacity: .8; }
    .studio-v4-capability-state strong { color: var(--creative-soft); font: 600 13px 'Outfit', sans-serif; }
    .studio-v4-capability-state span { font: 400 10px 'DM Mono', monospace; }
    #webgl-canvas-box, #parallax-card { display: none; }
    .studio-v4-compare { position: absolute; inset: 0; background: var(--th-bg); }
    .studio-v4-compare > div:first-child, .studio-v4-compare #compare-before-state { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--creative-muted); font: 400 10px 'DM Mono', monospace; }
    .studio-v4-compare #compare-before-clip { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; border-right: 1px solid var(--creative-blue); }
    .studio-v4-compare #compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--creative-blue); }
    .studio-v4-compare #compare-handle svg { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; padding: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--creative-blue); color: color-mix(in srgb, var(--th-bg) 92%, #000); }
    .studio-v4-compare-label { position: absolute; top: 10px; padding: 4px 6px; border: 1px solid var(--creative-line); border-radius: 4px; background: color-mix(in srgb, var(--th-bg-2) 78%, transparent); color: var(--creative-muted); font: 400 9px 'DM Mono', monospace; }
    .studio-v4-compare-label.left { left: 10px; }.studio-v4-compare-label.right { right: 10px; }
    .studio-v4-timeline { margin: 0 12px 12px; padding: 9px 10px; border: 1px solid var(--creative-line); border-radius: 6px; background: var(--creative-surface); }
    .studio-v4:not(.studio-stage-video) .studio-v4-timeline { display: none; }
    .studio-v4-section-label { display: flex; align-items: center; gap: 6px; color: var(--creative-soft); font: 500 10px 'DM Mono', monospace; }
    .studio-v4-section-label svg { width: 13px; height: 13px; color: var(--creative-blue); }.studio-v4-section-label span:last-child { margin-left: auto; color: var(--creative-muted); font-size: 9px; }
    .studio-v4-timeline-empty { margin-top: 8px; color: var(--creative-muted); font: 400 9px 'DM Mono', monospace; }
    .studio-v4-composer { margin: 0 12px 12px; padding: 11px; border: 1px solid var(--creative-line-strong); border-radius: 7px; background: var(--creative-surface-2); }
    .studio-v4-composer-head, .studio-v4-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--creative-muted); font: 400 9px 'DM Mono', monospace; }
    .studio-v4-composer-head > span { color: var(--creative-soft); font-weight: 500; }.studio-v4-composer-foot { margin-top: 7px; opacity: .82; }
    .studio-v4-ratios, .studio-v4-choice-row { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--creative-line); border-radius: 5px; background: var(--creative-surface-3); }
    .studio-v4-ratios .ratio-pill, .studio-v4-choice-row .ratio-pill { height: 23px; padding: 0 8px; border: 0; border-radius: 3px; background: transparent; color: var(--creative-muted); font: 400 9px 'DM Mono', monospace; }
    .studio-v4-ratios .ratio-pill:hover, .studio-v4-ratios .ratio-pill.bg-white, .studio-v4-ratios .ratio-pill.is-active, .studio-v4-choice-row .ratio-pill:hover, .studio-v4-choice-row .ratio-pill.bg-white, .studio-v4-choice-row .ratio-pill.is-active { background: color-mix(in srgb, var(--th-accent) 16%, transparent); color: var(--creative-soft); }
    .studio-v4-prompt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 9px; }
    .studio-v4-prompt-row textarea { min-height: 56px; width: 100%; resize: vertical; padding: 10px; border: 1px solid var(--creative-line); border-radius: 5px; outline: 0; background: var(--creative-surface-3) !important; color: var(--th-text); font: 400 11px/1.6 'DM Mono', monospace; }
    .studio-v4-prompt-row textarea::placeholder { color: var(--th-text-2); }.studio-v4-prompt-row textarea:focus { border-color: color-mix(in srgb, var(--th-accent) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-accent) 10%, transparent); }
    .studio-v4-run-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 112px; padding: 0 14px; border: 1px solid var(--creative-blue); border-radius: 5px; background: var(--creative-blue); color: color-mix(in srgb, var(--th-bg) 92%, #000); font: 600 10px 'Outfit', sans-serif; }
    .studio-v4-run-button:disabled { opacity: .42; cursor: not-allowed; }.studio-v4-run-button svg { width: 14px; height: 14px; }
    .studio-v4-inspector { min-width: 0; overflow: hidden; border-left: 1px solid var(--creative-line); background: var(--creative-surface); }
    .studio-v4-inspector-head { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--creative-line); }.studio-v4-inspector-head .studio-v4-icon-button { display: none; }
    .studio-v4-inspector-head > div { display: flex; flex-direction: column; gap: 3px; }.studio-v4-inspector-head strong { font: 600 12px 'Outfit', sans-serif; }
    .studio-v4-inspector-body { display: flex; flex-direction: column; gap: 18px; padding: 14px 12px; overflow-y: auto; height: calc(100% - 44px); }
    .studio-v4-field { display: flex; flex-direction: column; gap: 7px; color: var(--creative-soft); font: 500 10px 'DM Mono', monospace; }.studio-v4-field small { color: var(--creative-muted); font-size: 9px; line-height: 1.45; }
    .studio-v4-field select { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--creative-line); border-radius: 5px; background: var(--creative-surface-3) !important; color: var(--th-text); font: 400 10px 'DM Mono', monospace; }
    .studio-v4-asset-picker { display: flex; align-items: center; min-height: 66px; width: 100%; padding: 8px; border: 1px dashed var(--creative-line-strong); border-radius: 5px; background: var(--creative-surface-3); color: var(--creative-muted); text-align: left; font: 400 10px 'DM Mono', monospace; }.studio-v4-asset-picker:hover { border-color: color-mix(in srgb, var(--th-accent) 55%, transparent); color: var(--creative-soft); }
    .studio-v4-asset-picker > span { display: flex; align-items: center; gap: 7px; }.studio-v4-asset-picker > span.hidden { display: none; }.studio-v4-asset-picker svg { width: 15px; height: 15px; color: var(--creative-blue); }.studio-v4-asset-picker img { width: 46px; height: 46px; margin-right: 7px; object-fit: contain; border: 1px solid var(--creative-line); border-radius: 4px; background: var(--th-bg); }
    .studio-v4-capability-list { gap: 7px; }.studio-v4-capability-list > button { display: grid; grid-template-columns: 15px minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid var(--creative-line); border-radius: 5px; background: var(--creative-surface-3); color: var(--creative-muted); text-align: left; font: 400 9px 'DM Mono', monospace; }.studio-v4-capability-list > button:disabled { opacity: .6; cursor: not-allowed; }.studio-v4-capability-list > button svg { width: 13px; height: 13px; }.studio-v4-capability-list em { color: var(--th-warning); font-style: normal; font-size: 8px; }

    /* Novel keeps the same material language while preserving its data views. */
    #page-novel.novel-v4 { background: var(--th-bg) !important; }
    .novel-v4 .novel-workspace-topbar { height: 56px; padding: 0 14px; border-bottom-color: var(--creative-line); background: var(--creative-surface); }
    .novel-v4 .novel-brand-lockup { width: auto; color: var(--creative-soft); }.novel-v4 .novel-brand-lockup svg { color: var(--creative-blue); }
    .novel-v4 .novel-project-lockup { width: 190px; }.novel-v4 .novel-project-lockup strong { color: var(--th-text); font-size: 12px; }.novel-v4 .novel-project-lockup span { color: var(--creative-muted); }
    .novel-v4 .novel-mode-switch { border: 1px solid var(--creative-line); border-radius: 6px; padding: 2px; background: var(--creative-surface-3); }.novel-v4 .novel-mode-switch button { height: 27px; }.novel-v4 .novel-mode-switch button.active { background: color-mix(in srgb, var(--creative-blue) 15%, transparent); color: var(--th-text); }.novel-v4 .novel-topbar-action { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid var(--creative-line); border-radius: 5px; background: transparent; color: var(--creative-soft); font-size: 10px; white-space: nowrap; }.novel-v4 .novel-topbar-action:hover { border-color: var(--creative-line-strong); background: color-mix(in srgb, var(--th-text) 5%, transparent); }.novel-v4 .novel-topbar-action svg { width: 13px; height: 13px; }
    .novel-v4 .novel-save-state { color: var(--creative-muted); }.novel-v4 .novel-save-state:not(.pending) { color: var(--th-success); }.novel-v4 .novel-save-state::before { background: currentColor; }
    .novel-v4 .novel-workspace-grid { grid-template-columns: 52px 232px minmax(0,1fr) 300px; }.novel-v4 .novel-activity-rail { padding-top: 12px; border-right-color: var(--creative-line); background: var(--creative-surface-3); }.novel-v4 .novel-activity-button { width: 42px; min-height: 43px; color: var(--creative-muted); }.novel-v4 .novel-activity-button:hover { color: var(--th-text); background: color-mix(in srgb, var(--th-text) 5%, transparent); }.novel-v4 .novel-activity-button.active { color: var(--creative-blue); background: color-mix(in srgb, var(--creative-blue) 12%, transparent); }.novel-v4 .novel-activity-button.active::before { left: -5px; width: 2px; background: var(--creative-blue); }.novel-v4 .novel-activity-button svg { width: 16px; height: 16px; stroke-width: 1.7; }.novel-v4 .novel-secondary-entry { display: none; }
    .novel-v4 .novel-side-panel, .novel-v4 .novel-editor-panel, .novel-v4 .novel-inspector-panel { background: var(--creative-surface); border-color: var(--creative-line); }.novel-v4 .novel-side-panel-header, .novel-v4 .novel-editor-toolbar, .novel-v4 .novel-inspector-tabs { border-color: var(--creative-line); }.novel-v4 .novel-editor-stage { background: var(--creative-surface); }.novel-v4 .novel-editor-copy { padding: 40px clamp(20px, 5vw, 74px) 76px; }.novel-v4 .novel-editor-copy h2 { font-size: 26px; }.novel-v4 .novel-editor-copy textarea#novel-editor-text { min-height: 48vh; }.novel-v4 .novel-inspector-tab.active { background: color-mix(in srgb, var(--creative-blue) 12%, transparent); color: var(--th-text); }.novel-v4 .novel-inspector-tab svg { stroke-width: 1.7; }
    .console-sider .sider-nav-item.active { background: color-mix(in srgb, var(--th-accent) 12%, transparent) !important; border-color: color-mix(in srgb, var(--th-accent) 28%, transparent) !important; box-shadow: none !important; color: var(--th-text) !important; }.console-sider .sider-nav-item.active > svg { color: var(--creative-blue) !important; }.console-sider .sider-nav-item > svg { color: var(--creative-muted) !important; stroke-width: 1.7; }.console-sider .sider-nav-item.active > svg { color: var(--creative-blue) !important; }

    @media (max-width: 1279px) {
      .studio-v4-grid { grid-template-columns: 52px minmax(0,1fr); }.studio-v4-inspector { position: absolute; top: var(--app-header-height); right: 0; bottom: 0; z-index: 30; width: min(320px, 42vw); box-shadow: -18px 0 40px rgba(0,0,0,.35); }.studio-v4-inspector:not(.is-mobile-open) { display: none; }
      .studio-v4-inspector-head .studio-v4-icon-button { display: inline-flex; }.studio-v4-topbar { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }.studio-v4-title > span:last-child { display: none; }.studio-v4-top-actions { gap: 5px; }
    }
    @media (max-width: 767px) {
      #page-studio.creative-workspace-v4 { height: calc(100svh - var(--app-header-height)); min-height: calc(100svh - var(--app-header-height)); }
      .studio-v4-shell { grid-template-rows: 52px minmax(0,1fr); }.studio-v4-topbar { grid-template-columns: minmax(0,1fr) auto auto; padding: 0 10px; gap: 6px; }.studio-v4-kicker, .studio-v4-status { display: none; }.studio-v4-stage-tabs { justify-self: end; }.studio-v4-stage-tabs .studio-stage-btn { min-width: 32px; width: 32px; padding: 0; }.studio-v4-stage-tabs .studio-stage-btn span { display: none; }.studio-v4-ghost { width: 30px; padding: 0; justify-content: center; }.studio-v4-ghost span { display: none; }
      .studio-v4-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) 52px; }.studio-v4-rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 4px 8px; border-right: 0; border-top: 1px solid var(--creative-line); }.studio-v4-rail-rule { width: 1px; height: 26px; margin: 0; }.studio-v4-rail-button { width: 52px; height: 42px; }.studio-v4-rail-button.is-active::before { content: ''; position: absolute; top: -4px; left: 17px; width: 18px; height: 2px; background: var(--creative-blue); }.studio-v4-canvas-column { grid-row: 1; overflow-y: auto; grid-template-rows: 42px minmax(310px, 1fr) auto auto; }.studio-v4-viewport { min-height: 300px; margin: 8px; }.studio-v4-canvas-head { padding: 0 10px; }.studio-v4-canvas-actions .studio-v4-icon-button span { display: none; }.studio-v4-canvas-actions .studio-v4-icon-button { padding: 0 5px; }.studio-v4-composer { margin: 0 8px 8px; }.studio-v4-prompt-row { grid-template-columns: 1fr; }.studio-v4-run-button { min-height: 34px; }.studio-v4-composer-foot span:last-child { display: none; }.studio-v4-inspector { top: auto; right: 8px; bottom: 60px; width: calc(100% - 16px); height: min(64svh, 470px); border: 1px solid var(--creative-line-strong); border-radius: 7px; }.studio-v4-inspector:not(.is-mobile-open) { display: none; }
      .novel-v4 .novel-workspace-topbar { height: 52px; padding: 0 9px; gap: 7px; }.novel-v4 .novel-brand-lockup { display: none; }.novel-v4 .novel-project-lockup { width: auto; max-width: 130px; }.novel-v4 .novel-project-lockup span, .novel-v4 .novel-save-state { display: none; }.novel-v4 .novel-mode-switch button { width: 31px; padding: 0; font-size: 0; justify-content: center; }.novel-v4 .novel-mode-switch button svg { width: 14px; height: 14px; }.novel-v4 .novel-workspace-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) 52px; }.novel-v4 .novel-activity-rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 4px 8px; border-right: 0; border-top: 1px solid var(--creative-line); }.novel-v4 .novel-activity-button { width: 52px; min-height: 42px; }.novel-v4 .novel-activity-button.active::before { left: 17px; top: -4px; width: 18px; height: 2px; }.novel-v4 .novel-side-panel { left: 0; bottom: 52px; width: min(330px, 88vw); }.novel-v4 .novel-editor-panel { grid-column: 1; grid-row: 1; }.novel-v4 .novel-editor-copy { padding: 28px 18px 64px; }.novel-v4 .novel-editor-copy h2 { font-size: 22px; }.novel-v4 .novel-inspector-panel { right: 8px; bottom: 60px; width: calc(100% - 16px); height: min(58svh, 430px); border: 1px solid var(--creative-line-strong); border-radius: 7px; }.novel-v4 .novel-inspector-panel:not(.is-mobile-open) { display: none; }
    }

    /* Theme coverage hooks keep the shared selectors explicit for static audits. */
    html[data-theme="pine-green"] .console-sider,
    html[data-theme="pine-green"] .glass-panel,
    html[data-theme="pine-green"] .modal-apple,
    html[data-theme="pine-green"] .input-apple,
    html[data-theme="pine-green"] .btn-glass,
    html[data-theme="pine-green"] .btn-solid {
      color: var(--th-text);
    }

    html[data-theme="pine-green"] .novel-workspace-shell,
    html[data-theme="pine-green"] .novel-workspace-topbar,
    html[data-theme="pine-green"] .novel-activity-rail,
    html[data-theme="pine-green"] .novel-side-panel,
    html[data-theme="pine-green"] .novel-editor-panel,
    html[data-theme="pine-green"] .novel-editor-copy p,
    html[data-theme="pine-green"] .novel-editor-copy textarea {
      color: var(--th-text);
    }

    /* ===== 细粒度 RBAC 权限矩阵 (admin-rbac.js) ===== */
    .rbac-matrix { display: grid; gap: 0.75rem; }
    .rbac-resource {
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      background: rgba(0, 0, 0, 0.2);
    }
    .rbac-resource-title { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82); margin-bottom: 0.5rem; }
    .rbac-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
    .rbac-action {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: 11.5px; color: rgba(255, 255, 255, 0.62); cursor: pointer;
    }
    .rbac-action input { width: 0.9rem; height: 0.9rem; }
    .rbac-action input:disabled { cursor: not-allowed; opacity: 0.5; }

    /* ===== 上游错误透传规则管理 (admin-error-passthrough.js) ===== */
    .admin-rule-shell {
      display: flex; flex-direction: column; gap: 0.9rem;
      padding: 1.25rem 1.5rem; max-height: 86vh; overflow-y: auto;
    }
    .admin-rule-shell header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .admin-rule-shell header h2 { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
    .admin-rule-shell header p { font-size: 11px; color: rgba(255, 255, 255, 0.45); margin-top: 0.15rem; }
    .admin-rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem 1rem; }
    .admin-rule-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 11px; color: rgba(255, 255, 255, 0.6); }
    .admin-rule-grid input, .admin-rule-grid select, .admin-rule-grid textarea {
      border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.65rem;
      padding: 0.45rem 0.6rem; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.25);
    }
    .admin-rule-grid textarea { font-family: ui-monospace, SFMono-Regular, monospace; resize: vertical; }
    .admin-rule-wide { grid-column: 1 / -1; }
    .admin-rule-inline { flex-direction: row !important; align-items: center; gap: 0.45rem !important; }
    .admin-rule-inline input[type="checkbox"] { width: 0.9rem; height: 0.9rem; }
    .admin-rule-shell footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ===== 账号窗口用量条 + 启停拨动开关 (渠道/账号池 与 我的号池 共用) =====
   5h/7d/30d 三个窗口用同一套组件: 顶部一行「进度条 + 百分比」, 下方一行重置倒计时,
   再下方一行本平台聚合。此前进度条只有 6px 高且百分比挤在右侧小字里, 扫读时看不出
   哪个账号接近上限 —— 现在条更高、带阈值刻度, 百分比与状态色直接对应。 */
.acct-window { display: flex; flex-direction: column; gap: 3px; min-width: 104px; max-width: 190px; }
.acct-window-head { display: flex; align-items: center; gap: 6px; }
/* 阈值刻度: 80% / 95% 是真实的降级阈值 (见 protocolRouter 的自适应并发链),
   画在轨道上用户才知道"到哪算危险", 而不是凭颜色猜。 */
.acct-window-track { position: relative; flex: 0 1 74px; min-width: 54px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--th-border) 70%, transparent); overflow: hidden; }
.acct-window-fill { height: 100%; border-radius: 999px; transition: width .25s ease; }
.acct-window-fill[data-level="ok"] { background: var(--usage-success, #34d399); }
.acct-window-fill[data-level="warn"] { background: var(--usage-warning, #fbbf24); }
.acct-window-fill[data-level="high"] { background: var(--usage-error, #fb7185); }
.acct-window-fill[data-level="unknown"] { background: color-mix(in srgb, var(--th-text-2) 35%, transparent); }
.acct-window-marks { position: absolute; inset: 0; pointer-events: none; }
.acct-window-marks::before, .acct-window-marks::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--th-bg) 55%, transparent); }
.acct-window-marks::before { left: 80%; }
.acct-window-marks::after { left: 95%; }
.acct-window-pct { color: var(--th-text); font: 600 11.5px 'DM Mono', monospace; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.acct-window-pct[data-level="warn"] { color: var(--usage-warning, #fbbf24); }
.acct-window-pct[data-level="high"] { color: var(--usage-error, #fb7185); }
.acct-window-pct[data-level="unknown"] { color: var(--th-text-2); }
.acct-window-meta { color: var(--th-text-2); font: 10px/1.35 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-window-local { color: color-mix(in srgb, var(--th-text-2) 80%, transparent); }
.acct-window-history { color: var(--th-info, #38bdf8); cursor: help; text-decoration: underline dotted; font-size: 10px; }
.acct-window-history:hover { color: var(--th-text); }

/* 启停拨动开关: 参考图样式 (胶囊轨道 + 白色圆钮), 用 role=switch 保证语义与键盘可达。
   停用态轨道压暗, 避免与"启用"绿混淆 —— 状态不该只靠颜色区分, 圆钮位置是第二重线索。 */
.acct-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; transition: background-color .2s ease; }
.acct-switch[aria-checked="true"] { background: #10b981; }
.acct-switch[aria-checked="true"]:hover { background: #34d399; }
.acct-switch[aria-checked="false"] { background: color-mix(in srgb, var(--th-text-2) 32%, transparent); }
.acct-switch[aria-checked="false"]:hover { background: color-mix(in srgb, var(--th-text-2) 45%, transparent); }
.acct-switch:disabled { cursor: not-allowed; opacity: .5; }
.acct-switch:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }
.acct-switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.acct-switch[aria-checked="true"] .acct-switch-knob { transform: translateX(16px); }
.acct-switch-label { margin-left: 7px; color: var(--th-text-2); font-size: 10.5px; white-space: nowrap; }
.acct-switch-row { display: inline-flex; align-items: center; }