/* =========================================================
   WallpaperHub — Home (Responsive v3)
   يتكيّف مع: الهاتف الصغير · الهاتف · التابلت · اللابتوب · الشاشات الكبيرة
   الوضع الداكن عبر body.dark (إن وُجد في theme.css يبقى متوافقاً)
========================================================= */

/* ---------- المتغيرات ---------- */
:root{
    --primary: #5b5df5;
    --primary-dark: #4849df;
    --primary-soft: #eef0ff;
    --accent: #7d5fff;
    --bg: #ffffff;
    --surface: #f5f6fb;
    --card: #ffffff;
    --text: #171821;
    --ink: #172033;
    --muted: #7c8191;
    --line: #eceef4;
    --header-bg: rgba(255,255,255,.92);
    --shadow: 0 10px 30px rgba(33,38,70,.08);
    --radius: 24px;

    --gutter: 16px;
    --container: 1280px;
    --card-w: clamp(130px, 38vw, 160px);
    --header-h: 72px;
    --bottom-nav-h: 84px;
}

/* ---------- الوضع الداكن (احتياطي) ---------- */
body.dark{
    --bg: #0d0f16;
    --surface: #161a26;
    --card: #161a26;
    --text: #eef0f7;
    --ink: #eef0f7;
    --muted: #9aa1b5;
    --line: #262b3b;
    --header-bg: rgba(13,15,22,.9);
    --primary-soft: #1d2140;
}

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

html{
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

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

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

button{
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible{
    outline: 3px solid rgba(91,93,245,.5);
    outline-offset: 3px;
    border-radius: 12px;
}

/* =========================================================
   HEADER
========================================================= */
.header{
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-left, 0px)) 0 max(var(--gutter), env(safe-area-inset-right, 0px));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    direction: ltr;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.header .logo{
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    white-space: nowrap;
}

.header .logo-image{
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: contain;
}

.header .logo h2{
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.6px;
    color: var(--ink);
}

.header .logo h2 span{
    color: #6740f5;
}

.header .header-tools{
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    direction: ltr;
}

.header .header-tools > #notificationButton > *{
    max-width: 44px;
    max-height: 44px;
}

.header .header-switch{
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s ease;
}

.header .header-switch:hover{
    background: var(--surface);
}

.header .header-switch-icon{
    font-size: 24px;
    color: var(--ink);
    pointer-events: none;
}

.header .menu-btn,
.header #menuBtn{
    grid-column: 3;
    justify-self: end;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease;
}

.header #menuBtn:hover{
    background: var(--surface);
}

.header #menuBtn span{
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 4px;
    background: var(--ink);
}

/* =========================================================
   أقسام عامة
========================================================= */
.wall-section,
.categories-section,
.featured-section,
.weather-time-section,
.other-wallpapers-section{
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container);
    margin: 28px auto;
}

