/* ==================================
   RESET
================================== */
@font-face {
    font-family: 'Vazir-Thin.ttf';
    src: url('fonts/Vazir-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

body {
    font-family: 'Vazir-Thin.ttf', sans-serif;
    background: linear-gradient(135deg, #F0F4FF 0%, #F7F5FF 50%, #FFFFFF 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

/* =====================================
   AUTH PAGE
===================================== */
#authPage {
    min-height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: linear-gradient(135deg, #EEF2FF 0%, #F5F0FF 50%, #FFFFFF 100%);
}

.auth-container {
    position: relative;
    width: 1100px;
    max-width: 100%;
    min-height: 680px;
    background: #FFFFFF;
    border-radius: 40px;
    overflow: hidden;
    box-shadow:
        0 40px 100px rgba(109, 78, 255, 0.12),
        0 8px 32px rgba(109, 78, 255, 0.06);
    border: 1px solid rgba(109, 78, 255, 0.08);
}

/* فرم ها */
.form-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    padding: 60px 50px;
    background: #FFFFFF;
    transition: .65s cubic-bezier(.77, 0, .175, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

.login-panel {
    right: 0;
    z-index: 2;
}

.register-panel {
    right: 0;
    opacity: 0;
    z-index: 1;
}

/* حالت ثبت نام */
.auth-container.register-mode .login-panel {
    transform: translateX(-100%);
    opacity: 0;
}

.auth-container.register-mode .register-panel {
    transform: translateX(-100%);
    opacity: 1;
    z-index: 5;
}

/* =====================================
   OVERLAY
===================================== */
.overlay-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(145deg, #8B72FF, #6D4EFF, #5A3AEF);
    border-radius: 0 120px 120px 0;
    transition: .65s cubic-bezier(.77, 0, .175, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    overflow: hidden;
}

.overlay-panel::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    top: -100px;
    right: -80px;
    border-radius: 50%;
    background: radial-gradient(rgba(255, 255, 255, .18), transparent 70%);
    pointer-events: none;
}

.overlay-panel::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: -60px;
    left: -60px;
    border-radius: 50%;
    background: radial-gradient(rgba(255, 255, 255, .10), transparent 70%);
    pointer-events: none;
}

.auth-container.register-mode .overlay-panel {
    transform: translateX(100%);
    border-radius: 120px 0 0 120px;
}

.overlay-content {
    width: 80%;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

#loginOverlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#registerOverlay {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.overlay-content img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    margin-bottom: 24px;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .2));
    animation: botFloat 4s ease-in-out infinite;
}

@keyframes botFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.overlay-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: -.5px;
}

.overlay-content p {
    font-size: 15px;
    opacity: .88;
    line-height: 2;
}

.switch-btn {
    margin-top: 28px;
    width: 175px;
    height: 52px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.switch-btn:hover {
    background: rgba(255, 255, 255, .24);
    transform: translateY(-2px);
}

/* =====================================
   FORM
===================================== */
.auth-header {
    margin-bottom: 32px;
}

.auth-header h2 {
    font-size: 32px;
    color: #1A1638;
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.auth-header p {
    color: #7C7A9A;
    font-size: 15px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-group label {
    color: #3D3A5C;
    font-size: 13px;
    font-weight: 700;
    padding-right: 4px;
}

.auth-group input {
    height: 56px;
    border: 1.5px solid #ECEAF8;
    border-radius: 16px;
    padding: 0 18px;
    background: #F8F7FE;
    font-size: 14px;
    color: #1A1638;
    transition: .3s;
    font-family: inherit;
    outline: none;
}

.auth-group input::placeholder { color: #B0AEC9; }

.auth-group input:focus {
    background: #FFFFFF;
    border-color: #7C5DFA;
    box-shadow: 0 0 0 4px rgba(124, 93, 250, .1);
}

.auth-btn {
    margin-top: 14px;
    height: 56px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 16px 32px rgba(109, 78, 255, .28);
    font-family: inherit;
}

.auth-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(109, 78, 255, .36);
    filter: brightness(1.06);
}

.auth-btn:active { transform: scale(.97); }

/* =====================================
   MOBILE RESPONSIVE
===================================== */
@media (max-width: 768px) {
    #authPage { padding: 0; min-height: 100vh; }

    .auth-container {
        padding: 0;
        width: 100%;
        min-height: 100vh;
        height: 100vh;
        max-width: none;
        border-radius: 0;
    }

    .overlay-panel {
        width: 100%;
        height: 260px;
        top: 0;
        left: 0;
        border-radius: 0 0 40px 40px;
    }

    .overlay-content img { width: 88px; height: 88px; margin-bottom: 10px; }
    .overlay-content h2  { font-size: 26px; margin-bottom: 8px; }
    .overlay-content p   { font-size: 13px; line-height: 1.8; }
    .switch-btn          { width: 138px; height: 46px; margin-top: 14px; }

    .form-panel {
        width: 100%;
        height: 100%;
        padding: 290px 24px 40px 24px;
        overflow: auto;
    }

    .login-panel, .register-panel { right: 0; }

    .auth-container.register-mode .overlay-panel,
    .auth-container.register-mode .login-panel,
    .auth-container.register-mode .register-panel { transform: none; }

    .auth-header h2 { font-size: 28px; }
    .auth-form { gap: 14px; }
    .auth-group input { height: 52px; font-size: 14px; }
    .auth-btn { height: 52px; }
}

/* ==================================
   HOME PAGE
================================== */
#homePage {
    max-width: 1300px;
    min-height: auto;
    margin: auto;
    padding: 25px 25px 120px 25px;
    background: #FFFFFF;
    border-radius: 40px;
    box-shadow:
        0 24px 64px rgba(109, 78, 255, .08),
        0 4px 16px rgba(0, 0, 0, .04);
    position: relative;
}

/* ==================================
   HEADER
================================== */
.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

/* =========================================
   SOS BUTTON
========================================= */
.sos-emergency-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #FF6B7A, #FF3D54);
    box-shadow: 0 10px 24px rgba(255, 61, 84, .30);
    transition: .3s;
    position: relative;
}

.sos-emergency-btn::before,
.sos-emergency-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #FF3D54;
    animation: sosPing 1.9s infinite;
    opacity: 0;
}
.sos-emergency-btn::after { animation-delay: .22s; }

@keyframes sosPing {
    0%   { transform: scale(1);    opacity: .65; }
    14%  { transform: scale(1.2);  opacity: .35; }
    28%  { transform: scale(1);    opacity: .55; }
    44%  { transform: scale(1.4);  opacity: 0; }
    100% { transform: scale(1.4);  opacity: 0; }
}

.sos-emergency-btn:hover  { transform: scale(1.07); box-shadow: 0 16px 32px rgba(255, 61, 84, .40); }
.sos-emergency-btn:active { transform: scale(.94); }

.sos-button-text {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .6px;
}

.circle-btn {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 20px;
    box-shadow:
        0 8px 24px rgba(109, 78, 255, .10),
        0 0 0 1px rgba(109, 78, 255, .06);
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(109, 78, 255, .15); }

/* =========================================
   SOS MODAL OVERLAY
========================================= */
.sos-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(10, 8, 30, .52);
    backdrop-filter: blur(12px);
    z-index: 99999;
}

.sos-modal.show { display: flex; animation: bgFade .25s ease; }
@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   MODAL CARD
========================================= */
.sos-modal-card {
    width: 90%;
    max-width: 420px;
    background: #FFFFFF;
    border-radius: 32px;
    padding: 32px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, .18),
        0 0 0 1px rgba(255, 61, 84, .1);
    text-align: center;
    animation: sosPopup .28s cubic-bezier(.16, 1, .3, 1);
}

@keyframes sosPopup {
    from { opacity: 0; transform: translateY(24px) scale(.93); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#sosModalTitle {
    margin: 0 0 12px 0;
    color: #EF4444;
    font-size: 24px;
    font-weight: 900;
}

#sosModalMessage {
    margin: 0;
    color: #6B7280;
    line-height: 2;
    font-size: 14px;
}

.sos-countdown-container {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}

#sosCountdownValue {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #FF6B7A, #EF4444);
    box-shadow: 0 12px 28px rgba(239, 68, 68, .35);
    animation: countPulse 1s ease-in-out infinite;
}

