:root{--bg-color: #0f172a;--sidebar-bg: #1e293b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent: #38bdf8;--cert-teal-dark: #3a7ca5;--cert-teal-medium: #69a297;--cert-teal-light: #bcedeb;--cert-gold: #cca300;--cert-text: #2c4a52;--cert-white: #ffffff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-primary);height:100vh;overflow:hidden}.app-container{display:flex;height:100%}.controls{width:350px;background-color:var(--sidebar-bg);padding:2rem;display:flex;flex-direction:column;gap:1.5rem;border-right:1px solid #334155;box-shadow:4px 0 15px #0000004d;z-index:10;overflow-y:auto}.controls h1{font-size:1.5rem;color:var(--text-primary);margin-bottom:.5rem}.controls p{color:var(--text-secondary);font-size:.9rem}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}label{font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}input,textarea{padding:.75rem;border-radius:6px;border:1px solid #475569;background-color:#334155;color:#fff;font-family:inherit;transition:border-color .2s;width:100%}input:focus,textarea:focus{outline:none;border-color:var(--accent)}textarea{resize:vertical}button{width:100%;padding:1rem;background-color:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem}button:hover{background-color:#0284c7}.hidden{display:none!important}.mode-toggle{display:flex;align-items:center;gap:10px;padding:10px;background:#334155;border-radius:8px;border:1px solid #475569}.switch{position:relative;display:inline-block;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--accent)}input:checked+.slider:before{transform:translate(20px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.preview-area{flex:1;background-color:var(--bg-color);display:flex;align-items:center;justify-content:center;padding:2rem;overflow:auto;background-image:radial-gradient(#334155 1px,transparent 1px);background-size:20px 20px}.preview-wrapper{box-shadow:0 20px 50px #00000080}.certificate-container{width:794px;height:1123px;background-color:var(--cert-white);color:var(--cert-text);position:relative;padding:0;display:flex;flex-direction:column;overflow:hidden;transform-origin:top center}.modern-frame{position:absolute;top:20px;left:20px;right:20px;bottom:20px;border:3px solid #28acb6;z-index:5}.frame-inner{position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:1px solid #28acb6}.watermark-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;opacity:.12;z-index:1;pointer-events:none;filter:grayscale(100%)}.watermark-container img{width:100%;height:auto}.seal-container{position:absolute;bottom:60px;right:60px;width:140px;height:140px;z-index:20;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}.seal-container img{width:100%;height:auto}.modern-frame:before,.modern-frame:after,.frame-inner:before,.frame-inner:after{content:"";position:absolute;width:20px;height:20px;background:transparent;border-style:solid;border-color:#28acb6}.modern-frame:before{top:-3px;left:-3px;border-width:6px 0 0 6px}.modern-frame:after{bottom:-3px;right:-3px;border-width:0 6px 6px 0}.frame-inner:before{top:-1px;right:-1px;border-width:2px 2px 0 0;border-color:var(--cert-gold)}.frame-inner:after{bottom:-1px;left:-1px;border-width:0 0 2px 2px;border-color:var(--cert-gold)}.content{position:relative;z-index:10;text-align:center;padding:60px 40px;height:100%;display:flex;flex-direction:column;align-items:center}.header{margin-bottom:40px;margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:15px}.logo-img{max-width:400px;height:auto;object-fit:contain}.tagline{background-color:#28acb6;color:#fff;padding:8px 30px;border-radius:20px;font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.cert-title{font-family:Inter,sans-serif;font-weight:300;font-size:3.5rem;color:#000;margin:40px 0;text-transform:capitalize}.body-text{flex:1;width:80%}.certify-phrase{font-size:1.1rem;font-weight:600;color:#000;margin-bottom:20px;text-transform:uppercase;letter-spacing:.05em}.student-name{font-family:Inter,sans-serif;font-weight:700;font-size:2.2rem;color:#000;text-transform:uppercase;margin-bottom:20px;line-height:1.2}.action-phrase{font-size:1.2rem;font-weight:600;margin-bottom:15px;color:#000}.course-name{font-family:Inter,sans-serif;font-weight:700;font-size:1.8rem;color:#000;margin-bottom:15px}.details{font-size:1.1rem;color:#000;font-weight:500;max-width:600px;margin:0 auto;line-height:1.5}.footer{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:30px}.signature-block{text-align:center;position:relative}.signature-img{font-family:Great Vibes,cursive;font-size:3.5rem;color:#333;margin-bottom:-10px;display:block;transform:rotate(-5deg)}.signature-line{width:300px;height:2px;background-color:#000;margin:5px auto}.instructor-role{font-size:1rem;font-weight:600;color:#000}.disclaimer{font-size:.75rem;color:#000;max-width:80%;margin-bottom:30px;line-height:1.4}.disclaimer strong{color:#000;display:block;margin-bottom:5px;font-size:.85rem}.bottom-info{display:flex;justify-content:center;width:100%;align-items:center;font-size:.8rem;color:#000;text-align:center;margin-bottom:20px}.contact-lines p{margin-bottom:3px}.qr-placeholder{width:80px;height:80px;background-color:#eee;border:2px solid var(--cert-teal-light);display:flex;align-items:center;justify-content:center;color:var(--cert-teal-dark);font-size:.7rem;text-align:center}@media (max-width: 1200px){.certificate-container{transform:scale(.6);margin-top:-200px;margin-bottom:-200px}}