#cool-font-generator{
    --bg1:#0b1020;
    --bg2:#111827;
    --accent1:#22d3ee;
    --accent2:#a78bfa;
    --accent3:#fb7185;
    --text:#e5e7eb;

    font-family:system-ui,Segoe UI,Arial;
    max-width:1200px;
    margin:25px auto;
    padding:20px;
    color:var(--text);
    border-radius:25px;
    background:linear-gradient(135deg,var(--bg1),var(--bg2));
    position:relative;
    overflow:hidden;
}

/* glowing border */
#cool-font-generator::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:25px;
    background:linear-gradient(270deg,var(--accent1),var(--accent2),var(--accent3),var(--accent1));
    background-size:300% 300%;
    animation:glow 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 glow{
    0%{background-position:0% 50%}
    100%{background-position:300% 50%}
}

.cool-header{
    text-align:center;
    margin-bottom:20px;
}

.cool-header h2{
    font-size:2.4rem;
    margin:0;
    background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cool-header p{
    opacity:.8;
}

.cool-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(12px);
    border-radius:20px;
    padding:18px;
}

#cool-input{
    width:100%;
    min-height:130px;
    border:none;
    outline:none;
    resize:vertical;
    border-radius:15px;
    padding:15px;
    font-size:16px;
    color:white;
    background:#0b1224;
    border:1px solid rgba(255,255,255,0.1);
}

#cool-input:focus{
    border-color:var(--accent1);
}

.cool-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
}

.cool-btn{
    border:none;
    padding:12px 16px;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    color:white;
    transition:.3s;
}

.cool-btn:hover{transform:translateY(-2px);}

.btn-generate{background:linear-gradient(135deg,#22c55e,#06b6d4);}
.btn-copy{background:linear-gradient(135deg,#6366f1,#a78bfa);}
.btn-clear{background:linear-gradient(135deg,#ef4444,#fb7185);}
.btn-random{background:linear-gradient(135deg,#f59e0b,#f97316);}

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:12px;
    margin-top:15px;
}

.stat{
    background:rgba(255,255,255,0.04);
    padding:12px;
    border-radius:14px;
    text-align:center;
}

.stat strong{
    display:block;
    font-size:20px;
    color:var(--accent2);
}

.results{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
}

.box{
    background:linear-gradient(145deg,#0f172a,#111827);
    border:1px solid rgba(255,255,255,0.06);
    padding:15px;
    border-radius:18px;
    position:relative;
}

.title{
    font-size:12px;
    opacity:.7;
    margin-bottom:8px;
}

.output{
    font-size:22px;
    word-break:break-word;
}

.copy{
    position:absolute;
    top:12px;
    right:12px;
    background:linear-gradient(135deg,var(--accent2),var(--accent3));
    border:none;
    padding:6px 10px;
    border-radius:10px;
    cursor:pointer;
    font-size:12px;
    color:white;
}

.status{
    text-align:center;
    margin-top:10px;
    color:#22c55e;
    font-weight:600;
}

@media(max-width:768px){
    .cool-header h2{font-size:1.8rem;}
    .cool-buttons{flex-direction:column;}
    .cool-btn{width:100%;}
}