*{box-sizing:border-box;margin:0;padding:0}:root{--primary: #0084ff;--primary-dark: #0066cc;--secondary: #00a400;--background: #f0f2f5;--surface: #ffffff;--text: #1c1e21;--text-secondary: #65676b;--border: #dadde1;--error: #fa383e;--warning: #f5a623;--success: #31a24c}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--text);line-height:1.5}.App{min-height:100vh;display:flex;flex-direction:column}.App-header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 2rem;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:2rem}.logo h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary),#00c6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.connection-badge{padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:500}.connection-badge.connected{background:#e7f5e9;color:var(--success)}.connection-badge.loading{background:#fff3e0;color:var(--warning)}.connection-badge.offline{background:#ffeef0;color:var(--error)}.tab-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;gap:.5rem;max-width:1200px;margin:0 auto;width:100%}.tab-btn{padding:1rem 1.5rem;border:none;background:transparent;color:var(--text-secondary);font-size:.9375rem;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s}.tab-btn:hover{color:var(--primary);background:#f8f9fa}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.error-banner{background:#ffeef0;color:var(--error);padding:.75rem 2rem;display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.error-banner button{background:none;border:none;color:var(--error);font-size:1.25rem;cursor:pointer}.main-content{flex:1;max-width:1200px;margin:0 auto;padding:2rem;width:100%}.dashboard{display:grid;gap:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-card{background:var(--surface);border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 1px 3px #0000001a}.stat-icon{font-size:2.5rem;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0f8ff,#e6f3ff);border-radius:12px}.stat-value{font-size:2rem;font-weight:700;color:var(--text)}.stat-label{color:var(--text-secondary);font-size:.875rem}.status-panel{background:var(--surface);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.status-panel h3{margin-bottom:1rem;font-size:1.125rem}.status-items{display:flex;gap:2rem;flex-wrap:wrap}.status-item{display:flex;align-items:center;gap:.5rem}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.green{background:var(--success)}.status-dot.yellow{background:var(--warning)}.status-dot.red{background:var(--error)}.status-dot.blue{background:var(--primary)}.recent-activity{background:var(--surface);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.recent-activity h3{margin-bottom:1rem;font-size:1.125rem}.activity-list{display:flex;flex-direction:column;gap:.75rem}.activity-item{display:flex;align-items:flex-start;gap:1rem;padding:.75rem;border-radius:8px;background:#f8f9fa}.activity-item.from-fred{background:#e7f5e9}.activity-icon{font-size:1.5rem}.activity-content{flex:1;min-width:0}.activity-text{color:var(--text);font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-time{color:var(--text-secondary);font-size:.75rem;margin-top:.25rem}.messages-panel{background:var(--surface);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.messages-panel h3{margin-bottom:1rem}.message-list{display:flex;flex-direction:column;gap:1rem;max-height:600px;overflow-y:auto}.message-item{padding:1rem;border-radius:12px;background:#f0f2f5}.message-item.from-fred{background:linear-gradient(135deg,#e7f5e9,#d4edda);margin-left:2rem}.message-item.from-user{margin-right:2rem}.message-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.8125rem}.message-sender{font-weight:600;color:var(--text)}.message-time{color:var(--text-secondary)}.message-text{color:var(--text);line-height:1.5;word-wrap:break-word}.message-badge{display:inline-block;margin-top:.5rem;padding:.25rem .5rem;background:var(--primary);color:#fff;border-radius:4px;font-size:.75rem}.config-panel{background:var(--surface);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.config-panel h3{margin-bottom:1.5rem}.config-form{display:flex;flex-direction:column;gap:1.5rem;max-width:600px}.config-group{display:flex;flex-direction:column;gap:.5rem}.config-group label{font-weight:600;color:var(--text);font-size:.9375rem}.config-group input[type=text],.config-group input[type=number],.config-group select,.config-group textarea{padding:.75rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .2s}.config-group input:focus,.config-group select:focus,.config-group textarea:focus{outline:none;border-color:var(--primary)}.config-group small{color:var(--text-secondary);font-size:.8125rem}.toggle-switch{position:relative;width:50px;height:26px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:26px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.setup-panel{background:var(--surface);border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.setup-panel h3{margin-bottom:1.5rem}.setup-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}.setup-section:last-child{border-bottom:none;margin-bottom:0}.setup-section h4{margin-bottom:1rem;color:var(--text)}.setup-section ol,.setup-section ul{margin-left:1.5rem;line-height:1.8}.setup-section pre{background:#1e1e1e;color:#d4d4d4;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.875rem;line-height:1.6}.setup-section code{background:#f0f2f5;padding:.125rem .375rem;border-radius:4px;font-family:Fira Code,monospace;font-size:.875rem}.api-key-form{display:flex;gap:.5rem;max-width:400px}.api-key-form input{flex:1;padding:.75rem;border:1px solid var(--border);border-radius:8px;font-size:1rem}.api-key-form button,.test-btn{padding:.75rem 1.5rem;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.api-key-form button:hover,.test-btn:hover{background:var(--primary-dark)}.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}.loading{text-align:center;padding:2rem;color:var(--text-secondary)}.App-footer{background:var(--surface);border-top:1px solid var(--border);padding:1rem 2rem;text-align:center;color:var(--text-secondary);font-size:.875rem}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem}.tab-nav{overflow-x:auto;padding:0 1rem}.tab-btn{padding:.75rem 1rem;white-space:nowrap}.main-content{padding:1rem}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:1rem}.stat-icon{font-size:1.5rem;width:40px;height:40px}.stat-value{font-size:1.5rem}.status-items{flex-direction:column;gap:.75rem}.message-item.from-fred,.message-item.from-user{margin:0}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f0f2f5;border-radius:4px}::-webkit-scrollbar-thumb{background:#c4c4c4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#f0f2f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}a{color:#0084ff;text-decoration:none}a:hover{text-decoration:underline}