/* ============================================================ CircleTrade AI — Full Design System Dark glassmorphism, electric teal + violet accents, animated pipeline, premium micro-interactions. ============================================================ */ /* ── Google Fonts loaded in ─────────────────────────── */ /* ── Custom Properties ─────────────────────────────────────── */ :root { --bg-primary: #070b14; --bg-secondary: #0c1220; --bg-tertiary: #111929; --glass-bg: rgba(255,255,255,0.04); --glass-bg-hover: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.07); --glass-border-hover:rgba(0,212,255,0.3); --accent-teal: #00d4ff; --accent-teal-dim: rgba(0,212,255,0.12); --accent-teal-glow: rgba(0,212,255,0.4); --accent-violet: #7c3aed; --accent-violet-dim:rgba(124,58,237,0.14); --accent-gradient: linear-gradient(135deg,#00d4ff,#7c3aed); --success: #10b981; --success-dim: rgba(16,185,129,0.14); --warning: #f59e0b; --warning-dim: rgba(245,158,11,0.14); --danger: #ef4444; --danger-dim: rgba(239,68,68,0.14); --info: #3b82f6; --info-dim: rgba(59,130,246,0.14); --text-primary: #e8edf5; --text-secondary: #8a97ad; --text-muted: #4d5e78; --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --sidebar-width: 264px; --topbar-height: 70px; --gap: 20px; --radius: 12px; --radius-lg: 18px; --shadow-card: 0 6px 30px rgba(0,0,0,0.45); --shadow-teal: 0 0 24px rgba(0,212,255,0.22); --shadow-violet: 0 0 24px rgba(124,58,237,0.22); --tr: 0.2s ease; --tr-slow: 0.4s ease; } /* ── Reset ─────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden} body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.6} a{text-decoration:none;color:inherit} button{cursor:pointer;border:none;outline:none;font-family:var(--font-body);background:none} input,select,textarea{font-family:var(--font-body);outline:none;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--glass-border);padding:8px 12px;border-radius:6px} svg{flex-shrink:0;display:block} select option{background:var(--bg-secondary);color:var(--text-primary)} /* ── Canvas background ─────────────────────────────────────── */ #particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none} /* ── App Shell ─────────────────────────────────────────────── */ #app{position:relative;z-index:1;display:flex;height:100vh;overflow:hidden} /* ════════════════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════════════════ */ #sidebar{ width:var(--sidebar-width);height:100vh; background:rgba(7,11,20,0.82); border-right:1px solid var(--glass-border); backdrop-filter:blur(20px); display:flex;flex-direction:column;flex-shrink:0; } .sidebar-logo{ display:flex;align-items:center;gap:12px; padding:22px 18px 18px; border-bottom:1px solid var(--glass-border); } .logo-icon{ width:42px;height:42px;border-radius:10px; background:linear-gradient(135deg,rgba(0,212,255,0.14),rgba(124,58,237,0.14)); border:1px solid rgba(0,212,255,0.2); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .logo-text{display:flex;flex-direction:column;line-height:1.15} .logo-main{font-family:var(--font-heading);font-weight:700;font-size:16px;color:var(--text-primary)} .logo-sub{ font-family:var(--font-heading);font-weight:700;font-size:10px;letter-spacing:3.5px; background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .sidebar-status{ display:flex;align-items:center;gap:8px; padding:10px 18px;font-size:10px;font-weight:700;letter-spacing:1.8px; color:var(--success);border-bottom:1px solid var(--glass-border); } .status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0} .status-dot.pulse{animation:statusPulse 2.2s infinite} @keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}} .sidebar-nav{flex:1;padding:10px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto} .sidebar-nav::-webkit-scrollbar{width:3px} .sidebar-nav::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px} .nav-item{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:9px; color:var(--text-secondary);font-size:13.5px;font-weight:500; transition:all var(--tr);position:relative; } .nav-item:hover{background:var(--glass-bg-hover);color:var(--text-primary)} .nav-item.active{ background:linear-gradient(135deg,rgba(0,212,255,.11),rgba(124,58,237,.07)); color:var(--accent-teal);border:1px solid rgba(0,212,255,.14); } .nav-icon{width:17px;height:17px;flex-shrink:0} .nav-badge{ margin-left:auto;background:var(--danger);color:#fff; font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center; } .sidebar-footer{padding:14px;border-top:1px solid var(--glass-border)} .next-run-card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius);padding:13px 15px; } .next-run-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;margin-bottom:5px} .next-run-timer{font-family:var(--font-mono);font-size:21px;font-weight:500;color:var(--accent-teal);margin-bottom:9px} .next-run-bar{height:3px;background:rgba(255,255,255,.05);border-radius:10px;overflow:hidden} .next-run-fill{height:100%;background:var(--accent-gradient);border-radius:10px;transition:width 1s linear} /* ════════════════════════════════════════════════════════════ MAIN ════════════════════════════════════════════════════════════ */ #main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} #topbar{ height:var(--topbar-height);padding:0 28px; display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--glass-border); background:rgba(7,11,20,.65);backdrop-filter:blur(20px);flex-shrink:0; } .topbar-left h1{font-family:var(--font-heading);font-size:19px;font-weight:700} .breadcrumb{font-size:11px;color:var(--text-muted);margin-top:2px} .topbar-right{display:flex;align-items:center;gap:16px} .datetime-display{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)} .run-btn{ display:flex;align-items:center;gap:8px;padding:9px 20px; background:var(--accent-gradient);color:#fff;font-size:13px;font-weight:600; border-radius:8px;box-shadow:var(--shadow-teal);transition:all var(--tr); } .run-btn:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(0,212,255,.4)} .run-btn svg{width:13px;height:13px} #content{flex:1;overflow-y:auto;padding:24px 28px} #content::-webkit-scrollbar{width:5px} #content::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px} /* ════════════════════════════════════════════════════════════ CARDS / PRIMITIVES ════════════════════════════════════════════════════════════ */ .card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius-lg);backdrop-filter:blur(12px); transition:all var(--tr);overflow:hidden; } .card:hover{border-color:rgba(0,212,255,.13);box-shadow:var(--shadow-card)} .card-header{ display:flex;align-items:center;justify-content:space-between; padding:16px 20px;border-bottom:1px solid var(--glass-border); } .card-title{ font-family:var(--font-heading);font-size:13.5px;font-weight:600; display:flex;align-items:center;gap:7px; } .card-body{padding:20px} /* ── KPI Grid ───────────────────────────────────────────────── */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:var(--gap)} .kpi-card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden; transition:all var(--tr); } .kpi-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:var(--accent-gradient);opacity:0;transition:opacity var(--tr); } .kpi-card:hover::before{opacity:1} .kpi-card:hover{border-color:rgba(0,212,255,.15);transform:translateY(-2px);box-shadow:var(--shadow-card)} .kpi-icon-wrap{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:21px} .kpi-icon-teal {background:var(--accent-teal-dim)} .kpi-icon-violet {background:var(--accent-violet-dim)} .kpi-icon-success{background:var(--success-dim)} .kpi-icon-warning{background:var(--warning-dim)} .kpi-value{font-family:var(--font-heading);font-size:34px;font-weight:800;color:var(--text-primary);line-height:1;margin-bottom:4px} .kpi-label{font-size:12px;color:var(--text-secondary);font-weight:500} .kpi-delta{position:absolute;top:16px;right:16px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px} .kpi-delta.up{background:var(--success-dim);color:var(--success)} .kpi-delta.down{background:var(--danger-dim);color:var(--danger)} /* ── Module Cards ──────────────────────────────────────────── */ .module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:var(--gap)} .module-card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius);padding:16px 18px;transition:all var(--tr); } .module-card:hover{border-color:rgba(0,212,255,.12)} .module-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .module-name{font-family:var(--font-heading);font-size:13px;font-weight:700} .module-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.4px} .badge-online {background:var(--success-dim);color:var(--success)} .badge-running{background:var(--info-dim);color:var(--info)} .badge-warning{background:var(--warning-dim);color:var(--warning)} .module-stat{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--accent-teal);margin-bottom:3px} .module-desc{font-size:11px;color:var(--text-muted)} /* ── Activity Feed ─────────────────────────────────────────── */ .activity-feed{display:flex;flex-direction:column} .activity-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--glass-border);animation:fadeInUp .3s ease} .activity-item:last-child{border-bottom:none} .activity-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0} .activity-dot.teal {background:var(--accent-teal);box-shadow:0 0 8px var(--accent-teal-glow)} .activity-dot.violet {background:var(--accent-violet);box-shadow:0 0 8px rgba(124,58,237,.5)} .activity-dot.success{background:var(--success)} .activity-dot.warning{background:var(--warning)} .activity-dot.danger {background:var(--danger)} .activity-content{flex:1;min-width:0} .activity-title{font-size:13px;font-weight:500;color:var(--text-primary)} .activity-meta{font-size:11px;color:var(--text-muted);margin-top:2px} .activity-time{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);flex-shrink:0;white-space:nowrap} /* ── Dashboard Grid ────────────────────────────────────────── */ .dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--gap)} /* ── Corridors ─────────────────────────────────────────────── */ .corridor-list{display:flex;flex-direction:column;gap:13px} .corridor-item{display:flex;flex-direction:column;gap:5px} .corridor-header{display:flex;justify-content:space-between;align-items:center} .corridor-name{font-size:13px;font-weight:500} .corridor-score{font-family:var(--font-mono);font-size:13px;font-weight:700} .corridor-bar{height:5px;background:rgba(255,255,255,.05);border-radius:10px;overflow:hidden} .corridor-fill{height:100%;background:var(--accent-gradient);border-radius:10px;transition:width 1.2s ease} .corridor-meta{display:flex;gap:14px;font-size:10px;color:var(--text-muted)} .score-high {color:var(--success)} .score-medium{color:var(--warning)} .score-low {color:var(--danger)} /* ════════════════════════════════════════════════════════════ PIPELINE VIEW ════════════════════════════════════════════════════════════ */ .pipeline-container{max-width:860px;margin:0 auto} .pipeline-hero{text-align:center;padding:28px 0 22px} .pipeline-hero h2{ font-family:var(--font-heading);font-size:28px;font-weight:800;margin-bottom:8px; background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .pipeline-hero p{color:var(--text-secondary);font-size:14px} .pipeline-controls{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:28px;flex-wrap:wrap} .pipeline-customer-select{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:8px;padding:10px 16px;color:var(--text-primary); font-size:13px;min-width:220px;transition:border-color var(--tr); } .pipeline-customer-select:focus{border-color:var(--accent-teal)} .pipeline-run-btn{ display:flex;align-items:center;gap:8px;padding:10px 26px; background:var(--accent-gradient);color:#fff;font-size:14px;font-weight:600; border-radius:8px;box-shadow:var(--shadow-teal);transition:all var(--tr); } .pipeline-run-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 32px rgba(0,212,255,.4)} .pipeline-run-btn:disabled{opacity:.5;cursor:not-allowed} .pipeline-steps{display:flex;flex-direction:column;position:relative} .pipeline-steps::before{ content:'';position:absolute;left:27px;top:32px;bottom:32px;width:2px; background:var(--glass-border);z-index:0; } .pipeline-step{display:flex;gap:18px;padding:14px 0;position:relative;z-index:1} .step-indicator{ width:54px;height:54px;border-radius:50%; background:var(--bg-secondary);border:2px solid var(--glass-border); display:flex;align-items:center;justify-content:center;flex-shrink:0; font-size:20px;transition:all var(--tr-slow); } .pipeline-step.running .step-indicator{border-color:var(--accent-teal);animation:stepPulse 1.2s ease-in-out infinite} .pipeline-step.done .step-indicator{ background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(124,58,237,.18)); border-color:var(--success); } @keyframes stepPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.2)} 50%{box-shadow:0 0 0 10px rgba(0,212,255,0)} } .step-content{ flex:1;background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius);padding:14px 18px; min-height:54px;display:flex;flex-direction:column;justify-content:center; transition:all var(--tr); } .pipeline-step.running .step-content{border-color:rgba(0,212,255,.2);background:rgba(0,212,255,.03)} .pipeline-step.done .step-content{border-color:rgba(16,185,129,.15)} .step-title{font-family:var(--font-heading);font-size:14px;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:8px} .step-subtitle{font-size:12px;color:var(--text-muted)} .step-output{margin-top:12px;padding-top:12px;border-top:1px solid var(--glass-border)} .step-output-title{font-size:9px;font-weight:700;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px} .step-output-content{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);white-space:pre-wrap;line-height:1.7} .spin{ display:inline-block;width:16px;height:16px; border:2px solid rgba(0,212,255,.2);border-top-color:var(--accent-teal); border-radius:50%;animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .pipeline-result{ margin-top:22px;border-radius:var(--radius-lg);overflow:hidden; background:linear-gradient(135deg,rgba(0,212,255,.05),rgba(124,58,237,.05)); border:1px solid rgba(0,212,255,.15); } .pipeline-result-header{ padding:18px 22px; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(124,58,237,.08)); border-bottom:1px solid rgba(0,212,255,.1); } .pipeline-result-header h3{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--accent-teal)} .pipeline-result-body{padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .result-metric{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:14px 16px} .result-metric-label{font-size:9px;font-weight:700;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:5px} .result-metric-value{font-family:var(--font-heading);font-size:19px;font-weight:700} /* ════════════════════════════════════════════════════════════ CUSTOMERS ════════════════════════════════════════════════════════════ */ .customers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--gap)} .customer-card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:all var(--tr); } .customer-card:hover{border-color:rgba(0,212,255,.2);transform:translateY(-2px);box-shadow:var(--shadow-card)} .customer-header{display:flex;align-items:center;gap:12px;margin-bottom:14px} .customer-flag{font-size:28px;line-height:1} .customer-info{flex:1;min-width:0} .customer-name{font-family:var(--font-heading);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .customer-sector{font-size:11px;color:var(--text-muted)} .customer-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .cstat{background:rgba(255,255,255,.03);border-radius:8px;padding:10px} .cstat-value{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--accent-teal)} .cstat-label{font-size:10px;color:var(--text-muted);margin-top:2px} .customer-products{display:flex;flex-wrap:wrap;gap:5px} .product-tag{font-size:10px;padding:3px 9px;border-radius:4px;background:var(--accent-teal-dim);color:var(--accent-teal);font-weight:500} /* ════════════════════════════════════════════════════════════ OPPORTUNITIES ════════════════════════════════════════════════════════════ */ .opportunities-filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap} .filter-btn{ padding:7px 16px;border-radius:20px;font-size:12px;font-weight:500; background:var(--glass-bg);border:1px solid var(--glass-border); color:var(--text-secondary);transition:all var(--tr); } .filter-btn:hover,.filter-btn.active{background:var(--accent-teal-dim);border-color:rgba(0,212,255,.3);color:var(--accent-teal)} .opportunities-list{display:flex;flex-direction:column;gap:11px} .opportunity-card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius);padding:16px 18px; display:flex;align-items:center;gap:18px;transition:all var(--tr);cursor:pointer; } .opportunity-card:hover{border-color:rgba(0,212,255,.15);transform:translateX(3px)} .opp-rank{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text-muted);width:32px;text-align:center} .opp-score-ring{width:54px;height:54px;position:relative;flex-shrink:0} .opp-score-ring svg{width:54px;height:54px;transform:rotate(-90deg)} .opp-score-ring-text{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-heading);font-size:13px;font-weight:700; } .opp-details{flex:1;min-width:0} .opp-market{font-family:var(--font-heading);font-size:14px;font-weight:700} .opp-product{font-size:12px;color:var(--text-muted);margin-top:2px} .opp-metrics{display:flex;gap:18px} .opp-metric{text-align:center} .opp-metric-value{font-family:var(--font-mono);font-size:14px;font-weight:600} .opp-metric-label{font-size:10px;color:var(--text-muted)} /* ════════════════════════════════════════════════════════════ COMPLIANCE ════════════════════════════════════════════════════════════ */ .compliance-layout{display:grid;grid-template-columns:360px 1fr;gap:var(--gap);align-items:start} .hs-input{ width:100%;background:rgba(255,255,255,.04);border:1px solid var(--glass-border); border-radius:8px;padding:11px 15px;color:var(--text-primary);font-size:13px;transition:all var(--tr); } .hs-input:focus{border-color:var(--accent-teal);box-shadow:0 0 0 3px rgba(0,212,255,.08)} .hs-lookup-btn{ width:100%;padding:11px;background:var(--accent-gradient);color:#fff; font-size:13px;font-weight:600;border-radius:8px;transition:all var(--tr); } .hs-lookup-btn:hover{box-shadow:var(--shadow-teal);transform:translateY(-1px)} .compliance-result-item{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--glass-border)} .compliance-result-item:last-child{border-bottom:none} .compliance-check-label{font-size:13px;color:var(--text-secondary)} .compliance-check-value{font-size:13px;font-weight:600} .compliance-check-value.pass{color:var(--success)} .compliance-check-value.fail{color:var(--danger)} .compliance-check-value.warn{color:var(--warning)} .risk-meter{margin:14px 0} .risk-meter-track{height:8px;background:rgba(255,255,255,.05);border-radius:10px;overflow:hidden;margin-top:7px} .risk-meter-fill{height:100%;border-radius:10px;transition:width .9s ease} /* ════════════════════════════════════════════════════════════ NOTIFICATIONS ════════════════════════════════════════════════════════════ */ .notifications-list{display:flex;flex-direction:column;gap:11px} .notification-card{ background:var(--glass-bg);border:1px solid var(--glass-border); border-radius:var(--radius);padding:15px 17px; display:flex;gap:13px;align-items:flex-start;transition:all var(--tr);position:relative;overflow:hidden; } .notification-card.unread::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-gradient); } .notification-card:hover{border-color:rgba(0,212,255,.14)} .notif-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0} .notif-icon.route {background:var(--accent-teal-dim)} .notif-icon.compliance {background:var(--danger-dim)} .notif-icon.opportunity{background:var(--success-dim)} .notif-icon.info {background:var(--info-dim)} .notif-body{flex:1;min-width:0} .notif-title{font-size:13px;font-weight:600;margin-bottom:3px} .notif-message{font-size:12px;color:var(--text-secondary);line-height:1.5} .notif-meta{display:flex;align-items:center;gap:10px;margin-top:7px} .notif-customer{font-size:11px;color:var(--accent-teal);font-weight:500} .notif-time{font-size:11px;color:var(--text-muted)} .notif-dismiss{color:var(--text-muted);font-size:16px;padding:4px 7px;border-radius:4px;transition:all var(--tr);line-height:1} .notif-dismiss:hover{color:var(--text-primary);background:var(--glass-bg-hover)} /* ════════════════════════════════════════════════════════════ LOGS ════════════════════════════════════════════════════════════ */ .logs-table-wrap{overflow-x:auto} .logs-table{width:100%;border-collapse:collapse;font-size:12px} .logs-table th{ padding:10px 14px;text-align:left;font-size:9.5px;font-weight:700; letter-spacing:1.1px;text-transform:uppercase;color:var(--text-muted); border-bottom:1px solid var(--glass-border); } .logs-table td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.025);vertical-align:top} .logs-table tr:hover td{background:rgba(255,255,255,.02)} .log-timestamp{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap} .log-module-badge{ display:inline-block;padding:2px 8px;border-radius:4px; font-size:9.5px;font-weight:700;letter-spacing:.3px; } .log-module-mf{background:var(--accent-teal-dim);color:var(--accent-teal)} .log-module-tm{background:var(--accent-violet-dim);color:#a78bfa} .log-module-dd{background:var(--danger-dim);color:var(--danger)} .log-module-cb{background:var(--success-dim);color:var(--success)} .log-message{color:var(--text-secondary);max-width:420px;line-height:1.5} .log-customer{color:var(--accent-teal);font-size:11px;font-weight:500} /* ════════════════════════════════════════════════════════════ MODAL ════════════════════════════════════════════════════════════ */ .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center} .modal.hidden{display:none} .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)} .modal-content{ position:relative;z-index:1;background:var(--bg-secondary); border:1px solid var(--glass-border);border-radius:var(--radius-lg); width:90%;max-width:680px;max-height:82vh;overflow-y:auto; box-shadow:0 30px 70px rgba(0,0,0,.65);animation:fadeInUp .25s ease; } .modal-content::-webkit-scrollbar{width:4px} .modal-content::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px} .modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--glass-border)} .modal-header h2{font-family:var(--font-heading);font-size:16px;font-weight:700} .modal-close{color:var(--text-muted);font-size:18px;padding:4px 8px;border-radius:4px;transition:all var(--tr)} .modal-close:hover{color:var(--text-primary);background:var(--glass-bg-hover)} .modal-body{padding:22px} /* ════════════════════════════════════════════════════════════ ANIMATIONS ════════════════════════════════════════════════════════════ */ @keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .view-enter{animation:fadeInUp .3s ease} /* ════════════════════════════════════════════════════════════ UTILITIES ════════════════════════════════════════════════════════════ */ .text-teal {color:var(--accent-teal)} .text-violet {color:var(--accent-violet)} .text-success{color:var(--success)} .text-warning{color:var(--warning)} .text-danger {color:var(--danger)} .text-muted {color:var(--text-muted)} .text-mono {font-family:var(--font-mono)} .font-heading{font-family:var(--font-heading)} .empty-state{text-align:center;padding:52px 20px;color:var(--text-muted)} .empty-state-icon{font-size:44px;margin-bottom:12px} .empty-state-text{font-size:14px} /* ── Inline link buttons ─────────────────────────────────── */ .link-btn{background:none;border:none;color:var(--accent-teal);font-size:11px;cursor:pointer;font-weight:500} .link-btn:hover{opacity:.75} /* ── Sidebar powered-by footer ─────────────────────────────── */ .sidebar-powered{padding:10px 14px 0} .powered-link{ display:block;padding:11px 13px;border-radius:10px; background:linear-gradient(135deg,rgba(0,212,255,.06),rgba(124,58,237,.06)); border:1px solid rgba(124,58,237,.18); text-decoration:none;transition:all var(--tr); } .powered-link:hover{border-color:rgba(124,58,237,.4);background:linear-gradient(135deg,rgba(0,212,255,.10),rgba(124,58,237,.10))} .powered-label{font-size:8px;font-weight:700;letter-spacing:2px;color:var(--text-muted);margin-bottom:3px} .powered-brand{ font-family:var(--font-heading);font-size:13px;font-weight:700; background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .powered-cta{font-size:10px;color:var(--text-muted);margin-top:4px;transition:color var(--tr)} .powered-link:hover .powered-cta{color:var(--accent-teal)} /* ── API Mode & Settings topbar styles ──────────────────────── */ .api-mode-selector { display: flex; align-items: center; gap: 8px; margin-right: 14px; } .api-mode-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 10px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--text-muted); transition: all var(--tr); } .api-mode-badge:hover { background: rgba(255,255,255,0.06); } .api-mode-badge.mock { color: var(--accent-teal); border-color: rgba(0,212,255,0.2); background: rgba(0,212,255,0.03); } .api-mode-badge.mock .mode-dot { background: var(--accent-teal); box-shadow: 0 0 8px var(--accent-teal); } .api-mode-badge.live { color: #a78bfa; border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.05); } .api-mode-badge.live .mode-dot { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; } .mode-dot { width: 6px; height: 6px; border-radius: 50%; transition: all var(--tr); } .api-settings-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-muted); cursor: pointer; transition: all var(--tr); } .api-settings-btn:hover { color: var(--text); border-color: var(--border-hover); background: rgba(255,255,255,0.06); } .api-settings-btn svg { width: 14px; height: 14px; } .settings-modal { max-width: 440px; } /* ── Circle Wallet Layout Utilities ── */ .grid { display: grid; } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .gap-6 { gap: 24px; } .col-span-2 { grid-column: span 2 / span 2; } .flex { display: flex; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } .flex-col { flex-direction: column; } .space-y-2 > * + * { margin-top: 8px; } .space-y-3 > * + * { margin-top: 12px; } .space-y-4 > * + * { margin-top: 16px; } .space-y-6 > * + * { margin-top: 24px; } .w-full { width: 100%; } .mt-2 { margin-top: 8px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .text-xs { font-size: 12px; } .text-sm { font-size: 14px; } .text-base { font-size: 16px; } .font-semibold { font-weight: 600; } .font-black { font-weight: 900; } .tracking-wider { letter-spacing: 0.05em; } .tracking-tight { letter-spacing: -0.025em; }