:root{--color-bg: #0b0b0b;--color-bg-elevated: #171717;--color-bg-surface: #262626;--color-border: #404040;--color-text: #e5e5e5;--color-text-muted: #a3a3a3;--color-text-subtle: #737373;--color-primary: #10b981;--color-primary-hover: #34d399;--color-danger: #ef4444;--color-warning: #f59e0b;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}.app{display:flex;flex-direction:column;height:100%;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);flex-shrink:0}.header-title{display:flex;align-items:center;gap:var(--space-sm);font-weight:600;font-size:1.125rem}.header-icon{font-size:1.5rem}.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.status-dot.connected{background:var(--color-primary)}.status-dot.connecting{background:var(--color-warning);animation:pulse 1s infinite}.status-dot.disconnected{background:var(--color-border)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main{flex:1;overflow-y:auto;padding:var(--space-md);display:flex;flex-direction:column}.card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg)}.field{margin-bottom:var(--space-md)}.input-with-suffix{display:flex;align-items:center;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .15s,box-shadow .15s}.input-with-suffix:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #10b98133}.input-with-suffix .input{flex:1;border:none;background:transparent;border-radius:0}.input-with-suffix .input:focus{box-shadow:none}.input-suffix{padding:var(--space-sm) var(--space-md);padding-left:0;color:var(--color-text-muted);font-size:.9375rem;flex-shrink:0;-webkit-user-select:none;user-select:none}.label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-xs)}.input{width:100%;padding:var(--space-sm) var(--space-md);font-size:1rem;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:inherit;transition:border-color .15s,box-shadow .15s}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #10b98133}.input::placeholder{color:var(--color-text-subtle)}.input.mono{font-family:var(--font-mono);font-size:.875rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:.875rem;font-weight:600;font-family:inherit;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;border:none;text-decoration:none}.btn:active{transform:scale(.98)}.btn-primary{background:var(--color-primary);color:#000}.btn-primary:hover{background:var(--color-primary-hover)}.btn-primary:disabled{background:var(--color-bg-surface);color:var(--color-text-subtle);cursor:not-allowed}.btn-secondary{background:var(--color-bg-surface);color:var(--color-text)}.btn-secondary:hover{background:var(--color-border)}.btn-ghost{background:transparent;color:var(--color-text-muted)}.btn-ghost:hover{color:var(--color-text);background:var(--color-bg-surface)}.btn-danger{background:transparent;color:var(--color-danger)}.btn-danger:hover{background:#ef44441a}.btn-lg{padding:var(--space-md) var(--space-lg);font-size:1rem;border-radius:var(--radius-md)}.btn-block{width:100%}.error-alert{display:flex;align-items:start;gap:var(--space-sm);padding:var(--space-md);background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm);color:#fca5a5;font-size:.875rem;margin-bottom:var(--space-md)}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:var(--space-xl)}.center-icon{width:80px;height:80px;border-radius:50%;background:var(--color-bg-surface);display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin-bottom:var(--space-lg)}.center-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-sm)}.center-subtitle{color:var(--color-text-muted);font-size:.875rem;margin-bottom:var(--space-lg)}.message-list{flex:1;overflow-y:auto}.message-item{display:block;width:100%;padding:var(--space-md);background:transparent;border:none;border-bottom:1px solid var(--color-border);text-align:left;font-family:inherit;color:inherit;cursor:pointer;transition:background .15s}.message-item:hover,.message-item:focus{background:var(--color-bg-surface);outline:none}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xs)}.message-sender{font-weight:600;color:var(--color-primary);font-size:.875rem}.message-time{font-size:.75rem;color:var(--color-text-subtle)}.message-subject{font-weight:500;font-size:.9375rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-preview{font-size:.8125rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-dropdown{position:relative}.account-trigger{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:transparent;border:none;color:var(--color-text);font-family:inherit;font-size:.875rem;cursor:pointer;border-radius:var(--radius-sm)}.account-trigger:hover{background:var(--color-bg-surface)}.account-menu{position:absolute;top:100%;left:0;margin-top:var(--space-xs);min-width:200px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 10px 40px #00000080;z-index:100;overflow:hidden}.account-option{display:block;width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;text-align:left;font-family:inherit;font-size:.875rem;color:var(--color-text);cursor:pointer}.account-option:hover,.account-option.active{background:var(--color-bg-surface)}.account-option.add{color:var(--color-primary);border-top:1px solid var(--color-border)}.timer-bar{height:3px;background:var(--color-border);overflow:hidden}.timer-bar-fill{height:100%;background:var(--color-primary);transition:width 1s linear}.footer{padding:var(--space-sm) var(--space-md);text-align:center;font-size:.75rem;color:var(--color-text-subtle);background:var(--color-bg-elevated);border-top:1px solid var(--color-border);flex-shrink:0}.spinner{width:20px;height:20px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.text-muted{color:var(--color-text-muted)}.text-subtle{color:var(--color-text-subtle)}.text-primary{color:var(--color-primary)}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-mono{font-family:var(--font-mono)}.mt-auto{margin-top:auto}.mb-md{margin-bottom:var(--space-md)}.gap-sm{gap:var(--space-sm)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.install-banner{position:fixed;bottom:var(--safe-bottom);bottom:calc(var(--safe-bottom) + var(--space-md));left:var(--space-md);right:var(--space-md);display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-primary);border-radius:var(--radius-md);box-shadow:0 8px 32px #10b9814d;z-index:1000;animation:slideUp .3s ease-out}.install-banner.ios{background:var(--color-bg-elevated);border:1px solid var(--color-border);box-shadow:0 8px 32px #00000080}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.install-icon{font-size:1.5rem;flex-shrink:0}.install-text{flex:1;display:flex;flex-direction:column;gap:2px}.install-text strong{font-weight:600;font-size:.9375rem;color:#000}.install-banner.ios .install-text strong{color:var(--color-text)}.install-text span{font-size:.75rem;color:#000000b3}.install-banner.ios .install-text span{color:var(--color-text-muted)}.install-btn{padding:var(--space-sm) var(--space-md);background:#000;color:var(--color-primary);font-size:.875rem;font-weight:600;border:none;border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0}.install-btn:active{transform:scale(.95)}.install-dismiss{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#0003;color:#000;border:none;border-radius:50%;font-size:.875rem;cursor:pointer;flex-shrink:0}.install-banner.ios .install-dismiss{background:var(--color-bg-surface);color:var(--color-text-muted)}.setup-container{display:flex;flex-direction:column;height:100%}.scanner-section{position:relative;flex:1;background:#000;overflow:hidden;display:flex;flex-direction:column}.scanner-header{position:absolute;top:0;left:0;right:0;padding:var(--safe-top);background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);z-index:10;color:#fff;text-align:center}.scanner-title{padding:var(--space-md);font-size:1.125rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5)}.scanner-frame{flex:1;position:relative;display:flex;align-items:center;justify-content:center}#qr-scanner-container{width:100%;height:100%;overflow:hidden}#qr-scanner-container video{object-fit:cover!important}.scanner-overlay-guide{position:absolute;width:280px;height:280px;border:2px solid rgba(255,255,255,.3);border-radius:24px;box-shadow:0 0 0 4000px #00000080;pointer-events:none;z-index:5}.scanner-overlay-guide:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:2px solid var(--color-primary);border-radius:24px;clip-path:polygon(0% 40px,0% 0%,40px 0%,100% 0%,100% 40px,100% 100%,100% calc(100% - 40px),calc(100% - 40px) 100%,0% 100%);opacity:.8}.manual-entry-section{background:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding:var(--space-lg) var(--space-md);padding-bottom:calc(var(--space-lg) + var(--safe-bottom))}.divider-text{text-align:center;color:var(--color-text-subtle);font-size:.875rem;margin-bottom:var(--space-md);position:relative}.divider-text:before,.divider-text:after{content:"";position:absolute;top:50%;width:30%;height:1px;background:var(--color-border)}.divider-text:before{left:0}.divider-text:after{right:0}.status-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000d9;animation:fadeIn .3s ease-out;padding:var(--space-xl);text-align:center}.success-icon{width:80px;height:80px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;margin-bottom:var(--space-lg);animation:popIn .5s cubic-bezier(.175,.885,.32,1.275)}.success-title{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:var(--space-sm);animation:slideUpFade .4s .2s backwards}.success-subtitle{font-size:1rem;color:#ffffffb3;animation:slideUpFade .4s .3s backwards}.error-icon{width:80px;height:80px;background:#ef444433;color:var(--color-danger);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-lg);animation:shake .5s ease-in-out}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideUpFade{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.listening-container{display:flex;flex-direction:column;height:100%}.connection-bar{padding:var(--space-xs) var(--space-md);background:var(--color-bg-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:.75rem;color:var(--color-text-muted)}.connection-status{width:6px;height:6px;border-radius:50%}.connection-status.connected{background:var(--color-primary);box-shadow:0 0 8px var(--color-primary)}.connection-status.connecting{background:var(--color-warning);animation:pulse 1s infinite}.connection-status.disconnected{background:var(--color-danger)}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-muted);padding:var(--space-xl);text-align:center}.antenna-animation{font-size:4rem;margin-bottom:var(--space-lg);position:relative;animation:float 3s ease-in-out infinite}.antenna-wave{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border:2px solid var(--color-primary);border-radius:50%;opacity:0;animation:ripple 2s infinite}.antenna-wave:nth-child(2){animation-delay:.6s}.antenna-wave:nth-child(3){animation-delay:1.2s}@keyframes ripple{0%{width:100%;height:100%;opacity:.8;border-width:2px}to{width:300%;height:300%;opacity:0;border-width:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}