/* =========================================================
   WallpaperHub — Banners Section (Today & AI)
========================================================= */

.today-section {
    margin-top: 32px;
    width: 100%;
}

/* شبكة البطاقتين جنباً إلى جنب */
.banners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

/* تصميم بطاقة خلفية اليوم */
.today-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1b172a 0%, #121019 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 20px;
    gap: 15px;
    overflow: hidden;
}

.today-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.today-badge-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.today-icon {
    font-size: 14px;
}

.today-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.today-content h2 {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
}

.today-content p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    line-height: 1.4;
}

.today-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #111111;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    width: fit-content;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease;
}

.today-btn:active {
    transform: scale(0.95);
}

.today-image-wrapper {
    width: 42%;
    height: 130px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.today-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.today-card:hover .today-image-wrapper img {
    transform: scale(1.05);
}


/* =========================================================
   تصميم بطاقة الذكاء الاصطناعي (AI Card) المطابقة للصورة
========================================================= */

.ai-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #23153c 0%, #120e1c 100%);
    border: 1px solid rgba(169, 72, 255, 0.2);
    border-radius: 28px;
    padding: 20px;
    gap: 15px;
    overflow: hidden;
}

.ai-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.ai-badge-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.ai-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.ai-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 14px;
    line-height: 1.4;
}

/* زر جرب الآن بتدرج بنفسجي مميز */
.ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    width: fit-content;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ai-btn:active {
    transform: scale(0.95);
}

/* حاوية الصور المتداخلة للذكاء الاصطناعي */
.ai-visual-wrapper {
    width: 40%;
    height: 130px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-floating-cards {
    position: relative;
    width: 100%;
    height: 100%;
}

.mini-floating-card {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
}

.card-back-2 {
    width: 50px;
    height: 65px;
    background: #4c1d95;
    top: 5px;
    left: 5px;
    transform: rotate(-12deg);
    opacity: 0.6;
}

.card-back-1 {
    width: 60px;
    height: 75px;
    background: #6d28d9;
    top: 15px;
    left: 22px;
    transform: rotate(-6deg);
    opacity: 0.85;
}

.card-main {
    width: 75px;
    height: 95px;
    top: 10px;
    right: 10px;
    transform: rotate(6deg);
    z-index: 3;
}

.card-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   التجاوب مع الهواتف المحمولة (تصبح البطاقات فوق بعضها عمودياً)
========================================================= */
@media (max-width: 768px) {
    .banners-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .today-card, .ai-card {
        padding: 16px;
        border-radius: 22px;
    }

    .today-content h2, .ai-title {
        font-size: 16px;
    }

    .today-content p, .ai-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .today-btn, .ai-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .today-image-wrapper, .ai-visual-wrapper {
        width: 38%;
        height: 110px;
    }
}


/* =========================================================
   V2 — Full Background Cards
   الصورة تصبح جزءاً من البطاقة وليس مربعاً منفصلاً
========================================================= */

/* ---------- خلفية اليوم ---------- */
.today-card{
    min-height: 180px;
    padding: 22px;
    border-radius: 28px;
    isolation: isolate;
    background: #101016;
    overflow: hidden;
}

/* الصورة تملأ البطاقة بالكامل */
.today-image-wrapper{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -2;
    box-shadow: none;
}

.today-image-wrapper::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(8,7,14,.92) 0%,
            rgba(10,9,16,.70) 38%,
            rgba(10,9,16,.20) 72%,
            rgba(10,9,16,.05) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.38),
            transparent 55%
        );
}

.today-image-wrapper img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .6s ease, filter .4s ease;
    filter: saturate(1.08) contrast(1.06);
}

.today-card:hover .today-image-wrapper img{
    transform: scale(1.07);
}

/* المحتوى فوق الصورة */
.today-content{
    position: relative;
    z-index: 4;
    width: 58%;
    min-height: 136px;
    justify-content: center;
    text-align: right;
    margin-left: auto;
    align-items: flex-start;
}

