:root{
  --bg: #0b0b12;
  --card: #141424;
  --text: #e7e7ea;
  --muted: #b9bbd1;
  --primary: #7c3aed;
  --primary-2: #22d3ee;
  --success: #10b981;
  --danger: #ef4444;
  --accent-1: #ff6b6b;
  --accent-2: #feca57;
  --accent-3: #71a7ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(800px 400px at 90% 20%, rgba(34,211,238,.2), transparent 60%),
    radial-gradient(700px 500px at 30% 90%, rgba(255,107,107,.2), transparent 55%),
    linear-gradient(180deg, #0b0b12 0%, #0e0e1a 40%, #0b0b12 100%);
}
.site-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(150%) blur(6px);
  background:linear-gradient(180deg, rgba(20,20,36,.8), rgba(20,20,36,.3));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:12px;padding:16px 24px}
.brand-mark{width:40px;height:40px;filter:drop-shadow(0 6px 16px rgba(113,167,255,.35))}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:700;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted)}
.container{max-width:1100px;margin:24px auto;padding:0 24px}
.title{margin:0 0 12px;font-weight:700}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.card+.card{margin-top:22px}
.accent{border-color:rgba(255,255,255,.12)}
.dropzone{
  border:2px dashed rgba(255,255,255,.18);
  border-radius:16px; padding:18px; text-align:center;
  transition:.25s border-color, .25s transform, .25s background;
  background:rgba(20,20,36,.35);
}
.dropzone:focus{outline:none;border-color:var(--primary)}
.dropzone.dragover{border-color:var(--primary-2);background:rgba(34,211,238,.08);transform:scale(1.01)}
.dropzone-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.drop-icons{display:flex;gap:10px;color:var(--accent-3)}
.drop-text{color:var(--muted)}
.btn{
  appearance:none;border:none;border-radius:12px;padding:12px 18px;cursor:pointer;font-weight:600;transition:.25s transform,.25s box-shadow,.25s opacity;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.primary{background:linear-gradient(90deg, var(--primary), var(--primary-2));color:white;box-shadow:0 8px 18px rgba(124,58,237,.35)}
.success{background:linear-gradient(90deg, #14b8a6, #10b981);color:white;box-shadow:0 8px 18px rgba(20,184,166,.35)}
.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:16px}
.thumb{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.thumb img{width:100%;height:120px;object-fit:cover;display:block}
.thumb .remove{position:absolute;top:8px;right:8px;border:none;border-radius:10px;padding:6px 8px;background:rgba(239,68,68,.9);color:white;cursor:pointer}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:8px}
.contact-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;text-decoration:none;color:var(--text);border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.contact-card:hover{transform:translateY(-1px)}
.contact-card .icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.contact-title{font-weight:600}
.contact-sub{font-size:12px;color:var(--muted)}
.instagram{box-shadow:0 10px 20px rgba(254,202,87,.18)}
.whatsapp{box-shadow:0 10px 20px rgba(16,185,129,.18)}
.discord{box-shadow:0 10px 20px rgba(114,137,218,.22)}
.telegram{box-shadow:0 10px 20px rgba(34,199,240,.18)}
.modal{position:fixed;inset:0;display:none}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.modal-content{position:relative;margin:10vh auto;max-width:520px;background:var(--card);border:1px solid rgba(255,255,255,.1);padding:22px;border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.45)}
.modal-title{margin:0 0 6px}
.modal-sub{margin:0 0 12px;color:var(--muted)}
.input{width:100%;min-height:120px;resize:vertical;border-radius:12px;padding:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--text)}
.site-footer{margin:30px 0 20px;color:var(--muted);text-align:center}
.footer-inner{opacity:.85}
@media (max-width:600px){
  .brand-title{font-size:16px}
}