:root{--ma-background: #f5f5f5;--ma-foreground: #000000;--ma-card: #ffffff;--ma-card-foreground: #000000;--ma-primary: #03a9f4;--ma-primary-foreground: #ffffff;--ma-secondary: #e7e7e7;--ma-text-secondary: rgba(0, 0, 0, .6);--ma-text-tertiary: rgba(0, 0, 0, .4);--ma-border: rgba(0, 0, 0, .1);--ma-input-bg: rgba(0, 0, 0, .03);--ma-input-focus-bg: rgba(3, 169, 244, .05);--ma-error: #d32f2f;--ma-radius: 24px;--ma-radius-sm: 10px}@media(prefers-color-scheme:dark){:root{--ma-background: #181818;--ma-foreground: #ffffff;--ma-card: #232323;--ma-card-foreground: #ffffff;--ma-secondary: #2d2d2d;--ma-text-secondary: rgba(255, 255, 255, .7);--ma-text-tertiary: rgba(255, 255, 255, .4);--ma-border: rgba(255, 255, 255, .08);--ma-input-bg: rgba(255, 255, 255, .05);--ma-input-focus-bg: rgba(3, 169, 244, .08);--ma-error: #ff6b6b}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--ma-background);color:var(--ma-foreground);min-height:100vh;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;max-width:460px;padding:16px}@media(max-width:500px){#app{padding:8px}}.view{display:flex;flex-direction:column;align-items:center;animation:fadeIn .3s ease-in}.view.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-card{width:100%;background:var(--ma-card);border:1px solid var(--ma-border);border-radius:var(--ma-radius);padding:2rem;box-shadow:0 25px 50px -12px #00000040}@media(max-width:500px){.login-card{padding:1.25rem}}.login-header{text-align:center;margin-bottom:1.5rem}@media(max-width:500px){.login-header{margin-bottom:1rem}}.login-logo{width:80px;height:80px;margin-bottom:1rem}.login-logo.error{filter:grayscale(1) opacity(.5)}@media(max-width:500px){.login-logo{width:60px;height:60px;margin-bottom:.75rem}}.login-title{font-size:1.5rem;font-weight:700;margin:0}@media(max-width:500px){.login-title{font-size:1.25rem}}.login-subtitle{font-size:.875rem;color:var(--ma-text-secondary);margin-top:.5rem}@media(max-width:500px){.login-subtitle{font-size:.8125rem;margin-top:.25rem}}.remote-info{text-align:center;margin-bottom:1rem}.cloud-icon{width:48px;height:48px;color:var(--ma-primary);margin-bottom:.5rem}.remote-info-text{font-size:.875rem;color:var(--ma-text-secondary)}.remote-id-section{margin-bottom:1rem}.label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.label-row label{font-size:.875rem;font-weight:500;color:var(--ma-foreground);margin:0}.scan-qr-link{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--ma-primary);font-size:.875rem;font-weight:500;cursor:pointer;padding:4px 8px;margin:-4px -8px;border-radius:4px;transition:background .2s ease}.scan-qr-link:hover{background:var(--ma-input-focus-bg)}.scan-icon{width:16px;height:16px}.remote-id-inputs{display:flex;gap:8px;margin-bottom:.5rem}@media(max-width:500px){.remote-id-inputs{gap:4px}}.remote-id-input{flex:1;min-width:0;text-align:center;padding:14px 8px;background:var(--ma-input-bg);border:1px solid var(--ma-border);border-radius:var(--ma-radius-sm);color:var(--ma-foreground);font-size:1rem;font-family:JetBrains Mono,SF Mono,Monaco,Cascadia Code,monospace;letter-spacing:.05em;text-transform:uppercase;transition:all .2s ease}.remote-id-input:focus{outline:none;border-color:var(--ma-primary);background:var(--ma-input-focus-bg)}.remote-id-input.segment-8{flex:8}.remote-id-input.segment-5{flex:5}@media(max-width:500px){.remote-id-input{padding:12px 4px;font-size:.875rem}}.help-text{font-size:.75rem;color:var(--ma-text-secondary);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:none;border-radius:var(--ma-radius-sm);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--ma-primary);color:var(--ma-primary-foreground)}.btn.primary:hover:not(:disabled){background:#0288d1}.btn.secondary{background:var(--ma-secondary);color:var(--ma-foreground);border:1px solid var(--ma-border)}.btn.secondary:hover:not(:disabled){background:var(--ma-input-focus-bg);border-color:var(--ma-primary)}.btn.full-width{width:100%}.login-footer{margin-top:1.5rem;text-align:center}@media(max-width:500px){.login-footer{margin-top:1rem}}.ohf-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--ma-text-secondary);font-size:.75rem;transition:opacity .2s ease}.ohf-link:hover{opacity:.7}.ohf-icon{width:16px;height:16px;flex-shrink:0}@media(max-width:500px){.ohf-link{font-size:.6875rem;flex-wrap:wrap}.ohf-icon{width:14px;height:14px}}.connecting-content{text-align:center;padding:1.5rem 0}.status-text{color:var(--ma-text-secondary);font-size:.875rem;margin-top:1rem}.spinner{width:48px;height:48px;border:3px solid var(--ma-border);border-top-color:var(--ma-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.error-message{color:var(--ma-error);text-align:center;font-size:.875rem;line-height:1.5;margin-bottom:1rem}.saved-connection{margin-bottom:1rem;padding:1rem;background:var(--ma-input-bg);border-radius:var(--ma-radius-sm)}.saved-connection.hidden{display:none}.server-info{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;text-align:center}.server-name{font-size:1rem;font-weight:500;color:var(--ma-foreground)}.server-version{font-size:.875rem;color:var(--ma-text-secondary)}#loading{gap:1rem}#loading p{color:var(--ma-text-secondary);font-size:.875rem}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000;animation:fadeIn .2s ease}.dialog-overlay.hidden{display:none}.dialog-card{background:var(--ma-card);border:1px solid var(--ma-border);border-radius:var(--ma-radius);width:100%;max-width:400px;padding:24px;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.dialog-header h3{margin:0;font-size:1.125rem;font-weight:600}.dialog-close{background:none;border:none;padding:8px;margin:-8px;cursor:pointer;color:var(--ma-text-secondary);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.dialog-close:hover{background:var(--ma-input-bg);color:var(--ma-foreground)}.dialog-close svg{width:20px;height:20px}.dialog-hint{font-size:.875rem;color:var(--ma-text-secondary);margin-bottom:16px;line-height:1.5}.qr-reader{width:100%;aspect-ratio:1;background:#000;border-radius:var(--ma-radius-sm);overflow:hidden}.qr-reader video{width:100%;height:100%;object-fit:cover}.qr-error{color:var(--ma-error);font-size:.875rem;text-align:center;margin-top:12px;padding:12px;background:#d32f2f1a;border-radius:var(--ma-radius-sm)}.qr-error.hidden{display:none}