/* EnnaPanlaam - Reusable Components */


/* Card */

.card {
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}


/* Section */

.section {
    margin-bottom: var(--space-xl);
}

.section__title {
    margin-bottom: var(--space-md);
    font-size: 18px;
}


/* Button */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.button--primary {
    background: var(--color-primary);
    color: #ffffff;
}

.button--primary:hover {
    background: var(--color-primary-dark);
}


/* Ad Slot */

.ad-slot {
    width: 100%;
    min-height: 0;
}


/* App Header */

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 0 var(--space-md);
}

.app-header__brand {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.app-header__logo {
    display: block;
    width: 450px;
    max-width: 100%;
    height: auto;
}

.app-header__menu-button {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-header__menu-button:hover {
    background: var(--color-primary);
}

.app-header__menu-button:active {
    transform: translateY(-50%) scale(0.94);
}

.app-header__menu-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-header__menu-icon span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 999px;
    transition: background var(--transition-fast);
}

.app-header__menu-button:hover .app-header__menu-icon span {
    background: #ffffff;
}


/* Side Menu */

.side-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(31, 41, 55, 0.45);
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 201;
    width: min(85vw, 360px);
    height: 100vh;
    padding: var(--space-md);
    background: var(--color-surface);
    box-shadow: -8px 0 24px rgba(31, 41, 55, 0.15);
    transform: translateX(100%);
    transition: transform 250ms ease;
}

.side-menu.is-open {
    transform: translateX(0);
}

.side-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin-bottom: var(--space-md);
}

.side-menu__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
}

.side-menu__logo-mark {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.side-menu__brand-name {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.side-menu__title {
    color: var(--color-primary);
    font-size: 20px;
}

.side-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--color-text);
    font-size: 30px;
    line-height: 1;
    transition: background var(--transition-fast);
}

.side-menu__close:hover {
    background: var(--color-primary-light);
}

.side-menu__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.side-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 56px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.side-menu__item:hover {
    background: var(--color-primary-light);
}

.side-menu__icon {
    flex: 0 0 28px;
    font-size: 20px;
    text-align: center;
}

.side-menu__label {
    display: block;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
}

.side-menu__description {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.side-menu__divider {
    height: 1px;
    margin: var(--space-sm) 0;
    background: var(--color-border);
}


/* =========================================================
   Explore Banner
   ========================================================= */

.explore-banner {
    width: 100%;
    margin-bottom: 18px;
}

.explore-banner__image {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   Explore Category Cards
   ========================================================= */

.category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.category-card {
    /* Default theme */
    --card-accent: var(--color-primary);
    --card-accent-dark: var(--color-primary-dark);
    --card-soft: var(--color-primary-light);
    --card-border: rgba(108, 63, 191, 0.18);
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    min-height: 150px;
    padding: 18px 16px;
    background: linear-gradient( 135deg, #ffffff, var(--card-soft));
    border: 1px solid var(--card-border);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.category-card:hover {
    transform: translateY(-3px);
    border-color: var(--card-accent);
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.10);
}

.category-card:active {
    transform: scale(0.98);
}


/* Category Icon */

.category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    font-size: 42px;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(31, 41, 55, 0.06);
}


/* Category Content */

.category-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: 15px;
}

.category-card__title {
    display: block;
    color: var(--card-accent-dark);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.category-card__description {
    display: block;
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
}


/* Category Arrow */

.category-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--card-accent);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    background: rgba(255, 255, 255, 0.30);
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.category-card:hover .category-card__arrow {
    transform: translateX(3px);
    background: var(--card-accent);
    color: #ffffff;
}


/* =========================================================
   Category Themes
   ========================================================= */


/* Save Money */

.category-card--save-money {
    --card-accent: #198754;
    --card-accent-dark: #146c43;
    --card-soft: #e8f8ef;
    --card-border: rgba(25, 135, 84, 0.22);
}


/* Earn Money */

.category-card--earn-money {
    --card-accent: #2f9e44;
    --card-accent-dark: #1f7a34;
    --card-soft: #eff9df;
    --card-border: rgba(47, 158, 68, 0.24);
}


/* Buy Something */

.category-card--buy-something {
    --card-accent: #7048e8;
    --card-accent-dark: #5135b8;
    --card-soft: #f2edff;
    --card-border: rgba(112, 72, 232, 0.22);
}


/* What to Eat */

.category-card--what-to-eat {
    --card-accent: #f76707;
    --card-accent-dark: #d94801;
    --card-soft: #fff4e6;
    --card-border: rgba(247, 103, 7, 0.24);
}


/* Where to Go */

.category-card--where-to-go {
    --card-accent: #e03131;
    --card-accent-dark: #c92a2a;
    --card-soft: #fff0f0;
    --card-border: rgba(224, 49, 49, 0.22);
}


/* What to Watch */

.category-card--what-to-watch {
    --card-accent: #4263eb;
    --card-accent-dark: #364fc7;
    --card-soft: #edf2ff;
    --card-border: rgba(66, 99, 235, 0.22);
}


/* Family Time */

.category-card--family-time {
    --card-accent: #e64980;
    --card-accent-dark: #c2255c;
    --card-soft: #fff0f6;
    --card-border: rgba(230, 73, 128, 0.22);
}


/* Challenge Me */

.category-card--challenge-me {
    --card-accent: #ae3ec9;
    --card-accent-dark: #862e9c;
    --card-soft: #f8f0fc;
    --card-border: rgba(174, 62, 201, 0.22);
}


/* Help Me Learn */

.category-card--help-me-learn {
    --card-accent: #1971c2;
    --card-accent-dark: #145a9c;
    --card-soft: #e7f5ff;
    --card-border: rgba(25, 113, 194, 0.22);
}


/* Surprise Me */

.category-card--surprise-me {
    --card-accent: #f08c00;
    --card-accent-dark: #d97706;
    --card-soft: #fff9db;
    --card-border: rgba(240, 140, 0, 0.24);
}


/* =========================================================
   Rich Save Money Icon
   ========================================================= */

.category-card--save-money .category-card__icon {
    position: relative;
    background: radial-gradient( circle at 30% 25%, #ffffff 0, #f3fff8 48%, #e2f8eb 100%);
    border-color: rgba(25, 135, 84, 0.10);
    border-radius: 28px;
    box-shadow: 0 12px 25px rgba(25, 135, 84, 0.14);
}

.category-card--save-money .category-card__icon::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(25, 135, 84, 0.08);
    border-radius: 22px;
    pointer-events: none;
}


/* Category Illustration Icon */

.category-card__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   RESPONSIVE CATEGORY CARDS
   Keep 2 columns on normal mobile phones
   ========================================================= */


/* Large mobile / small tablet: 501px–650px */

@media (max-width: 650px) {
    .category-card {
        grid-template-columns: 76px minmax(0, 1fr) 34px;
        gap: 8px;
        min-height: 132px;
        padding: 14px 12px;
    }
    .category-card__icon,
    .category-card--save-money .category-card__icon {
        width: 72px;
        height: 72px;
        border-radius: 21px;
    }
    .category-card__content {
        padding-left: 3px;
    }
    .category-card__title {
        font-size: 15px;
        line-height: 1.25;
    }
    .category-card__description {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.4;
    }
    .category-card__arrow {
        width: 34px;
        height: 34px;
        font-size: 22px;
    }
}


/* Normal Mobile Phones: 360px–500px */

@media (max-width: 500px) {
    .category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .category-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 170px;
        padding: 12px;
        border-radius: 18px;
    }
    /* Icon */
    .category-card__icon,
    .category-card--save-money .category-card__icon {
        width: 58px;
        height: 58px;
        margin: 0 0 8px;
        border-radius: 18px;
        font-size: 32px;
    }
    /* Content */
    .category-card__content {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding-left: 0;
    }
    /* Title */
    .category-card__title {
        padding-right: 28px;
        font-size: 14px;
        line-height: 1.25;
    }
    /* Subtitle */
    .category-card__description {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.35;
    }
    /* Arrow */
    .category-card__arrow {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        font-size: 18px;
        font-weight: 800;
    }
    /* Save Money inner decoration */
    .category-card--save-money .category-card__icon::before {
        inset: 6px;
        border-radius: 14px;
    }
}


