/* =====================================================
   FREEVEXA — BASE64 TOOL
===================================================== */

:root {

    --bg: #05060a;
    --card: rgba(15, 23, 42, .72);
    --card-border: rgba(255,255,255,.08);

    --text: #f5f7fb;
    --muted: #9ba4b5;

    --cyan: #00f0ff;
    --purple: #7000ff;
    --pink: #ff007a;

    --radius: 20px;

    --transition: .25s ease;

}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    font-family:
        "DM Sans",
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(0,240,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(112,0,255,.10),
            transparent 30%
        ),
        var(--bg);

    overflow-x: hidden;

}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
    cursor: pointer;
}


.ambient {

    position: fixed;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: .12;

    z-index: -1;

}


.ambient-one {

    top: 10%;
    left: -200px;

    background: var(--cyan);

}


.ambient-two {

    right: -200px;
    top: 55%;

    background: var(--purple);

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    background:
        rgba(5,6,10,.75);

    backdrop-filter:
        blur(20px);

}


.nav-container {

    max-width: 1200px;

    margin: auto;

    min-height: 76px;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

    font-size: 20px;

}


.logo-mark {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: #05060a;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            #fff
        );

    font-weight: 800;

}


.nav-links {

    display: flex;

    gap: 32px;

}


.nav-links a,
.mobile-menu a {

    color: var(--muted);

    transition:
        color var(--transition);

}


.nav-links a:hover,
.mobile-menu a:hover {

    color: var(--cyan);

}


.nav-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}


.theme-btn {

    width: 40px;
    height: 40px;

    border: 1px solid var(--card-border);

    border-radius: 10px;

    color: var(--text);

    background:
        rgba(255,255,255,.04);

}


.nav-btn {

    padding:
        11px 18px;

    border-radius: 10px;

    color: #05060a;

    background: var(--cyan);

    font-weight: 700;

}


.menu-btn {

    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid var(--card-border);

    border-radius: 10px;

    background: transparent;

}


.menu-btn span {

    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: var(--text);

}


.mobile-menu {

    display: none;

}


/* =====================================================
   HERO
===================================================== */

.tool-hero {

    max-width: 900px;

    margin:
        90px auto 50px;

    padding:
        0 24px;

    text-align: center;

}


.tool-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(0,240,255,.18);

    border-radius: 999px;

    color: var(--cyan);

    background:
        rgba(0,240,255,.05);

    font-size: 13px;

    font-weight: 600;

}


.tool-badge span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 10px
        var(--cyan);

}


.tool-hero h1 {

    margin-top: 22px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(42px, 7vw, 72px);

    line-height: 1.05;

}


.tool-hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            #fff,
            #b88cff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

}


.tool-hero p {

    max-width: 650px;

    margin: 22px auto 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;

}


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

.base64-tool {

    max-width: 1000px;

    margin: auto;

    padding:
        0 24px;

}


.tool-card {

    padding: 28px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        var(--radius);

    background:
        var(--card);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.3);

    backdrop-filter:
        blur(20px);

}


.tool-card-top,
.output-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.mini-label {

    color: var(--cyan);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.tool-card h2 {

    margin-top: 5px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 21px;

}


.sample-btn {

    padding:
        9px 14px;

    border:
        1px solid
        var(--card-border);

    border-radius: 9px;

    color: var(--text);

    background:
        rgba(255,255,255,.05);

}


.base64-input,
.base64-output {

    width: 100%;

    min-height: 240px;

    margin-top: 18px;

    padding: 18px;

    resize: vertical;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 14px;

    outline: none;

    color: #eafcff;

    background:
        rgba(0,0,0,.3);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 14px;

    line-height: 1.65;

    transition:
        border var(--transition),
        box-shadow var(--transition);

}


.base64-input:focus {

    border-color:
        rgba(0,240,255,.5);

    box-shadow:
        0 0 0 3px
        rgba(0,240,255,.08);

}


.base64-output {

    background:
        rgba(0,0,0,.2);

}


.action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

}


