:root {
    --app-bg: #f3f4f6;
    --app-bg-soft: #ffffff;
    --app-accent: #6366f1;
    --app-accent-soft: rgba(99,102,241,.08);
    --app-border-soft: rgba(148,163,184,.45);
    --app-text-main: #111827;
    --app-text-muted: #6b7280;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: var(--app-text-main);
    background:
        radial-gradient(circle at 0% 0%, #e0f2fe 0, transparent 55%),
        radial-gradient(circle at 100% 0%, #fce7f3 0, transparent 55%),
        radial-gradient(circle at 0% 100%, #dcfce7 0, transparent 55%),
        linear-gradient(#f3f4f6, #e5e7eb);
    overflow-x: hidden;
    position: relative;
}

.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.app-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* NAVBAR */
.app-navbar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(209,213,219,.8);
    box-shadow:
        0 18px 45px rgba(15,23,42,.10),
        0 0 0 1px rgba(148,163,184,.25);
}

.app-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .9rem;
    color: #111827 !important;
}

.app-navbar .navbar-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: radial-gradient(circle at 30% 0%, #a5b4fc 0, #4f46e5 35%, #0ea5e9 100%);
    color: #f9fafb;
    box-shadow: 0 10px 25px rgba(79,70,229,.45);
}

.app-navbar .nav-link {
    font-size: .9rem;
    color: #4b5563;
    padding: .35rem .9rem;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .12s ease;
    display: inline-flex;
    align-items: center;
}

.app-navbar .nav-link i {
    font-size: .95rem;
}

.app-navbar .nav-link span {
    margin-left: .35rem;
}

.app-navbar .nav-link:hover {
    color: #111827;
    background: rgba(209,213,219,.5);
    text-decoration: none;
    transform: translateY(-1px);
}

.app-navbar .nav-link.active {
    color: #111827;
    background: var(--app-accent-soft);
    box-shadow: 0 10px 25px rgba(79,70,229,.25);
}

.navbar-toggler {
    border-radius: 999px;
    border-color: rgba(148,163,184,.7) !important;
    padding: .2rem .6rem;
}

.navbar-toggler-icon {
    filter: invert(40%);
}

/* MAIN */
.app-main {
    flex: 1;
    padding: 20px 0 32px;
}

@media (min-width: 768px) {
    .app-main {
        padding: 26px 0 40px;
    }
}

.app-card {
    border-radius: 22px;
    background: var(--app-bg-soft);
    border: 1px solid var(--app-border-soft);
    box-shadow:
        0 22px 55px rgba(15,23,42,.12),
        0 0 0 1px rgba(255,255,255,.9);
    padding: 22px 18px 24px;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .app-card {
        padding: 26px 26px 28px;
    }
}

.app-page-header {
    margin-bottom: 18px;
}

.app-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #020617;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-page-title i {
    font-size: 1.3rem;
    color: var(--app-accent);
}

.app-page-sub {
    margin-top: 4px;
    font-size: .9rem;
    color: var(--app-text-muted);
    max-width: 640px;
}

/* FOOTER */
.app-footer {
    border-top: 1px solid rgba(209,213,219,.9);
    background: rgba(249,250,251,.96);
    font-size: .8rem;
    color: #6b7280;
    padding: 10px 0 12px;
    position: relative;
    z-index: 2;
}

.app-footer a {
    color: #6b7280;
}

.app-footer a:hover {
    color: #111827;
    text-decoration: none;
}

/* ===== Летючі емоджі знизу вгору ===== */
.float-item {
    position: fixed;
    bottom: -40px;
    left: 0;
    font-size: 1.4rem;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: floatUp 9s linear infinite;
    will-change: transform, opacity;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(-110vh) translateX(-20px);
        opacity: 0;
    }
}

/* === Загальні допоміжні стилі (форма, контейнер, адаптив меню) === */

.container {
    max-width: 1000px;
    margin-top: 50px;
}

.form-group {
    text-align: left;
}

.form-group input[type="file"] {
    padding: 10px;
}

@media (max-width: 767px) {
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        padding: 10px;
        text-align: center;
    }
}