:root{
    --page:#f7f8fb;
    --paper:#fff;
    --text:#151722;
    --muted:rgba(21,23,34,.58);
    --muted2:rgba(21,23,34,.37);
    --line:rgba(21,23,34,.085);
    --sidebar:88px;
    --purple:#500064;
    --shadow:0 18px 45px rgba(45,38,75,.075);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    background:var(--page);
    color:var(--text);
    font-family:"DM Sans",system-ui,sans-serif;
}

body{
    padding-left:var(--sidebar);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

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

img{
    max-width:100%;
    display:block;
}

/* =========================================================
   DESKTOP SIDEBAR
========================================================= */
.charm-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar);
    height:100vh;
    z-index:9998;
    background:#fff;
    border-right:1px solid rgba(0,0,0,.07);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 10px;
}

.charm-sidebar .brand-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.charm-sidebar .brand{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
}

.charm-sidebar .brand-logo{
    width:40px;
    height:40px;
    border-radius:14px;
    overflow:hidden;
    background:#111;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.charm-sidebar .brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.charm-sidebar .rail-stack{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.charm-sidebar .rail-item{
    position:relative;
    width:58px;
    height:58px;
    border:0;
    border-radius:18px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    margin:0 auto;
    transition:.16s ease;
}

.charm-sidebar .rail-item:hover{
    background:#f4f4f3;
    transform:translateY(-1px);
}

.charm-sidebar .rail-item.active{
    background:var(--purple);
    width:50px;
    height:50px;
    border-radius:40px;
    color:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.charm-sidebar .rail-icon{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
}

.charm-sidebar .rail-icon svg{
    width:24px;
    height:24px;
}

.charm-sidebar .rail-label{
    position:absolute;
    left:74px;
    top:50%;
    transform:translateY(-50%) translateX(-8px);
    padding:10px 14px;
    border-radius:14px;
    background:#111;
    color:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
}

.charm-sidebar .rail-item:hover .rail-label{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.charm-sidebar .rail-bottom{
    margin-top:auto;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.profile-pill{
    width:48px;
    height:48px;
    border:1px solid rgba(0,0,0,.06);
    border-radius:50%;
    background:#f5f5f4;
    display:grid;
    place-items:center;
    overflow:hidden;
}

.profile-pill img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-fallback{
    font-size:12px;
    font-weight:850;
    color:#111;
}

/* =========================================================
   PAGE
========================================================= */
.search-page{
    position:relative;
    min-height:100vh;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(circle at 77% 7%,rgba(108,188,224,.23),transparent 25%),
        radial-gradient(circle at 19% 27%,rgba(194,132,222,.18),transparent 28%),
        radial-gradient(circle at 54% 76%,rgba(255,214,158,.18),transparent 24%),
        linear-gradient(135deg,#fff 0%,#f7f9fc 46%,#f3f4f8 100%);
}

.search-page::before{
    content:"";
    position:absolute;
    inset:-15%;
    z-index:-4;
    pointer-events:none;
    background:
        radial-gradient(circle at 82% 18%,rgba(79,174,215,.20),transparent 22%),
        radial-gradient(circle at 17% 44%,rgba(166,104,199,.15),transparent 21%),
        radial-gradient(circle at 58% 83%,rgba(255,190,114,.14),transparent 20%);
    filter:blur(18px);
}

.search-page::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.74),
            rgba(255,255,255,.28) 42%,
            rgba(255,255,255,.77) 100%
        );
}

/* =========================================================
   TOPLINE
========================================================= */
.topline{
    height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 42px;
    border-bottom:1px solid rgba(21,23,34,.08);
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(20px);
}

.top-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.top-brand-logo{
    width:37px;
    height:37px;
    border-radius:11px;
    overflow:hidden;
    background:#111;
    box-shadow:0 5px 20px rgba(0,0,0,.16);
}

.top-brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.top-brand-copy{
    display:flex;
    flex-direction:column;
    font:500 14px/1 "Outfit",sans-serif;
    letter-spacing:.03em;
}

.top-brand-copy small{
    margin-top:5px;
    color:rgba(21,23,34,.42);
    font:500 8px/1 "DM Sans",sans-serif;
    letter-spacing:.26em;
    text-transform:uppercase;
}

/* =========================================================
   HERO / SEARCH
========================================================= */
.hero{
    max-width:1600px;
    margin:0 auto;
    padding:90px 28px 34px;
    text-align:center;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(21,23,34,.08);
    color:rgba(21,23,34,.55);
    font-size:9px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    box-shadow:0 10px 30px rgba(80,75,120,.06);
}

.hero-kicker::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#9b70b2;
    box-shadow:0 0 12px rgba(166,104,199,.55);
}