/* Small phones: 360px and below */

@media (max-width: 360px) {
    .category-list {
        gap: 8px;
    }
    .category-card {
        grid-template-columns: 52px minmax(0, 1fr) 24px;
        gap: 4px;
        min-height: 104px;
        padding: 9px 7px;
    }
    .category-card__icon,
    .category-card--save-money .category-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 26px;
    }
    .category-card--save-money .category-card__icon::before {
        inset: 5px;
        border-radius: 11px;
    }
    .category-card__title {
        font-size: 12px;
        line-height: 1.2;
    }
    .category-card__description {
        margin-top: 3px;
        font-size: 9px;
        line-height: 1.3;
    }
    .category-card__arrow {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
}


/* =========================================================
   Explore Section Header
   ========================================================= */

.explore-section {
    padding-top: 8px;
}

.explore-section__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
}

.explore-section__content {
    flex: 1;
    min-width: 0;
}

.explore-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.explore-section__eyebrow-icon {
    font-size: 14px;
    line-height: 1;
}

.explore-section__title {
    margin: 0;
    color: var(--color-text);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.explore-section__title-accent {
    width: 56px;
    height: 4px;
    margin: 10px 0;
    background: var(--color-primary);
    border-radius: 999px;
}

.explore-section__subtitle {
    max-width: 290px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* Right Decorative Icons */

.explore-section__art {
    position: relative;
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
}

.explore-section__art-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(31, 41, 55, 0.08);
    font-size: 23px;
}

.explore-section__art-icon--bulb {
    top: 4px;
    left: 6px;
}

.explore-section__art-icon--search {
    top: 12px;
    right: 4px;
}

.explore-section__art-icon--book {
    bottom: 4px;
    left: 12px;
}

.explore-section__art-icon--plant {
    right: 12px;
    bottom: 0;
}

.explore-section__art-sparkle {
    position: absolute;
    color: var(--color-primary);
    line-height: 1;
}

.explore-section__art-sparkle--one {
    top: 0;
    right: 48px;
    font-size: 13px;
}

.explore-section__art-sparkle--two {
    right: 0;
    bottom: 48px;
    font-size: 15px;
}


/* Bottom Divider */

.explore-section__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.explore-section__divider span {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.explore-section__divider b {
    color: var(--color-primary);
    font-size: 14px;
    line-height: 1;
}


/*==========================================================================*/


/* =========================================================
   My Alerts & Reminders Banner
   ========================================================= */

.alerts-banner {
    width: 100%;
    margin-bottom: 18px;
}

.alerts-banner__image {
    display: block;
    width: 100%;
    height: auto;
}

.reminders-section {
    --reminder-accent: var(--color-primary);
    padding: 18px;
    background: linear-gradient( 135deg, #ffffff, #faf8ff);
    border: 1px solid rgba(108, 63, 191, 0.10);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(31, 41, 55, 0.05);
}

.reminders-section .section__title {
    margin-bottom: 5px;
}

.reminders-section__subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* Reminder List */

.reminder-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}


/* Reminder Card */

.reminder-card {
    --reminder-accent: var(--color-primary);
    --reminder-accent-dark: var(--color-primary-dark);
    --reminder-soft: var(--color-primary-light);
    --reminder-border: rgba(108, 63, 191, 0.14);
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--reminder-border);
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(31, 41, 55, 0.04);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.reminder-card:hover {
    transform: translateY(-2px);
    border-color: var(--reminder-accent);
    box-shadow: 0 10px 22px rgba(31, 41, 55, 0.08);
}

.reminder-card:active {
    transform: scale(0.985);
}


/* Reminder Icon */

.reminder-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: var(--reminder-soft);
    border: 1px solid var(--reminder-border);
    border-radius: 16px;
    font-size: 29px;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(31, 41, 55, 0.05);
}


/* Reminder Content */

.reminder-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reminder-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.reminder-card__title {
    display: block;
    color: var(--reminder-accent-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.reminder-card__description {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}


/* New Badge */

.reminder-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--reminder-soft);
    border: 1px solid var(--reminder-border);
    border-radius: 999px;
    color: var(--reminder-accent-dark);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}


/* Reminder Arrow */

.reminder-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--reminder-accent);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.reminder-card:hover .reminder-card__arrow {
    transform: translateX(3px);
    background: var(--reminder-accent);
    color: #ffffff;
}


/* =========================================================
   Reminder Themes
   ========================================================= */


/* When I'm There */

.reminder-card--when-there {
    --reminder-accent: #e03131;
    --reminder-accent-dark: #c92a2a;
    --reminder-soft: #fff0f0;
    --reminder-border: rgba(224, 49, 49, 0.18);
}


/* When I Leave */

.reminder-card--when-leave {
    --reminder-accent: #f08c00;
    --reminder-accent-dark: #d97706;
    --reminder-soft: #fff9db;
    --reminder-border: rgba(240, 140, 0, 0.18);
}


/* Going Somewhere */

.reminder-card--going-somewhere {
    --reminder-accent: #4263eb;
    --reminder-accent-dark: #364fc7;
    --reminder-soft: #edf2ff;
    --reminder-border: rgba(66, 99, 235, 0.18);
}


/* Smart Buy Alert */

.reminder-card--smart-buy {
    --reminder-accent: #7048e8;
    --reminder-accent-dark: #5135b8;
    --reminder-soft: #f2edff;
    --reminder-border: rgba(112, 72, 232, 0.18);
}


/* =========================================================
   Reminder Tip
   ========================================================= */

.reminders-section__tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 249, 219, 0.65);
    border: 1px solid rgba(240, 140, 0, 0.12);
    border-radius: 14px;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.reminders-section__tip-icon {
    flex-shrink: 0;
    font-size: 16px;
}


/* =========================================================
   Responsive Reminder Cards
   ========================================================= */

@media (max-width: 500px) {
    .reminders-section {
        padding: 14px;
        border-radius: 20px;
    }
    .reminder-list {
        gap: 8px;
        margin-top: 14px;
    }
    .reminder-card {
        grid-template-columns: 52px minmax(0, 1fr) 30px;
        gap: 10px;
        min-height: 74px;
        padding: 10px;
    }
    .reminder-card__icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 26px;
    }
    .reminder-card__title {
        font-size: 14px;
    }
    .reminder-card__description {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.35;
    }
    .reminder-card__arrow {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .reminders-section {
        padding: 12px;
    }
    .reminder-card {
        grid-template-columns: 46px minmax(0, 1fr) 26px;
        gap: 8px;
        min-height: 68px;
        padding: 9px;
    }
    .reminder-card__icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 23px;
    }
    .reminder-card__title {
        font-size: 13px;
    }
    .reminder-card__description {
        font-size: 10px;
    }
    .reminder-card__arrow {
        width: 26px;
        height: 26px;
        font-size: 18px;
    }
    .reminder-card__badge {
        padding: 3px 6px;
        font-size: 9px;
    }
}


/*================================================================================*/


/* =========================================================
   Today's EnnaPanlaam Banner
   ========================================================= */

.today-banner {
    width: 100%;
    margin-bottom: 16px;
}

.today-banner__image {
    display: block;
    width: 100%;
    height: auto;
}