@keyframes countPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.sos-modal-actions { display: flex; gap: 12px; }

.cancel-sos-btn {
    flex: 1;
    height: 52px;
    border: 1.5px solid #EDE9FF;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #6B7280;
    background: #F5F3FF;
    transition: .25s;
    font-family: inherit;
}
.cancel-sos-btn:hover { background: #EDE9FF; }

.confirm-sos-btn {
    flex: 1;
    height: 52px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #FF6B7A, #EF4444);
    box-shadow: 0 10px 24px rgba(239, 68, 68, .28);
    transition: .25s;
    font-family: inherit;
}
.confirm-sos-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.cancel-sos-btn:active, .confirm-sos-btn:active { transform: scale(.96); }

@media (max-width: 768px) {
    .sos-modal-card { width: 92%; padding: 24px; border-radius: 26px; }
    #sosModalTitle    { font-size: 20px; }
    #sosCountdownValue { width: 80px; height: 80px; font-size: 32px; }
}

/* ==================================
   HERO CARD
================================== */
.hero-section {
    background: linear-gradient(135deg, #FAFBFF 0%, #F3F0FF 100%);
    border: 1px solid rgba(109, 78, 255, .08);
    border-radius: 36px;
    padding: 36px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    box-shadow:
        0 20px 48px rgba(109, 78, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    top: -110px;
    left: -80px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .07), transparent 70%);
    pointer-events: none;
}

.content-side { width: 55%; text-align: right; position: relative; z-index: 1; }

.welcome-title {
    font-size: 44px;
    font-weight: 900;
    color: #1A1638;
    margin-bottom: 6px;
    line-height: 1.2;
    letter-spacing: -.5px;
}

#userName { color: #6D4EFF; }

.welcome-subtitle {
    color: #7C7A9A;
    font-size: 17px;
    margin-bottom: 14px;
}

.purple-line {
    width: 88px;
    height: 4px;
    border-radius: 50px;
    background: linear-gradient(90deg, #A87DFF, #6D4EFF);
    margin-bottom: 18px;
    box-shadow: 0 3px 12px rgba(109, 78, 255, .28);
}

.assistant-bubble {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(109, 78, 255, .10);
    padding: 18px 20px;
    font-size: 14px;
    color: #5A5870;
    line-height: 2;
    position: relative;
    box-shadow: 0 10px 28px rgba(109, 78, 255, .07);
}

.assistant-bubble::after {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 18px;
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-left: 1px solid rgba(109, 78, 255, .10);
    border-bottom: 1px solid rgba(109, 78, 255, .10);
    transform: rotate(45deg);
}

.robot-side {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#homeRobot {
    width: 270px;
    max-width: 100%;
    animation: floatRobot 4s ease-in-out infinite;
    filter: drop-shadow(0 24px 36px rgba(109, 78, 255, .18));
}

@keyframes floatRobot {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-13px); }
    100% { transform: translateY(0); }
}

/* ==================================
   CHAT CARD
================================== */
#chatCard {
    height: 115px;
    border-radius: 30px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #9F73FF 0%, #7C4DFF 50%, #5D2FFF 100%);
    box-shadow: 0 24px 48px rgba(109, 78, 255, .32);
    margin-bottom: 24px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: .35s cubic-bezier(.16, 1, .3, 1);
    border: 1px solid rgba(255, 255, 255, .15);
}

#chatCard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
    pointer-events: none;
}

#chatCard:hover  { transform: translateY(-4px); box-shadow: 0 34px 60px rgba(109, 78, 255, .40); }
#chatCard:active { transform: translateY(-2px) scale(.99); }

.chat-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    animation: arrowFloat 2.2s ease-in-out infinite;
}
@keyframes arrowFloat { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
.chat-arrow img { filter: brightness(0) invert(1); }

.chat-content { flex: 1; text-align: right; padding: 0 16px; color: #fff; }
.chat-content h3 { font-size: 22px; font-weight: 800; margin-bottom: 5px; }
.chat-content p  { font-size: 14px; opacity: .88; }

.chat-icon {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}
.chat-icon img { filter: brightness(0) invert(1); }

@media (max-width: 768px) {
    #homePage { border-radius: 0; padding: 18px 20px 120px 20px; }
    .hero-section { padding: 20px; gap: 12px; }
    .robot-side { width: 44%; }
    .content-side { width: 56%; }
    #homeRobot { width: 160px; }
    .welcome-title { font-size: 38px; }
    .welcome-subtitle { font-size: 14px; }
    .assistant-bubble { font-size: 13px; }
}

@media (min-width: 769px) {
    .welcome-title    { font-size: 58px; }
    .welcome-subtitle { font-size: 22px; }
    .assistant-bubble { font-size: 17px; padding: 24px; }
    .chat-content h3  { font-size: 30px; }
    .chat-content p   { font-size: 17px; }
    #chatCard         { height: 130px; }
}

/* =========================================
   NEARBY HEALTH SERVICES
========================================= */
#nearbyHealthServicesSection {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    margin: 22px 0;
}

.nearby-services-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.nearby-services-header { margin-bottom: 18px; }

#nearbyServicesTitle {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1A1638;
}

