:root{--font-body:"Inter", sans-serif;--bg:#f0f1f3;--surface:#fff;--text:#1a2a2e;--text-secondary:#555d65;--text-muted:#8c939a;--accent:#0077a0;--accent-hover:#006080;--accent-light:#0077a014;--border:#dcdfe3;--border-light:#e8eaed;--success:#58a860;--error:#d85050;--radius:10px;--radius-sm:6px;--shadow:0 1px 3px #0000000f, 0 4px 12px #00000008;--shadow-lg:0 2px 4px #0000000a, 0 8px 24px #0000000f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}.login-page{justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:380px;box-shadow:var(--shadow-lg);text-align:center;padding:3rem 2.5rem 2.25rem}.login-card .logo{margin-bottom:2rem}.login-card .logo img{width:120px;margin:0 auto;display:block}.login-card h1{margin-bottom:.35rem;font-size:1.25rem;font-weight:600}.login-card .tagline{color:var(--text-muted);margin-bottom:2rem;font-size:.88rem;font-weight:400}.google-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:.65rem;width:100%;padding:.65rem 1.25rem;font-size:.88rem;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.google-btn:hover{box-shadow:var(--shadow);border-color:#bbb}.google-btn:active{background:#f8f8f8}.google-btn svg{flex-shrink:0}.footer-note{color:var(--text-muted);margin-top:1.5rem;font-size:.75rem}.nav{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.6rem 2rem;display:flex}.nav-brand{color:var(--text);align-items:center;gap:.75rem;text-decoration:none;display:flex}.nav-brand img{height:22px}.nav-brand span{color:var(--text-secondary);font-size:.88rem;font-weight:500}.nav-user{align-items:center;gap:.75rem;display:flex}.nav-user img{object-fit:cover;border-radius:50%;width:28px;height:28px}.version-badge{text-align:center;color:#bbb;font-size:.65rem;position:fixed;bottom:8px;left:0;right:0}.nav-user a{color:var(--text-muted);font-size:.8rem;text-decoration:none;transition:color .15s}.nav-user a:hover{color:var(--text)}.generate-page{grid-template-columns:1fr 1.15fr;align-items:start;gap:2rem;max-width:1080px;min-height:calc(100vh - 50px);margin:0 auto;padding:2rem;display:grid}.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem}.form-card h1{margin-bottom:.25rem;font-size:1.1rem;font-weight:600}.form-subtitle{color:var(--text-muted);margin-bottom:1.5rem;font-size:.82rem}.form-group{margin-bottom:1rem}.form-group label{color:var(--text-secondary);margin-bottom:.3rem;font-size:.75rem;font-weight:500;display:block}.form-group input{width:100%;font-family:var(--font-body);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;padding:.55rem .7rem;font-size:.88rem;transition:border-color .15s,box-shadow .15s}.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}.form-group input::placeholder{color:var(--text-muted)}.form-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.form-select{width:100%;font-family:var(--font-body);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c939a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right .7rem center;background-repeat:no-repeat;outline:none;padding:.55rem 2rem .55rem .7rem;font-size:.88rem;transition:border-color .15s,box-shadow .15s}.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}.form-actions{gap:.5rem;margin-top:1.25rem;display:flex}.btn{font-family:var(--font-body);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;gap:.4rem;padding:.55rem 1rem;font-size:.82rem;font-weight:500;transition:all .15s;display:inline-flex}.btn svg{flex-shrink:0}.btn-primary{background:var(--accent);color:#fff;flex:1}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:#fafafa;border-color:#bbb}.btn-success-flash{background:var(--success)!important;color:#fff!important}.spinner{vertical-align:middle;border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.preview-section{position:sticky;top:2rem}.email-mock{border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--border);background:#fff;overflow:hidden}.email-mock-toolbar{border-bottom:1px solid var(--border-light);background:#f6f6f7;align-items:center;gap:10px;padding:9px 14px;display:flex}.email-mock-dots{gap:6px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ef6b5e}.dot-yellow{background:#f5be4f}.dot-green{background:#61c554}.email-mock-title{color:var(--text-muted);margin-left:auto;margin-right:auto;padding-right:42px;font-size:.72rem;font-weight:500}.email-mock-meta{color:var(--text-secondary);border-bottom:1px solid var(--border-light);padding:.75rem 1.15rem;font-size:.8rem}.meta-row{align-items:baseline;gap:.4rem;padding:.12rem 0;display:flex}.meta-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;min-width:48px;font-size:.68rem;font-weight:500}.meta-row strong{color:var(--text);font-weight:500}.email-mock-body{padding:1.15rem}.email-text{color:var(--text-secondary);margin-bottom:1.25rem;font-size:.85rem;line-height:1.6}.email-text p{margin-bottom:.3rem}.email-mock-divider{background:var(--border);width:32px;height:1px;margin-bottom:.85rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in>*{animation:.4s ease-out both fadeUp}.animate-in>:first-child{animation-delay:30ms}.animate-in>:nth-child(2){animation-delay:60ms}.animate-in>:nth-child(3){animation-delay:90ms}.animate-in>:nth-child(4){animation-delay:.12s}.animate-in>:nth-child(5){animation-delay:.15s}.animate-in>:nth-child(6){animation-delay:.18s}.toast{background:var(--text);color:#fff;border-radius:var(--radius-sm);font-family:var(--font-body);box-shadow:var(--shadow-lg);z-index:1000;padding:.55rem 1rem;font-size:.82rem;font-weight:500;animation:.2s toastIn,.2s 2.5s forwards toastOut;position:fixed;bottom:1.5rem;right:1.5rem}@keyframes toastIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}.photo-upload{align-items:center;gap:.75rem;display:flex}.photo-thumbnail-wrap{flex-shrink:0;position:relative}.photo-thumbnail{object-fit:cover;border:1px solid var(--border);background:var(--bg);border-radius:50%;width:48px;height:48px}.photo-reset{border:1px solid var(--border);background:var(--surface);width:18px;height:18px;color:var(--text-muted);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:13px;line-height:1;transition:color .15s,border-color .15s;display:flex;position:absolute;top:-4px;right:-4px}.photo-reset:hover{color:var(--error);border-color:var(--error)}.photo-drop{border:1.5px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.8rem;transition:border-color .15s,background .15s,color .15s;display:flex;position:relative}.photo-drop:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.photo-drop.drag-over{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}.photo-drop.uploading{pointer-events:none;opacity:.6}.photo-drop input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.photo-drop svg{flex-shrink:0}@media (width<=48em){.generate-page{grid-template-columns:1fr;padding:1.25rem 1rem}.preview-section{position:static}.form-row{grid-template-columns:1fr}.nav{padding:.6rem 1rem}}