:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f6f7f9;color:#1f1f1f}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid rgba(45,108,223,.35);outline-offset:2px}.logo{height:36px}body{margin:0;background-color:#f6f7f9;color:#1f1f1f}#root{min-height:100vh}.app-shell{display:flex;flex-direction:column;min-height:100vh}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;border-bottom:1px solid rgba(32,42,59,.08);background-color:#fff;box-shadow:0 10px 30px -20px #1f293759}.login img{height:72px}.login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;height:100vh}.logo img{height:36px}.login-link{font-size:medium;font-weight:600;color:#2d6cdf;background-color:#0000;text-decoration:none;cursor:pointer;padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(45,108,223,.3);transition:background-color .2s ease,color .2s ease}.login-link:hover{background-color:#2d6cdf14;color:#1f3f8f}.instructions-link{font-weight:600;color:#2d6cdf;text-decoration:none;padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(45,108,223,.3);transition:background-color .2s ease,color .2s ease}.instructions-link:hover{background-color:#2d6cdf14;color:#1f3f8f}.logout-link{font-size:medium;font-weight:600;color:#2d6cdf;background-color:#0000;text-decoration:none;cursor:pointer;padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(45,108,223,.3);margin-left:1rem;transition:background-color .2s ease,color .2s ease}.logout-link:hover{background-color:#2d6cdf14;color:#1f3f8f}.app-container{width:min(1100px,100%);display:flex;flex-direction:column;gap:2rem;margin:0 auto;padding:2.5rem 1.5rem 3rem}.app-header h1{margin:0;font-size:2rem}.app-header p{margin:.5rem 0 0;color:#5a5a5a}.template-controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.single-template-banner{flex:1;min-width:220px;padding:.75rem 1rem;border-radius:10px;border:1px solid #d6d9de;background-color:#f4f6fb;color:#3a3a3a;font-size:.95rem}.template-controls select{flex:1;min-width:220px;padding:.65rem .75rem;border:1px solid #d6d9de;border-radius:8px;font-size:1rem;background-color:#fff;color:inherit}.template-controls button{padding:.65rem 1.5rem;border-radius:8px;border:1px solid transparent;font-size:1rem;font-weight:600;background-color:#2d6cdf;color:#fff;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}.template-controls button:disabled{background-color:#ced7eb;color:#7f8ab7;cursor:not-allowed}.template-controls button:not(:disabled):hover{background-color:#2557b8}.content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.form-pane,.preview-pane{background-color:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 20px 45px -25px #1f293773;display:flex;flex-direction:column;gap:1rem}.form-pane h2,.preview-pane h2{margin:0;font-size:1.25rem}.field-grid{display:flex;flex-direction:column;gap:1rem}.field{display:flex;flex-direction:column;gap:.5rem}.field-label{font-weight:600;color:#3a3a3a}.field input{padding:.65rem .75rem;border:1px solid #d6d9de;border-radius:8px;font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}.field input:focus{border-color:#2d6cdf;box-shadow:0 0 0 4px #2d6cdf26;outline:none}.preview-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.preview-header button{padding:.5rem 1rem;border-radius:8px;border:1px solid transparent;background-color:#1a1a1a;color:#fff;font-weight:600;cursor:pointer;transition:background-color .2s ease}.preview-header button:disabled{background-color:#d7d7d7;color:#7a7a7a;cursor:not-allowed}.preview-header button:not(:disabled):hover{background-color:#000}.preview-output{border:1px dashed #d0d4da;border-radius:12px;padding:1rem;overflow:auto;max-height:70vh}.error-banner{background-color:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;padding:.75rem 1rem;border-radius:10px}.hint{color:#6b7280;margin:0}.gmail-note{margin-top:-.5rem;font-size:.9rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){#root{padding:1.5rem 1rem}.app-header h1{font-size:1.5rem}}