*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#0F172A;
  --secondary:#475569;
  --accent:#3B82F6;
  --success:#10B981;
  --warning:#F59E0B;
  --error:#EF4444;
  --info:#06B6D4;
  --bg:#FFFFFF;
  --bg-secondary:#FAFAFA;
  --bg-tertiary:#F5F5F5;
  --border:#E5E5E5;
  --border-light:#F0F0F0;
  --text-primary:#0F172A;
  --text-secondary:#64748B;
  --text-muted:#94A3B8;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04);
  --shadow:0 4px 6px -1px rgba(15,23,42,0.08),0 2px 4px -1px rgba(15,23,42,0.04);
  --shadow-lg:0 10px 15px -3px rgba(15,23,42,0.08),0 4px 6px -2px rgba(15,23,42,0.04);
  --shadow-hover:0 20px 25px -5px rgba(15,23,42,0.08),0 10px 10px -5px rgba(15,23,42,0.04);
  --transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
  --transition-slow:all 0.3s cubic-bezier(0.4,0,0.2,1);
  --sidebar-width:240px;
  --sidebar-collapsed-width:70px;
  --header-height:56px;
  --mobile-breakpoint:768px;
  --radius-sm:0.25rem;
  --radius:0.375rem;
  --radius-lg:0.5rem;
}
@media (prefers-color-scheme:dark){:root{
  --primary:#F8FAFC;
  --secondary:#CBD5E1;
  --accent:#60A5FA;
  --bg:#0F172A;
  --bg-secondary:#1A202C;
  --bg-tertiary:#2D3748;
  --border:#2D3748;
  --border-light:#4A5568;
  --text-primary:#F8FAFC;
  --text-secondary:#CBD5E1;
  --text-muted:#94A3B8;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.25);
  --shadow:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.4),0 4px 6px -2px rgba(0,0,0,0.2);
  --shadow-hover:0 20px 25px -5px rgba(0,0,0,0.5),0 10px 10px -5px rgba(0,0,0,0.3);
}}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.5;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px}

/* Loading States */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(248,250,252,0.97);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(8px)}
@media (prefers-color-scheme:dark){.loading-overlay{background:rgba(15,23,42,0.97)}}
.loading-spinner{text-align:center}
.spinner-large{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s cubic-bezier(0.68,-0.55,0.265,1.55) infinite;margin:0 auto 1rem}
.spinner-small{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;margin-right:0.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Main Layout */
.app-container{display:flex;min-height:100vh;transition:var(--transition);background:var(--bg)}
.mobile-menu-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:1001;width:48px;height:48px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.mobile-menu-toggle span{display:block;width:24px;height:2px;background:var(--text-primary);margin:3px 0;transition:var(--transition);border-radius:2px}
.mobile-menu-toggle:hover{background:var(--bg-secondary);transform:scale(1.05)}

/* Sidebar */
.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:var(--transition-slow);position:relative;box-shadow:1px 0 3px rgba(15,23,42,0.02)}
.sidebar.collapsed{width:var(--sidebar-collapsed-width)}
.sidebar-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background:var(--bg);height:var(--header-height)}
.logo-wrapper{display:flex;align-items:center;gap:0.5rem}
.logo{font-size:1.25rem;font-weight:800;margin-bottom:0;letter-spacing:-0.025em}
.logo-icon{font-size:1.25rem;flex-shrink:0;cursor: pointer;}
.logo-text{font-size:1.125rem;font-weight:700;white-space:nowrap;transition:opacity 0.2s;letter-spacing:-0.025em;cursor: pointer;}
.logo-subtitle{font-size:0.625rem;color:var(--text-secondary);font-weight:500;letter-spacing:0.025em}
.sidebar.collapsed .logo-text{opacity:0;width:0;overflow:hidden}
.sidebar-toggle{padding:0.375rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;width:28px;height:28px}
.sidebar-toggle:hover{background:var(--bg-tertiary);transform:scale(1.05)}
.desktop-only{display:block}

/* Navigation */
.nav{flex:1;padding:0.75rem 0;overflow-y:auto}
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.nav-item{display:flex;align-items:center;padding:0.625rem 1.25rem;color:var(--text-secondary);cursor:pointer;transition:background-color 0.15s ease,color 0.15s ease,border-color 0.15s ease;border-left:3px solid transparent;position:relative;font-weight:500;font-size:0.875rem}
.sidebar.collapsed .nav-item{padding:0.625rem 0;justify-content:center}
.nav-item:hover{background:var(--bg);color:var(--text-primary)}
.nav-item.active{background:var(--bg);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.nav-item.active::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:2px;height:60%;background:var(--accent);border-radius:2px 0 0 2px}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-right:0.75rem;flex-shrink:0}
.sidebar.collapsed .nav-icon{margin-right:0}
.nav-label{white-space:nowrap;transition:opacity 0.2s;letter-spacing:0.01em}
.sidebar.collapsed .nav-label{opacity:0;width:0;overflow:hidden}

/* User Section */
.user-section{padding:1rem;border-top:1px solid var(--border);background:var(--bg)}
.sidebar.collapsed .user-section{padding:0.75rem}
.user-info{margin-bottom:0.75rem}
.user-email{font-size:0.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.user-plan{font-size:0.75rem;color:var(--text-secondary);font-weight:500;margin-top:0.125rem}
.btn-logout{width:120px;padding:0.5rem;background:transparent;color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-weight:500;font-size:0.8125rem}
.btn-logout:hover{background:var(--error);color:white;border-color:var(--error);transform:translateY(-1px)}
.btn-logout.icon-only{padding:0.375rem;font-size:1rem}

/* Main Content */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg-tertiary)}
.header{padding:1rem 1.5rem;background:var(--bg);display:flex;justify-content:space-between;align-items:center;min-height:var(--header-height);box-shadow:var(--shadow-sm);gap:1.5rem}
.header-left{display:flex;align-items:center;gap:1.5rem;flex:1;min-width:0}
.header-title{font-size:1.25rem;font-weight:700;letter-spacing:-0.025em;color:var(--text-primary);white-space:nowrap}
.header-actions{display:flex;gap:0.75rem;align-items:center;flex-shrink:0}
.header-filters{display:flex;gap:0.5rem}
.sort-select,.filter-select{padding:0.375rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-primary);font-size:0.8125rem;cursor:pointer;transition:border-color 0.15s ease,background-color 0.15s ease;font-weight:500}
.sort-select:hover,.filter-select:hover{border-color:var(--accent);background:var(--bg-secondary)}
.content{flex:1;padding:1.5rem;overflow-y:auto;background:var(--bg-tertiary);transition:opacity 0.1s ease}
.content.switching{opacity:0.7}
/* Search box in header */
.search-box-header{position:relative;flex:1;max-width:500px}
.search-box-header input{width:100%;padding:0.625rem 1rem 0.625rem 2.75rem;border:1px solid var(--border);border-radius:var(--radius-lg);font-size:0.875rem;background:var(--bg-secondary);color:var(--text-primary);transition:all 0.2s;font-weight:500}
.search-box-header input::placeholder{color:var(--text-muted)}
.search-box-header input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.1);background:var(--bg)}
.search-box-header::before{content:"🔍";position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1rem;opacity:0.6;pointer-events:none}
/* Dashboard */
.dashboard-view{animation:none}
.welcome-section{background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;color:white;box-shadow:var(--shadow-lg)}
.welcome-section h3{margin-bottom:0.5rem;font-size:1.25rem;font-weight:700}
.quick-actions{display:flex;gap:0.75rem;margin-top:1rem}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{padding:1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);transition:box-shadow 0.15s ease,transform 0.15s ease;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--info));opacity:0;transition:opacity 0.2s ease}
.stat-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.stat-card:hover::before{opacity:1}
.stat-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.375rem;font-weight:600}
.stat-value{font-size:1.75rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.025em}
.stat-change{font-size:0.75rem;margin-top:0.375rem;color:var(--text-secondary);font-weight:500}
.stat-change.positive{color:var(--success)}
.stat-change.negative{color:var(--error)}

/* Chart Container */
.chart-container{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-bottom:2.5rem;box-shadow:var(--shadow-sm)}
.chart-container h3{margin-bottom:1.5rem;font-weight:700;font-size:1.25rem;letter-spacing:-0.025em}
.chart-wrapper{position:relative;height:320px}
.chart-wrapper canvas,#executionChart{max-height:320px!important;width:100%!important;height:auto!important}

/* Lists & Tables */
.list-container{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.list-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary)}
.list-title{font-size:1rem;font-weight:700;letter-spacing:-0.025em}
.list-item{padding:1rem 1.25rem;border-bottom:1px solid var(--border-light);transition:background-color 0.15s ease;position:relative}
.list-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;transition:opacity 0.15s ease}
.list-item:hover{background:var(--bg-secondary)}
.list-item:hover::before{opacity:1}
.list-item:last-child{border-bottom:none}
.list-item-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:0.75rem}
.list-item-title{font-size:0.9375rem;font-weight:600;margin-bottom:0.25rem;letter-spacing:-0.01em}
.list-item-meta{display:flex;gap:0.75rem;font-size:0.75rem;color:var(--text-secondary);margin-top:0.375rem;font-weight:500}

/* Forms & Inputs */
.form-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}
.form-group{display:flex;flex-direction:column;gap:0.375rem;margin-bottom:1rem}
.form-grid{display:grid;gap:1rem}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
label{font-size:0.8125rem;font-weight:600;color:var(--text-primary);letter-spacing:0.01em}
label .required{color:var(--error);font-weight:700}
input,textarea,select{padding:0.5rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem;transition:var(--transition);font-family:inherit;background:var(--bg);color:var(--text-primary);font-weight:500}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
textarea{resize:vertical;min-height:80px;font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:0.8125rem;line-height:1.5}