.nearby-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.nearby-service-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #FAFBFF, #F5F2FF);
    border: 1px solid rgba(109, 78, 255, .10);
    border-radius: 28px;
    padding: 22px;
    backdrop-filter: blur(16px);
    box-shadow:
        0 10px 32px rgba(109, 78, 255, .07),
        0 2px 8px rgba(0, 0, 0, .03);
    transition: transform .32s, box-shadow .32s, border-color .32s;
}

.nearby-service-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .10), transparent 70%);
    pointer-events: none;
}

.nearby-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(109, 78, 255, .20);
    box-shadow: 0 22px 50px rgba(109, 78, 255, .13);
}

.nearby-service-type,
.nearby-service-card > .nearby-service-top:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    font-size: .76rem;
    font-weight: 700;
    color: #6D4EFF;
    background: rgba(109, 78, 255, .08);
    border: 1px solid rgba(109, 78, 255, .16);
}

.nearby-service-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.nearby-service-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(109, 78, 255, .12), rgba(109, 78, 255, .06));
    border: 1px solid rgba(109, 78, 255, .12);
}

.nearby-service-icon img { width: 32px; height: 32px; object-fit: contain; }

.nearby-service-info { flex: 1; min-width: 0; }

.nearby-service-name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1A1638;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 22px;
}

.nearby-service-distance {
    display: block;
    margin-top: 5px;
    color: #6D4EFF;
    font-size: 13px;
    font-weight: 700;
}

.nearby-service-address {
    min-height: 40px;
    color: #7C7A9A;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.nearby-route-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    box-shadow: 0 10px 26px rgba(109, 78, 255, .24);
    transition: .28s;
    font-family: inherit;
}

.nearby-route-btn:hover  { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(109, 78, 255, .34); }
.nearby-route-btn:active { transform: scale(.97); }

@media (max-width: 900px) { .nearby-services-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    #nearbyHealthServicesSection { margin: 18px 0; }
    .nearby-service-card { padding: 18px; border-radius: 22px; }
    .nearby-service-icon { width: 54px; height: 54px; }
    .nearby-service-name { font-size: 16px; }
    .nearby-route-btn    { height: 48px; border-radius: 14px; }
}
@media (max-width: 480px) {
    .nearby-service-card { padding: 14px; border-radius: 18px; }
    .nearby-service-icon img { width: 28px; height: 28px; }
}

/* =========================================
   SHORTCUT SECTION
========================================= */
.shortcut-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.shortcut-section h2 {
    font-size: 28px;
    font-weight: 900;
    color: #1A1638;
    margin-bottom: 22px;
    letter-spacing: -.3px;
}

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.shortcut-card {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(109, 78, 255, .08);
    border-radius: 28px;
    min-height: 165px;
    padding: 16px 10px;
    text-align: center;
    cursor: pointer;
    transition: .42s cubic-bezier(.16, 1, .3, 1);
    box-shadow:
        0 12px 36px rgba(109, 78, 255, .07),
        0 2px 8px rgba(0, 0, 0, .03);
}

.shortcut-card::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    bottom: -50px;
    left: -50px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .08), transparent 70%);
    filter: blur(12px);
}

.shortcut-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(109, 78, 255, .18);
    box-shadow: 0 28px 64px rgba(109, 78, 255, .16);
}

.shortcut-card:active { transform: translateY(-4px) scale(.98); }

.shortcut-icon {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 14px 30px rgba(109, 78, 255, .22);
}