.hero-title{
    margin:0;
    color:#161824;
    font:400 clamp(45px,6.7vw,83px)/.94 "Outfit",sans-serif;
    letter-spacing:-.055em;
}

.hero-title span{
    background:linear-gradient(90deg,#191b25 0%,#557a91 36%,#8d5caa 68%,#5e6170 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-title.rotating{
    transition:opacity .38s ease, transform .38s ease, filter .38s ease;
}

.hero-title.is-fading-out{
    opacity:0;
    transform:translateY(6px);
    filter:blur(4px);
}

.hero-title.is-fading-in{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

@media (prefers-reduced-motion: reduce){
    .hero-title.rotating{
        transition:none;
    }
}

.hero-copy{
    max-width:620px;
    margin:20px auto 30px;
    color:rgba(21,23,34,.58);
    font-size:13px;
    line-height:1.65;
}

.search-shell{
    position:relative;
    max-width:790px;
    margin:0 auto;
}

.search-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 10px 9px 20px;
    min-height:77px;
    border:1px solid rgba(21,23,34,.09);
    border-radius:25px;
    background:rgba(255,255,255,.84);
    box-shadow:
        0 24px 60px rgba(41,35,72,.10),
        inset 0 1px rgba(255,255,255,.95);
    backdrop-filter:blur(24px);
}

.search-icon{
    width:23px;
    height:23px;
    flex:none;
    color:rgba(21,23,34,.50);
}

.search-input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    color:#151722;
    font-size:17px;
}

.search-input::placeholder{
    color:rgba(21,23,34,.36);
}

.search-shortcut{
    padding:8px 9px;
    border-radius:9px;
    border:1px solid rgba(21,23,34,.07);
    color:rgba(21,23,34,.35);
    font-size:10px;
    background:rgba(21,23,34,.03);
}

.search-submit{
    width:51px;
    height:51px;
    border:0;
    border-radius:17px;
    background:#151722;
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 10px 25px rgba(21,23,34,.16);
}


/* =========================================================
   FOCUSED SEARCH EXPERIENCE
========================================================= */
.focused-search{
    display:none;
    width:min(1500px,calc(100vw - 56px)) !important;
    max-width:none;
    margin:24px auto 0;
    padding:10px;
    border:1px solid rgba(21,23,34,.085);
    border-radius:26px;
    background:rgba(255, 255, 255, 0.77);
    box-shadow:0 24px 70px rgba(41,35,72,.10);
    backdrop-filter:blur(24px);
    text-align:left;
}

.search-page.is-searching .focused-search{display:block !important;}

/* Active search is a result-only view: hide everything below the search/results area. */
.search-page.is-searching .search-discovery,
.search-page.is-searching .content,
.search-page.is-searching .featured-strip,
.search-page.is-searching .quick,
.search-page.is-searching .user-strip,
.search-page.is-searching .footer,
.search-page.is-searching .bottom-info,
.search-page.is-searching .info-section,
.search-page.is-searching .studio-info,
.search-page.is-searching .site-footer{
    display:none !important;
}

.search-page.is-searching .hero{padding-bottom:42px}

.focused-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:2px 2px 16px;
}
.focused-title-wrap{min-width:0}
.focused-eyebrow{
    display:block;
    margin-bottom:7px;
    color:rgba(21,23,34,.34);
    font-size:8px;
    font-weight:800;
    letter-spacing:.16em;
}
.focused-title-wrap h2{
    margin:0;
    color:#151722;
    font:500 24px/1 "Outfit",sans-serif;
    letter-spacing:-.035em;
}
.focused-title-wrap p{
    margin:7px 0 0;
    color:rgba(21,23,34,.42);
    font-size:10px;
}
.focused-count{
    flex:none;
    color:rgba(21,23,34,.38);
    font-size:9px;
}