/* Buttons */
button{ padding:0.5rem 1rem;background:var(--primary);border:none;border-radius:var(--radius);font-size:0.875rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:0.375rem;font-family:inherit;letter-spacing:0.01em}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-hover)}
button:active{transform:translateY(0)}
button:disabled{opacity:0.5;cursor:not-allowed}
button.secondary{background:transparent;color:var(--primary);border:1px solid var(--border);font-weight:600}
button.secondary:hover{background:var(--bg-secondary);border-color:var(--accent)}
button.danger{background:var(--error);color:white}
button.success{background:var(--success);color:white}
button.small{padding:0.375rem 0.75rem;font-size:0.8125rem}
.btn-primary{background:var(--accent);color:white}
.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border)}
.btn-text{background:transparent;color:var(--accent);padding:0.375rem;font-weight:600;font-size:0.8125rem}
.btn-text:hover{text-decoration:underline;background:var(--bg-secondary)}
.btn-submit{width:100%;padding:0.625rem;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-size:0.9375rem;font-weight:600;cursor:pointer;transition:var(--transition);margin-top:1rem;display:flex;align-items:center;justify-content:center}
.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px rgba(59,130,246,0.2)}
.btn-copy,.btn-copy-small{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;background:var(--accent);color:white;border:none;border-radius:var(--radius);cursor:pointer;font-weight:600;white-space:nowrap;transition:all 0.15s;font-size:0.8125rem}
.btn-copy:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-copy-small{position:absolute;top:0.5rem;right:0.5rem;padding:0.25rem 0.5rem;background:var(--bg-secondary);color:var(--accent);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.75rem}
.btn-copy-small:hover{background:var(--accent);color:white}

/* Orchestrations */
.orchestrations-quick-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;margin-bottom:2.5rem;box-shadow:var(--shadow-sm)}
.no-orchestrations{text-align:center;padding:3rem;color:var(--text-secondary);font-size:1.0625rem}
.no-orchestrations a{color:var(--accent);cursor:pointer;text-decoration:none;font-weight:600;border-bottom:2px solid transparent;transition:var(--transition)}
.no-orchestrations a:hover{border-bottom-color:var(--accent)}
.orchestration-commands{display:grid;gap:1.75rem}
.command-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;transition:all 0.2s;position:relative;overflow:hidden}
.command-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--info));opacity:0;transition:opacity 0.3s}
.command-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.command-card:hover::before{opacity:1}
.command-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.command-header h4{margin:0;font-size:1.25rem;color:var(--text-primary);font-weight:700;letter-spacing:-0.025em}
.command-description{color:var(--text-secondary);font-size:0.9375rem;margin-bottom:0.75rem;line-height:1.6}
.command-meta{display:flex;gap:1.75rem;font-size:0.875rem;color:var(--text-muted);margin-bottom:1.25rem;font-weight:500}
.command-meta code{background:var(--bg);padding:0.25rem 0.5rem;border-radius:var(--radius-sm);font-size:0.8125rem;font-family:'JetBrains Mono',monospace;border:1px solid var(--border)}
.command-actions{display:grid;gap:1.25rem}
.command-type h5{font-size:0.9375rem;margin-bottom:0.625rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.code-container{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.code-container pre{padding:1.25rem;margin:0;overflow-x:auto;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-secondary) 100%)}
.code-container code{font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:0.875rem;color:var(--text-primary);line-height:1.6}

/* API Key Section */
.api-key-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;margin-bottom:2.5rem;box-shadow:var(--shadow-sm)}
.section-header{display:flex;align-items:center;gap:0.875rem;font-size:1.75rem;font-weight:700;margin-bottom:1.75rem;letter-spacing:-0.025em}
.api-key-box{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:var(--radius);padding:1.75rem;border:1px solid var(--border)}
.api-label{display:block;font-size:0.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:0.075em;color:var(--text-secondary);margin-bottom:0.875rem}
.api-key-display{display:flex;align-items:center;gap:1.25rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:0.875rem 1.25rem;box-shadow:var(--shadow-sm)}
.api-key-code{flex:1;font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:1rem;word-break:break-all;color:var(--accent);background:none;padding:0;font-weight:600}
.api-hint{margin-top:0.875rem;font-size:0.9375rem;color:var(--text-secondary);font-style:italic}

/* Badges */
.badge{padding:0.375rem 0.875rem;border-radius:9999px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.075em;display:inline-flex;align-items:center;gap:0.375rem;border:1px solid transparent}
.badge.active{background:linear-gradient(135deg,rgba(16,185,129,0.15),rgba(16,185,129,0.1));color:var(--success);border-color:rgba(16,185,129,0.3)}
.badge.active::before{content:"●";font-size:0.625rem;animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.badge.inactive,.badge.completed{background:var(--bg-secondary);color:var(--text-secondary);border-color:var(--border)}
.badge.completed{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(139,92,246,0.1));color:#8B5CF6;border-color:rgba(139,92,246,0.3)}
.badge.failed,.badge.error{background:rgba(239,68,68,0.1);color:var(--error);border-color:rgba(239,68,68,0.2)}
.badge.running{background:rgba(245,158,11,0.1);color:var(--warning);border-color:rgba(245,158,11,0.2)}
.badge.success{background:rgba(16,185,129,0.1);color:var(--success);border-color:rgba(16,185,129,0.2)}

/* Modals */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:2rem;z-index:1000}
.modal{background:var(--bg);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);border:1px solid var(--border)}
.modal.modal-large{max-width:960px}
.modal-header{padding:1.75rem 2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary)}
.modal-title{font-size:1.375rem;font-weight:700;letter-spacing:-0.025em}
.modal-close{width:36px;height:36px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);background:transparent;border:none;font-size:1.5rem;color:var(--text-secondary)}
.modal-close:hover{background:var(--bg-tertiary);transform:rotate(90deg)}
.modal-body{padding:2rem;max-height:70vh;overflow-y:auto}
.modal-footer{padding:1.75rem 2rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:0.875rem;background:var(--bg-secondary)}

/* Modal Transitions */
.modal-enter-active,.modal-leave-active{transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1)}
.modal-enter-from,.modal-leave-to{opacity:0}
.modal-enter-active .modal,.modal-leave-active .modal{transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.modal-enter-from .modal{transform:scale(0.9) translateY(20px)}
.modal-leave-to .modal{transform:scale(0.9) translateY(20px)}

/* Generic Close Button */
.close-button,.btn-close{position:absolute;top:0.75rem;right:0.75rem;width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);background:var(--bg);border:1px solid var(--border);font-size:1.25rem;color:var(--text-secondary);z-index:10}
.close-button:hover,.btn-close:hover{background:var(--error);color:white;border-color:var(--error);transform:scale(1.1)}

/* Toast Notifications */
.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:2000;pointer-events:none}
.toast{background:var(--bg);color:var(--text-primary);padding:1rem 3rem 1rem 1.5rem;border-radius:var(--radius);box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);display:flex;align-items:center;gap:0.875rem;margin-top:0.625rem;pointer-events:auto;border-left:4px solid var(--accent);animation:slideInRight 0.3s cubic-bezier(0.4,0,0.2,1);position:relative}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.error{border-left-color:var(--error);background:var(--error);color:white}
.toast.success{border-left-color:var(--success);background:var(--success);color:white}
.toast.warning{border-left-color:var(--warning);background:var(--warning);color:white}
.toast.info{border-left-color:var(--info);background:var(--info);color:white}
.toast-close{position:absolute;top:50%;right:0.5rem;transform:translateY(-50%);width:24px;height:24px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);background:rgba(255,255,255,0.2);border:none;font-size:1rem;color:inherit}
.toast-close:hover{background:rgba(255,255,255,0.3);transform:translateY(-50%) scale(1.1)}
/* Toast Transitions */
.toast-enter-active,
.toast-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-enter-from {
    transform: translateX(100%);
    opacity: 0;
}

.toast-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

.toast-move {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Empty States */
.empty-state{text-align:center;padding:4rem 2.5rem;color:var(--text-secondary);grid-column:1/-1;background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px dashed var(--border)}
.empty-icon{font-size:4.5rem;opacity:0.15;margin-bottom:1.25rem;animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.empty-state h3{margin-bottom:0.625rem;color:var(--text-primary);font-size:1.75rem;font-weight:700;letter-spacing:-0.025em}
.empty-state p{margin-bottom:1.75rem;max-width:450px;margin-left:auto;margin-right:auto;font-size:1.0625rem;line-height:1.6}

/* Code Blocks */
.code-block{background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:0.9375rem;overflow-x:auto;margin:1.25rem 0;position:relative}
.code-block pre{margin:0;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto;line-height:1.6}
.copy-button{position:absolute;top:0.75rem;right:0.75rem}
.helper-text{margin-top:0.625rem;padding:1.25rem;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:var(--radius);font-size:0.9375rem;border:1px solid var(--border)}
.variable-list{margin-top:0.625rem;display:flex;flex-direction:column;gap:0.375rem}
.variable-list code{background:var(--bg);padding:0.375rem 0.625rem;border-radius:var(--radius-sm);font-family:'JetBrains Mono','Monaco','Menlo',monospace;border:1px solid var(--border);font-weight:600}

/* Landing Page */
.landing-container{min-height:100vh;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-tertiary) 100%)}
.landing-nav{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;box-shadow:var(--shadow-sm)}
@media (prefers-color-scheme:dark){.landing-nav{background:rgba(15,23,42,0.97)}}
.nav-container{max-width:1280px;margin:0 auto;padding:1.25rem 2.5rem;display:flex;justify-content:space-between;align-items:center}
.nav-brand{display:flex;align-items:center;gap:0.625rem;font-weight:800;font-size:1.375rem;letter-spacing:-0.025em}
.nav-actions{display:flex;gap:1rem}
.nav-btn{padding:0.625rem 1.5rem;border-radius:var(--radius);font-weight:600;transition:all 0.2s;border:none;cursor:pointer;font-size:1rem;letter-spacing:0.01em}
.nav-btn.ghost{background:transparent;color:var(--primary)}
.nav-btn.ghost:hover{background:var(--bg-secondary)}
.nav-btn.primary{background:var(--accent);color:white}
.nav-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}

