:root{
  --bg:#0f172a;
  --bg-light:#1e293b;
  --surface:#1e293b;
  --surface-light:#334155;
  --panel:#ffffff;
  --muted:#64748b;
  --muted-light:#94a3b8;
  --accent:#0b6cd3;
  --accent-dark:#0952a1;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --gold:#d4a574;
  --text-primary:#0f172a;
  --text-secondary:#475569;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Roboto", -apple-system, "Segoe UI", sans-serif;
  background:linear-gradient(135deg, var(--bg) 0%, #1a1f35 100%);
  color:var(--text-primary);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Header */
.app-header{
  background:linear-gradient(135deg, var(--accent) 0%, #0952a1 100%);
  padding:24px 32px;
  box-shadow:0 8px 32px rgba(11, 108, 211, 0.2);
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1600px;
  margin:0 auto;
}

.header-left{
  display:flex;
  align-items:center;
  gap:16px;
  color:#fff;
}

.header-icon{
  font-size:40px;
  width:40px;
  height:40px;
}

.app-header h1{
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:32px;
  font-weight:700;
}

.app-header p{
  margin:4px 0 0;
  font-size:14px;
  opacity:0.9;
}

.header-badge{
  background:rgba(255,255,255,0.2);
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  color:#fff;
}

/* Main layout */
.app-main{
  display:flex;
  gap:24px;
  padding:24px 32px;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  align-items:flex-start;
  justify-content:center;
  flex:1;
}

.left-sidebar{
  width:380px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Form panel */
.form-panel{
  background:var(--panel);
  padding:24px;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.12);
  transition:all 0.3s ease;
}

.form-panel:hover{
  box-shadow:0 15px 50px rgba(0,0,0,0.15);
  transform:translateY(-2px);
}

.panel-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:2px solid #f1f5f9;
}

.panel-header .material-icons{
  color:var(--accent);
  font-size:24px;
}

.panel-header h2{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--text-primary);
}

.batch-info{
  background:#f0f9ff;
  border-left:4px solid var(--accent);
  padding:12px;
  border-radius:6px;
  font-size:13px;
  color:var(--text-secondary);
  margin-bottom:16px;
}

.batch-info p{
  margin:0;
}

.excel-template{
  background:#f8f9fa;
  padding:12px;
  border-radius:6px;
  margin-bottom:16px;
  font-size:12px;
}

.excel-template p{
  margin:0 0 8px 0;
  font-weight:600;
  color:var(--text-primary);
}

.template-example{
  background:#fff;
  padding:8px;
  border-radius:4px;
  border:1px solid #e2e8f0;
  overflow-x:auto;
}

.template-example code{
  font-size:11px;
  color:#334155;
  line-height:1.4;
}

.form-group{
  margin-bottom:16px;
}

.form-panel label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:500;
  color:var(--text-primary);
}

.label-icon{
  font-size:18px;
  color:var(--accent);
  width:18px;
  height:18px;
  flex-shrink:0;
}

.form-panel input[type="text"],
.form-panel input[type="file"],
.form-panel select{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1.5px solid #e2e8f0;
  font-size:14px;
  font-family:inherit;
  transition:all 0.2s ease;
}

.form-panel input[type="color"]{
  width:100%;
  height:40px;
  border-radius:8px;
  border:1.5px solid #e2e8f0;
  padding:4px;
  background:#fff;
  cursor:pointer;
}

.form-panel input[type="range"]{
  width:100%;
  accent-color:var(--accent);
  cursor:pointer;
}

.form-panel input[type="text"]:focus,
.form-panel input[type="file"]:focus,
.form-panel select:focus,
.form-panel input[type="color"]:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(11, 108, 211, 0.1);
  background-color:#fafbfc;
}

.text-editor-group{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:12px;
  background:#f8fafc;
}

.editor-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.editor-control label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:600;
  color:#334155;
}

.range-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.mini-value{
  min-width:44px;
  font-size:12px;
  font-weight:600;
  color:#475569;
  text-align:right;
}

.color-control{
  align-self:end;
}

#reset-text-styles{
  margin-top:10px;
}

#reset-text-position{
  margin-top:8px;
}

.movable-text{
  cursor:grab;
  user-select:none;
}

.movable-text:active{
  cursor:grabbing;
}

.movable-text.selected{
  outline:2px dashed rgba(11,108,211,0.75);
  outline-offset:4px;
  border-radius:6px;
}

.form-panel input[type="file"]::file-selector-button{
  padding:6px 12px;
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:6px;
  cursor:pointer;
  font-weight:500;
  margin-right:8px;
  transition:all 0.2s;
}

.form-panel input[type="file"]::file-selector-button:hover{
  background:var(--accent-dark);
}

.inline-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  margin-bottom:4px;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:500;
}

.inline-toggle input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--accent);
}

.field-help{
  margin:0;
  font-size:12px;
  color:var(--muted);
}

/* Orientation buttons */
.orientation-buttons{
  display:flex;
  gap:8px;
}

.btn-orientation{
  flex:1;
  background:#f1f5f9;
  color:var(--text-primary);
  border:1.5px solid #e2e8f0;
  padding:10px 14px;
}

.btn-orientation:hover{
  background:#e2e8f0;
  border-color:var(--accent);
}

.btn-orientation.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* Button styles */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  transition:all 0.2s ease;
  font-family:inherit;
}

.btn .material-icons{
  font-size:18px;
}

.btn-primary{
  background:var(--accent);
  color:#fff;
}

.btn-primary:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(11, 108, 211, 0.3);
}

.btn-primary:active{
  transform:translateY(0);
}

.btn-secondary{
  background:#f1f5f9;
  color:var(--text-primary);
  border:1.5px solid #e2e8f0;
}

.btn-secondary:hover{
  background:#e2e8f0;
}

.btn-success{
  background:var(--success);
  color:#fff;
}

.btn-success:hover{
  background:#059669;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-block{
  width:100%;
}

.form-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}

.form-actions .btn{
  flex:1;
  min-width:90px;
}

/* Progress bar */
.progress-container{
  margin-top:16px;
  padding:12px;
  background:#f0f9ff;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.progress-info{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:500;
  color:var(--text-secondary);
}

