:root {
     --g-white: #ffffff;
     --g-blue: #4285F4;
     --g-red: #EA4335;
     --g-yellow: #FBBC05;
     --g-green: #34A853;
 }

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

 svg {
     width: 30px;
     height: 30px;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: var(--g-white);
     display: block;
     /* flex-direction: column; */
     min-height: 100dvh;
     line-height: 1.6;

 }

 body.center-content-page {
     display: flex;
     align-items: center;
     justify-content: center;
     background: #e0e5ec;

 }

 .main-container {
     padding: 12px;
     max-width: 500px;
     margin:auto;
 }
.subtitle {
     font-size: 14px;
     color: #747d8c;
     line-height: 1.4;
     margin-top: 10px;
     padding: 0px 20px 0px;
     text-align: center;
 }
 .hedder{width:100%;}
 .main-content{ opacity: 0;
     animation: fadeInOnly 1s ease-out forwards;
     animation-delay: 1s;
     /* Card ka animation poora hone ke BAAD dikhega */
}
 .dashboard-container {
     width: 100%;
     overflow: hidden;
    
 }
 

 /*GOOGLE BTN EFFCTE*/
 .u-btn-grid {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: 75px;
     /* Card size as requested */
     gap: 12px;
     overflow-x: auto;
     padding: 20px 10px;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
 }

 .u-btn-grid::-webkit-scrollbar {
     display: none;
 }

 .u-btn-card {
     position: relative;
     background: #fff;
     border-radius: 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border: 1px solid #f0f0f0;
     cursor: pointer;
     min-height: 75px;
     transition: transform 0.3s ease;
     z-index: 1;
 }

 /* Active State - Ultra Thin Animated Border */
 .u-btn-card.active {
     border-color: transparent;
     transform: scale(1.05);
 }

 /* 1. The Ultra-Thin Light Beam (Only 1px) */
 .u-btn-card.active::before {
     content: "";
     position: absolute;
     inset: -1px;
     /* Bilkul boundary par */
     z-index: -1;
     background: conic-gradient(from var(--angle),
             var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green), var(--g-blue));
     border-radius: 13px;
     animation: spin 3s linear infinite;
 }

 /* 2. Soft Animated Shadow */
 .u-btn-card.active::after {
     content: "";
     position: absolute;
     inset: -1px;
     z-index: -2;
     background: conic-gradient(from var(--angle),
             var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green), var(--g-blue));
     border-radius: 13px;
     filter: blur(8px);
     /* Compact shadow */
     opacity: 0.6;
     animation: spin 3s linear infinite;
 }

 /* Inner layer for content protection */
 .u-btn-inner {
     position: absolute;
     /* Border ko patla rakhne ke liye */
     background: #fff;
     border-radius: 11.5px;
     z-index: -1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
 }

 .u-btn-card.active .u-btn-inner {
     inset: 0.5px;
 }

 @keyframes spin {
     from {
         --angle: 0deg;
     }

     to {
         --angle: 360deg;
     }
 }

 .u-btn-icon {
     font-size: 26px;
     margin-bottom: 2px;
     width: 35px;
     height: 35px;

 }

 .u-btn-card p {
     font-size: 10px;
     font-weight: 600;
     color: #5f6368;
 }

 .c-blue {
     color: var(--g-blue);
 }

 .c-red {
     color: var(--g-red);
 }

 .c-yellow {
     color: var(--g-yellow);
 }

 .c-green {
     color: var(--g-green);
 }
 /* Monthly profite card */
 .slider-wrapper {
     display: flex;
     flex: 0 0 250px;
     overflow-x: auto;
     gap: 4px;
     padding: 8px;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
 }

 .slider-wrapper::-webkit-scrollbar {
     display: none;
 }

 /* CARD: Isko 'fit-content' kiya taaki ye number ke size ka rahe */
 .card {
     flex: 0 0 auto;
     min-width: 90px;
     max-width: fit-content;
     border-radius: 12px;
     padding: 7px 5px;
     border: 2.5px solid;
     display: flex;
     flex-direction: column;
 }

 /* AMOUNT: Bilkul right-aligned */
 .amount {
     font-size: 16px;
     font-weight: 700;
     line-height: 1;
     margin: 0;
     text-align: LEFT;
     /* Number right se shuru hoga */
     width: 100%;
     letter-spacing: -0.5px;
 }

 /* BOTTOM ROW: Image ko Number ke 'end' (986) ke niche lane ke liye */
 .bottom-row {
     display: flex;
     justify-content: space-between;
     /* Text left, Icon right */
     align-items: flex-end;
     margin-top: 3px;
     width: 100%;
 }

 .label {
     font-size: 13px;
     color: #555;
     line-height: 1.1;
     font-weight: 600;
     padding-right: 10px;
     /* Icon se thoda door */
 }

 /* ICON: Ab ye hamesha Number ke aakhri digit ke niche rahega */
 .card-icon {
     width: 26px;
     height: 26px;
     object-fit: contain;
     flex-shrink: 0;
 }

 /* Colors based on image */
 .card-red {
     background-color: #fff1f1;
     border-color: #fbdada;
     color: #cc3333;
 }

 .card-green {
     background-color: #f7faf7;
     border-color: #e3efe3;
     color: #388e3c;
 }

 .card-blue {
     background-color: #f1f7fe;
     border-color: #dbeafe;
     color: #1976d2;
 }

 .card-yellow {
     background-color: #fefdf1;
     border-color: #faefbf;
     color: #FBBC05;
 }

 .filter-red {
     filter: invert(21%) sepia(85%) saturate(2256%) hue-rotate(345deg) brightness(91%) contrast(92%);
 }

 .welcome-card {

     background: white;
     width: 100%;
     padding: 20px 0 0 10PX;
     /*border-radius: 30px;*/
     text-align: center;
     /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
     position: relative;
     overflow: hidden;

 }


 .welcome-card .content {
     animation: fadeIn 2.5s ease-out;
 }