/* Hero Section */
.hero-section{padding:10rem 2rem 5rem;max-width:1280px;margin:0 auto;min-height:90vh;display:flex;align-items:center;gap:5rem}
.hero-content{flex:1}
.hero-badge{display:inline-block;padding:0.625rem 1.25rem;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:9999px;font-size:0.9375rem;font-weight:600;margin-bottom:1.75rem;border:1px solid var(--border);color:var(--accent)}
.hero-title{font-size:clamp(2.75rem,6vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:1.75rem;letter-spacing:-0.04em}
.hero-gradient{background:linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:1.375rem;color:var(--text-secondary);line-height:1.7;margin-bottom:2.5rem;font-weight:500}
.hero-cta{display:flex;gap:1.25rem;margin-bottom:3.5rem}
.btn-hero-primary,.btn-hero-secondary{padding:1.125rem 2.25rem;border-radius:var(--radius);font-size:1.125rem;font-weight:600;cursor:pointer;transition:var(--transition);border:none;letter-spacing:0.01em}
.btn-hero-primary{background:var(--accent);color:white;box-shadow:0 4px 6px rgba(59,130,246,0.2)}
.btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(59,130,246,0.3)}
.btn-hero-secondary{background:transparent;color:var(--primary);border:2px solid var(--border)}
.btn-hero-secondary:hover{background:var(--bg-secondary);border-color:var(--accent)}
.hero-demo{background:var(--primary);color:var(--bg);padding:1.75rem;border-radius:var(--radius);font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:0.9375rem;box-shadow:var(--shadow-lg)}
.demo-comment{color:#10B981;display:block;margin-bottom:0.625rem}

/* Hero Visual */
.hero-visual{flex:1;display:flex;align-items:center;justify-content:center}
.workflow-animation{display:flex;align-items:center;gap:1.25rem}
.workflow-step{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-lg);padding:2.25rem 1.75rem;text-align:center;animation:float 4s ease-in-out infinite;box-shadow:var(--shadow-lg)}
.step-icon{font-size:2.75rem;margin-bottom:0.625rem}
.step-label{font-size:0.9375rem;font-weight:600;letter-spacing:0.01em}
.workflow-arrow{font-size:1.75rem;color:var(--text-secondary)}

/* Features Section */
.features-section{padding:5rem 2.5rem;background:var(--bg)}
.features-container{max-width:1280px;margin:0 auto}
.section-title{text-align:center;font-size:2.75rem;font-weight:800;margin-bottom:3.5rem;letter-spacing:-0.04em}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem}
.feature-card{padding:2.5rem;background:var(--bg-secondary);border-radius:var(--radius-lg);transition:all 0.3s;border:1px solid var(--border);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--info));opacity:0;transition:opacity 0.3s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.feature-card:hover::before{opacity:1}
.feature-icon{font-size:2.75rem;margin-bottom:1.25rem}
.feature-card h3{font-size:1.375rem;margin-bottom:0.625rem;font-weight:700;letter-spacing:-0.025em}
.feature-card p{color:var(--text-secondary);line-height:1.6;font-size:1.0625rem}

/* How It Works Section */
.how-section{padding:5rem 2.5rem;background:var(--bg-secondary)}
.how-container{max-width:1280px;margin:0 auto}
.steps-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.5rem;margin-top:3.5rem}
.step-item{text-align:center;position:relative}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);color:white;border-radius:50%;font-size:1.375rem;font-weight:700;margin-bottom:1.25rem;box-shadow:0 8px 16px rgba(59,130,246,0.2)}
.step-item h3{font-size:1.25rem;margin-bottom:0.625rem;color:var(--text-primary);font-weight:700;letter-spacing:-0.025em}
.step-item p{color:var(--text-secondary);line-height:1.6;font-size:1.0625rem}

/* Statistics Section */
.stats-section{padding:6rem 2.5rem;background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);color:white}
.stats-container{max-width:1280px;margin:0 auto;text-align:center}
.stats-content h2.section-title{color:white;margin-bottom:1.25rem}
.section-subtitle{font-size:1.375rem;opacity:0.9;margin-bottom:3.5rem;font-weight:500}
.stats-section .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:3.5rem;margin-bottom:0}
.stat-item{text-align:center}
.stat-number{font-size:3.5rem;font-weight:800;margin-bottom:0.625rem;color:white;letter-spacing:-0.04em}
.stat-label{font-size:1.0625rem;opacity:0.9;color:white;text-transform:uppercase;letter-spacing:0.1em;font-weight:600}

/* Use Cases Section */
.usecases-section{padding:6rem 2.5rem;background:var(--bg)}
.usecases-container{max-width:1280px;margin:0 auto}
.usecase-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;margin-top:3.5rem}
.usecase-tab{padding:2.5rem;background:var(--bg-secondary);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all 0.3s;border:2px solid transparent}
.usecase-tab:hover,.usecase-tab.active{border-color:var(--accent);transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.usecase-icon{font-size:2.75rem;margin-bottom:1.25rem}
.usecase-tab h3{font-size:1.25rem;margin-bottom:0.625rem;color:var(--text-primary);font-weight:700;letter-spacing:-0.025em}
.usecase-tab p{color:var(--text-secondary);line-height:1.6;font-size:1.0625rem}

/* Testimonials Section */
.testimonials-section{padding:6rem 2.5rem;background:var(--bg-secondary)}
.testimonials-container{max-width:1280px;margin:0 auto}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;margin-top:3.5rem}
.testimonial-card{background:var(--bg);padding:2.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:all 0.3s;border:1px solid var(--border)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.testimonial-content{font-size:1.125rem;line-height:1.7;margin-bottom:1.75rem;font-style:italic;color:var(--text-primary)}
.testimonial-author{display:flex;flex-direction:column;gap:0.375rem}
.author-name{font-weight:700;color:var(--text-primary);font-size:1.0625rem}
.author-role{font-size:0.9375rem;color:var(--text-secondary);font-weight:500}

/* Enterprise Section */
.enterprise-section{padding:6rem 2.5rem;background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);color:white}
.enterprise-container{max-width:1280px;margin:0 auto}
.enterprise-content{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.enterprise-title{font-size:2.75rem;margin-bottom:1.25rem;color:white;font-weight:800;letter-spacing:-0.04em}
.enterprise-subtitle{font-size:1.375rem;margin-bottom:2.5rem;opacity:0.95;font-weight:500}
.enterprise-features{list-style:none;margin-bottom:2.5rem;padding:0}
.enterprise-features li{padding:0.625rem 0;font-size:1.125rem;color:white;font-weight:500}
.enterprise-features li::before{content:"✓";margin-right:0.75rem;font-weight:700}
.enterprise-cta{margin-top:2.5rem}
.btn-enterprise{display:inline-block;padding:1.125rem 2.25rem;background:white;color:var(--accent);text-decoration:none;border-radius:var(--radius);font-weight:700;transition:all 0.2s;letter-spacing:0.01em}
.btn-enterprise:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,0.2)}
.enterprise-note{margin-top:1.25rem;opacity:0.95;color:white;font-size:1.0625rem}
.enterprise-card{background:rgba(255,255,255,0.15);backdrop-filter:blur(12px);border-radius:var(--radius-lg);padding:1.75rem;border:1px solid rgba(255,255,255,0.2)}
.enterprise-card .card-header{font-weight:700;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,0.2);color:white;font-size:1.125rem}
.metric-row{display:flex;justify-content:space-between;padding:0.875rem 0;border-bottom:1px solid rgba(255,255,255,0.1);color:white;font-weight:500}

/* FAQ Section */
.faq-section{padding:6rem 2.5rem;background:var(--bg)}
.faq-container{max-width:1280px;margin:0 auto}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:2.5rem;margin-top:3.5rem}
.faq-item{padding:1.75rem;background:var(--bg-secondary);border-radius:var(--radius);transition:all 0.3s;border:1px solid var(--border)}
.faq-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.faq-question{font-size:1.25rem;margin-bottom:0.875rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.025em}
.faq-answer{color:var(--text-secondary);line-height:1.7;font-size:1.0625rem}

/* CTA Section */
.cta-section{padding:6rem 2.5rem;background:var(--bg-secondary);text-align:center}
.cta-container{max-width:840px;margin:0 auto}
.cta-title{font-size:3.25rem;font-weight:800;margin-bottom:1.25rem;color:var(--text-primary);letter-spacing:-0.04em}
.cta-subtitle{font-size:1.375rem;color:var(--text-secondary);margin-bottom:2.5rem;font-weight:500;line-height:1.6}
.cta-buttons{display:flex;gap:1.25rem;justify-content:center;margin-bottom:1.25rem}
.btn-cta-primary{padding:1.125rem 2.75rem;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-size:1.125rem;font-weight:700;cursor:pointer;transition:all 0.2s;letter-spacing:0.01em}
.btn-cta-primary:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(59,130,246,0.3)}
.btn-cta-secondary{padding:1.125rem 2.75rem;background:transparent;color:var(--primary);border:2px solid var(--primary);border-radius:var(--radius);font-size:1.125rem;font-weight:700;text-decoration:none;display:inline-block;transition:all 0.2s;letter-spacing:0.01em}
.btn-cta-secondary:hover{background:var(--primary);color:var(--bg)}
.cta-note{color:var(--text-secondary);font-size:0.9375rem;font-weight:500}