.today-section {
    --today-yellow: #f59f00;
    --today-yellow-dark: #d97706;
    --today-yellow-soft: #fff9db;
    padding: 20px;
    background: linear-gradient( 135deg, #fffdf7 0%, #ffffff 55%, #fffaf0 100%);
    border: 1px solid rgba(245, 159, 0, 0.14);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(31, 41, 55, 0.05);
}


/* Header */

.today-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.today-section .section__title {
    margin-bottom: 5px;
}

.today-section__subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.today-section__date-label {
    flex-shrink: 0;
    padding: 5px 10px;
    background: var(--today-yellow-soft);
    border: 1px solid rgba(245, 159, 0, 0.16);
    border-radius: 999px;
    color: var(--today-yellow-dark);
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   Featured Daily Idea
   ========================================================= */

.today-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: center;
    gap: 18px;
    min-height: 190px;
    margin-top: 18px;
    padding: 22px;
    background: radial-gradient( circle at 88% 15%, rgba(255, 255, 255, 0.95), transparent 28%), linear-gradient( 135deg, #f3fff8 0%, #e4f8eb 100%);
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(25, 135, 84, 0.08);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.today-featured:hover {
    transform: translateY(-3px);
    border-color: rgba(25, 135, 84, 0.38);
    box-shadow: 0 16px 30px rgba(25, 135, 84, 0.13);
}

.today-featured:active {
    transform: scale(0.985);
}

.today-featured__content {
    min-width: 0;
}

.today-featured__category {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    color: #198754;
    font-size: 12px;
    font-weight: 700;
}

.today-featured__title {
    margin: 0;
    color: #176b45;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.today-featured__description {
    max-width: 460px;
    margin: 8px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.today-featured__action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: #198754;
    font-size: 12px;
    font-weight: 700;
}

.today-featured__action strong {
    font-size: 18px;
    line-height: 1;
}

.today-featured__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    justify-self: end;
    background: radial-gradient( circle at 30% 25%, #ffffff 0%, #f3fff8 48%, #dff5e8 100%);
    border: 1px solid rgba(25, 135, 84, 0.10);
    border-radius: 30px;
    font-size: 58px;
    line-height: 1;
    box-shadow: 0 12px 25px rgba(25, 135, 84, 0.12);
}


/* =========================================================
   Supporting Ideas
   ========================================================= */

.today-ideas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.today-idea-card {
    --today-card-accent: var(--color-primary);
    --today-card-dark: var(--color-primary-dark);
    --today-card-soft: var(--color-primary-light);
    --today-card-border: rgba(108, 63, 191, 0.16);
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    min-height: 118px;
    padding: 14px;
    background: linear-gradient( 135deg, #ffffff, var(--today-card-soft));
    border: 1px solid var(--today-card-border);
    border-radius: 20px;
    box-shadow: 0 7px 18px rgba(31, 41, 55, 0.05);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.today-idea-card:hover {
    transform: translateY(-2px);
    border-color: var(--today-card-accent);
    box-shadow: 0 12px 24px rgba(31, 41, 55, 0.08);
}

.today-idea-card:active {
    transform: scale(0.985);
}


/* Supporting Idea Icon */

.today-idea-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: radial-gradient( circle at 30% 25%, #ffffff 0%, var(--today-card-soft) 100%);
    border: 1px solid var(--today-card-border);
    border-radius: 18px;
    font-size: 34px;
    line-height: 1;
    box-shadow: 0 7px 16px rgba(31, 41, 55, 0.05);
}


/* Supporting Idea Content */

.today-idea-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.today-idea-card__category {
    display: block;
    color: var(--today-card-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.today-idea-card__title {
    display: block;
    margin-top: 4px;
    color: var(--today-card-dark);
    font-size: 14px;
    line-height: 1.25;
}

.today-idea-card__description {
    display: block;
    margin-top: 5px;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.4;
}


/* Supporting Idea Arrow */

.today-idea-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--today-card-border);
    border-radius: 50%;
    color: var(--today-card-accent);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.today-idea-card:hover .today-idea-card__arrow {
    transform: translateX(2px);
    background: var(--today-card-accent);
    color: #ffffff;
}


/* What to Eat Theme */

.today-idea-card--food {
    --today-card-accent: #e8590c;
    --today-card-dark: #c94c08;
    --today-card-soft: #fff4e8;
    --today-card-border: rgba(232, 89, 12, 0.17);
}


/* Help Me Learn Theme */

.today-idea-card--learn {
    --today-card-accent: #4263eb;
    --today-card-dark: #364fc7;
    --today-card-soft: #edf2ff;
    --today-card-border: rgba(66, 99, 235, 0.17);
}


/* =========================================================
   Daily Refresh Bar
   ========================================================= */

.today-refresh {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    background: linear-gradient( 135deg, #fffdf4, #fff7d6);
    border: 1px solid rgba(245, 159, 0, 0.16);
    border-radius: 16px;
}

.today-refresh__icon {
    flex-shrink: 0;
    font-size: 17px;
}

.today-refresh__text {
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.today-refresh__button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    color: var(--today-yellow-dark);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.today-refresh__button strong {
    font-size: 16px;
}


/* =========================================================
   Today's EnnaPanlaam - Mobile
   ========================================================= */

@media (max-width: 500px) {
    .today-section {
        padding: 14px;
        border-radius: 20px;
    }
    .today-section__date-label {
        padding: 4px 8px;
        font-size: 9px;
    }
    .today-featured {
        grid-template-columns: minmax(0, 1fr) 78px;
        gap: 12px;
        min-height: 160px;
        margin-top: 14px;
        padding: 16px;
    }
    .today-featured__category {
        margin-bottom: 6px;
        font-size: 10px;
    }
    .today-featured__title {
        font-size: 18px;
    }
    .today-featured__description {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.4;
    }
    .today-featured__action {
        margin-top: 10px;
        font-size: 10px;
    }
    .today-featured__action strong {
        font-size: 15px;
    }
    .today-featured__icon {
        width: 76px;
        height: 76px;
        border-radius: 22px;
        font-size: 40px;
    }
    .today-ideas-grid {
        gap: 10px;
        margin-top: 10px;
    }
    .today-idea-card {
        grid-template-columns: 48px minmax(0, 1fr);
        align-content: start;
        gap: 8px;
        min-height: 150px;
        padding: 11px;
    }
    .today-idea-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 26px;
    }
    .today-idea-card__arrow {
        position: absolute;
        top: 11px;
        right: 11px;
        width: 27px;
        height: 27px;
        font-size: 17px;
    }
    .today-idea-card__content {
        grid-column: 1 / -1;
        margin-top: 2px;
    }
    .today-idea-card__category {
        padding-right: 28px;
        font-size: 11px;
    }
    .today-idea-card__title {
        margin-top: 4px;
        font-size: 13px;
    }
    .today-idea-card__description {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.35;
    }
    .today-refresh {
        gap: 8px;
        margin-top: 12px;
        padding: 10px 11px;
    }
    .today-refresh__text {
        font-size: 10px;
    }
    .today-refresh__button {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .today-section {
        padding: 12px;
    }
    .today-section__header {
        gap: 8px;
    }
    .today-featured {
        grid-template-columns: minmax(0, 1fr) 66px;
        min-height: 148px;
        padding: 13px;
    }
    .today-featured__title {
        font-size: 16px;
    }
    .today-featured__description {
        font-size: 10px;
    }
    .today-featured__icon {
        width: 64px;
        height: 64px;
        border-radius: 19px;
        font-size: 34px;
    }
    .today-ideas-grid {
        gap: 8px;
    }
    .today-idea-card {
        min-height: 142px;
        padding: 9px;
    }
    .today-idea-card__icon {
        width: 44px;
        height: 44px;
        font-size: 23px;
    }
    .today-idea-card__category {
        font-size: 10px;
    }
    .today-idea-card__title {
        font-size: 12px;
    }
    .today-idea-card__description {
        font-size: 9px;
    }
    .today-refresh__text {
        font-size: 9px;
    }
    .today-refresh__button {
        font-size: 9px;
    }
}


/* =========================================================
   ENNAPANLAAM - AUTHENTICATION
   Login / Register
   ========================================================= */


/* =========================================================
   AUTH PAGE
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 20px 24px;
    box-sizing: border-box;
}


/* Register needs slightly less empty space */

.auth-page--register {
    padding-top: 14px;
    padding-bottom: 16px;
}


/* =========================================================
   AUTH CARD
   ========================================================= */

.auth-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 30px 18px 24px;
    box-sizing: border-box;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.97), rgba(248, 249, 255, 0.95));
    border: 1px solid rgba(103, 88, 180, 0.18);
    border-radius: 28px;
    box-shadow: 0 14px 40px rgba(55, 45, 120, 0.08);
}


/* Login and register use same card */

.auth-card--login,
.auth-card--register {
    max-width: 430px;
}


/* =========================================================
   SMALL DECORATION
   ========================================================= */

.auth-decor {
    display: flex;
    align-items: center;
    height: 18px;
    gap: 8px;
    color: #5a49b6;
    font-size: 13px;
    line-height: 1;
}


/* =========================================================
   BRAND
   ========================================================= */

.auth-brand {
    margin: 6px 0 22px;
    text-align: center;
}

.auth-brand__logo {
    display: block;
    width: 58px;
    height: auto;
    margin: 0 auto 12px;
}

.auth-eyebrow,
.auth-brand__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #34445a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-brand h1 {
    margin: 0;
    color: #29394d;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.auth-brand p {
    margin: 9px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.auth-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    color: #b6384d;
    background: #fff2f4;
    border: 1px solid #f3cbd2;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
}


/* =========================================================
   FORM
   ========================================================= */

.auth-form {
    width: 100%;
}

.auth-form__group {
    margin-bottom: 16px;
}


/* Label + forgot password row */

.auth-form__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}


/* Normal label */

.auth-form__group label {
    display: block;
    margin: 0 0 8px;
    color: #344054;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}


/* When label is inside label row */

.auth-form__label-row label {
    margin: 0;
}


/* Inputs */

.auth-form input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    box-sizing: border-box;
    color: #344054;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #c8ced8;
    border-radius: 16px;
    outline: none;
    font: inherit;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-form input::placeholder {
    color: #8b94a2;
}

.auth-form input:hover {
    border-color: #b9b2dc;
}

.auth-form input:focus {
    background: #ffffff;
    border-color: #6856c5;
    box-shadow: 0 0 0 3px rgba(104, 86, 197, 0.10);
}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.auth-forgot,
.auth-forgot-password {
    color: #5f50ad;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.auth-forgot:hover,
.auth-forgot-password:hover {
    color: #4d3e9b;
    text-decoration: underline;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.auth-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 13px 20px;
    box-sizing: border-box;
    color: #ffffff;
    background: linear-gradient( 135deg, #5d4bc1, #7654ca);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(93, 75, 193, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 25px rgba(93, 75, 193, 0.28);
}

.auth-submit:active {
    transform: scale(0.98);
}

.auth-submit span {
    font-size: 20px;
    line-height: 1;
}


/* =========================================================
   AUTH FOOTER
   ========================================================= */

.auth-footer {
    margin-top: 18px;
    text-align: center;
}

.auth-footer p {
    margin: 0 0 7px;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
}

.auth-footer span {
    color: #667085;
    font-size: 14px;
}

.auth-footer a {
    color: #55469f;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.auth-footer a:hover {
    color: #dd5d3f;
    text-decoration: underline;
}


/* =========================================================
   BOTTOM HELP MESSAGE
   ========================================================= */

.auth-message {
    margin-top: 7px;
    color: #344054;
    font-size: 14px;
    line-height: 1.5;
}

.auth-help-text {
    color: #344054 !important;
}


/* =========================================================
   COMPACT REGISTER PAGE
   Keeps the button visible without unnecessary scrolling
   ========================================================= */

.auth-page--register .auth-card {
    padding: 24px 16px 20px;
}

.auth-page--register .auth-brand {
    margin-bottom: 16px;
}

.auth-page--register .auth-brand__logo {
    width: 50px;
    margin-bottom: 9px;
}

.auth-page--register .auth-eyebrow,
.auth-page--register .auth-brand__eyebrow {
    margin-bottom: 3px;
    font-size: 11px;
}

.auth-page--register .auth-brand h1 {
    font-size: 24px;
}

.auth-page--register .auth-brand p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
}

.auth-page--register .auth-form__group {
    margin-bottom: 13px;
}

.auth-page--register .auth-form__label-row {
    margin-bottom: 6px;
}

.auth-page--register .auth-form__group label {
    font-size: 14px;
}

.auth-page--register .auth-form input {
    height: 46px;
    padding: 0 14px;
}

.auth-page--register .auth-submit {
    min-height: 50px;
    margin-top: 2px;
    font-size: 16px;
}

.auth-page--register .auth-footer {
    margin-top: 14px;
}

.auth-page--register .auth-message {
    margin-top: 5px;
    font-size: 13px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .auth-page {
        min-height: calc(100vh - 155px);
        align-items: center;
        padding: 18px 20px 18px;
    }
    .auth-card {
        padding: 26px 16px 22px;
        border-radius: 26px;
    }
    .auth-brand {
        margin-bottom: 20px;
    }
    .auth-brand__logo {
        width: 54px;
        margin-bottom: 10px;
    }
    .auth-brand h1 {
        font-size: 24px;
    }
    .auth-brand p {
        font-size: 14px;
    }
    .auth-form__group {
        margin-bottom: 15px;
    }
    .auth-form input {
        height: 50px;
    }
    .auth-submit {
        min-height: 52px;
        font-size: 16px;
    }
    .auth-page--register {
        align-items: flex-start;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .auth-page--register .auth-card {
        padding: 22px 16px 18px;
    }
    .auth-page--register .auth-brand {
        margin-bottom: 14px;
    }
    .auth-page--register .auth-brand__logo {
        width: 46px;
        margin-bottom: 8px;
    }
    .auth-page--register .auth-brand h1 {
        font-size: 23px;
    }
    .auth-page--register .auth-form__group {
        margin-bottom: 11px;
    }
    .auth-page--register .auth-form input {
        height: 44px;
    }
    .auth-page--register .auth-submit {
        min-height: 48px;
    }
}


/* =========================================================
   SHORT SCREENS
   Example: small-height mobile / browser viewport
   ========================================================= */

@media (max-height: 750px) {
    .auth-page {
        min-height: calc(100vh - 150px);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .auth-card {
        padding: 18px 16px;
    }
    .auth-brand {
        margin-bottom: 14px;
    }
    .auth-brand__logo {
        width: 50px;
        margin-bottom: 7px;
    }
    .auth-brand h1 {
        font-size: 23px;
    }
    .auth-brand p {
        margin-top: 5px;
        font-size: 13px;
    }
    .auth-form__group {
        margin-bottom: 11px;
    }
    .auth-form input {
        height: 47px;
    }
    .auth-submit {
        min-height: 49px;
    }
    .auth-footer {
        margin-top: 12px;
    }
    .auth-page--register .auth-card {
        padding: 16px 16px 14px;
    }
    .auth-page--register .auth-brand {
        margin-bottom: 10px;
    }
    .auth-page--register .auth-brand__logo {
        width: 42px;
        margin-bottom: 5px;
    }
    .auth-page--register .auth-form__group {
        margin-bottom: 8px;
    }
    .auth-page--register .auth-form input {
        height: 42px;
    }
    .auth-page--register .auth-submit {
        min-height: 46px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .auth-form input,
    .auth-submit {
        transition: none;
    }
}


/* =========================================================
   ENNAPANLAAM - AUTHENTICATION
   Login / Register
   ========================================================= */


/* =========================================================
   AUTH PAGE
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 20px 24px;
    box-sizing: border-box;
}


/* Register needs slightly less empty space */

.auth-page--register {
    padding-top: 14px;
    padding-bottom: 16px;
}


/* =========================================================
   AUTH CARD
   ========================================================= */

.auth-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 30px 18px 24px;
    box-sizing: border-box;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.97), rgba(248, 249, 255, 0.95));
    border: 1px solid rgba(103, 88, 180, 0.18);
    border-radius: 28px;
    box-shadow: 0 14px 40px rgba(55, 45, 120, 0.08);
}


/* Login and register use same card */

.auth-card--login,
.auth-card--register {
    max-width: 430px;
}


/* =========================================================
   SMALL DECORATION
   ========================================================= */

.auth-decor {
    display: flex;
    align-items: center;
    height: 18px;
    gap: 8px;
    color: #5a49b6;
    font-size: 13px;
    line-height: 1;
}


/* =========================================================
   BRAND
   ========================================================= */

.auth-brand {
    margin: 6px 0 22px;
    text-align: center;
}

.auth-brand__logo {
    display: block;
    width: 58px;
    height: auto;
    margin: 0 auto 12px;
}

.auth-eyebrow,
.auth-brand__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #34445a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-brand h1 {
    margin: 0;
    color: #29394d;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.auth-brand p {
    margin: 9px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.auth-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    color: #b6384d;
    background: #fff2f4;
    border: 1px solid #f3cbd2;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
}


/* =========================================================
   FORM
   ========================================================= */

.auth-form {
    width: 100%;
}

.auth-form__group {
    margin-bottom: 16px;
}


/* Label + forgot password row */

.auth-form__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}


/* Normal label */

.auth-form__group label {
    display: block;
    margin: 0 0 8px;
    color: #344054;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}


/* When label is inside label row */

.auth-form__label-row label {
    margin: 0;
}


/* Inputs */

.auth-form input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    box-sizing: border-box;
    color: #344054;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #c8ced8;
    border-radius: 16px;
    outline: none;
    font: inherit;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-form input::placeholder {
    color: #8b94a2;
}

.auth-form input:hover {
    border-color: #b9b2dc;
}

.auth-form input:focus {
    background: #ffffff;
    border-color: #6856c5;
    box-shadow: 0 0 0 3px rgba(104, 86, 197, 0.10);
}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.auth-forgot,
.auth-forgot-password {
    color: #5f50ad;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.auth-forgot:hover,
.auth-forgot-password:hover {
    color: #4d3e9b;
    text-decoration: underline;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.auth-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 13px 20px;
    box-sizing: border-box;
    color: #ffffff;
    background: linear-gradient( 135deg, #5d4bc1, #7654ca);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(93, 75, 193, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 25px rgba(93, 75, 193, 0.28);
}

.auth-submit:active {
    transform: scale(0.98);
}

.auth-submit span {
    font-size: 20px;
    line-height: 1;
}


/* =========================================================
   AUTH FOOTER
   ========================================================= */

.auth-footer {
    margin-top: 18px;
    text-align: center;
}

.auth-footer p {
    margin: 0 0 7px;
    color: #667085;
    font-size: 14px;
    line-height: 1.45;
}

.auth-footer span {
    color: #667085;
    font-size: 14px;
}

.auth-footer a {
    color: #55469f;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.auth-footer a:hover {
    color: #dd5d3f;
    text-decoration: underline;
}


/* =========================================================
   BOTTOM HELP MESSAGE
   ========================================================= */

.auth-message {
    margin-top: 7px;
    color: #344054;
    font-size: 14px;
    line-height: 1.5;
}

.auth-help-text {
    color: #344054 !important;
}


/* =========================================================
   COMPACT REGISTER PAGE
   Keeps the button visible without unnecessary scrolling
   ========================================================= */

.auth-page--register .auth-card {
    padding: 24px 16px 20px;
}

.auth-page--register .auth-brand {
    margin-bottom: 16px;
}

.auth-page--register .auth-brand__logo {
    width: 50px;
    margin-bottom: 9px;
}

.auth-page--register .auth-eyebrow,
.auth-page--register .auth-brand__eyebrow {
    margin-bottom: 3px;
    font-size: 11px;
}

.auth-page--register .auth-brand h1 {
    font-size: 24px;
}

.auth-page--register .auth-brand p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
}

.auth-page--register .auth-form__group {
    margin-bottom: 13px;
}

.auth-page--register .auth-form__label-row {
    margin-bottom: 6px;
}

.auth-page--register .auth-form__group label {
    font-size: 14px;
}

.auth-page--register .auth-form input {
    height: 46px;
    padding: 0 14px;
}

.auth-page--register .auth-submit {
    min-height: 50px;
    margin-top: 2px;
    font-size: 16px;
}

.auth-page--register .auth-footer {
    margin-top: 14px;
}

.auth-page--register .auth-message {
    margin-top: 5px;
    font-size: 13px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .auth-page {
        min-height: calc(100vh - 155px);
        align-items: center;
        padding: 18px 20px 18px;
    }
    .auth-card {
        padding: 26px 16px 22px;
        border-radius: 26px;
    }
    .auth-brand {
        margin-bottom: 20px;
    }
    .auth-brand__logo {
        width: 54px;
        margin-bottom: 10px;
    }
    .auth-brand h1 {
        font-size: 24px;
    }
    .auth-brand p {
        font-size: 14px;
    }
    .auth-form__group {
        margin-bottom: 15px;
    }
    .auth-form input {
        height: 50px;
    }
    .auth-submit {
        min-height: 52px;
        font-size: 16px;
    }
    .auth-page--register {
        align-items: flex-start;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .auth-page--register .auth-card {
        padding: 22px 16px 18px;
    }
    .auth-page--register .auth-brand {
        margin-bottom: 14px;
    }
    .auth-page--register .auth-brand__logo {
        width: 46px;
        margin-bottom: 8px;
    }
    .auth-page--register .auth-brand h1 {
        font-size: 23px;
    }
    .auth-page--register .auth-form__group {
        margin-bottom: 11px;
    }
    .auth-page--register .auth-form input {
        height: 44px;
    }
    .auth-page--register .auth-submit {
        min-height: 48px;
    }
}


/* =========================================================
   SHORT SCREENS
   Example: small-height mobile / browser viewport
   ========================================================= */

@media (max-height: 750px) {
    .auth-page {
        min-height: calc(100vh - 150px);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .auth-card {
        padding: 18px 16px;
    }
    .auth-brand {
        margin-bottom: 14px;
    }
    .auth-brand__logo {
        width: 50px;
        margin-bottom: 7px;
    }
    .auth-brand h1 {
        font-size: 23px;
    }
    .auth-brand p {
        margin-top: 5px;
        font-size: 13px;
    }
    .auth-form__group {
        margin-bottom: 11px;
    }
    .auth-form input {
        height: 47px;
    }
    .auth-submit {
        min-height: 49px;
    }
    .auth-footer {
        margin-top: 12px;
    }
    .auth-page--register .auth-card {
        padding: 16px 16px 14px;
    }
    .auth-page--register .auth-brand {
        margin-bottom: 10px;
    }
    .auth-page--register .auth-brand__logo {
        width: 42px;
        margin-bottom: 5px;
    }
    .auth-page--register .auth-form__group {
        margin-bottom: 8px;
    }
    .auth-page--register .auth-form input {
        height: 42px;
    }
    .auth-page--register .auth-submit {
        min-height: 46px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .auth-form input,
    .auth-submit {
        transition: none;
    }
}


/* =========================================================
   Profile Flash Success
   ========================================================= */

.profile-flash-success {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid rgba(92, 174, 110, 0.25);
    border-radius: 16px;
    background: rgba(92, 174, 110, 0.10);
    color: #2f6b3d;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    animation: profileFlashIn 0.35s ease;
}

@keyframes profileFlashIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   ENNAPANLAAM - PROFILE
   ========================================================= */

.profile-page {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 110px;
    box-sizing: border-box;
}


/* Hero */

.profile-page__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.profile-page__avatar,
.profile-user-card__avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient( 135deg, #5d4bc1, #7654ca);
    font-weight: 800;
    border-radius: 50%;
}

.profile-page__avatar {
    width: 58px;
    height: 58px;
    font-size: 24px;
}

.profile-page__intro {
    min-width: 0;
}

.profile-page__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7566bd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.profile-page__intro h1 {
    margin: 0;
    color: #29394d;
    font-size: 26px;
    line-height: 1.2;
}

.profile-page__intro p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 14px;
}


/* User card */

.profile-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.14);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(55, 45, 120, 0.05);
}

.profile-user-card__avatar {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.profile-user-card__details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-user-card__details strong {
    color: #29394d;
    font-size: 16px;
}

.profile-user-card__details span {
    overflow: hidden;
    color: #667085;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Sections */

.profile-section {
    margin-bottom: 26px;
}

.profile-section__title {
    margin: 0 0 10px 4px;
    color: #7a8494;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* Menu */

.profile-menu {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.12);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(55, 45, 120, 0.04);
}

.profile-menu__item {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.18s ease, transform 0.18s ease;
}

.profile-menu__item+.profile-menu__item {
    border-top: 1px solid rgba(103, 88, 180, 0.10);
}

.profile-menu__item:hover {
    background: rgba(103, 88, 180, 0.04);
}

.profile-menu__item:active {
    transform: scale(0.99);
}

.profile-menu__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(103, 88, 180, 0.09);
    border-radius: 14px;
    font-size: 19px;
}

.profile-menu__content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-menu__content strong {
    color: #344054;
    font-size: 15px;
}

.profile-menu__content small {
    color: #7a8494;
    font-size: 12px;
    line-height: 1.35;
}

.profile-menu__arrow {
    color: #8c95a4;
    font-size: 28px;
    line-height: 1;
}


/* Logout */

.profile-logout-section {
    padding-top: 2px;
    text-align: center;
}

.profile-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    color: #b6384d;
    background: #fff6f7;
    border: 1px solid rgba(182, 56, 77, 0.15);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease;
}

.profile-logout:hover {
    background: #ffedef;
    transform: translateY(-1px);
}

.profile-logout:active {
    transform: scale(0.97);
}


/* Mobile */

@media (max-width: 480px) {
    .profile-page {
        padding: 20px 16px 105px;
    }
    .profile-page__intro h1 {
        font-size: 23px;
    }
    .profile-section {
        margin-bottom: 22px;
    }
}


/* =========================================================
   ENNAPANLAAM - EDIT PROFILE
   ========================================================= */

.edit-profile-page {
    max-width: 620px;
}

.edit-profile-page__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
}

.edit-profile-page__back {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f3f9c;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.15);
    border-radius: 14px;
    font-size: 23px;
    text-decoration: none;
}

.edit-profile-page__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7566bd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.edit-profile-page__header h1 {
    margin: 0;
    color: #29394d;
    font-size: 27px;
}

.edit-profile-page__header p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 14px;
}

.profile-form {
    padding: 20px;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.14);
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(55, 45, 120, 0.05);
}

.profile-form__group {
    margin-bottom: 20px;
}

.profile-form__group label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 700;
}

