* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f0f7ff;
    color: #172b4d;
    font-family: Arial, sans-serif;
}

.menu-page {
    width: 100%;
    max-width: 850px;
    min-height: 100vh;
    margin: auto;
    background: #fff;
    padding-bottom: 30px;
}

/* HEADER */

.menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-bottom: 1px solid #eaf0f7;
}

.menu-back {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #edf6ff;
    color: #168bfa;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.menu-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
}

.menu-brand h2 {
    margin: 0 0 3px;
    font-size: 18px;
    color: #168bfa;
}

.menu-brand span {
    font-size: 10px;
    color: #91a0b4;
}

.menu-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #91a0b4;
}

/* PROFILE */

.menu-profile {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 18px;
    padding: 17px;
    background: linear-gradient(120deg, #e6f3ff, #f5faff);
    border: 1px solid #dcecff;
    border-radius: 17px;
    text-decoration: none;
}

.menu-profile img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    background: #dcecff;
    border: 3px solid white;
}

.menu-profile-info {
    flex: 1;
    min-width: 0;
}

.menu-profile-info h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #173b66;
    overflow-wrap: anywhere;
}

.menu-profile-info p {
    margin: 0 0 7px;
    font-size: 11px;
    color: #8294aa;
}

.menu-profile-info span {
    font-size: 11px;
    color: #168bfa;
    font-weight: bold;
}

.profile-arrow {
    color: #9aabc0;
    font-size: 13px;
}

/* SECTION */

.menu-section {
    padding: 5px 17px 20px;
}

.menu-section-heading {
    margin-bottom: 15px;
}

.menu-section-heading h3,
.menu-account h3 {
    margin: 0 0 5px;
    font-size: 17px;
    color: #193b62;
}

.menu-section-heading span {
    font-size: 11px;
    color: #91a0b4;
}

/* GRID */

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

.menu-card {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 15px;
    border: 1px solid #e9f0f8;
    border-radius: 15px;
    background: white;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: .2s;
}

.menu-card:active {
    background: #f1f8ff;
    transform: scale(.98);
}

.menu-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 12px;
}

.menu-icon.blue {
    background: #e4f2ff;
    color: #168bfa;
}

.menu-icon.green {
    background: #e3f9ef;
    color: #12a66b;
}

.menu-icon.purple {
    background: #f0eaff;
    color: #8756d8;
}

.menu-icon.orange {
    background: #fff1df;
    color: #e58b22;
}

.menu-icon.pink {
    background: #ffe9f1;
    color: #e94b87;
}

.menu-icon.cyan {
    background: #e1faff;
    color: #0aa5c4;
}

.menu-icon.indigo {
    background: #e9ecff;
    color: #5368d9;
}

.menu-card strong {
    font-size: 13px;
    color: #253e5c;
    margin-bottom: 5px;
}

.menu-card > span:not(.new-badge) {
    font-size: 10px;
    color: #92a0b3;
    line-height: 1.4;
}

.new-badge {
    position: absolute;
    top: 12px;
    right: 10px;
    padding: 4px 7px;
    border-radius: 10px;
    background: #e5f8ee;
    color: #15975d;
    font-size: 8px;
    font-weight: bold;
}

/* ACCOUNT */

.menu-account {
    padding: 15px 17px;
    border-top: 1px solid #edf2f8;
}

.menu-account h3 {
    margin-bottom: 13px;
}

.logout-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #ffe3e3;
    border-radius: 13px;
    background: #fff7f7;
    text-align: left;
    cursor: pointer;
}

.logout-icon {
    width: 40px;
    height: 40px;
    background: #ffe5e5;
    color: #e04444;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.logout-button span:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.logout-button strong {
    color: #d53d3d;
    font-size: 13px;
}

.logout-button small {
    color: #a18a8a;
    font-size: 10px;
}

.logout-arrow {
    color: #d58b8b;
}

/* FOOTER */

.menu-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 10px;
    color: #a0adbd;
    font-size: 10px;
}

@media (min-width: 600px) {
    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 350px) {
    .menu-profile {
        margin: 12px;
        padding: 12px;
    }

    .menu-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .menu-grid {
        gap: 8px;
    }

    .menu-card {
        padding: 12px;
        min-height: 125px;
    }
}