.today-badge-wrapper{
    margin-bottom: 7px;
}

.today-label{
    font-size: 13px;
    text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.today-content h2{
    margin: 0 0 4px;
    text-shadow: 0 3px 14px rgba(0,0,0,.65);
}

.today-content p{
    margin: 0 0 14px;
    text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

.today-btn{
    box-shadow:
        0 8px 22px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---------- بطاقة الذكاء الاصطناعي ---------- */
.ai-card{
    min-height: 180px;
    padding: 22px;
    border-radius: 28px;
    isolation: isolate;
    overflow: hidden;
    background: #160d28;
    border: 1px solid rgba(190,120,255,.28);
}

/* صورة AI تملأ البطاقة */
.ai-visual-wrapper{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    display: block;
}

.ai-visual-wrapper::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background:
        linear-gradient(
            90deg,
            rgba(20,8,38,.96) 0%,
            rgba(29,10,51,.78) 40%,
            rgba(55,17,91,.30) 75%,
            rgba(50,10,80,.12) 100%
        ),
        linear-gradient(
            135deg,
            rgba(124,58,237,.38),
            transparent 55%
        );
}

.ai-visual-wrapper::after{
    content: "✦  AI";
    position: absolute;
    right: 18px;
    top: 15px;
    z-index: 6;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    background: rgba(125,58,237,.72);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        0 8px 25px rgba(124,58,237,.38),
        inset 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* استعمل الصورة الموجودة أصلاً كخلفية */
.ai-floating-cards{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ai-floating-cards .card-main{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    transform: none;
    box-shadow: none;
}

.ai-floating-cards .card-main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.18) contrast(1.08);
}

/* نلغي البطاقات الصغيرة القديمة */
.ai-floating-cards .card-back-1,
.ai-floating-cards .card-back-2{
    display: none;
}

/* المحتوى فوق خلفية AI */
.ai-content{
    position: relative;
    z-index: 7;
    width: 62%;
    min-height: 136px;
    justify-content: center;
    text-align: right;
    margin-left: auto;
    align-items: flex-start;
}

.ai-title{
    text-shadow: 0 3px 14px rgba(0,0,0,.7);
}

.ai-desc{
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.ai-btn{
    box-shadow:
        0 9px 25px rgba(124,58,237,.45),
        inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- الهاتف ---------- */
@media (max-width: 768px){

    .today-card,
    .ai-card{
        min-height: 180px;
        padding: 18px;
        border-radius: 24px;
    }

    .today-content,
    .ai-content{
        width: 61%;
        min-height: 140px;
    }

    .today-content h2,
    .ai-title{
        font-size: 17px;
    }

    .today-content p,
    .ai-desc{
        font-size: 11px;
    }

    .today-image-wrapper::after{
        background:
            linear-gradient(
                90deg,
                rgba(8,7,14,.94) 0%,
                rgba(10,9,16,.66) 50%,
                rgba(10,9,16,.12) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0,0,0,.45),
                transparent 60%
            );
    }

    .ai-visual-wrapper::before{
        background:
            linear-gradient(
                90deg,
                rgba(20,8,38,.95) 0%,
                rgba(29,10,51,.72) 52%,
                rgba(55,17,91,.18) 100%
            ),
            linear-gradient(
                135deg,
                rgba(124,58,237,.42),
                transparent 60%
            );
    }

    .ai-visual-wrapper::after{
        right: 14px;
        top: 12px;
        padding: 6px 9px;
        font-size: 10px;
    }
}



/* =========================================================
   V3 — HIGH VISIBILITY / PREMIUM LIGHTING
   خلفية اليوم + بطاقة AI
   ========================================================= */

/* ---------- خلفية اليوم: إضاءة قوية مع بقاء الصورة واضحة ---------- */
.today-card {
    min-height: 205px !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.10) inset,
        0 0 35px rgba(255,255,255,.08) !important;
}

.today-image-wrapper::after {
    background:
        linear-gradient(
            90deg,
            rgba(5,5,10,.72) 0%,
            rgba(7,7,13,.38) 34%,
            rgba(7,7,13,.08) 68%,
            rgba(7,7,13,.02) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(0,0,0,.12) 100%
        ) !important;
}

.today-image-wrapper img {
    filter:
        brightness(1.18)
        saturate(1.18)
        contrast(1.03) !important;
}

.today-content {
    width: 63% !important;
    min-height: 155px !important;
}

.today-label,
.today-content h2,
.today-content p {
    text-shadow:
        0 2px 5px rgba(0,0,0,.85),
        0 0 16px rgba(255,255,255,.20) !important;
}

.today-badge-wrapper {
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.34) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow:
        0 6px 20px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.today-icon {
    filter: drop-shadow(0 0 8px rgba(140,255,190,.75));
}

.today-btn {
    background: rgba(255,255,255,.96) !important;
    color: #17131d !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow:
        0 8px 25px rgba(0,0,0,.30),
        0 0 18px rgba(255,255,255,.28),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ---------- AI: وضوح أعلى + إضاءة بنفسجية/زرقاء قوية ---------- */
.ai-card {
    min-height: 205px !important;
    background:
        radial-gradient(circle at 15% 85%, rgba(0,170,255,.42), transparent 38%),
        radial-gradient(circle at 88% 15%, rgba(210,70,255,.52), transparent 40%),
        linear-gradient(135deg, #120a26 0%, #351078 48%, #6d16d8 100%) !important;
    border: 1px solid rgba(210,145,255,.62) !important;
    box-shadow:
        0 18px 50px rgba(91,25,190,.35),
        0 0 35px rgba(168,85,247,.30),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ضوء ناعم متحرك خلف بطاقة AI */
.ai-card::before {
    content: "";
    position: absolute;
    inset: -35%;
    background:
        radial-gradient(circle, rgba(255,255,255,.18) 0 2%, transparent 3%),
        radial-gradient(circle at 70% 30%, rgba(0,220,255,.22), transparent 28%),
        radial-gradient(circle at 25% 80%, rgba(255,70,220,.20), transparent 30%);
    background-size: 90px 90px, auto, auto;
    filter: blur(3px);
    animation: aiLightDrift 8s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}

@keyframes aiLightDrift {
    from { transform: translate3d(-2%, 1%, 0) scale(1); }
    to   { transform: translate3d(3%, -2%, 0) scale(1.05); }
}

.ai-visual-wrapper::before {
    background:
        linear-gradient(
            90deg,
            rgba(10,4,24,.78) 0%,
            rgba(32,8,65,.34) 42%,
            rgba(95,25,170,.08) 100%
        ),
        linear-gradient(
            135deg,
            rgba(170,70,255,.32),
            rgba(0,190,255,.16) 52%,
            transparent 80%
        ) !important;
}

.ai-visual-wrapper::after {
    right: 16px !important;
    top: 14px !important;
    padding: 8px 13px !important;
    font-size: 11px !important;
    background: linear-gradient(135deg, rgba(139,70,255,.95), rgba(0,174,255,.82)) !important;
    border: 1px solid rgba(255,255,255,.48) !important;
    box-shadow:
        0 7px 25px rgba(105,45,255,.48),
        0 0 18px rgba(0,190,255,.25),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.ai-content {
    width: 65% !important;
    min-height: 155px !important;
}

.ai-badge-wrapper {
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(10,3,25,.38) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    box-shadow:
        0 7px 22px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.ai-badge-icon {
    width: 30px !important;
    height: 30px !important;
    background: linear-gradient(135deg, #b34cff, #675cff 52%, #00c8ff) !important;
    box-shadow:
        0 0 15px rgba(174,76,255,.75),
        0 0 25px rgba(0,195,255,.25) !important;
}

.ai-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
    color: #fff !important;
    text-shadow:
        0 3px 8px rgba(0,0,0,.80),
        0 0 18px rgba(255,255,255,.20) !important;
}

.ai-desc {
    color: rgba(255,255,255,.92) !important;
    text-shadow:
        0 2px 7px rgba(0,0,0,.85),
        0 0 12px rgba(255,255,255,.12) !important;
}

.ai-btn {
    background: linear-gradient(135deg, #9b4dff 0%, #713cff 45%, #148cff 100%) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow:
        0 10px 28px rgba(104,43,255,.48),
        0 0 20px rgba(0,180,255,.20),
        inset 0 1px 0 rgba(255,255,255,.40) !important;
}

.ai-floating-cards .card-main img {
    filter:
        brightness(1.12)
        saturate(1.25)
        contrast(1.05) !important;
}

/* ---------- الهاتف ---------- */
@media (max-width: 768px) {
    .today-card,
    .ai-card {
        min-height: 205px !important;
        border-radius: 25px !important;
    }

    .today-content,
    .ai-content {
        width: 66% !important;
        min-height: 165px !important;
    }

    .today-content h2,
    .ai-title {
        font-size: 17px !important;
    }

    .today-content p,
    .ai-desc {
        font-size: 11.5px !important;
    }

    .today-image-wrapper img,
    .ai-floating-cards .card-main img {
        filter:
            brightness(1.20)
            saturate(1.20)
            contrast(1.03) !important;
    }
}



/* =========================================================
   AI FAB — نفس كود ai-fab.css الأصلي، مدمج داخل Today
   لا يوجد زر جديد: هذا هو #aiFab نفسه
========================================================= */
/* =====================================
      WallpaperHub AI FAB
====================================== */

.ai-fab{

position:fixed;

right:20px;

bottom:92px;

width:50px;

height:50px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(18,18,28,.82);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

box-shadow:

0 8px 35px rgba(0,0,0,.25),

0 0 18px rgba(0,255,255,.18);

cursor:pointer;

overflow:hidden;

z-index:99999;

transition:.35s;

}

.ai-fab:hover{

transform:scale(1.08);

}

.ai-fab:active{

transform:scale(.94);

}

#aiCanvas{

width:55px;

height:55px;

display:block;

filter:

drop-shadow(0 0 12px rgba(0,255,255,.6))

drop-shadow(0 0 24px rgba(125,80,255,.55));

}

.ai-fab::before{

content:"";

position:absolute;

width:140%;

height:140%;

background:radial-gradient(circle,

rgba(255,255,255,.20),

transparent 65%);

opacity:.25;

animation:fabPulse 3s ease-in-out infinite;

pointer-events:none;

}

@keyframes fabPulse{

0%{

transform:scale(.85);

opacity:.15;

}

50%{

transform:scale(1.2);

opacity:.45;

}

100%{

transform:scale(.85);

opacity:.15;

}

}

/* ===== AI داخل Header ===== */

.ai-header-fab{
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    border-radius: 50% !important;
    background: #292b31 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
    cursor: pointer;
}

/* Canvas ديال الأنيميشن */
.ai-header-fab #aiCanvas{
    position: absolute !important;
    width: 58px !important;
    height: 58px !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    z-index: 1 !important;
    pointer-events: none;
}

/* الروبوت */
.ai-header-fab .ai-robot{
    position: relative !important;
    z-index: 2 !important;

    font-size: 25px !important;
    line-height: 1 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* AI Robot داخل الهيدر */
.ai-header-btn {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: 50%;

    margin-left: 2px;
    margin-right: -4px;

    cursor: pointer;
    flex-shrink: 0;
}

.ai-header-btn span {
    font-size: 30px;
    line-height: 1;
}

/* موقع AI FAB داخل بطاقة Today */
.ai-card{
    position: relative;
}

.ai-card > .ai-fab{
    position: absolute;
    right: 22px;
    top: 22px;
    bottom: auto;
    width: 72px;
    height: 72px;
    z-index: 20;
}

.ai-card > .ai-fab #aiCanvas{
    width: 76px;
    height: 76px;
}

/* حتى لا تتداخل بطاقة المحتوى مع الـ FAB */
.ai-card > .ai-content{
    padding-right: 92px;
}

/* الهاتف */
@media (max-width: 768px){
    .ai-card > .ai-fab{
        right: 16px;
        top: 16px;
        width: 68px;
        height: 68px;
    }

    .ai-card > .ai-fab #aiCanvas{
        width: 72px;
        height: 72px;
    }

    .ai-card > .ai-content{
        padding-right: 82px;
    }
}


/* =========================================================
   WALLPAPERHUB AI ORB — SIRI-STYLE ORIGINAL MOTION
   نفس #aiFab، بدون زر إضافي
========================================================= */
.ai-card > .ai-fab{
    position:absolute !important;
    left:22px !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
    min-height:82px !important;
    transform:translateY(-50%) !important;
    border-radius:50% !important;
    overflow:visible !important;
    z-index:30 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    background:
        radial-gradient(circle at 35% 30%,
            rgba(255,255,255,.24) 0 5%,
            rgba(92,235,255,.18) 18%,
            rgba(64,24,120,.42) 48%,
            rgba(10,8,28,.92) 78%) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:
        0 0 14px rgba(0,210,255,.30),
        0 0 32px rgba(126,70,255,.38),
        inset 0 0 18px rgba(255,255,255,.08) !important;
    transition:transform .22s ease, box-shadow .35s ease !important;
}
.ai-card > .ai-fab:hover{
    transform:translateY(-50%) scale(1.07) !important;
}
.ai-card > .ai-fab:active{
    transform:translateY(-50%) scale(.91) !important;
}
.ai-card > .ai-fab::before{
    content:"" !important;
    position:absolute !important;
    inset:-7px !important;
    border-radius:50% !important;
    background:
        conic-gradient(from 0deg,
            rgba(0,229,255,0),
            rgba(0,229,255,.65),
            rgba(166,82,255,.72),
            rgba(255,72,170,.42),
            rgba(0,229,255,0)) !important;
    filter:blur(5px) !important;
    opacity:.72 !important;
    animation:aiOrbHalo 2.8s linear infinite !important;
    pointer-events:none !important;
}
.ai-card > .ai-fab::after{
    content:"" !important;
    position:absolute !important;
    inset:-13px !important;
    border-radius:50% !important;
    border:1px solid rgba(111,225,255,.18) !important;
    box-shadow:0 0 22px rgba(90,95,255,.20) !important;
    animation:aiOrbBreath 2.6s ease-in-out infinite !important;
    pointer-events:none !important;
}
.ai-card > .ai-fab #aiCanvas{
    width:92px !important;
    height:92px !important;
    display:block !important;
    pointer-events:none !important;
    filter:
        drop-shadow(0 0 7px rgba(0,229,255,.85))
        drop-shadow(0 0 17px rgba(140,65,255,.72)) !important;
}
@keyframes aiOrbHalo{
    to{transform:rotate(360deg);}
}
@keyframes aiOrbBreath{
    0%,100%{transform:scale(.92);opacity:.35;}
    50%{transform:scale(1.10);opacity:.85;}
}
@media(max-width:768px){
    .ai-card > .ai-fab{
        left:20px !important;
        width:78px !important;
        height:78px !important;
        min-width:78px !important;
        min-height:78px !important;
    }
    .ai-card > .ai-fab #aiCanvas{
        width:88px !important;
        height:88px !important;
    }
}

/* AI CARD — compact premium refinement */
.ai-card{
    position:relative !important;
    min-height:205px !important;
    padding:20px 18px !important;
    display:block !important;
}
.ai-card > .ai-content{
    position:relative !important;
    z-index:12 !important;
    width:67% !important;
    min-height:165px !important;
    margin-left:auto !important;
    margin-right:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:right !important;
}
.ai-card .ai-badge-wrapper{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    align-self:flex-start !important;
    gap:7px !important;
    padding:5px 9px !important;
    margin:0 0 7px !important;
    border-radius:999px !important;
}
.ai-card .ai-badge-icon{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
    font-size:10px !important;
}
.ai-card .ai-title{
    display:block !important;
    max-width:155px !important;
    font-size:15px !important;
    line-height:1.28 !important;
    font-weight:800 !important;
}
.ai-card .ai-desc{
    max-width:175px !important;
    margin:0 0 11px !important;
    font-size:10.5px !important;
    line-height:1.45 !important;
}
.ai-card .ai-btn{
    padding:7px 15px !important;
    min-height:34px !important;
    font-size:11.5px !important;
    gap:6px !important;
}
.ai-card > .ai-fab{
    left:18px !important;
    top:50% !important;
    width:74px !important;
    height:74px !important;
    min-width:74px !important;
    min-height:74px !important;
    transform:translateY(-50%) !important;
}
.ai-card > .ai-fab #aiCanvas{
    width:84px !important;
    height:84px !important;
}
.ai-card .ai-visual-wrapper::after{
    right:13px !important;
    top:11px !important;
    padding:5px 9px !important;
    font-size:10px !important;
}
@media (max-width:768px){
    .ai-card{
        min-height:205px !important;
        padding:18px !important;
        border-radius:25px !important;
    }
    .ai-card > .ai-content{
        width:69% !important;
        min-height:169px !important;
    }
    .ai-card .ai-badge-wrapper{
        padding:4px 8px !important;
        gap:6px !important;
        margin-bottom:6px !important;
    }
    .ai-card .ai-badge-icon{
        width:24px !important;
        height:24px !important;
        min-width:24px !important;
        min-height:24px !important;
        font-size:9px !important;
    }
    .ai-card .ai-title{
        max-width:145px !important;
        font-size:14.5px !important;
        line-height:1.3 !important;
    }
    .ai-card .ai-desc{
        max-width:165px !important;
        font-size:10px !important;
        line-height:1.4 !important;
        margin-bottom:10px !important;
    }
    .ai-card .ai-btn{
        padding:6px 14px !important;
        min-height:32px !important;
        font-size:11px !important;
    }
    .ai-card > .ai-fab{
        left:17px !important;
        top:50% !important;
        width:70px !important;
        height:70px !important;
        min-width:70px !important;
        min-height:70px !important;
    }
    .ai-card > .ai-fab #aiCanvas{
        width:80px !important;
        height:80px !important;
    }
    .ai-card .ai-visual-wrapper::after{
        right:12px !important;
        top:11px !important;
        padding:5px 8px !important;
        font-size:9.5px !important;
    }
}
@media (max-width:380px){
    .ai-card{min-height:198px !important;}
    .ai-card > .ai-content{width:70% !important;}
    .ai-card .ai-title{max-width:136px !important;font-size:14px !important;}
    .ai-card .ai-desc{max-width:150px !important;font-size:9.5px !important;}
    .ai-card > .ai-fab{
        left:14px !important;
        width:66px !important;
        height:66px !important;
        min-width:66px !important;
        min-height:66px !important;
    }
    .ai-card > .ai-fab #aiCanvas{width:76px !important;height:76px !important;}
}


/* Dynamic Today Wallpaper — compact weather preference control */
.today-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.today-weather-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(12,12,18,.38);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.today-weather-btn:hover,
.today-weather-btn[aria-pressed="true"] {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.58);
}
.today-weather-btn:active { transform: scale(.97); }
.today-weather-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
@media (max-width: 380px) {
    .today-actions { gap: 6px; }
    .today-weather-btn { padding: 7px 9px; font-size: 10px; }
}