*
{
    box-sizing: border-box;
}

html,
body
{
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea
{
    font-family: inherit;
}

a
{
    color: inherit;
}

/* =========================
   APP BODY
========================= */

.app-body
{
    min-height: 100vh;
    background: #080d18;
    color: #e8f0f8;
}

.app-shell
{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1180px;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(22,135,255,0.08),
            transparent 28%
        ),
        #0b1320;
}

.app-shell::before
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(70,174,255,0.35),
        transparent
    );
    content: '';
    pointer-events: none;
}

/* =========================
   TOP BAR
========================= */

.app-topbar
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 58px;
    padding: 12px 24px 0;
}

.app-profile-button
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(76,187,255,0.35);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(30,145,225,0.22),
            rgba(22,87,145,0.12)
        );
    color: #65ccff;
    text-decoration: none;
    box-shadow:
        inset 0 0 10px rgba(40,164,255,0.08),
        0 0 14px rgba(22,135,255,0.08);
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.app-profile-button svg
{
    width: 20px;
    height: 20px;
}

.app-profile-button:hover
{
    border-color: rgba(76,187,255,0.65);
    background:
        linear-gradient(
            145deg,
            rgba(30,145,225,0.32),
            rgba(22,87,145,0.2)
        );
    color: #8ad9ff;
    text-decoration: none;
    box-shadow:
        inset 0 0 12px rgba(40,164,255,0.1),
        0 0 18px rgba(22,135,255,0.14);
    transform: translateY(-1px);
}

/* =========================
   APP CONTENT
========================= */

.app-content
{
    position: relative;
    flex: 1;
    width: 100%;
    padding: 10px 24px 110px;
}

/* =========================
   BOTTOM NAVIGATION
========================= */

.app-bottom-nav
{
    position: fixed;
    right: 50%;
    bottom: 18px;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: min(calc(100% - 32px), 760px);
    height: 72px;
    padding: 6px;
    border: 1px solid rgba(74,104,138,0.28);
    border-radius: 21px;
    background: rgba(10,20,34,0.94);
    box-shadow:
        0 14px 40px rgba(0,0,0,0.18),
        0 0 30px rgba(22,135,255,0.05);
    transform: translateX(50%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-bottom-nav::before
{
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(65,174,255,0.45),
        transparent
    );
    content: '';
}

.app-bottom-nav-item
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #65758a;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.app-bottom-nav-item svg
{
    width: 20px;
    height: 20px;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.app-bottom-nav-item:hover
{
    color: #a9bfd5;
    text-decoration: none;
}

.app-bottom-nav-item.active
{
    background: linear-gradient(
        180deg,
        rgba(30,119,196,0.22),
        rgba(22,87,145,0.12)
    );
    color: #5ec5ff;
    font-weight: 600;
    box-shadow:
        inset 0 0 0 1px rgba(70,174,255,0.13),
        0 0 18px rgba(22,135,255,0.06);
}

.app-bottom-nav-item.active svg
{
    filter: drop-shadow(0 0 5px rgba(60,185,255,0.4));
}

.app-bottom-nav-item.active::after
{
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #55c4ff;
    box-shadow: 0 0 7px rgba(85,196,255,0.8);
    content: '';
    transform: translateX(-50%);
}

/* =========================
   ADD BUTTON
========================= */

.app-bottom-nav-item.add
{
    color: #ffffff;
}

.app-bottom-nav-item.add svg
{
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 1px solid rgba(76,187,255,0.65);
    border-radius: 14px;
    background: linear-gradient(
        145deg,
        rgba(30,145,225,0.35),
        rgba(22,87,145,0.22)
    );
    color: #65ccff;
    box-shadow:
        inset 0 0 12px rgba(40,164,255,0.12),
        0 0 18px rgba(22,135,255,0.15);
}

.app-bottom-nav-item.add:hover
{
    color: #ffffff;
}

.app-bottom-nav-item.add:hover svg
{
    border-color: rgba(76,187,255,0.9);
    background: linear-gradient(
        145deg,
        rgba(30,145,225,0.45),
        rgba(22,87,145,0.3)
    );
    box-shadow:
        inset 0 0 14px rgba(40,164,255,0.16),
        0 0 22px rgba(22,135,255,0.22);
    transform: scale(1.04);
}

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

@media (max-width: 767px)
{
    .app-topbar
    {
        min-height: 58px;
        padding: 10px 15px 0;
    }

    .app-profile-button
    {
        width: 40px;
        height: 40px;
    }

    .app-content
    {
        padding: 10px 15px 105px;
    }

    .app-bottom-nav
    {
        bottom: 10px;
        width: calc(100% - 20px);
        height: 68px;
        border-radius: 19px;
    }
}

/* =========================
   DESKTOP
========================= */

@media (min-width: 768px)
{
    .app-shell
    {
        min-height: 100vh;
    }

    .app-content
    {
        padding: 10px 35px 120px;
    }
}