/* Footer */
.footer{padding:5rem 2.5rem 2.5rem;background:var(--primary);color:var(--bg)}
.footer-container{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:3.5rem;margin-bottom:3.5rem}
.footer-brand{display:flex;align-items:center;gap:0.625rem;font-size:1.375rem;font-weight:800;margin-bottom:1.25rem;color:var(--bg);letter-spacing:-0.025em}
.footer-logo{font-size:1.75rem}
.footer-name{color:var(--bg)}
.footer-description{opacity:0.85;margin-bottom:1.25rem;color:var(--bg);line-height:1.6}
.footer-social{display:flex;gap:1.25rem}
.footer-social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border-radius:50%;color:white;text-decoration:none;transition:all 0.2s}
.footer-social a:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}
.footer-column h4{margin-bottom:1.25rem;opacity:0.95;color:var(--bg);font-weight:700;letter-spacing:0.01em}
.footer-column ul{list-style:none;padding:0}
.footer-column li{padding:0.375rem 0}
.footer-column a{color:var(--bg);opacity:0.75;text-decoration:none;transition:opacity 0.2s;font-weight:500}
.footer-column a:hover{opacity:1}
.footer-bottom{padding-top:2.5rem;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;align-items:center;color:var(--bg)}
.footer-status{display:flex;align-items:center;gap:0.625rem;color:var(--bg);font-weight:500}
.status-indicator{width:8px;height:8px;background:#10B981;border-radius:50%;display:inline-block;animation:pulse 2s infinite}

/* Auth Modal */
.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn 0.2s ease}
.auth-modal{background:var(--bg);border-radius:var(--radius-lg);padding:3rem;width:90%;max-width:480px;position:relative;animation:slideUp 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.auth-modal .modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);background:var(--bg-secondary);border:1px solid var(--border);font-size:1.25rem;color:var(--text-secondary);z-index:10}
.auth-modal .modal-close:hover{background:var(--error);color:white;border-color:var(--error);transform:scale(1.1)}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.auth-title{font-size:1.5rem;font-weight:800;margin-bottom:0.5rem;letter-spacing:-0.04em}
.auth-subtitle{color:var(--text-secondary);margin-bottom:1.5rem;font-size:0.875rem;font-weight:500}
.auth-switch{text-align:center;margin-top:1.75rem;font-size:0.9375rem;color:var(--text-secondary);font-weight:500}
.auth-switch a{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;transition:var(--transition)}
.auth-switch a:hover{border-bottom-color:var(--accent)}
.verify-container{text-align:center}
.verify-icon{font-size:4.5rem;margin-bottom:1.75rem}
.verify-note{color:var(--text-secondary);margin:1.75rem 0;line-height:1.6;font-size:1.0625rem}

/* Orchestrations Grid View */
.orchestrations-view{animation:none;transition:opacity 0.15s ease}
.view-header-actions{margin-bottom:1rem} 
.orchestrations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.orchestration-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all 0.2s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;overflow:hidden;position:relative}
.orchestration-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(15,23,42,0.08);border-color:var(--accent)}
.orchestration-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),#8B5CF6);opacity:0;transition:opacity 0.2s}
.orchestration-card:hover::before{opacity:1}
.card-header{padding:1rem 1rem 0.5rem;display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem}
.card-header h4{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0;flex:1;line-height:1.3;letter-spacing:-0.025em}
.card-body{padding:0 1rem 0.75rem;flex:1}
.description{color:var(--text-secondary);font-size:0.8125rem;line-height:1.5;margin-bottom:0.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta-info{display:flex;flex-direction:column;gap:0.375rem}
.meta-item{display:flex;align-items:center;gap:0.375rem;font-size:0.75rem;color:var(--text-secondary);font-weight:500}
.meta-icon{width:14px;height:14px;display:flex;align-items:center;justify-content:center;opacity:0.8}

.card-actions{padding:0.75rem 1rem;background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;gap:0.5rem;flex-wrap:wrap}

/* Clean Action Buttons */
.btn-action{padding:0.5rem 0.875rem;font-size:0.8125rem;border-radius:var(--radius);font-weight:600;transition:all 0.15s ease;display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap;background:var(--bg);color:var(--text-primary);border:1px solid var(--border)}
.btn-action:hover{background:var(--bg-tertiary);border-color:var(--text-secondary);transform:translateY(-1px)}
.btn-action:active{transform:translateY(0)}
.btn-action svg{flex-shrink:0;opacity:0.8}
.btn-action:hover svg{opacity:1}

/* Primary Action - Run Button */
.btn-action-primary{background:var(--accent);color:white;border-color:var(--accent);flex:1;justify-content:center}
.btn-action-primary:hover{background:#2563EB;border-color:#2563EB}
.btn-action-primary:disabled{background:var(--bg-tertiary);color:var(--text-muted);border-color:var(--border);opacity:0.6;cursor:not-allowed;transform:none}

/* Danger Action - Delete Button */
.btn-action-danger{color:var(--error);border-color:var(--border)}
.btn-action-danger:hover{background:var(--error);color:white;border-color:var(--error)}

/* Toggle Status Button */
.btn-action-toggle{border-color:var(--border)}
.btn-action-toggle.is-active{background:var(--success);color:white;border-color:var(--success)}
.btn-action-toggle.is-active:hover{background:#059669;border-color:#059669}
.btn-action-toggle:not(.is-active){color:var(--text-muted)}
.btn-action-toggle:not(.is-active):hover{background:var(--bg-tertiary);border-color:var(--text-secondary);color:var(--text-primary)}

/* Dark mode */
@media (prefers-color-scheme:dark){
.btn-action{background:var(--bg-secondary)}
.btn-action:hover{background:var(--bg-tertiary)}
}
.info-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.info-box h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.info-box ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.info-box li {
    margin: 0.5rem 0;
    line-height: 1.5;
}

.info-box p {
    margin: 0.75rem 0 0 0;
    opacity: 0.9;
    font-size: 0.875rem;
}

/* Compact Prompt Modal Styles */
.compact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Info Chip */
.info-chip {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    text-align: center;
}

/* Compact Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

/* Model Select Enhancement */
.model-select {
    font-size: 0.875rem;
}

/* Capacity Bar */
.capacity-bar {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.capacity-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.capacity-label {
    font-weight: 600;
    color: #6c757d;
}

.capacity-value {
    color: #667eea;
    font-weight: 700;
    font-size: 1rem;
}

.capacity-note {
    color: #6c757d;
    font-size: 0.813rem;
}

/* Label with Actions */
.label-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.quick-templates {
    display: flex;
    gap: 0.25rem;
}

.btn-mini {
    padding: 0.25rem 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.btn-mini:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
}

/* Inline Help */
.inline-help {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.813rem;
    color: #6c757d;
}

.inline-help code {
    background: white;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.75rem;
    color: #e83e8c;
    font-family: 'Monaco', 'Menlo', monospace;
    margin: 0 0.25rem;
}

/* Compact Parameters */
/* Compact Parameters - Single Row */
.parameters-compact {
    display: flex;
    gap: 1.5rem;
    background: #f8f9fa;
    padding: 1.25rem;
    border-radius: 6px;
    align-items: flex-start;
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.param-item label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c3e50;
}

.info-badge {
    cursor: help;
    font-size: 0.75rem;
    color: #6c757d;
}

.param-input {
    padding: 0.625rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.875rem;
    width: 100%;
}

/* Input with Slider */
.input-with-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mini-slider {
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.mini-slider .slider-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s;
}

/* Input with Indicator */
.input-with-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-with-indicator .param-input {
    flex: 1;
}

.temp-indicator {
    display: flex;
    gap: 0.25rem;
}

.temp-indicator span {
    opacity: 0.3;
    font-size: 1.125rem;
    transition: all 0.3s;
}

.temp-indicator span.active {
    opacity: 1;
    transform: scale(1.2);
}

/* Collapsible Processing Info */
.processing-details {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    overflow: hidden;
}

.processing-details summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: #004080;
    user-select: none;
    list-style: none;
}

.processing-details summary::-webkit-details-marker {
    display: none;
}

.processing-details summary:hover {
    background: rgba(0, 102, 204, 0.1);
}

.details-content {
    padding: 0 1rem 1rem 1rem;
}

.processing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.proc-step {
    background: white;
    padding: 0.75rem;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #b3d9ff;
}

.proc-step strong {
    display: block;
    color: #004080;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.proc-step span {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Mono Font */
.mono-font {
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Responsive Compact */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .parameters-compact {
        grid-template-columns: 1fr;
    }
    
    .processing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   SMART PROMPT BUILDER STYLES
   ============================================================================ */

/* Step Indicator */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.step.complete .step-number {
    background: var(--success-color);
    color: white;
}

.step-label {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

.step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.step-line {
    width: 80px;
    height: 2px;
    background: #e9ecef;
    margin: 0 1rem;
    transition: all 0.3s ease;
}

.step-line.complete {
    background: var(--success-color);
}

/* Step Content */
.smart-prompt-step {
    min-height: 400px;
}

.smart-prompt-step h4 {
    margin: 0 0 0.5rem 0;
    font-size: 20px;
    color: var(--text-primary);
}

.step-hint {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 14px;
}

/* Data Source Grid */
.data-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.source-card {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.source-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.source-card.selected {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.02);
}

.source-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.source-card-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.source-card-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.source-card-body {
    padding-left: 26px;
}

.source-type {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.source-url {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Goal Input */
.goal-textarea {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    resize: vertical;
}

.format-select {
    width: 100%;
}

.quick-goals {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.quick-goals-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.goal-example-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem 0.5rem 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.goal-example-btn:hover {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.02);
}

/* Generating State */
.generating-state {
    text-align: center;
    padding: 3rem 2rem;
}

.generating-state p {
    margin: 1rem 0 0.5rem 0;
    font-size: 16px;
    color: var(--text-primary);
}

.generating-note {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Variable Reference */
.variable-reference {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

.variable-reference h5 {
    margin: 0 0 1rem 0;
    font-size: 16px;
    font-weight: 600;
}

.variable-syntax-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.syntax-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}

.syntax-item code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}

.syntax-item span {
    font-size: 13px;
    opacity: 0.9;
}

.available-sources {
    margin-top: 1rem;
}

.available-sources strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 14px;
}

.variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.variable-chip {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.variable-chip:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.variable-chip code {
    background: transparent;
    padding: 0;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: white;
}

.copy-indicator {
    font-size: 14px;
    opacity: 0.7;
}

/* Data Structure Info */
.data-structure-info {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.data-structure-info summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    user-select: none;
    padding: 0.5rem;
}

.data-structure-info summary:hover {
    color: var(--primary-color);
}

.structure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.structure-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem;
}

.structure-card h5 {
    margin: 0 0 0.5rem 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.structure-stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.structure-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.field-chip {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'Monaco', 'Menlo', monospace;
}

.fields-more {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 0.25rem 0.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .step-indicator {
        padding: 1rem 0;
    }
    
    .step-line {
        width: 40px;
        margin: 0 0.5rem;
    }
    
    .step-label {
        font-size: 11px;
    }
    
    .data-source-grid {
        grid-template-columns: 1fr;
    }
    
    .structure-grid {
        grid-template-columns: 1fr;
    }
    
    .variable-chips {
        flex-direction: column;
    }
}


 
/* Prompts Grid View */
.prompts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
.prompt-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all 0.2s;display:flex;flex-direction:column;overflow:hidden;position:relative}
.prompt-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--info));opacity:0;transition:opacity 0.2s}
.prompt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.prompt-card:hover::before{opacity:1}
.prompt-preview{background:var(--bg-secondary);padding:0.875rem;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:0.8125rem;line-height:1.6;color:var(--text-secondary);margin-bottom:0.75rem;white-space:pre-wrap;max-height:120px;overflow:hidden}
 
/* Data Sources Grid View */
.data-sources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
.data-source-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all 0.2s;display:flex;flex-direction:column;overflow:hidden;position:relative}
.data-source-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--info));opacity:0;transition:opacity 0.2s}
.data-source-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.data-source-card:hover::before{opacity:1}

