:root {
    --primary-font: 'Poppins', sans-serif;
}

body {
    font-family: var(--primary-font);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    
    /* BACKGROUND အသစ်: အဖြူရောင်အောက်ခံမှာ Pastel အရောင်လေးတွေ ဝါးထားခြင်း */
    background-color: #ffffff;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, transparent 50%), 
        radial-gradient(at 80% 0%, hsla(189,100%,96%,1) 0px, transparent 50%), /* အပြာနု */
        radial-gradient(at 0% 50%, hsla(341,100%,96%,1) 0px, transparent 50%), /* ပန်းရောင်နု */
        radial-gradient(at 80% 50%, hsla(130,100%,96%,1) 0px, transparent 50%), /* အစိမ်းနု */
        radial-gradient(at 0% 100%, hsla(189,100%,96%,1) 0px, transparent 50%), /* အပြာနု */
        radial-gradient(at 80% 100%, hsla(341,100%,96%,1) 0px, transparent 50%), /* ပန်းရောင်နု */
        radial-gradient(at 0% 0%, hsla(341,100%,96%,1) 0px, transparent 50%); /* ပန်းရောင်နု */
    background-attachment: fixed;
    background-size: cover;
}

/* Search Bar - Compact & Sleek Design */
.search-wrapper {
    margin-top: 30px;
    width: 85%; /* အကျယ်ကို နည်းနည်းလျှော့လိုက်တယ် */
    max-width: 480px; /* အများဆုံးအကျယ်ကို 600px ကနေ 480px ထိ လျှော့ချလိုက်တယ် */
    position: relative;
    z-index: 10;
}

.search-wrapper input {
    width: 100%;
    /* အပေါ်အောက် Padding ကို 18px ကနေ 12px ထိ လျှော့ချလိုက်တယ် (ဒါမှ ပါးပါးလေးဖြစ်မယ်) */
    padding: 12px 20px 12px 45px; 
    
    border-radius: 50px; /* ပိုဝိုင်းသွားအောင် လုပ်လိုက်တယ် */
    border: 2px solid #e36679; 
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); /* အရိပ်ကို နည်းနည်းလျှော့ထားတယ် */
    
    outline: none;
    font-size: 14px; /* စာလုံးဆိုဒ်ကိုလည်း နည်းနည်းလျှော့လိုက်တယ် */
    color: #555;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Placeholder အရောင် */
.search-wrapper input::placeholder {
    color: #0f0f0f;
    font-weight: 400;
}

/* Focus လုပ်ရင် */
.search-wrapper input:focus {
    border-color: #ff4757;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.3);
}

/* Icon နေရာပြန်ချိန်ခြင်း */
.search-wrapper i {
    position: absolute;
    left: 18px; /* Icon ကို ဘယ်ဘက်နား နည်းနည်းကပ်လိုက်တယ် */
    top: 50%;
    transform: translateY(-50%);
    color: #111111;
    font-size: 16px; /* Icon ကိုလည်း သေးလိုက်တယ် */
    transition: 0.3s;
}

.search-wrapper input:focus + i {
    color: #ff4757;
}

/* Tabs */
.tabs-container {
    margin: 40px 0 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

/* Tabs Styling - Fixed Jitter/Shaking Issue */
.tab-btn {
    padding: 10px 22px;
    
    /* ပြင်ဆင်ချက် (၁): မူလအခြေအနေမှာကတည်းက Border နေရာဦးထားမယ် (အကြည်ရောင်) */
    border: 2px solid transparent; 
    
    border-radius: 20px;
    background: #ffffff;
    color: #121313;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(22, 21, 21, 0.658);
}

.tab-btn.active {
    background: white;
    color: #f31f31;
    
    /* Active ဖြစ်ရင် အကြည်ရောင်နေရာမှာ ပန်းရောင်ဝင်လာမယ် (Size မပြောင်းတော့ဘူး) */
    border-color: #ff4757; 
    
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.25);
    font-weight: 600;
}

/* Icon အရောင် */
.tab-btn.active i {
    color: #ee2435;
}

/* Hover Effect */
.tab-btn:hover {
    transform: translateY(-2px);
    color: #ff4757;
    
    /* Hover လုပ်ရင်လည်း Border အရောင်ပြောင်းမယ် */
    border-color: #ff4757;
    
    background: #fff0f1;
}

/* Grid Layout - Flexbox ပြောင်းသုံးခြင်း */
/* Grid Layout - Smooth Transition ထပ်ဖြည့်ထားခြင်း */
.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 95%;
    max-width: 950px;
    padding-bottom: 60px;
    z-index: 10;
    margin: 0 auto;
    
    /* ချောချောမွေ့မွေ့ဖြစ်စေမည့် Code များ */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tab ပြောင်းရင် ခဏပျောက်သွားစေမည့် Class */
.grid-container.fade-out {
    opacity: 0;
    transform: translateY(10px); /* နည်းနည်းလေး အောက်ရောက်သွားမယ် */
}

/* Card Design - Size အသေထားခြင်း */
.card {
    background: rgba(255, 255, 255, 0.65); /* နည်းနည်းပိုလင်းလိုက်မယ် */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 10px 5px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Flexbox မှာ ပုံမပျက်အောင် Width/Height အသေသတ်မှတ်မယ် */
    width: 105px; 
    height: 95px;
    
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-sizing: border-box; 
    margin: 5px; /* နည်းနည်းလေး ခွာထားမယ် */
}