.profile-form__group input {
    width: 100%;
    padding: 14px 15px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.22);
    border-radius: 14px;
    font: inherit;
    box-sizing: border-box;
}

.profile-form__group input:focus {
    outline: none;
    border-color: #6758b4;
    box-shadow: 0 0 0 3px rgba(103, 88, 180, 0.10);
}

.profile-form__group input:disabled {
    color: #7a8494;
    background: #f7f7fa;
    cursor: not-allowed;
}

.profile-form__group small {
    display: block;
    margin-top: 7px;
    color: #7a8494;
    font-size: 12px;
}

.profile-form__submit {
    width: 100%;
    margin-top: 4px;
}

.profile-form-message {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

.profile-form-message--error {
    color: #a93648;
    background: #fff4f5;
    border: 1px solid rgba(169, 54, 72, 0.14);
}

@media (max-width: 480px) {
    .edit-profile-page__header h1 {
        font-size: 24px;
    }
    .profile-form {
        padding: 16px;
    }
}


/* =========================================================
   MY REMINDERS & HISTORY
   ========================================================= */

.my-reminders-page {
    max-width: 900px;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.my-reminders-page__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.my-reminders-page__header h1 {
    margin: 2px 0 0;
    color: #29394d;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

.my-reminders-page__header p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   TABS
   ========================================================= */

.reminders-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.15);
    border-radius: 10px;
}

.reminders-tab {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    color: #667085;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.reminders-tab:hover {
    color: #5944b6;
}

.reminders-tab--active {
    color: #5944b6;
    background: linear-gradient( to bottom, #ffffff, rgba(103, 88, 180, 0.04));
    border-bottom-color: #6758b4;
}


/* =========================================================
   REMINDERS SECTION HEADING
   ========================================================= */

.reminders-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    margin-bottom: 12px;
}

.reminders-section-heading h2 {
    flex: 1;
    margin: 0;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.reminders-section-heading>span {
    flex: 0 0 auto;
    margin-left: auto;
    color: #6758b4;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   ACTIVE REMINDERS LIST
   ========================================================= */

.reminders-list {
    display: grid;
    gap: 7px;
}


/* =========================================================
   REMINDER CARD
   ========================================================= */

.reminder-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.14);
    border-left: 3px solid #6758b4;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(55, 45, 120, 0.035);
}


/* When I'm There */

.reminder-card--arrival {
    border-left-color: #6758b4;
}

.reminder-card--arrival .reminder-card__icon {
    background: rgba(103, 88, 180, 0.10);
}

.reminder-card--arrival .reminder-card__type {
    color: #5944b6;
}


/* When I Leave */

.reminder-card--leave {
    border-left-color: #2d9b69;
}

.reminder-card--leave .reminder-card__icon {
    background: rgba(45, 155, 105, 0.10);
}

.reminder-card--leave .reminder-card__type {
    color: #287d55;
}


/* =========================================================
   CARD ICON
   ========================================================= */

.reminder-card__icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    font-size: 19px;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.reminder-card__content {
    min-width: 0;
}

.reminder-card__type {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1px;
}

.reminder-card__content h3 {
    margin: 0;
    color: #29394d;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminder-card__content p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.reminder-card__location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminder-card__schedule {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}


/* =========================================================
   CARD STATUS
   ========================================================= */

.reminder-card__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.reminder-status-badge {
    padding: 5px 10px;
    color: #28754d;
    background: #edf8f1;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.reminder-card__status small {
    color: #667085;
    font-size: 10px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.reminders-empty-state {
    padding: 28px 18px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.14);
    border-radius: 12px;
}

.reminders-empty-state__icon {
    margin-bottom: 8px;
    font-size: 28px;
}

.reminders-empty-state h3 {
    margin: 0;
    color: #344054;
    font-size: 15px;
}

.reminders-empty-state p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 12px;
}


/* =========================================================
   HISTORY
   ========================================================= */

.reminders-history-list {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.14);
    border-radius: 10px;
}

