:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;--bg-hover:#30363d;--border-color:#30363d;--text-primary:#c9d1d9;--text-secondary:#8b949e;--text-muted:#6e7681;--accent:#58a6ff;--accent-hover:#79c0ff;--success:#3fb950;--warning:#d29922;--error:#f85149;--hero-size:180px;--sidebar-width:220px;--panel-width:280px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.5}
.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr var(--panel-width);height:100vh;overflow:hidden}
.nav-sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:16px;overflow-y:auto}
.nav-brand{display:flex;align-items:center;gap:10px;padding-bottom:20px;margin-bottom:16px;border-bottom:1px solid var(--border-color)}
.nav-logo{font-size:28px}.nav-title{font-size:16px;font-weight:700}
.nav-items{flex:1;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all .15s;text-align:left;width:100%}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:var(--bg-tertiary);color:var(--accent);font-weight:600}
.nav-icon{font-size:18px;width:24px;text-align:center}
.nav-footer{padding-top:16px;border-top:1px solid var(--border-color)}
.nav-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot.online{background:var(--success);box-shadow:0 0 6px var(--success)}
.status-dot.offline{background:var(--error)}
.status-dot.checking{background:var(--warning);animation:pulse 1s infinite}
.main-content{display:flex;flex-direction:column;overflow-y:auto;padding:24px;position:relative}
.module{display:none;flex-direction:column;flex:1}.module.active{display:flex;animation:fadeIn .2s}
.module-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.module-header h3{font-size:20px;font-weight:700}
.hero-section{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;position:relative;padding:40px 20px}
.hero-mic{width:var(--hero-size);height:var(--hero-size);border-radius:50%;border:3px solid var(--accent);background:linear-gradient(135deg,rgba(88,166,255,.15),rgba(88,166,255,.05));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;position:relative;z-index:2;font-size:60px}
.hero-mic:hover{transform:scale(1.05);border-color:var(--accent-hover)}
.hero-mic.listening{border-color:var(--success);animation:micPulse 1.5s infinite}
.hero-mic.processing{border-color:var(--warning)}
.hero-pulse{position:absolute;width:calc(var(--hero-size)+40px);height:calc(var(--hero-size)+40px);border-radius:50%;border:2px solid rgba(88,166,255,.2);animation:heroPulse 3s infinite;z-index:1}
.hero-title{margin-top:24px;font-size:24px;font-weight:700}
.hero-subtitle{margin-top:8px;color:var(--text-secondary)}
.hero-status{display:flex;align-items:center;gap:8px;margin-top:16px}
.status-indicator{width:10px;height:10px;border-radius:50%}
.status-indicator.idle{background:var(--text-muted)}
.status-indicator.listening{background:var(--success);animation:pulse 1s infinite}
.status-indicator.processing{background:var(--warning);animation:pulse .5s infinite}
.hero-last-response{margin-top:24px;padding:16px 20px;background:var(--bg-tertiary);border-radius:var(--radius-md);max-width:600px;width:100%;text-align:left}
.response-label{font-size:11px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;letter-spacing:1px}
.response-text{font-size:15px;line-height:1.6}
.chat-container{display:flex;flex-direction:column;flex:1;height:100%}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border-color);margin-bottom:12px}
.chat-messages{flex:1;overflow-y:auto;padding:12px 0;display:flex;flex-direction:column;gap:8px}
.chat-empty{text-align:center;color:var(--text-muted);padding:40px}
.chat-msg{max-width:80%;padding:10px 14px;border-radius:var(--radius-md);font-size:14px;line-height:1.5;word-wrap:break-word}
.chat-msg.user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg.assistant{background:var(--bg-tertiary);color:var(--text-primary);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.system{align-self:center;font-size:12px;color:var(--text-muted);background:transparent}
.chat-input-bar{display:flex;gap:8px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:12px}
.chat-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:14px;outline:none;resize:none;font-family:inherit;line-height:1.4;max-height:120px}
.btn-icon,.btn-mic-small,.btn-send{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}
.btn-icon:hover,.btn-mic-small:hover,.btn-send:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-send{background:var(--accent);color:#fff}.btn-send:hover{background:var(--accent-hover)}
.translate-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-bottom:16px}
.translate-col{display:flex;flex-direction:column;gap:8px}
.translate-swap{display:flex;align-items:center}
.translate-lang{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px}
.translate-input,.translate-output{min-height:120px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;line-height:1.5}
.translate-input{resize:vertical}.translate-output{overflow-y:auto}
.btn-primary{padding:10px 24px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{padding:8px 16px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:13px;cursor:pointer}
.ocr-dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s}
.ocr-dropzone:hover,.ocr-dropzone.dragover{border-color:var(--accent);background:rgba(88,166,255,.05)}
.ocr-icon{font-size:48px;margin-bottom:12px}.ocr-or{color:var(--text-muted);margin:12px 0}
.ocr-result{margin-top:20px}.ocr-result h4{margin-bottom:8px}
.ocr-result pre{background:var(--bg-secondary);padding:16px;border-radius:var(--radius-sm);border:1px solid var(--border-color);white-space:pre-wrap;font-size:13px;max-height:400px;overflow-y:auto}
.search-input{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;width:200px}
.memory-list{display:flex;flex-direction:column;gap:8px}
.memory-empty{text-align:center;color:var(--text-muted);padding:40px}
.memory-item{padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:13px}
.memory-item:hover{border-color:var(--accent)}
.settings-groups{display:flex;flex-direction:column;gap:20px}
.settings-group h4{font-size:13px;text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:12px}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-bottom:8px}
.setting-row select,.setting-row input[type="checkbox"]{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);padding:6px 10px;font-size:13px}
.setting-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent)}
.side-panel{background:var(--bg-secondary);border-left:1px solid var(--border-color);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.panel-title{font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:12px}
.server-info{display:flex;flex-direction:column;gap:6px}
.info-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge.ok{background:rgba(63,185,80,.15);color:var(--success)}
.badge.unknown{background:rgba(210,153,34,.15);color:var(--warning)}
.panel-input{width:100%;padding:8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;resize:none}
.panel-output{margin-top:8px;padding:8px;background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:13px;min-height:40px;color:var(--text-secondary)}
@media(max-width:1200px){.side-panel{display:none}.app-shell{grid-template-columns:var(--sidebar-width) 1fr}}
@media(max-width:768px){.app-shell{grid-template-columns:1fr}
.nav-sidebar{position:fixed;bottom:0;left:0;right:0;flex-direction:row;padding:8px 12px;border-right:none;border-top:1px solid var(--border-color);z-index:100;height:auto}
.nav-brand,.nav-footer{display:none}.nav-items{flex-direction:row;justify-content:space-around}
.nav-item{flex-direction:column;padding:6px;gap:2px;font-size:10px}.nav-icon{font-size:20px}.nav-label{font-size:10px}
:root{--hero-size:130px}.translate-grid{grid-template-columns:1fr}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes heroPulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.4)}100%{box-shadow:0 0 0 20px rgba(63,185,80,.0)}}

.hero-mic.unsupported{cursor:not-allowed;opacity:.4;border-color:var(--text-muted);background:var(--bg-tertiary);pointer-events:auto}

.status-indicator.error,.status-indicator.denied,.status-indicator.no-mic,.status-indicator.no-speech,.status-indicator.aborted,.status-indicator.service{background:var(--error)}

.hero-type{width:100%;max-width:600px;margin:16px auto 0}.type-input-bar{display:flex;gap:8px;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md)}.type-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:14px;outline:none;resize:none;font-family:inherit;line-height:1.4;max-height:80px}.type-input::placeholder{color:var(--text-muted)}