:root{--bg-deep:#0b1120;--bg-card:#1e293b;--bg-input:#0f172a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-gold:#fbbf24;--accent-gold-hover:#f59e0b;--accent-red:#ef4444;--accent-green:#22c55e;--border-color:#334155;--font-main:"Inter", system-ui, -apple-system, sans-serif;--font-serif:"Playfair Display", Georgia, serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-primary);font-family:var(--font-main);justify-content:center;align-items:center;min-height:100vh;padding:2rem;line-height:1.6;display:flex}#app{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;width:100%;max-width:800px;padding:2.5rem;box-shadow:0 25px 50px -12px #00000080}header{text-align:center;margin-bottom:2rem}header h1{font-family:var(--font-serif);color:var(--accent-gold);margin-bottom:.5rem;font-size:2.5rem}.subtitle{color:var(--text-secondary);font-size:1.1rem}.step{animation:.4s ease-in-out fadeIn;display:none}.step.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h2{font-family:var(--font-serif);color:var(--text-primary);border-bottom:2px solid var(--accent-gold);margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1.8rem;display:inline-block}.form-group{margin-bottom:1.5rem}label{color:var(--text-secondary);margin-bottom:.5rem;font-weight:500;display:block}input,.select-input{background:var(--bg-input);border:1px solid var(--border-color);width:100%;color:var(--text-primary);appearance:none;border-radius:8px;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s}input:focus,.select-input:focus{border-color:var(--accent-gold);outline:none}.element-grid{grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem;display:grid}.element-card{background:var(--bg-input);border:2px solid var(--border-color);cursor:pointer;color:var(--text-primary);border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;padding:2rem;transition:all .2s;display:flex}.element-card:hover{border-color:var(--accent-gold);transform:translateY(-2px)}.element-card.selected{border-color:var(--accent-gold);background:#fbbf241a}.element-card .icon{font-size:2.5rem}.element-card .name{font-size:1.2rem;font-weight:700}.commitments-container{flex-direction:column;gap:2.5rem;margin-bottom:2rem;display:flex}.commitment-group h3{color:var(--accent-gold);margin-bottom:.25rem}.sub-text{color:var(--text-secondary);margin-bottom:.75rem;font-size:.9rem}.element-tabs{gap:.5rem;margin-bottom:1rem;display:flex}.tab-btn{background:var(--bg-deep);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:6px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s}.tab-btn:hover{border-color:var(--accent-gold)}.tab-btn.active{background:var(--accent-gold);color:var(--bg-deep);border-color:var(--accent-gold)}.options-list{flex-wrap:wrap;gap:.5rem;display:flex}.option-chip{background:var(--bg-input);border:1px solid var(--border-color);cursor:pointer;border-radius:20px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.option-chip:hover{border-color:var(--accent-gold)}.option-chip.selected{background:var(--accent-gold);color:var(--bg-deep);border-color:var(--accent-gold);font-weight:700}.option-chip.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.btn{cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:background .2s}.btn.primary{background:var(--accent-gold);color:var(--bg-deep)}.btn.primary:hover:not(:disabled){background:var(--accent-gold-hover)}.btn.primary:disabled{opacity:.5;cursor:not-allowed}.btn.secondary{border:1px solid var(--border-color);color:var(--text-secondary);background:0 0}.btn.secondary:hover{border-color:var(--text-secondary);color:var(--text-primary)}.btn.tertiary{color:var(--accent-red);background:0 0}.nav-buttons{justify-content:space-between;margin-top:2rem;display:flex}#certificate-container{justify-content:center;margin:2rem 0;display:flex}.hide-html-cert #certificate-container{display:none!important}#certificate{border:4px double var(--accent-gold);text-align:center;background:#1a1a1a;width:600px;padding:3rem;position:relative;box-shadow:0 0 20px #fbbf2433}#certificate:before{content:"";border:1px solid var(--accent-gold);pointer-events:none;position:absolute;inset:10px}.cert-title{font-family:var(--font-serif);color:var(--accent-gold);margin-bottom:.5rem;font-size:2.2rem}.cert-subtitle{color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;margin-bottom:1rem;font-size:1rem}.cert-name{color:var(--text-primary);font-size:2rem;font-weight:700;font-family:var(--font-serif);margin:1rem 0}.cert-person-context{color:var(--text-secondary);margin-bottom:2rem}.cert-element{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:2rem;font-size:1.1rem}.cert-commitments{text-align:center;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;display:grid}.cert-item{border:1px solid var(--border-color);background:#ffffff08;border-radius:12px;flex-direction:column;align-items:center;padding:1.5rem;display:flex}.cert-label{font-family:var(--font-serif);color:var(--accent-gold);text-transform:uppercase;margin-bottom:.5rem;font-size:1.2rem}.cert-item-element{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;background:#0000004d;border-radius:20px;margin-bottom:1rem;padding:.2rem .8rem;font-size:.75rem;display:inline-block}.cert-value{color:var(--text-primary);font-size:1rem;font-weight:500;line-height:1.4}.cert-issued{color:var(--text-secondary);margin-top:2.5rem;font-size:.8rem}#result-area{text-align:center;margin-top:2rem}#result-area img{border-radius:8px;max-width:100%;margin-bottom:1rem;box-shadow:0 10px 30px #00000080}.hidden{display:none!important}footer{text-align:center;color:var(--text-secondary);margin-top:2rem;font-size:.8rem}@media (width<=600px){#app{padding:1.5rem}.element-grid{grid-template-columns:1fr}#certificate{width:100%;padding:1.5rem}.cert-commitments{grid-template-columns:1fr}}