.shortcut-card:nth-child(1) .shortcut-icon { background: linear-gradient(135deg, #A87DFF, #6D4EFF); }
.shortcut-card:nth-child(2) .shortcut-icon { background: linear-gradient(135deg, #60CFFF, #2FA8FF); }
.shortcut-card:nth-child(3) .shortcut-icon { background: linear-gradient(135deg, #5EECC5, #18BF8E); }

.shortcut-icon img { width: 34px; height: 34px; filter: brightness(0) invert(1); }

.shortcut-card span {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #1A1638;
    margin-bottom: 4px;
}

.shortcut-card small {
    position: relative;
    z-index: 2;
    display: block;
    color: #8B8AAB;
    font-size: 12px;
}

@media (max-width: 768px) {
    .shortcut-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .shortcut-card { padding: 10px 4px; min-height: 108px; }
    .shortcut-icon { width: 52px; height: 52px; margin-bottom: 10px; }
    .shortcut-icon img { width: 28px; height: 28px; }
    .shortcut-card span { font-size: 12px; }
}

@media (max-width: 800px) {
    .shortcut-grid { grid-template-columns: repeat(2, 1fr); }
    .shortcut-card { min-height: 44px; }
    .shortcut-icon { width: 64px; height: 64px; }
}

/* ===================================
   NEXT REMINDER CARD
=================================== */
#nextReminderCard {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #FFFFFF, #EEF0FF);
    border: 1px solid rgba(109, 78, 255, .10);
    box-shadow:
        0 20px 50px rgba(109, 78, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(20px);
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#nextReminderCard::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(rgba(109, 78, 255, .08), transparent 70%);
    top: -80px;
    left: -50px;
    border-radius: 50%;
}

#nextReminderCard::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    background: radial-gradient(rgba(167, 139, 250, .10), transparent 70%);
    bottom: -60px;
    right: -40px;
    border-radius: 50%;
}

.reminder-time { font-size: 36px; font-weight: 900; color: #1A1638; z-index: 2; }
.reminder-info { z-index: 2; text-align: right; }
.reminder-info h3 { font-size: 20px; font-weight: 800; color: #1A1638; margin-bottom: 5px; }
.reminder-info p  { color: #7C7A9A; font-size: 14px; }

.reminder-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7B9FFF, #5256F0);
    box-shadow: 0 14px 32px rgba(82, 86, 240, .30);
    color: white;
    font-size: 32px;
    z-index: 2;
}

.reminder-icon img { width: 52px; height: 52px; object-fit: contain; }

.reminder-bell {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 184, 0, .10);
    color: #FFB000;
    font-size: 24px;
}

@media (max-width: 768px) {
    #nextReminderCard { min-height: 120px; padding: 18px; }
    .reminder-time  { font-size: 32px; }
    .reminder-icon  { width: 66px; height: 66px; }
}

/* =========================================
   MEDICAL CARD PAGE
========================================= */
#medicalCardPage {
    width: 100%;
    min-height: auto;
    padding: 32px 22px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F3F0FF 100%);
}

.medical-card-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    height: auto;
    min-height: unset;
    transform-style: preserve-3d;
    perspective: 2000px;
}

.medical-card-front,
.medical-card-back {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 420px;
    border-radius: 34px;
    overflow: hidden;
    padding: 28px;
    color: #ffffff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .8s cubic-bezier(.4, .2, .2, 1);
    box-shadow: 0 36px 88px rgba(109, 78, 255, .22);
    background: linear-gradient(145deg, #9B7EFF 0%, #7C55F5 38%, #4E30D8 100%);
    border: 1px solid rgba(255, 255, 255, .15);
}

.medical-card-front::before,
.medical-card-back::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    top: -130px;
    left: -100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    filter: blur(12px);
}

.medical-card-front::after,
.medical-card-back::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    bottom: -90px;
    right: -90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    filter: blur(10px);
}

.medical-card-flip-btn {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    z-index: 10;
    transition: .35s;
}
.medical-card-flip-btn:hover { transform: rotate(180deg); background: rgba(255, 255, 255, .28); }

.medical-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }

.medical-card-logo {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
}

.medical-card-title h2   { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.medical-card-title span { font-size: 10px; opacity: .80; letter-spacing: 2.5px; }

.medical-card-user {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.medical-card-avatar {
    margin-top: -130px;
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .40);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.medical-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#medicalCardFullName { font-size: 20px; font-weight: 900; }

.medical-card-data {
    margin-top: 130px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.medical-card-row {
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .10);
}
.medical-card-row span   { font-size: 10px; opacity: .80; }
.medical-card-row strong { font-size: 14px; font-weight: 800; color: #fff; }

.medical-card-emergency {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .12);
}
.medical-card-emergency span   { font-size: 13px; opacity: .88; }
.medical-card-emergency strong { font-size: 15px; font-weight: 900; }

.medical-card-back {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    min-height: 420px;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
}

.medical-card-back-header { margin-top: 35px; margin-bottom: 24px; text-align: center; }
.medical-card-back-header h3 { font-size: 21px; font-weight: 900; color: #fff; }

.medical-detail-box {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .14);
}
.medical-detail-box h4 { font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, .85); margin-bottom: 10px; }
.medical-detail-box p  { font-size: 14px; line-height: 2; color: rgba(255, 255, 255, .94); word-break: break-word; }

.medical-card-container.flipped .medical-card-front { transform: rotateY(180deg); }
.medical-card-container.flipped .medical-card-back  { transform: rotateY(0deg); }

@media (max-width: 768px) {
    .medical-card-front, .medical-card-back { border-radius: 28px; padding: 20px; }
    #medicalCardFullName { font-size: 18px; }
    .medical-card-data   { gap: 10px; }
    .medical-card-row    { padding: 9px 10px; }
    .medical-card-row strong { font-size: 13px; }
}

/* =========================================
   CHAT PAGE
========================================= */
#chatPage {
    display: none;
    min-height: 100vh;
    background: linear-gradient(180deg, #F8FAFF 0%, #EEF2FF 100%);
}

.chat-container {
    width: 100%;
    max-width: 1300px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FAFCFF 0%, #F0F4FF 100%);
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 28px 72px rgba(109, 78, 255, .12);
    position: relative;
}

.chat-header {
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(109, 78, 255, .08);
    box-shadow: 0 4px 16px rgba(109, 78, 255, .05);
}

.back-btn {
    width: 48px;
    height: 48px;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    background: #F3F0FF;
    border: 1px solid rgba(109, 78, 255, .12);
    font-size: 22px;
    color: #6D4EFF;
    box-shadow: 0 6px 20px rgba(109, 78, 255, .10);
    transition: .28s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-btn:hover { transform: translateY(-3px); background: #EDE9FF; }

.chat-header-center { text-align: center; }
.chat-header-center h2 { margin: 0; font-size: 19px; font-weight: 900; color: #1A1638; }
.chat-header-center span { display: block; margin-top: 4px; color: #22C55E; font-size: 12px; font-weight: 700; }

.ai-profile {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    overflow: hidden;
    background: #F3F0FF;
    box-shadow: 0 8px 22px rgba(109, 78, 255, .14);
    border: 1px solid rgba(109, 78, 255, .10);
}
.ai-profile img { width: 100%; height: 100%; object-fit: cover; }

#chatMessages {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#chatMessages::-webkit-scrollbar { width: 6px; }
#chatMessages::-webkit-scrollbar-thumb { background: #D4C5FF; border-radius: 20px; }

.welcome-card {
    width: 85%;
    max-width: 300px;
    margin: auto;
    margin-top: 40px;
    padding: 32px 22px;
    text-align: center;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(245, 242, 255, .98));
    border: 1px solid rgba(109, 78, 255, .10);
    box-shadow: 0 22px 55px rgba(109, 78, 255, .10);
    position: relative;
    overflow: hidden;
}

.welcome-card::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    top: -40px;
    right: -40px;
    background: radial-gradient(rgba(109, 78, 255, .12), transparent 70%);
    filter: blur(22px);
}

.welcome-card::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    bottom: -30px;
    left: -30px;
    background: radial-gradient(rgba(167, 139, 250, .14), transparent 70%);
    filter: blur(22px);
}

.welcome-robot { width: 108px; margin: 0 auto 14px; position: relative; z-index: 2; }
.welcome-card h2 { margin: 0 0 10px; color: #1A1638; font-size: 30px; font-weight: 900; position: relative; z-index: 2; }
.welcome-card p  { margin: 0; color: #7C7A9A; font-size: 15px; line-height: 1.8; position: relative; z-index: 2; }

.bot-message {
    max-width: 80%;
    width: fit-content;
    margin: 10px auto 10px 0;
    padding: 13px 18px;
    background: #EDE9FF;
    color: #1A1638;
    border-radius: 20px 20px 20px 5px;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.75;
    box-shadow: 0 4px 14px rgba(109, 78, 255, .08);
    border: 1px solid rgba(109, 78, 255, .08);
}

.user-message {
    max-width: 80%;
    width: fit-content;
    margin: 10px 0 10px auto;
    padding: 13px 18px;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    color: white;
    border-radius: 20px 20px 5px 20px;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.75;
    box-shadow: 0 8px 22px rgba(109, 78, 255, .30);
}

@keyframes msgShow { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.bot-message, .user-message { animation: msgShow .3s cubic-bezier(.16, 1, .3, 1); }

.chat-input-container {
    flex-shrink: 0;
    padding: 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(109, 78, 255, .08);
    display: flex;
    align-items: center;
    gap: 12px;
}

#chatInput {
    flex: 1;
    height: 56px;
    border: 1.5px solid rgba(109, 78, 255, .14);
    outline: none;
    background: #F8F7FE;
    border-radius: 18px;
    padding: 0 20px;
    font-size: 14px;
    color: #1A1638;
    font-family: inherit;
    transition: .28s;
}

#chatInput::placeholder { color: #B0AEC9; }
#chatInput:focus { background: #FFFFFF; border-color: #7C5DFA; box-shadow: 0 0 0 4px rgba(124, 93, 250, .10); }

#sendMessageBtn {
    width: 56px;
    height: 56px;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    box-shadow: 0 12px 32px rgba(109, 78, 255, .30);
    transition: .28s;
    flex-shrink: 0;
}
#sendMessageBtn:hover  { transform: scale(1.07); }
#sendMessageBtn:active { transform: scale(.93); }
#sendMessageBtn img    { width: 22px; height: 22px; filter: brightness(0) invert(1); }

@media (max-width: 768px) { .chat-container { max-width: 100%; border-radius: 0; } }

/* =========================================
   BOTTOM NAVBAR
========================================= */
.bottom-navbar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    max-width: 1200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(28px);
    border: 1px solid rgba(109, 78, 255, .10);
    border-radius: 36px;
    box-shadow:
        0 24px 56px rgba(109, 78, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .8);
    z-index: 9999;
}

.nav-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: .28s;
}

.nav-item img { width: 24px; height: 24px; object-fit: contain; opacity: .55; transition: .28s; }

.nav-item span {
    font-size: 11px;
    font-weight: 700;
    color: #8B8AAB;
    transition: .28s;
}

.nav-item:hover { transform: translateY(-3px); }

.nav-item.active-nav span { color: #6D4EFF; }

.nav-item.active-nav img { opacity: 1; filter: invert(28%) sepia(80%) saturate(2000%) hue-rotate(240deg) brightness(90%); }

.nav-item.active-nav::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    top: 7px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(109, 78, 255, .12), rgba(109, 78, 255, .06));
    border: 1px solid rgba(109, 78, 255, .12);
    z-index: -1;
}

#robotNavButton {
    position: relative;
    width: 88px;
    height: 88px;
    margin-top: -38px;
    border: none;
    cursor: pointer;
    background: none;
    flex: none;
}