.result-filters{
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    padding:4px 0 14px;
    scrollbar-width:none;
}
.result-filters::-webkit-scrollbar{display:none}
.result-filter{
    flex:none;
    border:1px solid rgba(21,23,34,.08);
    background:rgba(21,23,34,.025);
    color:rgba(21,23,34,.48);
    border-radius:999px;
    padding:8px 11px;
    font-size:9px;
    transition:.16s ease;
}
.result-filter span{
    display:inline-grid;
    min-width:16px;
    height:16px;
    margin-left:4px;
    place-items:center;
    border-radius:999px;
    background:rgba(21,23,34,.055);
    font-size:7px;
}
.result-filter:hover{color:#151722;background:#fff}
.result-filter.active{
    background:#151722;
    color:#fff;
    border-color:#151722;
}
.result-filter.active span{
    background:rgba(255,255,255,.14);
    color:#fff;
}

.focused-section{margin-top:18px}
.focused-section:first-child{margin-top:0}
.focused-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 2px 9px;
}
.focused-section-head strong{
    color:#171924;
    font:500 13px/1 "Outfit",sans-serif;
}
.focused-section-head span{
    color:rgba(21,23,34,.32);
    font-size:8px;
}

.focused-user-list{display:grid;gap:7px}
.focused-user{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:10px 11px;
    border:1px solid rgba(21,23,34,.065);
    border-radius:16px;
    background:rgba(248,249,252,.74);
    transition:.16s ease;
}
.focused-user:hover{
    transform:translateY(-1px);
    background:#fff;
    border-color:rgba(21,23,34,.12);
    box-shadow:0 10px 24px rgba(45,38,75,.07);
}
.focused-user-avatar{
    width:46px;
    height:46px;
    flex:none;
    overflow:hidden;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#eef0f5,#fff);
    border:1px solid rgba(21,23,34,.08);
    color:#555a6c;
    font:700 10px/1 "Outfit",sans-serif;
}
.focused-user-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.focused-user-copy{min-width:0;flex:1}
.focused-user-copy strong{
    display:block;
    color:#171924;
    font:500 13px/1.1 "Outfit",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.focused-user-copy span{
    display:block;
    margin-top:5px;
    color:rgba(21,23,34,.42);
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.focused-arrow{color:rgba(21,23,34,.28);font-size:17px}

.focused-top-user{
    border-color:rgba(80,0,100,.13);
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,242,251,.9));
    box-shadow:0 16px 35px rgba(80,0,100,.08);
}
.focused-top-user .focused-user-avatar{width:54px;height:54px}

.focused-image-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}
.focused-image{
    position:relative;
    min-width:0;
    aspect-ratio:1.1;
    overflow:hidden;
    border-radius:17px;
    border:1px solid rgba(21,23,34,.075);
    background:#eee;
    cursor:pointer;
    isolation:isolate;
}
.focused-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.focused-image:hover img{transform:scale(1.045)}
.focused-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.68));
    pointer-events:none;
}
.focused-image-copy{
    position:absolute;
    z-index:2;
    left:10px;
    right:10px;
    bottom:9px;
}
.focused-image-copy strong{
    display:block;
    color:#fff;
    font:500 11px/1.1 "Outfit",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.focused-image-copy span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.62);
    font-size:7px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.focused-tag-list{display:flex;flex-wrap:wrap;gap:7px}
.focused-tag{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(21,23,34,.075);
    background:rgba(248,249,252,.78);
    color:#272a35;
    border-radius:13px;
    padding:9px 11px;
    cursor:pointer;
}
.focused-tag strong{font:500 10px/1 "Outfit",sans-serif}
.focused-tag span{color:rgba(21,23,34,.35);font-size:8px}

.focused-empty{
    display:grid;
    place-items:center;
    min-height:110px;
    padding:25px;
    text-align:center;
    border:1px dashed rgba(21,23,34,.10);
    border-radius:18px;
    background:rgba(248,249,252,.58);
}
.focused-empty strong{
    color:#171924;
    font:500 14px/1 "Outfit",sans-serif;
}
.focused-empty span{
    max-width:420px;
    margin-top:7px;
    color:rgba(21,23,34,.40);
    font-size:9px;
    line-height:1.5;
}

@media (prefers-reduced-motion: reduce){
    .featured-card-enter{
        opacity:1;
        transform:none;
        transition:none;
    }
}

