:root{--primary-color: #2c3e50;--accent-color: #c0392b;--gold: #d4af37;--parchment: #fdfbf7}body{font-family:Playfair Display,serif;background-color:#f0f0f0;margin:0;padding:20px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;gap:40px}#app{display:flex;gap:40px;max-width:1400px;width:100%}.controls{flex:1;background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 6px #0000001a;height:fit-content}.input-group{margin-bottom:20px}label{display:block;margin-bottom:8px;font-weight:700}input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-family:inherit;font-size:16px}button{background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:4px;cursor:pointer;font-size:16px;width:100%;transition:background .3s}button:hover{background-color:#34495e}.certificate-container{flex:2;display:flex;justify-content:center;align-items:center;padding:20px}.certificate{width:1000px;height:707px;background-color:var(--parchment);color:var(--primary-color);padding:40px;box-sizing:border-box;position:relative;box-shadow:0 10px 20px #0003;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");display:flex;flex-direction:column}.border-pattern{border:15px solid var(--primary-color);flex:1;box-sizing:border-box;padding:20px;position:relative;display:flex;flex-direction:column}.border-pattern:before{content:"";position:absolute;inset:5px;border:2px solid var(--gold);pointer-events:none}.inner-content{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;z-index:1}.title{font-family:Cinzel,serif;font-size:42px;margin:0;color:var(--primary-color);text-transform:uppercase;letter-spacing:4px;border-bottom:2px solid var(--gold);padding-bottom:10px;display:inline-block;line-height:1.2}.subtitle{font-style:italic;font-size:18px;margin:0}.script-font{font-family:Great Vibes,cursive;font-size:56px;color:var(--accent-color);margin:5px 0;line-height:1.2}.text{font-size:16px;margin:0}#cert-reason{font-size:28px;font-weight:700;margin:5px 0;text-transform:uppercase;color:var(--primary-color);max-width:80%;word-wrap:break-word;line-height:1.3}.seal-row{display:flex;justify-content:space-between;align-items:flex-end;width:100%;padding:0 40px;margin-top:20px;box-sizing:border-box}.signature-block{text-align:center;width:220px}.signature{font-family:Great Vibes,cursive;font-size:28px;margin-bottom:5px;min-height:35px}.line{border-top:2px solid var(--primary-color);margin-bottom:5px}.label{font-size:12px;text-transform:uppercase;letter-spacing:1px}.gold-seal{width:110px;height:110px;background:radial-gradient(circle at 30% 30%,gold,#b8860b);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px #0000004d;position:relative;border:4px dashed #8b6914;flex-shrink:0}.gold-seal span{color:#5c4004;font-weight:700;font-family:Cinzel,serif;text-align:center;line-height:1.2;font-size:13px;transform:rotate(-10deg)}.footer-notice{font-size:10px;color:var(--primary-color);opacity:.6;font-family:sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:15px;text-align:center;width:100%}@media(max-width:1100px){#app{flex-direction:column;align-items:center}.certificate{transform:scale(.8);transform-origin:top center;margin-bottom:-100px}.controls{width:100%;max-width:600px}}@media(max-width:800px){.certificate{transform:scale(.6);margin-bottom:-200px}}