/* EtherealAI brand theme system. Default follows the system/browser preference. Advanced settings can later set data-theme="day" or data-theme="night" on to override it. */ :root, :root[data-theme="day"] { color-scheme: light; --background: #fbf7fb; --background-gradient: radial-gradient(circle at top left, rgba(236, 72, 153, 0.12), transparent 30rem), radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 28rem), #fbf7fb; --surface: #fffafd; --surface-strong: #ffffff; --surface-muted: #f6edf7; --surface-tint: #f8f1fb; --text-primary: #160b22; --text-secondary: #4f405f; --text-muted: #6b5d78; --text-inverse: #ffffff; --border: #dfd2e8; --border-strong: #bfa7d5; --brand-pink: #ec4899; --brand-purple: #3b0764; --brand-purple-soft: #6d28d9; --brand-blue: #2563eb; --brand-blue-soft: #dbeafe; --status-success: #16a34a; --status-success-bg: #eafaf0; --status-success-text: #14532d; --status-warning: #d97706; --status-warning-bg: #fff7ed; --status-warning-text: #7c2d12; --status-danger: #dc2626; --status-danger-bg: #fef2f2; --status-danger-text: #7f1d1d; --status-info: #2563eb; --status-info-bg: #eef4ff; --status-info-text: #1e3a8a; --button-primary: linear-gradient(135deg, #6d28d9, #2563eb); --button-primary-hover: linear-gradient(135deg, #581c87, #1d4ed8); --button-success: #16a34a; --button-warning: #f59e0b; --button-danger: #dc2626; --focus-ring: rgba(236, 72, 153, 0.34); --shadow-soft: 0 18px 44px rgba(59, 7, 100, 0.12); --shadow-panel: 0 22px 60px rgba(22, 11, 34, 0.16); --radius-card: 8px; --input-background: #ffffff; --input-text: #160b22; --code-background: #160b22; --code-text: #f8f1fb; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { color-scheme: dark; --background: #09030f; --background-gradient: radial-gradient(circle at top left, rgba(236, 72, 153, 0.16), transparent 28rem), radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 30rem), #09030f; --surface: #15091f; --surface-strong: #1d0f2d; --surface-muted: #211331; --surface-tint: #251538; --text-primary: #fbf7fb; --text-secondary: #ded4e8; --text-muted: #bcaecc; --text-inverse: #ffffff; --border: #3a2850; --border-strong: #5d3e82; --brand-pink: #f472b6; --brand-purple: #c084fc; --brand-purple-soft: #a855f7; --brand-blue: #60a5fa; --brand-blue-soft: #172554; --status-success: #4ade80; --status-success-bg: rgba(22, 163, 74, 0.16); --status-success-text: #bbf7d0; --status-warning: #fbbf24; --status-warning-bg: rgba(245, 158, 11, 0.17); --status-warning-text: #fde68a; --status-danger: #f87171; --status-danger-bg: rgba(220, 38, 38, 0.18); --status-danger-text: #fecaca; --status-info: #60a5fa; --status-info-bg: rgba(37, 99, 235, 0.18); --status-info-text: #bfdbfe; --button-primary: linear-gradient(135deg, #a855f7, #2563eb); --button-primary-hover: linear-gradient(135deg, #c084fc, #3b82f6); --button-success: #22c55e; --button-warning: #f59e0b; --button-danger: #ef4444; --focus-ring: rgba(244, 114, 182, 0.42); --shadow-soft: 0 22px 64px rgba(0, 0, 0, 0.42); --shadow-panel: 0 26px 80px rgba(0, 0, 0, 0.52); --input-background: #100719; --input-text: #fbf7fb; --code-background: #050108; --code-text: #fbf7fb; } } :root[data-theme="night"] { color-scheme: dark; --background: #09030f; --background-gradient: radial-gradient(circle at top left, rgba(236, 72, 153, 0.16), transparent 28rem), radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 30rem), #09030f; --surface: #15091f; --surface-strong: #1d0f2d; --surface-muted: #211331; --surface-tint: #251538; --text-primary: #fbf7fb; --text-secondary: #ded4e8; --text-muted: #bcaecc; --text-inverse: #ffffff; --border: #3a2850; --border-strong: #5d3e82; --brand-pink: #f472b6; --brand-purple: #c084fc; --brand-purple-soft: #a855f7; --brand-blue: #60a5fa; --brand-blue-soft: #172554; --status-success: #4ade80; --status-success-bg: rgba(22, 163, 74, 0.16); --status-success-text: #bbf7d0; --status-warning: #fbbf24; --status-warning-bg: rgba(245, 158, 11, 0.17); --status-warning-text: #fde68a; --status-danger: #f87171; --status-danger-bg: rgba(220, 38, 38, 0.18); --status-danger-text: #fecaca; --status-info: #60a5fa; --status-info-bg: rgba(37, 99, 235, 0.18); --status-info-text: #bfdbfe; --button-primary: linear-gradient(135deg, #a855f7, #2563eb); --button-primary-hover: linear-gradient(135deg, #c084fc, #3b82f6); --button-success: #22c55e; --button-warning: #f59e0b; --button-danger: #ef4444; --focus-ring: rgba(244, 114, 182, 0.42); --shadow-soft: 0 22px 64px rgba(0, 0, 0, 0.42); --shadow-panel: 0 26px 80px rgba(0, 0, 0, 0.52); --input-background: #100719; --input-text: #fbf7fb; --code-background: #050108; --code-text: #fbf7fb; } body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } .responsive-header { width: 100%; background-color: #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px 0; display: flex; flex-wrap: wrap; gap: var(--eos-space-3); justify-content: space-between; align-items: center; } .logo img { height: 50px; } .ethereal-brand-lockup { align-items: center; display: flex; gap: var(--eos-space-2); } .ethereal-brand-lockup img, .operator-brand-logo, .operator-mode-logo, .login-brand-mark img { background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, var(--border)); border-radius: var(--eos-radius-pill); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16); object-fit: cover; } .ethereal-brand-lockup img { height: 42px; width: 42px; } .operator-brand-logo { height: 58px; width: 58px; } .operator-mode-logo { flex: 0 0 auto; height: 38px; width: 38px; } .operator-brand-heading, .operator-mode-brand { align-items: center; display: flex; gap: var(--eos-space-3); } .operator-brand-heading { align-items: flex-start; } .login-brand-mark { align-items: center; display: flex; justify-content: center; margin: 0 auto 14px; } .login-brand-mark img { height: 68px; width: 68px; } nav { display: flex; gap: var(--eos-space-5); } @media (max-width: 768px) { nav { display: none; } } .responsive-header .logo { margin-left: 20px; } .responsive-header .logo a { color: #111827; font-weight: 700; text-decoration: none; } .header-proof-strip { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); color: #374151; font-size: var(--eos-text-5); margin-right: 20px; padding: 8px 10px; } .feature-card { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 10px; text-align: center; padding: 20px; border-radius: var(--eos-radius-3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .feature-card:hover { transform: translateY(-5px); } @media (max-width: 768px) { .feature-card { width: 100%; margin-bottom: 20px; } } nav a { text-decoration: none; color: #333; padding: 10px 20px; border-radius: var(--eos-radius-3); transition: background-color 0.3s, color 0.3s; } nav a:hover { background-color: #ddd; } .hero-section { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 80vh; background-image: linear-gradient(120deg, #e0c3fc, #8ec5fc); color: white; } .hero-section h1 { font-size: 4em; margin-bottom: 20px; } .hero-section p { font-size: 1.5em; margin-bottom: 40px; } .home-shell { width: 100%; } .home-hero, .home-workflows { width: 100%; } .home-hero { background: #ffffff; border-bottom: 1px solid #e5e7eb; padding: 40px 0 28px; } .home-hero .container, .home-workflows .container { max-width: 1040px; } .home-hero h1 { color: #111827; font-size: var(--eos-text-9); margin: 0 0 14px; } .home-hero p { color: #4b5563; font-size: var(--eos-text-7); margin: 0 auto 20px; max-width: 760px; } .home-actions { justify-content: center; margin-bottom: 22px; } .secondary-action { background: #2563eb; } .secondary-action:hover { background: #1d4ed8; } .home-proof-grid { margin-top: 16px; text-align: left; } .home-workflows { background: #f9fafb; padding: 34px 0 54px; } .home-workflow-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: left; } .home-workflow-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); color: #111827; display: grid; gap: var(--eos-space-2); min-height: 118px; padding: 16px; text-decoration: none; } .home-workflow-card:hover { border-color: #93c5fd; } .home-workflow-card span { color: #4b5563; font-size: var(--eos-text-6); line-height: 1.45; } .auth-proof-banner { align-items: center; background: #ffffff; border: 1px solid #d1d5db; border-left: 4px solid #2563eb; border-radius: var(--eos-radius-3); display: flex; flex-wrap: wrap; gap: var(--eos-space-2) var(--eos-space-3); justify-content: space-between; margin: 18px 0; padding: 12px 14px; text-align: left; } .auth-proof-banner strong { color: #111827; } .auth-proof-banner span, .auth-proof-banner a { color: #4b5563; font-size: var(--eos-text-6); } .auth-proof-banner a { color: #2563eb; text-decoration: none; } .container { text-align: center; max-width: 800px; padding: 60px; } @media (max-width: 768px) { .container { padding: 20px; } } h1, h2, h3 { font-family: 'Arial', sans-serif; color: #333; } p { font-size: 1.2em; line-height: 1.6; margin-bottom: 20px; color: #555; } .cta-button { background-color: #ff6b6b; color: white; border: none; padding: 15px 30px; border-radius: var(--eos-radius-3); cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .cta-button:hover { background-color: #ff4d4d; transform: scale(1.05); } .features-section { width: 100%; padding: 60px 0; background-color: #f9f9f9; } @media (max-width: 768px) { .features-section { padding: 20px 0; } } .pricing-section { width: 100%; padding: 60px 0; background-color: #f9f9f9; } .pricing-section .container { display: flex; justify-content: center; gap: var(--eos-space-5); } @media (max-width: 768px) { .pricing-section .container { flex-direction: column; align-items: center; } } .pricing-card { flex: 1; min-width: 300px; text-align: center; padding: 20px; border-radius: var(--eos-radius-3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .most-popular { border: 2px solid #ff6b6b; position: relative; } .most-popular::before { content: "Most Popular"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: #ff6b6b; color: white; padding: 5px 10px; border-radius: var(--eos-radius-1); font-size: 0.8em; } .pricing-card h3 { font-size: 1.5em; margin-bottom: 10px; } .pricing-card p { font-size: 1.2em; color: #333; margin-bottom: 20px; } .pricing-card ul { list-style-type: none; padding: 0; margin-bottom: 20px; } .pricing-card li { font-size: 1em; color: #666; margin-bottom: 10px; } .testimonials-section { width: 100%; padding: 60px 0; background-color: #f9f9f9; } .testimonial-card { display: inline-block; vertical-align: top; width: calc(33.33% - 20px); margin: 10px; text-align: center; padding: 20px; border-radius: var(--eos-radius-3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .testimonial-card p { font-size: 1em; color: #333; margin-bottom: 10px; } .testimonial-card cite { font-size: 0.9em; color: #666; } footer { width: 100%; background-color: var(--surface); box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); color: var(--text-primary); padding: 20px 0; text-align: center; } /* Safe Paper night contrast repair. This high-specificity layer uses semantic colors so legacy page rules with hard-coded light backgrounds cannot override the brand theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { --background: #09030f; --surface: #15091f; --surface-strong: #1d0f2d; --surface-muted: #211331; --surface-tint: #251538; --text-primary: #fff9ff; --text-secondary: #e8dff1; --text-muted: #c6b8d4; --border: #4b3564; --border-strong: #7651a3; --status-success-bg: rgba(22, 163, 74, 0.26); --status-success-text: #dcfce7; --status-warning-bg: rgba(245, 158, 11, 0.24); --status-warning-text: #fef3c7; --status-danger-bg: rgba(220, 38, 38, 0.24); --status-danger-text: #fee2e2; --status-info-bg: rgba(37, 99, 235, 0.24); --status-info-text: #dbeafe; --input-background: #100719; --input-text: #fff9ff; --code-background: #06020a; --code-text: #fff9ff; } } :root[data-theme="night"] { --background: #09030f; --surface: #15091f; --surface-strong: #1d0f2d; --surface-muted: #211331; --surface-tint: #251538; --text-primary: #fff9ff; --text-secondary: #e8dff1; --text-muted: #c6b8d4; --border: #4b3564; --border-strong: #7651a3; --status-success-bg: rgba(22, 163, 74, 0.26); --status-success-text: #dcfce7; --status-warning-bg: rgba(245, 158, 11, 0.24); --status-warning-text: #fef3c7; --status-danger-bg: rgba(220, 38, 38, 0.24); --status-danger-text: #fee2e2; --status-info-bg: rgba(37, 99, 235, 0.24); --status-info-text: #dbeafe; --input-background: #100719; --input-text: #fff9ff; --code-background: #06020a; --code-text: #fff9ff; } body, body.operator-simple-mode, .simple-operator-workspace, .mission-hero, .operator-dashboard, .operator-guided-workflow, .operator-workflow-step, .operator-manual-link-row, .model-panel, .task-card, .status-card, .role-card, .next-actions, .operator-answer-panel article, .operator-status-tile, .operator-task-card, .operator-step-list article, .wallet-card, .owner-progress-card, .owner-gate-card, .owner-file-status, .owner-detected-wallet, .owner-file-summary, .risk-profile-current-status, .owner-proof-surfaces, .owner-proof-surface-list article, .operator-wizard, .arbitrage-builder, .inline-tool-panel, .timeline-item, .workspace-row, .checklist-item, .command-template-row, .artifact-stat, .operator-training-card, .training-library-hero, .training-library-card, .training-pair-list article, .training-video-current, .training-asset-plan, .training-transcript, .safe-paper-result-card, .safe-paper-table-card, .safe-paper-warning-card, .operator-next-action-panel, .feature-card, .pricing-card, .testimonial-card, .operator-tutorial-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .responsive-header, footer, .operator-simple-mode nav, .auth-proof-banner, .inline-status, .operator-next-action-grid article, .quick-nav a, .home-workflow-card, .ceo-workflow-card, .artifact-stat, .operator-progress-checklist article { background: var(--surface-muted) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } h1, h2, h3, h4, h5, h6, label, dt, strong, .safe-paper-hero strong, .safe-paper-result-card strong, .safe-paper-warning-card strong, .safe-paper-table-card h3, .operator-progress-checklist strong, .operator-status-tile strong, .operator-task-card strong, .operator-answer-panel strong, .operator-workflow-step strong, .status-card strong, .task-card strong, .model-panel strong, .training-library-card strong, .operator-tutorial-card h2 { color: var(--text-primary) !important; } p, li, dd, small, em, cite, .workflow-helper-text, .inline-status, .mission-hero p, .ceo-workflow-card span, .operator-workspace-header p, .operator-answer-panel span, .operator-workflow-step span, .operator-guided-workflow p, .operator-status-tile span, .operator-status-tile small, .operator-task-card span, .operator-step-list span, .operator-step-list em, .wallet-card span, .timeline-item span, .timeline-item p, .timeline-item code, .command-template-row code, .command-template-row span, .command-template-row em, .workspace-row code, .risk-check-list span, .risk-profile-explainer, .operator-wizard-header span, .operator-step p, .operator-step-note, .operator-count-change, .artifact-stat span, .artifact-pager span, .owner-proof-surfaces > span, .owner-proof-surface-list span, .owner-proof-surface-list p, .operator-training-card-header p, .training-library-hero p, .training-library-card p, .training-text-module p, .training-text-module li, .training-pair-list span, .training-video-current p, .training-chapter-grid span, .training-asset-plan span, .safe-paper-hero small, .safe-paper-result-card small, .safe-paper-table-card li, .operator-progress-checklist span, .operator-progress-checklist small, .safe-paper-warning-card li, .safe-paper-warning-card p, .operator-tutorial-card p, .operator-tutorial-script { color: var(--text-secondary) !important; } a, .footer-content a, .auth-proof-banner a, .timeline-item a, .operator-page-label, .operator-area, .operator-training-card-header span, .training-library-hero span, .training-library-card > div:first-child span, .safe-paper-hero span, .safe-paper-result-card span, .safe-paper-table-card h3 { color: var(--brand-blue) !important; } input, select, textarea, option, .model-test-form select, .model-test-form input, .model-test-form textarea, .compact-form input, .compact-form select, .compact-form textarea, .artifact-controls select, .artifact-controls input, .operator-step select, .owner-file-picker input[type="file"], .checklist-item select, .arbitrage-builder input, .arbitrage-builder select, .arbitrage-builder textarea { background: var(--input-background) !important; border-color: var(--border) !important; color: var(--input-text) !important; caret-color: var(--input-text); } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1; } input:focus, select:focus, textarea:focus { border-color: var(--brand-blue) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; outline: none; } button, .cta-button, .secondary-action, .operator-primary-action, .operator-secondary-action, nav a, .quick-nav a, .operator-simple-mode nav a, .artifact-pager button, .task-card button, .operator-mode-actions button, .training-mode-tabs button, .training-library-actions button, .training-library-actions a, .training-video-controls a, .training-chapter-grid button, .operator-training-menu-list button, .operator-next-action-header button, .operator-next-action-panel button { border-color: var(--border) !important; color: var(--text-primary) !important; } .cta-button, .button-row button, .compact-form button, .artifact-controls button, .control-grid article > button, .model-panel > button, .model-test-form button, .command-template-row button, .key-template-grid button, .operator-step-actions button, .operator-wizard-header button, .operator-primary-action, .operator-workflow-step button, .operator-workflow-step a, .operator-manual-link-row a, .operator-training-card-header button, .training-mode-tabs .training-mode-active, .training-library-actions button:first-child { background: var(--button-primary) !important; border: 0 !important; color: #ffffff !important; } .safe-paper-hero, .core-setup-banner, .owner-action-output, .operator-check-pass, .operator-step-ready, .risk-check-pass, .owner-gate-pass, .security-status-pass, .safe-paper-status-card, .status-success, .training-chapter-grid .training-chapter-active { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 55%, var(--border)) !important; color: var(--status-success-text) !important; } .safe-paper-hero *, .core-setup-banner *, .owner-action-output *, .operator-check-pass *, .operator-step-ready *, .risk-check-pass *, .owner-gate-pass *, .security-status-pass *, .safe-paper-status-card *, .status-success *, .training-chapter-grid .training-chapter-active * { color: var(--status-success-text) !important; } .safe-paper-hero button, .owner-primary-actions button:first-child, .training-video-controls button, .training-library-hero a { background: var(--button-success) !important; color: #ffffff !important; } .core-setup-banner-review, .status-warning, .security-status-review, .security-status-unknown, .operator-next-action-panel .button-row .cta-button { background: var(--status-warning-bg) !important; border-color: color-mix(in srgb, var(--status-warning) 55%, var(--border)) !important; color: var(--status-warning-text) !important; } .core-setup-banner-review *, .status-warning *, .security-status-review *, .security-status-unknown * { color: var(--status-warning-text) !important; } .safe-paper-warning-card, .status-danger, .operator-check-blocked, .operator-step-blocked, .risk-check-blocked, .owner-gate-blocked, .security-status-fail { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 55%, var(--border)) !important; color: var(--status-danger-text) !important; } .safe-paper-warning-card *, .status-danger *, .operator-check-blocked *, .operator-step-blocked *, .risk-check-blocked *, .owner-gate-blocked *, .security-status-fail * { color: var(--status-danger-text) !important; } .safe-paper-warning-card button { background: var(--button-danger) !important; color: #ffffff !important; } .model-output, .owner-gate-card pre, .training-video-player, .operator-tutorial-script, pre, code { background: var(--code-background) !important; border-color: var(--border-strong) !important; color: var(--code-text) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .safe-paper-result-card, :root:not([data-theme="day"]) .safe-paper-table-card, :root:not([data-theme="day"]) .model-panel, :root:not([data-theme="day"]) .task-card, :root:not([data-theme="day"]) .operator-dashboard, :root:not([data-theme="day"]) .simple-operator-workspace { background: var(--surface-strong) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important; } :root:not([data-theme="day"]) .operator-progress-checklist article, :root:not([data-theme="day"]) .operator-status-tile, :root:not([data-theme="day"]) .safe-paper-table-card { background: var(--surface-muted) !important; } } :root[data-theme="night"] .safe-paper-result-card, :root[data-theme="night"] .safe-paper-table-card, :root[data-theme="night"] .model-panel, :root[data-theme="night"] .task-card, :root[data-theme="night"] .operator-dashboard, :root[data-theme="night"] .simple-operator-workspace { background: var(--surface-strong) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important; } :root[data-theme="night"] .operator-progress-checklist article, :root[data-theme="night"] .operator-status-tile, :root[data-theme="night"] .safe-paper-table-card { background: var(--surface-muted) !important; } .safe-paper-hero, .safe-paper-status-card, .operator-progress-checklist article.operator-check-pass, .operator-check-pass, .operator-step-ready, .risk-check-pass, .owner-gate-pass, .security-status-pass, .status-success { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 58%, var(--border)) !important; color: var(--status-success-text) !important; } .safe-paper-hero span, .safe-paper-hero strong, .safe-paper-hero small, .safe-paper-status-card span, .safe-paper-status-card strong, .safe-paper-status-card small, .safe-paper-status-card p, .operator-progress-checklist article.operator-check-pass span, .operator-progress-checklist article.operator-check-pass strong, .operator-progress-checklist article.operator-check-pass small, .operator-check-pass span, .operator-check-pass strong, .operator-check-pass small, .operator-step-ready *, .risk-check-pass *, .owner-gate-pass *, .security-status-pass *, .status-success * { color: var(--status-success-text) !important; } .safe-paper-warning-card, .operator-progress-checklist article.operator-check-blocked, .operator-check-blocked, .operator-step-blocked, .risk-check-blocked, .owner-gate-blocked, .security-status-fail, .status-danger { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 58%, var(--border)) !important; color: var(--status-danger-text) !important; } .safe-paper-warning-card span, .safe-paper-warning-card strong, .safe-paper-warning-card small, .safe-paper-warning-card p, .safe-paper-warning-card li, .operator-progress-checklist article.operator-check-blocked span, .operator-progress-checklist article.operator-check-blocked strong, .operator-progress-checklist article.operator-check-blocked small, .operator-check-blocked span, .operator-check-blocked strong, .operator-check-blocked small, .operator-step-blocked *, .risk-check-blocked *, .owner-gate-blocked *, .security-status-fail *, .status-danger * { color: var(--status-danger-text) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .safe-paper-status-card, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-pass, :root:not([data-theme="day"]) .operator-check-pass, :root:not([data-theme="day"]) .status-success { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 62%, var(--border)) !important; color: var(--status-success-text) !important; } :root:not([data-theme="day"]) .safe-paper-status-card *, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-pass *, :root:not([data-theme="day"]) .operator-check-pass *, :root:not([data-theme="day"]) .status-success * { color: var(--status-success-text) !important; } :root:not([data-theme="day"]) .safe-paper-warning-card, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-blocked, :root:not([data-theme="day"]) .operator-check-blocked, :root:not([data-theme="day"]) .status-danger { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 62%, var(--border)) !important; color: var(--status-danger-text) !important; } :root:not([data-theme="day"]) .safe-paper-warning-card *, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-blocked *, :root:not([data-theme="day"]) .operator-check-blocked *, :root:not([data-theme="day"]) .status-danger * { color: var(--status-danger-text) !important; } } :root[data-theme="night"] .safe-paper-status-card, :root[data-theme="night"] .operator-progress-checklist article.operator-check-pass, :root[data-theme="night"] .operator-check-pass, :root[data-theme="night"] .status-success { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 62%, var(--border)) !important; color: var(--status-success-text) !important; } :root[data-theme="night"] .safe-paper-status-card *, :root[data-theme="night"] .operator-progress-checklist article.operator-check-pass *, :root[data-theme="night"] .operator-check-pass *, :root[data-theme="night"] .status-success * { color: var(--status-success-text) !important; } :root[data-theme="night"] .safe-paper-warning-card, :root[data-theme="night"] .operator-progress-checklist article.operator-check-blocked, :root[data-theme="night"] .operator-check-blocked, :root[data-theme="night"] .status-danger { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 62%, var(--border)) !important; color: var(--status-danger-text) !important; } :root[data-theme="night"] .safe-paper-warning-card *, :root[data-theme="night"] .operator-progress-checklist article.operator-check-blocked *, :root[data-theme="night"] .operator-check-blocked *, :root[data-theme="night"] .status-danger * { color: var(--status-danger-text) !important; } /* Final EtherealAI theme cascade. This intentionally lands last because older page rules still contain legacy light colors. */ body, body.operator-simple-mode { background: var(--background-gradient) !important; color: var(--text-primary); } .responsive-header, footer, .operator-simple-mode nav, .auth-proof-banner, .simple-operator-workspace, .mission-hero, .operator-dashboard, .ceo-workflow-map, .model-panel, .status-card, .role-card, .next-actions, .task-card, .operator-answer-panel article, .operator-guided-workflow, .operator-workflow-step, .operator-manual-link-row, .operator-status-tile, .operator-task-card, .operator-step-list article, .wallet-card, .owner-progress-card, .owner-gate-card, .owner-file-status, .owner-detected-wallet, .owner-file-summary, .risk-profile-current-status, .owner-proof-surfaces, .owner-proof-surface-list article, .operator-wizard, .arbitrage-builder, .inline-tool-panel, .timeline-item, .workspace-row, .checklist-item, .command-template-row, .artifact-stat, .operator-training-card, .training-library-hero, .training-library-card, .training-pair-list article, .training-video-current, .training-asset-plan, .training-transcript, .safe-paper-result-card, .safe-paper-table-card, .safe-paper-warning-card, .operator-next-action-panel, .feature-card, .pricing-card, .testimonial-card { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-soft); color: var(--text-primary); } .home-workflows, .features-section, .pricing-section, .testimonials-section { background: var(--background-gradient) !important; } .operator-mode-bar { background: linear-gradient(135deg, var(--brand-purple), #160b22 58%, var(--brand-blue)) !important; border-bottom: 1px solid var(--border-strong); color: #ffffff; } h1, h2, h3, h4, strong, label, dt, .operator-workspace-header h1, .operator-guided-workflow h2, .operator-tutorial-card h2, .training-text-module h2, .training-text-module h3, .training-video-current h3, .training-library-card h2, .operator-training-card-header h1, .training-library-hero h1, .safe-paper-result-card strong, .safe-paper-warning-card strong { color: var(--text-primary); } p, li, dd, small, em, cite, .inline-status, .workflow-helper-text, .mission-hero p, .ceo-workflow-card span, .operator-workspace-header p, .operator-answer-panel span, .operator-workflow-step span, .operator-guided-workflow p, .operator-status-tile span, .operator-status-tile small, .operator-task-card span, .operator-step-list span, .operator-step-list em, .wallet-card span, .timeline-item span, .timeline-item p, .timeline-item code, .command-template-row code, .command-template-row span, .command-template-row em, .workspace-row code, .risk-check-list span, .risk-profile-explainer, .operator-wizard-header span, .operator-step p, .operator-step-note, .operator-count-change, .artifact-stat span, .artifact-pager span, .owner-proof-surfaces > span, .owner-proof-surface-list span, .owner-proof-surface-list p, .operator-training-card-header p, .training-library-hero p, .training-library-card p, .training-text-module p, .training-text-module li, .training-pair-list span, .training-video-current p, .training-chapter-grid span, .training-asset-plan span, .safe-paper-hero small, .safe-paper-result-card small, .safe-paper-table-card li { color: var(--text-secondary); } a, .footer-content a, .auth-proof-banner a, .timeline-item a, .operator-page-label, .operator-area, .operator-training-card-header span, .training-library-hero span, .training-library-card > div:first-child span, .safe-paper-hero span, .safe-paper-result-card span, .safe-paper-table-card h3 { color: var(--brand-blue); } nav a, .quick-nav a, .operator-simple-mode nav a, .artifact-pager button, .task-card button, .operator-mode-actions button, .operator-secondary-action, .training-mode-tabs button, .training-library-actions button, .training-library-actions a, .training-video-controls a, .training-chapter-grid button, .operator-training-menu-list button, .operator-next-action-header button, .operator-next-action-panel button { background: var(--surface-muted) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } input, select, textarea, .model-test-form select, .model-test-form input, .model-test-form textarea, .compact-form input, .compact-form select, .artifact-controls select, .artifact-controls input, .operator-step select, .owner-file-picker input[type="file"], .checklist-item select { background: var(--input-background) !important; border-color: var(--border) !important; color: var(--input-text) !important; } input::placeholder, textarea::placeholder { color: var(--text-muted); } .cta-button, .secondary-action, .button-row button, .compact-form button, .artifact-controls button, .control-grid article > button, .model-panel > button, .model-test-form button, .command-template-row button, .key-template-grid button, .operator-step-actions button, .operator-wizard-header button, .operator-primary-action, .operator-workflow-step button, .operator-workflow-step a, .operator-manual-link-row a, .operator-training-card-header button, .training-mode-tabs .training-mode-active, .training-library-actions button:first-child { background: var(--button-primary) !important; border: 0 !important; color: #ffffff !important; } .safe-paper-hero, .core-setup-banner, .owner-action-output { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 42%, var(--border)) !important; color: var(--status-success-text) !important; } .safe-paper-hero button, .owner-primary-actions button:first-child, .training-video-controls button, .training-library-hero a { background: var(--button-success) !important; color: #ffffff !important; } .core-setup-banner-review { background: var(--status-warning-bg) !important; border-color: color-mix(in srgb, var(--status-warning) 45%, var(--border)) !important; color: var(--status-warning-text) !important; } .safe-paper-warning-card { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 42%, var(--border)) !important; color: var(--status-danger-text) !important; } .model-output, .owner-gate-card pre, .training-video-player, .operator-tutorial-script { background: var(--code-background) !important; border: 1px solid var(--border-strong); color: var(--code-text) !important; } .inline-status, .operator-status-tile, .operator-task-card, .operator-next-action-grid article, .quick-nav a, .home-workflow-card, .ceo-workflow-card, .artifact-stat { background: var(--surface-muted) !important; } .auth-proof-banner, .owner-proof-surfaces, .ceo-workflow-card, .operator-answer-panel article, .owner-optional-card, .operator-step.owner-optional-connection-card, .timeline-item { border-left-color: var(--status-info) !important; } .status-card { border-left-color: var(--status-warning) !important; } .status-card.ok, .operator-check-pass, .operator-step-ready, .risk-check-pass, .owner-gate-pass, .security-status-pass, .safe-paper-status-card, .training-chapter-grid .training-chapter-active { border-left-color: var(--status-success) !important; } .status-card.warning, .operator-check-blocked, .operator-step-blocked, .risk-check-blocked, .owner-gate-blocked, .security-status-fail { border-left-color: var(--status-danger) !important; } .security-status-review, .security-status-unknown { border-left-color: var(--status-warning) !important; } .status-success { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 44%, var(--border)) !important; color: var(--status-success-text) !important; } .status-warning { background: var(--status-warning-bg) !important; border-color: color-mix(in srgb, var(--status-warning) 44%, var(--border)) !important; color: var(--status-warning-text) !important; } .status-danger { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 46%, var(--border)) !important; color: var(--status-danger-text) !important; } .status-info { background: var(--status-info-bg) !important; border-color: color-mix(in srgb, var(--status-info) 44%, var(--border)) !important; color: var(--status-info-text) !important; } .status-success strong, .status-success span { color: var(--status-success-text) !important; } .status-warning strong, .status-warning span { color: var(--status-warning-text) !important; } .status-danger strong, .status-danger span { color: var(--status-danger-text) !important; } .status-info strong, .status-info span { color: var(--status-info-text) !important; } .operator-next-action-grid article.status-success { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 44%, var(--border)) !important; color: var(--status-success-text) !important; } .operator-next-action-grid article.status-warning { background: var(--status-warning-bg) !important; border-color: color-mix(in srgb, var(--status-warning) 44%, var(--border)) !important; color: var(--status-warning-text) !important; } .operator-next-action-grid article.status-danger { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 46%, var(--border)) !important; color: var(--status-danger-text) !important; } .operator-next-action-grid article.status-info { background: var(--status-info-bg) !important; border-color: color-mix(in srgb, var(--status-info) 44%, var(--border)) !important; color: var(--status-info-text) !important; } .operator-next-action-button { background: var(--button-primary) !important; border-color: color-mix(in srgb, var(--brand-blue) 55%, var(--border)) !important; box-shadow: var(--shadow-panel); color: #ffffff !important; } .operator-next-action-panel { box-shadow: var(--shadow-panel); } .operator-next-action-panel .button-row .cta-button { background: var(--status-warning-bg) !important; border: 1px solid color-mix(in srgb, var(--status-warning) 56%, var(--border)) !important; box-shadow: none; color: var(--status-warning-text) !important; } .operator-next-action-panel .button-row button { background: var(--surface-muted) !important; border: 1px solid var(--border) !important; box-shadow: none; color: var(--text-primary) !important; } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* Polished EtherealAI day/night brand layer. Keep this near the end so older page-specific hard-coded colors inherit the shared theme without losing layout. */ body { background: var(--background-gradient); color: var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; } .responsive-header, footer, .home-hero, .home-workflow-card, .auth-proof-banner, .status-card, .role-card, .model-panel, .next-actions, .task-card, .artifact-stat, .risk-profile-current-status, .owner-proof-surfaces, .owner-proof-surface-list article, .operator-step-list article, .wallet-card, .timeline-item, .workspace-row, .checklist-item, .command-template-row, #file-list button, .owner-progress-card, .owner-gate-card, .owner-file-status, .owner-detected-wallet, .owner-file-summary, .operator-training-menu-list, .operator-training-card, .training-pair-list article, .training-video-current, .training-asset-plan, .training-transcript, .training-library-hero, .training-library-card, .safe-paper-result-card, .safe-paper-table-card, .safe-paper-warning-card, .simple-operator-workspace, .operator-answer-panel article, .operator-guided-workflow, .operator-workflow-step, .operator-manual-link-row, .operator-status-tile, .operator-task-card, .mission-hero, .operator-dashboard, .ceo-workflow-map, .arbitrage-builder, .inline-tool-panel, .operator-wizard, .operator-next-action-panel { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-soft); color: var(--text-primary); } .operator-simple-mode, .home-workflows, .features-section, .pricing-section, .testimonials-section { background: var(--background-gradient); } .responsive-header, .operator-simple-mode nav { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); box-shadow: 0 10px 30px rgba(22, 11, 34, 0.08); } .operator-mode-bar { background: linear-gradient(135deg, var(--brand-purple), #160b22 58%, var(--brand-blue)); border-bottom: 1px solid var(--border-strong); box-shadow: var(--shadow-soft); } h1, h2, h3, h4, strong, label, dt, .auth-proof-banner strong, .artifact-stat strong, .owner-proof-surfaces > strong, .operator-answer-panel strong, .operator-status-tile strong, .operator-task-card strong, .safe-paper-result-card strong, .safe-paper-warning-card strong, .training-pair-list strong, .training-asset-plan strong, .operator-training-card-header h1, .training-library-hero h1, .training-text-module h2, .training-video-current h3, .training-library-card h2, .training-text-module h3, .operator-workspace-header h1, .operator-guided-workflow h2, .operator-tutorial-card h2 { color: var(--text-primary); } p, li, dd, small, em, cite, .auth-proof-banner span, .footer-content li, .footer-bottom p, .mission-hero p, .ceo-workflow-card span, .workflow-helper-text, .operator-step-list span, .operator-step-list em, .wallet-card span, .timeline-item span, .timeline-item p, .timeline-item code, .command-template-row code, .command-template-row span, .command-template-row em, .workspace-row code, .owner-file-picker label, .owner-gate-card dt, .operator-workspace-header p, .operator-answer-panel span, .operator-workflow-step span, .operator-guided-workflow p, .operator-manual-link-row span, .operator-status-tile span, .operator-status-tile small, .operator-task-card span, .operator-tutorial-card p, .operator-tutorial-script, .training-text-module p, .training-text-module li, .training-pair-list span, .training-video-current p, .training-chapter-grid span, .training-asset-plan span, .operator-training-card-header p, .training-library-hero p, .training-library-card p, .safe-paper-hero small, .safe-paper-result-card small, .safe-paper-table-card li, .risk-check-list span, .risk-profile-explainer, .operator-wizard-header span, .operator-step p, .operator-step-note, .operator-count-change, .artifact-stat span, .artifact-pager span, .owner-proof-surfaces > span, .owner-proof-surface-list span, .owner-proof-surface-list p { color: var(--text-secondary); } a, .footer-content a, .auth-proof-banner a, .timeline-item a, .operator-page-label, .operator-area, .operator-training-card-header span, .training-library-hero span, .training-library-card > div:first-child span { color: var(--brand-blue); } nav a, .quick-nav a, .operator-simple-mode nav a, .artifact-pager button, .task-card button, .operator-mode-actions button, .operator-secondary-action, .training-mode-tabs button, .training-library-actions button, .training-library-actions a, .training-video-controls a, .training-chapter-grid button, .operator-next-action-header button, .operator-next-action-panel button { background: var(--surface-muted); border-color: var(--border); color: var(--text-primary); } nav a:hover, .quick-nav a:hover, .operator-simple-mode nav a:hover, .artifact-pager button:hover, .task-card button:hover, .operator-secondary-action:hover, .training-chapter-grid button:hover { background: var(--status-info-bg); border-color: var(--brand-blue); color: var(--text-primary); } .cta-button, .secondary-action, .button-row button, .compact-form button, .artifact-controls button, .control-grid article > button, .model-panel > button, .model-test-form button, .command-template-row button, .key-template-grid button, .operator-step-actions button, .operator-wizard-header button, .operator-primary-action, .operator-workflow-step button, .operator-workflow-step a, .operator-manual-link-row a, .operator-training-card-header button, .training-mode-tabs .training-mode-active, .training-library-actions button:first-child { background: var(--button-primary); border: 0; color: var(--text-inverse); box-shadow: 0 10px 26px rgba(37, 99, 235, 0.18); } .cta-button:hover, .secondary-action:hover, .button-row button:hover, .compact-form button:hover, .artifact-controls button:hover, .control-grid article > button:hover, .model-panel > button:hover, .model-test-form button:hover, .command-template-row button:hover, .key-template-grid button:hover, .operator-step-actions button:hover, .operator-wizard-header button:hover, .operator-primary-action:hover, .operator-workflow-step button:hover, .operator-workflow-step a:hover, .operator-manual-link-row a:hover { background: var(--button-primary-hover); transform: translateY(-1px); } .safe-paper-hero, .core-setup-banner, .owner-action-output { background: var(--status-success-bg); border-color: color-mix(in srgb, var(--status-success) 42%, var(--border)); color: var(--status-success-text); } .safe-paper-hero button, .owner-primary-actions button:first-child, .training-video-controls button, .training-library-hero a { background: var(--button-success); color: #ffffff; } .safe-paper-hero button:hover, .owner-primary-actions button:first-child:hover, .training-video-controls button:hover, .training-library-hero a:hover { background: color-mix(in srgb, var(--button-success) 82%, #000000); } .safe-paper-hero span, .safe-paper-result-card span, .safe-paper-table-card h3, .core-setup-banner strong, .core-setup-banner span, .owner-action-output { color: var(--status-success-text); } .core-setup-banner-review { background: var(--status-warning-bg); border-color: color-mix(in srgb, var(--status-warning) 45%, var(--border)); color: var(--status-warning-text); } .core-setup-banner-review strong { color: var(--status-warning-text); } .safe-paper-warning-card { background: var(--status-danger-bg); border-color: color-mix(in srgb, var(--status-danger) 42%, var(--border)); color: var(--status-danger-text); } .safe-paper-warning-card strong { color: var(--status-danger-text); } input, select, textarea, .model-test-form select, .model-test-form input, .model-test-form textarea, .compact-form input, .compact-form select, .artifact-controls select, .artifact-controls input, .operator-step select, .owner-file-picker input[type="file"], .checklist-item select { background: var(--input-background); border: 1px solid var(--border); color: var(--input-text); } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .inline-status, .workspace-row, .checklist-item, .command-template-row, .artifact-stat, .operator-status-tile, .operator-task-card, .operator-training-menu-list button, .training-pair-list article, .training-video-current, .training-asset-plan, .training-transcript, .owner-file-summary, .operator-next-action-grid article, .quick-nav a, .home-workflow-card, .ceo-workflow-card { background: var(--surface-muted); border-color: var(--border); } .model-output, .owner-gate-card pre, .training-video-player, .operator-tutorial-script { background: var(--code-background); border: 1px solid var(--border-strong); color: var(--code-text); } .training-transcript pre { color: var(--text-primary); } .training-video-frame { background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand-pink) 40%, transparent), transparent 55%), linear-gradient(135deg, var(--brand-purple), var(--brand-blue)); border-color: color-mix(in srgb, var(--brand-blue) 42%, var(--border)); } .comparison-table th { background: var(--surface-muted); color: var(--text-secondary); } .comparison-table th, .comparison-table td, .dashboard-live-blockers li, .advanced-bot-records, .operator-training-card-header, .training-library-card .training-video-module { border-color: var(--border); } .feature-card, .pricing-card, .testimonial-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); } .most-popular { border-color: var(--brand-pink); } .most-popular::before { background: var(--brand-pink); color: #ffffff; } .hero-section { background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand-pink) 36%, transparent), transparent 30%), linear-gradient(135deg, var(--brand-purple), var(--brand-blue)); color: #ffffff; } .auth-proof-banner, .owner-proof-surfaces, .ceo-workflow-card, .operator-answer-panel article, .owner-optional-card, .operator-step.owner-optional-connection-card, .timeline-item { border-left-color: var(--status-info); } .status-card { border-left-color: var(--status-warning); } .status-card.ok, .operator-check-pass, .operator-step-ready, .risk-check-pass, .owner-gate-pass, .security-status-pass, .safe-paper-status-card, .training-chapter-grid .training-chapter-active { border-left-color: var(--status-success) !important; } .status-card.warning, .operator-check-blocked, .operator-step-blocked, .risk-check-blocked, .owner-gate-blocked, .security-status-fail { border-left-color: var(--status-danger) !important; } .security-status-review, .security-status-unknown { border-left-color: var(--status-warning); } .risk-status-ready, .operator-state-ready, .security-status-pass h3 span { background: var(--status-success-bg); color: var(--status-success-text) !important; } .risk-status-blocked, .operator-state-blocked, .security-status-fail h3 span { background: var(--status-danger-bg); color: var(--status-danger-text) !important; } .security-status-review h3 span, .security-status-unknown h3 span { background: var(--status-warning-bg); color: var(--status-warning-text); } .status-success { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 44%, var(--border)) !important; color: var(--status-success-text) !important; } .status-warning { background: var(--status-warning-bg) !important; border-color: color-mix(in srgb, var(--status-warning) 44%, var(--border)) !important; color: var(--status-warning-text) !important; } .status-danger { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 46%, var(--border)) !important; color: var(--status-danger-text) !important; } .status-info { background: var(--status-info-bg) !important; border-color: color-mix(in srgb, var(--status-info) 44%, var(--border)) !important; color: var(--status-info-text) !important; } .status-success strong, .status-success span { color: var(--status-success-text) !important; } .status-warning strong, .status-warning span { color: var(--status-warning-text) !important; } .status-danger strong, .status-danger span { color: var(--status-danger-text) !important; } .status-info strong, .status-info span { color: var(--status-info-text) !important; } .operator-next-action-button { background: var(--button-primary); border-color: color-mix(in srgb, var(--brand-blue) 55%, var(--border)); box-shadow: var(--shadow-panel); color: var(--text-inverse); } .operator-next-action-panel { box-shadow: var(--shadow-panel); } .operator-next-action-panel .button-row .cta-button { background: var(--status-warning-bg); border: 1px solid color-mix(in srgb, var(--status-warning) 56%, var(--border)); box-shadow: none; color: var(--status-warning-text); } .operator-next-action-panel .button-row .cta-button:hover { background: color-mix(in srgb, var(--status-warning-bg) 74%, var(--status-warning)); color: var(--status-warning-text); transform: translateY(-1px); } .operator-next-action-panel .button-row button { background: var(--surface-muted); border: 1px solid var(--border); box-shadow: none; color: var(--text-primary); } .simple-operator-workspace, .operator-simple-mode .operator-simple-keep { box-shadow: var(--shadow-soft); } .operator-simple-mode .operator-guided-focus.model-panel { border-color: var(--status-success); } .operator-highlight-target { outline-color: var(--brand-pink); } .operator-training-overlay, .operator-tutorial-overlay { background: rgba(9, 3, 15, 0.78); } .operator-training-card, .operator-tutorial-card { box-shadow: var(--shadow-panel); } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .logo img { filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.24)); } } .footer-content { display: grid; gap: var(--eos-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 auto; max-width: 1040px; padding: 0 24px; text-align: left; } .footer-content p, .footer-content li, .footer-bottom p { font-size: var(--eos-text-6); } .footer-content ul { list-style: none; margin: 0; padding: 0; } .footer-content a { color: #2563eb; text-decoration: none; } .status-grid, .role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--eos-space-4); margin: 24px 0; width: 100%; } .status-card, .role-card, .model-panel, .next-actions { background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); padding: 18px; text-align: left; } .status-card { border-left: 6px solid #f59e0b; } .status-card.ok { border-left-color: #10b981; } .status-card.warning { border-left-color: #ef4444; } .status-card h2, .role-card h3, .model-panel h2, .next-actions h2 { margin-top: 0; } .quick-nav-panel { position: sticky; top: 0; z-index: 5; } .quick-nav { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .quick-nav a { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); color: #111827; padding: 8px 10px; text-decoration: none; } .next-actions ul { padding-left: 20px; } .next-actions li { margin-bottom: 10px; } .model-test-form { display: grid; gap: var(--eos-space-2); } .model-test-form select, .model-test-form input, .model-test-form textarea { border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); font: inherit; padding: 10px; width: 100%; } .inline-status { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); color: #4b5563; font-size: var(--eos-text-5); padding: 8px 10px; } .model-test-form button { background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; padding: 12px 16px; } .model-output { background: #111827; border-radius: var(--eos-radius-3); color: #f9fafb; margin-top: 16px; min-height: 120px; overflow: auto; padding: 16px; white-space: pre-wrap; } .checkbox-row { align-items: center; display: flex; gap: var(--eos-space-2); } .checkbox-row input { width: auto; } .checkbox-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .inline-tool-panel { border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); padding: 14px; } .inline-tool-panel h3 { margin: 0; } .task-list { display: grid; gap: var(--eos-space-3); } .task-card { align-items: center; background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); grid-template-columns: 1fr auto; padding: 14px; text-align: left; } .task-card h3, .task-card p { margin: 0; } .task-card button { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); cursor: pointer; font: inherit; padding: 8px 12px; } .control-grid { display: grid; gap: var(--eos-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .compact-form { display: grid; gap: var(--eos-space-2); grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px) auto; } .compact-form input { border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); font: inherit; min-width: 0; padding: 10px; } .compact-form select, .artifact-controls select, .artifact-controls input { border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); font: inherit; min-width: 0; padding: 10px; } .button-row { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .button-row button, .compact-form button, .artifact-controls button, .control-grid article > button, .model-panel > button { background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; padding: 10px 14px; } .button-row button:disabled, .model-panel > button:disabled { cursor: not-allowed; opacity: 0.55; } .control-grid article > button { margin: 0 8px 8px 0; } .control-grid article > button:disabled { cursor: not-allowed; opacity: 0.55; } .small-list { display: grid; gap: var(--eos-space-2); margin-top: 12px; } .compact-details { margin-top: 14px; } .compact-details summary { cursor: pointer; font-weight: 700; } .artifact-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .artifact-controls { display: grid; gap: var(--eos-space-2); grid-template-columns: minmax(130px, 180px) minmax(180px, 1fr) auto; margin-bottom: 12px; } .artifact-pager { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-2); margin: 0 0 12px; } .artifact-pager button { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); color: #111827; cursor: pointer; font: inherit; padding: 8px 12px; } .artifact-pager button:disabled { cursor: not-allowed; opacity: 0.55; } .artifact-pager span { color: #4b5563; font-size: var(--eos-text-5); } .artifact-stat { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 12px; } .artifact-stat strong { color: #111827; font-size: var(--eos-text-6); } .artifact-stat span { color: #4b5563; font-size: var(--eos-text-5); } .risk-profile-current-status { background: #f9fafb; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); margin: 14px 0; padding: 14px; } .risk-profile-status-header { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-2); justify-content: space-between; } .risk-profile-status-header > div { display: grid; gap: var(--eos-space-1); } .risk-profile-status-header span { color: #4b5563; } .risk-status-ready, .risk-status-blocked { border-radius: var(--eos-radius-pill); color: #ffffff !important; font-size: var(--eos-text-5); font-weight: 700; padding: 6px 10px; text-transform: uppercase; } .risk-status-ready { background: #15803d; } .risk-status-blocked { background: #b91c1c; } .risk-status-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .risk-check-list { display: grid; gap: var(--eos-space-2); list-style: none; margin: 0; padding: 0; } .risk-check-list li { align-items: start; background: #ffffff; border: 1px solid #e5e7eb; border-left: 4px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 10px; } .risk-check-pass { border-left-color: #16a34a !important; } .risk-check-blocked { border-left-color: #dc2626 !important; } .risk-check-list span, .risk-profile-explainer { color: #4b5563; font-size: var(--eos-text-6); } .risk-profile-explainer { margin: 0; } .dashboard-live-blockers { grid-column: 1 / -1; text-align: left; } .dashboard-live-blockers ul { display: grid; gap: var(--eos-space-2); list-style: none; margin: 8px 0 0; padding: 0; } .dashboard-live-blockers li { border-top: 1px solid #e5e7eb; display: grid; gap: var(--eos-space-1); padding-top: 8px; } .owner-proof-surfaces { background: #f9fafb; border: 1px solid #e5e7eb; border-left: 4px solid #2563eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); margin-top: 14px; padding: 12px; } .owner-proof-surfaces > strong { color: #111827; } .owner-proof-surfaces > span { color: #4b5563; font-size: var(--eos-text-5); } .owner-proof-surface-list { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .owner-proof-surface-list article { background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 10px; } .owner-proof-surface-list span, .owner-proof-surface-list p { color: #4b5563; font-size: var(--eos-text-5); margin: 0; } .owner-proof-command { min-height: auto; } .operator-wizard { background: #f8fafc; border: 1px solid #dbeafe; border-left: 5px solid #2563eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-4); margin-bottom: 16px; padding: 16px; } .operator-wizard-header { align-items: start; display: grid; gap: var(--eos-space-3); grid-template-columns: minmax(0, 1fr) auto; } .operator-wizard-header > div:first-child { display: grid; gap: var(--eos-space-1); } .operator-wizard-header span, .operator-step p, .operator-step-note, .operator-count-change { color: #4b5563; font-size: var(--eos-text-6); margin: 0; } .operator-progress-checklist { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .operator-progress-checklist article { background: #ffffff; border: 1px solid #e5e7eb; border-left: 4px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 10px; } .operator-check-pass { border-left-color: #16a34a !important; } .operator-check-blocked { border-left-color: #dc2626 !important; } .operator-step { border-left: 4px solid #d1d5db !important; } .operator-step-ready { border-left-color: #16a34a !important; } .operator-step-blocked { border-left-color: #dc2626 !important; } .operator-step-heading { align-items: center; display: flex; gap: var(--eos-space-2); justify-content: space-between; } .operator-state-ready, .operator-state-blocked { border-radius: var(--eos-radius-pill); color: #ffffff; font-size: var(--eos-text-4); font-weight: 700; padding: 5px 9px; text-transform: uppercase; } .operator-state-ready { background: #15803d; } .operator-state-blocked { background: #b91c1c; } .operator-step label:not(.checkbox-row) { font-weight: 700; } .operator-step select { border: 1px solid #9ca3af; border-radius: var(--eos-radius-3); font: inherit; min-height: 46px; padding: 10px; width: 100%; } .operator-step-actions { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .operator-step-actions button, .operator-wizard-header button { background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; padding: 10px 14px; } .operator-step-actions button:disabled, .operator-wizard-header button:disabled { cursor: not-allowed; opacity: 0.55; } .advanced-bot-records { border-top: 1px solid #e5e7eb; padding-top: 12px; } .operator-next-action-button { background: #111827; border: 1px solid #374151; border-radius: var(--eos-radius-pill); bottom: 18px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.2); color: #ffffff; cursor: pointer; font: inherit; font-weight: 700; padding: 12px 16px; position: fixed; right: 18px; z-index: 50; } .operator-next-action-panel { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); bottom: 76px; box-shadow: 0 18px 44px rgba(17, 24, 39, 0.24); display: none; gap: var(--eos-space-3); max-height: min(620px, calc(100vh - 110px)); max-width: min(460px, calc(100vw - 28px)); overflow: auto; padding: 16px; position: fixed; right: 18px; width: 460px; z-index: 51; } .operator-next-action-panel-open { display: grid; } .operator-next-action-header { align-items: center; display: flex; gap: var(--eos-space-3); justify-content: space-between; } .operator-next-action-header button, .operator-next-action-panel button { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); color: #111827; cursor: pointer; font: inherit; padding: 8px 10px; } .operator-next-action-panel p { margin: 0; } .operator-next-action-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .operator-next-action-grid article { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 10px; } .mission-hero, .operator-dashboard, .ceo-workflow-map { background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); margin: 18px 0; padding: 18px; text-align: left; } .mission-hero h1, .operator-dashboard h2, .ceo-workflow-map h2 { margin: 0; } .mission-hero p, .ceo-workflow-card span, .workflow-helper-text { color: #4b5563; margin: 0; } .ceo-workflow-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ceo-workflow-card { background: #f9fafb; border: 1px solid #e5e7eb; border-left: 4px solid #2563eb; border-radius: var(--eos-radius-3); color: #111827; display: grid; gap: var(--eos-space-1); padding: 12px; text-decoration: none; } .ceo-workflow-card strong { font-size: var(--eos-text-6); } .operator-shell { max-width: 980px; } .operator-step-list { display: grid; gap: var(--eos-space-3); } .operator-step-list article, .wallet-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 14px; text-align: left; } .operator-step-list span, .operator-step-list em, .wallet-card span { color: #4b5563; font-size: var(--eos-text-6); } .permission-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .permission-grid label { display: grid; gap: var(--eos-space-1); } .key-template-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 14px 0; } .key-template-grid button { background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; font-weight: 700; min-height: 46px; padding: 10px 12px; } .key-template-grid button:hover { background: #1d4ed8; } .key-takeover-checklist article { border-left: 4px solid #2563eb; } .security-shell { max-width: 1080px; } .security-check-card { border-left: 4px solid #6b7280; } .security-check-card h3 { align-items: center; display: flex; gap: var(--eos-space-2); justify-content: space-between; } .security-check-card h3 span { background: #f3f4f6; border-radius: var(--eos-radius-pill); color: #374151; font-size: var(--eos-text-4); padding: 4px 8px; } .security-status-pass { border-left-color: #15803d; } .security-status-pass h3 span { background: #dcfce7; color: #166534; } .security-status-review, .security-status-unknown { border-left-color: #ca8a04; } .security-status-review h3 span, .security-status-unknown h3 span { background: #fef3c7; color: #92400e; } .security-status-fail { border-left-color: #dc2626; } .security-status-fail h3 span { background: #fee2e2; color: #991b1b; } .timeline-list { display: grid; gap: var(--eos-space-2); margin-top: 14px; } .timeline-item { background: #ffffff; border: 1px solid #e5e7eb; border-left: 4px solid #2563eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 12px; } .timeline-item span, .timeline-item p, .timeline-item code { color: #4b5563; font-size: var(--eos-text-5); } .timeline-item p { margin: 0; } .timeline-item a { color: #2563eb; font-size: var(--eos-text-5); width: fit-content; } .timeline-item code { overflow-wrap: anywhere; white-space: pre-wrap; } .comparison-table { margin-top: 14px; overflow-x: auto; } .comparison-table table { border-collapse: collapse; min-width: 760px; width: 100%; } .comparison-table th, .comparison-table td { border-bottom: 1px solid #e5e7eb; padding: 10px; text-align: left; white-space: nowrap; } .comparison-table th { background: #f9fafb; color: #374151; font-size: var(--eos-text-5); } .workspace-row, .checklist-item, .command-template-row, #file-list button { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); padding: 10px; } .workspace-row { display: grid; gap: var(--eos-space-1); } .command-template-row { align-items: center; display: grid; gap: var(--eos-space-2); grid-template-columns: 1fr auto; } .command-template-row div { display: grid; gap: var(--eos-space-1); } .command-template-row code, .command-template-row span, .command-template-row em { color: #4b5563; font-size: 0.9em; } .command-template-row button { background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; padding: 8px 12px; } .command-template-row button:disabled { cursor: not-allowed; opacity: 0.55; } .workspace-row code { color: #4b5563; font-size: 0.85em; overflow-wrap: anywhere; } .checklist-item { align-items: start; display: grid; gap: var(--eos-space-2); grid-template-columns: 120px 1fr; } .owner-progress-grid, .owner-gate-list { display: grid; gap: var(--eos-space-3); } .owner-progress-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .owner-progress-card, .owner-gate-card, .owner-file-status, .owner-detected-wallet { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); padding: 16px; } .core-setup-banner { background: #ecfdf5; border: 1px solid #86efac; border-left: 6px solid #16a34a; border-radius: var(--eos-radius-3); color: #14532d; display: grid; gap: var(--eos-space-1); margin: 0 0 16px; padding: 18px; text-align: left; } .core-setup-banner strong { color: #052e16; font-size: var(--eos-text-9); } .core-setup-banner span { font-size: var(--eos-text-7); line-height: 1.45; } .core-setup-banner-review { background: #fff7ed; border-color: #fed7aa; border-left-color: #f97316; color: #7c2d12; } .core-setup-banner-review strong { color: #7c2d12; } .owner-file-picker { align-items: end; display: grid; gap: var(--eos-space-3); grid-template-columns: 1fr auto; } .owner-file-picker label { color: #374151; font-weight: 700; } .owner-file-picker input[type="file"] { border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); font: inherit; padding: 10px; } .owner-file-status { margin-top: 12px; } .owner-file-summary { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); padding: 12px; } .owner-detected-wallet { align-items: center; grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) auto auto; margin: 10px 0; } .owner-detected-wallet code { overflow-wrap: anywhere; } .owner-progress-card h3, .owner-gate-card h3 { margin: 0; } .owner-progress-card strong { color: #111827; font-size: var(--eos-text-9); } .owner-progress-bar { background: #e5e7eb; border-radius: var(--eos-radius-pill); height: 12px; overflow: hidden; } .owner-progress-bar span { background: #2563eb; display: block; height: 100%; } .owner-gate-card > div:first-child { align-items: center; display: flex; gap: var(--eos-space-3); justify-content: space-between; } .owner-gate-pass { border-left: 4px solid #16a34a; } .owner-gate-blocked { border-left: 4px solid #dc2626; } .owner-gate-card dl { display: grid; gap: var(--eos-space-2); margin: 0; } .owner-gate-card dt { color: #374151; font-weight: 700; } .owner-gate-card dd { margin: 0; } .owner-gate-card pre { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); margin: 0; padding: 10px; white-space: pre-wrap; } .owner-primary-actions button { font-size: var(--eos-text-7); font-weight: 800; min-height: 52px; padding: 13px 18px; } .owner-primary-actions button:first-child { background: #16a34a; } .owner-primary-actions button:first-child:hover { background: #15803d; } .owner-optional-card { border-left: 4px solid #2563eb; } .owner-action-output { background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: var(--eos-radius-3); color: #14532d; padding: 12px; } .operator-step.owner-optional-connection-card { border-left: 4px solid #2563eb; } .operator-simple-mode .advanced-only { display: none !important; } .operator-mode-bar { align-items: center; background: #111827; color: #ffffff; display: flex; gap: var(--eos-space-4); justify-content: space-between; padding: 12px 22px; width: 100%; box-sizing: border-box; } .operator-mode-bar strong, .operator-mode-bar span { display: block; } .operator-mode-bar span { color: #d1d5db; font-size: var(--eos-text-6); margin-top: 3px; } .operator-mode-actions, .operator-workspace-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .operator-mode-actions button, .operator-secondary-action, .operator-logout-action { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); color: #111827; cursor: pointer; font: inherit; font-weight: 700; padding: 10px 14px; text-decoration: none; } .operator-training-menu { position: relative; } .operator-training-menu-list { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18); display: grid; gap: var(--eos-space-1); min-width: 220px; padding: 8px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; } .operator-training-menu-list[hidden] { display: none !important; } .operator-training-menu-list button { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); color: #111827; cursor: pointer; font: inherit; font-weight: 800; padding: 12px 14px; text-align: left; } .operator-training-menu-list button:hover { background: #ecfdf5; border-color: #22c55e; } .operator-training-overlay { align-items: center; background: rgba(17, 24, 39, 0.74); display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 11000; } .operator-training-card { background: #ffffff; border-radius: var(--eos-radius-3); box-shadow: 0 26px 80px rgba(0, 0, 0, 0.36); box-sizing: border-box; color: #111827; display: grid; gap: var(--eos-space-4); max-height: calc(100vh - 44px); max-width: 980px; overflow: auto; padding: 26px; text-align: left; width: min(980px, calc(100vw - 32px)); } .operator-training-card-header { align-items: start; border-bottom: 1px solid #e5e7eb; display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 16px; } .operator-training-card-header span, .training-library-hero span, .training-library-card > div:first-child span { color: #2563eb; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .operator-training-card-header h1, .training-library-hero h1 { color: #111827; font-size: var(--eos-display-3); line-height: 1.05; margin: 6px 0; } .operator-training-card-header p, .training-library-hero p, .training-library-card p { color: #4b5563; line-height: 1.55; margin: 0; } .operator-training-card-header button, .training-mode-tabs button, .training-video-controls button, .training-video-controls a, .training-library-actions button, .training-library-actions a { align-items: center; border-radius: var(--eos-radius-3); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; justify-content: center; min-height: 42px; padding: 10px 14px; text-align: center; text-decoration: none; } .operator-training-card-header button { background: #111827; border: 0; color: #ffffff; } .training-mode-tabs, .training-video-controls, .training-library-actions { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .training-mode-tabs button, .training-library-actions button, .training-library-actions a { background: #f9fafb; border: 1px solid #d1d5db; color: #111827; } .training-mode-tabs .training-mode-active, .training-library-actions button:first-child { background: #111827; border-color: #111827; color: #ffffff; } .training-text-module, .training-video-module { display: grid; gap: var(--eos-space-4); } .training-text-module h2, .training-video-current h3, .training-library-card h2 { color: #111827; margin: 0; } .training-text-module h3 { color: #111827; font-size: var(--eos-text-7); margin: 6px 0 0; } .training-text-module p, .training-text-module li, .training-pair-list span, .training-video-current p, .training-chapter-grid span, .training-asset-plan span { color: #374151; line-height: 1.55; } .training-pair-list { display: grid; gap: var(--eos-space-2); } .training-pair-list article, .training-video-current, .training-asset-plan, .training-transcript, .training-library-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 14px; } .training-pair-list strong, .training-asset-plan strong { color: #111827; } .training-video-player { background: #111827; border-radius: var(--eos-radius-3); color: #ffffff; display: grid; gap: var(--eos-space-3); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 250px; padding: 18px; } .training-video-player strong, .training-video-player span, .training-video-player small { display: block; } .training-video-player strong { font-size: var(--eos-text-9); margin: 8px 0; } .training-video-player small { color: #d1d5db; } .training-video-frame { align-items: center; background: linear-gradient(135deg, #065f46, #1f2937); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--eos-radius-3); display: flex; justify-content: center; min-height: 190px; padding: 18px; text-align: center; } .training-video-controls button { background: #16a34a; border: 0; color: #ffffff; } .training-video-controls a { background: #ffffff; border: 1px solid #d1d5db; color: #111827; } .training-chapter-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .training-chapter-grid button { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); cursor: pointer; display: grid; gap: var(--eos-space-1); padding: 12px; text-align: left; } .training-chapter-grid .training-chapter-active { border-color: #16a34a; box-shadow: inset 4px 0 0 #16a34a; } .training-transcript pre { color: #111827; font-family: inherit; margin: 0; white-space: pre-wrap; } .training-library-hero { align-items: center; background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-5); grid-template-columns: minmax(0, 1fr) auto; margin: 22px 0; padding: 26px; } .training-library-hero a { background: #16a34a; border-radius: var(--eos-radius-3); color: #ffffff; font-weight: 900; padding: 14px 18px; text-align: center; text-decoration: none; } .training-library-grid { display: grid; gap: var(--eos-space-4); } .training-library-card { background: #ffffff; } .training-library-card .training-video-module { border-top: 1px solid #e5e7eb; padding-top: 12px; } .safe-paper-hero { align-items: center; background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1fr) auto; margin: 14px 0; padding: 20px; } .safe-paper-hero span, .safe-paper-result-card span, .safe-paper-table-card h3 { color: #166534; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; } .safe-paper-hero strong { color: #111827; display: block; font-size: var(--eos-text-9); margin: 4px 0; } .safe-paper-hero small, .safe-paper-result-card small, .safe-paper-table-card li { color: #374151; line-height: 1.5; } .arbitrage-builder { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); margin: 12px 0; padding: 16px; } .arbitrage-builder[hidden] { display: none; } .arbitrage-builder h3 { margin: 0; } .arbitrage-builder-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .arbitrage-builder-grid label, .checkbox-line { color: #111827; display: grid; font-weight: 800; gap: var(--eos-space-1); } .checkbox-line { align-items: center; display: flex; gap: var(--eos-space-2); } .safe-paper-hero button { background: #16a34a; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; font-size: var(--eos-text-7); font-weight: 900; min-height: 56px; padding: 14px 20px; } .safe-paper-hero button:disabled { background: #9ca3af; cursor: not-allowed; } .safe-paper-results { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 14px; } .safe-paper-result-card, .safe-paper-table-card, .safe-paper-warning-card { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 16px; } .safe-paper-status-card { border-left: 5px solid #16a34a; } .safe-paper-warning-card { border-left: 5px solid #dc2626; grid-column: 1 / -1; } .safe-paper-warning-card button { background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; font: inherit; font-weight: 900; min-height: 44px; padding: 10px 14px; } .safe-paper-result-card strong, .safe-paper-warning-card strong { color: #111827; font-size: var(--eos-text-9); } .safe-paper-table-card { grid-column: 1 / -1; } .safe-paper-table-card h3 { margin: 0; } .simple-operator-workspace { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08); box-sizing: border-box; display: grid; gap: var(--eos-space-5); margin: 22px auto; padding: 28px; text-align: left; width: min(1120px, calc(100vw - 32px)); } .operator-page-label, .operator-area { color: #2563eb; font-size: var(--eos-text-5); font-weight: 800; letter-spacing: 0.04em; margin: 0 0 8px; text-transform: uppercase; } .operator-workspace-header { align-items: start; display: grid; gap: var(--eos-space-5); grid-template-columns: minmax(0, 1fr) auto; } .operator-workspace-header h1 { color: #111827; font-size: var(--eos-display-3); line-height: 1; margin: 0 0 14px; } .operator-workspace-header p { color: #374151; font-size: var(--eos-text-8); line-height: 1.55; margin: 0; max-width: 760px; } .operator-workspace-actions { justify-content: flex-end; min-width: 260px; } .operator-primary-action { align-items: center; background: #16a34a; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; display: inline-flex; font: inherit; font-size: var(--eos-text-7); font-weight: 800; justify-content: center; min-height: 54px; padding: 14px 20px; text-align: center; text-decoration: none; width: 100%; } .operator-primary-action:hover { background: #15803d; } .operator-status-grid, .operator-task-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .operator-launch-widget { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-4); padding: 18px; } .operator-launch-widget-header { align-items: start; display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); } .operator-launch-widget-header h2 { color: #111827; font-size: var(--eos-display-2); line-height: 1.05; margin: 0 0 8px; } .operator-launch-widget-header p, .operator-launch-widget-note, .operator-launch-widget-blockers p, .operator-launch-widget-blockers li { color: #374151; line-height: 1.5; margin: 0; } .operator-launch-widget-actions { display: grid; gap: var(--eos-space-2); } .operator-launch-widget-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .operator-launch-widget-blockers { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 14px; } .operator-launch-widget-blockers strong { color: #111827; } .operator-launch-widget-blockers ul { margin: 0; padding-left: 20px; } .operator-answer-panel { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .operator-answer-panel article, .operator-guided-workflow, .operator-workflow-step, .operator-manual-link-row { background: #ffffff; border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 16px; } .operator-answer-panel article { border-left: 5px solid #2563eb; } .operator-answer-panel span, .operator-workflow-step span, .operator-guided-workflow p, .operator-manual-link-row span { color: #4b5563; line-height: 1.45; } .operator-answer-panel strong { color: #111827; font-size: var(--eos-text-9); } .operator-guided-workflow h2 { color: #111827; margin: 0; } .operator-workflow-steps { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .operator-workflow-step { align-content: start; } .operator-workflow-step button, .operator-workflow-step a, .operator-manual-link-row a { align-items: center; background: #111827; border: 0; border-radius: var(--eos-radius-3); color: #ffffff; cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; justify-content: center; min-height: 44px; padding: 10px 14px; text-align: center; text-decoration: none; } .operator-manual-link-row { align-items: center; grid-template-columns: auto auto 1fr; } .operator-status-tile, .operator-task-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 18px; } .operator-status-tile span, .operator-status-tile small, .operator-task-card span { color: #4b5563; line-height: 1.45; } .operator-status-tile strong { color: #111827; font-size: var(--eos-text-9); } .operator-task-card strong { color: #111827; font-size: var(--eos-text-7); } .operator-simple-mode { background: #f3f4f6; } .operator-simple-mode nav { background: #ffffff; border-bottom: 1px solid #e5e7eb; box-sizing: border-box; flex-wrap: wrap; justify-content: center; padding: 12px; width: 100%; } .operator-simple-mode nav a { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); color: #111827; font-size: var(--eos-text-6); font-weight: 700; padding: 10px 12px; } .operator-simple-mode .container { max-width: 1120px; width: 100%; } .operator-simple-mode .operator-simple-collapsed, .operator-simple-mode .advanced-operator-tools { display: none !important; } .operator-simple-mode .operator-guided-focus { display: grid !important; } .operator-simple-mode .operator-guided-focus.model-panel { border: 2px solid #22c55e; } .operator-simple-mode .operator-simple-keep .model-output:not(.owner-action-output), .operator-simple-mode .operator-simple-keep .comparison-table, .operator-simple-mode .operator-simple-keep .timeline-list, .operator-simple-mode .operator-simple-keep pre:not(.operator-simple-readable), .operator-simple-mode .operator-simple-keep table:not(.operator-simple-readable) { display: none !important; } .operator-simple-mode .operator-simple-keep .advanced-bot-records, .operator-simple-mode .operator-simple-keep .compact-details:not(.operator-guided-focus) { display: none !important; } .operator-simple-mode .operator-simple-keep { border: 1px solid #d1d5db; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06); margin-left: auto; margin-right: auto; max-width: 1120px; } .operator-simple-mode .operator-simple-keep h2 { font-size: var(--eos-text-9); } .operator-simple-mode .model-test-form, .operator-simple-mode .compact-form { gap: var(--eos-space-3); } .operator-simple-mode input, .operator-simple-mode select, .operator-simple-mode textarea { border-radius: var(--eos-radius-3); font-size: var(--eos-text-7); min-height: 44px; padding: 12px; } .operator-simple-mode textarea { min-height: 110px; } .operator-simple-mode button, .operator-simple-mode .cta-button { border-radius: var(--eos-radius-3); font-size: var(--eos-text-6); font-weight: 800; min-height: 44px; padding: 11px 15px; } .operator-highlight-target { outline: 4px solid #22c55e; outline-offset: 5px; } .operator-tutorial-overlay { align-items: center; background: rgba(17, 24, 39, 0.72); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 10000; } .operator-tutorial-card { background: #ffffff; border-radius: var(--eos-radius-3); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); display: grid; gap: var(--eos-space-4); max-width: 720px; padding: 28px; text-align: left; } .operator-tutorial-card h2 { color: #111827; font-size: var(--eos-text-9); margin: 0; } .operator-tutorial-card p, .operator-tutorial-script { color: #374151; font-size: var(--eos-text-7); line-height: 1.55; margin: 0; } .operator-tutorial-script { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); padding: 14px; } .checklist-item select { border: 1px solid #d1d5db; border-radius: var(--eos-radius-3); font: inherit; padding: 8px; } #file-list button { color: #111827; cursor: pointer; font: inherit; text-align: left; } #file-list button:hover { background: #eef2ff; } @media (max-width: 640px) { .task-card, .checklist-item, .compact-form, .artifact-controls, .operator-wizard-header, .operator-next-action-grid, .operator-workspace-header, .operator-training-card-header, .training-library-hero, .training-video-player, .safe-paper-hero, .arbitrage-builder-grid, .operator-answer-panel, .operator-workflow-steps, .operator-manual-link-row, .owner-file-picker, .owner-detected-wallet, .owner-gate-card > div:first-child { grid-template-columns: 1fr; } .operator-mode-bar { align-items: stretch; display: grid; } .operator-mode-actions, .operator-workspace-actions { flex-wrap: wrap; justify-content: stretch; } body.operator-simple-mode .operator-workspace-actions, body.operator-simple-mode .hero-action-grid { grid-template-columns: 1fr; } .operator-mode-actions button, .operator-top-dropdown, .operator-top-control, .operator-mode-toggle, .operator-secondary-action, .hero-button-equal, .operator-primary-action { width: 100%; } .operator-training-menu, .operator-training-menu-list, .operator-top-dropdown-list { width: 100%; } .operator-training-menu-list, .operator-top-dropdown-list { position: static; } .owner-gate-card > div:first-child { align-items: flex-start; display: grid; } } footer { width: 100%; background-color: var(--surface); box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); color: var(--text-primary); padding: 20px 0; text-align: center; } /* Final EOF contrast lock for legacy rules appended above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) body, :root:not([data-theme="day"]) body.operator-simple-mode { background: var(--background-gradient) !important; color: var(--text-primary) !important; } :root:not([data-theme="day"]) .safe-paper-result-card, :root:not([data-theme="day"]) .safe-paper-table-card, :root:not([data-theme="day"]) .operator-progress-checklist article, :root:not([data-theme="day"]) .model-panel, :root:not([data-theme="day"]) .task-card, :root:not([data-theme="day"]) .simple-operator-workspace, :root:not([data-theme="day"]) input, :root:not([data-theme="day"]) select, :root:not([data-theme="day"]) textarea { border-color: var(--border) !important; color: var(--text-primary) !important; } :root:not([data-theme="day"]) .safe-paper-result-card, :root:not([data-theme="day"]) .model-panel, :root:not([data-theme="day"]) .task-card, :root:not([data-theme="day"]) .simple-operator-workspace { background: var(--surface-strong) !important; } :root:not([data-theme="day"]) .safe-paper-table-card, :root:not([data-theme="day"]) .operator-progress-checklist article { background: var(--surface-muted) !important; } :root:not([data-theme="day"]) .safe-paper-hero, :root:not([data-theme="day"]) .safe-paper-status-card, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-pass, :root:not([data-theme="day"]) .operator-check-pass { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 62%, var(--border)) !important; color: var(--status-success-text) !important; } :root:not([data-theme="day"]) .safe-paper-hero *, :root:not([data-theme="day"]) .safe-paper-status-card *, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-pass *, :root:not([data-theme="day"]) .operator-check-pass * { color: var(--status-success-text) !important; } :root:not([data-theme="day"]) .safe-paper-warning-card, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-blocked, :root:not([data-theme="day"]) .operator-check-blocked { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 62%, var(--border)) !important; color: var(--status-danger-text) !important; } :root:not([data-theme="day"]) .safe-paper-warning-card *, :root:not([data-theme="day"]) .operator-progress-checklist article.operator-check-blocked *, :root:not([data-theme="day"]) .operator-check-blocked * { color: var(--status-danger-text) !important; } :root:not([data-theme="day"]) input, :root:not([data-theme="day"]) select, :root:not([data-theme="day"]) textarea { background: var(--input-background) !important; color: var(--input-text) !important; } } :root[data-theme="night"] body, :root[data-theme="night"] body.operator-simple-mode { background: var(--background-gradient) !important; color: var(--text-primary) !important; } :root[data-theme="night"] .safe-paper-result-card, :root[data-theme="night"] .model-panel, :root[data-theme="night"] .task-card, :root[data-theme="night"] .simple-operator-workspace { background: var(--surface-strong) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } :root[data-theme="night"] .safe-paper-table-card, :root[data-theme="night"] .operator-progress-checklist article { background: var(--surface-muted) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } :root[data-theme="night"] .safe-paper-hero, :root[data-theme="night"] .safe-paper-status-card, :root[data-theme="night"] .operator-progress-checklist article.operator-check-pass, :root[data-theme="night"] .operator-check-pass { background: var(--status-success-bg) !important; border-color: color-mix(in srgb, var(--status-success) 62%, var(--border)) !important; color: var(--status-success-text) !important; } :root[data-theme="night"] .safe-paper-hero *, :root[data-theme="night"] .safe-paper-status-card *, :root[data-theme="night"] .operator-progress-checklist article.operator-check-pass *, :root[data-theme="night"] .operator-check-pass * { color: var(--status-success-text) !important; } :root[data-theme="night"] .safe-paper-warning-card, :root[data-theme="night"] .operator-progress-checklist article.operator-check-blocked, :root[data-theme="night"] .operator-check-blocked { background: var(--status-danger-bg) !important; border-color: color-mix(in srgb, var(--status-danger) 62%, var(--border)) !important; color: var(--status-danger-text) !important; } :root[data-theme="night"] .safe-paper-warning-card *, :root[data-theme="night"] .operator-progress-checklist article.operator-check-blocked *, :root[data-theme="night"] .operator-check-blocked * { color: var(--status-danger-text) !important; } :root[data-theme="night"] input, :root[data-theme="night"] select, :root[data-theme="night"] textarea { background: var(--input-background) !important; border-color: var(--border) !important; color: var(--input-text) !important; } .exchange-manager-safety-grid, .exchange-manager-status-cards, .exchange-manager-card-grid { display: grid; gap: var(--eos-space-3); } .exchange-manager-safety-grid, .exchange-manager-status-cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0; } .exchange-manager-safety-grid article, .exchange-manager-status-cards article, .exchange-manager-card { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--eos-radius-3); padding: 14px; color: var(--text-primary); } .exchange-manager-safety-grid article strong, .exchange-manager-status-cards article strong, .exchange-manager-card strong { display: block; color: var(--text-primary); font-size: var(--eos-text-6); margin-bottom: 5px; } .exchange-manager-safety-grid article span, .exchange-manager-status-cards article span, .exchange-manager-card span, .exchange-manager-card small { display: block; color: var(--text-secondary); line-height: 1.45; } .exchange-manager-actions { align-items: end; display: grid; gap: var(--eos-space-2); grid-template-columns: minmax(260px, 1fr) repeat(5, auto); margin: 16px 0; } .exchange-manager-actions button, .exchange-manager-bulk button, .exchange-manager-card button, .read-only-api-form button, .read-only-price-compare button { min-height: 42px; } .exchange-manager-feature-list h3 { margin: 18px 0 10px; } .exchange-manager-card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .exchange-readonly-categories, .read-only-guide-grid, .read-only-spread-summary { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 16px 0; } .exchange-readonly-categories article, .read-only-guide-grid article, .read-only-spread-summary article, .read-only-api-wizard, .read-only-price-compare, .read-only-connection-status { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--eos-radius-3); color: var(--text-primary); padding: 14px; } .exchange-readonly-categories span, .read-only-guide-grid span, .read-only-spread-summary span { color: var(--text-secondary); display: block; font-size: var(--eos-text-4); font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .exchange-readonly-categories strong, .read-only-guide-grid strong, .read-only-spread-summary strong { color: var(--text-primary); display: block; font-size: var(--eos-text-6); margin-top: 5px; } .exchange-readonly-categories small, .read-only-spread-summary small { color: var(--text-secondary); display: block; line-height: 1.45; margin-top: 4px; } .read-only-wizard-heading { align-items: start; display: flex; gap: var(--eos-space-4); justify-content: space-between; } .read-only-wizard-heading span { color: var(--brand-blue); display: block; font-size: var(--eos-text-4); font-weight: 900; text-transform: uppercase; } .read-only-wizard-heading h3, .read-only-price-compare h3 { color: var(--text-primary); margin: 4px 0 6px; } .read-only-wizard-heading p, .read-only-wizard-guide li, .read-only-wizard-guide p, .read-only-connection-status { color: var(--text-secondary); line-height: 1.55; } .read-only-api-form { display: grid; gap: var(--eos-space-2); margin-top: 14px; } .read-only-checklist { background: color-mix(in srgb, var(--brand-blue) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, var(--border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 12px; } .read-only-checklist label { align-items: start; color: var(--text-primary); display: flex; gap: var(--eos-space-2); line-height: 1.35; } .read-only-warning { background: var(--status-warning-bg); border: 1px solid color-mix(in srgb, var(--status-warning) 45%, var(--border)); border-radius: var(--eos-radius-3); color: var(--status-warning-text) !important; font-weight: 700; padding: 10px; } .exchange-manager-card em { background: color-mix(in srgb, var(--brand-blue) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, var(--border)); border-radius: var(--eos-radius-pill); color: var(--text-primary); display: inline-flex; font-size: var(--eos-text-4); font-style: normal; font-weight: 700; line-height: 1; padding: 6px 8px; } .exchange-manager-card-muted { opacity: 0.72; } .exchange-manager-pill-row { display: flex; flex-wrap: wrap; gap: var(--eos-space-1); margin-top: 10px; } .exchange-manager-category { background: transparent; border: 1px solid var(--border); border-radius: var(--eos-radius-3); margin: 12px 0; padding: 10px; } .exchange-manager-category summary { color: var(--text-primary); cursor: pointer; font-weight: 800; list-style-position: inside; } .exchange-manager-category summary span { color: var(--text-secondary); font-weight: 700; margin-left: 6px; } @media (max-width: 920px) { .exchange-manager-actions { grid-template-columns: 1fr; } } :root[data-theme="night"] .exchange-manager-safety-grid article, :root[data-theme="night"] .exchange-manager-status-cards article, :root[data-theme="night"] .exchange-manager-card, :root[data-theme="night"] .exchange-manager-category, :root[data-theme="night"] .exchange-readonly-categories article, :root[data-theme="night"] .read-only-api-wizard, :root[data-theme="night"] .read-only-price-compare, :root[data-theme="night"] .read-only-guide-grid article, :root[data-theme="night"] .read-only-spread-summary article, :root[data-theme="night"] .read-only-connection-status, :root:not([data-theme="day"]) .exchange-manager-safety-grid article, :root:not([data-theme="day"]) .exchange-manager-status-cards article, :root:not([data-theme="day"]) .exchange-manager-card, :root:not([data-theme="day"]) .exchange-manager-category, :root:not([data-theme="day"]) .exchange-readonly-categories article, :root:not([data-theme="day"]) .read-only-api-wizard, :root:not([data-theme="day"]) .read-only-price-compare, :root:not([data-theme="day"]) .read-only-guide-grid article, :root:not([data-theme="day"]) .read-only-spread-summary article, :root:not([data-theme="day"]) .read-only-connection-status { background: var(--surface-muted) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } :root[data-theme="night"] .exchange-manager-safety-grid *, :root[data-theme="night"] .exchange-manager-status-cards *, :root[data-theme="night"] .exchange-manager-card *, :root[data-theme="night"] .exchange-manager-category *, :root[data-theme="night"] .exchange-readonly-categories *, :root[data-theme="night"] .read-only-api-wizard *, :root[data-theme="night"] .read-only-price-compare *, :root[data-theme="night"] .read-only-guide-grid *, :root[data-theme="night"] .read-only-spread-summary *, :root[data-theme="night"] .read-only-connection-status *, :root:not([data-theme="day"]) .exchange-manager-safety-grid *, :root:not([data-theme="day"]) .exchange-manager-status-cards *, :root:not([data-theme="day"]) .exchange-manager-card *, :root:not([data-theme="day"]) .exchange-manager-category *, :root:not([data-theme="day"]) .exchange-readonly-categories *, :root:not([data-theme="day"]) .read-only-api-wizard *, :root:not([data-theme="day"]) .read-only-price-compare *, :root:not([data-theme="day"]) .read-only-guide-grid *, :root:not([data-theme="day"]) .read-only-spread-summary *, :root:not([data-theme="day"]) .read-only-connection-status * { color: var(--text-primary); } :root[data-theme="night"] .exchange-manager-card span, :root[data-theme="night"] .exchange-manager-card small, :root[data-theme="night"] .exchange-readonly-categories span, :root[data-theme="night"] .exchange-readonly-categories small, :root[data-theme="night"] .read-only-wizard-heading p, :root[data-theme="night"] .read-only-wizard-guide li, :root[data-theme="night"] .read-only-wizard-guide p, :root[data-theme="night"] .read-only-spread-summary span, :root[data-theme="night"] .read-only-spread-summary small, :root:not([data-theme="day"]) .exchange-manager-card span, :root:not([data-theme="day"]) .exchange-manager-card small, :root:not([data-theme="day"]) .exchange-readonly-categories span, :root:not([data-theme="day"]) .exchange-readonly-categories small, :root:not([data-theme="day"]) .read-only-wizard-heading p, :root:not([data-theme="day"]) .read-only-wizard-guide li, :root:not([data-theme="day"]) .read-only-wizard-guide p, :root:not([data-theme="day"]) .read-only-spread-summary span, :root:not([data-theme="day"]) .read-only-spread-summary small { color: var(--text-secondary) !important; } .live-launch-shell { max-width: 1180px; } .live-launch-hero .eyebrow { color: var(--status-warning); display: block; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .live-launch-status-grid, .live-scan-controls, .kraken-live-stepper, .kraken-live-layout, .kraken-live-permission-grid, .kraken-live-confirmations, .kraken-live-save-panel, .kraken-live-status-grid, .kraken-auth-diagnostic-grid, .live-sandbox-safety-grid, .live-sandbox-controls, .live-tiny-safety-grid, .live-tiny-controls, .phase6b-status-grid, .phase6b-controls, .phase6b-summary-grid, .phase6b-guide-grid, .phase6b-checklist, .phase6c-summary-grid, .phase6c-controls, .phase6c-step-grid, .phase6c-report-grid, .phase6c-proof-grid, .phase6d-summary-grid, .phase6d-controls, .phase6d-arm-box, .phase6d-step-grid, .phase6d-report-grid, .phase6d-proof-grid, .phase6e-summary-grid, .phase6e-guide-grid, .phase6e-key-fields, .phase6e-checklist, .phase6e-controls, .phase6e-proof-grid, .phase6f-summary-grid, .kraken-tiny-simple-flow, .phase6f-controls, .phase6f-proof-grid, .phase6f-enable-panel, .kraken-tiny-journal-list, .phase5-controls, .phase6-controls, .phase6-vault, .phase6-acknowledgments, .phase4-controls, .live-roadmap-phases, .live-approval-center, .live-candidate-list, .live-candidate-metrics { display: grid; gap: var(--eos-space-3); } .live-launch-status-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; } .phase6b-wizard { border-color: color-mix(in srgb, var(--brand-blue) 32%, var(--border)); } .phase6b-hero, .phase6c-hero, .phase6d-hero, .kraken-live-hero, .phase6e-hero, .phase6f-hero { align-items: center; display: flex; gap: var(--eos-space-4); justify-content: space-between; } .phase6b-hero h2, .phase6c-hero h2, .phase6d-hero h2, .kraken-live-hero h2, .phase6e-hero h2, .phase6f-hero h2 { margin-bottom: 8px; } .mode-pill { background: color-mix(in srgb, var(--brand-purple) 12%, var(--surface-muted)); border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, var(--border)); border-radius: var(--eos-radius-pill); color: var(--brand-purple); display: inline-flex; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; margin-bottom: 8px; padding: 6px 10px; text-transform: uppercase; } .primary-action-button, .button-link { align-items: center; background: var(--brand-blue); border: 1px solid color-mix(in srgb, var(--brand-blue) 70%, black); border-radius: var(--eos-radius-3); color: #fff; display: inline-flex; font-weight: 900; justify-content: center; min-height: 42px; padding: 10px 14px; text-decoration: none; } .giant-action-button { font-size: var(--eos-text-7); min-height: 56px; padding: 14px 18px; } .button-link.secondary-button { background: var(--surface-muted); border-color: var(--border); color: var(--text-primary); } .phase6b-status-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; } .phase6c-wizard { border-color: color-mix(in srgb, var(--brand-pink) 28%, var(--brand-blue)); } .phase6d-wizard { border-color: color-mix(in srgb, var(--brand-blue) 36%, var(--brand-purple)); } .kraken-live-setup-walkthrough { border-color: color-mix(in srgb, var(--status-warning) 45%, var(--brand-blue)); } .phase6e-wizard { border-color: color-mix(in srgb, var(--brand-pink) 34%, var(--brand-purple)); } .phase6f-wizard { border-color: color-mix(in srgb, var(--brand-blue) 42%, var(--brand-pink)); } .kraken-tiny-live-flow { border-color: color-mix(in srgb, var(--status-warning) 48%, var(--brand-pink)); } .kraken-owner-review-map { align-items: stretch; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-purple) 22%, transparent), transparent 58%), color-mix(in srgb, var(--surface-muted) 88%, var(--brand-blue)); border: 1px solid color-mix(in srgb, var(--brand-blue) 44%, var(--brand-pink)); border-radius: var(--eos-radius-3); box-shadow: 0 0 26px color-mix(in srgb, var(--brand-blue) 12%, transparent); display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.4fr); margin: 18px 0; padding: 18px; } .kraken-owner-review-copy { display: grid; gap: var(--eos-space-2); } .kraken-owner-review-copy h3 { color: var(--text-primary); font-size: var(--eos-display-1); line-height: 1.05; margin: 0; } .kraken-owner-review-copy p, .kraken-owner-review-gates p { color: var(--text-secondary); margin: 0; } .kraken-owner-review-gates { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .kraken-owner-review-gates article { border: 1px solid var(--border); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 14px; } .kraken-owner-review-gates span { color: var(--text-secondary); font-size: var(--eos-text-3); font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } .kraken-owner-review-gates strong { color: var(--text-primary); font-size: var(--eos-text-7); } .danger-action { background: var(--status-danger); border-color: color-mix(in srgb, var(--status-danger) 75%, black); color: #fff; } .phase6c-summary-grid, .kraken-live-stepper, .kraken-live-permission-grid, .kraken-live-status-grid, .kraken-auth-diagnostic-grid, .phase6c-step-grid, .phase6c-report-grid, .phase6c-proof-grid, .phase6d-summary-grid, .phase6d-step-grid, .phase6d-report-grid, .phase6d-proof-grid, .phase6e-summary-grid, .phase6e-guide-grid, .phase6e-proof-grid, .phase6f-summary-grid, .kraken-tiny-simple-flow, .phase6f-proof-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 18px 0; } .kraken-tiny-simple-flow { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .kraken-tiny-journal-list { grid-template-columns: 1fr; } .phase6b-controls, .kraken-live-save-panel, .phase6c-controls, .phase6d-controls, .phase6e-controls, .phase6f-controls { align-items: end; grid-template-columns: minmax(220px, 1.2fr) repeat(auto-fit, minmax(170px, 1fr)); margin: 16px 0; } .phase6d-arm-box { align-items: end; grid-template-columns: minmax(260px, 2fr) repeat(auto-fit, minmax(170px, 1fr)); margin: 12px 0 18px; } .kraken-live-layout { grid-template-columns: minmax(280px, 1.15fr) minmax(280px, 1fr); margin: 18px 0; } .kraken-live-confirmations { grid-template-columns: 1fr; margin-top: 14px; } .phase6e-key-fields { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 12px 0; } .phase6f-enable-panel { grid-template-columns: minmax(260px, 2fr) repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; } .kraken-tiny-final-gate { align-items: stretch; } .kraken-tiny-confirmation-panel { display: grid; gap: var(--eos-space-2); min-width: min(100%, 520px); } .kraken-tiny-confirmation-panel input { font-size: var(--eos-text-6); min-height: 48px; width: 100%; } .kraken-tiny-expected-phrase { color: var(--text-primary); font-weight: 800; margin: 0; } .kraken-tiny-expected-phrase code { display: block; margin-top: 6px; overflow-wrap: anywhere; white-space: normal; } .kraken-tiny-phrase-status { border-radius: var(--eos-radius-3); font-weight: 900; padding: 10px 12px; } .kraken-tiny-advanced-gates { border: 1px solid var(--border); border-radius: var(--eos-radius-3); margin: 18px 0; padding: 12px; } .kraken-tiny-advanced-gates summary { color: var(--text-primary); cursor: pointer; font-weight: 900; } .kraken-tiny-step-card { display: grid; gap: var(--eos-space-2); } .kraken-tiny-step-card button, .kraken-warning-button, #kraken-tiny-place, #kraken-tiny-place-simple { border-radius: var(--eos-radius-3); font-weight: 950; min-height: 48px; padding: 12px 14px; text-align: center; } .kraken-warning-button { background: var(--status-warning); border: 1px solid color-mix(in srgb, var(--status-warning) 70%, black); color: #111827; } .kraken-ready-go { background: var(--status-success) !important; border: 1px solid color-mix(in srgb, var(--status-success) 70%, black) !important; color: #052e16 !important; box-shadow: 0 0 22px color-mix(in srgb, var(--status-success) 40%, transparent); } .kraken-locked-button, .kraken-tiny-step-card button:disabled, #kraken-tiny-place:disabled, #kraken-tiny-place-simple:disabled { background: color-mix(in srgb, var(--surface-muted) 82%, #6b7280) !important; border: 1px solid color-mix(in srgb, var(--border) 65%, #6b7280) !important; color: var(--text-secondary) !important; cursor: not-allowed; opacity: 0.82; } .phase6f-ready-card { display: grid; gap: var(--eos-space-2); margin-bottom: 12px; } .phase6e-checklist { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 14px 0; } .phase6b-controls label, .phase6c-controls label, .phase6d-controls label, .phase6d-arm-box label, .phase6e-controls label, .phase6e-key-fields label, .phase6e-checklist label, .phase6f-controls label, .phase6f-enable-panel label { color: var(--text-primary); font-weight: 800; } .phase6b-summary-grid, .phase6b-guide-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 14px; } .phase6b-guide-grid { align-items: stretch; } .phase6b-status-grid article, .kraken-live-instructions, .kraken-live-permissions, .kraken-live-step, .kraken-live-permission-grid div, .kraken-live-save-panel, .kraken-live-status-grid article, .kraken-auth-diagnostics, .kraken-auth-diagnostic-grid article, .kraken-auth-response-body, .kraken-vault-operation-log, .kraken-auth-debug-log, .phase6b-summary-grid article, .phase6b-instructions, .phase6b-checklist-panel, .phase6b-tiny-live-panel, .phase6b-check-item, .phase6c-summary-grid article, .phase6c-step-grid article, .phase6c-report-grid article, .phase6c-proof-panel, .phase6c-check-item, .phase6d-summary-grid article, .phase6d-step-grid article, .phase6d-report-grid article, .phase6d-proof-panel, .phase6d-check-item, .phase6e-summary-grid article, .phase6e-guide-card, .phase6e-key-panel, .phase6e-proof-panel, .phase6e-check-item, .phase6f-summary-grid article, .kraken-tiny-step-card, .phase6f-proof-panel, .phase6f-check-item, .phase6f-ready-card, .phase6f-enable-panel { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--eos-radius-3); color: var(--text-primary); padding: 14px; } .phase6b-status-grid article span, .kraken-live-step span, .kraken-live-status-grid article span, .kraken-auth-diagnostic-grid article span, .phase6b-check-item span, .phase6c-summary-grid article span, .phase6c-step-grid article span, .phase6c-check-item span, .phase6d-summary-grid article span, .phase6d-step-grid article span, .phase6d-check-item span, .phase6e-summary-grid article span, .phase6e-check-item span, .phase6f-summary-grid article span, .phase6f-check-item span, .phase6f-ready-card span { color: inherit; display: block; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; margin-bottom: 6px; text-transform: uppercase; } .phase6b-status-grid article strong, .kraken-live-instructions h3, .kraken-live-permissions h3, .kraken-live-step strong, .kraken-live-permission-grid div strong, .kraken-live-save-panel h3, .kraken-live-status-grid article strong, .kraken-auth-diagnostic-grid article strong, .phase6b-summary-grid h3, .phase6b-instructions h3, .phase6b-checklist-panel h3, .phase6b-tiny-live-panel h3, .phase6b-check-item strong, .phase6c-summary-grid article strong, .phase6c-step-grid article strong, .phase6c-report-grid h3, .phase6c-proof-panel h3, .phase6c-check-item strong, .phase6d-summary-grid article strong, .phase6d-step-grid article strong, .phase6d-report-grid h3, .phase6d-proof-panel h3, .phase6d-check-item strong, .phase6e-summary-grid article strong, .phase6e-guide-card h3, .phase6e-proof-panel h3, .phase6e-check-item strong, .phase6f-summary-grid article strong, .phase6f-proof-panel h3, .phase6f-check-item strong, .phase6f-ready-card strong { color: inherit; } .phase6b-summary-grid h3, .kraken-live-instructions h3, .kraken-live-permissions h3, .kraken-live-save-panel h3, .phase6b-instructions h3, .phase6b-checklist-panel h3, .phase6b-tiny-live-panel h3, .phase6d-report-grid h3, .phase6d-proof-panel h3, .phase6e-guide-card h3, .phase6e-proof-panel h3, .phase6e-key-panel h3, .phase6f-proof-panel h3, .phase6f-enable-panel h3 { margin-top: 0; } .phase6b-summary-grid ul, .kraken-live-screen-list, .phase6b-instructions ul, .phase6b-instructions ol, .phase6d-report-grid ul, .phase6d-proof-panel ul, .phase6e-guide-card ul, .phase6e-guide-card ol, .phase6e-proof-panel ul, .phase6f-proof-panel ul { color: var(--text-primary); line-height: 1.55; margin: 8px 0 0; padding-left: 20px; } .phase6b-key-header { display: grid; gap: var(--eos-space-1); margin-bottom: 12px; } .phase6b-instructions h4 { color: var(--text-primary); margin: 14px 0 4px; } .phase6b-order-preview { background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, var(--border)); border-radius: var(--eos-radius-3); color: var(--text-primary); font-weight: 800; margin-top: 12px; padding: 12px; } .phase6b-checklist-panel, .phase6b-tiny-live-panel { margin-top: 14px; } .phase6b-checklist { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .phase6b-check-item { display: grid; gap: var(--eos-space-2); } .kraken-live-step { cursor: pointer; min-height: 132px; } .kraken-live-step.active { background: color-mix(in srgb, var(--status-warning) 16%, var(--surface-muted)); border-color: color-mix(in srgb, var(--status-warning) 55%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-warning) 24%, transparent); } .kraken-live-step span { align-items: center; background: var(--status-warning); border-radius: var(--eos-radius-pill); color: #111827; display: inline-flex; height: 28px; justify-content: center; margin-bottom: 10px; width: 28px; } .kraken-live-current-step span { color: var(--status-warning); display: block; font-weight: 900; margin-bottom: 6px; text-transform: uppercase; } .kraken-live-permission-grid div { display: grid; gap: var(--eos-space-1); } .kraken-live-confirmations label, .kraken-live-save-panel label { color: var(--text-primary); font-weight: 800; } .kraken-auth-diagnostics { display: grid; gap: var(--eos-space-3); margin: 18px 0 0; } .kraken-auth-diagnostics > summary { align-items: center; cursor: pointer; display: flex; gap: var(--eos-space-3); justify-content: space-between; list-style: none; } .kraken-auth-diagnostics > summary::-webkit-details-marker { display: none; } .kraken-auth-diagnostics > summary small { color: inherit; font-weight: 700; line-height: 1.4; } .kraken-auth-diagnostics-header { align-items: center; display: flex; gap: var(--eos-space-3); justify-content: space-between; } .kraken-auth-diagnostic-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kraken-auth-diagnostic-grid article { display: grid; gap: var(--eos-space-1); } .kraken-auth-response-body, .kraken-vault-operation-log, .kraken-auth-debug-log { border-radius: var(--eos-radius-3); color: var(--text-primary); overflow-x: auto; white-space: pre-wrap; } .kraken-auth-response-body pre, .kraken-vault-operation-log, .kraken-auth-debug-log { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: var(--eos-text-5); line-height: 1.5; } .kraken-auth-response-body pre { margin: 10px 0 0; } .kraken-vault-operation-log { background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface-muted)); border-color: color-mix(in srgb, var(--brand-blue) 24%, var(--border)); min-height: 92px; } .kraken-live-save-panel { align-items: end; grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(190px, 1fr)); margin: 18px 0; } .phase6c-step-grid article, .phase6c-proof-panel, .phase6c-check-item, .phase6d-step-grid article, .phase6d-proof-panel, .phase6d-check-item, .phase6f-proof-panel, .phase6f-check-item, .phase6f-ready-card { display: grid; gap: var(--eos-space-2); } .phase6b-check-item p, .phase6b-check-item small, .phase6b-status-grid article small, .phase6c-summary-grid article small, .phase6c-step-grid article small, .phase6c-check-item p, .phase6c-check-item small, .phase6c-proof-panel p, .phase6c-proof-panel small, .phase6d-summary-grid article small, .phase6d-step-grid article small, .phase6d-check-item p, .phase6d-check-item small, .phase6d-proof-panel p, .phase6d-proof-panel small, .phase6f-summary-grid article small, .phase6f-check-item p, .phase6f-check-item small, .phase6f-ready-card p, .phase6f-ready-card small, .phase6f-proof-panel p, .phase6f-proof-panel small { color: inherit; line-height: 1.45; } .live-launch-status-grid article, .live-sandbox-safety-grid article, .live-tiny-safety-grid article, .live-next-card, .live-phase-card, .live-approval-item, .live-candidate-card, .live-paper-sim-result { border: 1px solid var(--border); border-radius: var(--eos-radius-3); padding: 16px; } .live-launch-status-grid article span, .live-sandbox-safety-grid article span, .live-tiny-safety-grid article span, .live-phase-card span, .live-approval-item span, .live-candidate-card span, .live-next-card span { display: block; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; margin-bottom: 6px; text-transform: uppercase; } .live-launch-status-grid article strong, .live-sandbox-safety-grid article strong, .live-tiny-safety-grid article strong, .live-next-card strong, .live-phase-card strong, .live-approval-item strong, .live-candidate-card strong { color: inherit; display: block; font-size: var(--eos-text-7); } .live-launch-status-grid article small, .live-sandbox-safety-grid article small, .live-tiny-safety-grid article small, .live-paper-sim-result small, .live-candidate-card p, .live-phase-card p { color: inherit; line-height: 1.5; } .live-scan-controls { align-items: end; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 16px 0; } .live-sandbox-safety-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; } .live-tiny-safety-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; } .live-sandbox-controls, .live-tiny-controls { align-items: end; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0; } .live-sandbox-vault, .live-tiny-vault, .phase6-vault { margin: 14px 0; } .live-scan-controls label, .live-sandbox-controls label, .live-tiny-controls label, .tiny-confirmation-box label { color: var(--text-primary); font-weight: 800; } .tiny-confirmation-box { background: color-mix(in srgb, var(--status-warning) 10%, var(--surface-muted)); border: 1px solid color-mix(in srgb, var(--status-warning) 35%, var(--border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); margin: 14px 0; padding: 14px; } .tiny-confirmation-box small { color: var(--text-secondary); line-height: 1.5; } .danger-button { background: var(--status-danger); border-color: color-mix(in srgb, var(--status-danger) 70%, black); color: #fff; } .live-scan-summary, .live-candidate-list { margin-top: 14px; } .live-roadmap-phases, .live-approval-center, .live-candidate-list { grid-template-columns: 1fr; } .live-phase-card, .live-approval-item, .live-candidate-card, .live-next-card, .live-paper-sim-result { background: var(--surface-muted); color: var(--text-primary); } .live-phase-card { display: grid; gap: var(--eos-space-2); } .live-approval-item { align-items: center; display: flex; gap: var(--eos-space-3); justify-content: space-between; } .live-candidate-card { display: grid; gap: var(--eos-space-2); } .live-candidate-metrics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .live-candidate-metrics span { background: color-mix(in srgb, var(--brand-blue) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, var(--border)); border-radius: var(--eos-radius-3); color: var(--text-primary); padding: 9px; text-transform: none; } .phase6-dashboard-grid, .phase5-dashboard-grid, .phase4-dashboard-grid, .phase3-dashboard-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 16px; } .phase6-dashboard-grid > article, .phase6-panel, .phase6-mini-card, .phase5-dashboard-grid > article, .phase5-panel, .phase5-mini-card, .phase4-dashboard-grid > article, .phase4-panel, .phase4-mini-card, .phase3-dashboard-grid > article, .phase3-panel, .phase3-results, .phase3-mini-card, .phase3-account-card { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--eos-radius-3); color: var(--text-primary); padding: 14px; } .phase6-dashboard-grid > article span, .phase6-mini-card span, .phase5-dashboard-grid > article span, .phase5-mini-card span, .phase4-dashboard-grid > article span, .phase4-mini-card span, .phase3-dashboard-grid > article span, .phase3-mini-card span, .phase3-account-card span { color: inherit; display: block; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; margin-bottom: 6px; text-transform: uppercase; } .phase6-dashboard-grid > article strong, .phase6-panel h3, .phase6-mini-card strong, .phase5-dashboard-grid > article strong, .phase5-panel h3, .phase5-mini-card strong, .phase4-dashboard-grid > article strong, .phase4-panel h3, .phase4-mini-card strong, .phase3-dashboard-grid > article strong, .phase3-panel h3, .phase3-mini-card strong, .phase3-account-card strong { color: inherit; } .phase6-panel, .phase5-panel, .phase4-panel, .phase3-panel, .phase3-results { display: grid; gap: var(--eos-space-2); } .phase6-panel h3, .phase5-panel h3, .phase4-panel h3, .phase3-panel h3 { font-size: var(--eos-text-6); margin: 0 0 6px; } .phase6-mini-card, .phase5-mini-card, .phase4-mini-card, .phase3-mini-card, .phase3-account-card { display: grid; gap: var(--eos-space-2); margin-top: 8px; } .phase5-wide-panel { grid-column: 1 / -1; } .phase6-controls, .phase5-controls, .phase4-controls { align-items: end; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0; } .phase6-controls label, .phase6-acknowledgments label, .phase6-vault label, .phase5-controls label, .phase4-controls label { color: var(--text-primary); font-weight: 800; } .phase6-acknowledgments { background: color-mix(in srgb, var(--status-warning) 9%, var(--surface-muted)); border: 1px solid color-mix(in srgb, var(--status-warning) 28%, var(--border)); border-radius: var(--eos-radius-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 14px 0; padding: 14px; } .phase6-training { background: color-mix(in srgb, var(--brand-purple) 8%, var(--surface-muted)); border: 1px solid color-mix(in srgb, var(--brand-blue) 22%, var(--border)); border-radius: var(--eos-radius-3); margin-top: 16px; padding: 14px; } .phase6-training h3 { margin-top: 0; } .phase3a-checklist, .phase3a-exchange-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 12px; } .phase3a-checklist article, .phase3a-exchange-grid > article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--eos-radius-3); color: var(--text-primary); padding: 12px; } .phase3a-checklist strong { color: inherit; display: block; font-size: var(--eos-text-5); margin-bottom: 5px; } .phase3a-checklist span { color: inherit; display: block; font-size: var(--eos-text-4); font-weight: 700; letter-spacing: 0; text-transform: none; } .phase3-mini-card small, .phase5-mini-card small, .phase4-mini-card small, .phase3-account-card small, .phase3-account-card p { color: inherit; line-height: 1.5; } .live-phase-card button:disabled, .live-approval-item button:disabled { cursor: not-allowed; opacity: 0.72; } @media (max-width: 760px) { .live-approval-item { align-items: stretch; flex-direction: column; } } :root[data-theme="night"] .live-phase-card, :root[data-theme="night"] .live-approval-item, :root[data-theme="night"] .live-candidate-card, :root[data-theme="night"] .live-next-card, :root[data-theme="night"] .live-paper-sim-result, :root[data-theme="night"] .kraken-live-instructions, :root[data-theme="night"] .kraken-live-permissions, :root[data-theme="night"] .kraken-live-step, :root[data-theme="night"] .kraken-live-permission-grid div, :root[data-theme="night"] .kraken-live-save-panel, :root[data-theme="night"] .kraken-live-status-grid article, :root[data-theme="night"] .kraken-auth-diagnostics, :root[data-theme="night"] .kraken-auth-diagnostic-grid article, :root[data-theme="night"] .kraken-auth-response-body, :root[data-theme="night"] .kraken-auth-debug-log, :root[data-theme="night"] .live-sandbox-safety-grid article, :root[data-theme="night"] .live-tiny-safety-grid article, :root[data-theme="night"] .tiny-confirmation-box, :root[data-theme="night"] .phase6b-status-grid article, :root[data-theme="night"] .phase6b-summary-grid article, :root[data-theme="night"] .phase6b-instructions, :root[data-theme="night"] .phase6b-checklist-panel, :root[data-theme="night"] .phase6b-tiny-live-panel, :root[data-theme="night"] .phase6b-check-item, :root[data-theme="night"] .phase6b-order-preview, :root[data-theme="night"] .phase6c-summary-grid article, :root[data-theme="night"] .phase6c-step-grid article, :root[data-theme="night"] .phase6c-report-grid article, :root[data-theme="night"] .phase6c-proof-panel, :root[data-theme="night"] .phase6c-check-item, :root[data-theme="night"] .phase6d-summary-grid article, :root[data-theme="night"] .phase6d-step-grid article, :root[data-theme="night"] .phase6d-report-grid article, :root[data-theme="night"] .phase6d-proof-panel, :root[data-theme="night"] .phase6d-check-item, :root[data-theme="night"] .phase6e-summary-grid article, :root[data-theme="night"] .phase6e-guide-card, :root[data-theme="night"] .phase6e-key-panel, :root[data-theme="night"] .phase6e-proof-panel, :root[data-theme="night"] .phase6e-check-item, :root[data-theme="night"] .phase6f-summary-grid article, :root[data-theme="night"] .kraken-tiny-step-card, :root[data-theme="night"] .kraken-tiny-advanced-gates, :root[data-theme="night"] .phase6f-proof-panel, :root[data-theme="night"] .phase6f-check-item, :root[data-theme="night"] .phase6f-ready-card, :root[data-theme="night"] .phase6f-enable-panel, :root[data-theme="night"] .phase6-vault, :root[data-theme="night"] .phase6-acknowledgments, :root[data-theme="night"] .phase6-training, :root:not([data-theme="day"]) .live-phase-card, :root:not([data-theme="day"]) .live-approval-item, :root:not([data-theme="day"]) .live-candidate-card, :root:not([data-theme="day"]) .live-next-card, :root:not([data-theme="day"]) .live-paper-sim-result, :root:not([data-theme="day"]) .kraken-live-instructions, :root:not([data-theme="day"]) .kraken-live-permissions, :root:not([data-theme="day"]) .kraken-live-step, :root:not([data-theme="day"]) .kraken-live-permission-grid div, :root:not([data-theme="day"]) .kraken-live-save-panel, :root:not([data-theme="day"]) .kraken-live-status-grid article, :root:not([data-theme="day"]) .kraken-auth-diagnostics, :root:not([data-theme="day"]) .kraken-auth-diagnostic-grid article, :root:not([data-theme="day"]) .kraken-auth-response-body, :root:not([data-theme="day"]) .kraken-auth-debug-log, :root:not([data-theme="day"]) .live-sandbox-safety-grid article, :root:not([data-theme="day"]) .live-tiny-safety-grid article, :root:not([data-theme="day"]) .tiny-confirmation-box, :root:not([data-theme="day"]) .phase6b-status-grid article, :root:not([data-theme="day"]) .phase6b-summary-grid article, :root:not([data-theme="day"]) .phase6b-instructions, :root:not([data-theme="day"]) .phase6b-checklist-panel, :root:not([data-theme="day"]) .phase6b-tiny-live-panel, :root:not([data-theme="day"]) .phase6b-check-item, :root:not([data-theme="day"]) .phase6b-order-preview, :root:not([data-theme="day"]) .phase6c-summary-grid article, :root:not([data-theme="day"]) .phase6c-step-grid article, :root:not([data-theme="day"]) .phase6c-report-grid article, :root:not([data-theme="day"]) .phase6c-proof-panel, :root:not([data-theme="day"]) .phase6c-check-item, :root:not([data-theme="day"]) .phase6d-summary-grid article, :root:not([data-theme="day"]) .phase6d-step-grid article, :root:not([data-theme="day"]) .phase6d-report-grid article, :root:not([data-theme="day"]) .phase6d-proof-panel, :root:not([data-theme="day"]) .phase6d-check-item, :root:not([data-theme="day"]) .phase6e-summary-grid article, :root:not([data-theme="day"]) .phase6e-guide-card, :root:not([data-theme="day"]) .phase6e-key-panel, :root:not([data-theme="day"]) .phase6e-proof-panel, :root:not([data-theme="day"]) .phase6e-check-item, :root:not([data-theme="day"]) .phase6f-summary-grid article, :root:not([data-theme="day"]) .kraken-tiny-step-card, :root:not([data-theme="day"]) .kraken-tiny-advanced-gates, :root:not([data-theme="day"]) .phase6f-proof-panel, :root:not([data-theme="day"]) .phase6f-check-item, :root:not([data-theme="day"]) .phase6f-ready-card, :root:not([data-theme="day"]) .phase6f-enable-panel, :root:not([data-theme="day"]) .phase6-vault, :root:not([data-theme="day"]) .phase6-acknowledgments, :root:not([data-theme="day"]) .phase6-training { background: var(--surface-muted) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } :root[data-theme="night"] .mode-pill, :root:not([data-theme="day"]) .mode-pill { background: color-mix(in srgb, var(--brand-blue) 16%, var(--surface-muted)); border-color: color-mix(in srgb, var(--brand-blue) 35%, var(--border)); color: var(--text-primary); } :root[data-theme="night"] .button-link.secondary-button, :root:not([data-theme="day"]) .button-link.secondary-button { background: var(--surface-muted); border-color: var(--border); color: var(--text-primary); } :root[data-theme="night"] .phase3-dashboard-grid > article, :root[data-theme="night"] .phase6-dashboard-grid > article, :root[data-theme="night"] .phase5-dashboard-grid > article, :root[data-theme="night"] .phase4-dashboard-grid > article, :root[data-theme="night"] .phase6-panel, :root[data-theme="night"] .phase5-panel, :root[data-theme="night"] .phase4-panel, :root[data-theme="night"] .phase6-mini-card, :root[data-theme="night"] .phase5-mini-card, :root[data-theme="night"] .phase4-mini-card, :root[data-theme="night"] .phase3-panel, :root[data-theme="night"] .phase3-results, :root[data-theme="night"] .phase3-mini-card, :root[data-theme="night"] .phase3-account-card, :root[data-theme="night"] .phase3a-checklist article, :root[data-theme="night"] .phase3a-exchange-grid > article, :root:not([data-theme="day"]) .phase3-dashboard-grid > article, :root:not([data-theme="day"]) .phase6-dashboard-grid > article, :root:not([data-theme="day"]) .phase5-dashboard-grid > article, :root:not([data-theme="day"]) .phase4-dashboard-grid > article, :root:not([data-theme="day"]) .phase6-panel, :root:not([data-theme="day"]) .phase5-panel, :root:not([data-theme="day"]) .phase4-panel, :root:not([data-theme="day"]) .phase6-mini-card, :root:not([data-theme="day"]) .phase5-mini-card, :root:not([data-theme="day"]) .phase4-mini-card, :root:not([data-theme="day"]) .phase3-panel, :root:not([data-theme="day"]) .phase3-results, :root:not([data-theme="day"]) .phase3-mini-card, :root:not([data-theme="day"]) .phase3-account-card, :root:not([data-theme="day"]) .phase3a-checklist article, :root:not([data-theme="day"]) .phase3a-exchange-grid > article { background: var(--surface-muted) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* Ethereal REAL visual identity layer. Uses the original dapp language: black surface, cyan rails, pink/purple neon, compact founder/operator controls, and readable high-contrast panels. */ body { background: linear-gradient(180deg, color-mix(in srgb, var(--background) 92%, #000000), var(--background)), var(--background-gradient) !important; } nav, .responsive-header, .operator-mode-bar { background: color-mix(in srgb, #030006 88%, var(--brand-purple)) !important; border-bottom: 1px solid color-mix(in srgb, var(--brand-blue) 70%, var(--brand-pink)) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28); } nav a, .operator-simple-mode nav a, .responsive-header nav a { border: 1px solid transparent !important; color: color-mix(in srgb, var(--text-primary) 82%, var(--brand-blue)) !important; letter-spacing: 0.02em; } nav a:hover, .operator-simple-mode nav a:hover, .responsive-header nav a:hover { background: color-mix(in srgb, var(--brand-blue) 16%, var(--surface-muted)) !important; border-color: color-mix(in srgb, var(--brand-blue) 70%, var(--border)) !important; color: var(--text-primary) !important; } .ethereal-brand-lockup img, .operator-brand-logo, .operator-mode-logo, .login-brand-mark img { background: #000000 !important; border: 1px solid color-mix(in srgb, var(--brand-blue) 62%, #ffffff) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-pink) 24%, transparent), 0 0 22px color-mix(in srgb, var(--brand-blue) 34%, transparent), 0 0 32px color-mix(in srgb, var(--brand-pink) 22%, transparent) !important; } .operator-launch-widget-header h2, .operator-launch-widget-blockers strong { color: var(--text-primary) !important; } .operator-launch-widget-header p, .operator-launch-widget-note, .operator-launch-widget-blockers p, .operator-launch-widget-blockers li { color: var(--text-secondary) !important; } .operator-brand-logo { border-radius: var(--eos-radius-3); height: 70px; width: 70px; } .operator-mode-logo, .ethereal-brand-lockup img, .login-brand-mark img { border-radius: var(--eos-radius-3); } .mission-hero, .simple-operator-workspace, .model-panel, .task-card, .operator-launch-widget, .operator-launch-widget-blockers, .operator-answer-panel article, .operator-status-tile, .operator-task-card, .operator-guided-workflow, .operator-workflow-step, .inline-tool-panel, .artifact-stat, .home-workflow-card, .status-card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #000000), var(--surface)) !important; border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, var(--border)) !important; box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22), inset 0 0 0 1px color-mix(in srgb, var(--brand-pink) 8%, transparent) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .mission-hero, :root:not([data-theme="day"]) .simple-operator-workspace, :root:not([data-theme="day"]) .model-panel, :root:not([data-theme="day"]) .task-card, :root:not([data-theme="day"]) .operator-launch-widget, :root:not([data-theme="day"]) .operator-launch-widget-blockers, :root:not([data-theme="day"]) .operator-answer-panel article, :root:not([data-theme="day"]) .operator-status-tile, :root:not([data-theme="day"]) .operator-task-card, :root:not([data-theme="day"]) .operator-guided-workflow, :root:not([data-theme="day"]) .operator-workflow-step, :root:not([data-theme="day"]) .inline-tool-panel, :root:not([data-theme="day"]) .artifact-stat, :root:not([data-theme="day"]) .home-workflow-card, :root:not([data-theme="day"]) .status-card { background: linear-gradient(180deg, rgba(18, 8, 29, 0.96), rgba(7, 2, 12, 0.98)), var(--surface) !important; border-color: color-mix(in srgb, var(--brand-blue) 42%, var(--border)) !important; } } :root[data-theme="night"] .mission-hero, :root[data-theme="night"] .simple-operator-workspace, :root[data-theme="night"] .model-panel, :root[data-theme="night"] .task-card, :root[data-theme="night"] .operator-launch-widget, :root[data-theme="night"] .operator-launch-widget-blockers, :root[data-theme="night"] .operator-answer-panel article, :root[data-theme="night"] .operator-status-tile, :root[data-theme="night"] .operator-task-card, :root[data-theme="night"] .operator-guided-workflow, :root[data-theme="night"] .operator-workflow-step, :root[data-theme="night"] .inline-tool-panel, :root[data-theme="night"] .artifact-stat, :root[data-theme="night"] .home-workflow-card, :root[data-theme="night"] .status-card { background: linear-gradient(180deg, rgba(18, 8, 29, 0.96), rgba(7, 2, 12, 0.98)), var(--surface) !important; border-color: color-mix(in srgb, var(--brand-blue) 42%, var(--border)) !important; } .button-row button, .button-row .cta-button, .operator-primary-action, .operator-workflow-step button, .operator-workflow-step a, .model-test-form button, .model-panel > button { background: linear-gradient(135deg, var(--brand-pink), var(--brand-purple-soft) 48%, var(--brand-blue)) !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-blue) 22%, transparent), 0 0 18px color-mix(in srgb, var(--brand-pink) 18%, transparent) !important; color: #ffffff !important; font-weight: 700; } .button-row button:hover, .button-row .cta-button:hover, .operator-primary-action:hover, .operator-workflow-step button:hover, .operator-workflow-step a:hover, .model-test-form button:hover, .model-panel > button:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-pink) 86%, #ffffff), var(--brand-blue)) !important; } .ethereal-world-banner { align-items: center; display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(120px, 220px) 1fr; margin: 0 auto 20px; max-width: 920px; text-align: left; } .ethereal-world-banner img { aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--brand-blue) 58%, var(--brand-pink)); border-radius: var(--eos-radius-3); box-shadow: 0 0 38px color-mix(in srgb, var(--brand-blue) 24%, transparent), 0 0 46px color-mix(in srgb, var(--brand-pink) 18%, transparent); max-width: 220px; object-fit: cover; width: 100%; } .ethereal-world-banner span, .token-logo-studio-copy > span { color: var(--brand-pink) !important; display: block; font-size: var(--eos-text-4); font-weight: 800; letter-spacing: 0.12em; margin-bottom: 8px; text-transform: uppercase; } .ethereal-world-banner h1 { margin-top: 0; } .ethereal-world-banner p { margin-bottom: 0; } .token-logo-studio { background: linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 88%, var(--brand-purple)), var(--surface)) !important; border: 1px solid color-mix(in srgb, var(--brand-pink) 45%, var(--brand-blue)) !important; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); margin: 18px 0; padding: 18px; text-align: left; } .token-logo-studio label, .token-logo-studio input, .token-logo-studio select, .token-logo-studio textarea, .token-logo-studio .button-row, .token-logo-studio .inline-status { grid-column: 1 / -1; } .token-logo-style-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 12px; } .token-logo-style-grid article { background: color-mix(in srgb, var(--surface-muted) 86%, #000000) !important; border: 1px solid color-mix(in srgb, var(--brand-blue) 34%, var(--border)); border-radius: var(--eos-radius-3); padding: 12px; } .token-logo-style-grid strong { display: block; margin-bottom: 6px; } .token-logo-style-grid span { color: var(--text-secondary); font-size: var(--eos-text-6); } .logo-maker-example { margin: 0; } .logo-maker-example img, .logo-creation-showcase img { aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--brand-pink) 56%, var(--brand-blue)); border-radius: var(--eos-radius-3); box-shadow: 0 0 34px color-mix(in srgb, var(--brand-pink) 24%, transparent), 0 0 28px color-mix(in srgb, var(--brand-blue) 18%, transparent); object-fit: cover; width: 100%; } .logo-maker-example figcaption { color: var(--text-secondary); font-size: var(--eos-text-5); margin-top: 8px; } .logo-creation-showcase { align-items: center; display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(120px, 190px) 1fr; margin-bottom: 16px; text-align: left; } .logo-creation-showcase strong, .logo-creation-showcase span { display: block; } .logo-creation-showcase span { color: var(--text-secondary); margin-top: 6px; } @media (max-width: 760px) { .ethereal-world-banner, .token-logo-studio, .logo-creation-showcase { grid-template-columns: 1fr; text-align: center; } .ethereal-world-banner img, .logo-creation-showcase img { margin: 0 auto; max-width: 220px; } } /* Closer Ethereal dapp shell pass. This layer moves Simple Operator Mode toward the original REAL/Ethereal dapp: black command surface, left rail, top wordmark, cyan/magenta rails, dense readable cards, and geometric grid ambience. */ :root, :root[data-theme="day"], :root[data-theme="night"] { --ethereal-black: #020204; --ethereal-ink: #06030a; --ethereal-panel: #09070d; --ethereal-panel-2: #0f0a16; --ethereal-panel-3: #170d22; --ethereal-cyan: #00f5ff; --ethereal-pink: #ff2bd6; --ethereal-purple: #7c3cff; --ethereal-amber: #f7b733; --ethereal-green: #31f081; --ethereal-red: #ff4d6d; --ethereal-soft: #f8f4ff; --ethereal-muted: #8aa0a8; } body.operator-simple-mode { background-color: var(--ethereal-black) !important; background-image: linear-gradient(90deg, rgba(255, 43, 214, 0.055) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 245, 255, 0.045) 1px, transparent 1px), radial-gradient(circle at 82% 0%, rgba(0, 245, 255, 0.12), transparent 25rem), radial-gradient(circle at 18% 80%, rgba(255, 43, 214, 0.13), transparent 30rem), linear-gradient(135deg, rgba(16, 8, 28, 0.74), rgba(0, 0, 0, 0.92)) !important; background-size: 44px 44px, 44px 44px, auto, auto, auto !important; color: var(--ethereal-soft) !important; } body.operator-simple-mode::before { background: linear-gradient(135deg, transparent 0 48%, rgba(0, 245, 255, 0.22) 49%, transparent 50%), linear-gradient(45deg, transparent 0 48%, rgba(255, 43, 214, 0.14) 49%, transparent 50%); bottom: 0; content: ""; left: 0; opacity: 0.38; pointer-events: none; position: fixed; right: 0; top: 0; z-index: -1; } body.operator-simple-mode .operator-mode-bar { align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(15, 6, 28, 0.96)), #000000 !important; border-bottom: 1px solid rgba(0, 245, 255, 0.64) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48); display: grid; gap: var(--eos-space-4); grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 68px; padding: 10px 22px; position: sticky; top: 0; width: 100%; z-index: 120; } .operator-dapp-wordmark { color: #ffffff !important; font-size: var(--eos-text-6); font-weight: 900; letter-spacing: 0.72em; line-height: 1; text-decoration: none; text-shadow: 0 0 10px rgba(255, 43, 214, 0.82), 0 0 20px rgba(0, 245, 255, 0.44); } .operator-dapp-wordmark::first-letter { color: var(--ethereal-pink); } .operator-dapp-safety-strip { align-items: center; background: rgba(0, 245, 255, 0.045); border: 1px solid rgba(0, 245, 255, 0.46); display: flex; gap: var(--eos-space-2); justify-content: center; min-width: 172px; padding: 8px 10px; } .operator-dapp-safety-strip span, .operator-dapp-safety-strip strong { color: var(--ethereal-soft) !important; font-size: var(--eos-text-3); line-height: 1; margin: 0; } .operator-dapp-safety-strip strong { color: var(--ethereal-cyan) !important; } body.operator-simple-mode .operator-mode-brand { min-width: 0; } body.operator-simple-mode .operator-mode-brand > div span { color: var(--ethereal-muted) !important; } body.operator-simple-mode .operator-mode-actions { align-items: center; display: flex; flex-wrap: nowrap; gap: var(--eos-space-2); justify-content: flex-end; } body.operator-simple-mode .operator-mode-actions, body.operator-advanced-mode .operator-mode-actions { min-width: 0; } body.operator-simple-mode .operator-top-dropdown, body.operator-advanced-mode .operator-top-dropdown { min-width: 0; position: relative; } body.operator-simple-mode .operator-top-control, body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-top-control, body.operator-advanced-mode .operator-mode-toggle { align-items: center; box-sizing: border-box; display: inline-flex; font-size: var(--eos-text-4); height: 44px; justify-content: center; line-height: 1.1; min-width: 92px; padding: 0 14px; white-space: nowrap; } body.operator-simple-mode .operator-theme-dropdown .operator-top-control, body.operator-advanced-mode .operator-theme-dropdown .operator-top-control { min-width: 96px; } body.operator-simple-mode .operator-top-training-dropdown .operator-top-control, body.operator-advanced-mode .operator-top-training-dropdown .operator-top-control { min-width: 132px; } body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-mode-toggle { min-width: 88px; } body.operator-simple-mode .operator-top-dropdown-list, body.operator-advanced-mode .operator-top-dropdown-list { background: linear-gradient(180deg, rgba(22, 11, 36, 0.99), rgba(5, 3, 10, 0.99)); border: 1px solid rgba(0, 245, 255, 0.45); box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.16), 0 20px 46px rgba(0, 0, 0, 0.54); display: grid; gap: var(--eos-space-1); min-width: 220px; padding: 8px; position: absolute; right: 0; top: calc(100% + 10px); z-index: 1400; } body.operator-simple-mode .operator-top-dropdown-list[hidden], body.operator-advanced-mode .operator-top-dropdown-list[hidden] { display: none !important; } body.operator-simple-mode .operator-top-dropdown-list a, body.operator-simple-mode .operator-top-dropdown-list button, body.operator-advanced-mode .operator-top-dropdown-list a, body.operator-advanced-mode .operator-top-dropdown-list button { align-items: center; background: rgba(0, 245, 255, 0.045) !important; border: 1px solid rgba(0, 245, 255, 0.18) !important; border-radius: var(--eos-radius-1) !important; color: var(--ethereal-soft) !important; cursor: pointer; display: flex; font: inherit; font-size: var(--eos-text-4); font-weight: 850; justify-content: flex-start; letter-spacing: 0.01em; min-height: 38px; padding: 10px 12px; text-align: left; text-decoration: none; text-transform: none; white-space: nowrap; } body.operator-simple-mode .operator-top-dropdown-list a:hover, body.operator-simple-mode .operator-top-dropdown-list button:hover, body.operator-simple-mode .operator-top-dropdown-list .operator-active-page, body.operator-advanced-mode .operator-top-dropdown-list a:hover, body.operator-advanced-mode .operator-top-dropdown-list button:hover, body.operator-advanced-mode .operator-top-dropdown-list .operator-active-page { background: rgba(255, 43, 214, 0.12) !important; border-color: rgba(255, 43, 214, 0.45) !important; color: var(--ethereal-cyan) !important; } body.operator-simple-mode .operator-black-hole-logout, body.operator-advanced-mode .operator-black-hole-logout { align-items: center; box-sizing: border-box; color: var(--ethereal-muted) !important; display: grid; gap: var(--eos-space-1); height: 44px; justify-items: center; min-width: 54px; padding: 0 4px; text-decoration: none; } body.operator-simple-mode .operator-black-hole-icon, body.operator-advanced-mode .operator-black-hole-icon { background: radial-gradient(circle at 50% 50%, #000 0 33%, rgba(11, 2, 18, 0.96) 34% 55%, rgba(0, 245, 255, 0.18) 56% 62%, transparent 63%), conic-gradient(from 35deg, rgba(255, 43, 214, 0.98), rgba(0, 245, 255, 0.86), rgba(124, 60, 255, 0.92), rgba(255, 43, 214, 0.98)); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--eos-radius-circle); box-shadow: 0 0 12px rgba(255, 43, 214, 0.34), 0 0 18px rgba(0, 245, 255, 0.24), inset 0 0 12px rgba(0, 0, 0, 0.92); display: block; height: 24px; width: 24px; } body.operator-simple-mode .operator-black-hole-label, body.operator-advanced-mode .operator-black-hole-label { color: color-mix(in srgb, var(--ethereal-soft) 70%, var(--ethereal-muted)) !important; font-size: var(--eos-text-1); font-weight: 700; letter-spacing: 0.06em; line-height: 1; margin: 0; text-transform: uppercase; } body.operator-simple-mode .operator-black-hole-logout:hover .operator-black-hole-icon, body.operator-advanced-mode .operator-black-hole-logout:hover .operator-black-hole-icon { box-shadow: 0 0 16px rgba(255, 43, 214, 0.54), 0 0 24px rgba(0, 245, 255, 0.42), inset 0 0 12px rgba(0, 0, 0, 0.92); } body.operator-simple-mode .operator-mode-actions > button, body.operator-simple-mode .operator-top-control, body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-top-control, body.operator-advanced-mode .operator-mode-toggle, body.operator-simple-mode .operator-training-menu > button, body.operator-simple-mode .operator-secondary-action, body.operator-simple-mode .operator-logout-action, body.operator-advanced-mode .operator-logout-action { background: linear-gradient(135deg, rgba(255, 43, 214, 0.86), rgba(0, 245, 255, 0.86)) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: var(--eos-radius-1) !important; color: #020204 !important; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; } body.operator-simple-mode .operator-logout-action, body.operator-advanced-mode .operator-logout-action { align-items: center; display: inline-flex; justify-content: center; min-height: 38px; } body.operator-simple-mode > nav { background: rgba(0, 0, 0, 0.94) !important; border-right: 1px solid rgba(0, 245, 255, 0.24) !important; box-shadow: 18px 0 40px rgba(0, 0, 0, 0.34); } body.operator-simple-mode > nav a { align-items: center; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--eos-radius-1) !important; color: color-mix(in srgb, var(--ethereal-soft) 72%, var(--ethereal-cyan)) !important; display: flex; font-size: var(--eos-text-4); font-weight: 800; gap: var(--eos-space-2); justify-content: flex-start; padding: 12px 10px; text-transform: none; } body.operator-simple-mode > nav a::before { background: linear-gradient(135deg, rgba(0, 245, 255, 0.34), rgba(255, 43, 214, 0.32)); border: 1px solid rgba(0, 245, 255, 0.42); content: ""; display: inline-block; flex: 0 0 15px; height: 15px; width: 15px; } body.operator-simple-mode > nav a:hover { background: rgba(0, 245, 255, 0.08) !important; border-color: rgba(0, 245, 255, 0.48) !important; color: var(--ethereal-cyan) !important; } body.operator-simple-mode > nav a.operator-active-page, body.operator-advanced-mode > nav a.operator-active-page { background: linear-gradient(90deg, rgba(255, 43, 214, 0.18), rgba(0, 245, 255, 0.08)) !important; border-color: rgba(255, 43, 214, 0.48) !important; color: var(--ethereal-soft) !important; box-shadow: inset 2px 0 0 var(--ethereal-cyan); } body.operator-simple-mode > nav a[href="/logout"], body.operator-advanced-mode > nav a[href="/logout"] { display: none !important; } body.operator-simple-mode h1, body.operator-simple-mode h2, body.operator-simple-mode h3, body.operator-simple-mode strong, body.operator-simple-mode label { color: var(--ethereal-soft) !important; letter-spacing: 0; } body.operator-simple-mode p, body.operator-simple-mode li, body.operator-simple-mode small, body.operator-simple-mode span { color: color-mix(in srgb, var(--ethereal-soft) 70%, var(--ethereal-muted)) !important; } body.operator-simple-mode .operator-page-label, body.operator-simple-mode .operator-area, body.operator-simple-mode .ethereal-world-banner span, body.operator-simple-mode .token-logo-studio-copy > span { color: var(--ethereal-pink) !important; letter-spacing: 0.22em; } body.operator-simple-mode .container, body.operator-simple-mode main.container { max-width: 1240px; padding-top: 26px; } body.operator-simple-mode .simple-operator-workspace, body.operator-simple-mode .mission-hero, body.operator-simple-mode .model-panel, body.operator-simple-mode .status-card, body.operator-simple-mode .ceo-workflow-map, body.operator-simple-mode .task-card, body.operator-simple-mode .home-workflow-card, body.operator-simple-mode .operator-answer-panel article, body.operator-simple-mode .operator-guided-workflow, body.operator-simple-mode .operator-workflow-step, body.operator-simple-mode .operator-status-tile, body.operator-simple-mode .operator-task-card, body.operator-simple-mode .inline-tool-panel, body.operator-simple-mode .artifact-stat, body.operator-simple-mode .token-logo-studio, body.operator-simple-mode .logo-creation-showcase { background: linear-gradient(180deg, rgba(18, 11, 30, 0.97), rgba(4, 3, 8, 0.99)) !important; border: 1px solid rgba(0, 245, 255, 0.36) !important; border-radius: var(--eos-radius-1) !important; box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.10), 0 24px 74px rgba(0, 0, 0, 0.54) !important; position: relative; } body.operator-simple-mode .simple-operator-workspace::after { background-image: url("/public/brand/ethereal-real-dark-logo.png"); background-position: right 32px top 28px; background-repeat: no-repeat; background-size: min(34vw, 300px); content: ""; inset: 0; opacity: 0.055; pointer-events: none; position: absolute; z-index: 0; } body.operator-simple-mode .simple-operator-workspace > * { position: relative; z-index: 1; } body.operator-simple-mode .model-panel::before, body.operator-simple-mode .simple-operator-workspace::before, body.operator-simple-mode .mission-hero::before, body.operator-simple-mode .operator-guided-workflow::before, body.operator-simple-mode .inline-tool-panel::before { background: linear-gradient(90deg, var(--ethereal-pink), var(--ethereal-cyan)); content: ""; height: 2px; left: 0; position: absolute; right: 0; top: 0; } body.operator-simple-mode .simple-operator-workspace { overflow: hidden; } body.operator-simple-mode .operator-workspace-header { align-items: center; background: linear-gradient(135deg, rgba(255, 43, 214, 0.06), transparent 36%), linear-gradient(90deg, rgba(0, 245, 255, 0.055), rgba(124, 60, 255, 0.05)); border: 1px solid rgba(255, 43, 214, 0.24); display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1fr) minmax(360px, 500px); padding: 18px; } body.operator-simple-mode .operator-workspace-actions, body.operator-simple-mode .hero-action-grid { align-items: stretch; display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(2, minmax(160px, 1fr)); justify-content: end; max-width: 500px; min-width: 360px; width: min(42vw, 500px); } body.operator-simple-mode .hero-button-primary-wide, body.operator-simple-mode .operator-workspace-actions .operator-primary-action { align-items: center; display: inline-flex; font-size: var(--eos-text-4); grid-column: 1 / -1; justify-content: center; line-height: 1.12; min-height: 42px; padding: 10px 14px; text-align: center; width: 100%; } body.operator-simple-mode .hero-button-equal, body.operator-simple-mode .operator-workspace-actions .operator-training-menu, body.operator-simple-mode .operator-workspace-actions .operator-secondary-action { min-width: 0; width: 100%; } body.operator-simple-mode .hero-button-equal-button, body.operator-simple-mode .operator-workspace-actions .operator-training-menu > button, body.operator-simple-mode .operator-workspace-actions .operator-secondary-action { align-items: center; display: inline-flex; font-size: var(--eos-text-3); justify-content: center; line-height: 1.08; min-height: 40px; padding: 10px 12px; text-align: center; width: 100%; } body.operator-simple-mode .operator-brand-heading { align-items: center; } body.operator-simple-mode .operator-brand-logo { border-radius: var(--eos-radius-1); box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.42), 0 0 28px rgba(255, 43, 214, 0.18); height: 86px; width: 86px; } .operator-identity-band { align-items: center; background: linear-gradient(90deg, rgba(0, 245, 255, 0.075), rgba(255, 43, 214, 0.045)), rgba(0, 0, 0, 0.28); border: 1px solid rgba(0, 245, 255, 0.26); display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; } .operator-identity-summary { align-items: center; display: flex; gap: var(--eos-space-3); min-width: 0; } .operator-identity-summary img { border: 1px solid rgba(0, 245, 255, 0.46); box-shadow: 0 0 22px rgba(0, 245, 255, 0.14), 0 0 24px rgba(255, 43, 214, 0.12); height: 58px; object-fit: cover; width: 58px; } .operator-identity-summary span { color: var(--ethereal-pink) !important; display: block; font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.2em; margin-bottom: 4px; text-transform: uppercase; } .operator-identity-summary strong { display: block; font-size: var(--eos-display-1); line-height: 1.1; } .operator-identity-summary p { font-size: var(--eos-text-5); line-height: 1.45; margin: 6px 0 0; max-width: 780px; } .operator-state-strip { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(3, max-content); } .operator-state-pill { border: 1px solid currentColor; color: var(--ethereal-soft) !important; display: inline-flex; font-size: var(--eos-text-3); font-weight: 900; justify-content: center; min-height: 32px; padding: 8px 10px; text-transform: uppercase; white-space: nowrap; } .operator-state-safe { background: rgba(49, 240, 129, 0.12); color: var(--ethereal-green) !important; } .operator-state-warning { background: rgba(247, 183, 51, 0.13); color: var(--ethereal-amber) !important; } .operator-state-live { background: rgba(255, 77, 109, 0.10); color: #ff9aad !important; } body.operator-simple-mode .operator-status-grid, body.operator-simple-mode .operator-task-grid, body.operator-simple-mode .artifact-grid, body.operator-simple-mode .status-grid { gap: var(--eos-space-3); } body.operator-simple-mode .operator-status-tile, body.operator-simple-mode .operator-task-card, body.operator-simple-mode .artifact-stat, body.operator-simple-mode .status-card { min-height: 104px; } body.operator-simple-mode .operator-status-tile { border-left: 3px solid rgba(0, 245, 255, 0.42) !important; } body.operator-simple-mode .operator-status-safe { background: linear-gradient(180deg, rgba(49, 240, 129, 0.12), rgba(5, 14, 10, 0.72)), rgba(4, 3, 7, 0.96) !important; border-color: rgba(49, 240, 129, 0.38) !important; } body.operator-simple-mode .operator-status-safe::after { border-color: rgba(49, 240, 129, 0.62); } body.operator-simple-mode .operator-status-warning { background: linear-gradient(180deg, rgba(247, 183, 51, 0.12), rgba(18, 12, 4, 0.72)), rgba(4, 3, 7, 0.96) !important; border-color: rgba(247, 183, 51, 0.42) !important; } body.operator-simple-mode .operator-status-warning::after { border-color: rgba(247, 183, 51, 0.68); } body.operator-simple-mode .operator-status-live { background: linear-gradient(180deg, rgba(255, 77, 109, 0.11), rgba(15, 4, 10, 0.78)), rgba(4, 3, 7, 0.96) !important; border-color: rgba(255, 77, 109, 0.42) !important; } body.operator-simple-mode .operator-status-live::after { border-color: rgba(255, 77, 109, 0.72); } body.operator-simple-mode .operator-status-danger { background: linear-gradient(180deg, rgba(255, 77, 109, 0.18), rgba(22, 4, 9, 0.82)), rgba(4, 3, 7, 0.96) !important; border-color: rgba(255, 77, 109, 0.66) !important; } body.operator-simple-mode .operator-status-tile::after, body.operator-simple-mode .operator-task-card::after, body.operator-simple-mode .artifact-stat::after, body.operator-simple-mode .status-card::after { border: 1px solid rgba(0, 245, 255, 0.42); bottom: 14px; content: ""; height: 18px; opacity: 0.7; position: absolute; right: 14px; width: 18px; } body.operator-simple-mode .artifact-stat strong, body.operator-simple-mode .status-card h2, body.operator-simple-mode .operator-status-tile strong { font-size: var(--eos-display-1); } body.operator-simple-mode .ethereal-world-banner { background: linear-gradient(rgba(0, 245, 255, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 43, 214, 0.12) 1px, transparent 1px), rgba(0, 0, 0, 0.42); background-size: 28px 28px; border: 1px solid rgba(0, 245, 255, 0.42); margin-bottom: 18px; max-width: none; padding: 16px; } body.operator-simple-mode .ethereal-world-banner img { border-radius: var(--eos-radius-1); max-width: 190px; } body.operator-simple-mode .button-row button, body.operator-simple-mode .button-row .cta-button, body.operator-simple-mode .operator-primary-action, body.operator-simple-mode .operator-workflow-step button, body.operator-simple-mode .operator-workflow-step a, body.operator-simple-mode .model-test-form button, body.operator-simple-mode .model-panel > button, body.operator-simple-mode .task-card button { background: linear-gradient(90deg, var(--ethereal-pink), var(--ethereal-purple) 48%, var(--ethereal-cyan)) !important; border-radius: var(--eos-radius-1) !important; box-shadow: 0 0 18px rgba(0, 245, 255, 0.2), 0 0 22px rgba(255, 43, 214, 0.16) !important; color: #020204 !important; font-weight: 900; min-height: 40px; text-transform: uppercase; } body.operator-simple-mode input, body.operator-simple-mode select, body.operator-simple-mode textarea { background: rgba(2, 2, 4, 0.92) !important; border: 1px solid rgba(0, 245, 255, 0.34) !important; border-radius: var(--eos-radius-1) !important; color: var(--ethereal-soft) !important; } body.operator-simple-mode input:focus, body.operator-simple-mode select:focus, body.operator-simple-mode textarea:focus { border-color: var(--ethereal-pink) !important; box-shadow: 0 0 0 2px rgba(255, 43, 214, 0.26), 0 0 18px rgba(0, 245, 255, 0.18) !important; } body.operator-simple-mode table { background: rgba(0, 0, 0, 0.42); border-collapse: separate; border-spacing: 0 8px; width: 100%; } body.operator-simple-mode table th, body.operator-simple-mode table td { background: rgba(10, 8, 14, 0.92); border-bottom: 1px solid rgba(0, 245, 255, 0.18); border-top: 1px solid rgba(255, 43, 214, 0.14); color: var(--ethereal-soft) !important; padding: 12px; } body.operator-simple-mode .checkbox-grid label { background: rgba(0, 245, 255, 0.045); border: 1px solid rgba(0, 245, 255, 0.22); border-radius: var(--eos-radius-1); padding: 10px; } .dapp-style-reference-strip { display: grid; gap: var(--eos-space-3); grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dapp-style-reference-strip figure { margin: 0; } .dapp-style-reference-strip img { border: 1px solid rgba(0, 245, 255, 0.52); border-radius: var(--eos-radius-1); box-shadow: 0 0 24px rgba(0, 245, 255, 0.16), 0 0 22px rgba(255, 43, 214, 0.14); display: block; width: 100%; } .dapp-style-reference-strip figcaption { color: color-mix(in srgb, var(--ethereal-soft) 70%, var(--ethereal-muted)) !important; font-size: var(--eos-text-5); line-height: 1.4; margin-top: 8px; } @media (min-width: 980px) { body.operator-simple-mode > nav { bottom: 0; display: flex !important; flex-direction: column; gap: var(--eos-space-2); left: 0; overflow-y: auto; padding: 18px 10px; position: fixed; top: 70px; width: 154px; z-index: 110; } body.operator-simple-mode .container, body.operator-simple-mode main.container, body.operator-simple-mode .home-shell { margin-left: 164px; width: calc(100% - 164px); } body.operator-simple-mode main.container, body.operator-simple-mode > .container { max-width: calc(100vw - 184px); } } @media (max-width: 979px) { body.operator-simple-mode .operator-mode-bar { grid-template-columns: 1fr; position: static; } body.operator-simple-mode .operator-workspace-header { grid-template-columns: 1fr; } body.operator-simple-mode .operator-workspace-actions { max-width: none; min-width: 0; width: 100%; } .operator-identity-band { grid-template-columns: 1fr; } .operator-state-strip { grid-template-columns: 1fr; } body.operator-simple-mode > nav { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); justify-content: center; padding: 10px; } .operator-dapp-wordmark { letter-spacing: 0.34em; } .dapp-style-reference-strip { grid-template-columns: 1fr; } } /* Keep the same Ethereal shell when Advanced Mode is open. Advanced Mode still exposes raw records; it should not visually fall back to the old plain web UI. */ body.operator-advanced-mode { background-color: var(--ethereal-black) !important; background-image: linear-gradient(90deg, rgba(255, 43, 214, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 245, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 82% 0%, rgba(0, 245, 255, 0.14), transparent 24rem), radial-gradient(circle at 24% 82%, rgba(255, 43, 214, 0.12), transparent 28rem) !important; background-size: 42px 42px, 42px 42px, auto, auto !important; color: var(--ethereal-soft) !important; } body.operator-advanced-mode::before { background: linear-gradient(135deg, transparent 0 48%, rgba(0, 245, 255, 0.22) 49%, transparent 50%), linear-gradient(45deg, transparent 0 48%, rgba(255, 43, 214, 0.14) 49%, transparent 50%); bottom: 0; content: ""; left: 0; opacity: 0.28; pointer-events: none; position: fixed; right: 0; top: 0; z-index: -1; } body.operator-advanced-mode > nav { background: rgba(0, 0, 0, 0.94) !important; border-right: 1px solid rgba(0, 245, 255, 0.24) !important; box-shadow: 18px 0 40px rgba(0, 0, 0, 0.34); } body.operator-advanced-mode > nav a { align-items: center; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--eos-radius-1) !important; color: color-mix(in srgb, var(--ethereal-soft) 72%, var(--ethereal-cyan)) !important; display: flex; font-size: var(--eos-text-4); font-weight: 800; gap: var(--eos-space-2); justify-content: flex-start; padding: 12px 10px; } body.operator-advanced-mode > nav a::before { background: linear-gradient(135deg, rgba(0, 245, 255, 0.34), rgba(255, 43, 214, 0.32)); border: 1px solid rgba(0, 245, 255, 0.42); content: ""; display: inline-block; flex: 0 0 15px; height: 15px; width: 15px; } body.operator-advanced-mode .model-panel, body.operator-advanced-mode .status-card, body.operator-advanced-mode .ceo-workflow-map, body.operator-advanced-mode .task-card, body.operator-advanced-mode .inline-tool-panel, body.operator-advanced-mode .artifact-stat, body.operator-advanced-mode .token-logo-studio { background: linear-gradient(180deg, rgba(14, 10, 22, 0.96), rgba(4, 3, 7, 0.98)) !important; border: 1px solid rgba(0, 245, 255, 0.42) !important; border-radius: var(--eos-radius-1) !important; box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.13), 0 20px 54px rgba(0, 0, 0, 0.48) !important; color: var(--ethereal-soft) !important; position: relative; } body.operator-advanced-mode .model-panel::before, body.operator-advanced-mode .inline-tool-panel::before { background: linear-gradient(90deg, var(--ethereal-pink), var(--ethereal-cyan)); content: ""; height: 2px; left: 0; position: absolute; right: 0; top: 0; } body.operator-advanced-mode h1, body.operator-advanced-mode h2, body.operator-advanced-mode h3, body.operator-advanced-mode strong, body.operator-advanced-mode label { color: var(--ethereal-soft) !important; } body.operator-advanced-mode p, body.operator-advanced-mode li, body.operator-advanced-mode small, body.operator-advanced-mode span { color: color-mix(in srgb, var(--ethereal-soft) 70%, var(--ethereal-muted)) !important; } body.operator-advanced-mode input, body.operator-advanced-mode select, body.operator-advanced-mode textarea { background: rgba(2, 2, 4, 0.92) !important; border: 1px solid rgba(0, 245, 255, 0.34) !important; border-radius: var(--eos-radius-1) !important; color: var(--ethereal-soft) !important; } @media (min-width: 980px) { body.operator-advanced-mode > nav { bottom: 0; display: flex !important; flex-direction: column; gap: var(--eos-space-2); left: 0; overflow-y: auto; padding: 18px 10px; position: fixed; top: 70px; width: 154px; z-index: 110; } body.operator-advanced-mode .container, body.operator-advanced-mode main.container, body.operator-advanced-mode .home-shell { margin-left: 164px; width: calc(100% - 164px); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) body.operator-simple-mode, :root:not([data-theme="day"]) body.operator-advanced-mode { background-color: var(--ethereal-black) !important; background-image: linear-gradient(90deg, rgba(255, 43, 214, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 245, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 82% 0%, rgba(0, 245, 255, 0.14), transparent 24rem), radial-gradient(circle at 24% 82%, rgba(255, 43, 214, 0.12), transparent 28rem) !important; background-size: 42px 42px, 42px 42px, auto, auto !important; color: var(--ethereal-soft) !important; } } :root[data-theme="night"] body.operator-simple-mode, :root[data-theme="night"] body.operator-advanced-mode { background-color: var(--ethereal-black) !important; background-image: linear-gradient(90deg, rgba(255, 43, 214, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 245, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 82% 0%, rgba(0, 245, 255, 0.14), transparent 24rem), radial-gradient(circle at 24% 82%, rgba(255, 43, 214, 0.12), transparent 28rem) !important; background-size: 42px 42px, 42px 42px, auto, auto !important; color: var(--ethereal-soft) !important; } /* Community presentation art system. These sections package the uploaded Ethereal art into reusable founder-update, social, website, and token-launch presentation surfaces. */ .operator-community-showcase, .community-showcase-panel, .community-showcase-band, .community-art-grid article, .logo-community-art-grid article { background: linear-gradient(180deg, rgba(18, 9, 28, 0.96), rgba(3, 2, 6, 0.98)) !important; border: 1px solid rgba(0, 245, 255, 0.34) !important; border-radius: var(--eos-radius-1) !important; box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.13), 0 22px 64px rgba(0, 0, 0, 0.42) !important; color: var(--ethereal-soft) !important; } .operator-community-showcase, .community-showcase-panel, .community-showcase-band { overflow: hidden; padding: 18px !important; position: relative; } .operator-community-showcase::before, .community-showcase-panel::before, .community-showcase-band::before { background: linear-gradient(90deg, var(--ethereal-pink), var(--ethereal-cyan)); content: ""; height: 2px; left: 0; position: absolute; right: 0; top: 0; } .operator-community-showcase::after, .community-showcase-panel::after, .community-showcase-band::after { background: radial-gradient(circle at 20% 20%, rgba(255, 43, 214, 0.24), transparent 12rem), radial-gradient(circle at 80% 72%, rgba(0, 245, 255, 0.18), transparent 14rem); bottom: -20%; content: ""; opacity: 0.64; pointer-events: none; position: absolute; right: -10%; top: -20%; width: min(46vw, 520px); } .operator-community-hero, .community-showcase-hero { align-items: center; display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr); position: relative; text-align: left; z-index: 1; } .operator-community-hero img, .community-showcase-hero img { aspect-ratio: 16 / 7; border: 1px solid rgba(255, 43, 214, 0.46); border-radius: var(--eos-radius-1); box-shadow: 0 0 38px rgba(0, 245, 255, 0.17), 0 0 42px rgba(255, 43, 214, 0.13); height: 100%; max-height: 300px; object-fit: cover; object-position: center; width: 100%; } .operator-community-hero span, .community-showcase-hero span { color: var(--ethereal-pink) !important; display: block; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0.18em; margin-bottom: 8px; text-transform: uppercase; } .operator-community-hero strong, .community-showcase-hero strong, .community-showcase-hero h2 { color: var(--ethereal-soft) !important; display: block; font-size: var(--eos-display-2); line-height: 1.04; margin: 0 0 10px; text-shadow: 0 0 20px rgba(0, 245, 255, 0.16); } .operator-community-hero p, .community-showcase-hero p { color: color-mix(in srgb, var(--ethereal-soft) 74%, var(--ethereal-muted)) !important; font-size: var(--eos-text-6); margin: 0; } .operator-community-art-grid, .community-art-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 14px; position: relative; z-index: 1; } .operator-community-art-grid article, .community-art-grid article { display: grid; gap: var(--eos-space-2); min-height: 100%; padding: 10px; } .operator-community-art-grid img, .community-art-grid img { aspect-ratio: 1.35; border: 1px solid rgba(0, 245, 255, 0.34); border-radius: var(--eos-radius-1); object-fit: cover; object-position: center; width: 100%; } .operator-community-art-grid strong, .community-art-grid strong { color: var(--ethereal-soft) !important; font-size: var(--eos-text-6); } .operator-community-art-grid span, .community-art-grid span { color: color-mix(in srgb, var(--ethereal-soft) 68%, var(--ethereal-muted)) !important; font-size: var(--eos-text-5); line-height: 1.45; } .logo-community-art-grid { margin-bottom: 16px; } .logo-community-art-grid img { aspect-ratio: 1; } .community-showcase-band { background: linear-gradient(180deg, rgba(18, 9, 28, 0.96), rgba(3, 2, 6, 0.98)) !important; } body.operator-simple-mode .operator-community-showcase, body.operator-simple-mode .community-showcase-panel, body.operator-simple-mode .community-showcase-band, body.operator-simple-mode .community-art-grid article, body.operator-simple-mode .logo-community-art-grid article, body.operator-advanced-mode .community-showcase-panel, body.operator-advanced-mode .community-art-grid article { background: linear-gradient(180deg, rgba(18, 9, 28, 0.96), rgba(3, 2, 6, 0.98)) !important; border-color: rgba(0, 245, 255, 0.38) !important; } @media (max-width: 860px) { .operator-community-hero, .community-showcase-hero { grid-template-columns: 1fr; } .operator-community-hero img, .community-showcase-hero img { max-height: 260px; } } /* True day/night operator theme architecture. This final layer owns the readable theme tokens used by Simple and Advanced operator shells. It intentionally overrides older hard-coded dark styles. */ :root, :root[data-theme="day"] { color-scheme: light; --theme-background: #f7f8fc; --theme-background-gradient: linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px), linear-gradient(0deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px), radial-gradient(circle at 18% 12%, rgba(255, 43, 214, 0.11), transparent 26rem), radial-gradient(circle at 86% 8%, rgba(0, 166, 214, 0.12), transparent 28rem), #f7f8fc; --theme-panel-background: rgba(255, 255, 255, 0.96); --theme-card-background: #ffffff; --theme-card-background-muted: #f1f5fb; --theme-primary-text: #10101a; --theme-secondary-text: #2b3548; --theme-muted-text: #536178; --theme-border: #cbd5e1; --theme-border-strong: #8797b2; --theme-glow: 0 20px 58px rgba(15, 23, 42, 0.14); --theme-cyan: #008eaa; --theme-pink: #b918a2; --theme-purple: #5b21b6; --theme-blue: #155bd8; --theme-button-background: linear-gradient(135deg, #151323 0%, #5b21b6 48%, #087ea4 100%); --theme-button-hover: linear-gradient(135deg, #0b1020 0%, #6d28d9 45%, #0369a1 100%); --theme-button-text: #ffffff; --theme-danger: #c21f3a; --theme-danger-bg: #fff1f4; --theme-danger-text: #831328; --theme-success: #137a3d; --theme-success-bg: #e8f8ef; --theme-success-text: #0d4f2a; --theme-warning: #af6500; --theme-warning-bg: #fff6df; --theme-warning-text: #734000; --theme-info: #155bd8; --theme-info-bg: #edf5ff; --theme-info-text: #103a87; --theme-input-background: #ffffff; --theme-input-text: #10101a; --theme-code-background: #111827; --theme-code-text: #f8fafc; --theme-logo-filter: none; --background: var(--theme-background); --background-gradient: var(--theme-background-gradient); --surface: var(--theme-panel-background); --surface-strong: var(--theme-card-background); --surface-muted: var(--theme-card-background-muted); --surface-tint: #f5eefb; --text-primary: var(--theme-primary-text); --text-secondary: var(--theme-secondary-text); --text-muted: var(--theme-muted-text); --text-inverse: #ffffff; --border: var(--theme-border); --border-strong: var(--theme-border-strong); --brand-pink: var(--theme-pink); --brand-purple: var(--theme-purple); --brand-purple-soft: #7c3cff; --brand-blue: var(--theme-blue); --brand-blue-soft: #dbeafe; --status-success: var(--theme-success); --status-success-bg: var(--theme-success-bg); --status-success-text: var(--theme-success-text); --status-warning: var(--theme-warning); --status-warning-bg: var(--theme-warning-bg); --status-warning-text: var(--theme-warning-text); --status-danger: var(--theme-danger); --status-danger-bg: var(--theme-danger-bg); --status-danger-text: var(--theme-danger-text); --status-info: var(--theme-info); --status-info-bg: var(--theme-info-bg); --status-info-text: var(--theme-info-text); --button-primary: var(--theme-button-background); --button-primary-hover: var(--theme-button-hover); --button-success: var(--theme-success); --button-warning: #d97706; --button-danger: var(--theme-danger); --focus-ring: rgba(185, 24, 162, 0.32); --shadow-soft: var(--theme-glow); --shadow-panel: var(--theme-glow); --input-background: var(--theme-input-background); --input-text: var(--theme-input-text); --code-background: var(--theme-code-background); --code-text: var(--theme-code-text); --ethereal-black: var(--theme-background); --ethereal-ink: #ffffff; --ethereal-panel: var(--theme-panel-background); --ethereal-panel-2: var(--theme-card-background); --ethereal-panel-3: var(--theme-card-background-muted); --ethereal-cyan: var(--theme-cyan); --ethereal-pink: var(--theme-pink); --ethereal-purple: var(--theme-purple); --ethereal-amber: var(--theme-warning); --ethereal-green: var(--theme-success); --ethereal-red: var(--theme-danger); --ethereal-soft: var(--theme-primary-text); --ethereal-muted: var(--theme-muted-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --theme-background: #020204; --theme-background-gradient: linear-gradient(90deg, rgba(255, 43, 214, 0.075) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 245, 255, 0.055) 1px, transparent 1px), radial-gradient(circle at 82% 0%, rgba(0, 245, 255, 0.14), transparent 25rem), radial-gradient(circle at 18% 80%, rgba(255, 43, 214, 0.13), transparent 30rem), linear-gradient(135deg, rgba(16, 8, 28, 0.74), rgba(0, 0, 0, 0.94)); --theme-panel-background: rgba(14, 8, 22, 0.97); --theme-card-background: rgba(18, 11, 30, 0.97); --theme-card-background-muted: rgba(27, 16, 42, 0.97); --theme-primary-text: #fbf7ff; --theme-secondary-text: #e6ddf2; --theme-muted-text: #b7aec8; --theme-border: rgba(0, 245, 255, 0.34); --theme-border-strong: rgba(255, 43, 214, 0.48); --theme-glow: 0 24px 74px rgba(0, 0, 0, 0.58); --theme-cyan: #00f5ff; --theme-pink: #ff4be1; --theme-purple: #9b5cff; --theme-blue: #7cc8ff; --theme-button-background: linear-gradient(135deg, rgba(255, 43, 214, 0.9), rgba(124, 60, 255, 0.92) 48%, rgba(0, 245, 255, 0.9)); --theme-button-hover: linear-gradient(135deg, #ff69e8, #a873ff 48%, #6df9ff); --theme-button-text: #020204; --theme-danger: #ff5c78; --theme-danger-bg: rgba(255, 77, 109, 0.14); --theme-danger-text: #ffd3dc; --theme-success: #31f081; --theme-success-bg: rgba(49, 240, 129, 0.14); --theme-success-text: #d6ffe7; --theme-warning: #f7b733; --theme-warning-bg: rgba(247, 183, 51, 0.14); --theme-warning-text: #ffe7a6; --theme-info: #7cc8ff; --theme-info-bg: rgba(0, 245, 255, 0.10); --theme-info-text: #d8f7ff; --theme-input-background: rgba(2, 2, 4, 0.94); --theme-input-text: #fbf7ff; --theme-code-background: #06030a; --theme-code-text: #fbf7ff; --theme-logo-filter: none; --background: var(--theme-background); --background-gradient: var(--theme-background-gradient); --surface: var(--theme-panel-background); --surface-strong: var(--theme-card-background); --surface-muted: var(--theme-card-background-muted); --surface-tint: rgba(37, 21, 56, 0.96); --text-primary: var(--theme-primary-text); --text-secondary: var(--theme-secondary-text); --text-muted: var(--theme-muted-text); --text-inverse: #ffffff; --border: var(--theme-border); --border-strong: var(--theme-border-strong); --brand-pink: var(--theme-pink); --brand-purple: var(--theme-purple); --brand-purple-soft: #a855f7; --brand-blue: var(--theme-blue); --brand-blue-soft: #172554; --status-success: var(--theme-success); --status-success-bg: var(--theme-success-bg); --status-success-text: var(--theme-success-text); --status-warning: var(--theme-warning); --status-warning-bg: var(--theme-warning-bg); --status-warning-text: var(--theme-warning-text); --status-danger: var(--theme-danger); --status-danger-bg: var(--theme-danger-bg); --status-danger-text: var(--theme-danger-text); --status-info: var(--theme-info); --status-info-bg: var(--theme-info-bg); --status-info-text: var(--theme-info-text); --button-primary: var(--theme-button-background); --button-primary-hover: var(--theme-button-hover); --button-success: var(--theme-success); --button-warning: #f59e0b; --button-danger: var(--theme-danger); --focus-ring: rgba(255, 43, 214, 0.34); --shadow-soft: var(--theme-glow); --shadow-panel: var(--theme-glow); --input-background: var(--theme-input-background); --input-text: var(--theme-input-text); --code-background: var(--theme-code-background); --code-text: var(--theme-code-text); --ethereal-black: var(--theme-background); --ethereal-ink: #06030a; --ethereal-panel: var(--theme-panel-background); --ethereal-panel-2: var(--theme-card-background); --ethereal-panel-3: var(--theme-card-background-muted); --ethereal-cyan: var(--theme-cyan); --ethereal-pink: var(--theme-pink); --ethereal-purple: var(--theme-purple); --ethereal-amber: var(--theme-warning); --ethereal-green: var(--theme-success); --ethereal-red: var(--theme-danger); --ethereal-soft: var(--theme-primary-text); --ethereal-muted: var(--theme-muted-text); } } :root[data-theme="night"] { color-scheme: dark; --theme-background: #020204; --theme-background-gradient: linear-gradient(90deg, rgba(255, 43, 214, 0.075) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 245, 255, 0.055) 1px, transparent 1px), radial-gradient(circle at 82% 0%, rgba(0, 245, 255, 0.14), transparent 25rem), radial-gradient(circle at 18% 80%, rgba(255, 43, 214, 0.13), transparent 30rem), linear-gradient(135deg, rgba(16, 8, 28, 0.74), rgba(0, 0, 0, 0.94)); --theme-panel-background: rgba(14, 8, 22, 0.97); --theme-card-background: rgba(18, 11, 30, 0.97); --theme-card-background-muted: rgba(27, 16, 42, 0.97); --theme-primary-text: #fbf7ff; --theme-secondary-text: #e6ddf2; --theme-muted-text: #b7aec8; --theme-border: rgba(0, 245, 255, 0.34); --theme-border-strong: rgba(255, 43, 214, 0.48); --theme-glow: 0 24px 74px rgba(0, 0, 0, 0.58); --theme-cyan: #00f5ff; --theme-pink: #ff4be1; --theme-purple: #9b5cff; --theme-blue: #7cc8ff; --theme-button-background: linear-gradient(135deg, rgba(255, 43, 214, 0.9), rgba(124, 60, 255, 0.92) 48%, rgba(0, 245, 255, 0.9)); --theme-button-hover: linear-gradient(135deg, #ff69e8, #a873ff 48%, #6df9ff); --theme-button-text: #020204; --theme-danger: #ff5c78; --theme-danger-bg: rgba(255, 77, 109, 0.14); --theme-danger-text: #ffd3dc; --theme-success: #31f081; --theme-success-bg: rgba(49, 240, 129, 0.14); --theme-success-text: #d6ffe7; --theme-warning: #f7b733; --theme-warning-bg: rgba(247, 183, 51, 0.14); --theme-warning-text: #ffe7a6; --theme-info: #7cc8ff; --theme-info-bg: rgba(0, 245, 255, 0.10); --theme-info-text: #d8f7ff; --theme-input-background: rgba(2, 2, 4, 0.94); --theme-input-text: #fbf7ff; --theme-code-background: #06030a; --theme-code-text: #fbf7ff; --theme-logo-filter: none; --background: var(--theme-background); --background-gradient: var(--theme-background-gradient); --surface: var(--theme-panel-background); --surface-strong: var(--theme-card-background); --surface-muted: var(--theme-card-background-muted); --surface-tint: rgba(37, 21, 56, 0.96); --text-primary: var(--theme-primary-text); --text-secondary: var(--theme-secondary-text); --text-muted: var(--theme-muted-text); --text-inverse: #ffffff; --border: var(--theme-border); --border-strong: var(--theme-border-strong); --brand-pink: var(--theme-pink); --brand-purple: var(--theme-purple); --brand-purple-soft: #a855f7; --brand-blue: var(--theme-blue); --brand-blue-soft: #172554; --status-success: var(--theme-success); --status-success-bg: var(--theme-success-bg); --status-success-text: var(--theme-success-text); --status-warning: var(--theme-warning); --status-warning-bg: var(--theme-warning-bg); --status-warning-text: var(--theme-warning-text); --status-danger: var(--theme-danger); --status-danger-bg: var(--theme-danger-bg); --status-danger-text: var(--theme-danger-text); --status-info: var(--theme-info); --status-info-bg: var(--theme-info-bg); --status-info-text: var(--theme-info-text); --button-primary: var(--theme-button-background); --button-primary-hover: var(--theme-button-hover); --button-success: var(--theme-success); --button-warning: #f59e0b; --button-danger: var(--theme-danger); --focus-ring: rgba(255, 43, 214, 0.34); --shadow-soft: var(--theme-glow); --shadow-panel: var(--theme-glow); --input-background: var(--theme-input-background); --input-text: var(--theme-input-text); --code-background: var(--theme-code-background); --code-text: var(--theme-code-text); --ethereal-black: var(--theme-background); --ethereal-ink: #06030a; --ethereal-panel: var(--theme-panel-background); --ethereal-panel-2: var(--theme-card-background); --ethereal-panel-3: var(--theme-card-background-muted); --ethereal-cyan: var(--theme-cyan); --ethereal-pink: var(--theme-pink); --ethereal-purple: var(--theme-purple); --ethereal-amber: var(--theme-warning); --ethereal-green: var(--theme-success); --ethereal-red: var(--theme-danger); --ethereal-soft: var(--theme-primary-text); --ethereal-muted: var(--theme-muted-text); } body.operator-simple-mode, body.operator-advanced-mode { background-color: var(--theme-background) !important; background-image: var(--theme-background-gradient) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode::before, body.operator-advanced-mode::before { background: linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--theme-cyan) 18%, transparent) 49%, transparent 50%), linear-gradient(45deg, transparent 0 48%, color-mix(in srgb, var(--theme-pink) 12%, transparent) 49%, transparent 50%) !important; } body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { align-items: center !important; background: var(--theme-panel-background) !important; border-bottom: 1px solid var(--theme-border-strong) !important; box-shadow: var(--theme-glow) !important; color: var(--theme-primary-text) !important; gap: var(--eos-space-3) !important; grid-template-columns: auto minmax(164px, 190px) auto minmax(0, auto) !important; min-height: 64px !important; padding: 8px 14px !important; } body.operator-simple-mode .operator-dapp-wordmark, body.operator-advanced-mode .operator-dapp-wordmark { color: var(--theme-primary-text) !important; font-size: var(--eos-text-5) !important; letter-spacing: 0.56em !important; text-shadow: 0 0 12px color-mix(in srgb, var(--theme-pink) 45%, transparent), 0 0 20px color-mix(in srgb, var(--theme-cyan) 30%, transparent) !important; } body.operator-simple-mode .operator-mode-brand, body.operator-advanced-mode .operator-mode-brand { gap: var(--eos-space-2) !important; min-width: 164px !important; } body.operator-simple-mode .operator-mode-brand strong, body.operator-advanced-mode .operator-mode-brand strong { color: var(--theme-primary-text) !important; display: block; font-size: var(--eos-text-5) !important; line-height: 1.1 !important; max-width: 130px; } body.operator-simple-mode .operator-mode-brand > div span, body.operator-advanced-mode .operator-mode-brand > div span { display: none !important; } body.operator-simple-mode .operator-mode-logo, body.operator-advanced-mode .operator-mode-logo, body.operator-simple-mode .operator-brand-logo, body.operator-advanced-mode .operator-brand-logo, body.operator-simple-mode .login-brand-mark img, body.operator-advanced-mode .login-brand-mark img { background: color-mix(in srgb, var(--theme-card-background) 82%, transparent) !important; border-color: var(--theme-border-strong) !important; filter: var(--theme-logo-filter); } body.operator-simple-mode .operator-mode-logo, body.operator-advanced-mode .operator-mode-logo { height: 34px !important; width: 34px !important; } body.operator-simple-mode .operator-dapp-safety-strip, body.operator-advanced-mode .operator-dapp-safety-strip { background: var(--theme-info-bg) !important; border-color: var(--theme-border-strong) !important; gap: var(--eos-space-1) !important; min-width: 132px !important; padding: 7px 8px !important; white-space: nowrap; } body.operator-simple-mode .operator-dapp-safety-strip span, body.operator-simple-mode .operator-dapp-safety-strip strong, body.operator-advanced-mode .operator-dapp-safety-strip span, body.operator-advanced-mode .operator-dapp-safety-strip strong { color: var(--theme-primary-text) !important; } body.operator-simple-mode .operator-dapp-safety-strip strong, body.operator-advanced-mode .operator-dapp-safety-strip strong { color: var(--theme-info-text) !important; } body.operator-simple-mode .operator-top-control, body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-top-control, body.operator-advanced-mode .operator-mode-toggle { align-items: center; background: var(--theme-button-background) !important; border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, var(--theme-border)) !important; border-radius: var(--eos-radius-1) !important; box-sizing: border-box; color: var(--theme-button-text) !important; display: inline-flex; font-size: var(--eos-text-4); font-weight: 900; height: 40px; justify-content: center; letter-spacing: 0.02em; line-height: 1.1; min-width: 82px; padding: 0 10px; text-align: center; text-transform: uppercase; white-space: nowrap; } body.operator-simple-mode .operator-theme-dropdown .operator-top-control, body.operator-advanced-mode .operator-theme-dropdown .operator-top-control { min-width: 84px; } body.operator-simple-mode .operator-top-training-dropdown .operator-top-control, body.operator-advanced-mode .operator-top-training-dropdown .operator-top-control { min-width: 116px; } body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-mode-toggle { min-width: 82px; } body.operator-simple-mode .operator-top-control:hover, body.operator-simple-mode .operator-mode-toggle:hover, body.operator-advanced-mode .operator-top-control:hover, body.operator-advanced-mode .operator-mode-toggle:hover { background: var(--theme-button-hover) !important; } body.operator-simple-mode .operator-mode-active, body.operator-simple-mode .operator-theme-active, body.operator-advanced-mode .operator-mode-active, body.operator-advanced-mode .operator-theme-active { outline: 2px solid color-mix(in srgb, var(--theme-warning) 70%, transparent) !important; outline-offset: 2px; } body.operator-simple-mode .operator-top-dropdown-list, body.operator-advanced-mode .operator-top-dropdown-list { background: var(--theme-panel-background) !important; border-color: var(--theme-border-strong) !important; box-shadow: var(--theme-glow) !important; } body.operator-simple-mode .operator-top-dropdown-list a, body.operator-simple-mode .operator-top-dropdown-list button, body.operator-advanced-mode .operator-top-dropdown-list a, body.operator-advanced-mode .operator-top-dropdown-list button { background: var(--theme-card-background-muted) !important; border-color: var(--theme-border) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .operator-top-dropdown-list a:hover, body.operator-simple-mode .operator-top-dropdown-list button:hover, body.operator-simple-mode .operator-top-dropdown-list .operator-active-page, body.operator-advanced-mode .operator-top-dropdown-list a:hover, body.operator-advanced-mode .operator-top-dropdown-list button:hover, body.operator-advanced-mode .operator-top-dropdown-list .operator-active-page { background: var(--theme-info-bg) !important; border-color: var(--theme-border-strong) !important; color: var(--theme-info-text) !important; } body.operator-simple-mode > nav, body.operator-advanced-mode > nav { background: color-mix(in srgb, var(--theme-panel-background) 96%, var(--theme-background)) !important; border-right: 1px solid var(--theme-border) !important; box-shadow: var(--theme-glow) !important; } body.operator-simple-mode > nav a, body.operator-advanced-mode > nav a { color: var(--theme-secondary-text) !important; } body.operator-simple-mode > nav a::before, body.operator-advanced-mode > nav a::before { background: linear-gradient(135deg, var(--theme-cyan), var(--theme-pink)) !important; border-color: var(--theme-border-strong) !important; } body.operator-simple-mode > nav a:hover, body.operator-simple-mode > nav a.operator-active-page, body.operator-advanced-mode > nav a:hover, body.operator-advanced-mode > nav a.operator-active-page { background: var(--theme-info-bg) !important; border-color: var(--theme-border-strong) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode h1, body.operator-simple-mode h2, body.operator-simple-mode h3, body.operator-simple-mode h4, body.operator-simple-mode strong, body.operator-simple-mode label, body.operator-advanced-mode h1, body.operator-advanced-mode h2, body.operator-advanced-mode h3, body.operator-advanced-mode h4, body.operator-advanced-mode strong, body.operator-advanced-mode label { color: var(--theme-primary-text) !important; } body.operator-simple-mode p, body.operator-simple-mode li, body.operator-simple-mode small, body.operator-simple-mode span, body.operator-simple-mode figcaption, body.operator-advanced-mode p, body.operator-advanced-mode li, body.operator-advanced-mode small, body.operator-advanced-mode span, body.operator-advanced-mode figcaption { color: var(--theme-secondary-text) !important; } body.operator-simple-mode .operator-page-label, body.operator-simple-mode .operator-area, body.operator-simple-mode .ethereal-world-banner span, body.operator-simple-mode .token-logo-studio-copy > span, body.operator-advanced-mode .operator-page-label, body.operator-advanced-mode .operator-area, body.operator-advanced-mode .ethereal-world-banner span, body.operator-advanced-mode .token-logo-studio-copy > span { color: var(--theme-pink) !important; } body.operator-simple-mode .simple-operator-workspace, body.operator-simple-mode .mission-hero, body.operator-simple-mode .model-panel, body.operator-simple-mode .status-card, body.operator-simple-mode .ceo-workflow-map, body.operator-simple-mode .task-card, body.operator-simple-mode .home-workflow-card, body.operator-simple-mode .operator-answer-panel article, body.operator-simple-mode .operator-guided-workflow, body.operator-simple-mode .operator-workflow-step, body.operator-simple-mode .operator-status-tile, body.operator-simple-mode .operator-task-card, body.operator-simple-mode .inline-tool-panel, body.operator-simple-mode .artifact-stat, body.operator-simple-mode .token-logo-studio, body.operator-simple-mode .logo-creation-showcase, body.operator-simple-mode .operator-community-showcase, body.operator-simple-mode .community-showcase-panel, body.operator-simple-mode .community-showcase-band, body.operator-simple-mode .community-art-grid article, body.operator-simple-mode .logo-community-art-grid article, body.operator-simple-mode .safe-paper-result-card, body.operator-simple-mode .safe-paper-table-card, body.operator-simple-mode .safe-paper-status-card, body.operator-simple-mode .safe-paper-warning-card, body.operator-simple-mode .operator-progress-checklist article, body.operator-simple-mode .phase3-dashboard-grid > article, body.operator-simple-mode .phase6-dashboard-grid > article, body.operator-simple-mode .phase5-dashboard-grid > article, body.operator-simple-mode .phase4-dashboard-grid > article, body.operator-simple-mode .phase6-panel, body.operator-simple-mode .phase5-panel, body.operator-simple-mode .phase4-panel, body.operator-simple-mode .phase6-mini-card, body.operator-simple-mode .phase5-mini-card, body.operator-simple-mode .phase4-mini-card, body.operator-simple-mode .phase3-panel, body.operator-simple-mode .phase3-results, body.operator-simple-mode .phase3-mini-card, body.operator-simple-mode .phase3-account-card, body.operator-simple-mode .phase3a-checklist article, body.operator-simple-mode .phase3a-exchange-grid > article, body.operator-simple-mode .phase6b-tiny-live-panel, body.operator-simple-mode .phase6f-summary-grid article, body.operator-simple-mode .phase6f-proof-panel, body.operator-simple-mode .phase6f-check-item, body.operator-simple-mode .phase6f-ready-card, body.operator-simple-mode .phase6f-enable-panel, body.operator-simple-mode .kraken-tiny-live-flow, body.operator-simple-mode .kraken-tiny-journal-list, body.operator-advanced-mode .model-panel, body.operator-advanced-mode .task-card, body.operator-advanced-mode .status-card, body.operator-advanced-mode .operator-community-showcase, body.operator-advanced-mode .community-showcase-panel, body.operator-advanced-mode .community-showcase-band, body.operator-advanced-mode .community-art-grid article, body.operator-advanced-mode .phase6-panel, body.operator-advanced-mode .phase6-mini-card, body.operator-advanced-mode .phase6f-proof-panel, body.operator-advanced-mode .phase6f-check-item, body.operator-advanced-mode .phase6f-ready-card { background: var(--theme-card-background) !important; border: 1px solid var(--theme-border) !important; box-shadow: var(--theme-glow) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .operator-workspace-header, body.operator-advanced-mode .operator-workspace-header, body.operator-simple-mode .operator-identity-band, body.operator-advanced-mode .operator-identity-band, body.operator-simple-mode .ethereal-world-banner, body.operator-advanced-mode .ethereal-world-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-pink) 10%, transparent), transparent 40%), var(--theme-card-background-muted) !important; border: 1px solid var(--theme-border-strong) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .model-panel::before, body.operator-simple-mode .simple-operator-workspace::before, body.operator-simple-mode .mission-hero::before, body.operator-simple-mode .operator-guided-workflow::before, body.operator-simple-mode .inline-tool-panel::before, body.operator-simple-mode .operator-community-showcase::before, body.operator-simple-mode .community-showcase-panel::before, body.operator-simple-mode .community-showcase-band::before { background: linear-gradient(90deg, var(--theme-pink), var(--theme-cyan)) !important; } body.operator-simple-mode .operator-status-safe, body.operator-advanced-mode .operator-status-safe, body.operator-simple-mode .safe-paper-status-card, body.operator-simple-mode .operator-progress-checklist article.operator-check-pass, body.operator-simple-mode .operator-check-pass, body.operator-simple-mode .status-success, body.operator-advanced-mode .safe-paper-status-card, body.operator-advanced-mode .operator-progress-checklist article.operator-check-pass, body.operator-advanced-mode .operator-check-pass, body.operator-advanced-mode .status-success { background: var(--theme-success-bg) !important; border-color: color-mix(in srgb, var(--theme-success) 72%, var(--theme-border)) !important; color: var(--theme-success-text) !important; } body.operator-simple-mode .operator-status-warning, body.operator-advanced-mode .operator-status-warning, body.operator-simple-mode .status-warning, body.operator-advanced-mode .status-warning { background: var(--theme-warning-bg) !important; border-color: color-mix(in srgb, var(--theme-warning) 72%, var(--theme-border)) !important; color: var(--theme-warning-text) !important; } body.operator-simple-mode .operator-status-live, body.operator-advanced-mode .operator-status-live, body.operator-simple-mode .operator-status-danger, body.operator-advanced-mode .operator-status-danger, body.operator-simple-mode .safe-paper-warning-card, body.operator-simple-mode .operator-progress-checklist article.operator-check-blocked, body.operator-simple-mode .operator-check-blocked, body.operator-simple-mode .status-danger, body.operator-advanced-mode .safe-paper-warning-card, body.operator-advanced-mode .operator-progress-checklist article.operator-check-blocked, body.operator-advanced-mode .operator-check-blocked, body.operator-advanced-mode .status-danger { background: var(--theme-danger-bg) !important; border-color: color-mix(in srgb, var(--theme-danger) 72%, var(--theme-border)) !important; color: var(--theme-danger-text) !important; } body.operator-simple-mode .operator-status-safe *, body.operator-simple-mode .safe-paper-status-card *, body.operator-simple-mode .operator-check-pass *, body.operator-simple-mode .status-success *, body.operator-advanced-mode .operator-status-safe *, body.operator-advanced-mode .safe-paper-status-card *, body.operator-advanced-mode .operator-check-pass *, body.operator-advanced-mode .status-success * { color: var(--theme-success-text) !important; } body.operator-simple-mode .operator-status-warning *, body.operator-simple-mode .status-warning *, body.operator-advanced-mode .operator-status-warning *, body.operator-advanced-mode .status-warning * { color: var(--theme-warning-text) !important; } body.operator-simple-mode .operator-status-live *, body.operator-simple-mode .operator-status-danger *, body.operator-simple-mode .safe-paper-warning-card *, body.operator-simple-mode .operator-check-blocked *, body.operator-simple-mode .status-danger *, body.operator-advanced-mode .operator-status-live *, body.operator-advanced-mode .operator-status-danger *, body.operator-advanced-mode .safe-paper-warning-card *, body.operator-advanced-mode .operator-check-blocked *, body.operator-advanced-mode .status-danger * { color: var(--theme-danger-text) !important; } body.operator-simple-mode .operator-primary-action, body.operator-simple-mode .operator-secondary-action, body.operator-simple-mode .operator-training-menu > button, body.operator-simple-mode .button-row button, body.operator-simple-mode .button-row .cta-button, body.operator-simple-mode .operator-workflow-step button, body.operator-simple-mode .operator-workflow-step a, body.operator-simple-mode .model-test-form button, body.operator-simple-mode .model-panel > button, body.operator-simple-mode .task-card button, body.operator-advanced-mode .button-row button, body.operator-advanced-mode .button-row .cta-button, body.operator-advanced-mode .model-test-form button, body.operator-advanced-mode .model-panel > button, body.operator-advanced-mode .task-card button { background: var(--theme-button-background) !important; border: 1px solid color-mix(in srgb, var(--theme-cyan) 28%, var(--theme-border)) !important; color: var(--theme-button-text) !important; } body.operator-simple-mode .operator-primary-action:hover, body.operator-simple-mode .operator-secondary-action:hover, body.operator-simple-mode .operator-training-menu > button:hover, body.operator-simple-mode .button-row button:hover, body.operator-simple-mode .button-row .cta-button:hover, body.operator-simple-mode .operator-workflow-step button:hover, body.operator-simple-mode .operator-workflow-step a:hover, body.operator-simple-mode .model-test-form button:hover, body.operator-simple-mode .model-panel > button:hover, body.operator-simple-mode .task-card button:hover, body.operator-advanced-mode .button-row button:hover, body.operator-advanced-mode .button-row .cta-button:hover, body.operator-advanced-mode .model-test-form button:hover, body.operator-advanced-mode .model-panel > button:hover, body.operator-advanced-mode .task-card button:hover { background: var(--theme-button-hover) !important; } body.operator-simple-mode button:disabled, body.operator-simple-mode [disabled], body.operator-advanced-mode button:disabled, body.operator-advanced-mode [disabled] { color: var(--theme-muted-text) !important; cursor: not-allowed; opacity: 0.72; } body.operator-simple-mode input, body.operator-simple-mode select, body.operator-simple-mode textarea, body.operator-advanced-mode input, body.operator-advanced-mode select, body.operator-advanced-mode textarea { background: var(--theme-input-background) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-input-text) !important; } body.operator-simple-mode input::placeholder, body.operator-simple-mode textarea::placeholder, body.operator-advanced-mode input::placeholder, body.operator-advanced-mode textarea::placeholder { color: var(--theme-muted-text) !important; opacity: 1; } body.operator-simple-mode pre, body.operator-simple-mode code, body.operator-simple-mode .model-output, body.operator-simple-mode .owner-proof-command, body.operator-simple-mode .operator-simple-readable, body.operator-advanced-mode pre, body.operator-advanced-mode code, body.operator-advanced-mode .model-output, body.operator-advanced-mode .owner-proof-command, body.operator-advanced-mode .operator-simple-readable { background: var(--theme-code-background) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-code-text) !important; } body.operator-simple-mode table, body.operator-advanced-mode table { background: var(--theme-panel-background) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode table th, body.operator-simple-mode table td, body.operator-advanced-mode table th, body.operator-advanced-mode table td { background: var(--theme-card-background) !important; border-color: var(--theme-border) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .checkbox-grid label, body.operator-advanced-mode .checkbox-grid label { background: var(--theme-card-background-muted) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .operator-training-menu-list, body.operator-advanced-mode .operator-training-menu-list { background: var(--theme-panel-background) !important; border-color: var(--theme-border-strong) !important; box-shadow: var(--theme-glow) !important; } body.operator-simple-mode .operator-training-menu-list button, body.operator-advanced-mode .operator-training-menu-list button { background: var(--theme-card-background-muted) !important; border-color: var(--theme-border) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .operator-black-hole-label, body.operator-advanced-mode .operator-black-hole-label { color: var(--theme-secondary-text) !important; } body.operator-simple-mode .community-showcase-hero strong, body.operator-simple-mode .operator-community-hero strong, body.operator-simple-mode .community-showcase-hero h2, body.operator-simple-mode .operator-community-art-grid strong, body.operator-simple-mode .community-art-grid strong, body.operator-advanced-mode .community-showcase-hero strong, body.operator-advanced-mode .operator-community-hero strong, body.operator-advanced-mode .community-showcase-hero h2, body.operator-advanced-mode .operator-community-art-grid strong, body.operator-advanced-mode .community-art-grid strong { color: var(--theme-primary-text) !important; } body.operator-simple-mode .community-showcase-hero p, body.operator-simple-mode .operator-community-hero p, body.operator-simple-mode .operator-community-art-grid span, body.operator-simple-mode .community-art-grid span, body.operator-advanced-mode .community-showcase-hero p, body.operator-advanced-mode .operator-community-hero p, body.operator-advanced-mode .operator-community-art-grid span, body.operator-advanced-mode .community-art-grid span { color: var(--theme-secondary-text) !important; } /* CEO operator two-gate workflow foundation */ .api-connection-shell { max-width: 1180px; } .api-connection-hero .ethereal-world-banner { align-items: center; } .api-status-grid, .api-lane-grid, .operator-two-gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--eos-space-3); } .api-operator-wizard { display: grid; gap: var(--eos-space-4); } .api-owner-next-action { display: grid; } .api-owner-step-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .api-owner-step-grid button, .api-owner-next-action button, .api-owner-step-grid .cta-button, .api-owner-next-action .cta-button { justify-content: center; margin-top: 8px; width: 100%; } .api-status-grid article, .api-lane-grid article, .operator-two-gate-card { background: var(--theme-card-background); border: 1px solid var(--theme-border); color: var(--theme-primary-text); box-shadow: var(--theme-glow); } .api-status-grid article, .api-lane-grid article { padding: 16px; } .api-status-grid span, .api-lane-grid strong, .operator-two-gate-card-header span, .operator-two-gate-status span { color: var(--theme-secondary-text); font-size: var(--eos-text-4); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .api-status-grid strong, .operator-two-gate-card-header strong, .operator-two-gate-status strong { color: var(--theme-primary-text); display: block; font-size: var(--eos-text-9); line-height: 1.15; margin-top: 7px; } .api-status-grid small, .api-lane-grid span, .operator-two-gate-card p, .operator-two-gate-card small, .operator-two-gate-footer span { color: var(--theme-secondary-text); } .operator-two-gate-flow { display: grid; gap: var(--eos-space-4); } .operator-two-gate-heading { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-pink) 12%, transparent), transparent 42%), var(--theme-card-background-muted); border: 1px solid var(--theme-border-strong); color: var(--theme-primary-text); padding: 18px; } .operator-two-gate-heading span { color: var(--theme-pink); display: block; font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0.16em; margin-bottom: 8px; text-transform: uppercase; } .operator-two-gate-heading h2 { color: var(--theme-primary-text); margin: 0 0 8px; } .operator-two-gate-heading p { color: var(--theme-secondary-text); margin: 0; max-width: 76ch; } .operator-two-gate-card { display: flex; flex-direction: column; gap: var(--eos-space-3); min-height: 100%; padding: 16px; } .operator-two-gate-card-header { display: flex; flex-direction: column; gap: var(--eos-space-1); } .operator-two-gate-status { align-items: center; background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); display: flex; justify-content: space-between; gap: var(--eos-space-3); padding: 10px 12px; } .operator-two-gate-blockers { display: grid; gap: var(--eos-space-2); list-style: none; margin: 0; padding: 0; } .operator-two-gate-blockers li { background: color-mix(in srgb, var(--theme-danger-bg) 78%, transparent); border: 1px solid color-mix(in srgb, var(--theme-danger) 58%, var(--theme-border)); color: var(--theme-danger-text); display: grid; gap: var(--eos-space-1); padding: 10px 12px; } .operator-two-gate-blockers strong, .operator-two-gate-blockers span { color: var(--theme-danger-text); } .operator-two-gate-clear { background: var(--theme-success-bg); border: 1px solid color-mix(in srgb, var(--theme-success) 60%, var(--theme-border)); color: var(--theme-success-text) !important; margin: 0; padding: 10px 12px; } .operator-two-gate-actions { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); margin-top: auto; } .operator-two-gate-action { align-items: center; background: var(--theme-button-background); border: 1px solid color-mix(in srgb, var(--theme-cyan) 36%, var(--theme-border)); color: var(--theme-button-text); cursor: pointer; display: inline-flex; font-size: var(--eos-text-4); font-weight: 900; justify-content: center; letter-spacing: 0.03em; min-height: 42px; padding: 10px 14px; text-align: center; text-decoration: none; text-transform: uppercase; } .operator-two-gate-action:hover { background: var(--theme-button-hover); color: var(--theme-button-text); } .operator-two-gate-action.operator-two-gate-primary { border-color: color-mix(in srgb, var(--theme-cyan) 68%, var(--theme-border)); box-shadow: 0 0 18px color-mix(in srgb, var(--theme-cyan) 28%, transparent); } .operator-two-gate-action.operator-two-gate-warning { border-color: color-mix(in srgb, var(--theme-warning) 70%, var(--theme-border)); box-shadow: 0 0 18px color-mix(in srgb, var(--theme-warning) 22%, transparent); } .operator-two-gate-action.operator-two-gate-danger { border-color: color-mix(in srgb, var(--theme-danger) 70%, var(--theme-border)); box-shadow: 0 0 18px color-mix(in srgb, var(--theme-danger) 22%, transparent); } .operator-two-gate-card.operator-two-gate-safe { border-color: color-mix(in srgb, var(--theme-success) 60%, var(--theme-border)); } .operator-two-gate-card.operator-two-gate-warning { border-color: color-mix(in srgb, var(--theme-warning) 60%, var(--theme-border)); } .operator-two-gate-card.operator-two-gate-danger, .operator-two-gate-card.operator-two-gate-live { border-color: color-mix(in srgb, var(--theme-danger) 60%, var(--theme-border)); } .operator-two-gate-footer { align-items: center; background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: flex; flex-wrap: wrap; gap: var(--eos-space-2) var(--eos-space-3); padding: 12px 14px; } .operator-two-gate-footer strong { color: var(--theme-primary-text); } .api-readonly-lanes .phase3-results, .api-connection-shell .phase3-results { margin-top: 14px; } .api-provider-model { display: grid; gap: var(--eos-space-4); } .api-action-row { align-items: stretch; } .api-key-replace-panel { border-color: color-mix(in srgb, var(--theme-warning) 44%, var(--theme-border)); } .api-key-replace-panel[open] { box-shadow: 0 0 22px color-mix(in srgb, var(--theme-warning) 18%, transparent); } .api-provider-model .model-test-form { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); padding: 14px; } .api-quote-compare-form { background: color-mix(in srgb, var(--theme-info-bg) 35%, transparent); border: 1px solid color-mix(in srgb, var(--theme-info) 35%, var(--theme-border)); display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 12px; padding: 12px; } .api-quote-compare-form label { color: var(--theme-secondary-text); font-size: var(--eos-text-4); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .api-provider-model .checkbox-line { align-items: flex-start; background: color-mix(in srgb, var(--theme-warning-bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--theme-warning) 44%, var(--theme-border)); color: var(--theme-warning-text); display: flex; gap: var(--eos-space-2); line-height: 1.45; padding: 12px; } .api-provider-model .checkbox-line input { margin-top: 3px; min-height: auto; } .api-provider-model .operator-two-gate-blockers { margin-top: 0; } .token-launch-operator-pipeline { display: grid; gap: var(--eos-space-4); } .token-launch-hero img { aspect-ratio: 1 / 1; } .token-launch-draft-status { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-launch-draft-status article { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-cyan) 9%, transparent), transparent 55%), var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); padding: 14px; } .token-launch-draft-status span { color: var(--theme-pink); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .token-launch-draft-status strong { color: var(--theme-primary-text); font-size: var(--eos-text-7); } .token-launch-draft-status p { color: var(--theme-secondary-text); margin: 0; } .logo-studio-operator-panel { display: grid; gap: var(--eos-space-4); } .logo-studio-choice-grid, .logo-studio-lock-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .logo-studio-choice-card, .logo-studio-lock-grid article { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-pink) 10%, transparent), transparent 52%), var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-3); padding: 16px; } .logo-studio-choice-card.logo-studio-choice-selected { border-color: color-mix(in srgb, var(--theme-success) 72%, var(--theme-border)); box-shadow: 0 0 22px color-mix(in srgb, var(--theme-success) 18%, transparent); } .logo-studio-choice-card > span, .logo-studio-lock-grid span { color: var(--theme-cyan); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .logo-studio-choice-card h3 { color: var(--theme-primary-text); margin: 0; } .logo-studio-choice-card p, .logo-studio-lock-grid p, .logo-studio-choice-card dd { color: var(--theme-secondary-text); margin: 0; } .logo-studio-choice-card dl { display: grid; gap: var(--eos-space-2); margin: 0; } .logo-studio-choice-card dt { color: var(--theme-pink); font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .logo-studio-choice-card button { min-height: 44px; } .website-whitepaper-roadmap-builder { display: grid; gap: var(--eos-space-3); } .website-whitepaper-roadmap-builder .section-help { color: var(--theme-secondary-text); margin: 0; max-width: 84ch; } .website-whitepaper-roadmap-builder textarea[readonly] { color: var(--theme-success-text); } .token-site-local-preview { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-cyan) 9%, transparent), transparent 58%), var(--theme-card-background); border: 1px solid var(--theme-border-strong); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-3); padding: 16px; } .token-site-preview-hero { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); display: grid; gap: var(--eos-space-2); padding: 18px; } .token-site-preview-hero span, .token-site-preview-hero small { color: var(--theme-secondary-text); font-weight: 800; } .token-site-preview-hero h3 { color: var(--theme-primary-text); font-size: var(--eos-display-3); line-height: 1; margin: 0; } .token-site-preview-hero p { color: var(--theme-primary-text); font-size: var(--eos-text-7); margin: 0; max-width: 78ch; } .token-site-preview-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-site-preview-grid article { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); padding: 14px; } .token-site-preview-grid strong { color: var(--theme-cyan); } .token-site-preview-grid p, .token-site-preview-grid li { color: var(--theme-secondary-text); } .token-intelligence-card-grid, .token-social-kit-grid, .locked-action-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-intelligence-card-grid article, .token-social-kit-grid label { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-purple) 9%, transparent), transparent 52%), var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); padding: 14px; } .token-intelligence-card-grid span { color: var(--theme-cyan); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .token-intelligence-card-grid strong, .token-social-kit-grid label { color: var(--theme-primary-text); } .token-intelligence-card-grid small, .token-social-kit-grid textarea { color: var(--theme-secondary-text); } .token-intelligence-editor { border-color: color-mix(in srgb, var(--theme-cyan) 42%, var(--theme-border)); } .locked-action-grid { margin-top: 14px; } .locked-action-grid button[disabled] { cursor: not-allowed; opacity: 0.82; } .token-launch-operator-grid, .token-launch-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--eos-space-3); } .token-launch-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-launch-wide-controls { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-launch-operator-grid label, .token-launch-detail-grid label, .token-launch-wide-controls label { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); font-size: var(--eos-text-4); font-weight: 800; padding: 12px; } .token-launch-operator-grid input, .token-launch-operator-grid select, .token-launch-detail-grid input, .token-launch-detail-grid select, .token-launch-wide-controls textarea { min-height: 42px; } .launch-pipeline-progress, .launch-package-review { display: grid; gap: var(--eos-space-3); } .launch-pipeline-summary-row, .launch-pipeline-status-grid, .launch-package-review-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .launch-pipeline-summary-row article, .launch-pipeline-status-grid article, .launch-package-review-grid article { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); padding: 14px; } .launch-pipeline-summary-row span, .launch-pipeline-status-grid span, .launch-package-review-grid span { color: var(--theme-secondary-text); font-size: var(--eos-text-4); font-weight: 900; text-transform: uppercase; } .launch-pipeline-summary-row strong, .launch-pipeline-status-grid strong, .launch-package-review-grid strong { color: var(--theme-primary-text); font-size: var(--eos-text-7); } .launch-pipeline-summary-row small, .launch-pipeline-status-grid small, .launch-package-review-grid small { color: var(--theme-secondary-text); line-height: 1.35; } .launch-step-track { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .launch-step-track article { border: 1px solid var(--theme-border); background: var(--theme-card-background-muted); color: var(--theme-primary-text); min-height: 118px; padding: 12px; } .launch-step-track span { color: var(--theme-secondary-text); display: block; font-size: var(--eos-text-3); font-weight: 900; text-transform: uppercase; } .launch-step-track strong { display: block; margin: 8px 0; } .launch-step-track small { color: var(--theme-secondary-text); } .launch-step-complete { box-shadow: inset 0 0 0 1px var(--theme-success), 0 0 18px rgba(48, 209, 88, 0.12); } .launch-step-current { box-shadow: inset 0 0 0 1px var(--theme-warning), 0 0 18px rgba(245, 158, 11, 0.16); } .launch-step-draft { opacity: 0.86; } .launch-blocker-list { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); padding: 14px; } .launch-blocker-list p, .launch-blocker-list li { color: var(--theme-secondary-text); } .token-logo-slider-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-logo-slider-grid label { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); font-weight: 800; padding: 12px; } .token-logo-slider-grid span { color: var(--theme-cyan); font-weight: 900; } .token-logo-readability-preview { align-items: center; background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: flex; gap: var(--eos-space-3); padding: 14px; } .token-logo-mini-preview { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, rgba(122, 246, 255, 0.72), transparent 38%), radial-gradient(circle at 80% 80%, rgba(255, 62, 214, 0.68), transparent 42%), #07020f; border: 1px solid var(--theme-cyan); box-shadow: 0 0 22px rgba(122, 246, 255, 0.18), inset 0 0 22px rgba(255, 62, 214, 0.12); color: #ffffff; display: grid; flex: 0 0 68px; font-weight: 900; justify-content: center; min-width: 68px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.72); } .token-logo-readability-preview p, .token-logo-readability-preview small { color: var(--theme-secondary-text); margin: 0; } .token-logo-readability-preview strong { color: var(--theme-primary-text); } body.operator-simple-mode .api-connection-shell .advanced-operator-tools:not([open]) { display: block; } body.operator-simple-mode .api-connection-shell .advanced-operator-tools:not([open]) summary { color: var(--theme-secondary-text); } @media (max-width: 760px) { .api-status-grid, .api-lane-grid, .operator-two-gate-grid, .launch-pipeline-summary-row, .launch-pipeline-status-grid, .launch-package-review-grid, .token-intelligence-card-grid, .token-social-kit-grid, .locked-action-grid, .token-launch-draft-status, .logo-studio-choice-grid, .logo-studio-lock-grid, .token-site-preview-grid, .token-launch-operator-grid, .token-launch-detail-grid, .token-launch-wide-controls, .token-logo-slider-grid { grid-template-columns: 1fr; } .token-logo-readability-preview { align-items: flex-start; flex-direction: column; } .operator-two-gate-actions { flex-direction: column; } .operator-two-gate-action { width: 100%; } } /* CEO Operator Product Shell v1 */ .ceo-command-home .ethereal-world-banner { min-height: 240px; } .ceo-command-home .ethereal-world-banner h1 { max-width: 760px; } .ceo-home-action-row { justify-content: center; margin: 18px 0; } .ceo-command-card-grid, .ceo-secondary-card-grid { display: grid; gap: var(--eos-space-3); } .ceo-command-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; } .ceo-secondary-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0; } .ceo-command-card, .ceo-secondary-card, .token-workbench-map article, .token-context-bridge, .market-inspiration-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-cyan) 8%, transparent), transparent 48%), var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); padding: 18px; text-decoration: none; } .ceo-command-card:hover, .ceo-secondary-card:hover { border-color: var(--theme-border-strong); box-shadow: 0 0 26px color-mix(in srgb, var(--theme-cyan) 18%, transparent); transform: translateY(-1px); } .ceo-command-card span, .token-workbench-map span, .token-context-bridge > span, .market-inspiration-heading span { color: var(--theme-pink); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .ceo-command-card strong, .ceo-secondary-card strong, .token-workbench-map strong, .token-context-bridge h3, .market-inspiration-heading h3 { color: var(--theme-primary-text); } .ceo-command-card p, .ceo-secondary-card span, .token-workbench-map p, .token-context-bridge p, .market-inspiration-heading p { color: var(--theme-secondary-text); margin: 0; } .ceo-command-card-continue { border-color: color-mix(in srgb, var(--theme-purple) 64%, var(--theme-border)); } .ceo-command-card-primary { border-color: color-mix(in srgb, var(--theme-cyan) 70%, var(--theme-border)); } .ceo-command-card-safe { border-color: color-mix(in srgb, var(--theme-blue) 70%, var(--theme-border)); } .ceo-command-card-builder { border-color: color-mix(in srgb, var(--theme-pink) 64%, var(--theme-border)); } .ceo-secondary-card-advanced { border-style: dashed; opacity: 0.92; } .token-workbench-map { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-workbench-map article { min-height: 138px; } .token-workbench-map .token-workbench-active { border-color: color-mix(in srgb, var(--theme-warning) 68%, var(--theme-border)); box-shadow: 0 0 20px color-mix(in srgb, var(--theme-warning) 16%, transparent); } .token-workbench-subnav { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-pink) 10%, transparent), transparent 54%), var(--theme-card-background-muted); border: 1px solid var(--theme-border-strong); display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 14px; } .token-workbench-subnav a { align-items: center; display: inline-flex; font-size: var(--eos-text-4); font-weight: 900; justify-content: center; letter-spacing: 0.05em; min-height: 42px; padding: 10px 12px; text-align: center; text-decoration: none; text-transform: uppercase; } .token-two-gate-summary { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .token-two-gate-summary article, .token-workbench-subsection, .token-builder-surface { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-purple) 10%, transparent), transparent 56%), var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-3); padding: 16px; } .token-two-gate-summary span, .token-workbench-section-heading span { color: var(--theme-cyan); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .token-two-gate-summary strong, .token-workbench-section-heading h2, .token-workbench-section-heading h3 { color: var(--theme-primary-text); margin: 0; } .token-two-gate-summary p, .token-workbench-section-heading p { color: var(--theme-secondary-text); margin: 0; } .token-workbench-section-heading { background: linear-gradient(90deg, color-mix(in srgb, var(--theme-cyan) 12%, transparent), transparent 68%), transparent; border-left: 3px solid color-mix(in srgb, var(--theme-cyan) 72%, var(--theme-border)); display: grid; gap: var(--eos-space-2); padding: 12px 0 12px 16px; } .token-workbench-subsection > label { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); font-size: var(--eos-text-4); font-weight: 800; padding: 12px; } .token-workbench-subsection textarea { min-height: 92px; } .token-context-bridge-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .token-context-status-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); } .token-context-status-grid article { border: 1px solid var(--theme-border); display: grid; gap: var(--eos-space-1); padding: 12px; } .token-context-status-grid small { color: var(--theme-secondary-text); } .market-inspiration-panel { margin: 14px 0; } .market-inspiration-heading { display: grid; gap: var(--eos-space-2); } .token-color-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(7, minmax(0, 1fr)); } .token-color-grid label, .market-inspiration-panel > label { background: var(--theme-card-background-muted); border: 1px solid var(--theme-border); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); font-size: var(--eos-text-4); font-weight: 800; padding: 12px; } .token-color-grid input[type="color"] { min-height: 44px; padding: 2px; } .token-color-grid .checkbox-line { align-items: center; grid-auto-flow: column; justify-content: start; } .token-color-grid .checkbox-line input { min-height: auto; } .action-primary, .action-continue, .action-safe, .action-review, .action-ready, .action-attention, .action-danger, .action-advanced { border-radius: var(--eos-radius-1); } body.operator-simple-mode .button-row .action-primary, body.operator-simple-mode .button-row .cta-button.action-primary, body.operator-advanced-mode .button-row .action-primary, body.operator-advanced-mode .button-row .cta-button.action-primary, .action-primary { background: linear-gradient(135deg, #00f5ff, #7cc8ff) !important; border-color: color-mix(in srgb, var(--theme-cyan) 78%, var(--theme-border)) !important; color: #020204 !important; } body.operator-simple-mode .button-row .action-continue, body.operator-simple-mode .button-row .cta-button.action-continue, body.operator-advanced-mode .button-row .action-continue, body.operator-advanced-mode .button-row .cta-button.action-continue, .action-continue { background: linear-gradient(135deg, #b857ff, #ff4be1) !important; border-color: color-mix(in srgb, var(--theme-purple) 74%, var(--theme-border)) !important; color: #050208 !important; } body.operator-simple-mode .button-row .action-safe, body.operator-simple-mode .button-row .cta-button.action-safe, body.operator-advanced-mode .button-row .action-safe, body.operator-advanced-mode .button-row .cta-button.action-safe, .action-safe { background: linear-gradient(135deg, #0ea5e9, #7cc8ff) !important; border-color: color-mix(in srgb, var(--theme-blue) 74%, var(--theme-border)) !important; color: #020204 !important; } body.operator-simple-mode .button-row .action-review, body.operator-simple-mode .button-row .cta-button.action-review, body.operator-advanced-mode .button-row .action-review, body.operator-advanced-mode .button-row .cta-button.action-review, .action-review { background: color-mix(in srgb, var(--theme-card-background-muted) 82%, transparent) !important; border-color: var(--theme-border) !important; color: var(--theme-primary-text) !important; } body.operator-simple-mode .button-row .action-ready, body.operator-advanced-mode .button-row .action-ready, .action-ready { background: linear-gradient(135deg, #31f081, #b8ffd4) !important; border-color: color-mix(in srgb, var(--theme-success) 74%, var(--theme-border)) !important; color: #021007 !important; } body.operator-simple-mode .button-row .action-attention, body.operator-advanced-mode .button-row .action-attention, .action-attention { background: linear-gradient(135deg, #f7b733, #ffe7a6) !important; border-color: color-mix(in srgb, var(--theme-warning) 74%, var(--theme-border)) !important; color: #1a1100 !important; } body.operator-simple-mode .button-row .action-danger, body.operator-advanced-mode .button-row .action-danger, .action-danger { background: linear-gradient(135deg, #ff5c78, #ff9caf) !important; border-color: color-mix(in srgb, var(--theme-danger) 74%, var(--theme-border)) !important; color: #1a0206 !important; } body.operator-simple-mode .button-row .action-advanced, body.operator-advanced-mode .button-row .action-advanced, .action-advanced { background: transparent !important; border-color: color-mix(in srgb, var(--theme-muted-text) 52%, var(--theme-border)) !important; color: var(--theme-secondary-text) !important; } @media (max-width: 980px) { .ceo-command-card-grid, .ceo-secondary-card-grid, .token-workbench-map, .token-workbench-subnav, .token-two-gate-summary, .token-context-bridge-grid, .token-context-status-grid, .token-color-grid, .kraken-owner-review-map, .kraken-owner-review-gates { grid-template-columns: 1fr; } } /* Product shell top bar: compact enough for laptop widths without clipping labels. */ body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { grid-template-columns: auto minmax(132px, 158px) minmax(104px, 126px) minmax(0, 1fr) !important; gap: var(--eos-space-2) !important; padding: 8px 10px !important; } body.operator-simple-mode .operator-dapp-wordmark, body.operator-advanced-mode .operator-dapp-wordmark { font-size: var(--eos-text-4) !important; letter-spacing: 0.46em !important; } body.operator-simple-mode .operator-mode-brand, body.operator-advanced-mode .operator-mode-brand { min-width: 132px !important; } body.operator-simple-mode .operator-mode-brand strong, body.operator-advanced-mode .operator-mode-brand strong { font-size: var(--eos-text-4) !important; max-width: 104px !important; } body.operator-simple-mode .operator-dapp-safety-strip, body.operator-advanced-mode .operator-dapp-safety-strip { min-width: 104px !important; padding-inline: 6px !important; } body.operator-simple-mode .operator-dapp-safety-strip span, body.operator-simple-mode .operator-dapp-safety-strip strong, body.operator-advanced-mode .operator-dapp-safety-strip span, body.operator-advanced-mode .operator-dapp-safety-strip strong { font-size: var(--eos-text-1) !important; } body.operator-simple-mode .operator-mode-actions, body.operator-advanced-mode .operator-mode-actions { flex-wrap: nowrap !important; gap: var(--eos-space-1) !important; justify-content: flex-end !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; padding: 2px 2px 8px !important; scrollbar-width: thin; } body.operator-simple-mode .operator-top-dropdown, body.operator-simple-mode .operator-theme-dropdown, body.operator-simple-mode .operator-top-training-dropdown, body.operator-simple-mode .operator-mode-toggle, body.operator-simple-mode .operator-black-hole-logout, body.operator-advanced-mode .operator-top-dropdown, body.operator-advanced-mode .operator-theme-dropdown, body.operator-advanced-mode .operator-top-training-dropdown, body.operator-advanced-mode .operator-mode-toggle, body.operator-advanced-mode .operator-black-hole-logout { flex: 0 0 auto !important; } body.operator-simple-mode .operator-top-control, body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-top-control, body.operator-advanced-mode .operator-mode-toggle { font-size: var(--eos-text-1) !important; height: 34px !important; min-height: 34px !important; min-width: 58px !important; padding: 0 7px !important; } body.operator-simple-mode .operator-trading-dropdown .operator-top-control, body.operator-advanced-mode .operator-trading-dropdown .operator-top-control { min-width: 64px !important; } body.operator-simple-mode .operator-social-dropdown .operator-top-control, body.operator-advanced-mode .operator-social-dropdown .operator-top-control { min-width: 66px !important; } body.operator-simple-mode .operator-advanced-dropdown .operator-top-control, body.operator-advanced-mode .operator-advanced-dropdown .operator-top-control { min-width: 76px !important; } body.operator-simple-mode .operator-top-training-dropdown .operator-top-control, body.operator-advanced-mode .operator-top-training-dropdown .operator-top-control { min-width: 48px !important; } body.operator-simple-mode .operator-theme-dropdown .operator-top-control, body.operator-advanced-mode .operator-theme-dropdown .operator-top-control { min-width: 58px !important; } body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-mode-toggle { min-width: 66px !important; } body.operator-simple-mode .operator-black-hole-logout, body.operator-advanced-mode .operator-black-hole-logout { height: 38px !important; min-width: 42px !important; } body.operator-simple-mode .operator-black-hole-icon, body.operator-advanced-mode .operator-black-hole-icon { height: 20px !important; width: 20px !important; } body.operator-simple-mode .operator-black-hole-label, body.operator-advanced-mode .operator-black-hole-label { font-size: var(--eos-text-1) !important; } @media (max-width: 980px) { body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { grid-template-columns: 1fr !important; } body.operator-simple-mode .operator-mode-actions, body.operator-advanced-mode .operator-mode-actions { justify-content: flex-start !important; width: 100% !important; } } @media (min-width: 980px) { body.operator-simple-mode main.container, body.operator-simple-mode > .container, body.operator-simple-mode .home-shell { box-sizing: border-box !important; max-width: calc(100vw - 48px) !important; width: calc(100vw - 48px) !important; } body.operator-simple-mode .simple-operator-workspace { width: 100% !important; } } /* CEO Product Shell v2: six-category top navigation and collapsed legacy side rail. */ body.operator-simple-mode > nav { display: none !important; } body.operator-simple-mode [hidden], body.operator-advanced-mode [hidden] { display: none !important; } body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { grid-template-columns: auto minmax(138px, 176px) minmax(104px, 132px) minmax(0, 1fr) !important; padding: 10px 14px !important; } body.operator-simple-mode .operator-mode-actions, body.operator-advanced-mode .operator-mode-actions { align-items: center !important; gap: var(--eos-space-2) !important; } body.operator-simple-mode .operator-product-category .operator-top-control, body.operator-advanced-mode .operator-product-category .operator-top-control { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(9, 7, 16, 0.92) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent) !important; border-radius: var(--eos-radius-3) !important; box-shadow: inset 0 -1px 0 rgba(0, 245, 255, 0.08) !important; color: var(--theme-primary-text) !important; font-size: var(--eos-text-3) !important; font-weight: 850 !important; letter-spacing: 0.03em !important; min-width: 118px !important; text-transform: none !important; } body.operator-simple-mode .operator-product-category.operator-top-dropdown-active .operator-top-control, body.operator-simple-mode .operator-product-category .operator-top-control:hover, body.operator-advanced-mode .operator-product-category.operator-top-dropdown-active .operator-top-control, body.operator-advanced-mode .operator-product-category .operator-top-control:hover { background: linear-gradient(180deg, rgba(0, 245, 255, 0.12), rgba(255, 43, 214, 0.08)), rgba(13, 8, 23, 0.98) !important; border-color: color-mix(in srgb, var(--theme-cyan) 58%, var(--theme-border)) !important; box-shadow: inset 0 -2px 0 var(--theme-cyan), 0 0 16px rgba(0, 245, 255, 0.18) !important; color: var(--theme-cyan) !important; } body.operator-simple-mode .operator-utility-dropdown .operator-top-control, body.operator-simple-mode .operator-top-training-dropdown .operator-top-control, body.operator-simple-mode .operator-theme-dropdown .operator-top-control, body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-utility-dropdown .operator-top-control, body.operator-advanced-mode .operator-top-training-dropdown .operator-top-control, body.operator-advanced-mode .operator-theme-dropdown .operator-top-control, body.operator-advanced-mode .operator-mode-toggle { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid color-mix(in srgb, var(--theme-muted-text) 42%, var(--theme-border)) !important; border-radius: var(--eos-radius-3) !important; color: var(--theme-secondary-text) !important; font-size: var(--eos-text-1) !important; font-weight: 800 !important; min-width: 68px !important; text-transform: none !important; } body.operator-simple-mode .operator-mode-toggle.operator-mode-active, body.operator-advanced-mode .operator-mode-toggle.operator-mode-active { background: color-mix(in srgb, var(--theme-cyan) 18%, var(--theme-card-background)) !important; border-color: var(--theme-cyan) !important; color: var(--theme-cyan) !important; } .ceo-product-command-screen, .api-product-board, .trading-bot-creator, .dapp-creator-command, .node-reward-planner, .security-command-center, .social-media-command { display: grid; gap: var(--eos-space-4); } .model-panel, section[id] { scroll-margin-top: 96px; } .ceo-product-card-grid, .api-product-board-grid, .bot-creator-grid, .dapp-template-grid, .node-reward-grid, .security-command-grid, .social-media-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ceo-product-card, .api-provider-row, .bot-output-card, .dapp-plan-card, .node-reward-result-card, .security-command-card, .social-media-card { background: var(--theme-card-background); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-2); padding: 16px; text-decoration: none; } .ceo-product-card strong, .api-provider-row strong, .bot-output-card strong, .dapp-plan-card strong, .node-reward-result-card strong, .security-command-card strong, .social-media-card strong { color: var(--theme-primary-text) !important; font-size: var(--eos-text-6); } .ceo-product-card span, .api-provider-row span, .bot-output-card span, .dapp-plan-card span, .node-reward-result-card span, .security-command-card span, .social-media-card span { color: var(--theme-secondary-text) !important; } .api-product-board-columns { display: grid; gap: var(--eos-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } .api-provider-list { display: grid; gap: var(--eos-space-2); } .api-provider-row { align-items: center; grid-template-columns: auto minmax(0, 1fr) auto; } .api-provider-row .provider-status-dot { border-radius: var(--eos-radius-pill); display: inline-block; height: 12px; width: 12px; } .provider-status-connected .provider-status-dot, .provider-status-ready .provider-status-dot { background: var(--theme-success); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-success) 70%, transparent); } .provider-status-partial .provider-status-dot, .provider-status-started .provider-status-dot, .provider-status-needs-key .provider-status-dot { background: var(--theme-warning); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-warning) 70%, transparent); } .provider-status-read-only .provider-status-dot { background: var(--theme-blue); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-blue) 70%, transparent); } .provider-status-quote-only .provider-status-dot { background: var(--theme-purple); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-purple) 70%, transparent); } .provider-status-blocked .provider-status-dot, .provider-status-not-started .provider-status-dot { background: var(--theme-danger); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-danger) 70%, transparent); } .provider-status-planned .provider-status-dot, .provider-status-locked .provider-status-dot { background: var(--theme-muted-text); } .api-provider-detail { margin-top: 10px; } .api-provider-detail summary { cursor: pointer; font-weight: 850; } .api-board-only-shell, .api-provider-detail-shell { display: grid; gap: var(--eos-space-5); } .api-board-header, .api-provider-detail-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-panel-background) 88%, var(--theme-purple)), color-mix(in srgb, var(--theme-card-background) 92%, var(--theme-cyan))), var(--theme-panel-background); border: 1px solid color-mix(in srgb, var(--theme-cyan) 28%, var(--theme-border)); border-radius: var(--eos-radius-3); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26); display: grid; gap: var(--eos-space-2); padding: 24px; } .api-board-header span, .api-provider-detail-hero span { color: var(--theme-cyan); font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .api-board-header h1, .api-provider-detail-hero h1 { color: var(--theme-primary-text); font-size: var(--eos-display-3); line-height: 1; margin: 0; } .api-provider-title-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-3); } .api-provider-hero-grid { align-items: start; display: grid; gap: var(--eos-space-4); grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); } .api-provider-hero-main { display: grid; gap: var(--eos-space-3); min-width: 0; } .api-provider-title-row h1 { min-width: 0; } .api-detail-pill-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .api-provider-detail-badge { flex: 0 0 auto; height: 48px; width: 48px; } .api-board-header p, .api-provider-detail-hero p { color: var(--theme-secondary-text); font-size: var(--eos-text-6); margin: 0; max-width: 680px; } .api-board-main { display: grid; gap: var(--eos-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } .api-board-column { background: color-mix(in srgb, var(--theme-panel-background) 86%, transparent); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); align-content: start; align-self: start; display: grid; gap: var(--eos-space-3); padding: 16px; } .api-board-column h2 { color: var(--theme-primary-text); font-size: var(--eos-text-7); margin: 0; } .api-board-list { align-content: start; align-items: stretch; display: grid; gap: var(--eos-space-2); } .api-board-provider-link { align-items: start; background: color-mix(in srgb, var(--theme-card-background) 88%, transparent); border: 1px solid color-mix(in srgb, var(--theme-border) 86%, transparent); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-1) var(--eos-space-3); grid-template-columns: 4px 36px minmax(0, 1fr) auto; min-height: 48px; overflow: hidden; padding: 9px 12px 9px 0; text-decoration: none; } .api-board-provider-link:hover, .api-board-provider-link:focus-visible { border-color: color-mix(in srgb, var(--theme-cyan) 52%, var(--theme-border)); outline: none; transform: translateY(-1px); } .api-board-provider-link strong { color: var(--theme-primary-text); font-size: var(--eos-text-6); line-height: 1.15; } .api-board-layer-summary { color: var(--theme-muted-text); font-size: var(--eos-text-3); font-weight: 750; grid-column: 3; line-height: 1.3; } .api-board-status-label { align-items: center; color: var(--theme-secondary-text); display: inline-flex; font-size: var(--eos-text-4); font-weight: 850; gap: var(--eos-space-2); grid-column: 4; grid-row: 1 / span 2; justify-self: end; margin-top: 1px; white-space: nowrap; } .api-board-status-rail { align-self: stretch; border-radius: var(--eos-radius-3) 0 0 var(--eos-radius-3); display: block; grid-row: 1 / span 2; min-height: 100%; } .api-provider-badge { align-items: center; border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent); border-radius: var(--eos-radius-3); color: #ffffff; display: inline-flex; font-size: var(--eos-text-4); font-weight: 950; height: 34px; justify-content: center; line-height: 1; width: 34px; } .api-provider-badge-blue { background: linear-gradient(135deg, #235cff, #2fb8ff); } .api-provider-badge-cyan { background: linear-gradient(135deg, #00a7c7, #39f0ff); } .api-provider-badge-gold { background: linear-gradient(135deg, #9a6a00, #f2c94c); color: #15100a; } .api-provider-badge-gray { background: linear-gradient(135deg, #2a3142, #7d879a); } .api-provider-badge-green, .api-provider-badge-lime { background: linear-gradient(135deg, #00835d, #58f2b0); color: #061a12; } .api-provider-badge-orange { background: linear-gradient(135deg, #b05200, #ff9f43); color: #160b03; } .api-provider-badge-pink { background: linear-gradient(135deg, #8d2a85, #ff5edb); } .api-provider-badge-purple { background: linear-gradient(135deg, #5d31d8, #bc75ff); } .api-provider-badge-red { background: linear-gradient(135deg, #9a1c2f, #ff5c7a); } .api-board-status-dot { border-radius: var(--eos-radius-pill); display: inline-block; height: 11px; width: 11px; } .api-board-status-connected .api-board-status-dot, .api-detail-status-connected .api-board-status-dot { background: var(--theme-success); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-success) 72%, transparent); } .api-board-status-connected .api-board-status-rail { background: var(--theme-success); } .api-board-status-started .api-board-status-dot, .api-detail-status-started .api-board-status-dot { background: var(--theme-warning); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-warning) 72%, transparent); } .api-board-status-started .api-board-status-rail { background: var(--theme-warning); } .api-board-status-not-started .api-board-status-dot, .api-detail-status-not-started .api-board-status-dot { background: var(--theme-danger); box-shadow: 0 0 14px color-mix(in srgb, var(--theme-danger) 72%, transparent); } .api-board-status-not-started .api-board-status-rail { background: var(--theme-danger); } .api-board-advanced, .api-provider-advanced-detail { margin-top: 0; } .api-provider-back-link { color: var(--theme-secondary-text); font-size: var(--eos-text-5); font-weight: 850; text-decoration: none; } .api-provider-back-link:hover, .api-provider-back-link:focus-visible { color: var(--theme-cyan); } .api-detail-status-pill { align-items: center; background: color-mix(in srgb, var(--theme-card-background) 88%, transparent); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-pill); color: var(--theme-primary-text); display: inline-flex; gap: var(--eos-space-2); justify-self: start; padding: 8px 12px; } .api-provider-progress-card { background: color-mix(in srgb, var(--theme-card-background) 78%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 32%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 14px; } .api-provider-progress-card strong { color: var(--theme-primary-text); font-size: var(--eos-display-3); line-height: 0.95; } .api-provider-progress-card span, .api-provider-progress-card small { color: var(--theme-secondary-text); font-size: var(--eos-text-5); font-weight: 760; letter-spacing: 0; line-height: 1.4; text-transform: none; } .api-provider-progress-track { background: color-mix(in srgb, var(--theme-border) 62%, transparent); border-radius: var(--eos-radius-pill); height: 9px; overflow: hidden; } .api-provider-progress-track span { background: linear-gradient(90deg, var(--theme-cyan), var(--theme-purple)); border-radius: inherit; display: block; height: 100%; transition: width 180ms ease; width: 0%; } .api-provider-website-link { align-items: center; background: color-mix(in srgb, var(--theme-cyan) 13%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 42%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); display: inline-flex; font-size: var(--eos-text-5); font-weight: 900; justify-content: center; min-height: 42px; padding: 8px 12px; text-decoration: none; } .api-provider-website-link:hover, .api-provider-website-link:focus-visible { border-color: var(--theme-cyan); box-shadow: 0 0 18px color-mix(in srgb, var(--theme-cyan) 22%, transparent); outline: none; } .api-provider-step-list { color: var(--theme-secondary-text); display: grid; gap: var(--eos-space-2); margin: 0; padding-left: 22px; } .api-provider-step-list li { padding-left: 4px; } .api-provider-section { display: grid; gap: var(--eos-space-3); } .api-provider-section h2 { color: var(--theme-primary-text); font-size: var(--eos-text-7); margin: 0; } .api-provider-owner-copy, .api-provider-group-copy, .api-provider-next-step-copy, .api-provider-secret-reference-panel p { color: var(--theme-secondary-text); line-height: 1.6; margin: 0; } .api-provider-next-step-copy { background: color-mix(in srgb, var(--theme-cyan) 9%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 28%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); font-weight: 850; padding: 10px 12px; } .api-provider-checklist { list-style: decimal; } .api-provider-checklist .api-provider-next-step { background: color-mix(in srgb, var(--theme-warning) 9%, transparent); border: 1px solid color-mix(in srgb, var(--theme-warning) 32%, var(--theme-border)); border-radius: var(--eos-radius-3); padding: 8px; } .api-provider-step-check { align-items: flex-start; color: var(--theme-secondary-text); cursor: pointer; display: grid; gap: var(--eos-space-2); grid-template-columns: 18px minmax(0, 1fr); } .api-provider-step-check input { accent-color: var(--theme-cyan); margin-top: 3px; } .api-provider-step-check small { color: var(--theme-muted-text); display: block; font-size: var(--eos-text-4); margin-top: 3px; } .api-provider-inline-form { align-items: center; display: grid; gap: var(--eos-space-2); grid-template-columns: minmax(0, 1fr) auto; } .api-provider-inline-form input { min-height: 44px; } .api-provider-safe-state { background: color-mix(in srgb, var(--theme-card-background) 82%, var(--theme-success)); border-color: color-mix(in srgb, var(--theme-success) 30%, var(--theme-border)); } .api-provider-safe-state p { color: var(--theme-primary-text); font-weight: 800; margin: 0; } .api-provider-completion-section { background: color-mix(in srgb, var(--theme-card-background) 86%, var(--theme-cyan)); border-color: color-mix(in srgb, var(--theme-cyan) 36%, var(--theme-border)); } .api-provider-completion-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); } .api-provider-completion-card { background: color-mix(in srgb, var(--theme-card-background) 88%, transparent); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); min-height: 124px; padding: 12px; } .api-provider-completion-card span { color: var(--theme-muted-text); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .api-provider-completion-card strong { color: var(--theme-primary-text); font-size: var(--eos-text-8); line-height: 1.15; } .api-provider-completion-card p { color: var(--theme-secondary-text); font-size: var(--eos-text-5); line-height: 1.45; margin: 0; } .api-provider-completion-ready { border-color: color-mix(in srgb, var(--theme-success) 58%, var(--theme-border)); } .api-provider-completion-ready strong { color: var(--theme-success); } .api-provider-completion-next { border-color: color-mix(in srgb, var(--theme-warning) 58%, var(--theme-border)); } .api-provider-completion-next strong { color: var(--theme-warning); } .api-provider-layered-status-section { background: color-mix(in srgb, var(--theme-card-background) 88%, var(--theme-cyan)); border-color: color-mix(in srgb, var(--theme-cyan) 34%, var(--theme-border)); } .api-provider-layered-status-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .api-provider-layer-card { background: color-mix(in srgb, var(--theme-card-background) 90%, transparent); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 12px; } .api-provider-layer-card span { color: var(--theme-muted-text); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .api-provider-layer-card strong { color: var(--theme-primary-text); font-size: var(--eos-text-6); } .api-provider-layer-card p { color: var(--theme-secondary-text); font-size: var(--eos-text-5); line-height: 1.45; margin: 0; } .api-provider-layer-ready { border-color: color-mix(in srgb, var(--theme-success) 55%, var(--theme-border)); } .api-provider-layer-ready strong { color: var(--theme-success); } .api-provider-layer-pending { border-color: color-mix(in srgb, var(--theme-warning) 55%, var(--theme-border)); } .api-provider-layer-pending strong { color: var(--theme-warning); } .api-provider-layer-needs-fix { border-color: color-mix(in srgb, var(--theme-danger) 58%, var(--theme-border)); } .api-provider-layer-needs-fix strong { color: var(--theme-danger); } .api-provider-layer-neutral { border-color: color-mix(in srgb, var(--theme-cyan) 36%, var(--theme-border)); } .api-provider-credential-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); } .api-provider-credential-grid label { align-self: center; color: var(--theme-secondary-text); font-weight: 850; } .api-provider-credential-grid input, .api-provider-credential-grid textarea { min-height: 44px; } .api-provider-credential-grid textarea { resize: vertical; } .api-provider-confirm-line { background: color-mix(in srgb, var(--theme-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--theme-warning) 30%, var(--theme-border)); border-radius: var(--eos-radius-3); padding: 10px; } .api-provider-kraken-permission-note, .api-provider-repair-panel { background: color-mix(in srgb, var(--theme-warning) 11%, transparent); border-color: color-mix(in srgb, var(--theme-warning) 36%, var(--theme-border)); } .api-provider-kraken-permission-note { border: 1px solid color-mix(in srgb, var(--theme-warning) 36%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); display: grid; gap: var(--eos-space-1); line-height: 1.5; padding: 10px 12px; } .api-provider-kraken-permission-note span, .api-provider-repair-panel p { color: var(--theme-secondary-text); margin: 0; } .api-provider-action-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .api-provider-visual-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .api-provider-visual-card { background: color-mix(in srgb, var(--theme-card-background) 86%, transparent); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); cursor: pointer; display: grid; gap: var(--eos-space-2); padding: 12px; text-align: left; width: 100%; } .api-provider-visual-card:hover, .api-provider-visual-card:focus-visible { border-color: color-mix(in srgb, var(--theme-cyan) 58%, var(--theme-border)); outline: none; transform: translateY(-1px); } .api-provider-visual-card strong { color: var(--theme-primary-text); font-size: var(--eos-text-6); } .api-provider-visual-card p { color: var(--theme-secondary-text); font-size: var(--eos-text-5); line-height: 1.5; margin: 0; } .api-provider-browser-mock { background: #0d1020; border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, var(--theme-border)); border-radius: var(--eos-radius-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); overflow: hidden; } .api-provider-browser-bar { align-items: center; background: #161a2d; display: grid; gap: var(--eos-space-1); grid-template-columns: 9px 9px 9px minmax(0, 1fr); padding: 7px 9px; } .api-provider-browser-bar span { background: color-mix(in srgb, var(--theme-muted-text) 80%, transparent); border-radius: var(--eos-radius-pill); display: block; height: 8px; width: 8px; } .api-provider-browser-bar strong { background: #090d19; border-radius: var(--eos-radius-pill); color: var(--theme-secondary-text); font-size: var(--eos-text-1); font-weight: 800; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; } .api-provider-browser-body { display: grid; gap: var(--eos-space-2); min-height: 150px; padding: 12px; } .api-provider-browser-nav { display: grid; gap: var(--eos-space-1); grid-template-columns: 1fr repeat(3, auto); } .api-provider-browser-nav span { background: color-mix(in srgb, var(--theme-border) 50%, transparent); border-radius: var(--eos-radius-pill); color: var(--theme-muted-text); font-size: var(--eos-text-1); padding: 5px 7px; } .api-provider-browser-content { align-items: center; background: radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--theme-cyan) 18%, transparent), transparent 34%), color-mix(in srgb, var(--theme-panel-background) 80%, #12142a); border: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); justify-items: center; min-height: 92px; overflow: hidden; padding: 16px; position: relative; } .api-provider-browser-heading { color: var(--theme-muted-text); font-size: var(--eos-text-3); font-weight: 900; text-transform: uppercase; } .api-provider-visual-target { background: linear-gradient(135deg, var(--theme-cyan), var(--theme-purple)); border-radius: var(--eos-radius-pill); color: #06111d; font-size: var(--eos-text-4); font-weight: 950; min-width: 120px; padding: 10px 14px; position: relative; text-align: center; z-index: 2; } .api-provider-visual-circle { border: 3px solid #ff4fa3; border-radius: var(--eos-radius-pill); box-shadow: 0 0 22px rgba(255, 79, 163, 0.48); height: 58px; left: 50%; pointer-events: none; position: absolute; top: 55%; transform: translate(-50%, -50%); width: min(74%, 190px); z-index: 3; } .api-provider-visual-modal { align-items: center; background: rgba(0, 0, 0, 0.72); display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 1200; } .api-provider-visual-modal[hidden] { display: none; } .api-provider-visual-modal-card { background: var(--theme-panel-background); border: 1px solid color-mix(in srgb, var(--theme-cyan) 36%, var(--theme-border)); border-radius: var(--eos-radius-3); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48); display: grid; gap: var(--eos-space-3); max-width: min(720px, 94vw); padding: 16px; } .api-provider-visual-card-large { cursor: default; max-width: 680px; } .api-provider-visual-card-large .api-provider-browser-body { min-height: 260px; } @media (max-width: 820px) { .api-board-main { grid-template-columns: 1fr; } .api-provider-hero-grid { grid-template-columns: 1fr; } .api-board-provider-link { grid-template-columns: 4px 34px minmax(0, 1fr); } .api-board-status-label { grid-column: 3; grid-row: auto; justify-self: start; } .api-board-layer-summary { grid-column: 3; } .api-provider-inline-form { grid-template-columns: 1fr; } .api-provider-credential-grid { grid-template-columns: 1fr; } .api-provider-completion-grid { grid-template-columns: 1fr; } } .api-detail-grid, .bot-structured-grid, .dapp-output-grid, .node-reward-output-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .bot-creator-main-box textarea, .dapp-creator-main-box textarea { min-height: 150px; } .trading-center-hero { align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--theme-panel-background) 88%, #21004f), color-mix(in srgb, var(--theme-card-background) 86%, #004a62)), var(--theme-panel-background); border: 1px solid color-mix(in srgb, var(--theme-cyan) 34%, var(--theme-border)); border-radius: var(--eos-radius-3); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34); display: grid; gap: var(--eos-space-5); grid-template-columns: minmax(0, 1fr) minmax(260px, 390px); margin-bottom: 18px; overflow: hidden; padding: 28px; position: relative; } .trading-page-shell { display: grid; gap: var(--eos-space-4); } .trading-page-shell > #trading-center-hero { order: 1; } .trading-page-shell > #trading-owner-flow { order: 2; } .trading-page-shell > #trading-bot-creator { order: 3; } .trading-page-shell > #basic-trading-algo-starters { order: 4; } .trading-page-shell > #trading-auth-proof-banner { order: 30; } .trading-page-shell > .advanced-operator-tools, .trading-page-shell > #trading-auth-proof-banner, .trading-page-shell > #rebalance-arbitrage-template, .trading-page-shell > #trading-wallet-funding-context, .trading-page-shell > #live-trading-readiness-spine, .trading-page-shell > #strategy-entry, .trading-page-shell > #exchange-connector-manager, .trading-page-shell > #safe-paper-simulator, .trading-page-shell > #exchange-connectors, .trading-page-shell > #research-suite, .trading-page-shell > #risk-management, .trading-page-shell > #automation-safety, .trading-page-shell > #risk-profile-configuration, .trading-page-shell > #rebalance-batch, .trading-page-shell > #bot-automation, .trading-page-shell > #market-data, .trading-page-shell > #market-imports { order: 30; } .trading-page-shell .advanced-operator-tools { display: none !important; } .trading-page-shell #trading-auth-proof-banner { display: none !important; } body.operator-advanced-mode .trading-page-shell.trading-show-advanced .advanced-operator-tools, body:not(.operator-simple-mode) .trading-page-shell.trading-show-advanced .advanced-operator-tools { display: grid !important; } body.operator-advanced-mode .trading-page-shell.trading-show-advanced #trading-auth-proof-banner, body:not(.operator-simple-mode) .trading-page-shell.trading-show-advanced #trading-auth-proof-banner { display: flex !important; } body.operator-advanced-mode .trading-page-shell.trading-show-advanced button.advanced-operator-tools, body.operator-advanced-mode .trading-page-shell.trading-show-advanced a.advanced-operator-tools, body:not(.operator-simple-mode) .trading-page-shell.trading-show-advanced button.advanced-operator-tools, body:not(.operator-simple-mode) .trading-page-shell.trading-show-advanced a.advanced-operator-tools { display: inline-flex !important; } .trading-owner-flow { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); } .trading-owner-flow article { background: color-mix(in srgb, var(--theme-card-background) 86%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); min-height: 104px; padding: 14px; } .trading-owner-flow article > span { align-items: center; background: color-mix(in srgb, var(--theme-cyan) 28%, var(--theme-panel-background)); border: 1px solid color-mix(in srgb, var(--theme-cyan) 50%, var(--theme-border)); border-radius: var(--eos-radius-pill); color: var(--theme-primary-text); display: inline-flex; font-size: var(--eos-text-4); font-weight: 900; height: 28px; justify-content: center; width: 28px; } .trading-owner-flow small { color: var(--theme-secondary-text); line-height: 1.4; } .trading-center-hero-copy { display: grid; gap: var(--eos-space-2); position: relative; z-index: 1; } .trading-center-hero-copy span, .trading-api-readiness-strip > div > span { color: var(--theme-cyan); font-size: var(--eos-text-4); font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .trading-center-hero h1 { color: var(--theme-primary-text); font-size: var(--eos-display-3); line-height: 1.02; margin: 0; } .trading-center-hero p { color: var(--theme-secondary-text); font-size: var(--eos-text-7); line-height: 1.55; margin: 0; max-width: 720px; } .trading-primary-actions { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); margin-top: 8px; } .trading-primary-actions button, .trading-primary-actions .cta-button { min-height: 44px; } .trading-engine-visual { aspect-ratio: 1.28; border: 1px solid color-mix(in srgb, var(--theme-purple) 36%, var(--theme-border)); border-radius: var(--eos-radius-3); background: linear-gradient(90deg, color-mix(in srgb, var(--theme-cyan) 16%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in srgb, var(--theme-pink) 10%, transparent) 1px, transparent 1px), color-mix(in srgb, var(--theme-card-background) 82%, transparent); background-size: 26px 26px; min-height: 240px; overflow: hidden; position: relative; } .trading-engine-core { align-items: center; border: 1px solid color-mix(in srgb, var(--theme-cyan) 52%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; height: 118px; inset: 50% auto auto 50%; justify-items: center; position: absolute; transform: translate(-50%, -50%); width: 150px; } .trading-engine-core strong { color: var(--theme-primary-text); font-size: var(--eos-text-9); letter-spacing: 0; z-index: 1; } .trading-engine-core span { border: 1px solid color-mix(in srgb, var(--theme-cyan) 58%, transparent); border-radius: var(--eos-radius-3); inset: 12px; position: absolute; } .trading-engine-core span:nth-child(2) { border-color: color-mix(in srgb, var(--theme-purple) 58%, transparent); inset: 27px; } .trading-engine-core span:nth-child(3) { border-color: color-mix(in srgb, var(--theme-pink) 52%, transparent); inset: 42px; } .trading-engine-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(6, 1fr); inset: 18px; position: absolute; } .trading-engine-grid i { border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, transparent); border-radius: var(--eos-radius-3); min-height: 28px; } .trading-engine-signal { background: linear-gradient(90deg, transparent, var(--theme-cyan), transparent); height: 2px; position: absolute; right: 22px; width: 72%; } .trading-engine-signal.signal-a { top: 28%; } .trading-engine-signal.signal-b { background: linear-gradient(90deg, transparent, var(--theme-pink), transparent); top: 51%; width: 62%; } .trading-engine-signal.signal-c { background: linear-gradient(90deg, transparent, var(--theme-purple), transparent); top: 74%; width: 68%; } .trading-api-readiness-strip { align-items: center; background: color-mix(in srgb, var(--theme-panel-background) 86%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) auto; margin-bottom: 18px; padding: 14px; } .trading-api-readiness-strip > div:first-child { display: grid; gap: var(--eos-space-1); } .trading-api-readiness-strip strong { color: var(--theme-primary-text); } .trading-api-strip-grid { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(6, minmax(0, 1fr)); } .trading-api-strip-grid article { border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-1); min-height: 58px; padding: 9px 10px; } .trading-api-strip-grid span { font-size: var(--eos-text-3); font-weight: 850; } .trading-api-strip-grid strong { font-size: var(--eos-text-5); } .basic-trading-algo-starters { display: grid; gap: var(--eos-space-3); } .basic-algo-starter-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); } .basic-algo-starter-card { align-items: start; border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); min-height: 118px; padding: 14px; text-align: left; } .basic-algo-starter-card strong { font-size: var(--eos-text-6); } .basic-algo-starter-card span { color: var(--theme-secondary-text); font-size: var(--eos-text-4); line-height: 1.45; } .trading-center-builder-form { display: grid; gap: var(--eos-space-4); } .trading-algorithm-columns { align-items: start; display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } .trading-algorithm-column { background: color-mix(in srgb, var(--theme-card-background) 88%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); padding: 16px; } .trading-algorithm-column.is-active { border-color: color-mix(in srgb, var(--theme-cyan) 46%, var(--theme-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-cyan) 16%, transparent); } .trading-algorithm-column fieldset { border: 0; display: grid; gap: var(--eos-space-3); margin: 0; padding: 0; } .trading-algorithm-column.strategy-column-disabled { background: color-mix(in srgb, var(--theme-card-background) 70%, transparent); border-color: color-mix(in srgb, var(--theme-border) 72%, transparent); min-height: 148px; } .trading-algorithm-column.strategy-column-disabled fieldset { display: none; } .strategy-column-heading { align-items: start; display: grid; gap: var(--eos-space-1); } .strategy-column-heading span { color: var(--theme-cyan); font-size: var(--eos-text-3); font-weight: 900; text-transform: uppercase; } .strategy-column-heading h3 { color: var(--theme-primary-text); font-size: var(--eos-text-7); margin: 0; } .strategy-column-heading small, .advanced-stack-link { color: var(--theme-muted-text); } .strategy-column-toggle { align-items: center; color: var(--theme-secondary-text); display: flex; font-size: var(--eos-text-5); gap: var(--eos-space-2); } .trading-algorithm-column label { color: var(--theme-secondary-text); display: grid; font-size: var(--eos-text-4); font-weight: 850; gap: var(--eos-space-1); } .trading-algorithm-column input, .trading-algorithm-column select, .trading-algorithm-column textarea { min-width: 0; } .trading-algorithm-column textarea { min-height: 158px; } .bot-creator-main-box { background: linear-gradient(180deg, color-mix(in srgb, var(--theme-card-background) 82%, #041524), color-mix(in srgb, var(--theme-panel-background) 92%, #060014)); border: 1px solid color-mix(in srgb, var(--theme-cyan) 42%, var(--theme-border)); border-radius: var(--eos-radius-3); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24); padding: 12px; } .bot-creator-main-box span { color: var(--theme-primary-text); font-size: var(--eos-text-6); font-weight: 750; } .bot-creator-main-box textarea { background: #030508; border-color: color-mix(in srgb, var(--theme-cyan) 44%, var(--theme-border)); color: var(--theme-primary-text); font-size: var(--eos-text-7); font-weight: 760; line-height: 1.48; min-height: 340px; resize: vertical; } .bot-creator-main-box textarea:focus { border-color: var(--theme-pink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-pink) 35%, transparent), 0 0 28px color-mix(in srgb, var(--theme-purple) 28%, transparent); } .advanced-stack-link { margin: 0; } .trading-builder-actions { display: grid; gap: var(--eos-space-2); justify-items: start; } .controlled-autonomy-envelope { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-card-background) 88%, #16003f), color-mix(in srgb, var(--theme-panel-background) 90%, #003849)); border: 1px solid color-mix(in srgb, var(--theme-purple) 36%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-3); padding: 16px; } .autonomy-envelope-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .autonomy-envelope-grid label, .autonomy-toggle-row label { color: var(--theme-secondary-text); display: grid; font-size: var(--eos-text-4); font-weight: 850; gap: var(--eos-space-1); } .autonomy-toggle-row { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .trading-build-button { font-size: var(--eos-text-6); justify-self: start; min-height: 48px; min-width: 180px; } .trading-builder-actions .button-row { gap: var(--eos-space-2); } .trading-owner-status { background: color-mix(in srgb, var(--theme-card-background) 84%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 24%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-secondary-text); display: grid; gap: var(--eos-space-1); max-width: 760px; padding: 12px 14px; } .trading-owner-status > .bot-output-card { border: 0; padding: 0; } .generated-bot-plan-section { display: grid; gap: var(--eos-space-3); margin-top: 18px; } .strategy-interpretation-panel { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .strategy-interpretation-actions { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); } .strategy-interpretation-editor { color: var(--theme-secondary-text); display: grid; font-size: var(--eos-text-4); font-weight: 850; gap: var(--eos-space-2); } .strategy-interpretation-editor textarea { min-height: 260px; } .bot-output-list, .dapp-lock-list { display: grid; gap: var(--eos-space-2); margin: 0; padding-left: 18px; } .bot-plan-output, .bot-detail-view, .bot-generated-controls, .bot-paper-simulation-output, .bot-backtest-panel, .bot-price-source-comparison, .bot-controlled-autonomy-output, .bot-run-history, .bot-live-readiness-output, .bot-drafts-list, .bot-advanced-diagnostics { margin-top: 14px; } .bot-generated-controls, .bot-readiness-grid, .bot-simulation-metrics, .bot-drafts-grid, .bot-price-source-grid, .bot-history-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .bot-detail-view, .bot-backtest-panel, .bot-price-source-comparison, .bot-run-history { background: color-mix(in srgb, var(--theme-panel-background) 78%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 18%, var(--theme-border)); border-radius: var(--eos-radius-3); padding: 14px; } .bot-detail-view { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .bot-price-source-grid .bot-output-card, .bot-history-grid .bot-output-card { min-height: 132px; } .bot-control-group { background: color-mix(in srgb, var(--theme-card-background) 88%, var(--theme-blue)); border: 1px solid color-mix(in srgb, var(--theme-cyan) 30%, var(--theme-border)); border-radius: var(--eos-radius-3); display: grid; gap: var(--eos-space-2); padding: 16px; } .bot-control-group h3, .bot-drafts-list h3 { color: var(--theme-primary-text); font-size: var(--eos-text-6); margin: 0; } .bot-control-group label { color: var(--theme-secondary-text); display: grid; font-size: var(--eos-text-4); font-weight: 800; gap: var(--eos-space-1); } .bot-control-group input { background: var(--theme-input-background); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); min-height: 38px; padding: 8px 10px; } .bot-decision-log { color: var(--theme-secondary-text); display: grid; gap: var(--eos-space-2); margin: 0; padding-left: 20px; } .bot-advanced-diagnostics { background: color-mix(in srgb, var(--theme-card-background) 82%, var(--theme-panel-background)); border: 1px solid var(--theme-border); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); padding: 14px; } .bot-advanced-diagnostics summary { cursor: pointer; font-weight: 850; } .bot-advanced-diagnostics pre { color: var(--theme-secondary-text); max-height: 420px; overflow: auto; white-space: pre-wrap; } .locked-action-chip { align-items: center; background: color-mix(in srgb, var(--theme-danger) 14%, var(--theme-card-background)); border: 1px solid color-mix(in srgb, var(--theme-danger) 58%, var(--theme-border)); border-radius: var(--eos-radius-pill); color: var(--theme-primary-text); display: inline-flex; font-size: var(--eos-text-4); font-weight: 850; gap: var(--eos-space-1); padding: 6px 10px; } @media (max-width: 980px) { .api-product-board-columns { grid-template-columns: 1fr; } .trading-center-hero, .trading-api-readiness-strip, .trading-algorithm-columns, .trading-owner-flow { grid-template-columns: 1fr; } .trading-engine-visual { min-height: 220px; } .trading-api-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .basic-algo-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.operator-simple-mode .operator-product-category .operator-top-control, body.operator-advanced-mode .operator-product-category .operator-top-control { min-width: 104px !important; } } /* Urgent nav fix: Simple Mode top categories are direct links, never clipped dropdowns. */ body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { align-items: center !important; overflow: visible !important; } body.operator-simple-mode .operator-mode-actions, body.operator-advanced-mode .operator-mode-actions { align-items: center !important; display: grid !important; gap: var(--eos-space-2) !important; grid-template-columns: minmax(0, 1fr) auto !important; overflow: visible !important; padding: 0 !important; } body.operator-simple-mode .operator-main-nav, body.operator-simple-mode .operator-utility-nav, body.operator-advanced-mode .operator-main-nav, body.operator-advanced-mode .operator-utility-nav { align-items: center; display: flex; flex-wrap: wrap; gap: var(--eos-space-2); min-width: 0; } body.operator-simple-mode .operator-main-nav, body.operator-advanced-mode .operator-main-nav { justify-content: center; } body.operator-simple-mode .operator-utility-nav, body.operator-advanced-mode .operator-utility-nav { justify-content: flex-end; } body.operator-simple-mode .operator-top-control, body.operator-simple-mode .operator-top-link, body.operator-advanced-mode .operator-top-control, body.operator-advanced-mode .operator-top-link { align-items: center; box-sizing: border-box; display: inline-flex; justify-content: center; line-height: 1.1; min-height: 36px !important; text-decoration: none; white-space: nowrap; } body.operator-simple-mode .operator-top-icon, body.operator-advanced-mode .operator-top-icon { align-items: center; background: color-mix(in srgb, var(--theme-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--theme-cyan) 34%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-cyan); display: inline-flex; font-size: var(--eos-text-1); font-weight: 950; height: 22px; justify-content: center; line-height: 1; margin-right: 7px; min-width: 24px; padding: 0 4px; } body.operator-simple-mode .operator-api-link .operator-top-icon, body.operator-advanced-mode .operator-api-link .operator-top-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-cyan) 20%, transparent), color-mix(in srgb, var(--theme-purple) 22%, transparent)); border-color: color-mix(in srgb, var(--theme-purple) 42%, var(--theme-cyan)); } body.operator-simple-mode .operator-top-control.operator-product-category, body.operator-simple-mode .operator-top-link.operator-product-category, body.operator-advanced-mode .operator-top-control.operator-product-category, body.operator-advanced-mode .operator-top-link.operator-product-category { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(9, 7, 16, 0.92) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent) !important; border-radius: var(--eos-radius-3) !important; box-shadow: inset 0 -1px 0 rgba(0, 245, 255, 0.08) !important; color: var(--theme-primary-text) !important; font-size: var(--eos-text-3) !important; font-weight: 850 !important; letter-spacing: 0.03em !important; min-width: 112px !important; padding: 0 11px !important; text-transform: none !important; } body.operator-simple-mode .operator-top-control.operator-product-category:hover, body.operator-simple-mode .operator-top-link.operator-product-category:hover, body.operator-simple-mode .operator-top-link.operator-product-category.operator-active-page, body.operator-advanced-mode .operator-top-control.operator-product-category:hover, body.operator-advanced-mode .operator-top-link.operator-product-category:hover, body.operator-advanced-mode .operator-top-link.operator-product-category.operator-active-page { background: linear-gradient(180deg, rgba(0, 245, 255, 0.12), rgba(255, 43, 214, 0.08)), rgba(13, 8, 23, 0.98) !important; border-color: color-mix(in srgb, var(--theme-cyan) 58%, var(--theme-border)) !important; box-shadow: inset 0 -2px 0 var(--theme-cyan), 0 0 16px rgba(0, 245, 255, 0.18) !important; color: var(--theme-cyan) !important; } body.operator-simple-mode .operator-utility-nav .operator-top-control, body.operator-simple-mode .operator-utility-nav .operator-top-link, body.operator-simple-mode .operator-mode-toggle, body.operator-advanced-mode .operator-utility-nav .operator-top-control, body.operator-advanced-mode .operator-utility-nav .operator-top-link, body.operator-advanced-mode .operator-mode-toggle { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid color-mix(in srgb, var(--theme-muted-text) 42%, var(--theme-border)) !important; border-radius: var(--eos-radius-3) !important; color: var(--theme-secondary-text) !important; font-size: var(--eos-text-1) !important; font-weight: 800 !important; min-width: 64px !important; padding: 0 9px !important; text-transform: none !important; } body.operator-simple-mode .operator-advanced-tools-link, body.operator-advanced-mode .operator-advanced-tools-link { min-width: 134px !important; } body.operator-simple-mode .operator-theme-control, body.operator-advanced-mode .operator-theme-control, body.operator-simple-mode .operator-help-control, body.operator-advanced-mode .operator-help-control { min-width: 64px !important; } body.operator-simple-mode .operator-mode-toggle.operator-mode-active, body.operator-advanced-mode .operator-mode-toggle.operator-mode-active { background: color-mix(in srgb, var(--theme-cyan) 18%, var(--theme-card-background)) !important; border-color: var(--theme-cyan) !important; color: var(--theme-cyan) !important; } @media (max-width: 1320px) { body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { grid-template-columns: auto minmax(138px, 176px) minmax(104px, 132px) !important; } body.operator-simple-mode .operator-mode-actions, body.operator-advanced-mode .operator-mode-actions { grid-column: 1 / -1; grid-template-columns: 1fr !important; justify-items: stretch !important; width: 100% !important; } body.operator-simple-mode .operator-main-nav, body.operator-simple-mode .operator-utility-nav, body.operator-advanced-mode .operator-main-nav, body.operator-advanced-mode .operator-utility-nav { justify-content: flex-start; width: 100%; } } @media (max-width: 760px) { body.operator-simple-mode .operator-mode-bar, body.operator-advanced-mode .operator-mode-bar { grid-template-columns: 1fr !important; } body.operator-simple-mode .operator-top-control.operator-product-category, body.operator-simple-mode .operator-top-link.operator-product-category, body.operator-advanced-mode .operator-top-control.operator-product-category, body.operator-advanced-mode .operator-top-link.operator-product-category { min-width: 128px !important; } } .live-api-connection-shortcut { border-color: color-mix(in srgb, var(--theme-cyan) 72%, var(--theme-border)); box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.16), 0 18px 46px rgba(0, 0, 0, 0.22); } .live-api-shortcut-grid { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 18px; } .live-api-shortcut-card { background: rgba(255, 255, 255, 0.045); border: 1px solid color-mix(in srgb, var(--theme-cyan) 48%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); display: flex; flex-direction: column; gap: var(--eos-space-2); min-height: 132px; padding: 18px; text-decoration: none; } .live-api-shortcut-card:hover, .live-api-shortcut-card:focus-visible { border-color: var(--theme-cyan); box-shadow: 0 0 20px rgba(0, 245, 255, 0.18); outline: none; } .live-api-shortcut-card span { color: var(--theme-cyan); font-size: var(--eos-text-3); font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .live-api-shortcut-card strong { font-size: var(--eos-text-7); } .live-api-shortcut-card small { color: var(--theme-secondary-text); line-height: 1.45; } .advanced-live-gate-stack { margin-top: 18px; } .advanced-live-gate-stack > summary { background: rgba(255, 255, 255, 0.035); border: 1px solid color-mix(in srgb, var(--theme-muted-text) 34%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-secondary-text); cursor: pointer; font-weight: 900; padding: 14px 16px; } body.operator-simple-mode .advanced-live-gate-stack, body.operator-simple-mode #live-phase4-readiness, body.operator-simple-mode #tiny-live-test-center, body.operator-simple-mode #live-trading-activation-wizard, body.operator-simple-mode #real-credential-dry-run-proof, body.operator-simple-mode #kraken-tiny-live-framework, body.operator-simple-mode #kraken-live-setup-walkthrough, body.operator-simple-mode #kraken-api-key-walkthrough, body.operator-simple-mode #kraken-authenticated-eligibility, body.operator-simple-mode #kraken-tiny-live-test, body.operator-simple-mode #production-trading-command-center { display: none !important; } .api-provider-workflow-section { border-top: 2px solid var(--theme-cyan); } .api-provider-workflow-fields { display: grid; gap: var(--eos-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0; } .api-provider-workflow-field { display: flex; flex-direction: column; gap: var(--eos-space-2); } .api-provider-workflow-field span { color: var(--theme-primary-text); font-weight: 900; } .api-provider-workflow-field input, .api-provider-workflow-field select { background: rgba(0, 0, 0, 0.42); border: 1px solid color-mix(in srgb, var(--theme-cyan) 56%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); min-height: 42px; padding: 10px 12px; } .api-provider-result-panel { background: rgba(0, 0, 0, 0.28); border: 1px solid color-mix(in srgb, var(--theme-cyan) 44%, var(--theme-border)); border-radius: var(--eos-radius-3); color: var(--theme-primary-text); line-height: 1.55; margin-top: 18px; padding: 16px; } .api-provider-result-panel strong { display: block; margin-bottom: 8px; } .api-provider-status-meaning, .api-provider-what-did-this-do, .api-provider-mini-table { background: rgba(0, 0, 0, 0.24); border: 1px solid color-mix(in srgb, var(--theme-cyan) 35%, var(--theme-border)); border-radius: var(--eos-radius-3); margin-top: 14px; padding: 14px; } .api-provider-result-facts { display: grid; gap: var(--eos-space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 14px 0; } .api-provider-result-facts span, .api-provider-mini-table span { color: var(--theme-primary-text); display: block; line-height: 1.45; } .api-provider-result-table-wrap { margin: 14px 0; max-width: 100%; overflow-x: auto; } .api-provider-result-table { border-collapse: collapse; min-width: 760px; width: 100%; } .api-provider-result-table th, .api-provider-result-table td { border: 1px solid color-mix(in srgb, var(--theme-cyan) 30%, var(--theme-border)); padding: 8px 10px; text-align: left; vertical-align: top; } .api-provider-result-table th { color: var(--theme-primary-text); font-size: var(--eos-text-4); text-transform: uppercase; } .api-provider-covered-links { margin-top: 14px; } .api-provider-covered-links > strong { display: block; margin-bottom: 10px; } .api-provider-covered-link-row { display: flex; flex-wrap: wrap; gap: var(--eos-space-2); }