.reminders-history-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(103, 88, 180, 0.10);
}

.reminders-history-item:last-child {
    border-bottom: 0;
}

.reminders-history-item__icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: #2d9b69;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.reminders-history-item__content {
    min-width: 0;
}

.reminders-history-item__type {
    display: block;
    margin-bottom: 2px;
    color: #7566bd;
    font-size: 10px;
    font-weight: 700;
}

.reminders-history-item h3 {
    margin: 0;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminders-history-item p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminders-history-item__date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.reminders-history-item__date span {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.reminders-history-item__date small {
    color: #98a2b3;
    font-size: 10px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .reminder-card__status {
        min-width: 58px;
    }
    .reminders-section-heading {
        gap: 24px;
    }
    .reminders-section-heading h2 {
        font-size: 12px;
    }
    .reminders-section-heading>span {
        font-size: 12px;
    }
    .reminder-card__status small {
        margin-top: 2px;
    }
    .my-reminders-page__header {
        gap: 10px;
        margin-bottom: 18px;
    }
    .my-reminders-page__header h1 {
        font-size: 22px;
    }
    .my-reminders-page__header p {
        font-size: 13px;
    }
    .reminders-tab {
        min-height: 40px;
        font-size: 12px;
    }
    @media (max-width: 600px) {
        .reminders-tab {
            min-height: 58px;
            gap: 5px;
            font-size: 12px;
        }
        .reminder-card {
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 12px;
            padding: 14px;
        }
        /* Icon */
        .reminder-card__icon {
            grid-column: 1;
            grid-row: 1 / 3;
            width: 48px;
            height: 48px;
        }
        /* Main content */
        .reminder-card__content {
            grid-column: 2;
            min-width: 0;
        }
        /* Status */
        .reminder-card__status {
            grid-column: 3;
            grid-row: 1;
            align-items: flex-end;
            flex-direction: column;
        }
        /* Action buttons */
        .reminder-card__actions {
            grid-column: 3;
            grid-row: 2;
            justify-content: flex-end;
            gap: 8px;
        }
        /* Location text gets more space */
        .reminder-card__content p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }
        /* Date */
        .reminder-card__content p+p {
            white-space: nowrap;
        }
        .reminder-action-button {
            width: 40px;
            height: 40px;
            font-size: 17px;
        }
    }
    .reminder-status-badge {
        padding: 5px 8px;
        font-size: 9px;
    }
    .reminders-history-item {
        gap: 10px;
        padding: 10px 11px;
    }
    .reminder-action-button {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}


/* =========================================================
   SMALL MOBILE SCREENS
   ========================================================= */

@media (max-width: 380px) {
    .reminder-card {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .reminder-card__status {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        margin-top: 2px;
    }
    .reminders-history-item {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .reminders-history-item__date {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
    }
}


/* =========================================================
   REMINDER ACTIONS
   ========================================================= */

.reminder-card__actions {
    display: flex;
    align-items: center;
}

.reminder-card__actions form {
    margin: 0;
}

.reminder-action-button {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.14);
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.reminder-action-button:hover {
    transform: translateY(-1px);
}

.reminder-action-button--delete:hover {
    background: #fff5f5;
}

.reminder-action-button--delete {
    color: #d92d20;
    border-color: rgba(217, 45, 32, 0.20);
    background: #fffafa;
}

.reminder-action-button--delete span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

.reminder-action-button--delete:hover {
    color: #ffffff;
    background: #d92d20;
}

.reminder-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Make each form behave properly */

.reminder-card__actions form {
    margin: 0;
}


/* Common action button */

.reminder-action-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #ffffff;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}


/* Pause */

.reminder-action-button--toggle {
    color: #5944b6;
    border: 1px solid rgba(103, 88, 180, 0.18);
    font-weight: 700;
}


/* Delete */

.reminder-action-button--delete {
    color: #d92d20;
    background: #fffafa;
    border: 1px solid rgba(217, 45, 32, 0.20);
}


/* Hover */

.reminder-action-button--toggle:hover {
    background: rgba(103, 88, 180, 0.08);
}

.reminder-action-button--delete:hover {
    color: #ffffff;
    background: #d92d20;
}


/* Paused reminder card */

.reminder-card--paused {
    border-left-color: #d99a2b;
}


/* Edit button */

.reminder-action-button--edit {
    color: #475467;
    text-decoration: none;
    border: 1px solid rgba(71, 84, 103, 0.18);
    background: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.reminder-action-button--edit:hover {
    color: #ffffff;
    background: #475467;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-page {
    max-width: 900px;
}


/* =========================================================
   WELCOME
   ========================================================= */

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.dashboard-welcome__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #6758b4;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dashboard-welcome h1 {
    margin: 0;
    color: #29394d;
    font-size: 28px;
    line-height: 1.25;
}

.dashboard-welcome h1 strong {
    color: #5944b6;
}

.dashboard-welcome p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.6;
}

.dashboard-welcome__art {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(255, 184, 77, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.18);
    border-radius: 20px;
    font-size: 30px;
}


/* =========================================================
   DASHBOARD — COMPACT MOBILE-FIRST
   ========================================================= */

.dashboard-page {
    max-width: 900px;
}


/* =========================================================
   WELCOME CARD
   ========================================================= */

.dashboard-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    background: linear-gradient( 135deg, #6758b4, #7c6bc4);
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(103, 88, 180, 0.16);
}

.dashboard-welcome-card h1 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.3;
}

.dashboard-welcome-card h1 strong {
    font-weight: 800;
}

.dashboard-welcome-card p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-welcome-card__art {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    font-size: 30px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.dashboard-section--compact {
    margin-top: 22px;
}

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

.dashboard-section__heading h2 {
    margin: 0;
    color: #475467;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.dashboard-section__heading a {
    color: #6758b4;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   OVERVIEW — 4 CARDS IN ONE ROW
   ========================================================= */

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-overview-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 7px;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(55, 45, 120, 0.035);
    text-align: center;
    text-decoration: none;
}

.dashboard-overview-card__icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 11px;
    font-size: 17px;
}

.dashboard-overview-card__icon--active {
    background: rgba(103, 88, 180, 0.12);
}

.dashboard-overview-card__icon--paused {
    background: rgba(245, 158, 11, 0.12);
}

.dashboard-overview-card__icon--completed {
    color: #28754d;
    background: #edf8f1;
    font-weight: 800;
}

.dashboard-overview-card__icon--price {
    background: rgba(52, 104, 209, 0.10);
}

.dashboard-overview-card__number {
    margin-bottom: 3px;
    color: #29394d;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-overview-card__label {
    min-height: 31px;
    color: #667085;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.dashboard-overview-card small {
    display: block;
    margin-top: 5px;
    color: #6758b4;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   QUICK ACTIONS — 3 IN ONE ROW
   ========================================================= */

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-quick-action {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 13px 7px;
    color: inherit;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.12);
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
}

.dashboard-quick-action__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
}

.dashboard-quick-action__icon--there {
    background: rgba(103, 88, 180, 0.12);
}

.dashboard-quick-action__icon--leave {
    background: rgba(38, 162, 105, 0.10);
}

.dashboard-quick-action__icon--create {
    color: #ffffff;
    background: #6758b4;
    font-size: 23px;
}

.dashboard-quick-action h3 {
    margin: 0;
    color: #344054;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-quick-action p {
    display: none;
}


/* =========================================================
   RESERVED AD SPACE
   ========================================================= */

.dashboard-ad-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 11px 13px;
    background: linear-gradient( 135deg, rgba(103, 88, 180, 0.05), rgba(255, 184, 77, 0.07));
    border: 1px dashed rgba(103, 88, 180, 0.20);
    border-radius: 15px;
}

