*{box-sizing:border-box} body{margin:0;padding:40px;background:#f4f4f6;color:#3e0d61;font-family:Arial,sans-serif} .panel{max-width:1100px;margin:0 auto;text-align:left;display:grid;grid-template-columns:1fr;gap:0} .layout{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start;width:100%} .layout .header-banner,.layout .header-steps{grid-column:1 / -1} .layout .preview-wrapper{grid-column:2} .preview-wrapper{display:flex;flex-direction:column} .preview-header{background:#fff;border-radius:10px;padding:14px 20px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.05);border-left:5px solid #1edfae;font-size:18px;font-weight:700;color:#3e0d61} .header-banner{background:#fff;border-radius:12px;padding:24px 24px 24px 32px;margin-bottom:18px;box-shadow:0 2px 12px rgba(0,0,0,.06);border-left:5px solid #1edfae;display:flex;align-items:center;gap:20px} .header-logo{width:100px;height:auto;flex-shrink:0} .header-text{flex:1} .header-banner .brand-tag{display:inline-block;font-size:12px;font-weight:600;color:#1edfae;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px} .header-banner h1{margin:0 0 6px;font-size:24px;font-weight:700;color:#3e0d61;letter-spacing:-0.5px} .header-banner .subtitle{margin:0;font-size:14px;color:#666} .header-steps{background:#fff;border-radius:10px;padding:16px 24px;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;align-items:center;gap:12px;font-size:13px;color:#3e0d61;border:1px solid #e8e8e8;border-left:5px solid #1edfae;flex-wrap:wrap} .header-steps .step{display:flex;align-items:center;gap:8px} .header-steps .step-num{background:#1edfae;color:#3e0d61;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700} .header-steps .arrow{color:#ccc} .form-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06)} .form-card h2{margin:0 0 20px;font-size:18px;font-weight:700;color:#3e0d61} .form-group{margin-bottom:16px} .form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#3e0d61} .form-group input{width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:Arial,sans-serif;color:#3e0d61;transition:border-color 0.2s} .form-group input:focus{outline:none;border-color:#1edfae;box-shadow:0 0 0 3px rgba(30,223,174,0.15)} .preview-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06)} .preview-card h3{margin:0 0 16px;font-size:14px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px} .signature-wrap{overflow-x:auto;padding:8px 0} .copy-instructions{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;margin-top:12px;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.05);font-size:12px;color:#3e0d61;border:1px solid #e8e8e8} .copy-instructions .copy-icon{color:#1edfae;font-size:18px;font-weight:700} .gmail-steps{grid-column:1 / -1;background:#fff;border-radius:12px;padding:24px;margin-top:24px;box-shadow:0 2px 12px rgba(0,0,0,.06);border-left:5px solid #1edfae} .gmail-steps h2{text-align:center;font-size:18px;font-weight:700;color:#3e0d61;margin:0 0 20px} .steps-container{display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory} .step-item{flex:0 0 200px;scroll-snap-align:start;text-align:center} .step-item img{width:100%;height:160px;object-fit:contain;background:#f8f9fa;border-radius:10px;border:1px solid #e8e8e8;padding:12px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s} .step-item img:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,.15)} .step-item .img-wrapper{position:relative;margin-bottom:12px} .step-item .img-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.25);border-radius:10px;pointer-events:none} .step-item .img-overlay span{font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))} .steps-container{display:flex;gap:20px;overflow-x:auto;padding:10px 40px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#1edfae #e8e8e8} .steps-container::-webkit-scrollbar{height:8px} .steps-container::-webkit-scrollbar-track{background:#e8e8e8;border-radius:4px} .steps-container::-webkit-scrollbar-thumb{background:#1edfae;border-radius:4px} .scroll-hint{display:flex;justify-content:center;gap:8px;margin-bottom:0} .scroll-hint span{width:8px;height:8px;border-radius:50%;background:#e8e8e8;transition:all 0.2s} .scroll-hint span.active{background:#1edfae;width:24px;border-radius:4px} .steps-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px} .nav-btn{background:#1edfae;color:#3e0d61;border:none;width:36px;height:36px;border-radius:50%;font-size:18px;font-weight:700;cursor:pointer;transition:filter 0.2s;flex-shrink:0} .nav-btn:hover{filter:brightness(0.9)} .nav-btn:disabled{opacity:0.3;cursor:not-allowed} .step-item .step-num{background:#1edfae;color:#3e0d61;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-bottom:10px} .step-item p{font-size:12px;color:#555;margin:0;line-height:1.45} .lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1000;justify-content:center;align-items:center} .lightbox.active{display:flex} .lightbox-content{text-align:center;max-width:90%} .lightbox-content img{max-width:100%;max-height:65vh;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3)} .lightbox-text{margin-top:20px;color:#fff;font-size:18px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5)} .lightbox-close{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer;line-height:1} .lightbox-close:hover{color:#1edfae} #signature{width:699px;height:118px;background:#fff;margin:0;padding:0;border-collapse:collapse;border-spacing:0;font-family:Arial,sans-serif} #signature td{padding:0} .actions{margin-top:18px} .copy-btn{border:0;border-radius:8px;background:#1edfae;color:#3e0d61;font-family:Arial,sans-serif;font-weight:700;font-size:14px;padding:12px 20px;cursor:pointer;transition:filter 0.2s} .copy-btn:hover{filter:brightness(0.96)} .copy-btn:disabled{opacity:0.5;cursor:not-allowed} .status{display:inline-block;margin-left:12px;font-size:12px;color:#3e0d61;vertical-align:middle} .site-footer{grid-column:1 / -1;width:100%;margin-top:24px;background:#fff;border-radius:12px;padding:24px 24px 24px 32px;box-shadow:0 2px 12px rgba(0,0,0,.06);border-left:5px solid #1edfae;display:flex;align-items:center;gap:20px;box-sizing:border-box} .footer-logo{width:100px;height:auto;opacity:0.7;flex-shrink:0} .footer-content{flex:1;text-align:left} .footer-brand{font-size:18px;font-weight:700;color:#3e0d61;margin-bottom:4px} .footer-tagline{font-size:13px;color:#666} .footer-tagline a{color:#541690;text-decoration:none;font-weight:600} .footer-tagline a:hover{text-decoration:underline} .sr-only{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){.layout{grid-template-columns:1fr}}