/* ==========================
   WHISTER SEARCH
   styles.css
========================== */

:root{
    --bg:#0b1220;
    --bg-secondary:#10192e;

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

    --border:rgba(255,255,255,.08);

    --accent:#4ca6ff;
    --accent-hover:#66b5ff;

    --text:#ffffff;
    --muted:#98a7bc;

    --success:#31d67b;

    --radius:20px;
    --blur:16px;

    --shadow:
        0 10px 30px rgba(0,0,0,.25);

    --transition:.25s ease;
}

/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        Inter,
        Segoe UI,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(76,166,255,.12),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 15%,
            rgba(76,166,255,.08),
            transparent 25%
        ),

        radial-gradient(
            circle at 10% 10%,
            rgba(0,200,255,.05),
            transparent 20%
        ),

        linear-gradient(
            180deg,
            #0b1220,
            #0f1728,
            #0b1220
        );

    color:var(--text);
    min-height:100vh;
}

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

img{
    max-width:100%;
}

button{
    cursor:pointer;
    font-family:inherit;
}

ul{
    list-style:none;
}

/* ==========================
   BACKGROUND EFFECTS
========================== */

.background-grid{
    position:fixed;
    inset:0;

    background:
    linear-gradient(
    rgba(255,255,255,.02) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.02) 1px,
    transparent 1px);

    background-size:50px 50px;

    opacity:.35;

    pointer-events:none;

    z-index:-2;
}

.hero-glow{
    position:fixed;

    width:700px;
    height:700px;

    background:#4ca6ff;

    filter:blur(160px);

    opacity:.08;

    top:-150px;
    left:50%;

    transform:translateX(-50%);

    pointer-events:none;

    z-index:-1;
}

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

nav{
    width:100%;
    max-width:1200px;

    margin:auto;

    padding:24px;

    display:flex;
    justify-content:space-between;
}
.hero{
    width:min(92%,1200px);
    margin:auto;
    padding-top:80px;
    text-align:center;
}

.hero h1{
    font-size:72px;
    max-width:850px;
    margin:auto;
    line-height:1.1;
    letter-spacing:-2px;
}

.hero p{
    margin-top:20px;
    color:var(--muted);
    font-size:20px;
}

.search-box{
    max-width:850px;
    margin:40px auto;
    display:flex;
    gap:12px;
    background:var(--card);
    border:1px solid var(--border);
    backdrop-filter:blur(16px);
    border-radius:20px;
    padding:12px;
}

.search-box input{
    flex:1;
    border:none;
    background:none;
    color:white;
    font-size:18px;
    outline:none;
    padding:14px;
}

.search-box button{
    border:none;
    background:var(--accent);
    color:white;
    padding:14px 24px;
    border-radius:14px;
}

.ai-toggle-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:20px;
    color:var(--muted);
}

.quick-links{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.quick-links a{
    padding:10px 16px;
    border-radius:999px;
    background:var(--card);
    border:1px solid var(--border);
}

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

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:25px;
    backdrop-filter:blur(16px);
}

.card h3{
    margin:12px 0;
}

.card p{
    color:var(--muted);
}

.trending{
    margin-top:80px;
}

.trending h2{
    text-align:center;
    margin-bottom:25px;
}

