:root{--primary: #1a73e8;--primary-hover: #1557b0;--primary-light: #e8f0fe;--primary-light-hover: #d2e3fc;--on-primary: #ffffff;--surface: #ffffff;--surface-dim: #f8fafc;--background: #f1f5f9;--on-surface: #1e293b;--on-surface-variant: #64748b;--outline: #e2e8f0;--qr-dark: #1e293b;--qr-light: #ffffff;--shadow: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}[data-theme=dark]{--primary: #8ab4f8;--primary-hover: #aecbfa;--primary-light: #1e3a5f;--primary-light-hover: #264a73;--on-primary: #1e293b;--surface: #1e293b;--surface-dim: #162032;--background: #0f172a;--on-surface: #e2e8f0;--on-surface-variant: #94a3b8;--outline: #334155;--shadow: 0 10px 15px -3px rgba(0, 0, 0, .35), 0 4px 6px -4px rgba(0, 0, 0, .2);--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .25)}*{box-sizing:border-box;margin:0;padding:0}*,*:before,*:after{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--background);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1.5rem}.material-symbols-rounded{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}.card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:400px;overflow:hidden}.card-header{padding:1.75rem 1.75rem 0;display:flex;justify-content:space-between;align-items:center}.card-header h1{font-family:Google Sans,sans-serif;font-size:1.5rem;font-weight:500;color:var(--on-surface)}.theme-toggle{background:var(--surface-dim);border:none;border-radius:var(--radius-sm);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--on-surface-variant)}.theme-toggle:hover{background:var(--outline);color:var(--on-surface)}.theme-toggle .material-symbols-rounded{font-size:1.25rem}.icon-light,.icon-dark{display:none}:root .icon-light{display:block}[data-theme=dark] .icon-light{display:none}[data-theme=dark] .icon-dark{display:block}.card-body{padding:1.5rem 1.75rem}.input-group{position:relative}.input-field{width:100%;padding:1rem 1rem 1rem 3rem;font-family:Roboto,sans-serif;font-size:1rem;color:var(--on-surface);background:var(--surface-dim);border:1px solid var(--outline);border-radius:var(--radius-md)}.input-field::placeholder{color:var(--on-surface-variant)}.input-field:hover{background:var(--outline)}.input-field:focus{outline:none;background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.input-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--on-surface-variant);font-size:1.25rem;pointer-events:none}.input-field:focus+.input-icon{color:var(--primary)}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1rem;padding:.875rem 1.5rem;font-family:Google Sans,sans-serif;font-size:.9375rem;font-weight:500;color:var(--on-primary);background:var(--primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:transform .1s}.btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn .material-symbols-rounded{font-size:1.25rem}.divider{height:1px;background:var(--outline);margin:0 1.75rem}.output-section{padding:1.5rem 1.75rem 1.75rem;display:flex;flex-direction:column;align-items:center}.qr-container{width:224px;height:224px;display:flex;align-items:center;justify-content:center;position:relative}.placeholder{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--on-surface-variant);transition:opacity .2s}.placeholder.hidden{opacity:0;pointer-events:none}.placeholder-icon{width:80px;height:80px;background:var(--surface-dim);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.placeholder-icon .material-symbols-rounded{font-size:2.5rem;color:var(--outline)}.placeholder-text{font-size:.875rem;text-align:center}#qrcode{display:none;background:transparent;border-radius:var(--radius-md);padding:12px;animation:fadeIn .4s ease-out}[data-theme=dark] #qrcode{background:var(--qr-light);box-shadow:var(--shadow)}#qrcode canvas,#qrcode img{display:block;width:200px!important;height:200px!important}#qrcode.visible{display:flex}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.qr-actions{display:flex;gap:.75rem;margin-top:1.25rem;height:36px}.qr-actions.hidden{visibility:hidden}.btn-secondary{display:flex;align-items:center;gap:.375rem;padding:.625rem 1rem;font-family:Google Sans,sans-serif;font-size:.8125rem;font-weight:500;color:var(--primary);background:var(--primary-light);border:none;border-radius:var(--radius-sm);cursor:pointer}.btn-secondary:hover{background:var(--primary-light-hover)}.btn-secondary .material-symbols-rounded{font-size:1.125rem}.card-footer{padding:1.25rem 1.75rem;background:var(--surface-dim);border-top:1px solid var(--outline);display:flex;align-items:center;justify-content:center;gap:.5rem}.footer-text{font-size:.75rem;color:var(--on-surface-variant)}.footer-link{color:var(--primary);text-decoration:none}.footer-link:hover{text-decoration:underline}.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%) translateY(100px);background:var(--on-surface);color:var(--surface);padding:.875rem 1.25rem;border-radius:var(--radius-sm);font-size:.875rem;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s;z-index:100}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:480px){body{padding:2rem 1rem 1rem;align-items:flex-start}.card{border-radius:var(--radius-lg)}.card-header,.card-body,.output-section,.card-footer{padding-left:1.25rem;padding-right:1.25rem}.divider{margin:0 1.25rem}}