#robotNavButton::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(109, 78, 255, .32),
        rgba(139, 114, 255, .16),
        transparent 72%
    );
    filter: blur(16px);
}

#robotNavButton img {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: white;
    border: 4px solid white;
    box-shadow: 0 16px 40px rgba(109, 78, 255, .28);
    transition: .28s;
}

#robotNavButton:hover img  { transform: translateY(-3px); }
#robotNavButton:active img { transform: scale(.93); }

@media (min-width: 769px) { .bottom-navbar { display: flex !important; } }

/* =========================================
   PROFILE PAGE
========================================= */
#profilePage {
    display: none;
    width: 100%;
    min-height: 100vh;
    padding: 24px 40px 140px 40px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F3F0FF 100%);
    position: relative;
    overflow: hidden;
}

#profilePage::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    top: -220px;
    right: -180px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .08), transparent 70%);
    pointer-events: none;
}

#profilePage::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    bottom: -180px;
    left: -120px;
    border-radius: 50%;
    background: radial-gradient(rgba(96, 207, 255, .08), transparent 70%);
    pointer-events: none;
}

.profile-container {
    font-family: 'Vazir-Thin.ttf';
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    z-index: 2;
    border-radius: 36px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(109, 78, 255, .08);
    box-shadow:
        0 28px 72px rgba(109, 78, 255, .08),
        0 8px 24px rgba(0, 0, 0, .03);
    overflow: hidden;
}

.profile-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(109, 78, 255, .20), transparent);
}

.profile-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 44px;
}

.profile-title {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    color: #1A1638;
    letter-spacing: -.4px;
}

@media (max-width: 768px) {
    #profilePage { padding: 0; }
    .profile-container {
        max-width: 100%;
        min-height: 100vh;
        padding: 28px 18px 120px 18px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .profile-title { font-size: 26px; }
}

/* =========================================
   PROFILE USER
========================================= */
.profile-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.profile-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.profile-avatar {
    position: relative;
    width: 185px;
    height: 185px;
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A87DFF, #6D4EFF, #60CFFF);
    box-shadow: 0 24px 64px rgba(109, 78, 255, .22);
}

.profile-avatar::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .14), transparent 72%);
    z-index: -1;
}

.profile-avatar::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(109, 78, 255, .14);
    z-index: -1;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid white;
    display: block;
}

.change-image-btn {
    margin-top: 22px;
    height: 50px;
    padding: 0 24px;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    box-shadow: 0 14px 32px rgba(109, 78, 255, .24);
    transition: .3s;
    font-family: inherit;
}
.change-image-btn:hover  { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(109, 78, 255, .32); }
.change-image-btn:active { transform: scale(.97); }

#profileName  { margin-top: 26px; font-size: 28px; font-weight: 900; color: #1A1638; line-height: 1.3; }
#profileEmail { margin-top: 8px; font-size: 14px; font-weight: 500; color: #8B8AAB; }

@media (max-width: 768px) {
    .profile-avatar { width: 148px; height: 148px; }
    #profileName  { font-size: 24px; }
    #profileEmail { font-size: 13px; }
}

/* =========================================
   PROFILE MENU
========================================= */
.profile-menu {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-item {
    width: 100%;
    min-height: 86px;
    border: 1px solid rgba(109, 78, 255, .08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    box-shadow:
        0 10px 28px rgba(109, 78, 255, .06),
        0 2px 8px rgba(0, 0, 0, .03);
    transition: transform .32s, box-shadow .32s, border-color .32s;
}

.profile-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 14px;
    width: 5px;
    height: 58px;
    border-radius: 30px;
    background: linear-gradient(180deg, #A87DFF, #6D4EFF);
}

.profile-item::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 250px;
    height: 250px;
    background: radial-gradient(rgba(109, 78, 255, .08), transparent 70%);
    transition: .6s;
}
.profile-item:hover::after { top: -50px; left: 60%; }

.profile-item:hover {
    transform: translateY(-6px);
    border-color: rgba(109, 78, 255, .18);
    box-shadow: 0 28px 56px rgba(109, 78, 255, .12);
}
.profile-item:active { transform: scale(.985); }

.item-right { display: flex; align-items: center; gap: 16px; }

.item-right img {
    width: 22px;
    height: 22px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(109, 78, 255, .14), rgba(109, 78, 255, .06));
    box-shadow: 0 8px 20px rgba(109, 78, 255, .08);
    transition: .32s;
}
.profile-item:hover .item-right img { transform: scale(1.08); box-shadow: 0 14px 28px rgba(109, 78, 255, .16); }