@media(max-width:700px){
    .focused-search{
        width:100% !important;
        max-width:none;
        margin-top:18px;
        padding:15px;
        border-radius:22px;
    }
    .focused-head{align-items:flex-start;padding-bottom:12px}
    .focused-title-wrap h2{font-size:21px}
    .focused-title-wrap p{font-size:9px}
    .focused-image-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }
    .featured-track{
        gap:10px;
        margin-right:-2px;
        padding-bottom:7px;
    }
    .featured-card{
        flex-basis:min(82vw,300px);
    }
    .featured-heading{
        margin-bottom:11px;
    }
    .focused-section{margin-top:15px}
}

/* =========================================================
   SEARCH SUGGESTIONS
========================================================= */
.search-suggestions{
    display:none;
    position:relative;
    margin:9px auto 0;
    width:100%;
    padding:8px;
    border:1px solid rgba(21,23,34,.09);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:0 20px 45px rgba(41,35,72,.12);
    backdrop-filter:blur(22px);
    text-align:left;
    z-index:50;
}

.search-suggestions.open{
    display:block;
}

.suggestion-group + .suggestion-group{
    margin-top:5px;
}

.suggestion-group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px 6px;
    color:rgba(21,23,34,.38);
    font-size:8px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.suggestion-list{
    display:grid;
    gap:2px;
}

.suggestion-item{
    width:100%;
    min-height:47px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#171924;
    text-align:left;
    transition:background .16s ease,transform .16s ease;
}

.suggestion-item:hover,
.suggestion-item:focus-visible{
    background:rgba(21,23,34,.055);
    outline:none;
}

.suggestion-thumb,
.suggestion-avatar,
.suggestion-icon{
    width:34px;
    height:34px;
    flex:none;
    border-radius:10px;
    overflow:hidden;
}

.suggestion-thumb img,
.suggestion-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.suggestion-avatar{
    display:grid;
    place-items:center;
    border:1px solid rgba(21,23,34,.08);
    background:linear-gradient(145deg,#eef0f5,#fff);
    color:#555a6c;
    font-size:9px;
    font-weight:800;
}

.suggestion-icon{
    display:grid;
    place-items:center;
    background:rgba(21,23,34,.055);
    color:#555a6c;
    font-size:14px;
}

.suggestion-copy{
    min-width:0;
    flex:1;
}

.suggestion-copy strong{
    display:block;
    font:600 11px/1.15 "Outfit",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.suggestion-copy span{
    display:block;
    margin-top:4px;
    color:rgba(21,23,34,.40);
    font-size:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.suggestion-kind{
    flex:none;
    color:rgba(21,23,34,.28);
    font-size:8px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.suggestion-empty{
    padding:16px 12px;
    color:rgba(21,23,34,.42);
    text-align:center;
    font-size:9px;
}

/* =========================================================
   QUICK TAGS
========================================================= */
.quick{
    display:flex;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
    margin-top:17px;
}

.quick button{
    border:1px solid rgba(21,23,34,.08);
    background:rgba(255,255,255,.61);
    color:rgba(21,23,34,.58);
    border-radius:999px;
    padding:9px 13px;
    font-size:10px;
    transition:.18s ease;
}

.quick button:hover{
    background:rgba(255,255,255,.93);
    color:#151722;
    border-color:rgba(21,23,34,.13);
}

/* =========================================================
   NEW USER ROW
   Immediately BELOW the search tags
========================================================= */
.user-strip{
    margin:24px auto 0;
    width:min(850px,100%);
    display:flex;
    justify-content:center;
}

.user-strip-track{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:26px;
}

.mini-user{
    width:72px;
    min-width:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
}

.mini-user-avatar{
    width:58px;
    height:58px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:
        linear-gradient(145deg,#edf0f6,#fff);
    border:2px solid rgba(255,255,255,.95);
    box-shadow:
        0 8px 20px rgba(45,38,75,.10),
        0 0 0 1px rgba(21,23,34,.07);
    color:#4c5060;
    font:700 11px/1 "Outfit",sans-serif;
}

.mini-user-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-user-name{
    width:100%;
    color:#252835;
    font:500 10px/1.2 "Outfit",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.user-strip-empty{
    color:rgba(21,23,34,.38);
    font-size:10px;
}

/* =========================================================
   CONTENT
========================================================= */
.content{
    width:min(1460px,100%);
    margin:0 auto;
    padding:0 28px 52px;
}

.feature-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin:18px 0 14px;
}

.feature-top h2{
    margin:0;
    color:#171924;
    font:500 20px/1 "Outfit",sans-serif;
    letter-spacing:-.025em;
}

.feature-top p{
    margin:6px 0 0;
    color:rgba(21,23,34,.38);
    font-size:10px;
}

.result-counter{
    color:rgba(21,23,34,.36);
    font-size:10px;
}

/* =========================================================
   NEW FEATURED STRIP
   Before "Explore Charm Studios"
========================================================= */
.featured-strip{
    margin:8px 0 28px;
}

.featured-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:0 0 13px;
}

.featured-heading h2{
    margin:0;
    font:500 15px/1 "Outfit",sans-serif;
    letter-spacing:-.02em;
    color:#171924;
}

.featured-heading span{
    color:rgba(21,23,34,.33);
    font-size:9px;
}

.featured-track{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 8px;
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
}
.featured-track::-webkit-scrollbar{
    display:none;
}

.featured-card-enter{
    opacity:0;
    transform:translateY(8px);
    transition:opacity .45s ease, transform .45s ease, box-shadow .22s ease;
}

.featured-card-enter.is-visible{
    opacity:1;
    transform:translateY(0);
}

.featured-card{
    position:relative;
    flex:0 0 calc((100% - 48px) / 5);
    min-width:0;
    min-height:104px;
    scroll-snap-align:start;
    overflow:hidden;
    border:1px solid rgba(21,23,34,.08);
    border-radius:20px;
    background:#e8e9ef;
    box-shadow:0 13px 30px rgba(45,38,75,.07);
    isolation:isolate;
    transition:transform .22s ease,box-shadow .22s ease;
    cursor:pointer;
}

.featured-card:hover{
    transform:translateY(-2px);
    box-shadow:0 17px 35px rgba(45,38,75,.11);
}

.featured-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,0) 33%,
            rgba(255,255,255,.05)
        );
}

.featured-card-image{
    position:absolute;
    left:12px;
    top:7px;
    bottom:7px;
    width:75px;
    z-index:2;
    overflow:hidden;
    border-radius:13px;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
    background:#ddd;
}

.featured-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.65,.3,1);
}

