: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)}.qr-scanner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;z-index:2000;display:flex;align-items:center;justify-content:center;padding:var(--space-md);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.qr-scanner-modal{width:100%;max-width:360px;background:var(--color-bg-elevated);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--color-border)}.qr-scanner-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.qr-scanner-header h3{font-size:1.125rem;font-weight:600}.qr-scanner-loading,.qr-scanner-error{text-align:center;padding:var(--space-xl)}.qr-scanner-loading p{margin-top:var(--space-md);color:var(--color-text-muted)}.qr-scanner-error p{color:var(--color-text-muted);margin-bottom:var(--space-md)}.qr-scanner-hint{margin-top:var(--space-md);font-size:.75rem;color:var(--color-text-subtle);text-align:center}#qr-scanner-container{border-radius:var(--radius-md);overflow:hidden}#qr-scanner-container.hidden{display:none}