/* Hover Effect */
.card:hover {
    transform: translateY(-5px) scale(1.02); /* Hover လုပ်ရင် နည်းနည်းကြီးလာမယ် */
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 5;
}

/* Icon Styles */
.icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 8px;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.img-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    margin-bottom: 8px;
    border-radius: 10px;
}

.card-title {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    padding: 0 4px;
    color: #444; 
    line-height: 1.3; /* စာကြောင်းကြား အကွာအဝေး နည်းနည်းချဲလိုက်မယ် */
    
    /* ပြင်ဆင်ချက်: စာရှည်ရင် အောက်တစ်ကြောင်းဆင်းမယ် */
    white-space: normal; 
    
    /* ၂ ကြောင်းထက် ပိုရှည်ရင်တော့ဖြတ်မယ် (Card ပုံပျက်မသွားအောင်) */
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Header Title Design - ပြင်ဆင်ပြီး */
.app-title {
    font-size: 24px; /* အရင် 28px ကနေ 24px သို့ လျှော့ချလိုက်သည် */
    font-weight: 800;
    text-align: center;
    margin-top: 40px; /* အပေါ် margin ကို နည်းနည်းပြန်ညှိသည် */
    margin-bottom: -10px;
    
    /* အရောင်အသစ်: ပိုမိုရင့်ကျက်ပြီး Premium ဆန်သော အပြာ-ခရမ်း ရောင်ပြေး */
    background: linear-gradient(to right, #cb112d 0%, #3e25fc 100%);
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    letter-spacing: 0.5px; /* စာလုံးကြား အကွာအဝေးကို အနည်းငယ် လျှော့လိုက်သည် */
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

/* Search Bar ရဲ့ အပေါ်ကွာဝေးကို နည်းနည်းပြန်လျှော့မယ် */
.search-wrapper {
    margin-top: 30px; /* အရင်က 60px ကို 30px ပြောင်းလိုက်ပါ */
}

/* Footer Design */
.footer {
    margin-top: auto; /* Card နည်းရင်လည်း အောက်ဆုံးမှာ အမြဲကပ်နေစေဖို့ */
    margin-bottom: 25px;
    font-size: 12px;
    color: #888; /* မျက်စိမနောက်တဲ့ မီးခိုးရောင်ဖျော့ဖျော့ */
    text-align: center;
    font-weight: 500;
    width: 100%;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* =========================================
   RESPONSIVE DESIGN (MOBILE & TABLETS)
   ========================================= */

@media screen and (max-width: 768px) {
    
    /* ၁. ခေါင်းစဉ်ကို ဖုန်းနဲ့လိုက်ဖက်အောင် သေးလိုက်မယ် */
    .app-title {
        font-size: 20px; /* PC မှာ 24px, ဖုန်းမှာ 20px */
        margin-top: 25px;
    }

    /* ၂. Search Bar ကို ပိုကျစ်လျစ်အောင် လုပ်မယ် */
    .search-wrapper {
        width: 92%; /* ဘေးဘောင်တွေနဲ့ အရမ်းမကပ်အောင် */
        margin-top: 20px;
    }
    
    .search-wrapper input {
        padding: 10px 15px 10px 40px; /* Padding လျှော့မယ် */
        font-size: 13px; /* စာလုံးဆိုဒ် လျှော့မယ် */
        height: 45px; /* အမြင့်သတ်မှတ်ပေးလိုက်မယ် */
    }

    .search-wrapper i {
        left: 15px;
        font-size: 14px;
    }

    /* ၃. Tabs ခလုတ်တွေကို ဖုန်းမှာ သေးပေးမယ် */
    .tabs-container {
        gap: 8px; /* ခလုတ်ကြား အကွာအဝေး လျှော့မယ် */
        margin: 25px 0 20px 0;
    }

    .tab-btn {
        padding: 8px 16px; /* ခလုတ်အရွယ်အစား လျှော့မယ် */
        font-size: 12px;
    }

    /* ၄. Card တွေကို ဖုန်း Screen မှာ ၃ လုံး (သို့) ၄ လုံးစီ ဝင်အောင် ညှိမယ် */
    .grid-container {
        gap: 8px; /* Card ကြား အကွာအဝေး */
        width: 98%;
        padding-bottom: 40px;
    }

    .card {
        /* ဖုန်းမှာ Card ကို နည်းနည်းထပ်သေးလိုက်မယ် (PC မှာ 105px) */
        width: 90px; 
        height: 85px;
        margin: 3px; /* Flexbox margin */
        border-radius: 12px;
    }

    /* Icon နဲ့ စာလုံးတွေကိုပါ အချိုးကျ သေးပေးမယ် */
    .icon-box {
        width: 32px;
        height: 32px;
        font-size: 16px;
        margin-bottom: 6px;
        border-radius: 8px;
    }

    .img-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 6px;
    }

    .card-title {
        font-size: 10px; /* စာလုံးကို ၁၀ ထိ လျှော့လိုက်မယ် */
        padding: 0 2px;
    }
}

/* Screen အရမ်းသေးတဲ့ ဖုန်းအဟောင်းတွေအတွက် (ဥပမာ - iPhone SE) */
@media screen and (max-width: 350px) {
    .card {
        width: 80px; /* ပိုပြီး သေးပေးလိုက်မယ် */
        height: 80px;
    }
    .grid-container {
        gap: 5px;
    }
}