.source-details{display:flex;flex-direction:column;gap:0.5rem}
.detail-row{display:flex;align-items:start;gap:0.5rem}
.detail-label{font-size:0.75rem;font-weight:600;color:var(--text-secondary);min-width:60px}
.detail-value{font-size:0.8125rem;color:var(--text-primary);word-break:break-all}

/* Data Source Selector (Multiple Checkboxes) */
.data-source-selector{display:flex;flex-direction:column;gap:0.625rem;padding:0.75rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border);max-height:200px;overflow-y:auto}
.source-checkbox{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;background:var(--bg);border-radius:var(--radius-sm);transition:background 0.15s}
.source-checkbox:hover{background:var(--bg-tertiary)}
.source-checkbox input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent)}
.source-checkbox label{font-size:0.875rem;font-weight:500;cursor:pointer;flex:1}

/* Helper text styling for better visibility */
.helper-text a{color:var(--accent);text-decoration:underline;cursor:pointer;font-weight:600}
.helper-text a:hover{color:var(--primary)}

/* Tag Styles */
/* Tag Styles - Professional Enterprise Design */
.tag-filter-bar{display:flex;align-items:center;gap:0.75rem;margin:1rem 0;padding:1rem 1.25rem;background:var(--bg-secondary);border-radius:var(--radius-lg);flex-wrap:wrap;border:1px solid var(--border)}
.filter-label{font-weight:600;color:var(--text-secondary);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.075em}

/* Tag Filter Buttons - Professional */
.tag-filter-btn{padding:0.375rem 1rem;background:var(--bg);border:1.5px solid var(--border);border-radius:6px;cursor:pointer;transition:all 0.15s ease;font-size:0.8125rem;font-weight:500;color:var(--text-primary);letter-spacing:0.01em}
.tag-filter-btn:hover{background:var(--bg-tertiary);border-color:var(--text-secondary);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.tag-filter-btn.active{background:var(--text-primary);color:var(--bg);border-color:var(--text-primary);font-weight:600}
.tag-filter-btn.active:hover{background:var(--primary);border-color:var(--primary)}

.clear-filters-btn{padding:0.375rem 1rem;background:transparent;border:1.5px solid transparent;color:var(--text-secondary);cursor:pointer;font-size:0.8125rem;font-weight:500;border-radius:6px;transition:all 0.15s ease}
.clear-filters-btn:hover{color:var(--error);border-color:var(--error);background:rgba(239,68,68,0.05)}

/* Card Tags - Subtle Professional Badges */
.card-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem;text-align: center; margin-left: 20px;}
.tag-badge{display:inline-flex;align-items:center;padding:0.25rem 0.75rem;background:var(--bg-tertiary);color:var(--text-primary);border-radius:4px;font-size:0.75rem;font-weight:500;border:1px solid var(--border);transition:all 0.15s ease;cursor:default;letter-spacing:0.02em}
.tag-badge:hover{background:var(--bg-secondary);border-color:var(--text-secondary);transform:translateY(-1px)}

/* Tag Input Container */
.tag-input-container{display:flex;flex-direction:column;gap:0.75rem}
.existing-tags{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.75rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border);min-height:48px}

/* Tag Item - Clean Professional Style */
.tag-item{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;background:var(--text-primary);color:var(--bg);border-radius:6px;font-size:0.8125rem;font-weight:500;border:1px solid var(--text-primary);transition:all 0.15s ease;letter-spacing:0.01em}
.tag-item:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-1px)}

.tag-remove{background:rgba(255,255,255,0.15);border:none;color:var(--bg);cursor:pointer;font-size:1rem;line-height:1;padding:0.125rem 0.375rem;border-radius:3px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;font-weight:600}
.tag-remove:hover{background:rgba(255,255,255,0.9);color:var(--text-primary)}

/* Subtle Color Accent - Just a hint of color on the left border */
.card-tags .tag-badge::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);border-radius:4px 0 0 4px;opacity:0;transition:opacity 0.15s}
.card-tags .tag-badge{position:relative}
.card-tags .tag-badge:hover::before{opacity:1}

/* Professional Color Variations - Very subtle */
.card-tags .tag-badge:nth-child(4n+1):hover::before{background:#3b82f6}
.card-tags .tag-badge:nth-child(4n+2):hover::before{background:#8b5cf6}
.card-tags .tag-badge:nth-child(4n+3):hover::before{background:#10b981}
.card-tags .tag-badge:nth-child(4n+4):hover::before{background:#f59e0b}

/* Dark mode adjustments */
@media (prefers-color-scheme:dark){
.tag-filter-btn{background:var(--bg-secondary);border-color:var(--border);color:var(--text-primary)}
.tag-filter-btn:hover{background:var(--bg-tertiary);border-color:var(--text-secondary)}
.tag-filter-btn.active{background:var(--text-primary);color:var(--bg);border-color:var(--text-primary)}
.tag-badge{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border)}
.tag-badge:hover{background:var(--bg-tertiary);border-color:var(--text-secondary)}
.tag-item{background:var(--text-primary);color:var(--bg);border-color:var(--text-primary)}
.tag-item:hover{background:#3b82f6;border-color:#3b82f6}
}

/* Dashboard - Professional Layout */
.dashboard-view{animation:fadeIn 0.3s ease;display:flex;flex-direction:column;gap:1.5rem}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Welcome Banner */
.welcome-banner{background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);border-radius:var(--radius-lg);padding:2rem;display:flex;justify-content:space-between;align-items:center;color:white;margin-bottom:0.5rem;box-shadow:var(--shadow-lg)}
.welcome-content h3{margin:0 0 0.5rem 0;font-size:1.5rem;font-weight:700}
.welcome-content p{margin:0;opacity:0.95;font-size:1rem}
.welcome-actions{display:flex;gap:1rem}
.welcome-actions .btn-primary{background:white;color:var(--accent);border:none}
.welcome-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.welcome-actions .btn-secondary{background:transparent;color:white;border:2px solid rgba(255,255,255,0.3)}
.welcome-actions .btn-secondary:hover{background:rgba(255,255,255,0.15);border-color:white}

/* Dashboard Stats Grid */
.dashboard-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:0.5rem}

.dashboard-stat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;display:flex;align-items:center;gap:1.25rem;transition:all 0.2s;cursor:pointer;position:relative;overflow:hidden}
.dashboard-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#8B5CF6);opacity:0;transition:opacity 0.2s}
.dashboard-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.dashboard-stat-card:hover::before{opacity:1}

.dashboard-stat-card.success-card{background:linear-gradient(135deg,rgba(16,185,129,0.05),rgba(16,185,129,0.02));border-color:rgba(16,185,129,0.2)}
.dashboard-stat-card.success-card .stat-icon{background:linear-gradient(135deg,#10b981,#059669);color:white}
.dashboard-stat-card.warning-card{background:linear-gradient(135deg,rgba(239,68,68,0.05),rgba(239,68,68,0.02));border-color:rgba(239,68,68,0.2)}
.dashboard-stat-card.warning-card .stat-icon{background:linear-gradient(135deg,#ef4444,#dc2626);color:white}

.stat-icon{width:56px;height:56px;background:var(--bg-secondary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.75rem;flex-shrink:0}
.stat-content{flex:1}
.stat-value{font-size:2rem;font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:0.375rem}
.stat-label{font-size:0.875rem;font-weight:600;color:var(--text-primary);margin-bottom:0.125rem}
.stat-sublabel{font-size:0.75rem;color:var(--text-secondary);font-weight:500}
.stat-arrow{font-size:1.5rem;color:var(--text-muted);transition:transform 0.2s}
.dashboard-stat-card:hover .stat-arrow{transform:translateX(4px);color:var(--accent)}

/* Dashboard Two Column Layout */
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

/* Dashboard Section */
.dashboard-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.section-title-group{display:flex;align-items:center;gap:0.75rem}
.section-title{font-size:1.125rem;font-weight:700;margin:0;color:var(--text-primary)}
.section-count{background:var(--bg-tertiary);color:var(--text-secondary);padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:600}
.btn-text-icon{background:transparent;color:var(--accent);border:none;padding:0.375rem 0.75rem;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.15s;border-radius:var(--radius)}
.btn-text-icon:hover{background:var(--bg-secondary);transform:translateX(4px)}

/* Execution List */
.execution-list{display:flex;flex-direction:column;gap:0.75rem}
.execution-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;transition:all 0.15s}
.execution-item:hover{background:var(--bg-tertiary);border-color:var(--accent);transform:translateX(4px)}

.execution-status-indicator{width:4px;height:40px;border-radius:2px;flex-shrink:0}
.execution-status-indicator.success{background:var(--success)}
.execution-status-indicator.failed{background:var(--error)}
.execution-status-indicator.running{background:var(--warning)}

.execution-info{flex:1;min-width:0}
.execution-name{font-weight:600;color:var(--text-primary);font-size:0.9375rem;margin-bottom:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.execution-meta{display:flex;gap:1rem;font-size:0.75rem;color:var(--text-secondary)}
.execution-time{font-weight:500}
.execution-duration{opacity:0.75}

.execution-badge{padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0}
.execution-badge.success{background:rgba(16,185,129,0.1);color:var(--success)}
.execution-badge.failed{background:rgba(239,68,68,0.1);color:var(--error)}
.execution-badge.running{background:rgba(245,158,11,0.1);color:var(--warning)}

/* Empty State Small */
.empty-state-small{text-align:center;padding:2rem 1rem;color:var(--text-secondary)}
.empty-icon-small{font-size:2.5rem;margin-bottom:0.75rem;opacity:0.3}
.empty-state-small p{margin:0 0 1rem 0;font-size:0.9375rem}

/* Quick Actions Grid */
.quick-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1.5rem}
.action-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.15s}
.action-card:hover{background:var(--bg-tertiary);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.action-icon{width:40px;height:40px;background:var(--bg);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:1px solid var(--border)}
.action-content{flex:1}
.action-title{font-weight:600;color:var(--text-primary);font-size:0.875rem;margin-bottom:0.125rem}
.action-subtitle{font-size:0.75rem;color:var(--text-secondary)}

/* System Status */
.system-status{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}
.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.status-header h4{margin:0;font-size:0.9375rem;font-weight:600;color:var(--text-primary)}
.status-indicator-badge{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;background:rgba(16,185,129,0.1);color:var(--success);border-radius:9999px;font-size:0.75rem;font-weight:600}
.status-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse 2s infinite}
.status-items{display:flex;flex-direction:column;gap:0.5rem}
.status-item{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0}
.status-label{font-size:0.8125rem;color:var(--text-secondary);font-weight:500}
.status-value{font-size:0.8125rem;font-weight:600}
.status-value.operational{color:var(--success)}
.status-value.degraded{color:var(--warning)}
.status-value.down{color:var(--error)}

/* Chart Section */
.chart-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-top: 24px;
}

.chart-wrapper {
    position: relative;
    height: 350px;
    margin-top: 20px;
}

.chart-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.chart-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Chart Loading State */
.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.chart-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Trend Badge */
.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chart Tooltip Enhancement */
#executionChart {
    cursor: crosshair;
}

/* Empty State */
.chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #6b7280;
}

.chart-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.chart-empty-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.chart-empty-subtitle {
    font-size: 14px;
    opacity: 0.7;
}

/* Responsive Chart */
@media (max-width: 768px) {
    .chart-wrapper {
        height: 280px;
    }
    
    .chart-section {
        padding: 16px;
    }
}

/* Chart Legend Improvements */
.chart-section canvas {
    max-height: 100%;
}

/* Hover Effects */
.chart-section:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease;
}

