/* ── Developer Portal ──────────────────────────────────────────────────────── */
    /* Sign-up account-type toggle */
    .signup-type-toggle { display: flex; gap: 6px; margin-top: 4px; }
    .signup-type-btn { flex: 1; padding: 7px 10px; border-radius: 8px; border: 0.5px solid var(--border-md); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
    .signup-type-btn:hover { background: var(--bg); color: var(--text-primary); }
    .signup-type-btn--active { background: var(--blue-accent); border-color: var(--blue-accent); color: #fff; }
    .signup-type-btn--active:hover { opacity: .9; }
    .auth-field-hint { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; margin-top: 6px; }

    /* Remove app-page constraints for developer portal */
    #app-page.page--developer { max-width: none; padding: 0; margin: 0; }

    /* Shell */
    .dev-portal-layout { display: flex; min-height: 100vh; }

    /* Sidebar */
    .developer-portal-sidebar { width: 220px; flex-shrink: 0; background: var(--bg-secondary); border-right: 0.5px solid var(--border-md); display: flex; flex-direction: column; padding: 0 0 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .dev-portal-brand { display: flex; align-items: center; gap: 8px; padding: 20px 20px 16px; border-bottom: 0.5px solid var(--border-md); margin-bottom: 8px; }
    .dev-portal-brand-icon { font-size: 18px; }
    .dev-portal-brand-name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
    .dev-portal-nav { display: flex; flex-direction: column; flex: 1; padding: 4px 0; }
    .dev-nav-item { display: block; width: 100%; padding: 9px 20px; background: transparent; border: none; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background .12s, color .12s; }
    .dev-nav-item:hover { background: var(--bg); color: var(--text-primary); }
    .dev-nav-item--active { background: var(--bg); color: var(--blue-accent); font-weight: 600; }
    .dev-portal-sidebar-footer { margin-top: auto; padding: 12px 20px 0; border-top: 0.5px solid var(--border-md); display: flex; flex-direction: column; gap: 8px; }
    .dev-portal-footer-link { font-size: 12px; color: var(--blue-accent); text-decoration: none; }
    .dev-portal-footer-link:hover { opacity: .8; }
    .dev-portal-sign-out { font-size: 12px; color: var(--text-tertiary); background: transparent; border: none; cursor: pointer; text-align: left; padding: 0; }
    .dev-portal-sign-out:hover { color: var(--text-secondary); }

    /* Content area */
    .developer-portal-content { flex: 1; min-width: 0; padding: 2rem 2.5rem 4rem; }
    .dev-portal-page { max-width: 820px; }
    .dev-page-header { margin-bottom: 24px; }
    .dev-page-title { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); margin: 0 0 4px; }
    .dev-page-subtitle { font-size: 13px; color: var(--text-tertiary); margin: 0; }

    /* Sections */
    .dev-section { margin-bottom: 28px; }
    .dev-section-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 12px; }
    .dev-section-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .dev-section-toolbar .dev-section-title { margin: 0; }

    /* Status cards */
    .dev-status-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
    .dev-status-card { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
    .dev-status-card-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
    .dev-status-card-value { font-size: 14px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
    .dev-stat-big { font-size: 24px; font-weight: 700; }
    .dev-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .dev-status-dot--green { background: #22c55e; }
    .dev-status-dot--amber { background: #f59e0b; }
    .dev-status-dot--red   { background: #ef4444; }

    /* Checklist */
    .dev-checklist { display: flex; flex-direction: column; gap: 8px; }
    .checklist-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--bg-secondary); border: 0.5px solid var(--border-md); font-size: 13px; color: var(--text-secondary); }
    .checklist-checkbox { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; }
    .checklist-item--done .checklist-checkbox { background: #22c55e; border-color: #22c55e; color: #fff; }
    .checklist-item--done { color: var(--text-tertiary); }
    .checklist-label { flex: 1; }
    .checklist-link { background: transparent; border: none; color: var(--blue-accent); font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
    .checklist-link:hover { opacity: .8; }

    /* Connect page */
    .dev-connect-status { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .dev-connect-status--connected { border-color: rgba(34,197,94,.3); }
    .dev-connect-status-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); }
    .dev-connect-detail { font-size: 13px; color: var(--text-secondary); }
    .dev-connect-cta { margin-bottom: 16px; }
    .dev-connect-explainer { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }

    /* API Keys page */
    #dev-keys-list { display: flex; flex-direction: column; gap: 8px; }
    .api-key-row { display: flex; align-items: center; gap: 12px; background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 10px; padding: 12px 16px; }
    .api-key-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .api-key-prefix { font-size: 13px; font-family: monospace; font-weight: 600; color: var(--text-primary); }
    .api-key-meta { font-size: 12px; color: var(--text-tertiary); }
    .api-key-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .api-key-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; letter-spacing: .03em; }
    .api-key-badge--inactive { background: var(--bg); color: var(--text-tertiary); border: 0.5px solid var(--border-md); }

    /* One-time key modal (inline) */
    .copy-key-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
    .copy-key-modal-warn { font-size: 12px; color: #f59e0b; background: rgba(245,158,11,.08); border: 0.5px solid rgba(245,158,11,.2); border-radius: 8px; padding: 10px 12px; line-height: 1.5; }
    .copy-key-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .copy-key-modal-card { background: var(--bg); border: 0.5px solid var(--border-md); border-radius: 16px; padding: 28px 28px 24px; max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.28); }
    .copy-key-display-wrap { display: flex; align-items: center; gap: 8px; }
    .copy-key-display { flex: 1; font-family: monospace; font-size: 13px; word-break: break-all; background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 8px; padding: 12px 14px; color: var(--text-primary); user-select: all; }
    .copy-key-eye-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 18px; opacity: 0.5; padding: 4px; line-height: 1; transition: opacity .15s; }
    .copy-key-eye-btn:hover { opacity: 1; }
    .copy-key-actions { display: flex; gap: 10px; }
    .copy-key-confirm { font-size: 12px; color: #22c55e; font-weight: 600; }
    .api-key-hint { color: var(--text-tertiary); font-style: italic; }

    /* Docs page */
    .dev-portal-page--docs { max-width: none; }
    .dev-docs-layout { display: flex; gap: 40px; align-items: flex-start; }
    .dev-docs-toc { width: 220px; flex-shrink: 0; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-bottom: 24px; }
    .dev-docs-toc-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
    .dev-docs-toc-group { margin-bottom: 2px; }
    .dev-docs-toc-item { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 5px 0; line-height: 1.35; border-left: 2px solid transparent; transition: color .12s, border-color .12s; cursor: pointer; }
    .dev-docs-toc-item:hover { color: var(--text-primary); }
    .dev-docs-toc-item--active { color: var(--blue-accent); font-weight: 600; }
    .dev-docs-toc-item--h1 { font-weight: 700; color: var(--text-primary); font-size: 13px; margin-bottom: 6px; }
    .dev-docs-toc-item--h2 { font-weight: 500; }
    .dev-docs-toc-item--h2.dev-docs-toc-item--active { border-left-color: var(--blue-accent); padding-left: 8px; }
    .dev-docs-toc-item--h3 { padding-left: 18px; font-size: 12.5px; color: var(--text-tertiary); }
    .dev-docs-toc-item--h3:hover { color: var(--text-secondary); }
    .dev-docs-toc-item--h3.dev-docs-toc-item--active { color: var(--blue-accent); border-left-color: var(--blue-accent); padding-left: 26px; }
    .dev-docs-toc-chevron { display: inline-block; width: 12px; font-size: 11px; color: var(--text-tertiary); transition: transform .15s ease; flex-shrink: 0; }
    .dev-docs-toc-item--expanded .dev-docs-toc-chevron { transform: rotate(90deg); }
    .dev-docs-toc-children { max-height: 0; overflow: hidden; transition: max-height .2s ease; padding-left: 12px; }
    .dev-docs-toc-children--open { max-height: 1000px; padding-top: 2px; padding-bottom: 4px; }
    .dev-docs-body { flex: 1; min-width: 0; line-height: 1.7; font-size: 14px; color: var(--text-primary); }
    .dev-code-wrap { position: relative; margin: 0 0 14px; }
    .dev-code-wrap .dev-code-block { margin: 0; background: #282c34; border-color: rgba(255,255,255,0.06); }
    .dev-code-wrap .hljs { background: transparent; padding: 0; color: #abb2bf; }
    .dev-code-copy { position: absolute; bottom: 8px; right: 8px; background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.14); color: #e6e6e6; padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
    .dev-code-wrap:hover .dev-code-copy { opacity: 1; }
    .dev-code-copy:hover { background: rgba(255,255,255,0.18); }
    .dev-code-copy--done { opacity: 1 !important; background: rgba(34,197,94,0.25); border-color: rgba(34,197,94,0.4); color: #d1fae5; }
    .dev-docs-rendered h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
    .dev-docs-rendered h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 28px 0 10px; }
    .dev-docs-rendered h3 { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
    .dev-docs-rendered p { margin: 0 0 12px; color: var(--text-secondary); }
    .dev-docs-rendered ul, .dev-docs-rendered ol { padding-left: 20px; margin: 0 0 12px; color: var(--text-secondary); }
    .dev-docs-rendered li { margin-bottom: 4px; }
    .dev-docs-rendered code { font-family: monospace; font-size: 12.5px; background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 4px; padding: 2px 5px; }
    .dev-code-block { display: block; font-family: monospace; font-size: 12.5px; background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 10px; padding: 14px 16px; overflow-x: auto; white-space: pre; line-height: 1.6; margin: 0 0 14px; color: var(--text-primary); }
    .dev-docs-rendered table { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 13px; }
    .dev-docs-rendered th { text-align: left; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--border-md); }
    .dev-docs-rendered td { padding: 8px 12px; border-bottom: 0.5px solid var(--border-md); color: var(--text-secondary); }
    .dev-docs-rendered hr { border: none; border-top: 0.5px solid var(--border-md); margin: 24px 0; }
    .dev-docs-rendered blockquote { border-left: 3px solid var(--blue-accent); padding: 8px 16px; margin: 0 0 12px; color: var(--text-tertiary); }

    /* Usage page */
    .dev-chart-wrap { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 12px; padding: 18px 20px; }
    .dev-usage-table { display: flex; flex-direction: column; gap: 10px; }
    .dev-usage-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border-md); font-size: 13px; }
    .dev-usage-row:last-child { border-bottom: none; }
    .dev-usage-endpoint { color: var(--text-secondary); }
    .dev-usage-count { color: var(--text-tertiary); font-size: 12px; }

    /* Generic states */
    .dev-loading { display: flex; align-items: center; justify-content: center; padding: 40px 20px; color: var(--text-tertiary); font-size: 13px; }
    .dev-error { background: rgba(239,68,68,.07); border: 0.5px solid rgba(239,68,68,.25); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: #ef4444; }
    .dev-empty { text-align: center; padding: 32px 20px; color: var(--text-tertiary); font-size: 13px; }
    .dev-progress-msg { font-size: 13px; color: var(--text-secondary); padding: 12px 0; }

    /* Billing page */
    .dev-billing-plan-card { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 16px; padding: 28px; max-width: 480px; }
    .dev-billing-plan-header { margin-bottom: 20px; }
    .dev-billing-plan-name { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-accent); margin-bottom: 6px; }
    .dev-billing-plan-price { font-size: 36px; font-weight: 800; letter-spacing: -.04em; color: var(--text-primary); }
    .dev-billing-per { font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0; }
    .dev-billing-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
    .dev-billing-features li { font-size: 13.5px; color: var(--text-secondary); display: flex; gap: 10px; }
    .dev-billing-features li::before { content: '✓'; color: var(--blue-accent); font-weight: 700; flex-shrink: 0; }
    .dev-billing-promo-row { margin-bottom: 16px; }
    .dev-billing-promo-input { width: 100%; box-sizing: border-box; padding: 10px 14px; background: var(--bg); border: 0.5px solid var(--border-md); border-radius: 10px; font-size: 13px; color: var(--text-primary); outline: none; }
    .dev-billing-promo-input:focus { border-color: var(--blue-accent); }
    .dev-billing-promo-input::placeholder { color: var(--text-tertiary); }
    .dev-billing-subscribe-btn { width: 100%; }
    .dev-billing-stripe-note { font-size: 11.5px; color: var(--text-tertiary); text-align: center; margin: 10px 0 0; }
    .dev-billing-active-card { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 16px; padding: 24px 28px; max-width: 420px; }
    .dev-billing-active-plan { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-accent); margin-bottom: 4px; }
    .dev-billing-active-price { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); margin-bottom: 8px; }
    .dev-billing-active-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
    .dev-billing-cancel-note { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
    .dev-billing-portal-note { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
    .dev-billing-success-banner { background: rgba(34,197,94,.1); border: 0.5px solid rgba(34,197,94,.3); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #22c55e; margin-bottom: 20px; }
    .dev-billing-warning-banner { background: rgba(239,68,68,.08); border: 0.5px solid rgba(239,68,68,.25); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #ef4444; margin-bottom: 20px; }
    .dev-billing-cancel-banner { background: rgba(245,158,11,.08); border: 0.5px solid rgba(245,158,11,.25); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #f59e0b; margin-bottom: 20px; }
    .dev-inline-link { background: transparent; border: none; padding: 0; color: var(--blue-accent); cursor: pointer; font-size: inherit; font-weight: 500; text-decoration: underline; }

    /* Keys page → Claude Desktop callout (inline above the keys list) */
    .dev-claude-callout { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }

    /* Connect Claude Desktop page */
    .dev-claude-url-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .dev-claude-url { flex: 1 1 auto; min-width: 0; background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 8px; padding: 10px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-primary); overflow-x: auto; white-space: nowrap; }
    .dev-claude-help { font-size: 13px; color: var(--text-secondary); margin: 8px 0 12px; line-height: 1.5; }
    .dev-claude-help code { background: var(--bg-secondary); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
    .dev-claude-key-input { width: 100%; max-width: 540px; background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 8px; padding: 10px 40px 10px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-primary); margin-right: -36px; box-sizing: border-box; }
    .dev-claude-key-input:focus { outline: none; border-color: var(--blue-accent); }
    .dev-claude-eye-btn { background: transparent; border: none; cursor: pointer; padding: 4px 8px; font-size: 16px; color: var(--text-secondary); position: relative; left: -36px; vertical-align: middle; }
    .dev-claude-config { background: var(--bg-secondary); border: 0.5px solid var(--border-md); border-radius: 8px; padding: 16px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: var(--text-primary); margin: 0 0 12px; }
    .dev-claude-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .dev-claude-test-result { font-size: 13px; color: var(--text-secondary); }
    .dev-claude-test-result--ok { color: #22c55e; }
    .dev-claude-test-result--error { color: #ef4444; }
    .dev-claude-steps { padding-left: 24px; margin: 0; color: var(--text-primary); font-size: 14px; line-height: 1.8; }
    .dev-claude-steps li { margin-bottom: 4px; }
    .dev-claude-steps code { background: var(--bg-secondary); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

    /* Mobile */
    @media (max-width: 720px) {
      .dev-portal-layout { flex-direction: column; }
      .developer-portal-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; gap: 4px; border-right: none; border-bottom: 0.5px solid var(--border-md); }
      .dev-portal-brand, .dev-portal-sidebar-footer { display: none; }
      .dev-portal-nav { flex-direction: row; flex: none; gap: 4px; }
      .dev-nav-item { border-radius: 20px; padding: 6px 14px; white-space: nowrap; width: auto; }
      .developer-portal-content { padding: 1.25rem 1rem 3rem; }
    }