.dashboard-ad-slot__icon {
    font-size: 18px;
}

.dashboard-ad-slot strong {
    display: block;
    color: #475467;
    font-size: 11px;
}

.dashboard-ad-slot small {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 10px;
}

.dashboard-ad-slot__arrow {
    margin-left: auto;
    color: #6758b4;
    font-size: 16px;
}


/* =========================================================
   RECENT ACTIVITY
   ========================================================= */

.dashboard-section--activity {
    margin-bottom: 24px;
}

.dashboard-activity-list {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.12);
    border-radius: 16px;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid rgba(103, 88, 180, 0.09);
}

.dashboard-activity-item:last-child {
    border-bottom: 0;
}

.dashboard-activity-item__icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 15px;
}

.dashboard-activity-item__icon--completed {
    color: #ffffff;
    background: #26a269;
    font-weight: 800;
}

.dashboard-activity-item__icon--active {
    background: rgba(103, 88, 180, 0.12);
}

.dashboard-activity-item__icon--paused {
    background: rgba(245, 158, 11, 0.12);
}

.dashboard-activity-item__content {
    min-width: 0;
}

.dashboard-activity-item h3 {
    margin: 0;
    color: #344054;
    font-size: 12px;
}

.dashboard-activity-item p {
    margin: 3px 0;
    overflow: hidden;
    color: #667085;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-activity-item small {
    color: #98a2b3;
    font-size: 9px;
}