.primary-btn,
.secondary-btn,
.ghost-btn {

    padding:
        12px 18px;

    border-radius: 10px;

    border: 1px solid transparent;

    font-weight: 700;

}


.primary-btn {

    color: #05060a;

    background: var(--cyan);

}


.secondary-btn {

    color: var(--text);

    background:
        rgba(112,0,255,.18);

    border-color:
        rgba(112,0,255,.35);

}


.ghost-btn {

    color: var(--muted);

    background:
        rgba(255,255,255,.04);

    border-color:
        var(--card-border);

}


.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.sample-btn:hover {

    transform: translateY(-1px);

    filter: brightness(1.1);

}


.status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 16px;

    color: var(--muted);

    font-size: 13px;

}


.status span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #59616e;

}


.output-header {

    margin-top: 32px;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

}


.output-actions {

    display: flex;

    gap: 8px;

}


.output-actions button {

    padding:
        8px 12px;

    border:
        1px solid
        var(--card-border);

    border-radius: 8px;

    color: var(--text);

    background:
        rgba(255,255,255,.04);

}


.output-actions button:disabled {

    opacity: .35;

    cursor: not-allowed;

}


.tool-footer {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    color: #6f7888;

    font-size: 12px;

}


/* =====================================================
   INFO
===================================================== */

.info-section {

    max-width: 1000px;

    margin:
        28px auto 100px;

    padding:
        0 24px;

}


.info-card {

    display: flex;

    gap: 18px;

    padding: 24px;

    border:
        1px solid
        var(--card-border);

    border-radius: 16px;

    background:
        rgba(255,255,255,.025);

}


.info-icon {

    min-width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: var(--cyan);

    background:
        rgba(0,240,255,.08);

}


.info-card h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

}


.info-card p {

    margin-top: 7px;

    color: var(--muted);

    line-height: 1.7;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        rgba(0,0,0,.25);

}


.footer-main {

    max-width: 1200px;

    margin: auto;

    padding:
        55px 24px;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 40px;

}


.footer-brand p {

    margin-top: 15px;

    color: var(--muted);

    line-height: 1.7;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.footer-column h4 {

    margin-bottom: 5px;

}


.footer-column a {

    color: var(--muted);

    font-size: 14px;

}


.footer-column a:hover {

    color: var(--cyan);

}


.footer-bottom {

    max-width: 1200px;

    margin: auto;

    padding:
        18px 24px;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    color: #6f7888;

    font-size: 12px;

    border-top:
        1px solid
        rgba(255,255,255,.05);

}


/* =====================================================
   LIGHT MODE
===================================================== */

body.light-mode {

    --bg: #f4f7fb;

    --card: rgba(255,255,255,.82);

    --card-border: rgba(15,23,42,.1);

    --text: #111827;

    --muted: #5d6879;

}


body.light-mode .navbar {

    background:
        rgba(244,247,251,.8);

}


body.light-mode .base64-input,
body.light-mode .base64-output {

    color: #172033;

    background:
        rgba(255,255,255,.75);

}


body.light-mode .footer {

    background:
        rgba(255,255,255,.4);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 760px) {

    .nav-links,
    .nav-btn {

        display: none;

    }

    .menu-btn {

        display: block;

    }

    .mobile-menu {

        display: none;

        flex-direction: column;

        gap: 18px;

        padding:
            20px 24px;

        border-top:
            1px solid
            var(--card-border);

    }

    .mobile-menu.active {

        display: flex;

    }

    .tool-hero {

        margin-top: 60px;

    }

    .tool-card {

        padding: 18px;

    }

    .tool-card-top,
    .output-header {

        align-items: flex-start;

        flex-direction: column;

    }

    .output-actions {

        width: 100%;

    }

    .output-actions button {

        flex: 1;

    }

    .action-row button {

        flex: 1;

    }

    .footer-main {

        grid-template-columns: 1fr;

    }

    .footer-bottom {

        flex-direction: column;

    }

}