body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:0}.tutorial-container{max-width:900px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;margin-top:80px}.tutorial-header{background:linear-gradient(135deg,#1e88e5 0%,#1565c0 100%);color:#fff;padding:40px 30px;text-align:center}.tutorial-header h1{font-size:2.5em;margin-bottom:10px;font-weight:700}.tutorial-header p{font-size:1.2em;opacity:.95}.tutorial-content{padding:40px 30px}.intro{background:#f0f7ff;border-left:4px solid #1e88e5;padding:20px;margin-bottom:40px;border-radius:6px}.intro h2{color:#1565c0;margin-bottom:10px;font-size:1.5em}.intro p{color:#555;line-height:1.8}.tutorial-step{margin-bottom:50px;position:relative}.step-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff;border-radius:50%;font-weight:bold;font-size:1.2em;margin-right:15px;flex-shrink:0}.step-header{display:flex;align-items:center;margin-bottom:20px}.step-title{font-size:1.8em;color:#1e88e5;font-weight:600}.step-description{margin-bottom:20px;color:#555;font-size:1.05em;line-height:1.8}.step-content{background:#f8f9fa;border-radius:8px;padding:25px;border:1px solid #e0e0e0}.field-example{background:#fff;border:2px solid #e3f2fd;border-radius:6px;padding:15px;margin:15px 0}.field-example label{display:block;font-weight:600;color:#1565c0;margin-bottom:8px;font-size:.95em}.field-example input,.field-example select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:.95em;background:#fafafa}.tip{background:#fff8e1;border-left:4px solid #ffa726;padding:15px;margin:20px 0;border-radius:4px}.tip strong{color:#f57c00;display:block;margin-bottom:5px}.tip p{color:#666;margin:0}.warning{background:#ffebee;border-left:4px solid #ef5350;padding:15px;margin:20px 0;border-radius:4px}.warning strong{color:#c62828;display:block;margin-bottom:5px}.checklist{list-style:none;padding:0}.checklist li{padding:12px;margin:8px 0;background:#fff;border-radius:6px;border:1px solid #e0e0e0;position:relative;padding-left:45px}.checklist li:before{content:"✓";position:absolute;left:15px;color:#4caf50;font-weight:bold;font-size:1.3em}.code{background:#263238;color:#aed581;padding:3px 8px;border-radius:4px;font-family:'Courier New',monospace;font-size:.9em}.button-example{display:inline-block;background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff;padding:12px 30px;border-radius:25px;text-decoration:none;font-weight:600;margin:15px 0;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px rgba(30,136,229,.3)}.button-example:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(30,136,229,.4)}.tutorial-footer{background:#f5f5f5;padding:30px;text-align:center;border-top:1px solid #e0e0e0}.tutorial-footer p{color:#666;margin-bottom:10px}.success-box{background:#e8f5e9;border:2px solid #4caf50;border-radius:8px;padding:20px;text-align:center;margin:30px 0}.success-box h3{color:#2e7d32;margin-bottom:10px;font-size:1.5em}.success-box p{color:#555}.merge-field-list{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.merge-field-tag{background:#fff;border:2px solid #1e88e5;color:#1565c0;padding:6px 12px;border-radius:20px;font-family:'Courier New',monospace;font-size:.9em;font-weight:600}@media(max-width:768px){body{padding:10px}.tutorial-header h1{font-size:1.8em}.tutorial-content{padding:20px 15px}.step-title{font-size:1.4em}}