#gothic-font-generator-tool{
    font-family:'Segoe UI',sans-serif;
    max-width:1200px;
    margin:30px auto;
    padding:25px;
    color:#fff;
    border-radius:30px;
    background:
    radial-gradient(circle at top left,#7f1d1d 0%,transparent 35%),
    radial-gradient(circle at top right,#4c0519 0%,transparent 35%),
    linear-gradient(135deg,#050505,#0f0f0f,#111827);
    position:relative;
    overflow:hidden;
}

#gothic-font-generator-tool::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:30px;
    background:linear-gradient(
    130deg,
    #dc2626,
    #ef4444,
    #f59e0b,
    #dc2626);
    background-size:300% 300%;
    animation:borderGlow 6s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
}

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

#gothic-font-generator-tool *{
    box-sizing:border-box;
}

#gothic-font-generator-tool .header{
    text-align:center;
    margin-bottom:30px;
    position:relative;
    z-index:2;
}

#gothic-font-generator-tool .header h2{
    margin:0;
    font-size:3rem;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    background:linear-gradient(90deg,#ffffff,#ef4444,#f59e0b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

#gothic-font-generator-tool .header p{
    color:#cbd5e1;
    font-size:16px;
    max-width:700px;
    margin:12px auto;
}

#gothic-font-generator-tool .main-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:25px;
    padding:25px;
}

#gothic-font-generator-tool textarea{
    width:100%;
    min-height:170px;
    border:none;
    outline:none;
    resize:vertical;
    border-radius:20px;
    padding:20px;
    font-size:18px;
    color:#fff;
    background:#080808;
    border:1px solid rgba(239,68,68,.25);
    box-shadow:0 0 30px rgba(239,68,68,.08);
}

#gothic-font-generator-tool textarea:focus{
    border-color:#ef4444;
    box-shadow:0 0 40px rgba(239,68,68,.25);
}

#gothic-font-generator-tool .toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}

#gothic-font-generator-tool button{
    border:none;
    cursor:pointer;
    color:#fff;
    font-weight:700;
    padding:14px 22px;
    border-radius:14px;
    transition:.35s;
}

#gothic-font-generator-tool button:hover{
    transform:translateY(-3px);
}

.btn-generate{
    background:linear-gradient(135deg,#dc2626,#991b1b);
}

.btn-copy{
    background:linear-gradient(135deg,#7c3aed,#4f46e5);
}

.btn-random{
    background:linear-gradient(135deg,#0891b2,#0ea5e9);
}

.btn-clear{
    background:linear-gradient(135deg,#f59e0b,#ea580c);
}

#gothic-font-generator-tool .stats{
    margin-top:25px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
}

#gothic-font-generator-tool .stat{
    text-align:center;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}

#gothic-font-generator-tool .stat strong{
    display:block;
    font-size:2rem;
    color:#ef4444;
}

#gothic-font-generator-tool .results{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:18px;
    margin-top:30px;
}

#gothic-font-generator-tool .font-box{
    background:linear-gradient(145deg,#111111,#1c1917);
    border-radius:22px;
    padding:22px;
    border:1px solid rgba(239,68,68,.15);
    position:relative;
    transition:.35s;
}

#gothic-font-generator-tool .font-box:hover{
    transform:translateY(-5px);
    border-color:#ef4444;
    box-shadow:0 15px 40px rgba(239,68,68,.18);
}

#gothic-font-generator-tool .font-title{
    color:#ef4444;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

#gothic-font-generator-tool .font-output{
    font-size:28px;
    line-height:1.7;
    color:#ffffff;
    word-break:break-word;
}

#gothic-font-generator-tool .copy-style{
    position:absolute;
    right:15px;
    top:15px;
    background:linear-gradient(135deg,#dc2626,#7f1d1d);
    padding:10px 14px;
    border-radius:12px;
    font-size:12px;
}

#gothic-font-generator-tool .status{
    margin-top:15px;
    text-align:center;
    color:#22c55e;
    font-weight:700;
}

@media(max-width:768px){

    #gothic-font-generator-tool{
        padding:15px;
    }

    #gothic-font-generator-tool .header h2{
        font-size:2rem;
    }

    #gothic-font-generator-tool .toolbar{
        flex-direction:column;
    }

    #gothic-font-generator-tool button{
        width:100%;
    }

    #gothic-font-generator-tool .results{
        grid-template-columns:1fr;
    }

    #gothic-font-generator-tool .font-output{
        font-size:22px;
    }
}