.item-right span { font-size: 17px; font-weight: 800; color: #1A1638; }

.item-arrow { font-size: 20px; color: #B0AEC9; transition: .32s; }
.profile-item:hover .item-arrow { color: #6D4EFF; transform: translateX(-8px); }

.logout-item {
    background: linear-gradient(180deg, #FFFBFC, #FFF5F7);
    border-color: rgba(255, 80, 115, .10);
}
.logout-item::before { background: linear-gradient(180deg, #FF7B99, #FF4E73); }
.logout-item .item-right img {
    background: linear-gradient(135deg, rgba(255, 120, 150, .14), rgba(255, 80, 115, .07));
}
.logout-item .item-right span { color: #FF4E73; }
.logout-item:hover {
    border-color: rgba(255, 80, 115, .22);
    box-shadow: 0 28px 56px rgba(255, 80, 115, .12);
}

@media (min-width: 769px) {
    .profile-item { min-height: 90px; }
    .item-right span { font-size: 18px; }
}

@media (max-width: 768px) {
    .profile-menu { gap: 13px; }
    .profile-item { min-height: 78px; border-radius: 20px; padding: 0 16px; }
    .item-right { gap: 12px; }
    .item-right img { width: 20px; height: 20px; padding: 11px; }
    .item-right span { font-size: 15px; }
    .item-arrow { font-size: 18px; }
}

/* =========================================
   PERSONAL INFO PAGE
========================================= */
#personalInfoPage {
    display: none;
    width: 100%;
    min-height: 100vh;
    padding: 24px 28px 120px 28px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F3F0FF 100%);
}

.personal-info-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 36px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(109, 78, 255, .08);
    box-shadow: 0 28px 72px rgba(109, 78, 255, .08);
    position: relative;
    overflow: hidden;
}

.personal-info-container::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    top: -180px;
    right: -120px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .08), transparent 70%);
    pointer-events: none;
}

.personal-info-container::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    bottom: -120px;
    left: -120px;
    border-radius: 50%;
    background: radial-gradient(rgba(96, 207, 255, .07), transparent 70%);
    pointer-events: none;
}

.personal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
}

.personal-title { margin: 0; font-size: 28px; font-weight: 900; color: #1A1638; letter-spacing: -.3px; }

.personal-header .back-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(109, 78, 255, .12);
    cursor: pointer;
    border-radius: 16px;
    background: #F3F0FF;
    font-size: 22px;
    color: #6D4EFF;
    box-shadow: 0 8px 22px rgba(109, 78, 255, .10);
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.personal-header .back-btn:hover { transform: translateY(-3px); background: #EDE9FF; }

.personal-card {
    width: 100%;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 20px;
}

.personal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(109, 78, 255, .18), transparent);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeUp .4s ease;
}

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