.progress-bar{
  height:6px;
  background:#d4d4d8;
  border-radius:3px;
  overflow:hidden;
}

.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent), #10b981);
  transition:width 0.3s ease;
  width:0%;
}

.notes{
  background:#fefce8;
  border-left:4px solid var(--warning);
  padding:12px;
  border-radius:6px;
  font-size:13px;
  color:var(--text-secondary);
  margin:0;
}

/* Preview panel */
.preview-panel{
  flex:1;
  max-width:1000px;
  min-width:320px;
  background:transparent;
  display:flex;
  flex-direction:column;
}

.preview-header{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted-light);
  margin-bottom:16px;
  font-size:13px;
  font-weight:500;
}


.preview-header .material-icons{
  font-size:18px;
  width:18px;
  height:18px;
}

/* Certificate */
.certificate{
  width:100%;
  max-width:1000px;
  height:640px;
  margin:0 auto;
  border-radius:12px;
  padding:40px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  background:linear-gradient(180deg,#fff 0%, #fbfcfe 100%);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
}

/* Landscape orientation (default) */
.certificate.landscape{
  width:100%;
  max-width:1000px;
  height:640px;
  aspect-ratio:auto;
}

/* Portrait orientation */
.certificate.portrait{
  width:100%;
  max-width:700px;
  height:900px;
  aspect-ratio:auto;
}

/* Inner */
.cert-inner{
  width:100%;
  height:100%;
  padding:40px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

/* Logo */
.cert-logo{
  width:120px;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}

/* Text elements */
.cert-title{font-family:"Playfair Display",serif;margin:0;font-size:28px;color:var(--accent);font-weight:700}
.cert-subtitle{margin:0;color:var(--muted);font-size:14px;font-weight:500}
.cert-name{margin:8px 0;font-size:48px;font-weight:700;letter-spacing:0.5px;color:var(--text-primary)}
.cert-event{color:var(--text-secondary);font-size:16px;margin:0}
.cert-meta{display:flex;gap:24px;justify-content:center;margin-top:20px;color:var(--text-secondary);font-size:14px}
.cert-meta div{padding:8px 0}
.cert-footer{display:flex;flex-direction:column;align-items:center;margin-top:40px}
.cert-sig{width:120px;height:auto;object-fit:contain}
.sig-label{font-size:12px;color:var(--text-secondary);margin-top:8px;font-weight:500}

/* Template: classic */
.certificate.classic{
  border:6px solid #e6eef8;
  background:linear-gradient(180deg,#ffffff 0%, #ffffff 100%);
  position:relative;
  overflow:hidden;
}
.certificate.classic::after{
  content:'🏆 📜 ✨ 🎖️ 🌟';
  position:absolute;
  bottom:20px;
  right:25px;
  font-size:20px;
  opacity:0.08;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.classic .cert-name{
  font-family:"Playfair Display",serif;
}
.certificate.classic::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(11,108,211,0.02) 0%, transparent 100%);
  pointer-events:none;
}

/* Template: modern */
.certificate.modern{
  background:linear-gradient(135deg,#ffffff 0%, #f7fbff 100%);
  border-left:16px solid var(--accent);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.certificate.modern::after{
  content:'🎯 ✅ 💡 🚀 ⭐';
  position:absolute;
  bottom:30px;
  left:25px;
  font-size:18px;
  opacity:0.1;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.modern .cert-title{color:var(--accent);font-size:26px}
.certificate.modern .cert-name{font-family:Roboto, sans-serif; font-size:44px;letter-spacing:0.8px}
.certificate.modern::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(11,108,211,0.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* Template: gold */
.certificate.gold{
  background:linear-gradient(135deg, #faf9f7 0%, #ede6dd 100%);
  border:8px solid var(--gold);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.certificate.gold::after{
  content:'✨ 👑 💎 🌟 🏅';
  position:absolute;
  top:25px;
  right:25px;
  font-size:18px;
  opacity:0.1;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.gold .cert-title{color:var(--gold);font-size:26px;text-transform:uppercase;letter-spacing:1px}
.certificate.gold .cert-name{color:var(--gold);font-family:"Playfair Display",serif;font-size:46px}
.certificate.gold .cert-meta{color:#8b7355}
.certificate.gold .cert-event{color:#8b7355}
.certificate.gold .cert-subtitle{color:#a0968f}
.certificate.gold::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  pointer-events:none;
}

/* Modal */
.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:999;
  backdrop-filter:blur(4px);
}

.batch-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  z-index:1000;
  min-width:320px;
  max-width:500px;
  max-height:80vh;
  overflow-y:auto;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px;
  border-bottom:1px solid #e2e8f0;
}

.modal-header h3{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--text-primary);
}

.modal-close{
  background:none;
  border:none;
  font-size:24px;
  cursor:pointer;
  color:var(--muted);
  padding:0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
}

.modal-close:hover{
  color:var(--danger);
  transform:rotate(90deg);
}

.modal-body{
  padding:20px;
}

.modal-body p{
  margin:0 0 16px 0;
  color:var(--text-secondary);
  font-size:14px;
}

#modal-stats{
  background:#f8f9fa;
  padding:12px;
  border-radius:8px;
  font-size:13px;
  line-height:1.8;
  color:var(--text-secondary);
}

.modal-footer{
  padding:16px 20px;
  border-top:1px solid #e2e8f0;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* Footer */
.app-footer{
  padding:16px 24px;
  text-align:center;
  background:rgba(0,0,0,0.05);
  border-top:1px solid #e2e8f0;
}

.app-footer small{
  color:var(--muted-light);
  font-size:12px;
}

/* ===== CATEGORY-SPECIFIC TEMPLATES ===== */

/* SPORTS TEMPLATES */
.certificate.sports-dynamic{
  background:linear-gradient(135deg, #ff6b35 0%, #004e89 100%);
  border:none;
  border-top:8px solid #ffd500;
  position:relative;
  overflow:hidden;
}
.certificate.sports-dynamic::before{
  content:'';
  position:absolute;
  top:-20px;
  right:-40px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.sports-dynamic::after{
  content:'⚽ 🏀 🎾 ⚡ 🏆';
  position:absolute;
  top:20px;
  right:30px;
  font-size:20px;
  opacity:0.15;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.sports-dynamic .cert-title{
  color:#ffd500;
  font-size:28px;
  text-transform:uppercase;
  letter-spacing:2px;
}
.certificate.sports-dynamic .cert-name{
  color:#ffffff;
  font-size:52px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.certificate.sports-dynamic .cert-event,
.certificate.sports-dynamic .cert-subtitle,
.certificate.sports-dynamic .cert-meta{
  color:#f0f0f0;
}

.certificate.sports-medal{
  background:linear-gradient(135deg, #1a472a 0%, #2d5f3f 100%);
  border:12px solid #daa520;
  border-radius:8px;
  position:relative;
  box-shadow:0 8px 32px rgba(218,165,32,0.3);
  overflow:hidden;
}
.certificate.sports-medal::after{
  content:'';
  position:absolute;
  top:-30px;
  left:-30px;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(218,165,32,0.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.sports-medal .cert-inner::before{
  content:'🥇 🎖️ 🏅';
  position:absolute;
  top:20px;
  left:20px;
  font-size:24px;
  opacity:0.7;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.sports-medal .cert-title{
  color:#daa520;
  font-size:26px;
  font-weight:700;
}
.certificate.sports-medal .cert-name{
  color:#ffd700;
  font-size:48px;
  font-family:"Playfair Display",serif;
}
.certificate.sports-medal .cert-event{
  color:#e8e8e8;
}
.certificate.sports-medal .cert-meta{
  color:#d4af37;
}

.certificate.sports-champion{
  background:linear-gradient(135deg, #000000 0%, #1a1a2e 100%);
  border-left:16px solid #ff6b6b;
  border-right:16px solid #ff6b6b;
  position:relative;
  overflow:hidden;
}
.certificate.sports-champion::before{
  content:'';
  position:absolute;
  top:-50px;
  left:50%;
  transform:translateX(-50%);
  width:250px;
  height:250px;
  background:radial-gradient(circle, rgba(255,107,107,0.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.sports-champion::after{
  content:'👑 🏆 ⭐ 🥇';
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  font-size:24px;
  letter-spacing:8px;
  opacity:0.2;
  pointer-events:none;
}
.certificate.sports-champion .cert-title{
  color:#ff6b6b;
  font-size:28px;
  text-transform:uppercase;
  letter-spacing:3px;
}
.certificate.sports-champion .cert-name{
  color:#ffffff;
  font-size:50px;
}
.certificate.sports-champion .cert-event{
  color:#ffb3b3;
  font-weight:600;
}
.certificate.sports-champion .cert-meta{
  color:#ff6b6b;
}

/* ARTS TEMPLATES */
.certificate.arts-creative{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border:none;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.certificate.arts-creative::before{
  content:'';
  position:absolute;
  top:-40px;
  right:-40px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.arts-creative::after{
  content:'🎨 🖌️ 🎭 ✨ 🖼️';
  position:absolute;
  top:25px;
  right:25px;
  font-size:20px;
  opacity:0.12;
  letter-spacing:8px;
  animation:float 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes float{
  0%, 100%{transform:translateY(0px)}
  50%{transform:translateY(-20px)}
}
.certificate.arts-creative .cert-title{
  color:#ffd89b;
  font-size:28px;
  font-family:"Playfair Display",serif;
}
.certificate.arts-creative .cert-name{
  color:#ffffff;
  font-size:48px;
  font-family:"Playfair Display",serif;
  text-shadow:3px 3px 6px rgba(0,0,0,0.3);
}
.certificate.arts-creative .cert-event{
  color:#f0e6ff;
}
.certificate.arts-creative .cert-meta{
  color:#e8d5ff;
}

.certificate.arts-vibrant{
  background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border:6px dashed #ffffff;
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.certificate.arts-vibrant::after{
  content:'🎪 🎨 🎭 🌈 💫';
  position:absolute;
  bottom:20px;
  right:25px;
  font-size:20px;
  opacity:0.15;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.arts-vibrant .cert-title{
  color:#ffffff;
  font-size:26px;
  font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,0.2);
}
.certificate.arts-vibrant .cert-name{
  color:#ffffff;
  font-size:46px;
  font-family:"Playfair Display",serif;
  font-weight:700;
}
.certificate.arts-vibrant .cert-event{
  color:#fffacd;
}
.certificate.arts-vibrant .cert-meta{
  color:#ffffff;
  font-weight:600;
}

.certificate.arts-gallery{
  background:linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border:3px solid #8b4513;
  border-radius:2px;
  box-shadow:
    inset 0 0 0 8px #ffecd2,
    inset 0 0 0 10px #8b4513;
  position:relative;
  overflow:hidden;
}
.certificate.arts-gallery::after{
  content:'🖼️ 🎨 🖌️ 🎭 📸';
  position:absolute;
  top:20px;
  left:20px;
  font-size:20px;
  opacity:0.1;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.arts-gallery .cert-title{
  color:#8b4513;
  font-size:24px;
  font-family:"Playfair Display",serif;
  font-weight:700;
}
.certificate.arts-gallery .cert-name{
  color:#5d3a1a;
  font-size:44px;
  font-family:"Playfair Display",serif;
}
.certificate.arts-gallery .cert-event{
  color:#654321;
}
.certificate.arts-gallery .cert-meta{
  color:#8b4513;
  font-weight:600;
}

/* SPORTS ADDITIONAL TEMPLATES */
.certificate.sports-fitness{
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border:6px solid #27ae60;
  border-radius:8px;
  box-shadow:
    0 8px 16px rgba(0,0,0,0.3),
    inset 0 0 0 2px #2ecc71;
  position:relative;
  overflow:hidden;
}
.certificate.sports-fitness::before{
  content:'💪 🏃 ⚡ 🎯 💪';
  position:absolute;
  top:15px;
  left:15px;
  font-size:18px;
  opacity:0.12;
  letter-spacing:4px;
  pointer-events:none;
}
.certificate.sports-fitness::after{
  content:'FITNESS';
  position:absolute;
  bottom:20px;
  right:20px;
  font-size:36px;
  font-weight:700;
  color:rgba(46,204,113,0.15);
  letter-spacing:2px;
  pointer-events:none;
}
.certificate.sports-fitness .cert-title{
  color:#ffffff;
  font-size:28px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.certificate.sports-fitness .cert-name{
  color:#2ecc71;
  font-size:48px;
  font-weight:700;
  text-shadow:1px 1px 3px rgba(0,0,0,0.4);
}
.certificate.sports-fitness .cert-event{
  color:#ffffff;
  text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
.certificate.sports-fitness .cert-meta{
  color:#2ecc71;
  font-weight:700;
}

.certificate.sports-tournament{
  background:linear-gradient(45deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
  border:8px solid #f39c12;
  box-shadow:
    inset 0 0 0 4px #f39c12,
    0 8px 20px rgba(0,0,0,0.4);
  position:relative;
  overflow:hidden;
}
.certificate.sports-tournament::before{
  content:'🏆 ⚽ 🥊 🎾 🏆';
  position:absolute;
  bottom:30px;
  right:30px;
  font-size:48px;
  opacity:0.08;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.sports-tournament::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      rgba(243,156,18,0.05) 10px,
      rgba(243,156,18,0.05) 12px
    );
  pointer-events:none;
}
.certificate.sports-tournament .cert-title{
  color:#f39c12;
  font-size:26px;
  text-transform:uppercase;
  letter-spacing:2px;
  text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
.certificate.sports-tournament .cert-name{
  color:#ecf0f1;
  font-size:50px;
  font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}
.certificate.sports-tournament .cert-event{
  color:#f39c12;
  font-weight:600;
}
.certificate.sports-tournament .cert-meta{
  color:#ecf0f1;
  font-weight:600;
}

.certificate.sports-achievement{
  background:linear-gradient(180deg, #1a472a 0%, #245d3f 50%, #1a472a 100%);
  border:10px solid #d4af37;
  border-radius:4px;
  box-shadow:
    inset 0 0 0 3px #1a472a,
    inset 0 0 0 5px #d4af37,
    0 10px 25px rgba(0,0,0,0.4);
  position:relative;
  overflow:hidden;
}
.certificate.sports-achievement::after{
  content:'🥇 ⭐ 🥇';
  position:absolute;
  top:20px;
  right:20px;
  font-size:32px;
  opacity:0.15;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.sports-achievement .cert-title{
  color:#d4af37;
  font-size:28px;
  font-family:"Playfair Display",serif;
  text-transform:uppercase;
  letter-spacing:3px;
}
.certificate.sports-achievement .cert-name{
  color:#e8d4a0;
  font-size:48px;
  font-family:"Playfair Display",serif;
  font-weight:700;
}
.certificate.sports-achievement .cert-event{
  color:#d4af37;
  font-weight:600;
}
.certificate.sports-achievement .cert-meta{
  color:#b8960f;
  font-weight:700;
}

/* ARTS ADDITIONAL TEMPLATES */
.certificate.arts-performance{
  background:linear-gradient(135deg, #8e44ad 0%, #3a0f5c 100%);
  border:6px solid #f1c40f;
  border-radius:12px;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.3),
    inset 0 0 0 3px #8e44ad;
  position:relative;
  overflow:hidden;
}
.certificate.arts-performance::before{
  content:'🎭 🎪 🎬 🎤 🎼';
  position:absolute;
  top:20px;
  left:20px;
  font-size:20px;
  opacity:0.1;
  letter-spacing:4px;
  pointer-events:none;
}
.certificate.arts-performance::after{
  content:'✨ PERFORMANCE ✨';
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
  color:rgba(241,196,15,0.2);
  letter-spacing:2px;
  font-weight:700;
  pointer-events:none;
}
.certificate.arts-performance .cert-title{
  color:#f1c40f;
  font-size:26px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}
.certificate.arts-performance .cert-name{
  color:#ecf0f1;
  font-size:48px;
  font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,0.4);
}
.certificate.arts-performance .cert-event{
  color:#f1c40f;
}
.certificate.arts-performance .cert-meta{
  color:#ecf0f1;
  font-weight:600;
}

.certificate.arts-design{
  background:linear-gradient(45deg, #e91e63 0%, #9c27b0 50%, #673ab7 100%);
  border:5px solid #ffc107;
  border-radius:15px;
  box-shadow:
    0 8px 16px rgba(0,0,0,0.3),
    inset 0 0 0 2px rgba(255,193,7,0.3);
  position:relative;
  overflow:hidden;
}
.certificate.arts-design::before{
  content:'🎨 ✏️ 🖌️ 🎭 💡';
  position:absolute;
  bottom:30px;
  left:20px;
  font-size:24px;
  opacity:0.08;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.arts-design::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 20px,
      rgba(255,193,7,0.05) 20px,
      rgba(255,193,7,0.05) 22px
    );
  pointer-events:none;
}
.certificate.arts-design .cert-title{
  color:#ffc107;
  font-size:26px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.4);
  letter-spacing:1px;
}
.certificate.arts-design .cert-name{
  color:#ffffff;
  font-size:48px;
  font-weight:700;
  text-shadow:2px 2px 6px rgba(0,0,0,0.5);
}
.certificate.arts-design .cert-event{
  color:#ffc107;
}
.certificate.arts-design .cert-meta{
  color:#ffffff;
  font-weight:600;
}

.certificate.arts-photography{
  background:linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border:8px solid #3498db;
  border-radius:2px;
  box-shadow:
    inset 0 0 0 4px #1a1a1a,
    inset 0 0 0 6px #3498db,
    0 8px 20px rgba(0,0,0,0.5);
  position:relative;
  overflow:hidden;
}
.certificate.arts-photography::before{
  content:'📸 🎥 📷 🌅 🎨';
  position:absolute;
  top:30px;
  right:30px;
  font-size:28px;
  opacity:0.1;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.arts-photography::after{
  content:'PHOTOGRAPHY';
  position:absolute;
  bottom:20px;
  left:20px;
  font-size:20px;
  color:rgba(52,152,219,0.15);
  letter-spacing:2px;
  font-weight:700;
  pointer-events:none;
}
.certificate.arts-photography .cert-title{
  color:#3498db;
  font-size:24px;
  letter-spacing:2px;
  text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
.certificate.arts-photography .cert-name{
  color:#ecf0f1;
  font-size:48px;
  font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}
.certificate.arts-photography .cert-event{
  color:#3498db;
  font-weight:600;
}
.certificate.arts-photography .cert-meta{
  color:#bdc3c7;
  font-weight:600;
}

/* ACADEMIC TEMPLATES */
.certificate.academic-formal{
  background:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  border:8px double #1e40af;
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.certificate.academic-formal::after{
  content:'📚 🎓 📖 🏫 ✏️';
  position:absolute;
  top:20px;
  right:20px;
  font-size:20px;
  opacity:0.08;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.academic-formal .cert-title{
  color:#1e40af;
  font-size:26px;
  font-family:"Playfair Display",serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}
.certificate.academic-formal .cert-name{
  color:#0c2340;
  font-size:48px;
  font-family:"Playfair Display",serif;
  font-weight:700;
}
.certificate.academic-formal .cert-event{
  color:#333333;
  font-weight:600;
}
.certificate.academic-formal .cert-meta{
  color:#1e40af;
  font-weight:600;
}

.certificate.academic-modern{
  background:linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-left:12px solid #0284c7;
  border-radius:8px;
  position:relative;
  overflow:hidden;
}
.certificate.academic-modern::after{
  content:'';
  position:absolute;
  top:-50px;
  right:-50px;
  width:250px;
  height:250px;
  background:radial-gradient(circle, rgba(2,132,199,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.academic-modern .cert-inner::after{
  content:'🎓 📚 💡 🏆 📝';
  position:absolute;
  bottom:20px;
  right:25px;
  font-size:18px;
  opacity:0.12;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.academic-modern .cert-title{
  color:#0284c7;
  font-size:24px;
  font-weight:700;
}
.certificate.academic-modern .cert-name{
  color:#0c4a6e;
  font-size:46px;
  font-family:Roboto,sans-serif;
  font-weight:700;
}
.certificate.academic-modern .cert-event{
  color:#0369a1;
  font-weight:600;
}
.certificate.academic-modern .cert-meta{
  color:#0284c7;
}

.certificate.academic-distinction{
  background:linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
  border:6px solid #92400e;
  border-radius:8px;
  position:relative;
  overflow:hidden;
}
.certificate.academic-distinction::after{
  content:'🌟 🏅 👑 ⭐ 🎖️';
  position:absolute;
  top:20px;
  left:20px;
  font-size:20px;
  opacity:0.15;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.academic-distinction .cert-title{
  color:#92400e;
  font-size:26px;
  font-family:"Playfair Display",serif;
  font-weight:700;
}
.certificate.academic-distinction .cert-name{
  color:#78350f;
  font-size:48px;
  font-family:"Playfair Display",serif;
}
.certificate.academic-distinction .cert-event{
  color:#b45309;
  font-weight:600;
}
.certificate.academic-distinction .cert-meta{
  color:#92400e;
  font-weight:600;
}

/* EXCELLENCE & SPECIALTY TEMPLATES */
.certificate.excellence-premium{
  background:linear-gradient(135deg, #2d1b69 0%, #1a0f3a 100%);
  border:8px solid #c084fc;
  border-radius:8px;
  position:relative;
  overflow:hidden;
}
.certificate.excellence-premium::before{
  content:'';
  position:absolute;
  top:-50px;
  right:-50px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(192,132,252,0.2) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.excellence-premium::after{
  content:'⭐ 🌟 ✨ 👑 🏆';
  position:absolute;
  top:15px;
  right:20px;
  font-size:20px;
  opacity:0.15;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.excellence-premium .cert-title{
  color:#c084fc;
  font-size:26px;
  text-transform:uppercase;
  letter-spacing:2px;
}
.certificate.excellence-premium .cert-name{
  color:#e9d5ff;
  font-size:50px;
  font-family:"Playfair Display",serif;
}
.certificate.excellence-premium .cert-event{
  color:#d8b4fe;
}
.certificate.excellence-premium .cert-meta{
  color:#c084fc;
  font-weight:600;
}

.certificate.achievement-bold{
  background:linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border:none;
  border-top:12px solid #fbbf24;
  border-bottom:12px solid #fbbf24;
  position:relative;
  overflow:hidden;
}
.certificate.achievement-bold::before{
  content:'🏅 🥇 🎖️ 👑 ⭐';
  position:absolute;
  top:10px;
  left:25px;
  font-size:18px;
  opacity:0.15;
  letter-spacing:4px;
  pointer-events:none;
}
.certificate.achievement-bold::after{
  content:'🏅 🥇 🎖️ 👑 ⭐';
  position:absolute;
  top:10px;
  right:25px;
  font-size:18px;
  opacity:0.15;
  letter-spacing:4px;
  pointer-events:none;
}
.certificate.achievement-bold .cert-title{
  color:#fbbf24;
  font-size:28px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
}
.certificate.achievement-bold .cert-name{
  color:#ffffff;
  font-size:52px;
  font-weight:700;
}
.certificate.achievement-bold .cert-event{
  color:#fef3c7;
  font-weight:600;
}
.certificate.achievement-bold .cert-meta{
  color:#fbbf24;
  font-weight:700;
}

.certificate.leadership-elite{
  background:linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-left:20px solid #34d399;
  border-right:20px solid #34d399;
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.certificate.leadership-elite::before{
  content:'';
  position:absolute;
  top:-50px;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(52,211,153,0.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.leadership-elite::after{
  content:'👑 🏆 ⭐ 💼 🎯';
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
  opacity:0.12;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.leadership-elite .cert-title{
  color:#34d399;
  font-size:28px;
  font-weight:700;
  text-transform:uppercase;
}
.certificate.leadership-elite .cert-name{
  color:#ffffff;
  font-size:50px;
  font-family:"Playfair Display",serif;
}
.certificate.leadership-elite .cert-event{
  color:#a7f3d0;
  font-weight:600;
}
.certificate.leadership-elite .cert-meta{
  color:#6ee7b7;
  font-weight:600;
}

/* ===== MODERN DESIGN TEMPLATES ===== */

/* MINIMALIST BLUE */
.certificate.minimalist-blue{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  border:none;
  border-top:4px solid #2563eb;
  border-bottom:4px solid #2563eb;
  position:relative;
  overflow:hidden;
}
.certificate.minimalist-blue::before{
  content:'';
  position:absolute;
  bottom:-100px;
  right:-100px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.minimalist-blue::after{
  content:'✓ ◯ ▪ ◯ ✓';
  position:absolute;
  bottom:30px;
  left:40px;
  font-size:14px;
  opacity:0.1;
  letter-spacing:12px;
  pointer-events:none;
}
.certificate.minimalist-blue .cert-title{
  color:#2563eb;
  font-size:22px;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:3px;
}
.certificate.minimalist-blue .cert-name{
  color:#1e293b;
  font-size:44px;
  font-weight:300;
  font-family:Roboto,sans-serif;
  letter-spacing:1px;
}
.certificate.minimalist-blue .cert-event{
  color:#64748b;
  font-size:15px;
  font-weight:400;
}
.certificate.minimalist-blue .cert-meta{
  color:#94a3b8;
  font-size:13px;
}

/* GRADIENT SUNSET */
.certificate.gradient-sunset{
  background:linear-gradient(135deg, #ff7e5f 0%, #feb47b 25%, #fecb6e 50%, #ff6b6b 75%, #ee5a6f 100%);
  border:none;
  position:relative;
  overflow:hidden;
}
.certificate.gradient-sunset::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  animation:shimmer 3s infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(360deg)}
}
.certificate.gradient-sunset::after{
  content:'🌅 ✨ 🌅';
  position:absolute;
  top:20px;
  right:30px;
  font-size:28px;
  opacity:0.2;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.gradient-sunset .cert-title{
  color:#ffffff;
  font-size:28px;
  font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,0.2);
}
.certificate.gradient-sunset .cert-name{
  color:#ffffff;
  font-size:50px;
  font-weight:700;
  text-shadow:3px 3px 6px rgba(0,0,0,0.3);
  font-family:"Playfair Display",serif;
}
.certificate.gradient-sunset .cert-event{
  color:#fffacd;
  font-weight:600;
}
.certificate.gradient-sunset .cert-meta{
  color:#ffffff;
  font-weight:600;
}

/* ELEGANT VINTAGE */
.certificate.elegant-vintage{
  background:linear-gradient(180deg, #fef5e7 0%, #f4ecdc 100%);
  border:1px solid #dcc5a0;
  border-radius:0;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 0 12px #fef5e7, inset 0 0 0 14px #c9a961;
}
.certificate.elegant-vintage::before{
  content:'◆ ◆ ◆ ◆ ◆';
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  opacity:0.25;
  letter-spacing:16px;
  color:#8b7355;
  pointer-events:none;
}
.certificate.elegant-vintage::after{
  content:'◆ ◆ ◆ ◆ ◆';
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  opacity:0.25;
  letter-spacing:16px;
  color:#8b7355;
  pointer-events:none;
}
.certificate.elegant-vintage .cert-title{
  color:#8b7355;
  font-size:24px;
  font-weight:400;
  font-style:italic;
  font-family:"Playfair Display",serif;
}
.certificate.elegant-vintage .cert-name{
  color:#3e2723;
  font-size:46px;
  font-weight:700;
  font-family:"Playfair Display",serif;
  letter-spacing:2px;
}
.certificate.elegant-vintage .cert-event{
  color:#6d4c41;
  font-size:15px;
}
.certificate.elegant-vintage .cert-meta{
  color:#8b7355;
}

/* GEOMETRIC MODERN */
.certificate.geometric-modern{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border:none;
  position:relative;
  overflow:hidden;
}
.certificate.geometric-modern::before{
  content:'';
  position:absolute;
  top:-100px;
  right:-100px;
  width:400px;
  height:400px;
  background:repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255,255,255,0.05) 30px, rgba(255,255,255,0.05) 60px);
  border-radius:0;
  pointer-events:none;
}
.certificate.geometric-modern::after{
  content:'⬢ ⬢ ⬢';
  position:absolute;
  bottom:25px;
  left:40px;
  font-size:18px;
  opacity:0.15;
  letter-spacing:10px;
  pointer-events:none;
}
.certificate.geometric-modern .cert-title{
  color:#ffffff;
  font-size:26px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
}
.certificate.geometric-modern .cert-name{
  color:#ffffff;
  font-size:48px;
  font-weight:700;
  font-family:Roboto,sans-serif;
}
.certificate.geometric-modern .cert-event{
  color:#e0d5ff;
}
.certificate.geometric-modern .cert-meta{
  color:#f0e6ff;
  font-weight:600;
}

/* RAINBOW VIBRANT */
.certificate.rainbow-vibrant{
  background:linear-gradient(90deg, #ff0080 0%, #ff8c00 25%, #40e0d0 50%, #1e90ff 75%, #ff0080 100%);
  border:none;
  position:relative;
  overflow:hidden;
}
.certificate.rainbow-vibrant::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background:repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 22px);
  pointer-events:none;
}
.certificate.rainbow-vibrant::after{
  content:'🌈 ✨ 🎉 ✨ 🌈';
  position:absolute;
  top:20px;
  right:25px;
  font-size:20px;
  opacity:0.3;
  letter-spacing:6px;
  pointer-events:none;
}
.certificate.rainbow-vibrant .cert-title{
  color:#ffffff;
  font-size:26px;
  font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,0.3);
  text-transform:uppercase;
}
.certificate.rainbow-vibrant .cert-name{
  color:#ffffff;
  font-size:48px;
  font-weight:700;
  text-shadow:3px 3px 6px rgba(0,0,0,0.4);
}
.certificate.rainbow-vibrant .cert-event{
  color:#fffacd;
  font-weight:600;
}
.certificate.rainbow-vibrant .cert-meta{
  color:#ffffff;
  font-weight:600;
}

/* DARK PROFESSIONAL */
.certificate.dark-professional{
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border:3px solid #e94560;
  border-radius:8px;
  position:relative;
  overflow:hidden;
}
.certificate.dark-professional::before{
  content:'';
  position:absolute;
  top:-50px;
  left:-50px;
  width:250px;
  height:250px;
  background:radial-gradient(circle, rgba(233,69,96,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.dark-professional::after{
  content:'★ ★ ★';
  position:absolute;
  bottom:30px;
  right:40px;
  font-size:16px;
  opacity:0.15;
  letter-spacing:10px;
  color:#e94560;
  pointer-events:none;
}
.certificate.dark-professional .cert-title{
  color:#e94560;
  font-size:26px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
}
.certificate.dark-professional .cert-name{
  color:#ffffff;
  font-size:48px;
  font-weight:700;
  font-family:"Playfair Display",serif;
}
.certificate.dark-professional .cert-event{
  color:#b0b0b0;
}
.certificate.dark-professional .cert-meta{
  color:#e94560;
  font-weight:600;
}

/* PASTEL SOFT */
.certificate.pastel-soft{
  background:linear-gradient(135deg, #fce7f3 0%, #e0bbf7 50%, #bfdbfe 100%);
  border:none;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(236,72,153,0.15);
}
.certificate.pastel-soft::before{
  content:'';
  position:absolute;
  top:-100px;
  right:-100px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(244,114,182,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.pastel-soft::after{
  content:'💜 💙 💜 💙 💜';
  position:absolute;
  top:25px;
  left:30px;
  font-size:16px;
  opacity:0.15;
  letter-spacing:8px;
  pointer-events:none;
}
.certificate.pastel-soft .cert-title{
  color:#be185d;
  font-size:24px;
  font-weight:600;
}
.certificate.pastel-soft .cert-name{
  color:#7c2d12;
  font-size:46px;
  font-weight:700;
  font-family:"Playfair Display",serif;
}
.certificate.pastel-soft .cert-event{
  color:#831843;
  font-weight:500;
}
.certificate.pastel-soft .cert-meta{
  color:#9333ea;
  font-weight:600;
}

/* BOLD STATEMENT */
.certificate.bold-statement{
  background:linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
  border:none;
  border-top:8px solid #fffd38;
  border-bottom:8px solid #fffd38;
  position:relative;
  overflow:hidden;
}
.certificate.bold-statement::before{
  content:'';
  position:absolute;
  top:-100px;
  right:-100px;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,253,56,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.certificate.bold-statement::after{
  content:'⬢ ⬢ ⬢ ⬢ ⬢';
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:16px;
  opacity:0.1;
  letter-spacing:8px;
  color:#fffd38;
  pointer-events:none;
}
.certificate.bold-statement .cert-title{
  color:#fffd38;
  font-size:28px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:3px;
}
.certificate.bold-statement .cert-name{
  color:#ffffff;
  font-size:52px;
  font-weight:900;
  font-family:Roboto,sans-serif;
  letter-spacing:0.5px;
}
.certificate.bold-statement .cert-event{
  color:#cccccc;
  font-weight:600;
}
.certificate.bold-statement .cert-meta{
  color:#fffd38;
  font-weight:700;
}

/* AURORA GLASS */
.certificate.aurora-glass{
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72)),
    linear-gradient(120deg, #67e8f9 0%, #a78bfa 45%, #34d399 100%);
  border:2px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(2px);
  overflow:hidden;
}
.certificate.aurora-glass::before{
  content:'';
  position:absolute;
  top:-90px;
  right:-90px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,0.3) 0%, transparent 70%);
  pointer-events:none;
}
.certificate.aurora-glass::after{
  content:'';
  position:absolute;
  bottom:-120px;
  left:-80px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,0.22) 0%, transparent 68%);
  pointer-events:none;
}
.certificate.aurora-glass .cert-title{color:#0f766e;font-size:25px;letter-spacing:0.7px}
.certificate.aurora-glass .cert-name{color:#1d4ed8;font-family:"Playfair Display",serif}
.certificate.aurora-glass .cert-event,.certificate.aurora-glass .cert-meta{color:#334155}

/* EMERALD ROYAL */
.certificate.emerald-royal{
  background:linear-gradient(135deg, #042f2e 0%, #065f46 50%, #022c22 100%);
  border:4px solid #d4af37;
  box-shadow:0 14px 40px rgba(2,44,34,0.45);
  overflow:hidden;
}
.certificate.emerald-royal::before{
  content:'';
  position:absolute;
  inset:14px;
  border:1.6px solid rgba(212,175,55,0.6);
  pointer-events:none;
}
.certificate.emerald-royal::after{
  content:'';
  position:absolute;
  top:18px;
  left:18px;
  right:18px;
  height:6px;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.95) 50%, transparent 100%);
  pointer-events:none;
}
.certificate.emerald-royal .cert-title{color:#fef3c7;text-transform:uppercase;letter-spacing:1.8px}
.certificate.emerald-royal .cert-name{color:#fde68a;font-size:50px}
.certificate.emerald-royal .cert-subtitle,.certificate.emerald-royal .cert-event{color:#d1fae5}
.certificate.emerald-royal .cert-meta{color:#fef9c3}

/* MONO GRID */
.certificate.mono-grid{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,247,247,0.97)),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.06) 0, rgba(15,23,42,0.06) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(15,23,42,0.06) 0, rgba(15,23,42,0.06) 1px, transparent 1px, transparent 34px);
  border:3px solid #0f172a;
  border-radius:4px;
  box-shadow:0 12px 28px rgba(15,23,42,0.2);
}
.certificate.mono-grid::before{
  content:'';
  position:absolute;
  inset:18px;
  border:1px dashed rgba(15,23,42,0.35);
  pointer-events:none;
}
.certificate.mono-grid::after{
  content:'';
  position:absolute;
  left:26px;
  right:26px;
  top:78px;
  height:2px;
  background:#0f172a;
  opacity:0.12;
}
.certificate.mono-grid .cert-title{color:#111827;font-size:24px;text-transform:uppercase;letter-spacing:1.4px}
.certificate.mono-grid .cert-name{color:#000000;font-family:Roboto,sans-serif;font-weight:800}
.certificate.mono-grid .cert-event,.certificate.mono-grid .cert-meta,.certificate.mono-grid .cert-subtitle{color:#1f2937}

/* NEBULA NIGHT */
.certificate.nebula-night{
  background:
    radial-gradient(circle at 18% 20%, rgba(59,130,246,0.42) 0%, transparent 32%),
    radial-gradient(circle at 82% 22%, rgba(168,85,247,0.38) 0%, transparent 34%),
    radial-gradient(circle at 52% 78%, rgba(236,72,153,0.28) 0%, transparent 36%),
    linear-gradient(160deg, #020617 0%, #0b1120 45%, #111827 100%);
  border:1.5px solid rgba(148,163,184,0.35);
  overflow:hidden;
}
.certificate.nebula-night::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.75), transparent), radial-gradient(1.5px 1.5px at 80px 70px, rgba(255,255,255,0.6), transparent), radial-gradient(1.8px 1.8px at 140px 120px, rgba(255,255,255,0.55), transparent), radial-gradient(1.6px 1.6px at 240px 50px, rgba(255,255,255,0.5), transparent), radial-gradient(1.9px 1.9px at 320px 110px, rgba(255,255,255,0.45), transparent);
  background-size:360px 220px;
  opacity:0.42;
  pointer-events:none;
}
.certificate.nebula-night::after{
  content:'';
  position:absolute;
  inset:14px;
  border:1px solid rgba(148,163,184,0.3);
  pointer-events:none;
}
.certificate.nebula-night .cert-title{color:#93c5fd}
.certificate.nebula-night .cert-name{color:#ffffff;text-shadow:0 2px 10px rgba(56,189,248,0.4)}
.certificate.nebula-night .cert-subtitle,.certificate.nebula-night .cert-event{color:#cbd5e1}
.certificate.nebula-night .cert-meta{color:#e2e8f0}

/* IVORY LUXE */
.certificate.ivory-luxe{
  background:linear-gradient(180deg, #fffef9 0%, #f8f4e8 100%);
  border:3px solid #c6a96b;
  box-shadow:0 14px 34px rgba(120,98,62,0.2);
  position:relative;
}
.certificate.ivory-luxe::before{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(123,96,43,0.35);
  pointer-events:none;
}
.certificate.ivory-luxe::after{
  content:'';
  position:absolute;
  inset:26px;
  border:1px solid rgba(198,169,107,0.45);
  pointer-events:none;
}
.certificate.ivory-luxe .cert-title{color:#8a6a2f;font-size:26px}
.certificate.ivory-luxe .cert-name{color:#5b3d12;font-size:50px}
.certificate.ivory-luxe .cert-subtitle,.certificate.ivory-luxe .cert-event{color:#6b4f1d}
.certificate.ivory-luxe .cert-meta{color:#7a5a22;font-weight:600}

/* CORAL WAVE */
.certificate.coral-wave{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.9), rgba(255,255,255,0.78)),
    linear-gradient(135deg, #fb7185 0%, #f97316 45%, #fdba74 100%);
  border:none;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(234,88,12,0.25);
}
.certificate.coral-wave::before{
  content:'';
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-70px;
  height:170px;
  background:radial-gradient(130% 100% at 50% 0%, rgba(251,113,133,0.35) 0%, rgba(244,114,182,0.08) 55%, transparent 72%);
  pointer-events:none;
}
.certificate.coral-wave::after{
  content:'';
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, #fb7185, #fb923c, #fdba74);
  opacity:0.75;
  pointer-events:none;
}
.certificate.coral-wave .cert-title{color:#be123c;font-size:25px}
.certificate.coral-wave .cert-name{color:#7c2d12}
.certificate.coral-wave .cert-subtitle,.certificate.coral-wave .cert-event{color:#9a3412}
.certificate.coral-wave .cert-meta{color:#b45309;font-weight:600}

/* Save Toolbar */
.save-toolbar{
  background:rgba(0,0,0,0.18);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:8px 32px;
}
.save-toolbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1600px;
  margin:0 auto;
  gap:12px;
  flex-wrap:wrap;
}
.save-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  transition:color 0.3s;
  color:rgba(255,255,255,0.45);
}
.save-status .material-icons{font-size:16px;transition:all 0.3s}
.save-status--saved{color:#34d399}
.save-status--saving{color:#fbbf24}
.save-status--saving .material-icons{animation:toolbar-spin 0.9s linear infinite}
.save-status--error{color:#f87171}
.save-status--empty{color:rgba(255,255,255,0.35)}
@keyframes toolbar-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.save-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-save-action{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.12);
  padding:5px 11px;
  font-size:12px;
  border-radius:6px;
  gap:5px;
  transition:all 0.2s;
}
.btn-save-action .material-icons{font-size:14px}
.btn-save-action:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.25);
  color:#fff;
}
.btn-save-clear{
  background:rgba(239,68,68,0.1);
  border-color:rgba(239,68,68,0.2);
  color:rgba(239,68,68,0.8);
}
.btn-save-clear:hover{
  background:rgba(239,68,68,0.2);
  border-color:rgba(239,68,68,0.4);
  color:#f87171;
}

/* Responsive */
@media (max-width:860px){
  .app-main{flex-direction:column;align-items:stretch;padding:16px 20px}
  .left-sidebar{width:100%}
  .preview-panel{max-width:100%}
  .certificate{height:520px;padding:32px}
  .certificate.landscape{height:520px;max-width:1000px}
  .certificate.portrait{height:740px;max-width:560px;margin:0 auto}
  .cert-inner{padding:32px}
}

@media (max-width:768px){
  .app-main{gap:16px;padding:12px}
  .certificate{height:400px;padding:24px;margin:0}
  .certificate.landscape{height:260px;max-width:100%}
  .certificate.portrait{height:420px;max-width:320px;margin:0 auto}
  .editor-grid{grid-template-columns:1fr}
  .cert-inner{padding:24px;gap:12px}
  .cert-name{font-size:32px}
  .cert-title{font-size:20px}
  .cert-logo{width:80px}
  .cert-sig{width:80px}
  .cert-meta{gap:12px;flex-wrap:wrap}
  .header-left{gap:12px}
  .app-header h1{font-size:24px}
}