.dashboard-activity-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dashboard-activity-status {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
}

.dashboard-activity-status--completed {
    color: #28754d;
    background: #edf8f1;
}

.dashboard-activity-status--active {
    color: #5944b6;
    background: rgba(103, 88, 180, 0.10);
}

.dashboard-activity-status--paused {
    color: #a16207;
    background: rgba(245, 158, 11, 0.12);
}

.dashboard-activity-arrow {
    color: #98a2b3;
    font-size: 16px;
    line-height: 1;
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
    .dashboard-welcome-card {
        padding: 17px;
    }
    .dashboard-welcome-card h1 {
        font-size: 19px;
    }
    .dashboard-welcome-card__art {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
    .dashboard-overview-grid,
    .dashboard-quick-actions {
        gap: 6px;
    }
    .dashboard-overview-card {
        padding: 10px 4px;
    }
    .dashboard-overview-card__label,
    .dashboard-quick-action h3 {
        font-size: 9px;
    }
    .dashboard-overview-card__number {
        font-size: 20px;
    }
}


/* =========================================================
   REUSABLE BACK BUTTON
   ========================================================= */

.app-back-button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #5944b6;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.18);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(55, 45, 120, 0.04);
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.app-back-button:hover {
    background: rgba(103, 88, 180, 0.06);
    transform: translateX(-2px);
}

.app-back-button:active {
    transform: scale(0.96);
}


/* =========================================================
   WHEN I'M THERE — FEATURE PAGE
   ========================================================= */


/* ---------------------------------------------------------
   CREATE REMINDER BUTTON
   --------------------------------------------------------- */

.when-there-create-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 14px;
    padding: 16px 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #51409a, #39277f);
    border-radius: 18px;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(57, 39, 127, 0.25);
}


/* Plus icon */

.when-there-create-button__icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    font-size: 28px;
    line-height: 1;
}


/* Text area */

.when-there-create-button__content {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


/* Main text */

.when-there-create-button__content strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}


/* Subtitle */

