/* ---------- page ---------- */

body{
    margin:0;
    background:#0f1218;
    font-family:system-ui,Segoe UI,Roboto,Arial;
    color:#e6e8ee;
}

/* ---------- masonry layout ---------- */

.dashboard{
    column-width:280px;
    column-gap:16px;
    padding:16px;
}
.header {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 12px 20px;
    background: #0f1218;
    border-bottom: 1px solid #1f2633;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-area img {
    height: 148px;
    width: auto;
    display: block;
}

/* ---------- card ---------- */

.group{
    display:inline-block;
    width:100%;
    margin:0 0 16px;
    break-inside:avoid;

    background:#1a1f2a;
    border-radius:14px;

    /* makes card stand out from background */
    box-shadow:
        0 8px 22px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.04);

    overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease;
}

.group:hover{
    transform:translateY(-3px);
    box-shadow:
        0 14px 30px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- title ---------- */

.group-title{
    padding:10px 14px;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.03em;
    color:#9db3ff;

    background:#1d2330;
    border-bottom:1px solid #2a3140;
}

/* ---------- links container ---------- */

.group-links{
    display:flex;
    flex-direction:column;
}

/* ---------- links ---------- */

.links a{
    display:block;
    padding:8px 14px;
    text-decoration:none;
    color:#d7dbe6;

    border-bottom:1px solid #262c38;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    transition:background .12s ease, color .12s ease;
}

.links:last-child a{
    border-bottom:none;
}

.links a:hover{
    background:#2b3448;
    color:#ffffff;
}


/* ---------- top search bar ---------- */

.topbar{
    position:sticky;
    top:0;
    z-index:50;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;   /* ← center horizontally */
    align-items:center;       /* ← vertical alignment */
    gap:12px;

    padding:14px 16px;
    background:rgba(15,18,24,.75);
    backdrop-filter:blur(10px);
}
/* search form container */
.search{
    display:flex;
    align-items:center;
    background:#1a1f2a;
    border-radius:12px;
    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 6px 18px rgba(0,0,0,.35);

    transition:.15s;
}

/* input field */
.search input[type="text"]{
    background:transparent;
    border:none;
    outline:none;
    color:#e6e8ee;

    padding:10px 14px;
    width:260px;
    font-size:14px;
}

/* placeholder color */
.search input::placeholder{
    color:#8b93a7;
}

/* submit button */
.search button{
    border:none;
    background:#2b3448;
    color:#fff;
    padding:10px 16px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
}

/* hover effects */
.search:hover{
    transform:translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 22px rgba(0,0,0,.45);
}

.search button:hover{
    background:#3a4661;
}

/* color accents */
.google button{ background:#3b82f6; }
.google button:hover{ background:#2563eb; }

.deals button{ background:#ef4444; }
.deals button:hover{ background:#dc2626; }

.youtube button{ background:#ff0033; }
.youtube button:hover{ background:#cc0029; }

.wiki button{ background:#6366f1; }
.wiki button:hover{ background:#4f46e5; }

.reddit button{ background:#ff4500; }
.reddit button:hover{ background:#e03d00; }

.amazon button{ background:#f59e0b; }
.amazon button:hover{ background:#d97706; }

/* tablet */
@media (max-width: 900px){

    /* shrink logo */
    .logo-area img{
        height:70px;
    }

    /* header stacks */
    .header{
        flex-direction:column;
        align-items:center;
        gap:10px;
        padding:10px;
    }

    /* search area wraps nicely */
    .topbar{
        position:static; /* important for mobile scrolling */
        backdrop-filter:none;
        width:100%;
        justify-content:center;
    }

    /* forms become grid */
    .topbar .search{
        width:calc(50% - 10px);
        max-width:380px;
    }

    .search input[type="text"]{
        width:100%;
        min-width:0;
    }

    /* masonry becomes wider cards */
    .dashboard{
        column-width:320px;
        padding:12px;
    }
}
/* mobile */
@media (max-width: 600px){

    /* smaller header */
    .logo-area img{
        height:54px;
    }

    /* search bars full width */
    .topbar{
        gap:8px;
        padding:10px;
    }

    .topbar .search{
        width:100%;
    }

    .search button{
        padding:10px 12px;
        font-size:13px;
    }

    /* readable cards */
    .dashboard{
        column-width:100%;
        column-gap:0;
        padding:10px;
    }

    .group{
        margin-bottom:12px;
        border-radius:12px;
    }

    /* bigger tap targets */
    .links a{
        padding:14px 16px;
        font-size:16px;
    }

    .group-title{
        font-size:1rem;
        padding:12px 16px;
    }
}
/* small phone */
@media (max-width: 380px){

    .search button{
        display:none;
    }

    .search input[type="text"]{
        padding:12px 14px;
        font-size:15px;
    }
}