/* Responsive Dashboard */
@media (max-width:1200px){
.dashboard-columns{grid-template-columns:1fr}
.dashboard-stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
.dashboard-stats-grid{grid-template-columns:1fr}
.welcome-banner{flex-direction:column;text-align:center;gap:1.5rem}
.welcome-actions{width:100%;flex-direction:column}
.welcome-actions button{width:100%}
.quick-actions-grid{grid-template-columns:1fr}
.chart-wrapper{height:240px}
}

/* Webhook Test Modal */
.webhook-test-container{display:grid;gap:1.75rem}
.test-section h4{margin-bottom:1.25rem;font-size:1.0625rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.075em}
.test-section h5{margin:1.25rem 0 0.625rem;font-size:0.9375rem;font-weight:600;color:var(--text-secondary)}
.response-container{display:flex;flex-direction:column;gap:1.25rem}
.response-status{display:flex;align-items:center;gap:1.25rem;padding:1.25rem;background:var(--bg-secondary);border-radius:var(--radius);border-left:4px solid}
.response-status.success{border-left-color:var(--success);background:linear-gradient(90deg,rgba(16,185,129,0.05),transparent)}
.response-status.error{border-left-color:var(--error);background:linear-gradient(90deg,rgba(239,68,68,0.05),transparent)}
.status-code{font-size:1.25rem;font-weight:700}
.status-badge{padding:0.375rem 0.875rem;border-radius:9999px;font-size:0.8125rem;font-weight:700;letter-spacing:0.05em}
.badge-success{background:rgba(16,185,129,0.15);color:var(--success)}
.badge-error{background:rgba(239,68,68,0.15);color:var(--error)}
.response-headers,.response-body{background:var(--bg-secondary);padding:1.25rem;border-radius:var(--radius);border:1px solid var(--border)}
.code-content{padding:1.25rem}
.code-content h5{color:var(--text-secondary);font-size:0.8125rem;text-transform:uppercase;margin:1.25rem 0 0.625rem;letter-spacing:0.075em;font-weight:700}
.code-content h5:first-child{margin-top:0}
.method-badge{background:var(--accent);color:white;padding:0.375rem 0.875rem;border-radius:var(--radius-sm);font-weight:700;font-size:0.9375rem}
.url-text{color:var(--text-secondary);font-size:0.9375rem;word-break:break-all;font-family:'JetBrains Mono',monospace}
.no-response{color:var(--text-muted);font-style:italic;padding:1.25rem;text-align:center;font-size:1.0625rem}
.success-highlight{border:2px solid var(--success);background:rgba(16,185,129,0.05)}
.actual-sent{margin-top:1.25rem;padding:1.25rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}

/* Output Modal Styles - Updated close button */
.outputs-modal-body{padding:0;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);position:relative}
.outputs-modal-body .modal-close{position:absolute;top:0.75rem;right:0.75rem;z-index:100}

/* Webhook Test Modal - Consistent close */
.webhook-test-container{display:grid;gap:1.25rem;position:relative;padding-top:0.5rem}