.input-group label { font-size: 13px; font-weight: 800; color: #3D3A5C; padding-right: 4px; }

.input-group input,
.input-group select {
    width: 100%;
    height: 60px;
    border: 1.5px solid #ECEAF8;
    outline: none;
    padding: 0 20px;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    color: #1A1638;
    background: #F8F7FE;
    transition: .32s;
    box-shadow: 0 4px 14px rgba(109, 78, 255, .04);
}

.input-group input::placeholder { color: #B0AEC9; }

.input-group input:hover,
.input-group select:hover { border-color: rgba(109, 78, 255, .22); }

.input-group input:focus,
.input-group select:focus {
    border-color: #7C5DFA;
    background: #FFFFFF;
    box-shadow:
        0 0 0 4px rgba(124, 93, 250, .10),
        0 12px 28px rgba(109, 78, 255, .08);
    transform: translateY(-2px);
}

.input-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%237C5DFA' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L2 5h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    padding-left: 42px;
}

#password, #confirmPassword { letter-spacing: 1px; }

.save-personal-btn {
    margin-top: 10px;
    grid-column: 1 / -1;
    height: 64px;
    border: none;
    cursor: pointer;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 900;
    color: white;
    background: linear-gradient(135deg, #9A84FD, #4D2DFF);
    box-shadow: 0 20px 42px rgba(109, 78, 255, .24);
    transition: .32s;
    font-family: inherit;
}
.save-personal-btn:hover  { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(109, 78, 255, .32); }
.save-personal-btn:active { transform: scale(.98); }

.personal-info-container::-webkit-scrollbar       { width: 6px; }
.personal-info-container::-webkit-scrollbar-thumb { background: #D4C5FF; border-radius: 30px; }

@media (min-width: 1200px) { .personal-card { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px)  { .personal-info-container { padding: 28px; } .personal-card { grid-template-columns: 1fr; } .save-personal-btn { width: 100%; } }

@media (max-width: 768px) {
    #personalInfoPage { padding: 0; }
    .personal-info-container {
        max-width: 100%;
        min-height: 100vh;
        padding: 22px 16px 120px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .personal-header { margin-bottom: 28px; }
    .personal-title  { font-size: 24px; }
    .personal-card   { grid-template-columns: 1fr; gap: 16px; }
    .input-group input, .input-group select { height: 56px; border-radius: 16px; font-size: 14px; }
    .save-personal-btn { height: 58px; border-radius: 18px; font-size: 15px; }
}

@media (max-width: 480px) {
    .personal-card  { padding: 16px 20px 120px 20px; }
    .personal-title { font-size: 22px; }
    .input-group label { font-size: 13px; }
}

/* =========================================
   EMERGENCY CONTACT CARD
========================================= */
.emergency-contact-card {
    margin-top: 28px;
    padding: 26px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(109, 78, 255, .10);
    box-shadow: 0 12px 32px rgba(109, 78, 255, .08);
}

.emergency-contact-title { margin: 0 0 22px 0; font-size: 20px; font-weight: 900; color: #1A1638; }

.profile-input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.profile-input-group label { font-size: 13px; font-weight: 700; color: #5B6485; }

.profile-input {
    width: 100%;
    height: 56px;
    border: 1.5px solid #ECEAF8;
    outline: none;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1638;
    background: #F8F7FE;
    transition: .3s;
    font-family: inherit;
}
.profile-input::placeholder { color: #B0AEC9; font-size: 13px; }
.profile-input:focus { border-color: #7C5DFA; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(124, 93, 250, .10); }

@media (max-width: 768px) {
    .emergency-contact-card { padding: 20px; border-radius: 20px; }
    .emergency-contact-title { font-size: 18px; }
}

/* =========================================
   MEDICAL HISTORY PAGE
========================================= */
#medicalHistoryPage {
    display: none;
    width: 100%;
    background: linear-gradient(180deg, #F8FAFF 0%, #EEF2FF 100%);
}

.medical-container {
    width: 100%;
    max-width: 1300px;
    margin: 30px auto;
    padding: 38px;
    border-radius: 36px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(109, 78, 255, .08);
    box-shadow: 0 28px 72px rgba(109, 78, 255, .08);
    position: relative;
    overflow: hidden;
}

.medical-header { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.medical-header h2 { margin: 0; font-size: 28px; font-weight: 900; color: #1A1638; letter-spacing: -.3px; }

.medical-back-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(109, 78, 255, .12);
    cursor: pointer;
    border-radius: 16px;
    background: #F3F0FF;
    color: #6D4EFF;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(109, 78, 255, .10);
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.medical-back-btn:hover { transform: translateY(-3px); background: #EDE9FF; box-shadow: 0 14px 32px rgba(109, 78, 255, .16); }

.medical-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 20px;
}

.medical-group { display: flex; flex-direction: column; gap: 8px; }
.medical-group label { font-size: 13px; font-weight: 800; color: #3D3A5C; padding-right: 4px; }

.medical-group input,
.medical-group select,
.medical-group textarea {
    width: 100%;
    border: 1.5px solid #ECEAF8;
    outline: none;
    padding: 16px 20px;
    font-size: 14px;
    font-family: inherit;
    color: #1A1638;
    background: #F8F7FE;
    border-radius: 20px;
    transition: .32s;
    box-shadow: 0 4px 14px rgba(109, 78, 255, .04);
}

.medical-group textarea { resize: vertical; min-height: 130px; }
.medical-group input::placeholder, .medical-group textarea::placeholder { color: #B0AEC9; }

.medical-group input:focus,
.medical-group select:focus,
.medical-group textarea:focus {
    border-color: #7C5DFA;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(124, 93, 250, .10), 0 12px 28px rgba(109, 78, 255, .08);
    transform: translateY(-2px);
}

.medical-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%237C5DFA' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L2 5h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    padding-left: 42px;
}

#diseaseInput, #allergyInput, #medicineInput, #surgeryInput, #medicalNotes { min-height: 125px; }

.save-medical-btn {
    margin-top: 10px;
    grid-column: 1 / -1;
    height: 64px;
    border: none;
    cursor: pointer;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 900;
    color: white;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    box-shadow: 0 20px 42px rgba(109, 78, 255, .24);
    transition: .32s;
    font-family: inherit;
}
.save-medical-btn:hover  { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(109, 78, 255, .32); }
.save-medical-btn:active { transform: scale(.98); }

@media (max-width: 768px) {
    #medicalHistoryPage { padding: 0; }
    .medical-container {
        max-width: 100%;
        min-height: 100vh;
        padding: 18px 16px 120px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .medical-header h2 { font-size: 24px; }
    .medical-form      { grid-template-columns: 1fr; gap: 16px; }
    .save-medical-btn  { height: 58px; border-radius: 18px; font-size: 15px; }
}

/* =========================================
   ABOUT PAGE
========================================= */
#aboutAppPage {
    display: none;
    width: 100%;
    min-height: 100vh;
    padding: 24px 18px 120px 18px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F3F0FF 100%);
}

.about-container { width: 100%; max-width: 1300px; margin: 0 auto; }

.about-header { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.about-title  { margin: 0; font-size: 26px; font-weight: 800; color: #1A1638; letter-spacing: -.3px; }

.about-back-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(109, 78, 255, .12);
    cursor: pointer;
    border-radius: 16px;
    background: #F3F0FF;
    color: #6D4EFF;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(109, 78, 255, .10);
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-back-btn:hover { transform: translateY(-3px); background: #EDE9FF; }

.about-card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(109, 78, 255, .08);
    border-radius: 34px;
    padding: 40px;
    box-shadow: 0 24px 64px rgba(109, 78, 255, .08);
    position: relative;
    overflow: hidden;
}

.about-card::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    top: -180px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient(rgba(109, 78, 255, .07), transparent 70%);
    pointer-events: none;
}

.about-icon { display: flex; justify-content: center; margin-bottom: 18px; }
.about-icon img {
    width: 108px;
    height: 108px;
    object-fit: cover;
    border-radius: 28px;
    padding: 12px;
    background: #FFFFFF;
    box-shadow: 0 16px 38px rgba(109, 78, 255, .14);
    border: 1px solid rgba(109, 78, 255, .08);
}

.about-app-name { text-align: center; margin: 0; font-size: 24px; font-weight: 900; color: #1A1638; }
.about-version  { text-align: center; margin-top: 7px; color: #8B8AAB; font-size: 13px; font-weight: 600; }

.about-divider {
    width: 110px;
    height: 5px;
    border-radius: 50px;
    margin: 24px auto 32px;
    background: linear-gradient(90deg, #A87DFF, #6D4EFF);
    box-shadow: 0 3px 12px rgba(109, 78, 255, .26);
}

.about-content {
    margin-top: 28px;
    padding: 32px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(109, 78, 255, .07);
    box-shadow: 0 12px 36px rgba(109, 78, 255, .05);
}

.about-content p {
    margin: 0 0 20px 0;
    text-align: justify;
    line-height: 2.4;
    font-size: 14px;
    color: #4B5478;
    transition: .3s;
}
.about-content p:last-child { margin-bottom: 0; }
.about-content p:hover { transform: translateY(-2px); }

@media (max-width: 768px) {
    #aboutAppPage { padding: 0; }
    .about-card   { border-radius: 0; padding: 22px 16px 120px; box-shadow: none; border: none; }
    .about-title  { font-size: 22px; }
    .about-app-name { font-size: 20px; }
    .about-content p { font-size: 13px; line-height: 2.1; }
}

/* =====================================
   REMINDERS PAGE
===================================== */
#remindersPage {
    display: none;
    min-height: 100vh;
    padding: 22px 22px 140px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F0F4FF 100%);
}

.reminders-container { max-width: 1300px; }

.reminders-card {
    background: #FFFFFF;
    border-radius: 34px;
    padding: 28px;
    border: 1px solid rgba(109, 78, 255, .08);
    box-shadow: 0 16px 44px rgba(109, 78, 255, .07);
}

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

.reminders-back-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(109, 78, 255, .12);
    cursor: pointer;
    border-radius: 16px;
    background: #F3F0FF;
    font-size: 22px;
    color: #6D4EFF;
    box-shadow: 0 8px 22px rgba(109, 78, 255, .10);
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reminders-back-btn:hover { transform: translateY(-2px); background: #EDE9FF; }

.reminders-title { font-size: 26px; font-weight: 800; color: #1A1638; letter-spacing: -.3px; }

.reminders-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }

.stat-card {
    background: #F8F7FE;
    border: 1px solid rgba(109, 78, 255, .10);
    border-radius: 22px;
    padding: 22px;
    text-align: center;
    transition: .28s;
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(109, 78, 255, .20); box-shadow: 0 14px 32px rgba(109, 78, 255, .08); }

.stat-number { display: block; font-size: 30px; font-weight: 900; color: #6D4EFF; margin-bottom: 5px; }
.stat-label  { color: #8B8AAB; font-size: 13px; }

.next-reminder-preview {
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    border-radius: 24px;
    padding: 22px;
    color: #fff;
    margin-bottom: 22px;
    box-shadow: 0 22px 48px rgba(109, 78, 255, .28);
}
.next-reminder-label   { font-size: 13px; opacity: .84; margin-bottom: 7px; }
.next-reminder-content { font-size: 17px; font-weight: 700; }

.reminders-list { display: flex; flex-direction: column; gap: 13px; }

.reminder-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background: #FAFBFF;
    border: 1px solid rgba(109, 78, 255, .08);
    transition: .3s;
}
.reminder-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(109, 78, 255, .08);
    border-color: rgba(109, 78, 255, .16);
}

.reminder-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(109, 78, 255, .12), rgba(109, 78, 255, .05));
    border: 1px solid rgba(109, 78, 255, .10);
}

.reminder-info { flex: 1; }
.reminder-title { font-size: 17px; font-weight: 700; color: #1A1638; margin-bottom: 4px; }
.reminder-time  { font-size: 13px; color: #8B8AAB; }

/* JS injected cards */
.reminder-item-card {
    padding: 18px;
    border-radius: 22px;
    background: #FAFBFF;
    border: 1px solid rgba(109, 78, 255, .08);
    border-right: 4px solid #6D4EFF;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: .28s;
    animation: fadeUp .28s ease;
}
.reminder-item-card:hover { transform: translateX(-3px); box-shadow: 0 12px 28px rgba(109, 78, 255, .08); }
.reminder-item-card h4   { font-size: .9rem; font-weight: 800; color: #1A1638; }
.reminder-item-card p    { font-size: .8rem; color: #7C7A9A; line-height: 1.55; }
.reminder-item-card span { font-size: .74rem; color: #6D4EFF; font-weight: 700; }

.reminder-item-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.reminder-toggle-btn {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(109, 78, 255, .08);
    color: #6D4EFF;
    border: 1px solid rgba(109, 78, 255, .16);
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
    font-family: inherit;
}
.reminder-toggle-btn:hover { background: linear-gradient(135deg, #8B72FF, #6D4EFF); color: #fff; border-color: transparent; }

.reminder-delete-btn {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 61, 84, .07);
    color: #FF3D54;
    border: 1px solid rgba(255, 61, 84, .16);
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
    font-family: inherit;
}
.reminder-delete-btn:hover { background: linear-gradient(135deg, #FF6B7A, #FF3D54); color: #fff; border-color: transparent; }

.empty-reminders-state { text-align: center; padding: 58px 20px; }
.empty-reminders-state img { width: 140px; margin: 0 auto 14px; opacity: .8; }
.empty-reminders-state h3  { color: #1A1638; margin-bottom: 8px; font-size: 18px; }
.empty-reminders-state p   { color: #8B8AAB; font-size: 14px; }

.add-reminder-btn {
    align-self: center;
    margin-top: 28px;
    width: 1300px;
    max-width: 100%;
    height: 66px;
    border: none;
    border-radius: 22px;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    z-index: 99999;
    box-shadow: 0 22px 44px rgba(109, 78, 255, .28);
    transition: .3s;
    font-family: inherit;
}
.add-reminder-btn:hover  { transform: translateY(-3px); box-shadow: 0 30px 56px rgba(109, 78, 255, .36); }
.add-reminder-btn:active { transform: scale(.97); }
.add-reminder-plus { font-size: 28px; font-weight: 300; }

@media (max-width: 768px) {
    #remindersPage { padding: 14px 14px 140px; }
    .reminders-card { background: transparent; box-shadow: none; border: none; border-radius: 0; padding: 18px; }
    .reminders-title { font-size: 22px; }
}

/* =====================================
   ADD REMINDER PAGE
===================================== */
#addReminderPage {
    display: none;
    min-height: 100vh;
    padding: 22px 28px 120px 28px;
    background: linear-gradient(180deg, #FAFBFF 0%, #F3F0FF 100%);
}

.add-reminder-container { max-width: 1300px; margin: 0 auto; }

.add-reminder-card {
    background: #FFFFFF;
    border-radius: 34px;
    padding: 30px;
    border: 1px solid rgba(109, 78, 255, .08);
    box-shadow: 0 16px 44px rgba(109, 78, 255, .07);
}

.add-reminder-header { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }

.add-reminder-back-btn {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(109, 78, 255, .12);
    border-radius: 16px;
    background: #F3F0FF;
    color: #6D4EFF;
    font-size: 22px;
    cursor: pointer;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-reminder-back-btn:hover { transform: translateY(-2px); background: #EDE9FF; box-shadow: 0 10px 26px rgba(109, 78, 255, .14); }

.add-reminder-title { font-size: 26px; font-weight: 800; color: #1A1638; letter-spacing: -.3px; }

.add-reminder-form { display: flex; flex-direction: column; gap: 20px; }

.reminder-input-group { display: flex; flex-direction: column; gap: 8px; }
.reminder-input-group label { font-size: 13px; font-weight: 700; color: #5B5875; }

.reminder-input-group input,
.reminder-input-group select,
.reminder-input-group textarea {
    width: 100%;
    border: 1.5px solid #ECEAF8;
    border-radius: 18px;
    padding: 16px 18px;
    background: #F8F7FE;
    font-size: 14px;
    color: #1A1638;
    font-family: inherit;
    transition: .3s;
    outline: none;
}

.reminder-input-group textarea { resize: none; min-height: 115px; }

.reminder-input-group input::placeholder,
.reminder-input-group select::placeholder,
.reminder-input-group textarea::placeholder { color: #B0AEC9; }

.reminder-input-group input:focus,
.reminder-input-group select:focus,
.reminder-input-group textarea:focus {
    background: #FFFFFF;
    border-color: #7C5DFA;
    box-shadow: 0 0 0 4px rgba(124, 93, 250, .10);
}

input[type="date"], input[type="time"] { cursor: pointer; }

.save-reminder-btn {
    margin-top: 28px;
    width: 1300px;
    max-width: 100%;
    height: 66px;
    align-self: center;
    border: none;
    border-radius: 22px;
    background: linear-gradient(135deg, #8B72FF, #6D4EFF);
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    box-shadow: 0 22px 44px rgba(109, 78, 255, .26);
    font-family: inherit;
}
.save-reminder-btn:hover  { transform: translateY(-3px); box-shadow: 0 30px 56px rgba(109, 78, 255, .34); }
.save-reminder-btn:active { transform: scale(.97); }

@media (max-width: 768px) {
    #addReminderPage { padding: 14px 14px 120px; }
    .add-reminder-card  { background: transparent; box-shadow: none; border: none; border-radius: 0; padding: 18px; }
    .add-reminder-title { font-size: 22px; }
    .save-reminder-btn  { width: 100%; height: 62px; }
}