.featured-card:hover .featured-card-image img{
    transform:scale(1.045);
}

.featured-card-copy{
    position:relative;
    z-index:3;
    min-height:104px;
    padding:20px 12px 15px 98px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-card-title{
    color:#252733;
    font:500 12px/1.08 "Outfit",sans-serif;
    letter-spacing:-.01em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.featured-card-meta{
    margin-top:7px;
    color:rgba(37,39,51,.52);
    font-size:8px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.featured-card-pill{
    margin-top:7px;
    width:max-content;
    max-width:100%;
    padding:4px 6px;
    border-radius:999px;
    background:rgba(255,255,255,.42);
    color:rgba(37,39,51,.50);
    border:1px solid rgba(255,255,255,.34);
    font-size:7px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* clean soft gradients inspired by the reference */
.gradient-1{
    background:linear-gradient(135deg,#f2e7dd 0%,#d9c3bf 52%,#bda9b3 100%);
}

.gradient-2{
    background:linear-gradient(135deg,#e0ecf0 0%,#b7cbd4 48%,#8fa8b5 100%);
}

.gradient-3{
    background:linear-gradient(135deg,#e9e5f2 0%,#c8c1dc 48%,#aba5bf 100%);
}

.gradient-4{
    background:linear-gradient(135deg,#e9ebd9 0%,#d0d4bd 52%,#afb69e 100%);
}

.gradient-5{
    background:linear-gradient(135deg,#f1e4d1 0%,#ddc5a9 50%,#c0a38b 100%);
}

.gradient-6{
    background:linear-gradient(135deg,#e5edf3 0%,#c7cedf 48%,#9ea9c0 100%);
}

.featured-empty{
    width:100%;
    min-height:96px;
    border-radius:18px;
    border:1px dashed rgba(21,23,34,.10);
    display:grid;
    place-items:center;
    color:rgba(21,23,34,.38);
    font-size:10px;
    background:rgba(255,255,255,.55);
}

/* =========================================================
   TABS
========================================================= */
.tabs{
    display:flex;
    gap:6px;
    padding:5px;
    border-radius:15px;
    background:rgba(255,255,255,.60);
    border:1px solid rgba(21,23,34,.07);
    width:max-content;
    margin-bottom:17px;
}

.tab{
    border:0;
    background:transparent;
    color:rgba(21,23,34,.42);
    padding:9px 13px;
    border-radius:10px;
    font-size:10px;
}

.tab.active,
.tab:hover{
    background:rgba(21,23,34,.07);
    color:#151722;
}

/* =========================================================
   RESULTS
========================================================= */
.section-block{
    margin-top:22px;
}

.section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:11px;
}

.section-heading h3{
    margin:0;
    color:#171924;
    font:500 14px/1 "Outfit",sans-serif;
    letter-spacing:-.015em;
}

.section-heading span{
    color:rgba(21,23,34,.32);
    font-size:9px;
}

.image-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:11px;
}

.image-card{
    position:relative;
    overflow:hidden;
    border-radius:19px;
    aspect-ratio:1.08;
    border:1px solid rgba(21,23,34,.08);
    background:#fff;
    cursor:pointer;
    isolation:isolate;
    box-shadow:0 12px 30px rgba(45,38,75,.06);
}

.image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:
        transform .75s cubic-bezier(.2,.65,.3,1),
        filter .4s ease;
}

.image-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(0,0,0,.68) 100%
        );
    z-index:1;
    pointer-events:none;
}

.image-card:hover img{
    transform:scale(1.045);
    filter:saturate(1.05);
}

.image-meta{
    position:absolute;
    z-index:2;
    left:13px;
    right:13px;
    bottom:12px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
}

.image-meta strong{
    display:block;
    font:500 12px/1.05 "Outfit",sans-serif;
    color:#fff;
}

.image-meta small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.50);
    font-size:8px;
}

.image-chips{
    display:flex;
    gap:5px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.image-chip{
    padding:5px 7px;
    border-radius:7px;
    background:rgba(255,255,255,.10);
    font-size:8px;
    color:rgba(255,255,255,.75);
    backdrop-filter:blur(8px);
}

.entity-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.entity{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    border-radius:18px;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(21,23,34,.08);
    box-shadow:0 14px 35px rgba(45,38,75,.055);
    backdrop-filter:blur(18px);
    transition:.18s ease;
}

.entity:hover{
    background:rgba(255,255,255,.88);
    border-color:rgba(21,23,34,.11);
    transform:translateY(-1px);
}

.avatar{
    width:43px;
    height:43px;
    border-radius:15px;
    display:grid;
    place-items:center;
    flex:none;
    background:linear-gradient(145deg,#eef0f5,#fff);
    border:1px solid rgba(21,23,34,.08);
    color:#4c5060;
    font:600 11px/1 "Outfit",sans-serif;
    overflow:hidden;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.entity-body{
    min-width:0;
    flex:1;
}

.entity-body strong{
    display:block;
    color:#171924;
    font:500 13px/1.1 "Outfit",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.entity-body span{
    display:block;
    margin-top:5px;
    color:rgba(21,23,34,.40);
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.entity-bio{
    margin-top:4px!important;
    color:rgba(21,23,34,.30)!important;
}

.entity-arrow{
    color:rgba(21,23,34,.28);
    font-size:15px;
    flex:none;
}

.tag-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.tag-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:15px;
    border-radius:18px;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(21,23,34,.08);
    box-shadow:0 14px 35px rgba(45,38,75,.055);
    transition:.18s ease;
}

.tag-card:hover{
    background:rgba(255,255,255,.88);
    border-color:rgba(21,23,34,.11);
    transform:translateY(-1px);
}

.tag-left{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.hash{
    width:38px;
    height:38px;
    border-radius:13px;
    display:grid;
    place-items:center;
    flex:none;
    background:linear-gradient(145deg,rgba(144,95,173,.13),rgba(49,104,132,.10));
    color:#825f9a;
    font:500 17px/1 "Outfit";
}

.tag-left strong{
    color:#171924;
    font:500 12px/1 "Outfit",sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.tag-left span{
    display:block;
    margin-top:5px;
    color:rgba(21,23,34,.36);
    font-size:8px;
}

.tag-arrow{
    color:rgba(21,23,34,.28);
    flex:none;
}

.loading-block,
.empty{
    padding:50px 20px;
    border-radius:22px;
    border:1px dashed rgba(21,23,34,.10);
    text-align:center;
    background:rgba(255,255,255,.52);
    color:rgba(21,23,34,.42);
}

.empty strong,
.loading-block strong{
    display:block;
    color:#171924;
    font:500 17px/1 "Outfit";
    margin-bottom:8px;
}

.empty span,
.loading-block span{
    font-size:10px;
    line-height:1.5;
}

.loading-dots{
    display:inline-flex;
    gap:5px;
    margin-bottom:12px;
}

.loading-dots i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(21,23,34,.42);
    animation:pulse 1s ease-in-out infinite;
}

.loading-dots i:nth-child(2){
    animation-delay:.13s;
}

.loading-dots i:nth-child(3){
    animation-delay:.26s;
}

@keyframes pulse{
    50%{
        opacity:.25;
        transform:translateY(2px);
    }
}

/* =========================================================
   LOWER CARDS
========================================================= */
.lower-rail{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:11px;
    margin-top:12px;
}

.lower-card{
    min-height:145px;
    border-radius:24px;
    padding:18px;
    border:1px solid rgba(21,23,34,.06);
    background:rgba(255,255,255,.66);
    box-shadow:0 14px 35px rgba(45,38,75,.055);
    backdrop-filter:blur(18px);
}

.lower-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    color:rgba(21,23,34,.37);
    font-size:9px;
    letter-spacing:.05em;
}

.recent-searches{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.recent-pill{
    border:1px solid rgba(21,23,34,.07);
    background:rgba(255,255,255,.58);
    color:rgba(21,23,34,.52);
    padding:7px 9px;
    border-radius:999px;
    font-size:8px;
}

.recent-pill:hover{
    color:#151722;
    background:rgba(255,255,255,.88);
}

.explore-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
}

.explore-item{
    height:72px;
    border-radius:15px;
    background:rgba(255,255,255,.54);
    border:1px solid rgba(21,23,34,.07);
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(21,23,34,.56);
    font:600 9px/1 "DM Sans";
    cursor:pointer;
}

.discovery{
    display:flex;
    gap:11px;
    align-items:flex-start;
}

.discovery-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(21,23,34,.05);
    color:#5b6070;
    flex:none;
}

.discovery-copy strong{
    display:block;
    color:#171924;
    font:500 12px/1 "Outfit";
}

.discovery-copy span{
    display:block;
    margin-top:7px;
    color:rgba(21,23,34,.36);
    font-size:9px;
    line-height:1.55;
}

.footer{
    text-align:center;
    padding:0 0 28px;
    color:rgba(21,23,34,.24);
    font-size:8px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* =========================================================
   VIEWER
========================================================= */
.viewer{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(249,250,252,.90);
    backdrop-filter:blur(18px);
}

.viewer.open{
    display:flex;
}

.viewer img{
    max-width:min(94vw,1300px);
    max-height:88vh;
    border-radius:20px;
    box-shadow:0 40px 100px rgba(0,0,0,.24);
    object-fit:contain;
}

.viewer-close{
    position:absolute;
    top:24px;
    right:24px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(21,23,34,.10);
    background:rgba(255,255,255,.72);
    color:#151722;
    display:grid;
    place-items:center;
    font-size:20px;
}

.viewer-caption{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    padding:10px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(21,23,34,.08);
    font-size:10px;
    color:rgba(21,23,34,.66);
    white-space:nowrap;
    max-width:88vw;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =========================================================
   MOBILE BRAND / NAV
========================================================= */
.mobile-brand-header,
.mobile-nav{
    display:none;
}

@media(max-width:1050px){
    .image-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

    .featured-card{
        flex-basis:205px;
    }
}

@media(max-width:900px){
    :root{
        --sidebar:0px;
    }

    body{
        padding-left:0;
    }

    .charm-sidebar{
        display:none;
    }

    .topline{
        padding:0 20px;
    }

    .hero{
        padding-top:76px;
    }

    .lower-rail{
        grid-template-columns:1fr;
    }

    .lower-card{
        min-height:auto;
    }
}

@media(max-width:700px){
    .mobile-brand-header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:72px;
        display:flex;
        align-items:center;
        padding:10px 17px;
        z-index:9999;
        background:linear-gradient(180deg,rgba(255,255,255,.82),transparent);
        backdrop-filter:blur(3px);
    }

    .mobile-brand-link{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .mobile-brand-logo{
        width:39px;
        height:39px;
        border-radius:12px;
        overflow:hidden;
        background:#111;
    }

    .mobile-brand-logo img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .mobile-brand-name{
        display:flex;
        flex-direction:column;
        font:500 14px/1 "Outfit";
    }

    .mobile-brand-name small{
        margin-top:5px;
        color:rgba(21,23,34,.48);
        font:500 8px/1 "DM Sans";
        letter-spacing:.23em;
        text-transform:uppercase;
    }

    .mobile-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:9997;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:5px;
        padding:9px 9px calc(9px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.90);
        border-top:1px solid rgba(21,23,34,.08);
        backdrop-filter:blur(22px);
        box-shadow:0 -12px 28px rgba(45,38,75,.08);
    }

    .mobile-nav-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        min-height:49px;
        border-radius:15px;
        color:rgba(21,23,34,.52);
    }

    .mobile-nav-item.active{
        color:#151722;
        background:rgba(21,23,34,.06);
    }

    .mobile-nav-icon{
        width:21px;
        height:21px;
        display:grid;
        place-items:center;
    }

    .mobile-nav-icon svg{
        width:21px;
        height:21px;
    }

    .mobile-nav-label{
        font-size:9px;
        font-weight:700;
    }

    .mobile-nav-avatar{
        width:24px;
        height:24px;
        border-radius:50%;
        overflow:hidden;
        display:grid;
        place-items:center;
        background:#e8eaf0;
        color:#363947;
        font-size:8px;
        font-weight:800;
    }

    .mobile-nav-avatar img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .topline{
        display:none;
    }

    .search-page{
        padding-bottom:84px;
    }

    .hero{
        padding:107px 16px 28px;
    }

    .hero-title{
        font-size:44px;
    }

    .hero-copy{
        font-size:11px;
        max-width:450px;
    }

    .search-box{
        min-height:65px;
        border-radius:20px;
        padding-left:14px;
    }

    .search-input{
        font-size:15px;
    }

    .search-submit{
        width:43px;
        height:43px;
        border-radius:14px;
    }

    .search-shortcut{
        display:none;
    }

    .search-suggestions{
        margin-top:7px;
        border-radius:16px;
        padding:7px;
        max-height:52vh;
        overflow:auto;
    }

    .suggestion-item{
        min-height:44px;
    }

    .quick{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:2px;
        scrollbar-width:none;
    }

    .quick::-webkit-scrollbar{
        display:none;
    }

    .quick button{
        white-space:nowrap;
    }

    /* Users become one horizontal rail on mobile. */
    .user-strip{
        justify-content:flex-start;
        width:100%;
        overflow:hidden;
        margin-top:22px;
    }

    .user-strip-track{
        justify-content:flex-start;
        width:max-content;
        min-width:100%;
        overflow-x:auto;
        padding:0 8px 5px;
        gap:20px;
        scrollbar-width:none;
        scroll-snap-type:x proximity;
    }

    .user-strip-track::-webkit-scrollbar{
        display:none;
    }

    .mini-user{
        scroll-snap-align:center;
    }

    .content{
        padding:0 15px 40px;
    }

    .feature-top{
        align-items:flex-start;
    }

    /* Featured cards become a clean horizontal strip on mobile. */
    .featured-strip{
        margin-top:4px;
        margin-bottom:25px;
    }

    .featured-heading{
        margin-bottom:11px;
    }

    .featured-track{
        display:flex;
        gap:10px;
        overflow-x:auto;
        padding:2px 2px 7px;
        scrollbar-width:none;
        scroll-snap-type:x proximity;
    }

    .featured-track::-webkit-scrollbar{
        display:none;
    }

    .featured-card{
        flex:0 0 236px;
        min-height:104px;
        scroll-snap-align:start;
    }

    .image-grid{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .image-card{
        border-radius:15px;
    }

    .entity-grid,
    .tag-grid{
        grid-template-columns:1fr;
    }

    .tabs{
        width:100%;
        justify-content:space-between;
    }

    .tab{
        flex:1;
        padding:9px 5px;
    }
}

@media(max-width:420px){
    .hero-title{
        font-size:38px;
    }

    .hero-copy{
        font-size:10px;
    }

    .featured-card{
        flex-basis:220px;
    }

    .image-card{
        aspect-ratio:1.08;
    }

    .mini-user{
        width:68px;
        min-width:68px;
    }

    .mini-user-avatar{
        width:55px;
        height:55px;
    }
}