/* Code containers with close/copy buttons */
.code-container{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.code-container .btn-copy-small{position:absolute;top:0.5rem;right:0.5rem;padding:0.25rem 0.5rem;background:var(--bg-secondary);color:var(--accent);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.75rem;z-index:5}
.code-container .btn-copy-small:hover{background:var(--accent);color:white}

/* Empty state close for dismissible messages */
.empty-state{text-align:center;padding:2.5rem;color:var(--text-secondary);grid-column:1/-1;background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px dashed var(--border);position:relative}
.empty-state.dismissible .close-button{position:absolute;top:0.75rem;right:0.75rem;width:24px;height:24px;font-size:1rem}
.execution-info-bar{background:linear-gradient(135deg,var(--primary) 0%,#1E293B 100%);color:white;padding:1.5rem 1.75rem;display:flex;gap:2.5rem;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,0.1)}
.info-item{display:flex;align-items:center;gap:0.625rem}
.info-label{opacity:0.75;font-size:0.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:0.075em}
.info-value{font-weight:600;font-size:0.9375rem}
.info-code{background:rgba(255,255,255,0.15);padding:0.375rem 0.75rem;border-radius:var(--radius-sm);font-family:'JetBrains Mono','SF Mono','Monaco',monospace;font-size:0.875rem;letter-spacing:0.025em}
.execution-info-bar .badge{padding:0.375rem 0.75rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.075em}
.execution-info-bar .badge.success{background:rgba(255,255,255,0.2);color:#10B981}
.execution-info-bar .badge.failed{background:rgba(255,255,255,0.2);color:#EF4444}
.execution-info-bar .badge.running{background:rgba(255,255,255,0.2);color:#F59E0B}
/* Output Tabs Section - Fixed */
.output-tabs{display:flex;gap:0;padding:0;background:#fafafa;border-bottom:1px solid #e0e0e0;min-height:48px;align-items:stretch}
.output-tabs::-webkit-scrollbar{height:2px}
.output-tabs::-webkit-scrollbar-track{background:transparent}
.output-tabs::-webkit-scrollbar-thumb{background:#bdbdbd}
.output-tab{padding:0 1.5rem;background:transparent;border:none;border-bottom:2px solid transparent;font-size:0.875rem;font-weight:400;cursor:pointer;transition:border-color 0.2s ease,color 0.2s ease;white-space:nowrap;color:#757575;display:flex;align-items:center;gap:0.5rem;flex-shrink:0;min-height:48px;position:relative}
.output-tab:hover{background:rgba(0,0,0,0.02);color:#424242}
.output-tab.active{background:transparent;color:#000000;border-bottom-color:#000000;font-weight:500}
.output-tab:first-child{margin-left:0}
@media (prefers-color-scheme:dark){
  .output-tabs{background:var(--bg-secondary);border-bottom:1px solid var(--border)}
  .output-tabs::-webkit-scrollbar-thumb{background:var(--border)}
  .output-tab{color:var(--text-secondary)}
  .output-tab:hover{background:rgba(255,255,255,0.05);color:var(--text-primary)}
  .output-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
}
.outputs-timeline{flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
.outputs-list{flex:1;overflow-y:auto;padding:2.5rem}
.outputs-list::-webkit-scrollbar{width:8px}
.outputs-list::-webkit-scrollbar-track{background:var(--bg-tertiary)}
.outputs-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.output-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.75rem;transition:all 0.2s ease;box-shadow:var(--shadow-sm)}
.output-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.output-card-header{padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;border-bottom:1px solid var(--border-light);transition:background 0.2s;background:var(--bg-secondary)}
.output-card-header:hover{background:var(--bg-tertiary)}
.output-card.collapsed .output-card-header{border-bottom:none;border-radius:var(--radius-lg)}
.output-meta{display:flex;align-items:center;gap:1.25rem}
.output-number{background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);color:var(--text-secondary);padding:0.375rem 0.75rem;border-radius:var(--radius-sm);font-weight:600;font-size:0.8125rem;min-width:36px;text-align:center;border:1px solid var(--border)}
.output-type-badge{padding:0.375rem 0.875rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;text-transform:uppercase;letter-spacing:0.075em;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}
.type-data_source{background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05));color:var(--accent);border-color:rgba(59,130,246,0.3)}
.type-llm_response{background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(139,92,246,0.05));color:#8B5CF6;border-color:rgba(139,92,246,0.3)}
.type-webhook_response{background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(16,185,129,0.05));color:var(--success);border-color:rgba(16,185,129,0.3)}
.type-final{background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(245,158,11,0.05));color:var(--warning);border-color:rgba(245,158,11,0.3)}
.output-timestamp{color:var(--text-muted);font-size:0.8125rem;font-weight:500}
.output-toggle{background:transparent;border:none;font-size:0.9375rem;cursor:pointer;padding:0.375rem;color:var(--text-secondary);transition:transform 0.2s}
.output-toggle:hover{color:var(--text-primary)}
.output-card-body{padding:1.5rem;animation:fadeInDown 0.2s ease-out}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.output-summary{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.25rem;border-left:3px solid var(--accent)}
.summary-label{font-weight:700;color:var(--text-secondary);margin-right:0.625rem;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.075em}
.summary-text{color:var(--text-primary);font-size:0.9375rem;line-height:1.6;font-weight:500}
.output-content-wrapper{position:relative;margin-bottom:1.25rem}
.output-actions{position:absolute;top:0.875rem;right:0.875rem;display:flex;gap:0.625rem;z-index:10}
.btn-icon{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.625rem;cursor:pointer;transition:all 0.15s;font-size:0.9375rem;line-height:1;min-width:36px;text-align:center;font-weight:600}
.btn-icon:hover{background:var(--bg-secondary);border-color:var(--accent);transform:scale(1.05)}
.output-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;overflow-x:auto;max-height:420px;overflow-y:auto}
.output-content::-webkit-scrollbar{width:6px;height:6px}
.output-content::-webkit-scrollbar-track{background:var(--bg-tertiary)}
.output-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.output-content pre{margin:0;font-family:'JetBrains Mono','SF Mono','Monaco',monospace;font-size:0.875rem;line-height:1.7;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
.formatted-output{white-space:pre-wrap;word-break:break-word;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:0.9375rem;line-height:1.7;color:var(--text-primary)}
.output-stats{display:flex;gap:2.5rem;padding:1rem 0;border-top:1px solid var(--border-light);margin-top:1.25rem}
.stat-item{font-size:0.8125rem;display:flex;align-items:center;gap:0.625rem}
.stat-label{color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
.stat-value{font-weight:600;color:var(--text-secondary)}
.modal-footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.75rem;background:var(--bg-secondary);border-top:1px solid var(--border)}
.footer-stats{display:flex;gap:1.75rem;color:var(--text-secondary);font-size:0.875rem;font-weight:500}
.footer-actions{display:flex;gap:0.875rem}
.btn-secondary{background:var(--bg);color:var(--text-primary);border:2px solid var(--border);padding:0.625rem 1.25rem;border-radius:var(--radius);font-weight:600;font-size:0.9375rem;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:0.625rem}
.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--accent)}
.btn-primary{background:var(--accent);color:white;border:1px solid var(--accent);padding:0.625rem 1.25rem;border-radius:var(--radius);font-weight:600;font-size:0.9375rem;cursor:pointer;transition:all 0.15s}
.btn-primary:hover{background:#2563EB;border-color:#2563EB;transform:translateY(-2px);box-shadow:0 6px 12px rgba(59,130,246,0.25)}
.empty-state{padding:4rem;text-align:center}
.empty-icon{font-size:3rem;margin-bottom:1.25rem;opacity:0.2}
.empty-state h3{color:var(--text-primary);margin-bottom:0.625rem;font-weight:600;font-size:1.5rem}
.empty-state p{color:var(--text-secondary);font-size:0.9375rem;line-height:1.6}
/* Data Source Testing Styles */
.test-results{margin-top:1.5rem;padding:1.5rem;border-radius:var(--radius-lg);border:2px solid var(--border);background:var(--bg-secondary)}

.test-success{animation:slideInUp 0.3s ease}
.test-success h4{color:var(--success);margin-bottom:1rem;font-size:1.125rem;display:flex;align-items:center;gap:0.5rem}

.test-error{animation:slideInUp 0.3s ease}
.test-error h4{color:var(--error);margin-bottom:0.75rem;font-size:1.125rem;display:flex;align-items:center;gap:0.5rem}
.error-message{background:rgba(239,68,68,0.1);padding:0.75rem;border-radius:var(--radius);color:var(--error);font-size:0.9375rem;border:1px solid rgba(239,68,68,0.2)}

.test-stats{display:flex;gap:0.75rem;margin-bottom:1rem;flex-wrap:wrap}
.stat-badge{background:linear-gradient(135deg,var(--accent),#8B5CF6);color:white;padding:0.5rem 1rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;display:inline-flex;align-items:center;gap:0.375rem}

.sample-fields{margin:1rem 0}
.sample-fields h5{font-size:0.875rem;color:var(--text-secondary);margin-bottom:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.field-chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.field-chip{background:var(--bg);border:1px solid var(--border);padding:0.375rem 0.75rem;border-radius:var(--radius);font-size:0.8125rem;font-weight:500;color:var(--text-primary);font-family:'JetBrains Mono',monospace}

.preview-details{margin-top:1rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.preview-details summary{padding:0.75rem 1rem;background:var(--bg-tertiary);cursor:pointer;font-weight:600;font-size:0.9375rem;user-select:none;display:flex;align-items:center;gap:0.5rem;transition:background 0.15s}
.preview-details summary:hover{background:var(--bg-secondary)}
.preview-details[open] summary{border-bottom:1px solid var(--border)}
.preview-code{margin:0;padding:1rem;background:var(--bg);font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:0.8125rem;line-height:1.6;color:var(--text-primary);max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word}

@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Loading spinner for test button */
.btn-secondary:disabled{opacity:0.6;cursor:not-allowed}

/* Prompt Preview Modal Styles */
.preview-success{animation:slideInUp 0.3s ease}
.preview-error{text-align:center;padding:2rem}
.error-icon{font-size:4rem;margin-bottom:1rem}
.preview-error h4{color:var(--error);margin-bottom:1rem;font-size:1.25rem}
.error-suggestions{text-align:left;background:var(--bg-secondary);padding:1.25rem;border-radius:var(--radius);margin-top:1.25rem;border:1px solid var(--border)}
.error-suggestions ul{margin:0.5rem 0 0 1.25rem;padding:0}
.error-suggestions li{margin:0.5rem 0;line-height:1.6}

.preview-metadata{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);padding:1.5rem;border-radius:var(--radius);margin-bottom:1.5rem;border:1px solid var(--border)}
.metadata-item{display:flex;flex-direction:column;gap:0.25rem}
.metadata-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;font-weight:600}
.metadata-value{font-size:1.125rem;font-weight:700;color:var(--text-primary)}
.metadata-value.cost{color:var(--accent)}

.preview-section{margin-bottom:1.5rem}
.preview-section h4{margin-bottom:1rem;font-size:1rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:0.5rem}

.data-sources-list{display:flex;flex-direction:column;gap:0.5rem}
.source-item{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}
.source-name{font-weight:600;color:var(--text-primary);font-size:0.9375rem}
.source-count{font-size:0.8125rem;color:var(--text-secondary);font-weight:500}

.llm-response-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-height:400px;overflow-y:auto;position:relative}
.llm-response-box pre{margin:0;font-family:'JetBrains Mono','Monaco','Menlo',monospace;font-size:0.9375rem;line-height:1.7;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}

.quality-grid{display:grid;gap:1rem}
.quality-item{display:flex;flex-direction:column;gap:0.5rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}
.quality-label{font-size:0.875rem;font-weight:600;color:var(--text-secondary)}
.quality-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}
.quality-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--success));transition:width 0.3s ease;border-radius:4px}
.quality-score{font-size:0.875rem;font-weight:700;color:var(--text-primary)}

.preview-note{background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05));border-left:3px solid var(--accent);padding:1rem 1.25rem;border-radius:var(--radius);margin-top:1.5rem;font-size:0.9375rem;line-height:1.6;color:var(--text-primary)}
 
/* Responsive */
@media (max-width:1280px){.orchestrations-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}}
@media (max-width:768px){
.mobile-menu-toggle{display:flex}
.sidebar{position:fixed;top:0;left:-100%;height:100%;z-index:1000;transition:left 0.3s cubic-bezier(0.4,0,0.2,1)}
.sidebar.mobile-open{left:0;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.sidebar.collapsed{width:var(--sidebar-width)}
.sidebar-toggle{display:none}
.header{padding:1.25rem;padding-left:4.5rem;flex-direction:column;align-items:stretch;gap:1rem}
.header-left{flex-direction:column;align-items:stretch;gap:0.75rem}
.search-box-header{max-width:100%}
.header-actions{flex-direction:column;margin-top:0}
.header-filters{flex-direction:column;width:100%}
.stats-grid{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.content{padding:1.25rem}
.hero-section{flex-direction:column;text-align:center;padding:7rem 1.25rem 2.5rem}
.hero-cta{justify-content:center}
.workflow-animation{flex-direction:column}
.workflow-arrow{transform:rotate(90deg)}
.features-grid{grid-template-columns:1fr}
.orchestrations-grid{grid-template-columns:1fr}
.card-actions{flex-wrap:wrap}
.btn-small.btn-primary{flex:initial;width:100%}
.execution-info-bar{padding:1.25rem;gap:1.25rem}
.output-tabs{padding:0}
.outputs-list{padding:1.25rem}
.output-card-header{padding:1rem 1.25rem}
.output-actions{position:static;margin-bottom:0.875rem}
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme:dark){
.orchestration-card{background:var(--bg-secondary)}
.card-actions{background:var(--bg-tertiary)}
.btn-small.btn-secondary:hover{background:var(--bg-tertiary)}
.empty-state{background:var(--bg-tertiary)}
.hero-demo{background:#1E293B;border:1px solid var(--border)}
.auth-modal{box-shadow:0 25px 50px rgba(0,0,0,0.5)}
.code-container pre{background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%)}
.output-content{background:var(--bg-tertiary)}
.output-summary{background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%)}
}

/* Modern Executions Timeline */
.executions-modern{animation:fadeIn 0.3s ease}
.execution-timeline{display:flex;flex-direction:column;gap:1.25rem}
.execution-timeline-item{display:flex;gap:1rem;position:relative}
.execution-timeline-item:not(:last-child)::after{content:'';position:absolute;left:7px;top:48px;bottom:-20px;width:2px;background:var(--border);z-index:0}
.execution-status-indicator{width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:1rem;z-index:1;position:relative;border:3px solid var(--bg)}
.execution-status-indicator.success{background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,0.2)}
.execution-status-indicator.failed{background:var(--error);box-shadow:0 0 0 3px rgba(239,68,68,0.2)}
.execution-status-indicator.running{background:var(--warning);box-shadow:0 0 0 3px rgba(245,158,11,0.2);animation:pulse 2s infinite}

