.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background-color:var(--color-gray-800);color:var(--color-white);display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:100}.sidebar-header{padding:24px;border-bottom:1px solid var(--color-gray-700)}.logo{display:flex;align-items:center;gap:12px}.logo-icon{font-size:28px}.logo h1{font-size:24px;font-weight:600;letter-spacing:-.5px}.logo-subtitle{font-size:12px;color:var(--color-gray-400);margin-top:4px;text-transform:uppercase;letter-spacing:1px}.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--color-gray-300);border-radius:var(--border-radius);font-size:14px;font-weight:500;transition:all .2s}.nav-item:hover{background-color:var(--color-gray-700);color:var(--color-white)}.nav-item.active{background-color:var(--color-primary);color:var(--color-white)}.nav-item:disabled{opacity:.5;cursor:not-allowed}.nav-icon{font-size:18px}.sidebar-footer{padding:16px;border-top:1px solid var(--color-gray-700)}.btn-create-job{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background-color:var(--color-success);color:#fff;border-radius:var(--border-radius);font-weight:500;font-size:14px;transition:background-color .2s}.btn-create-job:hover{background-color:var(--color-success-light)}.btn-create-job:disabled,.btn-create-job:disabled:hover{background-color:var(--color-gray-500);cursor:not-allowed}.btn-create-job span{font-size:20px;line-height:1}.sidebar-note{margin-top:12px;font-size:12px;color:var(--color-gray-400);text-align:center}.sidebar-contact{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-contact-label{margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gray-400)}.sidebar-contact-link{color:var(--color-white);font-size:14px;font-weight:500;text-decoration:none;word-break:break-word}.sidebar-contact-link:hover{color:#9fd0ff;text-decoration:underline}.main-content{flex:1;margin-left:var(--sidebar-width);padding:24px 32px;min-height:100vh}.demo-banner{margin-bottom:24px;padding:24px 28px;border-radius:20px;background:linear-gradient(135deg,var(--color-primary) 0%,#0f766e 100%);color:var(--color-white);box-shadow:var(--shadow-lg)}.demo-eyebrow{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffffffc2}.demo-banner h2{margin-bottom:8px;font-size:28px;font-weight:700}.demo-banner p{max-width:720px;color:#ffffffe0}.content-header{margin-bottom:24px}.content-header h1{font-size:28px;font-weight:600;color:var(--color-gray-900);margin-bottom:4px}.content-header p{color:var(--color-gray-500)}.btn-back{display:inline-flex;align-items:center;gap:8px;color:var(--color-primary);font-weight:500;font-size:14px}.btn-back:hover{text-decoration:underline}.stats-section{margin-bottom:24px}.stats-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card{background:#fff;border-radius:var(--border-radius);padding:20px;box-shadow:var(--shadow-sm);border-left:4px solid var(--color-gray-300);display:flex;flex-direction:column}.stat-card.primary{border-left-color:var(--color-primary)}.stat-card.success{border-left-color:var(--color-success)}.stat-card.warning{border-left-color:var(--color-warning)}.stat-card.error{border-left-color:var(--color-error)}.stat-card.loading{min-height:80px}.stat-value{font-size:32px;font-weight:700;color:var(--color-gray-900);line-height:1.2}.stat-label{font-size:13px;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}.stat-skeleton{height:32px;background:linear-gradient(90deg,var(--color-gray-100) 25%,var(--color-gray-200) 50%,var(--color-gray-100) 75%);background-size:200% 100%;animation:pulse 1.5s infinite;border-radius:var(--border-radius-sm)}.jobs-section{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-sm);margin-bottom:24px}.job-list-container{padding:20px}.job-list-container h2{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--color-gray-800)}.job-table-wrapper{overflow-x:auto}.job-table{width:100%;border-collapse:collapse;font-size:14px}.job-table th{text-align:left;padding:12px 16px;font-weight:600;color:var(--color-gray-600);border-bottom:2px solid var(--color-gray-200);white-space:nowrap}.job-table td{padding:12px 16px;border-bottom:1px solid var(--color-gray-100)}.job-table tbody tr{cursor:pointer;transition:background-color .15s}.job-table tbody tr:hover{background-color:var(--color-gray-50)}.job-table tbody tr.selected{background-color:var(--color-primary-light)}.job-id{font-family:var(--font-mono);font-size:12px;color:var(--color-gray-500)}.job-prompt{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{text-align:center;color:var(--color-gray-400);padding:40px}.job-list-loading,.job-list-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;gap:16px}.job-list-error p{color:var(--color-error)}.status-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.status-badge.status-pending{background-color:var(--color-pending-bg);color:var(--color-pending)}.status-badge.status-processing{background-color:var(--color-processing-bg);color:var(--color-processing)}.status-badge.status-completed{background-color:var(--color-success-bg);color:var(--color-success)}.status-badge.status-failed{background-color:var(--color-error-bg);color:var(--color-error)}.streaming-section{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.streaming-view{padding:20px}.streaming-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.streaming-header h3{font-size:16px;font-weight:600;color:var(--color-gray-800)}.streaming-status{display:flex;align-items:center;gap:12px}.streaming-indicator{display:flex;align-items:center;gap:6px;color:var(--color-error);font-size:12px;font-weight:500;animation:pulse 1.5s infinite}.connection-status{font-size:12px;padding:4px 10px;border-radius:20px;font-weight:500}.connection-status.connected{background-color:var(--color-success-bg);color:var(--color-success)}.connection-status.disconnected{background-color:var(--color-error-bg);color:var(--color-error)}.streaming-content{background-color:var(--color-gray-900);border-radius:var(--border-radius);padding:16px;min-height:200px;max-height:400px;overflow-y:auto}.streaming-content.empty,.stream-placeholder{display:flex;align-items:center;justify-content:center;color:var(--color-gray-500)}.stream-text{color:var(--color-gray-100);font-family:var(--font-mono);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}.waiting-stream{display:flex;align-items:center;gap:12px;color:var(--color-gray-400)}.job-detail-container{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:24px}.job-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-gray-200)}.job-detail-header h2{font-size:20px;font-weight:600}.job-detail-loading,.job-detail-error,.empty-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px;gap:16px;color:var(--color-gray-500)}.detail-section{margin-bottom:24px}.detail-section h3{font-size:14px;font-weight:600;color:var(--color-gray-600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-item label{font-size:12px;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.5px}.detail-item code{font-family:var(--font-mono);font-size:12px;background-color:var(--color-gray-100);padding:4px 8px;border-radius:var(--border-radius-sm)}.prompt-box,.result-box,.error-box{background-color:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--border-radius);padding:16px}.result-box{background-color:var(--color-success-bg);border-color:var(--color-success)}.error-box{background-color:var(--color-error-bg);border-color:var(--color-error)}.prompt-box pre,.result-box pre,.error-box pre{font-family:var(--font-mono);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}.error-box pre{color:var(--color-error)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:var(--border-radius);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--color-gray-200)}.modal-header h2{font-size:18px;font-weight:600}.close-btn{font-size:24px;color:var(--color-gray-400);line-height:1;padding:4px}.close-btn:hover{color:var(--color-gray-600)}.modal-content form{padding:24px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:500;color:var(--color-gray-700);margin-bottom:6px}.form-group input,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--color-gray-300);border-radius:var(--border-radius);font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary)}.form-group textarea{resize:vertical;min-height:100px}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}@media (max-width: 1024px){.stats-panel{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.sidebar{transform:translate(-100%);transition:transform .3s}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;padding:20px}.stats-panel{grid-template-columns:1fr}.demo-banner{padding:20px;border-radius:16px}.demo-banner h2{font-size:24px}.detail-grid{grid-template-columns:1fr}.job-table-wrapper{font-size:12px}.job-table th,.job-table td{padding:8px 12px}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #0066cc;--color-primary-light: #4a9eff;--color-primary-dark: #004499;--color-success: #28a745;--color-success-light: #48c76a;--color-success-bg: #d4edda;--color-warning: #f0a500;--color-warning-light: #ffc107;--color-warning-bg: #fff3cd;--color-error: #dc3545;--color-error-light: #e4606d;--color-error-bg: #f8d7da;--color-pending: #6c757d;--color-pending-bg: #e9ecef;--color-processing: #17a2b8;--color-processing-bg: #d1ecf1;--color-white: #ffffff;--color-gray-50: #f8f9fa;--color-gray-100: #e9ecef;--color-gray-200: #dee2e6;--color-gray-300: #ced4da;--color-gray-400: #adb5bd;--color-gray-500: #6c757d;--color-gray-600: #495057;--color-gray-700: #343a40;--color-gray-800: #212529;--color-gray-900: #1a1d20;--sidebar-width: 260px;--header-height: 64px;--border-radius: 8px;--border-radius-sm: 4px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace}body{font-family:var(--font-family);background-color:var(--color-gray-50);color:var(--color-gray-800);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner{width:32px;height:32px;border:3px solid var(--color-gray-200);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.loading-spinner.small{width:16px;height:16px;border-width:2px}.spinner{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;margin-right:6px}.spinner.small{width:10px;height:10px;border-width:1.5px}button{cursor:pointer;border:none;background:none;font-family:inherit}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background-color:var(--color-primary);color:#fff;border-radius:var(--border-radius);font-weight:500;transition:background-color .2s}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background-color:var(--color-gray-200);color:var(--color-gray-700);border-radius:var(--border-radius);font-weight:500;transition:background-color .2s}.btn-secondary:hover{background-color:var(--color-gray-300)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}