#metallica-font-generator{
    font-family:system-ui,Arial,sans-serif;
    max-width:1200px;
    margin:30px auto;
    padding:22px;
    border-radius:28px;
    color:#e5e7eb;

    /* DARK STAGE BACKGROUND */
    background:
        radial-gradient(circle at 20% 10%, rgba(255,0,0,0.25), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(0,229,255,0.25), transparent 40%),
        radial-gradient(circle at bottom, rgba(251,191,36,0.15), transparent 50%),
        linear-gradient(135deg,#050505,#0a0a0a,#111827);

    position:relative;
    overflow:hidden;
}

/* STAGE LIGHT BORDER */
#metallica-font-generator::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:28px;
    background:linear-gradient(
        120deg,
        #ff0000,
        #00e5ff,
        #fbbf24,
        #ff2e2e,
        #00e5ff
    );
    background-size:400% 400%;
    animation:stageGlow 6s linear infinite;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;

    pointer-events:none;
}

@keyframes stageGlow{
    0%{background-position:0% 50%}
    100%{background-position:300% 50%}
}

/* HEADER */
.metal-header{
    text-align:center;
    margin-bottom:22px;
}

.metal-header h2{
    font-size:2.8rem;
    margin:0;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;

    background:linear-gradient(90deg,#ffffff,#ff2e2e,#00e5ff,#fbbf24);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 20px rgba(255,46,46,0.2);
}

.metal-header p{
    opacity:.85;
    margin-top:8px;
    font-size:15px;
}

/* GLASS CARD */
.metal-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(18px);
    border-radius:22px;
    padding:20px;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

/* INPUT */
#metal-input{
    width:100%;
    min-height:140px;
    border:none;
    outline:none;
    resize:vertical;
    border-radius:16px;
    padding:16px;
    font-size:16px;
    color:#fff;
    background:#0a0a0a;
    border:1px solid rgba(255,255,255,0.1);
    transition:.3s;
}

#metal-input:focus{
    border-color:#ff2e2e;
    box-shadow:0 0 25px rgba(255,46,46,0.25);
}

/* BUTTONS */
.metal-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:15px;
}

.metal-btn{
    border:none;
    padding:13px 18px;
    border-radius:14px;
    cursor:pointer;
    font-weight:800;
    color:white;
    transition:.25s;
    letter-spacing:1px;
}

.metal-btn:hover{
    transform:translateY(-3px) scale(1.02);
}

.btn-gen{
    background:linear-gradient(135deg,#ff0000,#7f1d1d);
}

.btn-copy{
    background:linear-gradient(135deg,#00e5ff,#1d4ed8);
}

.btn-random{
    background:linear-gradient(135deg,#fbbf24,#f97316);
}

.btn-clear{
    background:linear-gradient(135deg,#6b7280,#111827);
}

/* STATS */
.metal-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:14px;
    margin-top:18px;
}

.metal-stat{
    text-align:center;
    padding:14px;
    border-radius:16px;

    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);

    backdrop-filter:blur(10px);
}

.metal-stat strong{
    display:block;
    font-size:22px;
    color:#ff2e2e;
}

/* RESULTS GRID */
.metal-results{
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

/* RESULT CARD */
.metal-box{
    background:linear-gradient(145deg,#0b0b0b,#141414);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:18px;
    padding:16px;
    position:relative;
    transition:.3s;
}

.metal-box:hover{
    transform:translateY(-5px);
    border-color:#00e5ff;
    box-shadow:0 10px 30px rgba(0,229,255,0.15);
}

.metal-title{
    font-size:11px;
    letter-spacing:2px;
    opacity:.7;
    margin-bottom:10px;
    text-transform:uppercase;
}

.metal-output{
    font-size:23px;
    word-break:break-word;
    line-height:1.6;
}

/* COPY BUTTON */
.metal-copy{
    position:absolute;
    top:12px;
    right:12px;
    border:none;
    padding:6px 11px;
    border-radius:10px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    color:white;
    background:linear-gradient(135deg,#ff2e2e,#00e5ff);
    box-shadow:0 0 12px rgba(255,46,46,0.2);
}

/* STATUS */
.metal-status{
    text-align:center;
    margin-top:12px;
    color:#22c55e;
    font-weight:700;
    letter-spacing:1px;
}

/* MOBILE */
@media(max-width:768px){
    .metal-header h2{font-size:2rem;}
    .metal-buttons{flex-direction:column;}
    .metal-btn{width:100%;}
}