.sun {
            width: 70px;
            height: 70px;
            background: #ffe066;
            border-radius: 50%;
            margin: 5px auto 10px;
            animation: glow 3s infinite alternate ease-in-out;
        }
  @keyframes glow {
            from { transform: scale(0.9); box-shadow: 0 0 20px #ffe066; }
            to { transform: scale(1.1); box-shadow: 0 0 40px #ffd43b; }
        }

 .booked-text {
     /* Google waala cursive font apply kiya */
     font-family: 'Sacramento', cursive;
     /* Image se match karta hua Dark Teal / Greenish color */
     color: #2b5c54;
     font-size: 2rem;
     /* Aap size yahan se chota-bada kar sakte hain */
     font-weight: 500;
     margin: 0;
     letter-spacing: 1px;
     /* Text ko smooth aur clear dikhane ke liye */
     -webkit-font-smoothing: antialiased;
 }

 .tag {
     background: #d0ebff;
     color: #339af0;
     padding: 8px 16px;
     border-radius: 20px;
     display: inline-block;
     font-weight: bold;
     margin-bottom: 1px;
     text-transform: uppercase;
     font-size: 0.8rem;
 }


 .animated-hr {
     border: none;
     height: 1px;
     /* Patla design */
     width: 100%;
     background: linear-gradient(90deg, red, orange, yellow, green, blue);
     background-size: 200% 100%;
     animation: moveGradient 3s linear infinite;

 }
 /* Two colmun list card Expiry And Active */
  .grid-col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .listing-card {
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        height: 450px; /* Fixed height taaki scroll ho sake */
    

    /* Header styling */
    .header-box {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 6px 8px;
        color: white;
        font-weight: 500;
        font-size: 1.3rem;
        text-transform: uppercase;
        border-radius: 10px 10px 0 0;
    }
    .icon-box { background: rgba(0,0,0,0.2); padding: 3px 5px; border-radius: 4px; font-size: 30px; }

    .bg-expire { background: linear-gradient(135deg, #ff4757, #ff6b81); }
    .bg-active { background: linear-gradient(135deg, #2ed573, #7bed9f); }

    /* Scrollable Area */
    .list-container {
        padding: 5px;
        overflow-y: auto; /* Yahan se scroll hoga */
        flex-grow: 1;
        scrollbar-width: thin; /* Firefox */
    }

  /* Chrome, Safari, Edge ke liye scrollbar width */
  &::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  /* Scrollbar thumb (moving part) */
  &::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 10px;

    /* Thumb par hover effect */
    &:hover {
      background-color: #707070;
    }
  }

  /* Optional: Scrollbar ka track (background) */
  &::-webkit-scrollbar-track {
    background: transparent; 
  }
    
    


    /* Hard Shadow List Items */
    .member-item {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px;
        margin-bottom: 8px;
        background: #ffffff;
        border-radius: 6px;
        /* Deep Shadow */
        box-shadow: 0 4px 6px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); 
        border: 1px solid #e2e8f0;
    }

    .photo { width: 2rem; height: 2rem; border-radius: 40px; object-fit: cover; }
    .name { font-size:0.58rem; font-weight: 400; color: #f10606; display: block; }
    .meta { font-size: 0.5rem; color: #000000; }
}