/* ==========================================
   Alam Web Tools - Get Source Code Tool
   Author: Mansoor Alam
   Website: https://darksalmon-wasp-360439.hostingersite.com
========================================== */

:root{
    --awt-primary:#4f46e5;
    --awt-secondary:#7c3aed;
    --awt-success:#10b981;
    --awt-danger:#ef4444;
    --awt-warning:#f59e0b;
    --awt-bg:#f5f7fb;
    --awt-card:#ffffff;
    --awt-text:#1f2937;
    --awt-border:#e5e7eb;
    --awt-shadow:0 10px 30px rgba(0,0,0,.08);
}

.awt-source-tool-wrapper{
    width:100%;
    max-width:1400px;
    margin:30px auto;
    padding:15px;
    box-sizing:border-box;
}

.awt-source-tool-card{
    background:var(--awt-card);
    border-radius:20px;
    padding:25px;
    box-shadow:var(--awt-shadow);
    overflow:hidden;
}

.awt-source-tool-card h2{
    margin:0 0 25px;
    font-size:28px;
    font-weight:700;
    color:var(--awt-text);
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.awt-source-tool-card h2 i{
    color:var(--awt-primary);
}

/* =====================
   URL INPUT AREA
===================== */

.awt-input-group{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.awt-input-group input{
    flex:1;
    min-width:250px;
    height:55px;
    border:2px solid var(--awt-border);
    border-radius:12px;
    padding:0 18px;
    font-size:16px;
    outline:none;
    transition:.3s ease;
    background:#fff;
}

.awt-input-group input:focus{
    border-color:var(--awt-primary);
    box-shadow:0 0 0 4px rgba(79,70,229,.15);
}

.awt-btn{
    border:none;
    cursor:pointer;
    height:55px;
    padding:0 22px;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    transition:.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

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

.awt-primary{
    background:linear-gradient(
        135deg,
        var(--awt-primary),
        var(--awt-secondary)
    );
    color:#fff;
}

.awt-secondary{
    background:#fff;
    color:var(--awt-text);
    border:1px solid var(--awt-border);
}

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

.awt-danger{
    background:var(--awt-danger);
    color:#fff;
}

/* =====================
   LOADER
===================== */

#awt-loader{
    text-align:center;
    padding:30px 0;
}

.awt-spinner{
    width:60px;
    height:60px;
    margin:0 auto 15px;
    border:5px solid rgba(79,70,229,.15);
    border-top:5px solid var(--awt-primary);
    border-radius:50%;
    animation:awtSpin 1s linear infinite;
}

@keyframes awtSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* =====================
   PROGRESS BAR
===================== */

.awt-progress{
    width:100%;
    height:12px;
    background:#e5e7eb;
    border-radius:50px;
    overflow:hidden;
    margin-top:15px;
}

.awt-progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(
        90deg,
        var(--awt-primary),
        var(--awt-secondary)
    );
    transition:width .4s ease;
}

/* =====================
   ANALYSIS CARDS
===================== */

.awt-analysis-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-top:25px;
    margin-bottom:25px;
}

.awt-stat-card{
    background:#fff;
    border:1px solid var(--awt-border);
    border-radius:16px;
    padding:18px;
    transition:.3s ease;
    position:relative;
    overflow:hidden;
}

.awt-stat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.awt-stat-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:100%;
    background:linear-gradient(
        180deg,
        var(--awt-primary),
        var(--awt-secondary)
    );
}

.awt-stat-title{
    font-size:14px;
    color:#6b7280;
    margin-bottom:8px;
}

.awt-stat-value{
    font-size:24px;
    font-weight:700;
    color:var(--awt-text);
}

.awt-stat-icon{
    position:absolute;
    right:15px;
    top:15px;
    font-size:22px;
    color:rgba(79,70,229,.18);
}

/* =====================
   SEO ANALYSIS SECTION
===================== */

.awt-seo-section{
    background:#fff;
    border:1px solid var(--awt-border);
    border-radius:16px;
    padding:20px;
    margin-bottom:25px;
}

.awt-seo-section h3{
    margin-top:0;
    margin-bottom:18px;
    font-size:22px;
    color:var(--awt-text);
}

.awt-seo-table{
    width:100%;
    border-collapse:collapse;
}

.awt-seo-table td{
    padding:12px;
    border-bottom:1px solid var(--awt-border);
    vertical-align:top;
}

.awt-seo-table td:first-child{
    width:220px;
    font-weight:600;
}

/* =====================
   TOOL ACTIONS
===================== */