.execution-card-modern{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;transition:all 0.2s;box-shadow:var(--shadow-sm)}
.execution-card-modern:hover{box-shadow:var(--shadow);border-color:var(--accent);transform:translateX(4px)}

.execution-header-modern{display:flex;justify-content:space-between;align-items:start;margin-bottom:1rem;gap:1rem}
.execution-main-info{flex:1;min-width:0}
.execution-title{font-size:1.0625rem;font-weight:700;color:var(--text-primary);margin:0 0 0.375rem 0;letter-spacing:-0.01em}
.execution-id{font-size:0.75rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;font-weight:500}

.execution-badge-modern{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 0.875rem;border-radius:9999px;font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0}
.execution-badge-modern.success{background:rgba(16,185,129,0.1);color:var(--success)}
.execution-badge-modern.failed{background:rgba(239,68,68,0.1);color:var(--error)}
.execution-badge-modern.running{background:rgba(245,158,11,0.1);color:var(--warning)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.execution-badge-modern.running .badge-dot{animation:pulse 2s infinite}

.execution-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border-light)}
.meta-item-modern{display:flex;align-items:center;gap:0.5rem}
.meta-icon{color:var(--text-muted);flex-shrink:0}
.meta-label{font-size:0.75rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;min-width:60px}
.meta-value{font-size:0.875rem;font-weight:600;color:var(--text-primary)}

.execution-error{display:flex;align-items:start;gap:0.5rem;padding:0.875rem 1rem;background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.2);border-radius:var(--radius);color:var(--error);font-size:0.875rem;margin-bottom:1rem;line-height:1.5}
.execution-error svg{flex-shrink:0;margin-top:0.125rem}

.execution-actions-modern{display:flex;gap:0.75rem;padding-top:1rem;border-top:1px solid var(--border-light)}
.btn-view-outputs{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.25rem;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.15s}
.btn-view-outputs:hover{background:#2563EB;transform:translateY(-1px);box-shadow:0 4px 8px rgba(59,130,246,0.25)}
.btn-view-outputs svg{flex-shrink:0}

/* Modern Reports View */
.reports-modern{animation:fadeIn 0.3s ease}
.reports-header-card{background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);color:white;padding:2rem;border-radius:var(--radius-lg);margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-lg)}
.reports-header-content h3{font-size:1.5rem;font-weight:700;margin:0 0 0.5rem 0}
.reports-header-content p{margin:0;opacity:0.9;font-size:1rem}
.reports-header-card .btn-primary{background:white;color:var(--accent);border:none}
.reports-header-card .btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}

.empty-state-modern{text-align:center;padding:4rem 2rem;background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px dashed var(--border)}
.empty-icon-large{font-size:5rem;margin-bottom:1.5rem;opacity:0.2;animation:float 4s ease-in-out infinite}
.empty-state-modern h3{color:var(--text-primary);margin-bottom:0.75rem;font-size:1.5rem;font-weight:700}
.empty-state-modern p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.0625rem;max-width:400px;margin-left:auto;margin-right:auto}

.reports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem}
.report-card-modern{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all 0.2s;position:relative;overflow:hidden}
.report-card-modern:hover{box-shadow:var(--shadow-hover);border-color:var(--accent);transform:translateY(-3px)}
.report-card-modern::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#8B5CF6);opacity:0;transition:opacity 0.2s}
.report-card-modern:hover::before{opacity:1}

.report-schedule-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:linear-gradient(135deg,var(--accent) 0%,#8B5CF6 100%);color:white;border-radius:9999px;font-size:0.875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:1.25rem}
.report-schedule-badge svg{flex-shrink:0}

.report-details{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.25rem}
.report-template,.report-recipients{display:flex;flex-direction:column;gap:0.375rem}
.detail-label{font-size:0.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}
.detail-value{color:var(--text-primary)}

.recipient-chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.recipient-chip{padding:0.25rem 0.75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:9999px;font-size:0.8125rem;font-weight:500;color:var(--text-primary)}
.recipient-more{padding:0.25rem 0.75rem;background:var(--accent);color:white;border-radius:9999px;font-size:0.8125rem;font-weight:600}

.report-last-sent,.report-status-pending{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;color:var(--text-secondary);font-weight:500}
.report-last-sent svg,.report-status-pending svg{flex-shrink:0}
.report-status-pending{color:var(--warning)}

.report-card-actions{display:flex;gap:0.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}

/* Enhanced API View */
.api-quick-start{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:2.5rem;border-radius:var(--radius-lg);margin-bottom:2.5rem;box-shadow:var(--shadow-lg)}
.quick-start-header h2{font-size:2rem;font-weight:800;margin:0 0 0.5rem 0}
.quick-start-header p{font-size:1.125rem;opacity:0.95;margin:0}
.quick-start-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.step-card{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);padding:1.5rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.2)}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:white;color:#667eea;border-radius:50%;font-weight:800;font-size:1.25rem;margin-bottom:1rem}
.step-content h4{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem 0}
.step-content p{font-size:0.9375rem;opacity:0.95;margin:0 0 1rem 0}
.api-key-box-inline{display:flex;align-items:center;gap:0.75rem;background:rgba(0,0,0,0.2);padding:0.75rem 1rem;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:0.875rem}
.api-key-box-inline code{flex:1;word-break:break-all}
.btn-copy-inline{background:white;color:#667eea;border:none;padding:0.5rem 1rem;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;transition:all 0.15s;font-size:0.875rem}
.btn-copy-inline:hover{transform:scale(1.05)}

.integration-tabs{display:flex;gap:0.5rem;margin-top:0.75rem}
.integration-tab{padding:0.5rem 1rem;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:white;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:0.875rem;transition:all 0.15s}
.integration-tab:hover,.integration-tab.active{background:white;color:#667eea}

.api-orchestrations-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-bottom:2rem}
.no-orchestrations-api{text-align:center;padding:2rem;color:var(--text-secondary)}
.no-orchestrations-api a{color:var(--accent);text-decoration:underline;cursor:pointer;font-weight:600}

.orchestration-api-list{display:flex;flex-direction:column;gap:1.5rem}
.api-orchestration-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all 0.2s}
.api-orchestration-card:hover{box-shadow:var(--shadow);border-color:var(--accent)}
.api-orch-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:1.25rem}
.api-orch-header h4{font-size:1.125rem;font-weight:700;margin:0 0 0.375rem 0}
.api-orch-id{font-size:0.75rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace}

.api-tab-buttons{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap}
.api-tab{padding:0.5rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:0.875rem;transition:all 0.15s;color:var(--text-primary)}
.api-tab:hover,.api-tab.active{background:var(--accent);color:white;border-color:var(--accent)}

.code-example{display:none;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.code-example.active{display:block}
.code-header{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}
.code-language{font-weight:600;font-size:0.875rem;color:var(--text-primary)}
.btn-copy-code{background:var(--accent);color:white;border:none;padding:0.375rem 0.875rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;font-size:0.8125rem;transition:all 0.15s}
.btn-copy-code:hover{background:#2563EB;transform:scale(1.05)}
.code-example pre{margin:0;padding:1.25rem;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:0.875rem;line-height:1.6;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-secondary) 100%)}

.api-info-chips{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1rem}
.info-chip-api{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:9999px;font-size:0.8125rem;font-weight:500}
.info-chip-api svg{flex-shrink:0}
.info-chip-api a{color:var(--accent);text-decoration:none;font-weight:600}
.info-chip-api a:hover{text-decoration:underline}

.api-best-practices{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-bottom:2rem}
.practices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:1.5rem}
.practice-card{background:var(--bg-secondary);padding:1.5rem;border-radius:var(--radius);border:1px solid var(--border)}
.practice-icon{font-size:2.5rem;margin-bottom:1rem}
.practice-card h4{font-size:1rem;font-weight:700;margin:0 0 1rem 0}
.practice-card ul{margin:0;padding-left:1.25rem}
.practice-card li{margin:0.5rem 0;font-size:0.875rem;line-height:1.5;color:var(--text-secondary)}

.api-footer-info{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.rate-limit-card,.support-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}
.rate-limit-card h3,.support-card h3{font-size:1.125rem;font-weight:700;margin:0 0 1.25rem 0}
.rate-limit-details{display:flex;flex-direction:column;gap:0.75rem}
.rate-item{display:flex;justify-content:space-between;padding:0.75rem 1rem;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}
.rate-label{font-size:0.875rem;font-weight:600;color:var(--text-secondary)}
.rate-value{font-size:0.875rem;font-weight:700;color:var(--accent)}
.support-card p{color:var(--text-secondary);margin:0 0 1.25rem 0;font-size:0.9375rem}
.support-links{display:flex;flex-direction:column;gap:0.75rem}
.support-link{padding:0.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text-primary);font-weight:600;font-size:0.875rem;transition:all 0.15s;display:block}
.support-link:hover{background:var(--accent);color:white;border-color:var(--accent);transform:translateX(4px)}

@media (max-width:768px){
.execution-meta-grid{grid-template-columns:1fr}
.execution-timeline-item{gap:0.75rem}
.execution-card-modern{padding:1rem}
.reports-header-card{flex-direction:column;text-align:center;gap:1.5rem}
.reports-header-card .btn-primary{width:100%}
.reports-grid{grid-template-columns:1fr}
.parameters-compact{flex-direction:column}
.quick-start-steps{grid-template-columns:1fr}
.practices-grid{grid-template-columns:1fr}
.api-footer-info{grid-template-columns:1fr}
.api-tab-buttons{flex-direction:column}
.api-tab{width:100%}
}