.trends{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.trends span{
    background:var(--card);
    border:1px solid var(--border);
    padding:12px 18px;
    border-radius:999px;
}

.tools{
    margin-top:80px;
}

.tools h2{
    text-align:center;
    margin-bottom:25px;
}

.tool-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.tool-grid div{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    text-align:center;
}

footer{
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
}

@media(max-width:768px){

    .hero h1{
        font-size:48px;
    }

    .search-box{
        flex-direction:column;
    }

    nav{
        flex-direction:column;
        gap:20px;
    }
}
/* ==========================
   SEARCH PAGE
========================== */

header{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:20px 30px;

    display:flex;
    align-items:center;
    gap:20px;

    border-bottom:1px solid var(--border);
}

.search-header{
    flex:1;
    display:flex;
    gap:10px;
}

.search-header input{
    flex:1;
    border:none;
    outline:none;

    background:var(--card);

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

    border-radius:16px;

    color:white;

    padding:14px 18px;
}

.search-header button{
    border:none;

    background:var(--accent);

    color:white;

    padding:14px 24px;

    border-radius:14px;
}

.search-layout{
    max-width:1400px;

    margin:40px auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        320px;

    gap:30px;

    padding:0 30px;
}

.tabs{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;
}

.tabs button{

    border:none;

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

    color:white;

    padding:12px 18px;

    border-radius:14px;

    cursor:pointer;

    transition:.2s ease;
}

.tabs button:hover{

    background:
    rgba(76,166,255,.25);

    transform:
    translateY(-2px);
}

.tabs .active{

    background:
    #4ca6ff;

    color:white;
}
.ai-card{
    background:var(--card);

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

    border-radius:16px;

    padding:20px;
}
#results{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.result{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    backdrop-filter:blur(16px);

    padding:24px;

    transition:.2s;
}

.result:hover{
    border-color:#4ca6ff;
}

.result-url{
    color:#6eb7ff;
    font-size:13px;

    overflow:hidden;
    text-overflow:ellipsis;
}

.result-title{
    display:block;

    color:white;

    font-size:24px;
    font-weight:700;

    margin-top:8px;
    margin-bottom:12px;
}

.result-title:hover{
    color:#4ca6ff;
}

.result-description{
    color:#d5dce5;

    line-height:1.7;
}

.meta{
    margin-top:15px;

    color:#8ac6ff;

    font-size:14px;
}
.result-count{
    margin-bottom:20px;
    color:#94a3b8;
}
.result-header{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.favicon{
    width:24px;
    height:24px;
    border-radius:6px;
    margin-top:2px;
}
.answer-card{
    background:rgba(255,255,255,.05);

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

    border-radius:20px;

    padding:30px;

    margin-bottom:20px;
}
.skeleton{

    height:140px;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

    animation:
    shimmer 1.5s infinite;
}

@keyframes shimmer{

    from{
        background-position:-500px;
    }

    to{
        background-position:500px;
    }

}
/* ==================================
   KNOWLEDGE PANELS
================================== */
.run-local{

    margin-top:80px;

    background:var(--card);

    padding:30px;

    border-radius:24px;
}

.run-local pre{

    margin-top:20px;

    padding:20px;

    border-radius:16px;

    background:#0e1728;

    overflow:auto;
}

.knowledge-card{
    display:flex;
    align-items:center;
    gap:20px;

    padding:25px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        rgba(76,166,255,.25),
        rgba(0,153,255,.08)
    );

    border:1px solid
    rgba(76,166,255,.3);
}

.knowledge-card h2{
    margin-bottom:8px;
    font-size:28px;
}

.knowledge-card p{
    color:white;
    margin-bottom:8px;
}

.knowledge-card small{
    color:#b9d3ea;
}

.knowledge-icon{
    font-size:64px;
    line-height:1;
}

/* ==================================
   ATMOS WEB SPECIAL STYLING
================================== */

.knowledge-card:has(.knowledge-icon){
    position:relative;
    overflow:hidden;
}

.knowledge-card::before{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    right:-80px;
    top:-80px;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.15),
        transparent
    );

    pointer-events:none;
}

/* ==================================
   ANSWER CARD
================================== */

.answer-card{

    background:
    linear-gradient(
        135deg,
        rgba(16,24,40,.9),
        rgba(34,54,90,.7)
    );

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

    border-radius:20px;

    padding:22px;

    margin-bottom:25px;

    backdrop-filter:blur(12px);
}

.answer-card h2{

    margin-bottom:12px;

    color:#77c4ff;
}

.answer-card p{

    color:#dbe9f6;

    line-height:1.7;
}

/* ==================================
   SEARCH RESULTS
================================== */

.result-header{

    display:flex;

    gap:12px;

    align-items:flex-start;
}

.favicon{

    width:24px;
    height:24px;

    border-radius:6px;

    background:white;

    object-fit:cover;

    flex-shrink:0;
}