.awt-action-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.awt-action-buttons .awt-btn{
    min-width:140px;
}

/* =====================
   SEARCH BOX
===================== */

.awt-search-box{
    margin-bottom:15px;
}

.awt-search-box input{
    width:100%;
    height:50px;
    border:2px solid var(--awt-border);
    border-radius:10px;
    padding:0 15px;
    font-size:15px;
}

/* =====================
   CODE VIEWER
===================== */

.awt-code-viewer{
    background:#111827;
    color:#e5e7eb;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #1f2937;
}

.awt-code-header{
    background:#1f2937;
    padding:12px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.awt-code-header h3{
    margin:0;
    color:#fff;
    font-size:18px;
}

.awt-code-container{
    max-height:800px;
    overflow:auto;
    padding:20px;
}

.awt-code-container pre{
    margin:0;
    white-space:pre-wrap;
    word-break:break-word;
    font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;
    line-height:1.6;
    font-size:14px;
}

/* Line Numbers */

.awt-line-numbers{
    counter-reset:line;
}

.awt-line{
    display:block;
    position:relative;
    padding-left:60px;
    min-height:22px;
}

.awt-line::before{
    counter-increment:line;
    content:counter(line);
    position:absolute;
    left:0;
    width:45px;
    text-align:right;
    color:#6b7280;
}

/* =====================
   HTML SYNTAX COLORS
===================== */

.awt-tag{
    color:#60a5fa;
}

.awt-attribute{
    color:#fbbf24;
}

.awt-string{
    color:#34d399;
}

.awt-comment{
    color:#9ca3af;
}

.awt-keyword{
    color:#f472b6;
}

/* =====================
   RESULT PANELS
===================== */

.awt-result-panel{
    margin-top:25px;
    animation:awtFade .4s ease;
}

@keyframes awtFade{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.awt-message{
    padding:14px 18px;
    border-radius:10px;
    margin-top:15px;
    font-weight:600;
}

.awt-error{
    background:#fee2e2;
    color:#991b1b;
    border:1px solid #fecaca;
}

.awt-success-box{
    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;
}

/* =====================
   DOWNLOAD PANEL
===================== */

.awt-export-panel{
    margin-top:20px;
    background:#fff;
    border:1px solid var(--awt-border);
    border-radius:16px;
    padding:20px;
}

.awt-export-panel h3{
    margin-top:0;
}

/* =====================
   SCROLLBAR
===================== */

.awt-code-container::-webkit-scrollbar{
    width:10px;
    height:10px;
}

.awt-code-container::-webkit-scrollbar-thumb{
    background:#4b5563;
    border-radius:50px;
}

.awt-code-container::-webkit-scrollbar-track{
    background:#1f2937;
}

/* =====================
   DARK MODE
===================== */

@media (prefers-color-scheme: dark){

    .awt-source-tool-card{
        background:#111827;
    }

    .awt-source-tool-card h2{
        color:#fff;
    }

    .awt-input-group input,
    .awt-search-box input{
        background:#1f2937;
        border-color:#374151;
        color:#fff;
    }

    .awt-stat-card,
    .awt-seo-section,
    .awt-export-panel{
        background:#1f2937;
        border-color:#374151;
        color:#fff;
    }

    .awt-seo-table td{
        border-color:#374151;
    }

    .awt-stat-value,
    .awt-seo-section h3{
        color:#fff;
    }
}

/* =====================
   TABLET
===================== */

@media(max-width:992px){

    .awt-source-tool-card{
        padding:20px;
    }

    .awt-analysis-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* =====================
   MOBILE
===================== */

@media(max-width:768px){

    .awt-source-tool-card h2{
        font-size:22px;
    }

    .awt-input-group{
        flex-direction:column;
    }

    .awt-input-group input,
    .awt-btn{
        width:100%;
    }

    .awt-analysis-grid{
        grid-template-columns:1fr;
    }

    .awt-action-buttons{
        flex-direction:column;
    }

    .awt-action-buttons .awt-btn{
        width:100%;
    }

    .awt-seo-table td{
        display:block;
        width:100% !important;
    }

    .awt-code-container{
        max-height:500px;
        padding:15px;
    }
}

/* =====================
   EXTRA SMALL DEVICES
===================== */

@media(max-width:480px){

    .awt-source-tool-wrapper{
        padding:10px;
    }

    .awt-source-tool-card{
        padding:15px;
        border-radius:14px;
    }

    .awt-stat-value{
        font-size:20px;
    }

    .awt-code-container pre{
        font-size:12px;
    }
}