.title{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.title > div{
    min-width: 0;
}

.title h3{
    font-size: clamp(18px, 2.2vw, 24px);
    line-height: 1.25;
    font-weight: 900;
    color: var(--ink);
}

.title a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.section-kicker{
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    direction: ltr;
    text-align: right;
}

.weather-time-note{
    margin: -6px 0 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.weather-time-empty,
.other-wallpapers-loading,
.other-wallpapers-empty{
    width: 100%;
    padding: 18px;
    border-radius: 18px;
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   صف الخلفيات (أفقي قابل للتمرير على كل الأجهزة)
========================================================= */
.wall-grid{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.wall-grid::-webkit-scrollbar{
    display: none;
}

.wall-card{
    position: relative;
    flex: 0 0 auto;
    width: var(--card-w);
    aspect-ratio: 2 / 3;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface);
    box-shadow: none;
    scroll-snap-align: start;
    transition: transform .25s ease, box-shadow .25s ease;
}

.wall-card:hover{
    box-shadow: none;
}

.wall-card:active{
    transform: scale(.97);
}

.wall-card img,
.wall-card video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.wall-card:hover img{
    transform: scale(1.04);
}

.video-preview{
    position: relative;
    width: 100%;
    height: 100%;
}

.video-preview video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-icon{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 11px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

/* =========================================================
   الإعلان
========================================================= */
.ad-container{
    min-height: 110px;
    margin: 24px auto;
    padding: 0 var(--gutter);
    max-width: 100%;
    text-align: center;
    overflow: hidden;
}

/* =========================================================
   قسم تعديل الصور
========================================================= */
.photo-editor-feature{
    margin-bottom: 22px;
}

.photo-editor-card{
    position: relative;
    display: block;
    min-height: 150px;
    border-radius: 28px;
    overflow: hidden;
    color: #fff;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.photo-editor-card:hover{
    transform: translateY(-3px);
    box-shadow: none;
}

.photo-editor-card:active{
    transform: scale(.985);
}

.photo-editor-bg-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.photo-editor-card-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7,17,38,.78) 0%, rgba(7,17,38,.25) 70%);
}

.photo-editor-card-content{
    position: relative;
    z-index: 2;
    min-height: 150px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
}

.photo-editor-icon{
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.photo-editor-icon svg{
    width: 30px;
    height: 30px;
}

.photo-editor-card-text{
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.photo-editor-card-text span{
    color: #a8b2ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
    direction: ltr;
    text-align: right;
}

.photo-editor-card-text strong{
    font-size: clamp(17px, 2.4vw, 24px);
    font-weight: 900;
    line-height: 1.25;
}

.photo-editor-card-text small{
    overflow: hidden;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.photo-editor-arrow{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #2b2f6e;
    font-size: 22px;
    line-height: 1;
}

/* =========================================================
   قسم المجتمع
========================================================= */
.community-section{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container);
    margin: 32px auto;
    padding: clamp(22px, 4vw, 44px);
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 80%, rgba(113,68,255,.42), transparent 34%),
        radial-gradient(circle at 58% 20%, rgba(0,190,255,.2), transparent 32%),
        linear-gradient(135deg, #111b55 0%, #182c77 48%, #10193e 100%);
    box-shadow: none;
}

.community-section::before{
    content: "";
    position: absolute;
    z-index: -1;
    width: 230px;
    height: 90px;
    left: 28%;
    bottom: 30px;
    border-radius: 50%;
    background: rgba(107,54,255,.55);
    filter: blur(38px);
    transform: rotate(-18deg);
    pointer-events: none;
}

.community-motion-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .7;
    pointer-events: none;
}

.community-glow{
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(25px);
    opacity: .7;
    pointer-events: none;
}

.glow-one{
    width: 110px;
    height: 110px;
    top: -40px;
    right: 20px;
    background: rgba(124,92,255,.55);
}

.glow-two{
    width: 120px;
    height: 120px;
    bottom: -60px;
    left: 45%;
    background: rgba(0,175,255,.3);
}

.community-content{
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.community-label{
    display: block;
    margin-bottom: 8px;
    color: #9caaff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
    direction: ltr;
    text-align: right;
}

.community-content h2{
    margin-bottom: 10px;
    font-size: clamp(22px, 3.6vw, 34px);
    line-height: 1.3;
    font-weight: 800;
}

.community-content h2 strong{
    color: #fff;
    font-weight: 900;
}

.community-content p{
    max-width: 480px;
    margin-bottom: 18px;
    color: rgba(255,255,255,.76);
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 1.8;
}

.community-cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7651ff, #4b38ef);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(70,48,220,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.community-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(70,48,220,.45);
}

.community-cta span{
    font-size: 20px;
    line-height: 1;
}

.community-stats{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
}

.community-stat{
    min-width: 0;
    padding: 12px 6px 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.06);
}

.community-stat .material-icons{
    display: block;
    margin-bottom: 4px;
    font-size: 21px;
    color: #a8b2ff;
}

.community-stat:nth-child(3) .material-icons{
    color: #d7a2ff;
}

.community-stat:nth-child(4) .material-icons{
    color: #ff6d92;
}

.community-stat strong{
    display: block;
    font-size: clamp(14px, 2vw, 20px);
    line-height: 1.1;
}

.community-stat small{
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.62);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   Responsive — الهاتف الصغير (≤360)
========================================================= */
@media (max-width: 360px){
    :root{
        --gutter: 12px;
        --card-w: 124px;
    }

    .header .logo h2{
        font-size: 19px;
    }

    .title h3{
        font-size: 17px;
    }

    .photo-editor-card-content{
        padding: 16px;
        gap: 10px;
    }

    .photo-editor-icon{
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
}

/* =========================================================
   الهاتف (≥ 480)
========================================================= */
@media (min-width: 480px){
    :root{
        --card-w: clamp(140px, 36vw, 172px);
    }
}

/* =========================================================
   التابلت (≥ 768)
========================================================= */
@media (min-width: 768px){
    :root{
        --gutter: 28px;
        --header-h: 80px;
        --card-w: clamp(170px, 24vw, 200px);
        --bottom-nav-h: 0px;
    }

    .header{
        column-gap: 20px;
    }

    .header .logo-image{
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .header .logo h2{
        font-size: 26px;
    }

    .wall-section,
    .categories-section,
    .featured-section,
    .weather-time-section,
    .other-wallpapers-section{
        margin: 36px auto;
    }

    .wall-grid{
        gap: 16px;
        padding-bottom: 14px;
    }

    .photo-editor-card{
        min-height: 180px;
    }

    .photo-editor-card-content{
        min-height: 180px;
        padding: 30px;
        gap: 20px;
    }

    .photo-editor-icon{
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .photo-editor-icon svg{
        width: 36px;
        height: 36px;
    }

    .photo-editor-card-text small{
        white-space: normal;
    }
}

/* =========================================================
   اللابتوب (≥ 1024)
========================================================= */
@media (min-width: 1024px){
    :root{
        --gutter: 40px;
        --header-h: 84px;
        --card-w: clamp(190px, 16vw, 230px);
    }

    body{
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .header{
        padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + 20px));
    }

    .header .logo-image{
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .header .logo h2{
        font-size: 28px;
    }

    .header .header-tools{
        gap: 14px;
    }

    .header .header-switch,
    .header #menuBtn{
        width: 48px;
        height: 48px;
    }

    .wall-card{
        transition: transform .3s ease, box-shadow .3s ease;
    }

    .wall-card:hover{
        transform: translateY(-4px);
    }

    .wall-card:active{
        transform: translateY(-2px) scale(.98);
    }

    /* الشريط يظهر بشكل خفيف للفأرة */
    .wall-grid{
        padding-bottom: 16px;
    }

    .community-section{
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        gap: 36px;
        padding: 48px 56px;
    }

    .community-stats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 0;
    }

    .community-stat{
        padding: 22px 14px 18px;
        border-radius: 20px;
    }

    .community-stat .material-icons{
        font-size: 28px;
        margin-bottom: 8px;
    }

    .community-stat small{
        font-size: 12px;
    }

    .photo-editor-card{
        min-height: 200px;
    }

    .photo-editor-card-content{
        min-height: 200px;
        padding: 36px 40px;
    }
}

/* =========================================================
   الشاشات الكبيرة (≥ 1440)
========================================================= */
@media (min-width: 1440px){
    :root{
        --card-w: 236px;
    }
}

/* =========================================================
   الأجهزة اللمسية وفأرة الكمبيوتر
========================================================= */
@media (hover: hover) and (pointer: fine){
    .wall-grid{
        scrollbar-width: thin;
        scrollbar-color: #cdd2df transparent;
    }

    .wall-grid::-webkit-scrollbar{
        display: block;
        height: 6px;
    }

    .wall-grid::-webkit-scrollbar-thumb{
        background: #cdd2df;
        border-radius: 6px;
    }
}

/* =========================================================
   الهاتف بالوضع الأفقي
========================================================= */
@media (max-height: 500px) and (orientation: landscape){
    :root{
        --header-h: 60px;
    }

    .header .logo h2{
        font-size: 18px;
    }

    .header .logo-image{
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .header .header-switch,
    .header #menuBtn{
        width: 40px;
        height: 40px;
    }

    .community-section{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        align-items: center;
    }

    .community-stats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }
}

/* =========================================================
   تقليل الحركة لمن يفضّلها
========================================================= */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   إبداعات المجتمع — CTA SVG + horizontal creation lanes
========================================================= */
.community-creations-cta{
    position:relative;
    isolation:isolate;
    display:block;
    min-height:154px;
    margin:0 0 24px;
    overflow:hidden;
    border-radius:28px;
    color:#fff;
    background:#17204e;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(33,28,89,.12);
    transition:transform .22s ease,box-shadow .22s ease;
}
.community-creations-cta:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(33,28,89,.18)}
.community-creations-cta:active{transform:scale(.988)}
.community-creations-cta-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block}
.community-creations-cta-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,16,43,.68),rgba(9,16,43,.08) 72%)}
.community-creations-cta-content{position:relative;z-index:1;min-height:154px;display:flex;align-items:center;gap:14px;padding:22px}
.community-creations-cta-icon{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:18px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.community-creations-cta-icon svg{width:32px;height:32px}
.community-creations-cta-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.community-creations-cta-text small{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#b9c2ff;direction:ltr;text-align:right}
.community-creations-cta-text strong{font-size:clamp(18px,2.5vw,25px);font-weight:900;line-height:1.25}
.community-creations-cta-text>span{font-size:11px;color:rgba(255,255,255,.75);line-height:1.7}
.community-creations-cta-arrow{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:50%;color:#232b63;background:#fff;font-size:23px;transition:transform .2s ease}
.community-creations-cta:hover .community-creations-cta-arrow{transform:translateX(-4px)}
.community-creations-section{width:calc(100% - 2 * var(--gutter));max-width:var(--container);margin:28px auto 36px;scroll-margin-top:24px}
.community-creations-heading{align-items:center}
.community-creations-heading p{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.7}
.community-creation-lane{margin-top:22px}
.community-creation-lane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.community-creation-lane-head h4{font-size:15px;font-weight:900;color:var(--ink)}
.community-creation-lane-head>span{color:var(--muted);font-size:10px;font-weight:700}
.community-creation-rail{display:flex;gap:13px;overflow-x:auto;overflow-y:hidden;padding:2px 0 12px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.community-creation-rail::-webkit-scrollbar{display:none}
.community-creation-card{position:relative;display:block;flex:0 0 clamp(145px,38vw,205px);aspect-ratio:3/4.35;overflow:hidden;border-radius:22px;background:linear-gradient(145deg,#151b45,#6f54bd,#d77eb1);scroll-snap-align:start;text-decoration:none;color:#fff;isolation:isolate}
.community-creation-card img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.community-creation-card:after{content:"";position:absolute;inset:30% 0 0;z-index:0;background:linear-gradient(180deg,transparent,rgba(9,11,29,.78))}
.community-creation-card:hover img{transform:scale(1.045)}
.community-creation-card-meta{position:absolute;z-index:1;inset:auto 0 0;padding:13px 12px 12px;display:flex;flex-direction:column;gap:4px}
.community-creation-card-meta strong{font-size:11px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-creation-card-meta small{font-size:9px;color:rgba(255,255,255,.76)}
.community-creation-state{min-width:100%;padding:20px 15px;border:1px dashed rgba(125,112,188,.2);border-radius:15px;color:var(--muted);font-size:11px;text-align:center;background:rgba(125,112,188,.035)}
@media(min-width:768px){
 .community-creations-cta{min-height:190px}
 .community-creations-cta-content{min-height:190px;padding:30px 36px;gap:19px}
 .community-creations-cta-icon{width:68px;height:68px;flex-basis:68px}
 .community-creation-lane{margin-top:26px}
 .community-creation-rail{gap:16px}
 .community-creation-card{flex-basis:210px;border-radius:24px}
}
@media(max-width:420px){
 .community-creations-cta{min-height:142px;border-radius:23px}
 .community-creations-cta-content{min-height:142px;padding:17px;gap:10px}
 .community-creations-cta-icon{width:48px;height:48px;flex-basis:48px;border-radius:15px}
 .community-creations-cta-icon svg{width:27px;height:27px}
 .community-creations-cta-text small{font-size:8px}
 .community-creations-cta-text strong{font-size:18px}
 .community-creations-cta-text>span{font-size:9px}
 .community-creations-cta-arrow{width:38px;height:38px;flex-basis:38px;font-size:20px}
 .community-creation-lane-head h4{font-size:14px}
 .community-creation-card{flex-basis:clamp(135px,43vw,170px);border-radius:18px}
}
@media(prefers-reduced-motion:reduce){.community-creations-cta,.community-creation-card img,.community-creations-cta-arrow{transition:none}}

.community-creation-pack{display:inline-flex;width:max-content;max-width:100%;padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.18);color:#fff;font-size:8px}
.community-creation-card{text-decoration:none}


/* =========================================================
   WallpaperHub — light SVG page atmosphere
   خلفية زخرفية خفيفة للرئيسية، بدون صور خارجية أو JavaScript.
========================================================= */
body{
    background-color:var(--bg);
    background-image:
        radial-gradient(ellipse at 92% 4%, rgba(126,102,232,.075), transparent 34%),
        radial-gradient(ellipse at 4% 42%, rgba(48,184,197,.045), transparent 30%),
        url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201400%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%238067e8%22%20stroke-opacity%3D%22.105%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M-120%20190C80%2020%20190%20340%20390%20165S700%2015%201030%20170%22%2F%3E%3Cpath%20d%3D%22M-150%20230C70%2065%20205%20385%20415%20210S735%2065%201060%20215%22%2F%3E%3Cpath%20d%3D%22M-130%20890C70%20730%20210%201040%20430%20865S750%20735%201040%20900%22%2F%3E%3Cpath%20d%3D%22M-170%20930C65%20775%20235%201080%20450%20910S770%20780%201080%20940%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22370%22%20r%3D%22118%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22370%22%20r%3D%22158%22%2F%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%221110%22%20r%3D%22105%22%2F%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%221110%22%20r%3D%22145%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238067e8%22%20fill-opacity%3D%22.16%22%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%22120%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22155%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22790%22%20cy%3D%22250%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22835%22%20cy%3D%22310%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22780%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22125%22%20cy%3D%22825%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22790%22%20cy%3D%221040%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22840%22%20cy%3D%221100%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2328b8c8%22%20fill-opacity%3D%22.09%22%3E%3Ccircle%20cx%3D%22830%22%20cy%3D%22720%22%20r%3D%2290%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22440%22%20r%3D%2270%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position:center top, left 42%, center top;
    background-size:auto, auto, 100% 100%;
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-attachment:fixed,fixed,fixed;
}
body.dark{
    background-image:
        radial-gradient(ellipse at 92% 4%, rgba(126,102,232,.12), transparent 34%),
        radial-gradient(ellipse at 4% 42%, rgba(48,184,197,.055), transparent 30%),
        url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201400%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%238067e8%22%20stroke-opacity%3D%22.105%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M-120%20190C80%2020%20190%20340%20390%20165S700%2015%201030%20170%22%2F%3E%3Cpath%20d%3D%22M-150%20230C70%2065%20205%20385%20415%20210S735%2065%201060%20215%22%2F%3E%3Cpath%20d%3D%22M-130%20890C70%20730%20210%201040%20430%20865S750%20735%201040%20900%22%2F%3E%3Cpath%20d%3D%22M-170%20930C65%20775%20235%201080%20450%20910S770%20780%201080%20940%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22370%22%20r%3D%22118%22%2F%3E%3Ccircle%20cx%3D%22720%22%20cy%3D%22370%22%20r%3D%22158%22%2F%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%221110%22%20r%3D%22105%22%2F%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%221110%22%20r%3D%22145%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238067e8%22%20fill-opacity%3D%22.16%22%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%22120%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22155%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22790%22%20cy%3D%22250%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22835%22%20cy%3D%22310%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22780%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22125%22%20cy%3D%22825%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22790%22%20cy%3D%221040%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22840%22%20cy%3D%221100%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%2328b8c8%22%20fill-opacity%3D%22.09%22%3E%3Ccircle%20cx%3D%22830%22%20cy%3D%22720%22%20r%3D%2290%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22440%22%20r%3D%2270%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@media(max-width:600px){
    body{
        background-size:auto,auto,100% 100%;
        background-attachment:scroll,scroll,scroll;
    }
}