.result-count{

    color:var(--muted);

    margin-bottom:20px;

    font-size:14px;
}

.result{

    transition:.2s ease;
}

.result:hover{

    border-color:
    rgba(76,166,255,.35);

    transform:
    translateY(-2px);
}

/* ==================================
   META
================================== */

.meta{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:15px;
}

/* ==================================
   RELATED SEARCHES
================================== */

.related-searches{

    margin-top:35px;

    background:var(--card);

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

    border-radius:20px;

    padding:24px;
}

.related-searches h3{

    margin-bottom:15px;
}

.related-btn{

    border:none;

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

    color:white;

    border-radius:999px;

    padding:10px 16px;

    margin:4px;

    cursor:pointer;

    transition:.2s ease;
}

.related-btn:hover{

    background:#4ca6ff;

    transform:
    scale(1.04);
}

/* ==================================
   QUICK TOOLS
================================== */

.quick-tool{

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

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

    border-radius:16px;

    padding:18px;

    text-align:center;

    cursor:pointer;

    transition:.2s ease;

    font-weight:600;
}

.quick-tool:hover{

    background:
    rgba(76,166,255,.18);

    border-color:
    rgba(76,166,255,.4);

    transform:
    translateY(-3px);
}

.quick-tool:active{

    transform:
    translateY(0);
}

/* ==================================
   OPEN BUTTON
================================== */

.open-btn{

    display:inline-block;

    margin-top:15px;

    background:#4ca6ff;

    color:white;

    text-decoration:none;

    padding:10px 18px;

    border-radius:12px;

    transition:.2s ease;
}

.open-btn:hover{

    background:#65b3ff;
}

/* ==================================
   SUGGESTIONS
================================== */

#suggestions{

    margin-top:10px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.suggestion{

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

    border-radius:999px;

    padding:8px 14px;

    color:#dbe9f6;

    cursor:pointer;
}

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

@media(max-width:768px){

    .knowledge-card{

        flex-direction:column;

        text-align:center;
    }

    .knowledge-icon{

        font-size:54px;
    }

    .result-header{

        flex-direction:column;
    }

}
.light-mode{

    --bg:#f5f7fb;

    --bg-secondary:#ffffff;

    --card:#ffffff;

    --border:#d8dbe2;

    --text:#111827;

    --muted:#475569;

    background:
    #f7fafc;

    color:#111827;
}

.light-mode .result,
.light-mode .card,
.light-mode .ai-card,
.light-mode .related-searches{

    background:white;

    color:#111827;

    border-color:#dbe2ea;

}

.light-mode .result-title{

    color:#111827;

}

.light-mode .result-description{

    color:#475569;

}

.light-mode .tabs button{

    color:#111827;

}

.light-mode input{

    color:#111827;
}

.light-mode .result{

    background:white;

}
.logo{

    height:36px;
    width:auto;

    display:block;

    object-fit:contain;
}
#heroText{

    min-height: 160px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    transition:
        opacity .3s ease;

}

.fade-out{

    opacity:.2;
}
nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 32px;
}
.top-links a{

    color:#d5dce5;

    text-decoration:none;

    font-weight:500;

    transition:.2s ease;

    padding:8px 12px;

    border-radius:10px;
}

.top-links a:hover{

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

    color:white;
}
.result{

    opacity:0;

    transform:
    translateY(15px);

    animation:
    resultIn .45s ease forwards;
}

@keyframes resultIn{

    from{

        opacity:0;

        transform:
        translateY(15px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}.search-input:focus{

    border-color:
    #60a5fa;

    box-shadow:

        0 0 0 3px
        rgba(
            96,
            165,
            250,
            .15
        ),

        0 0 40px
        rgba(
            96,
            165,
            250,
            .12
        );

}
.sidebar .card{

    transition:
    .2s ease;
}

.sidebar .card:hover{

    transform:
    translateY(-3px);

    border-color:
    rgba(
        96,
        165,
        250,
        .25
    );
}
.logo{

    transition:
    .2s ease;
}

.logo:hover{

    transform:
    scale(1.03);
}