| :root {
|
| --primary: #10a37f;
|
| --primary-hover: #1a7f64;
|
| --primary-light: #e6f7f3;
|
| --primary-border: #a3e6d5;
|
| --accent-purple: #7c3aed;
|
| --accent-purple-hover: #6d28d9;
|
| --accent-purple-light: #f3e8ff;
|
| --accent-purple-border: #d8b4fe;
|
| --accent-blue: #2563eb;
|
| --accent-blue-hover: #1d4ed8;
|
| --accent-blue-light: #eff6ff;
|
| --accent-blue-border: #bfdbfe;
|
| --accent-amber: #d97706;
|
| --accent-amber-light: #fffbeb;
|
| --accent-amber-border: #fde68a;
|
| --accent-cyan: #0891b2;
|
| --accent-cyan-light: #ecfeff;
|
| --accent-cyan-border: #a5f3fc;
|
| --success: #10b981;
|
| --success-hover: #059669;
|
| --success-light: #ecfdf5;
|
| --success-border: #a7f3d0;
|
| --warning: #f59e0b;
|
| --warning-hover: #d97706;
|
| --warning-light: #fffbeb;
|
| --warning-border: #fde68a;
|
| --danger: #ef4444;
|
| --danger-hover: #dc2626;
|
| --danger-light: #fef2f2;
|
| --danger-border: #fecaca;
|
| --bg-main: #f8fafc;
|
| --bg-card: #ffffff;
|
| --bg-card-sub: #f1f5f9;
|
| --bg-chat-bot: #ffffff;
|
| --bg-chat-user: #10a37f;
|
| --bg-dark-editor: #0f172a;
|
| --text-main: #0f172a;
|
| --text-muted: #64748b;
|
| --text-light: #94a3b8;
|
| --border: #cbd5e1;
|
| --border-light: #e2e8f0;
|
| --radius-sm: 6px;
|
| --radius-md: 10px;
|
| --radius-lg: 14px;
|
| --radius-xl: 20px;
|
| --radius-pill: 9999px;
|
| --font-main: 'Cairo', 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
|
| --font-code: 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
|
| --font-size-title: clamp(16px, 1.5vw, 24px);
|
| --font-size-subtitle: clamp(12px, 1vw, 15px);
|
| --font-size-body: clamp(13px, 0.95vw, 15px);
|
| --font-size-small: clamp(11px, 0.8vw, 13px);
|
| --font-size-card-val: clamp(22px, 2.2vw, 34px);
|
| --header-height: 64px;
|
| --z-base: 1;
|
| --z-card: 2;
|
| --z-sticky: 100;
|
| --z-bottom-nav: 2000;
|
| --z-pwa-banner: 4000;
|
| --z-modal-backdrop: 5000;
|
| --z-modal-content: 5001;
|
| --z-toast: 9000;
|
| }
|
| *,
|
| *::before,
|
| *::after {
|
| box-sizing: border-box;
|
| margin: 0;
|
| padding: 0;
|
| -webkit-tap-highlight-color: transparent;
|
| transition: none !important;
|
| animation: none !important;
|
| scroll-behavior: auto !important;
|
| }
|
| html,
|
| body {
|
| direction: rtl !important;
|
| text-align: right !important;
|
| background-color: var(--bg-main);
|
| color: var(--text-main);
|
| font-family: var(--font-main);
|
| font-weight: 500;
|
| height: 100vh;
|
| width: 100vw;
|
| margin: 0;
|
| padding: 0;
|
| overflow: hidden !important;
|
| -webkit-font-smoothing: antialiased;
|
| -moz-osx-font-smoothing: grayscale;
|
| }
|
| ::-webkit-scrollbar {
|
| width: 6px !important;
|
| height: 6px !important;
|
| }
|
| ::-webkit-scrollbar-track {
|
| background: transparent;
|
| }
|
| ::-webkit-scrollbar-thumb {
|
| background: var(--border);
|
| border-radius: var(--radius-pill);
|
| }
|
| i.fa-solid,
|
| i.fa-brands,
|
| i.fa-regular {
|
| display: inline-block;
|
| vertical-align: middle;
|
| }
|
| .app-icon-img {
|
| width: 100% !important;
|
| height: 100% !important;
|
| object-fit: contain !important;
|
| aspect-ratio: 1 / 1 !important;
|
| max-width: 100%;
|
| max-height: 100%;
|
| display: block;
|
| }
|
| .m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s {
|
| position: fixed;
|
| top: 12px;
|
| right: 50%;
|
| transform: translateX(50%);
|
| width: calc(100% - 24px);
|
| max-width: 680px;
|
| background: #ffffff;
|
| border: 1.5px solid var(--primary-border);
|
| border-radius: var(--radius-xl);
|
| padding: 10px 16px;
|
| z-index: var(--z-pwa-banner);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| gap: 12px;
|
| }
|
| .m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s-content {
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| }
|
| .b8n3x7m5q1r9v4k6t2z0p8w5c3y7h1f {
|
| width: 40px;
|
| height: 40px;
|
| aspect-ratio: 1 / 1;
|
| border-radius: 10px;
|
| overflow: hidden;
|
| border: 1px solid var(--primary-border);
|
| flex-shrink: 0;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| background: var(--bg-card);
|
| }
|
| .r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 2px;
|
| }
|
| .r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a strong {
|
| font-size: 13px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| }
|
| .r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a span {
|
| font-size: 11px;
|
| color: var(--text-muted);
|
| }
|
| .t6m1q8x3v9k4z7r2n5p0w6c8y3h1d9s {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .c9x4m7q2v8n1k5z3r6p0w9t4y7h2d8f {
|
| background: var(--primary);
|
| color: #ffffff;
|
| border: none;
|
| padding: 8px 16px;
|
| border-radius: var(--radius-md);
|
| font-size: 12px;
|
| font-weight: 800;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| white-space: nowrap;
|
| }
|
| .c9x4m7q2v8n1k5z3r6p0w9t4y7h2d8f:hover {
|
| background: var(--primary-hover);
|
| }
|
| .p3k8v1m6x9q4r7z2n5w0c8t3y6h1d9a {
|
| background: none;
|
| border: none;
|
| font-size: 20px;
|
| color: var(--text-muted);
|
| cursor: pointer;
|
| padding: 4px;
|
| }
|
| .a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
|
| width: 100vw;
|
| height: 100vh;
|
| padding: 12px;
|
| display: flex;
|
| justify-content: center;
|
| align-items: stretch;
|
| }
|
| .b1c2d3e4f5g6h7i8j9k0l1m2n3o4p5q6 {
|
| width: 100%;
|
| max-width: 1800px;
|
| height: 100%;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| overflow: hidden;
|
| }
|
| .c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6 {
|
| height: var(--header-height);
|
| min-height: var(--header-height);
|
| background: #ffffff;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| padding: 0 18px;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| flex-shrink: 0;
|
| }
|
| .d1e2f3g4h5i6j7k8l9m0n1o2p3q4r5s6 {
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| width: 100%;
|
| justify-content: space-between;
|
| }
|
| .e1f2g3h4i5j6k7l8m9n0o1p2q3r4s5t6 {
|
| width: 42px;
|
| height: 42px;
|
| aspect-ratio: 1 / 1;
|
| border-radius: var(--radius-lg);
|
| overflow: hidden;
|
| flex-shrink: 0;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| background: var(--bg-card);
|
| }
|
| .f1g2h3i4j5k6l7m8n9o0p1q2r3s4t5u6 h1 {
|
| font-size: var(--font-size-title);
|
| color: var(--text-main);
|
| line-height: 1.1;
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| white-space: nowrap;
|
| }
|
| .ai-badge-pro {
|
| font-size: 11px;
|
| font-weight: 800;
|
| background: var(--accent-purple-light);
|
| color: var(--accent-purple);
|
| border: 1px solid var(--accent-purple-border);
|
| padding: 3px 10px;
|
| border-radius: var(--radius-pill);
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 4px;
|
| }
|
| .header-model-selector-wrapper {
|
| margin-left: 10px;
|
| flex-shrink: 0;
|
| }
|
| .model-select-dropdown {
|
| background: var(--bg-card-sub);
|
| border: 1.5px solid var(--border-light);
|
| color: var(--text-main);
|
| padding: 6px 12px;
|
| border-radius: var(--radius-lg);
|
| font-family: var(--font-main);
|
| font-size: 12px;
|
| font-weight: 800;
|
| cursor: pointer;
|
| outline: none;
|
| }
|
| .model-select-dropdown:focus {
|
| border-color: var(--primary);
|
| background: #ffffff;
|
| }
|
| .wallet-header-badge-container {
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| margin-right: auto;
|
| }
|
| .header-asset-select {
|
| background: var(--bg-card-sub);
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-pill);
|
| padding: 4px 8px;
|
| font-size: 11px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| cursor: pointer;
|
| outline: none;
|
| }
|
| .k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6 {
|
| padding: 6px 14px;
|
| border-radius: var(--radius-pill);
|
| font-size: var(--font-size-small);
|
| font-weight: 800;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| cursor: pointer;
|
| user-select: none;
|
| white-space: nowrap;
|
| }
|
| .k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6.l1m2n3o4p5q6r7s8t9u0v1w2x3y4z5a6 {
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| border: 1.5px solid var(--primary-border);
|
| }
|
| .u1v2w3x4y5z6a7b8c9d0e1f2g3h4i5j6.full-width-layout {
|
| display: block !important;
|
| width: 100% !important;
|
| height: 100% !important;
|
| flex: 1;
|
| min-height: 0;
|
| overflow: hidden;
|
| }
|
| .a3b4c5d6e7f8g9h0i1j2k3l4m5n6o7p8 {
|
| display: flex;
|
| flex-direction: column;
|
| height: 100%;
|
| width: 100%;
|
| min-width: 0;
|
| min-height: 0;
|
| overflow: hidden;
|
| }
|
| .c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8 {
|
| display: none;
|
| flex-direction: column;
|
| height: 100%;
|
| width: 100%;
|
| min-height: 0;
|
| overflow-y: auto;
|
| }
|
| .c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
|
| display: flex;
|
| }
|
| #pane_home_dashboard {
|
| padding: 16px;
|
| gap: 20px;
|
| }
|
| .home-hub-welcome-banner {
|
| background: #ffffff;
|
| border: 1.5px solid var(--primary-border);
|
| border-radius: var(--radius-xl);
|
| padding: 20px 24px;
|
| display: flex;
|
| align-items: center;
|
| gap: 20px;
|
| }
|
| .home-banner-graphic {
|
| width: 68px;
|
| height: 68px;
|
| flex-shrink: 0;
|
| border-radius: var(--radius-lg);
|
| overflow: hidden;
|
| background: #ffffff;
|
| padding: 4px;
|
| border: 1px solid var(--border-light);
|
| }
|
| .home-banner-text {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 4px;
|
| flex: 1;
|
| }
|
| .home-banner-text h2 {
|
| font-size: clamp(16px, 1.6vw, 22px);
|
| font-weight: 900;
|
| color: var(--text-main);
|
| }
|
| .home-banner-text p {
|
| font-size: 13px;
|
| color: var(--text-muted);
|
| line-height: 1.5;
|
| }
|
| .home-quick-stats {
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| flex-wrap: wrap;
|
| }
|
| .home-stat-chip {
|
| background: #ffffff;
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| padding: 10px 16px;
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| cursor: pointer;
|
| }
|
| .home-stat-chip:hover {
|
| border-color: var(--primary-border);
|
| background: var(--primary-light);
|
| }
|
| .home-stat-chip i {
|
| font-size: 20px;
|
| }
|
| .home-stat-chip div {
|
| display: flex;
|
| flex-direction: column;
|
| }
|
| .home-stat-chip span {
|
| font-size: 10px;
|
| color: var(--text-muted);
|
| font-weight: 700;
|
| }
|
| .home-stat-chip strong {
|
| font-size: 13px;
|
| color: var(--text-main);
|
| font-weight: 900;
|
| }
|
| .home-modules-launch-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
| gap: 16px;
|
| }
|
| .module-launch-card {
|
| background: var(--bg-card);
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| padding: 20px;
|
| display: flex;
|
| flex-direction: column;
|
| justify-content: space-between;
|
| gap: 14px;
|
| cursor: pointer;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
| .module-card-icon {
|
| width: 48px;
|
| height: 48px;
|
| border-radius: var(--radius-lg);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 22px;
|
| }
|
| .module-card-content h3 {
|
| font-size: 15px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| margin-bottom: 4px;
|
| }
|
| .module-card-content p {
|
| font-size: 12px;
|
| color: var(--text-muted);
|
| line-height: 1.5;
|
| }
|
| .module-card-footer {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--primary);
|
| padding-top: 10px;
|
| border-top: 1px dashed var(--border-light);
|
| }
|
| .home-bottom-sections-wrapper {
|
| display: grid;
|
| grid-template-columns: 2fr 1fr;
|
| gap: 16px;
|
| margin-top: 4px;
|
| }
|
| .home-recent-chats-panel,
|
| .home-quick-tools-panel {
|
| background: var(--bg-card);
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| padding: 18px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| }
|
| .home-section-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| font-size: 14px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| border-bottom: 1px solid var(--border-light);
|
| padding-bottom: 10px;
|
| }
|
| .home-section-actions {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .quick-tools-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
| .quick-tool-btn {
|
| width: 100%;
|
| padding: 12px 14px;
|
| background: var(--bg-card-sub);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| font-family: var(--font-main);
|
| font-size: 13px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| }
|
| .quick-tool-btn:hover {
|
| background: #ffffff;
|
| border-color: var(--primary-border);
|
| color: var(--primary);
|
| }
|
| #pane_khadija_chat {
|
| overflow: hidden !important;
|
| }
|
| .chat-layout-split-wrapper {
|
| display: flex;
|
| gap: 14px;
|
| width: 100%;
|
| height: 100%;
|
| min-height: 0;
|
| overflow: hidden;
|
| }
|
| .chat-main-container {
|
| flex: 1;
|
| background: var(--bg-card);
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| display: flex;
|
| flex-direction: column;
|
| height: 100%;
|
| min-height: 0;
|
| overflow: hidden;
|
| position: relative;
|
| }
|
| .chat-main-container.drag-over {
|
| border-color: var(--primary);
|
| background: var(--primary-light);
|
| }
|
| .chat-top-bar {
|
| padding: 10px 16px;
|
| border-bottom: 1px solid var(--border-light);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| background: #ffffff;
|
| flex-shrink: 0;
|
| z-index: 10;
|
| gap: 10px;
|
| flex-wrap: wrap;
|
| }
|
| .chat-actions {
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| flex-wrap: wrap;
|
| margin-right: auto;
|
| }
|
| .btn-chat-tool {
|
| background: var(--bg-card-sub);
|
| border: 1px solid var(--border-light);
|
| color: var(--text-muted);
|
| padding: 6px 10px;
|
| height: 34px;
|
| border-radius: var(--radius-md);
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 12px;
|
| font-weight: 700;
|
| gap: 6px;
|
| }
|
| .btn-chat-tool:hover {
|
| color: var(--primary);
|
| border-color: var(--primary-border);
|
| }
|
| .btn-chat-tool.active {
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| border-color: var(--primary-border);
|
| }
|
| .tool-toggle-search.active {
|
| background: var(--accent-blue-light);
|
| color: var(--accent-blue);
|
| border-color: var(--accent-blue-border);
|
| }
|
| .multi-agent-status-bar {
|
| background: #0f172a;
|
| color: #f8fafc;
|
| padding: 8px 16px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-around;
|
| font-size: 12px;
|
| font-weight: 700;
|
| border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
| flex-shrink: 0;
|
| }
|
| .agent-step {
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| opacity: 0.5;
|
| padding: 4px 10px;
|
| border-radius: var(--radius-pill);
|
| }
|
| .agent-step.active {
|
| opacity: 1;
|
| background: rgba(255, 255, 255, 0.15);
|
| }
|
| .step-researcher.active { color: #38bdf8; }
|
| .step-coder.active { color: #34d399; }
|
| .step-auditor.active { color: #f43f5e; }
|
| .arrow-divider {
|
| font-size: 10px;
|
| color: #64748b;
|
| }
|
| .chat-messages-area {
|
| flex: 1;
|
| padding: 20px;
|
| overflow-y: auto;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 20px;
|
| min-height: 0;
|
| }
|
| .khadija-welcome-screen {
|
| margin: auto;
|
| max-width: 680px;
|
| text-align: center;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: 12px;
|
| padding: 30px 10px;
|
| }
|
| .welcome-icon {
|
| width: 64px;
|
| height: 64px;
|
| border-radius: 20px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 28px;
|
| }
|
| .khadija-welcome-screen h2 {
|
| font-size: 22px;
|
| font-weight: 900;
|
| color: var(--text-main);
|
| }
|
| .khadija-welcome-screen p {
|
| font-size: 14px;
|
| color: var(--text-muted);
|
| line-height: 1.6;
|
| }
|
| .prompt-suggestions-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
| gap: 12px;
|
| width: 100%;
|
| margin-top: 16px;
|
| }
|
| .prompt-card {
|
| background: var(--bg-card-sub);
|
| border: 1px solid var(--border-light);
|
| padding: 14px 16px;
|
| border-radius: var(--radius-lg);
|
| cursor: pointer;
|
| text-align: right;
|
| display: flex;
|
| align-items: flex-start;
|
| gap: 10px;
|
| font-family: var(--font-main);
|
| }
|
| .prompt-card:hover {
|
| border-color: var(--primary-border);
|
| background: var(--primary-light);
|
| }
|
| .prompt-card span {
|
| font-size: 12px;
|
| font-weight: 700;
|
| color: var(--text-main);
|
| line-height: 1.5;
|
| }
|
| .chat-message-row {
|
| display: flex;
|
| gap: 12px;
|
| max-width: 92%;
|
| align-items: flex-start;
|
| }
|
| .chat-message-row.user-msg-row {
|
| margin-left: auto;
|
| flex-direction: row-reverse;
|
| }
|
| .chat-message-row.bot-msg-row {
|
| margin-right: auto;
|
| }
|
| .msg-avatar {
|
| width: 36px;
|
| height: 36px;
|
| border-radius: var(--radius-md);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 16px;
|
| flex-shrink: 0;
|
| }
|
| .user-msg-row .msg-avatar {
|
| background: var(--accent-purple-light);
|
| color: var(--accent-purple);
|
| border: 1px solid var(--accent-purple-border);
|
| }
|
| .bot-msg-row .msg-avatar {
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| border: 1px solid var(--primary-border);
|
| }
|
| .msg-bubble-content {
|
| background: var(--bg-chat-bot);
|
| border: 1px solid var(--border-light);
|
| padding: 14px 18px;
|
| border-radius: var(--radius-lg);
|
| font-size: 14px;
|
| line-height: 1.7;
|
| color: var(--text-main);
|
| word-break: break-word;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
| .user-msg-row .msg-bubble-content {
|
| background: var(--primary);
|
| color: #ffffff;
|
| border: none;
|
| border-radius: 16px 16px 2px 16px;
|
| }
|
| .bot-msg-row .msg-bubble-content {
|
| border-radius: 16px 16px 16px 2px;
|
| }
|
| .thinking-block {
|
| background: var(--accent-amber-light);
|
| border: 1px solid var(--accent-amber-border);
|
| border-radius: var(--radius-md);
|
| padding: 10px 14px;
|
| margin-bottom: 8px;
|
| font-size: 12px;
|
| color: var(--accent-amber);
|
| }
|
| .thinking-block summary {
|
| cursor: pointer;
|
| font-weight: 800;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .thinking-content {
|
| margin-top: 8px;
|
| line-height: 1.5;
|
| color: var(--text-main);
|
| font-family: var(--font-code);
|
| font-size: 11px;
|
| white-space: pre-wrap;
|
| direction: ltr;
|
| text-align: left;
|
| }
|
| .artifact-card-embed {
|
| background: #ffffff;
|
| border: 1.5px solid var(--accent-purple-border);
|
| border-radius: var(--radius-lg);
|
| padding: 12px 16px;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| cursor: pointer;
|
| margin: 6px 0;
|
| }
|
| .artifact-card-embed:hover {
|
| background: var(--accent-purple-light);
|
| }
|
| .artifact-info {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| font-weight: 800;
|
| font-size: 13px;
|
| color: var(--accent-purple);
|
| }
|
| .msg-bubble-content pre {
|
| background: #0f172a;
|
| color: #f8fafc;
|
| padding: 14px;
|
| border-radius: var(--radius-md);
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| overflow-x: auto;
|
| margin: 10px 0;
|
| direction: ltr;
|
| text-align: left;
|
| }
|
| .msg-bubble-content code {
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| background: rgba(0, 0, 0, 0.06);
|
| padding: 2px 6px;
|
| border-radius: 4px;
|
| }
|
| .user-msg-row .msg-bubble-content code {
|
| background: rgba(255, 255, 255, 0.2);
|
| }
|
| .search-grounding-box {
|
| background: var(--accent-blue-light);
|
| border: 1px solid var(--accent-blue-border);
|
| border-radius: var(--radius-md);
|
| padding: 10px 14px;
|
| margin-top: 8px;
|
| font-size: 12px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| }
|
| .grounding-title {
|
| font-weight: 800;
|
| color: var(--accent-blue);
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .grounding-sources-list {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 6px;
|
| }
|
| .search-source-pill {
|
| background: #ffffff;
|
| border: 1px solid var(--accent-blue-border);
|
| color: var(--accent-blue-hover);
|
| padding: 3px 10px;
|
| border-radius: var(--radius-pill);
|
| font-size: 11px;
|
| font-weight: 700;
|
| text-decoration: none;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 4px;
|
| }
|
| .search-source-pill:hover {
|
| background: var(--accent-blue);
|
| color: #ffffff;
|
| }
|
| .msg-attachments-grid {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 8px;
|
| margin-bottom: 8px;
|
| }
|
| .msg-image-attachment {
|
| max-width: 220px;
|
| max-height: 180px;
|
| border-radius: var(--radius-md);
|
| object-fit: cover;
|
| cursor: pointer;
|
| border: 1px solid var(--border-light);
|
| }
|
| .msg-file-attachment {
|
| padding: 6px 12px;
|
| background: var(--bg-card-sub);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-sm);
|
| font-size: 11px;
|
| font-family: var(--font-code);
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .chat-input-wrapper {
|
| padding: 12px 20px;
|
| background: #ffffff;
|
| border-top: 1px solid var(--border-light);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 8px;
|
| flex-shrink: 0;
|
| }
|
| .attachments-preview-container {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 8px;
|
| padding: 8px 12px;
|
| background: var(--bg-card-sub);
|
| border: 1px dashed var(--primary-border);
|
| border-radius: var(--radius-md);
|
| max-height: 100px;
|
| overflow-y: auto;
|
| }
|
| .attachment-preview-item {
|
| position: relative;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| padding: 4px 8px;
|
| background: #ffffff;
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-sm);
|
| font-size: 11px;
|
| font-weight: 700;
|
| }
|
| .attachment-preview-item img {
|
| width: 28px;
|
| height: 28px;
|
| object-fit: cover;
|
| border-radius: 4px;
|
| }
|
| .btn-remove-attachment {
|
| background: none;
|
| border: none;
|
| color: var(--danger);
|
| cursor: pointer;
|
| font-size: 14px;
|
| margin-right: 4px;
|
| }
|
| .chat-input-controls-top {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| font-size: 11px;
|
| color: var(--text-muted);
|
| }
|
| .status-indicator {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| font-weight: 700;
|
| }
|
| .chat-tools-indicators {
|
| display: flex;
|
| gap: 6px;
|
| }
|
| .indicator-chip {
|
| padding: 2px 8px;
|
| border-radius: var(--radius-pill);
|
| font-size: 10px;
|
| font-weight: 800;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 4px;
|
| }
|
| .search-chip { background: var(--accent-blue-light); color: var(--accent-blue); border: 1px solid var(--accent-blue-border); }
|
| .research-chip { background: var(--accent-cyan-light); color: var(--accent-cyan); border: 1px solid var(--accent-cyan-border); }
|
| .reasoning-chip { background: var(--accent-purple-light); color: var(--accent-purple); border: 1px solid var(--accent-purple-border); }
|
| .webgpu-chip { background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }
|
| .voice-chip { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-border); }
|
| .chat-textarea-container {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| background: var(--bg-main);
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| padding: 8px 12px;
|
| }
|
| .chat-textarea-container:focus-within {
|
| border-color: var(--primary);
|
| }
|
| .input-actions-left {
|
| display: flex;
|
| align-items: center;
|
| gap: 4px;
|
| }
|
| .btn-attach-action {
|
| background: none;
|
| border: none;
|
| color: var(--text-muted);
|
| width: 32px;
|
| height: 32px;
|
| border-radius: var(--radius-md);
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 15px;
|
| }
|
| .btn-attach-action:hover {
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| }
|
| .btn-attach-action.recording {
|
| color: var(--danger);
|
| background: var(--danger-light);
|
| }
|
| .chat-textarea-container textarea {
|
| flex: 1;
|
| background: none;
|
| border: none;
|
| outline: none;
|
| font-family: var(--font-main);
|
| font-size: 14px;
|
| color: var(--text-main);
|
| resize: none;
|
| max-height: 120px;
|
| line-height: 1.5;
|
| }
|
| .btn-send-chat {
|
| width: 38px;
|
| height: 38px;
|
| border-radius: 50%;
|
| background: var(--primary);
|
| color: #ffffff;
|
| border: none;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 15px;
|
| flex-shrink: 0;
|
| }
|
| .btn-send-chat:hover {
|
| background: var(--primary-hover);
|
| }
|
| .btn-send-chat:disabled {
|
| background: var(--border);
|
| cursor: not-allowed;
|
| }
|
| .canvas-artifacts-panel {
|
| width: 50%;
|
| min-width: 420px;
|
| background: var(--bg-card);
|
| border: 1.5px solid var(--accent-purple-border);
|
| border-radius: var(--radius-xl);
|
| display: flex;
|
| flex-direction: column;
|
| height: 100%;
|
| min-height: 0;
|
| overflow: hidden;
|
| }
|
| .canvas-header {
|
| padding: 12px 18px;
|
| background: var(--accent-purple-light);
|
| border-bottom: 1px solid var(--accent-purple-border);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| flex-shrink: 0;
|
| }
|
| .canvas-title-wrapper {
|
| font-weight: 900;
|
| font-size: 14px;
|
| color: var(--accent-purple);
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .canvas-controls {
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| flex-wrap: wrap;
|
| }
|
| .btn-canvas-action {
|
| background: #ffffff;
|
| border: 1px solid var(--accent-purple-border);
|
| color: var(--accent-purple);
|
| padding: 5px 10px;
|
| border-radius: var(--radius-md);
|
| font-size: 12px;
|
| font-weight: 700;
|
| cursor: pointer;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .btn-canvas-action:hover {
|
| background: var(--accent-purple);
|
| color: #ffffff;
|
| }
|
| .btn-close-canvas {
|
| font-size: 18px;
|
| padding: 2px 8px;
|
| }
|
| .canvas-file-tabs-bar {
|
| display: flex;
|
| align-items: center;
|
| gap: 4px;
|
| background: #0f172a;
|
| padding: 6px 12px;
|
| overflow-x: auto;
|
| border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
| flex-shrink: 0;
|
| }
|
| .canvas-file-tab {
|
| background: rgba(255, 255, 255, 0.05);
|
| border: 1px solid transparent;
|
| color: #94a3b8;
|
| padding: 6px 12px;
|
| border-radius: var(--radius-sm);
|
| font-family: var(--font-code);
|
| font-size: 11px;
|
| font-weight: 600;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| white-space: nowrap;
|
| }
|
| .canvas-file-tab.active {
|
| background: #1e293b;
|
| color: #ffffff;
|
| border-color: rgba(255, 255, 255, 0.2);
|
| }
|
| .btn-add-file-tab {
|
| background: none;
|
| border: none;
|
| color: #94a3b8;
|
| padding: 4px 8px;
|
| cursor: pointer;
|
| font-size: 12px;
|
| }
|
| .btn-add-file-tab:hover {
|
| color: #ffffff;
|
| }
|
| .canvas-tabs-bar {
|
| display: flex;
|
| background: var(--bg-card-sub);
|
| border-bottom: 1px solid var(--border-light);
|
| padding: 4px 12px;
|
| gap: 6px;
|
| flex-shrink: 0;
|
| overflow-x: auto;
|
| }
|
| .canvas-tab-btn {
|
| background: none;
|
| border: none;
|
| padding: 8px 14px;
|
| font-family: var(--font-main);
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-muted);
|
| cursor: pointer;
|
| border-radius: var(--radius-md);
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| white-space: nowrap;
|
| }
|
| .canvas-tab-btn.active {
|
| background: #ffffff;
|
| color: var(--accent-purple);
|
| }
|
| .canvas-body-container {
|
| flex: 1;
|
| position: relative;
|
| overflow: hidden;
|
| background: #0f172a;
|
| min-height: 0;
|
| }
|
| .canvas-tab-content {
|
| width: 100%;
|
| height: 100%;
|
| overflow: auto;
|
| }
|
| .monaco-editor-host {
|
| width: 100%;
|
| height: 100%;
|
| min-height: 300px;
|
| }
|
| .canvas-code-textarea {
|
| width: 100%;
|
| height: 100%;
|
| background: #0f172a;
|
| color: #f8fafc;
|
| font-family: var(--font-code);
|
| font-size: 13px;
|
| line-height: 1.6;
|
| border: none;
|
| outline: none;
|
| padding: 16px;
|
| resize: none;
|
| direction: ltr;
|
| text-align: left;
|
| }
|
| .canvas-preview-view iframe {
|
| width: 100%;
|
| height: 100%;
|
| border: none;
|
| background: #ffffff;
|
| }
|
| .canvas-visual-view {
|
| background: #f8fafc;
|
| display: flex;
|
| flex-direction: column;
|
| }
|
| .visual-builder-toolbar {
|
| padding: 10px 14px;
|
| background: #ffffff;
|
| border-bottom: 1px solid var(--border-light);
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| font-size: 12px;
|
| font-weight: 700;
|
| flex-wrap: wrap;
|
| }
|
| .btn-visual-add {
|
| background: var(--bg-card-sub);
|
| border: 1px solid var(--border-light);
|
| padding: 4px 10px;
|
| border-radius: var(--radius-sm);
|
| font-size: 11px;
|
| font-weight: 700;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| gap: 4px;
|
| }
|
| .btn-visual-add:hover {
|
| background: var(--accent-purple-light);
|
| color: var(--accent-purple);
|
| }
|
| .visual-builder-canvas {
|
| flex: 1;
|
| padding: 20px;
|
| overflow-y: auto;
|
| min-height: 300px;
|
| background: #ffffff;
|
| border: 2px dashed var(--border-light);
|
| margin: 14px;
|
| border-radius: var(--radius-lg);
|
| position: relative;
|
| }
|
| .draggable-element {
|
| padding: 10px 14px;
|
| margin-bottom: 10px;
|
| border: 1px dashed var(--accent-purple-border);
|
| border-radius: var(--radius-md);
|
| cursor: move;
|
| background: var(--accent-purple-light);
|
| position: relative;
|
| }
|
| .draggable-element:hover {
|
| border-color: var(--accent-purple);
|
| }
|
| .canvas-python-view {
|
| background: #020617;
|
| padding: 16px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| color: #38bdf8;
|
| }
|
| .pyodide-status-pill,
|
| .serverless-status-banner {
|
| padding: 8px 12px;
|
| background: #1e293b;
|
| border: 1px solid #334155;
|
| border-radius: var(--radius-md);
|
| font-size: 12px;
|
| color: #38bdf8;
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .pyodide-console {
|
| background: #0f172a;
|
| border: 1px solid #1e293b;
|
| padding: 14px;
|
| border-radius: var(--radius-md);
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| color: #f8fafc;
|
| min-height: 120px;
|
| white-space: pre-wrap;
|
| direction: ltr;
|
| text-align: left;
|
| }
|
| .pyodide-plots-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
| gap: 12px;
|
| }
|
| .pyodide-plots-grid img {
|
| width: 100%;
|
| border-radius: var(--radius-md);
|
| border: 1px solid #334155;
|
| }
|
| .canvas-console-view {
|
| background: #020617;
|
| padding: 12px;
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| }
|
| .console-logs-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| }
|
| .console-log-item {
|
| padding: 4px 8px;
|
| border-radius: 4px;
|
| }
|
| .log-info { color: #38bdf8; }
|
| .log-error { color: #f87171; background: rgba(239, 68, 68, 0.1); }
|
| .log-warn { color: #fbbf24; }
|
| .node-workflow-board {
|
| position: relative;
|
| width: 100%;
|
| height: 520px;
|
| background: #0b1329;
|
| border: 1.5px solid var(--accent-purple-border);
|
| border-radius: var(--radius-xl);
|
| overflow: hidden;
|
| }
|
| .workflow-grid-background {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
| background-size: 20px 20px;
|
| pointer-events: none;
|
| }
|
| .node-elements-layer {
|
| position: relative;
|
| width: 100%;
|
| height: 100%;
|
| padding: 20px;
|
| overflow: auto;
|
| }
|
| .workflow-node-card {
|
| position: absolute;
|
| width: 260px;
|
| background: rgba(30, 41, 59, 0.95);
|
| border: 1.5px solid var(--accent-purple);
|
| border-radius: var(--radius-lg);
|
| padding: 14px;
|
| color: #ffffff;
|
| cursor: grab;
|
| z-index: 10;
|
| }
|
| .workflow-node-card:active {
|
| cursor: grabbing;
|
| }
|
| .workflow-node-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
| padding-bottom: 8px;
|
| margin-bottom: 10px;
|
| font-weight: 800;
|
| font-size: 13px;
|
| color: var(--accent-purple-border);
|
| }
|
| .workflow-node-body {
|
| font-size: 11px;
|
| color: #94a3b8;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 8px;
|
| }
|
| .workflow-node-badge {
|
| font-size: 10px;
|
| padding: 2px 6px;
|
| border-radius: var(--radius-pill);
|
| font-weight: 800;
|
| }
|
| .node-badge-research { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
|
| .node-badge-coder { background: rgba(52, 211, 153, 0.2); color: #34d399; }
|
| .node-badge-oracle { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
|
| .workflow-controls {
|
| display: flex;
|
| gap: 8px;
|
| }
|
| .voice-live-orb-container {
|
| padding: 30px 0;
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| }
|
| .voice-live-orb {
|
| width: 110px;
|
| height: 110px;
|
| border-radius: 50%;
|
| background: radial-gradient(circle, var(--primary) 0%, var(--primary-hover) 100%);
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| color: #ffffff;
|
| font-size: 42px;
|
| }
|
| .voice-live-orb.listening {
|
| background: radial-gradient(circle, #ef4444 0%, #dc2626 100%);
|
| }
|
| .voice-live-orb.speaking {
|
| background: radial-gradient(circle, #7c3aed 0%, #6d28d9 100%);
|
| }
|
| .voice-stream-status-label {
|
| font-size: 13px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| margin-bottom: 16px;
|
| }
|
| .projects-grid-container {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
| gap: 16px;
|
| margin-top: 12px;
|
| }
|
| .project-card-empty {
|
| grid-column: 1 / -1;
|
| text-align: center;
|
| padding: 40px;
|
| background: var(--bg-card-sub);
|
| border: 1.5px dashed var(--border-light);
|
| border-radius: var(--radius-xl);
|
| color: var(--text-muted);
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: 10px;
|
| font-size: 14px;
|
| }
|
| .project-card-empty i {
|
| font-size: 32px;
|
| color: var(--border);
|
| }
|
| .d3e4f5g6h7i8j9k0l1m2n3o4p5q6r7s8 {
|
| background: var(--bg-card);
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| padding: clamp(14px, 1.8vw, 24px);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 16px;
|
| }
|
| .f3g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8 {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| border-bottom: 2px solid var(--bg-main);
|
| padding-bottom: 10px;
|
| }
|
| .g3h4i5j6k7l8m9n0o1p2q3r4s5t6u7v8 {
|
| font-size: clamp(14px, 1.2vw, 18px);
|
| font-weight: 900;
|
| color: var(--text-main);
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .j3k4l5m6n7o8p9q0r1s2t3u4v5w6x7y8 {
|
| font-size: var(--font-size-body);
|
| font-weight: 600;
|
| color: var(--text-muted);
|
| line-height: 1.6;
|
| }
|
| .e3f4g5h6i7j8k9l0m1n2o3p4q5r6s7t8 {
|
| background: var(--bg-card-sub);
|
| }
|
| .k3l4m5n6o7p8q9r0s1t2u3v4w5x6y7z8 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| }
|
| .l3m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| }
|
| .l3m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8 label {
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-muted);
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8 {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .o3p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8 {
|
| background: var(--bg-card);
|
| border: 1.5px solid var(--border-light);
|
| padding: 8px 14px;
|
| border-radius: var(--radius-md);
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| cursor: pointer;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| white-space: nowrap;
|
| }
|
| .o3p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8:hover {
|
| border-color: var(--primary-border);
|
| color: var(--primary);
|
| }
|
| #n3o4p5q6r7s8t9u0v1w2x3y4z5a6b7c8 {
|
| flex: 1;
|
| padding: 10px 14px;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| background: #ffffff;
|
| color: var(--primary);
|
| font-weight: 700;
|
| outline: none;
|
| }
|
| .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8 {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
| gap: 16px;
|
| }
|
| .r3s4t5u6v7w8x9y0z1a2b3c4d5e6f7g8 {
|
| padding: 20px;
|
| border-radius: var(--radius-xl);
|
| border: 1.5px solid var(--border-light);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| background: #ffffff;
|
| }
|
| .s3t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8 {
|
| background: var(--primary-light);
|
| border-color: var(--primary-border);
|
| }
|
| .b4c5d6e7f8g9h0i1j2k3l4m5n6o7p8q9 {
|
| background: var(--accent-amber-light);
|
| border-color: var(--accent-amber-border);
|
| }
|
| .t3u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8 {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| }
|
| .u3v4w5x6y7z8a9b0c1d2e3f4g5h6i7j8 {
|
| font-size: 14px;
|
| font-weight: 800;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .w3x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8 {
|
| font-size: var(--font-size-card-val);
|
| font-weight: 900;
|
| line-height: 1.1;
|
| display: flex;
|
| align-items: baseline;
|
| gap: 6px;
|
| }
|
| .y3z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8 {
|
| font-size: var(--font-size-small);
|
| color: var(--text-muted);
|
| }
|
| .c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9 {
|
| font-size: 11px;
|
| font-weight: 800;
|
| padding: 3px 8px;
|
| border-radius: var(--radius-pill);
|
| background: var(--bg-card);
|
| color: var(--accent-amber);
|
| }
|
| .j5k6l7m8n9o0p1q2r3s4t5u6v7w8x9y0 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 14px;
|
| }
|
| .l5m6n7o8p9q0r1s2t3u4v5w6x7y8z9a0 {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
| gap: 14px;
|
| }
|
| .m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| }
|
| .m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0 label {
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9,
|
| .z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8o9 {
|
| width: 100%;
|
| padding: 10px 14px;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| font-family: var(--font-main);
|
| font-size: 13px;
|
| background: #ffffff;
|
| color: var(--text-main);
|
| outline: none;
|
| }
|
| .x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9:focus {
|
| border-color: var(--primary);
|
| }
|
| .o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9d0 {
|
| font-size: 18px;
|
| font-weight: 900;
|
| color: var(--primary);
|
| font-family: var(--font-code);
|
| }
|
| .s5t6u7v8w9x0y1z2a3b4c5d6e7f8g9h0 {
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| }
|
| .t5u6v7w8x9y0z1a2b3c4d5e6f7g8h9i0 {
|
| padding: 14px;
|
| background: var(--bg-card-sub);
|
| border-radius: var(--radius-lg);
|
| border: 1px solid var(--border-light);
|
| }
|
| .u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0 {
|
| display: flex;
|
| align-items: center;
|
| }
|
| .v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0 {
|
| font-size: 13px;
|
| font-weight: 800;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0 input {
|
| accent-color: var(--primary);
|
| width: 16px;
|
| height: 16px;
|
| }
|
| .y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9n0 {
|
| margin-top: 12px;
|
| padding-top: 12px;
|
| border-top: 1px dashed var(--border);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| }
|
| .a6b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1 {
|
| gap: 8px;
|
| }
|
| .b6c7d8e9f0g1h2i3j4k5l6m7n8o9p0q1 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| }
|
| .c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1 {
|
| font-size: 12px;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .d6e7f8g9h0i1j2k3l4m5n6o7p8q9r0s1 {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 12px;
|
| }
|
| .q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9f0 {
|
| margin-top: 10px;
|
| }
|
| .i6j7k8l9m0n1o2p3q4r5s6t7u8v9w0x1 {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: 10px 14px;
|
| background: var(--primary-light);
|
| border: 1px solid var(--primary-border);
|
| border-radius: var(--radius-md);
|
| }
|
| .j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1 {
|
| font-size: 13px;
|
| font-weight: 700;
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1 strong {
|
| font-family: var(--font-code);
|
| font-size: 16px;
|
| color: var(--primary);
|
| }
|
| .l6m7n8o9p0q1r2s3t4u5v6w7x8y9z0a1 strong {
|
| color: var(--text-muted);
|
| }
|
| .m6n7o8p9q0r1s2t3u4v5w6x7y8z9a0b1 {
|
| background: var(--primary);
|
| color: #ffffff;
|
| border: none;
|
| padding: 12px 20px;
|
| border-radius: var(--radius-lg);
|
| font-family: var(--font-main);
|
| font-size: 14px;
|
| font-weight: 800;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 8px;
|
| }
|
| .m6n7o8p9q0r1s2t3u4v5w6x7y8z9a0b1:hover {
|
| background: var(--primary-hover);
|
| }
|
| .n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0c1 {
|
| width: 100%;
|
| }
|
| .q6r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1 {
|
| background: var(--bg-card-sub);
|
| padding: 12px;
|
| border-radius: var(--radius-lg);
|
| border: 1px solid var(--border-light);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 8px;
|
| }
|
| .q6r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1 label {
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--primary);
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .s6t7u8v9w0x1y2z3a4b5c6d7e8f9g0h1 {
|
| display: flex;
|
| gap: 8px;
|
| }
|
| #t6u7v8w9x0y1z2a3b4c5d6e7f8g9h0i1 {
|
| flex: 1;
|
| padding: 8px 12px;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| font-family: var(--font-code);
|
| font-size: 11px;
|
| background: #ffffff;
|
| }
|
| .v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0k1 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 14px;
|
| }
|
| .y6z7a8b9c0d1e2f3g4h5i6j7k8l9m0n1 {
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| resize: vertical;
|
| min-height: 80px;
|
| }
|
| .b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1q2 {
|
| background: var(--accent-purple);
|
| color: #ffffff;
|
| border: none;
|
| padding: 12px 20px;
|
| border-radius: var(--radius-lg);
|
| font-family: var(--font-main);
|
| font-size: 14px;
|
| font-weight: 800;
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 8px;
|
| }
|
| .b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1q2:hover {
|
| background: var(--accent-purple-hover);
|
| }
|
| .d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2 {
|
| padding: 12px;
|
| border-radius: var(--radius-md);
|
| font-size: 13px;
|
| font-weight: 700;
|
| }
|
| .f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2 {
|
| background: var(--success-light);
|
| border: 1.5px solid var(--success-border);
|
| padding: 16px;
|
| border-radius: var(--radius-lg);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
| .f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2 h4 {
|
| font-size: 14px;
|
| font-weight: 900;
|
| color: var(--success);
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .h7i8j9k0l1m2n3o4p5q6r7s8t9u0v1w2 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| }
|
| .i7j8k9l0m1n2o3p4q5r6s7t8u9v0w1x2 {
|
| font-size: 12px;
|
| display: flex;
|
| justify-content: space-between;
|
| }
|
| .i7j8k9l0m1n2o3p4q5r6s7t8u9v0w1x2 strong {
|
| font-weight: 800;
|
| font-family: var(--font-code);
|
| }
|
| .n7o8p9q0r1s2t3u4v5w6x7y8z9a0b1c2 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| }
|
| .p7q8r9s0t1u2v3w4x5y6z7a8b9c0d1e2 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| }
|
| .p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9 {
|
| padding: 30px;
|
| text-align: center;
|
| background: var(--bg-card-sub);
|
| border: 1.5px dashed var(--border-light);
|
| border-radius: var(--radius-xl);
|
| color: var(--text-muted);
|
| font-size: 13px;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9 i {
|
| font-size: 24px;
|
| }
|
| .q4r5s6t7u8v9w0x1y2z3a4b5c6d7e8f9 {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9 {
|
| display: flex;
|
| gap: 12px;
|
| flex-wrap: wrap;
|
| }
|
| .u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9 {
|
| flex: 1;
|
| min-width: 180px;
|
| }
|
| .d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0 {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-muted);
|
| }
|
| .f5g6h7i8j9k0l1m2n3o4p5q6r7s8t9u0 {
|
| background: none;
|
| border: none;
|
| color: var(--primary);
|
| font-weight: 800;
|
| cursor: pointer;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| font-size: 12px;
|
| }
|
| .m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8b9 {
|
| width: 100%;
|
| overflow-x: auto;
|
| border-radius: var(--radius-lg);
|
| border: 1.5px solid var(--border-light);
|
| }
|
| .n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 {
|
| width: 100%;
|
| border-collapse: collapse;
|
| text-align: right;
|
| direction: rtl;
|
| font-size: 13px;
|
| min-width: 520px;
|
| }
|
| .n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 th {
|
| color: var(--text-main);
|
| font-weight: 800;
|
| font-size: 12px;
|
| padding: 12px 14px;
|
| border-bottom: 1.5px solid var(--border-light);
|
| background: var(--bg-card-sub);
|
| }
|
| .n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 td {
|
| padding: 12px 14px;
|
| background: var(--bg-card);
|
| color: var(--text-main);
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
| .a7k2m9x4p6v1n8q3r5t7y2w9c4h6j8 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 14px;
|
| }
|
| .z4m7x1q9v3k8r5t2p6d0h7w4c1b9n8l {
|
| margin-top: 10px;
|
| }
|
| .r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1g2 {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 16px;
|
| }
|
| #s7t8u9v0w1x2y3z4a5b6c7d8e9f0g1h2 {
|
| flex: 1;
|
| padding: 10px 14px;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-md);
|
| font-family: var(--font-code);
|
| font-size: 12px;
|
| background: #ffffff;
|
| color: var(--primary);
|
| font-weight: 700;
|
| outline: none;
|
| }
|
| .h6q3m8x1v9k4r7t2p5d0w8c6z1b9n4l {
|
| background: var(--bg-card-sub);
|
| border: 1.5px solid var(--border-light);
|
| padding: 18px;
|
| border-radius: var(--radius-xl);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| }
|
| .b4q8x2m7n5k1v9r3t6y4p8c2w7h5j9 {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| }
|
| .b4q8x2m7n5k1v9r3t6y4p8c2w7h5j9 h4 {
|
| font-size: 14px;
|
| font-weight: 900;
|
| color: var(--text-main);
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .c9v3k7x1m8q4n6r2t9y5p3w8h4j7a6 {
|
| font-size: 11px;
|
| font-weight: 800;
|
| padding: 3px 10px;
|
| border-radius: var(--radius-pill);
|
| background: var(--border-light);
|
| color: var(--text-muted);
|
| }
|
| .c9v3k7x1m8q4n6r2t9y5p3w8h4j7a6.active {
|
| background: var(--success-light);
|
| color: var(--success);
|
| border: 1px solid var(--success-border);
|
| }
|
| .d2m8q5x9v4k7n1r6t3y8p5c9w2h4j7 {
|
| display: flex;
|
| gap: 10px;
|
| }
|
| .x7y8z9a0b1c2d3e4f5g6h7i8j9k0l1m2 {
|
| background: var(--danger-light);
|
| color: var(--danger);
|
| border: 1px solid var(--danger-border);
|
| padding: 10px 18px;
|
| border-radius: var(--radius-md);
|
| font-weight: 800;
|
| font-size: 13px;
|
| cursor: pointer;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100vw;
|
| height: 100vh;
|
| background: rgba(15, 23, 42, 0.65);
|
| z-index: var(--z-modal-backdrop);
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| padding: 16px;
|
| }
|
| .w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l > div {
|
| background: #ffffff;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-xl);
|
| width: 100%;
|
| max-width: 440px;
|
| }
|
| .lightbox-content-box {
|
| max-width: 800px !important;
|
| max-height: 90vh;
|
| display: flex;
|
| flex-direction: column;
|
| }
|
| .lightbox-header {
|
| padding: 12px 18px;
|
| border-bottom: 1px solid var(--border-light);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| font-weight: 800;
|
| }
|
| .lightbox-body {
|
| padding: 16px;
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| background: #000000;
|
| overflow: hidden;
|
| }
|
| .lightbox-body img {
|
| max-width: 100%;
|
| max-height: 75vh;
|
| object-fit: contain;
|
| }
|
| .h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l {
|
| background: var(--bg-card-sub);
|
| padding: 16px 20px;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| border-bottom: 1px solid var(--border-light);
|
| }
|
| .h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l h3 {
|
| font-size: 16px;
|
| font-weight: 900;
|
| color: var(--text-main);
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
| .s9x3k7m1q8v4r6t2p5d0h9w3c7z1b8l {
|
| background: none;
|
| border: none;
|
| font-size: 22px;
|
| color: var(--text-muted);
|
| cursor: pointer;
|
| }
|
| .h3n7v5k9q2m6x4r8t1y7p3c5w9j2a6 {
|
| padding: 20px;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 14px;
|
| }
|
| .k4m9x1q7v3r8t5p2n6d0h4w9c7z1b8l {
|
| padding: 14px 20px;
|
| background: var(--bg-main);
|
| border-top: 1px solid var(--border-light);
|
| display: flex;
|
| gap: 10px;
|
| }
|
| .q6v2m9x4k7r1t8p3n5d0h6w2c9z4b8l {
|
| position: relative;
|
| }
|
| #c7m2x9q4v8k1r6t3p5n0d7h2w9b4l8z {
|
| text-align: center;
|
| font-family: var(--font-code);
|
| font-size: 24px;
|
| letter-spacing: 8px;
|
| }
|
| .b7q3m9x1v8k4r6t2p5d0h9w3c7z1n8l {
|
| display: flex;
|
| justify-content: center;
|
| gap: 8px;
|
| margin-top: 8px;
|
| }
|
| .f4m9k2x7q1v6z3n8r5w0p4c9y2h7t6a {
|
| width: 12px;
|
| height: 12px;
|
| border-radius: 50%;
|
| background: var(--border);
|
| }
|
| .f4m9k2x7q1v6z3n8r5w0p4c9y2h7t6a.filled {
|
| background: var(--primary);
|
| }
|
| .i7m2x8q4v9k3n5r1t6y8p4c7w2h9j5 {
|
| display: grid;
|
| grid-template-columns: repeat(3, 1fr);
|
| gap: 10px;
|
| direction: ltr;
|
| }
|
| .m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l {
|
| padding: 12px;
|
| font-family: var(--font-code);
|
| font-size: 18px;
|
| font-weight: 800;
|
| border-radius: var(--radius-md);
|
| border: 1.5px solid var(--border-light);
|
| background: var(--bg-card);
|
| cursor: pointer;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
| .m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l:hover {
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| border-color: var(--primary-border);
|
| }
|
| .m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l.action-btn {
|
| font-size: 13px;
|
| font-family: var(--font-main);
|
| background: var(--bg-card-sub);
|
| }
|
| .r8x2m7q4v1k9t5p3n6d0h8w2c7z4b1l {
|
| padding: 10px;
|
| border-radius: var(--radius-md);
|
| font-size: 12px;
|
| font-weight: 700;
|
| text-align: center;
|
| background: var(--danger-light);
|
| color: var(--danger);
|
| border: 1px solid var(--danger-border);
|
| }
|
| .k9l0m1n2o3p4q5r6s7t8u9v0w1x2y3z4 {
|
| position: fixed;
|
| bottom: clamp(12px, 2vw, 24px);
|
| left: clamp(12px, 2vw, 24px);
|
| z-index: var(--z-toast);
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| max-width: 400px;
|
| pointer-events: none;
|
| }
|
| .q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l {
|
| display: none;
|
| position: fixed;
|
| bottom: 0;
|
| right: 0;
|
| left: 0;
|
| height: 62px;
|
| background: #ffffff;
|
| border-top: 1px solid var(--border-light);
|
| z-index: var(--z-bottom-nav);
|
| padding: 4px;
|
| }
|
| .x7q2m9v4k1r8t5p3n6d0h7w2c9z4b8l {
|
| display: flex;
|
| justify-content: space-around;
|
| align-items: center;
|
| height: 100%;
|
| }
|
| .p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 2px;
|
| flex: 1;
|
| height: 100%;
|
| color: var(--text-muted);
|
| cursor: pointer;
|
| }
|
| .p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
|
| color: var(--primary);
|
| font-weight: 800;
|
| }
|
| .p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l i {
|
| font-size: 16px;
|
| }
|
| .p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l span {
|
| font-size: 10px;
|
| }
|
| .onboarding-modal-card {
|
| background: #ffffff !important;
|
| border: 1.5px solid var(--primary-border) !important;
|
| border-radius: var(--radius-xl) !important;
|
| width: 100% !important;
|
| max-width: 620px !important;
|
| max-height: 90vh !important;
|
| display: flex !important;
|
| flex-direction: column !important;
|
| overflow: hidden !important;
|
| }
|
| .onboarding-header {
|
| padding: 16px 22px;
|
| background: var(--bg-card-sub);
|
| border-bottom: 1px solid var(--border-light);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| flex-shrink: 0;
|
| }
|
| .onboarding-logo-title {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| font-weight: 800;
|
| font-size: 15px;
|
| color: var(--text-main);
|
| }
|
| .onboarding-app-logo {
|
| width: 32px !important;
|
| height: 32px !important;
|
| border-radius: 8px;
|
| }
|
| .onboarding-step-indicator {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| direction: ltr;
|
| }
|
| .step-dot {
|
| width: 28px;
|
| height: 28px;
|
| border-radius: 50%;
|
| background: var(--border-light);
|
| color: var(--text-muted);
|
| font-size: 12px;
|
| font-weight: 800;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
| .step-dot.active {
|
| background: var(--primary);
|
| color: #ffffff;
|
| }
|
| .step-dot.completed {
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| border: 1.5px solid var(--primary-border);
|
| }
|
| .onboarding-body-wrapper {
|
| padding: 24px;
|
| flex: 1;
|
| overflow-y: auto;
|
| display: flex;
|
| flex-direction: column;
|
| }
|
| .onboarding-step-content {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| text-align: center;
|
| gap: 16px;
|
| }
|
| .onboarding-hero-icon {
|
| width: 72px;
|
| height: 72px;
|
| border-radius: 22px;
|
| background: var(--primary-light);
|
| color: var(--primary);
|
| border: 1.5px solid var(--primary-border);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 32px;
|
| }
|
| .onboarding-step-content h2 {
|
| font-size: clamp(18px, 1.8vw, 22px);
|
| font-weight: 900;
|
| color: var(--text-main);
|
| margin: 0;
|
| }
|
| .onboarding-subtitle {
|
| font-size: 13px;
|
| color: var(--text-muted);
|
| line-height: 1.6;
|
| max-width: 500px;
|
| }
|
| .onboarding-features-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| width: 100%;
|
| text-align: right;
|
| margin-top: 8px;
|
| }
|
| .onboarding-feature-item {
|
| display: flex;
|
| align-items: flex-start;
|
| gap: 12px;
|
| padding: 12px 16px;
|
| background: var(--bg-card-sub);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| }
|
| .onboarding-feature-item i {
|
| font-size: 20px;
|
| margin-top: 2px;
|
| flex-shrink: 0;
|
| }
|
| .onboarding-feature-item div {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 2px;
|
| }
|
| .onboarding-feature-item strong {
|
| font-size: 13px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| }
|
| .onboarding-feature-item span {
|
| font-size: 11px;
|
| color: var(--text-muted);
|
| line-height: 1.4;
|
| }
|
| .onboarding-cards-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
| gap: 12px;
|
| width: 100%;
|
| margin-top: 8px;
|
| }
|
| .onboarding-mini-card {
|
| background: #ffffff;
|
| border: 1.5px solid var(--border-light);
|
| border-radius: var(--radius-lg);
|
| padding: 14px;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: flex-start;
|
| text-align: right;
|
| gap: 6px;
|
| }
|
| .onboarding-mini-card:hover {
|
| border-color: var(--primary-border);
|
| }
|
| .onboarding-mini-card i {
|
| font-size: 22px;
|
| }
|
| .onboarding-mini-card h4 {
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| margin: 2px 0 0 0;
|
| }
|
| .onboarding-mini-card span {
|
| font-size: 10px;
|
| color: var(--text-muted);
|
| line-height: 1.4;
|
| }
|
| .onboarding-input-group {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 6px;
|
| width: 100%;
|
| text-align: right;
|
| margin-top: 8px;
|
| }
|
| .onboarding-input-group label {
|
| font-size: 12px;
|
| font-weight: 800;
|
| color: var(--text-main);
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| }
|
| .onboarding-preference-toggles {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 10px;
|
| width: 100%;
|
| text-align: right;
|
| margin-top: 6px;
|
| }
|
| .onboarding-footer {
|
| padding: 16px 22px;
|
| background: var(--bg-card-sub);
|
| border-top: 1px solid var(--border-light);
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| flex-shrink: 0;
|
| }
|
| @media (max-width: 1024px) {
|
| body {
|
| padding-bottom: 68px;
|
| }
|
| .q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l {
|
| display: block;
|
| }
|
| .chat-layout-split-wrapper {
|
| flex-direction: column;
|
| }
|
| .canvas-artifacts-panel {
|
| width: 100%;
|
| min-width: 0;
|
| height: 450px;
|
| }
|
| .home-bottom-sections-wrapper {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
| @media (max-width: 640px) {
|
| .a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
|
| padding: 6px;
|
| }
|
| .c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6 {
|
| border-radius: var(--radius-lg);
|
| padding: 8px 12px;
|
| }
|
| .home-hub-welcome-banner {
|
| flex-direction: column;
|
| text-align: center;
|
| padding: 16px;
|
| }
|
| .home-quick-stats {
|
| justify-content: center;
|
| }
|
| .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8 {
|
| grid-template-columns: 1fr;
|
| }
|
| .chat-message-row {
|
| max-width: 96%;
|
| }
|
| .header-model-selector-wrapper {
|
| width: 100%;
|
| margin-top: 4px;
|
| }
|
| .model-select-dropdown {
|
| width: 100%;
|
| }
|
| .onboarding-body-wrapper {
|
| padding: 16px;
|
| }
|
| .onboarding-hero-icon {
|
| width: 56px;
|
| height: 56px;
|
| font-size: 24px;
|
| }
|
| .onboarding-cards-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| } |