.when-there-create-button__content small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   FEATURE ILLUSTRATION
   Removes excess empty sky inside the generated image.
   --------------------------------------------------------- */

.when-there-page__illustration {
    width: 100%;
    height: 325px;
    margin: 0 0 8px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.when-there-page__illustration img {
    display: block;
    width: 118%;
    max-width: none;
    height: auto;
    margin-left: -9%;
    transform: translateY(-55px);
    object-fit: contain;
}


/* ---------------------------------------------------------
   INFO CARD
   --------------------------------------------------------- */

.when-there-info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient( 135deg, rgba(103, 88, 180, 0.10), rgba(255, 255, 255, 0.90));
    border: 1px solid rgba(103, 88, 180, 0.12);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(55, 45, 120, 0.04);
}

.when-there-info-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    background: rgba(103, 88, 180, 0.12);
    border-radius: 16px;
    font-size: 25px;
}

.when-there-info-card h2 {
    margin: 0 0 5px;
    color: #344054;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.when-there-info-card p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   YOUR REMINDERS
   --------------------------------------------------------- */

.when-there-reminders {
    margin-top: 18px;
}

.when-there-reminders__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.when-there-reminders__heading h2 {
    margin: 0;
    color: #475467;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.when-there-reminders__heading a {
    color: #6758b4;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.when-there-reminders__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Individual reminder card */

.when-there-reminder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: #ffffff;
    border: 1px solid rgba(103, 88, 180, 0.12);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(55, 45, 120, 0.03);
}

.when-there-reminder-item__icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    background: rgba(103, 88, 180, 0.09);
    border-radius: 11px;
    font-size: 18px;
}

.when-there-reminder-item__content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.when-there-reminder-item__content strong {
    overflow: hidden;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.when-there-reminder-item__content small {
    overflow: hidden;
    margin-top: 2px;
    color: #667085;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.when-there-reminder-item__status {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: #4f8a69;
    background: rgba(79, 138, 105, 0.10);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 380px) {
    .when-there-page__header {
        gap: 12px;
        margin-bottom: 16px;
        position: relative;
        z-index: 2;
    }
    .when-there-page__header h1 {
        font-size: 23px;
    }
    .when-there-page__header p {
        font-size: 13px;
    }
    /* Crop illustration more tightly on small screens */
    .when-there-page__illustration {
        height: 305px;
    }
    .when-there-page__illustration img {
        width: 120%;
        margin-left: -10%;
        transform: translateY(-50px);
    }
    .when-there-info-card {
        gap: 12px;
        padding: 14px;
    }
    .when-there-info-card__icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 22px;
    }
    .when-there-info-card h2 {
        font-size: 14px;
    }
    .when-there-create-button {
        gap: 12px;
        padding: 15px;
    }
    .when-there-create-button__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 26px;
    }
    .when-there-create-button__content strong {
        font-size: 14px;
    }
    .when-there-create-button__content small {
        font-size: 10px;
    }
    .when-there-reminder-item {
        gap: 10px;
        padding: 10px 11px;
    }
    .when-there-reminder-item__icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}


/* =========================================================
   MORE PAGE
   ========================================================= */

.more-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 20px;
}


/* =========================================================
   HEADER
   ========================================================= */

.more-page__header {
    margin-bottom: 18px;
}

.more-page__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.more-page__header h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 700;
}

.more-page__header p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}


/* =========================================================
   PROFILE CARD
   ========================================================= */

.more-profile-card {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px;
    margin-bottom: 24px;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.more-profile-card:hover {
    transform: translateY(-1px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}


/* Avatar */

.more-profile-card__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}


/* Content */

.more-profile-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 13px;
}

.more-profile-card__content strong {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
}

.more-profile-card__content span {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
}


/* Arrow */

.more-profile-card__arrow {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 24px;
    line-height: 1;
}


/* =========================================================
   MENU SECTION
   ========================================================= */

.more-menu-section__title {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   MENU LIST
   ========================================================= */

.more-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* =========================================================
   MENU ITEM
   ========================================================= */

.more-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 66px;
    padding: 11px 13px;
    box-sizing: border-box;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.more-menu-item:hover {
    transform: translateY(-1px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}


/* Button version */

button.more-menu-item {
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}


/* =========================================================
   MENU ICON
   ========================================================= */

.more-menu-item__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
}


/* Icon backgrounds */

.more-menu-item__icon--profile {
    background: #ede9fe;
}

.more-menu-item__icon--reminders {
    background: #fef3c7;
}

.more-menu-item__icon--settings {
    background: #e0f2fe;
}

.more-menu-item__icon--help {
    background: #dcfce7;
}

.more-menu-item__icon--rate {
    background: #fef3c7;
}

.more-menu-item__icon--share {
    background: #ede9fe;
}

.more-menu-item__icon--about {
    background: #e0e7ff;
}


/* =========================================================
   MENU CONTENT
   ========================================================= */

.more-menu-item__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 12px;
}

.more-menu-item__content strong {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
}

.more-menu-item__content small {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.35;
}


/* =========================================================
   MENU ARROW
   ========================================================= */

.more-menu-item__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 21px;
    line-height: 1;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.more-logout-section {
    margin-top: 18px;
}

.more-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    box-sizing: border-box;
    text-decoration: none;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.more-logout:hover {
    background: #ffe4e6;
    border-color: #fda4af;
}

.more-logout__icon {
    font-size: 18px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.more-page__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 10px 6px;
    text-align: center;
}

.more-page__footer strong {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
}

.more-page__footer span {
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 10px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .more-page {
        padding-bottom: 12px;
    }
    .more-page__header h1 {
        font-size: 22px;
    }
    .more-profile-card {
        padding: 13px;
    }
    .more-profile-card__avatar {
        width: 48px;
        height: 48px;
    }
    .more-menu-item {
        min-height: 62px;
        padding: 10px 11px;
    }
    .more-menu-item__icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    .more-menu-item__content strong {
        font-size: 12px;
    }
    .more-menu-item__content small {
        font-size: 10px;
    }
}


/* =========================================================
   ENNAPANLAAM SETTINGS
   ========================================================= */

.settings-section {
    margin-top: 20px;
}

.settings-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   SETTINGS CARD
   --------------------------------------------------------- */

.settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    box-sizing: border-box;
}

.settings-card-content {
    min-width: 0;
}

.settings-card-content h3 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
}

.settings-card-content p {
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}

#currentTimezoneDisplay {
    color: #333;
    font-size: 14px;
}


/* ---------------------------------------------------------
   CHANGE BUTTON
   --------------------------------------------------------- */

.settings-action-button {
    flex-shrink: 0;
    min-width: 80px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.settings-action-button:hover {
    opacity: 0.9;
}

.settings-action-button:active {
    transform: scale(0.97);
}


/* ---------------------------------------------------------
   TIMEZONE MODAL
   --------------------------------------------------------- */

#timezoneModal {
    backdrop-filter: blur(3px);
}

#timezoneModal>div {
    animation: settingsTimezoneModalIn 0.18s ease-out;
}

@keyframes settingsTimezoneModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ---------------------------------------------------------
   TIMEZONE SELECT
   --------------------------------------------------------- */

#timezone {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    color: #222;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

#timezone:focus {
    border-color: #111827;
}


/* ---------------------------------------------------------
   SUCCESS / ERROR MESSAGE
   --------------------------------------------------------- */

.settings-message {
    font-size: 13px;
    font-weight: 500;
}

.settings-message.success {
    border: 1px solid #cfe8d5;
}

.settings-message.error {
    border: 1px solid #f0cccc;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .settings-section {
        margin-top: 16px;
    }
    .settings-section h2 {
        font-size: 17px;
    }
    .settings-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        padding: 16px;
    }
    .settings-card-content {
        width: 100%;
    }
    #currentTimezoneDisplay {
        margin-top: 7px;
        word-break: break-word;
    }
    .settings-card .settings-action-button {
        width: 100%;
    }
    #timezoneModal {
        padding: 16px;
    }
    #timezoneModal>div {
        max-width: none;
        padding: 18px;
        border-radius: 14px;
    }
    #timezoneModal .settings-action-button {
        min-width: 0;
        flex: 1;
    }
}