:root {
    --eu-blue: #003399;
    --eu-navy: #071b3a;
    --eu-yellow: #ffcc00;
    --eu-light: #f3f6fb;
    --eu-border: #dbe4f3;
    --eu-muted: #667085;
    --eu-text: #142033;
    --eu-success: #0f8f61;
    --eu-danger: #c73d3d;
    --shadow-soft: 0 18px 45px rgba(7, 27, 58, 0.12);
}

.drone-battle-page {
    min-height: 100vh;
    background: #07111f;
}

.battle-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 2.75rem;
    color: #fff;
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 204, 0, 0.24), transparent 28%),
        radial-gradient(circle at 18% 70%, rgba(0, 167, 255, 0.22), transparent 30%),
        linear-gradient(135deg, #071b3a 0%, #0a2f79 48%, #020916 100%);
}

.battle-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.35;
    pointer-events: none;
}

.battle-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 1.5rem;
    align-items: end;
}

.battle-hero h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    font-weight: 950;
    letter-spacing: 0;
}

.battle-hero p {
    max-width: 760px;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
    line-height: 1.65;
}

.battle-token-card,
.battle-panel,
.battle-stage {
    border: 1px solid rgba(135, 166, 218, 0.32);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(7, 27, 58, 0.16);
}

.battle-token-card {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.battle-token-card span,
.battle-token-card small {
    display: block;
    color: rgba(255, 255, 255, 0.74);
}

.battle-token-card strong {
    display: block;
    color: #ffcc00;
    font-size: 2.1rem;
    font-weight: 950;
}

.battle-lobby-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
    gap: 1rem;
}

.battle-panel {
    padding: 1.25rem;
    color: var(--eu-navy);
    background: #fff;
}

.battle-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.battle-panel-head span {
    display: block;
    color: var(--eu-muted);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.battle-panel-head h2 {
    margin: 0.15rem 0 0;
    color: var(--eu-navy);
    font-size: 1.35rem;
    font-weight: 900;
}

.battle-panel-head strong {
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    color: var(--eu-blue);
    background: #eef4ff;
}

.battle-join-code,
.battle-create-form {
    display: flex;
    gap: 0.6rem;
}

.battle-open-list {
    display: grid;
    gap: 0.7rem;
}

.battle-open-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
}

.battle-open-list strong,
.battle-open-list span {
    display: block;
}

.battle-open-list span {
    color: var(--eu-muted);
}

.battle-empty {
    padding: 1rem;
    border: 1px dashed var(--eu-border);
    border-radius: 8px;
    color: var(--eu-muted);
    background: #f8fbff;
}

.battle-rules-alert {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255, 204, 0, 0.38);
    border-radius: 8px;
    color: #f5f8ff;
    background: linear-gradient(135deg, #071b3a, #0d3475);
    box-shadow: 0 16px 36px rgba(7, 27, 58, 0.14);
}

.battle-rules-alert strong {
    color: #ffcc00;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.battle-rules-alert span {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
}

.battle-stage {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    color: #fff;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 204, 0, 0.18), transparent 25%),
        linear-gradient(180deg, #071b3a 0%, #07111f 100%);
}

.battle-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 38%, rgba(0, 141, 255, 0.18), transparent 35%);
    pointer-events: none;
}

.battle-stage-top,
.battle-question-zone,
.battle-controls,
.battle-players {
    position: relative;
    z-index: 1;
}

.battle-stage-top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.battle-stage-top div {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.battle-stage-top span,
.battle-stage-top strong {
    display: block;
}

.battle-stage-top span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.battle-stage-top strong {
    color: #ffcc00;
    font-size: 1.1rem;
    font-weight: 950;
}

#battle-timer.is-urgent {
    color: #ff6877;
    animation: battleTimerPulse 0.55s ease-in-out infinite alternate;
}

.battle-question-zone {
    display: grid;
    place-items: center;
    min-height: 320px;
    margin: 1rem 0;
}

.battle-radar {
    position: absolute;
    width: min(520px, 80vw);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 58px),
        conic-gradient(from 0deg, transparent 0 64%, rgba(255, 204, 0, 0.3) 76%, transparent 86%);
    animation: battleRadar 7s linear infinite;
}

.battle-question-card {
    position: relative;
    width: min(840px, 100%);
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(3, 13, 31, 0.86);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.battle-question-card > span {
    display: block;
    color: #ffcc00;
    font-weight: 900;
    margin-bottom: 0.55rem;
}

.battle-question-card h2 {
    min-height: 86px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2.3rem);
    font-weight: 950;
    line-height: 1.15;
}

.battle-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.battle-answer {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, 0.09);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.battle-answer:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: #ffcc00;
    background: rgba(255, 204, 0, 0.16);
}

.battle-answer:disabled {
    opacity: 0.55;
}

.battle-answer b {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #071b3a;
    background: #ffcc00;
}

.battle-feedback {
    min-height: 24px;
    margin-top: 0.8rem;
    color: #b9d5ff;
    font-weight: 800;
}

.battle-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.battle-buzzer {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 34% 24%, #fff4f7 0 6%, #ff8a95 7% 18%, transparent 19%),
        radial-gradient(circle at 50% 38%, #ff324f 0 38%, #d6002a 57%, #700015 78%, #33000a 100%);
    box-shadow:
        inset 0 10px 18px rgba(255, 255, 255, 0.38),
        inset 0 -18px 26px rgba(54, 0, 12, 0.82),
        0 15px 0 #570011,
        0 22px 34px rgba(0, 0, 0, 0.48),
        0 0 42px rgba(229, 0, 47, 0.55);
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: 0.04rem;
    text-shadow: 0 2px 0 rgba(60, 0, 15, 0.55), 0 0 14px rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
}

.battle-buzzer::before,
.battle-buzzer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.battle-buzzer::before {
    inset: -9px;
    z-index: -1;
    border: 2px solid rgba(255, 204, 0, 0.86);
    background: radial-gradient(circle, rgba(255, 204, 0, 0.18), transparent 66%);
    box-shadow: 0 0 22px rgba(255, 204, 0, 0.72), 0 0 34px rgba(47, 182, 255, 0.28);
}

.battle-buzzer::after {
    inset: 12%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 34%),
        radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.22), transparent 45%);
    opacity: 0.52;
    mix-blend-mode: screen;
}

.battle-buzzer span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.battle-buzzer:not(:disabled):active {
    transform: translateY(9px) scale(0.97);
    box-shadow:
        inset 0 7px 15px rgba(255, 255, 255, 0.28),
        inset 0 -11px 20px rgba(54, 0, 12, 0.9),
        0 6px 0 #570011,
        0 12px 22px rgba(0, 0, 0, 0.48),
        0 0 36px rgba(255, 204, 0, 0.72);
}

.battle-buzzer:not(:disabled) {
    animation: battleBuzzerReady 1.25s ease-in-out infinite alternate;
}

.battle-buzzer:not(:disabled)::before {
    animation: battleBuzzerRing 1.35s ease-out infinite;
}

.battle-buzzer:disabled {
    color: rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.35) 0 8%, transparent 9%),
        radial-gradient(circle at 50% 40%, #6f4b65 0 42%, #3f2940 64%, #1d1427 100%);
    box-shadow:
        inset 0 8px 16px rgba(255, 255, 255, 0.16),
        inset 0 -15px 22px rgba(11, 6, 20, 0.78),
        0 11px 0 #181022,
        0 17px 28px rgba(0, 0, 0, 0.38);
    cursor: not-allowed;
    filter: saturate(0.72);
    opacity: 0.78;
}

.battle-buzzer:disabled::before {
    border-color: rgba(125, 167, 230, 0.38);
    box-shadow: 0 0 16px rgba(68, 133, 255, 0.18);
    animation: none;
}

.battle-buzzer:focus-visible {
    outline: 3px solid var(--eu-yellow);
    outline-offset: 8px;
}

.battle-help {
    max-width: 360px;
    color: rgba(255, 255, 255, 0.74);
    font-weight: 700;
}

#battle-leave {
    border-color: rgba(255, 255, 255, 0.46);
    color: #fff;
}

#battle-leave:hover {
    border-color: #ff6877;
    background: rgba(255, 104, 119, 0.18);
}

.battle-players {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.battle-player-card {
    position: relative;
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.battle-player-card.is-buzzer {
    transform: translateY(-5px);
    border-color: #ffcc00;
    background: rgba(255, 204, 0, 0.15);
}

.battle-player-card.is-winner {
    border-color: #35d07f;
    box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.28);
}

.battle-avatar {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border: 3px solid #ffcc00;
    border-radius: 50%;
    overflow: hidden;
    color: #071b3a;
    background: #ffcc00;
    font-size: 1.25rem;
    font-weight: 950;
}

.battle-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.battle-player-meta {
    min-height: 54px;
    text-align: center;
}

.battle-player-meta strong,
.battle-player-meta span {
    display: block;
}

.battle-player-meta strong {
    color: #fff;
    font-weight: 900;
}

.battle-player-meta span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
}

.battle-player-score {
    display: grid;
    place-items: center;
    min-height: 62px;
    border-radius: 8px;
    color: #071b3a;
    background: #fff;
}

.battle-player-score b {
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

.battle-player-score small {
    color: #60708d;
    font-weight: 800;
}

.battle-token-win {
    text-align: center;
    color: #35d07f;
    font-weight: 950;
}

.battle-question-flash .battle-question-card {
    animation: battleQuestionFlash 0.42s ease;
}

@keyframes battleRadar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes battleQuestionFlash {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 rgba(255, 204, 0, 0);
    }
    50% {
        transform: scale(1.015);
        box-shadow: 0 0 42px rgba(255, 204, 0, 0.34);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    }
}

@keyframes battleTimerPulse {
    from {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 104, 119, 0);
    }
    to {
        transform: scale(1.08);
        text-shadow: 0 0 16px rgba(255, 104, 119, 0.8);
    }
}

@keyframes battleBuzzerReady {
    from {
        box-shadow:
            inset 0 10px 18px rgba(255, 255, 255, 0.38),
            inset 0 -18px 26px rgba(54, 0, 12, 0.82),
            0 15px 0 #570011,
            0 22px 34px rgba(0, 0, 0, 0.48),
            0 0 34px rgba(229, 0, 47, 0.5);
    }
    to {
        box-shadow:
            inset 0 10px 18px rgba(255, 255, 255, 0.42),
            inset 0 -18px 26px rgba(54, 0, 12, 0.82),
            0 15px 0 #570011,
            0 22px 34px rgba(0, 0, 0, 0.48),
            0 0 32px rgba(255, 204, 0, 0.5),
            0 0 58px rgba(229, 0, 47, 0.76);
    }
}

@keyframes battleBuzzerRing {
    0% {
        opacity: 0.95;
        transform: scale(0.98);
    }
    100% {
        opacity: 0.08;
        transform: scale(1.16);
    }
}

@media (max-width: 992px) {
    .battle-hero-grid,
    .battle-lobby-grid,
    .battle-stage-top,
    .battle-players {
        grid-template-columns: 1fr;
    }

    .battle-answers {
        grid-template-columns: 1fr;
    }

    .battle-controls {
        flex-direction: column;
    }

    .battle-buzzer {
        width: 132px;
        height: 132px;
        font-size: 1.55rem;
    }

    .battle-open-list article,
    .battle-join-code,
    .battle-create-form {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .battle-radar,
    .battle-question-flash .battle-question-card,
    #battle-timer.is-urgent {
        animation: none;
    }
}

.battle-tv-nav {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-height: 74px;
    padding: 0.45rem 1.75rem;
    color: #fff;
    background: rgba(2, 11, 30, 0.92);
    border-bottom: 1px solid rgba(84, 139, 231, 0.35);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

.battle-tv-brand img {
    width: 170px;
    max-width: 100%;
    max-height: 64px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.battle-tv-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    min-width: 0;
}

.battle-tv-links a,
.battle-tv-user a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.battle-tv-links a {
    position: relative;
    padding: 0.55rem 0;
}

.battle-tv-links a.active {
    color: #fff;
}

.battle-tv-links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--eu-yellow);
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.7);
}

.battle-tv-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
}

.battle-pass-pill,
.battle-profile-pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    border: 1px solid rgba(87, 151, 255, 0.65);
    border-radius: 8px;
    background: rgba(9, 39, 94, 0.82);
}

.battle-pass-pill {
    padding: 0.55rem 0.9rem;
    color: #fff;
}

.battle-profile-pill {
    gap: 0.7rem;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
}

.battle-profile-pill span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #041536;
    background: var(--eu-yellow);
    font-weight: 950;
}

.battle-profile-pill b {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.battle-tv-shell {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 74px);
    padding: 0.7rem 1.7rem 1rem;
    color: #fff;
    background:
        radial-gradient(circle at 50% 105%, rgba(0, 106, 255, 0.42), transparent 38%),
        radial-gradient(circle at 18% 22%, rgba(32, 122, 255, 0.24), transparent 25%),
        radial-gradient(circle at 82% 24%, rgba(255, 204, 0, 0.12), transparent 23%),
        linear-gradient(180deg, #020a1c 0%, #061a43 46%, #020817 100%);
}

.battle-tv-shell::before,
.battle-tv-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.battle-tv-shell::before {
    background:
        linear-gradient(rgba(84, 139, 231, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 139, 231, 0.08) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: 0.35;
}

.battle-tv-shell::after {
    top: auto;
    height: 38%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(37, 139, 255, 0.7), transparent 56%),
        linear-gradient(180deg, transparent, rgba(0, 16, 50, 0.88));
}

.battle-tv-bg-drone {
    position: absolute;
    top: 92px;
    width: 220px;
    height: 90px;
    opacity: 0.32;
    filter: drop-shadow(0 0 22px rgba(75, 157, 255, 0.7));
    pointer-events: none;
}

.battle-tv-bg-drone::before {
    content: "";
    position: absolute;
    inset: 34px 54px 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5b8ed8, #071832);
}

.battle-tv-bg-drone::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 27px;
    height: 36px;
    border-left: 74px solid rgba(65, 133, 226, 0.75);
    border-right: 74px solid rgba(65, 133, 226, 0.75);
    border-radius: 999px;
}

.battle-tv-bg-drone-left {
    left: 2rem;
}

.battle-tv-bg-drone-right {
    right: 2rem;
    transform: scaleX(-1);
}

.battle-tv-lobby-head,
.battle-tv-content,
.battle-tv-stage {
    position: relative;
    z-index: 2;
}

.battle-tv-lobby-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1rem;
    align-items: end;
    max-width: 1500px;
    margin: 0 auto 1rem;
}

.battle-tv-lobby-head h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 4.2vw, 4.2rem);
    font-weight: 950;
}

.battle-tv-lobby-head p {
    max-width: 820px;
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.78);
}

.battle-token-card-tv {
    border-color: rgba(255, 204, 0, 0.42);
    background: rgba(5, 25, 62, 0.82);
}

.battle-tv-content {
    max-width: 1500px;
    margin: 0 auto;
}

.battle-tv-stage.battle-stage {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr) 240px;
    grid-template-areas:
        "rules center side"
        "progress progress progress"
        "footer footer footer";
    gap: 0.9rem;
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.battle-tv-stage.battle-stage::before {
    display: none;
}

.battle-tv-rules,
.battle-side-panel,
.battle-tv-board,
.battle-tv-progress,
.battle-tv-footer {
    border: 1px solid rgba(87, 151, 255, 0.45);
    border-radius: 8px;
    background: rgba(4, 22, 58, 0.78);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
}

.battle-tv-rules {
    grid-area: rules;
    align-self: start;
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
}

.battle-tv-rules h2,
.battle-side-panel h2 {
    margin: 0 0 0.55rem;
    color: var(--eu-yellow);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
}

.battle-tv-rules ul {
    display: grid;
    gap: 0.34rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.battle-tv-rules li {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 750;
    font-size: 0.82rem;
    line-height: 1.12;
}

.battle-tv-rules li span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--eu-yellow);
    font-size: 0.78rem;
}

.battle-tv-center {
    grid-area: center;
    display: grid;
    gap: 0.95rem;
    min-width: 0;
}

.battle-tv-board {
    position: relative;
    overflow: hidden;
    padding: 0.85rem 1.15rem 0.95rem;
    background:
        radial-gradient(circle at 50% 10%, rgba(0, 158, 255, 0.36), transparent 36%),
        linear-gradient(145deg, rgba(4, 23, 69, 0.94), rgba(2, 12, 33, 0.95));
    box-shadow: 0 0 32px rgba(35, 146, 255, 0.32), inset 0 0 42px rgba(16, 107, 255, 0.2);
}

.battle-tv-board::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 8px;
    border: 1px solid rgba(75, 158, 255, 0.25);
    pointer-events: none;
}

.battle-board-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 120px;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.battle-board-pill {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--eu-yellow);
    border-radius: 999px;
    color: var(--eu-yellow);
    font-weight: 950;
    background: rgba(3, 17, 46, 0.8);
}

.battle-board-title {
    color: #fff;
    font-size: 1.28rem;
    font-weight: 950;
    text-align: center;
}

.battle-board-timer {
    color: #fff;
}

.battle-tv-board .battle-question-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.battle-tv-board .battle-question-card > span {
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.battle-tv-board .battle-question-card h2 {
    max-width: 760px;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(1.15rem, 1.75vw, 1.68rem);
    font-weight: 950;
    line-height: 1.22;
    text-align: center;
}

.battle-tv-board .battle-answers {
    grid-template-columns: 1fr;
    gap: 0.48rem;
    max-width: 760px;
    margin: 0.75rem auto 0;
}

.battle-tv-board .battle-answer {
    min-height: 42px;
    border: 1px solid #35a8ff;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(10, 54, 123, 0.95), rgba(4, 30, 77, 0.95));
    box-shadow: inset 0 0 18px rgba(28, 125, 255, 0.15);
}

.battle-tv-board .battle-answer b {
    flex: 0 0 32px;
    color: #fff;
    background: transparent;
    font-size: 1.1rem;
}

.battle-tv-board .battle-answer span {
    font-weight: 750;
}

.battle-tv-board .battle-answer:not(:disabled):hover {
    border-color: var(--eu-yellow);
    background: linear-gradient(90deg, rgba(15, 77, 152, 0.98), rgba(7, 45, 108, 0.98));
}

.battle-tv-board .battle-answer:disabled {
    opacity: 0.72;
}

.battle-feedback {
    min-height: 26px;
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.battle-tv-side {
    grid-area: side;
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.battle-side-panel {
    padding: 0.95rem;
}

.battle-side-panel p {
    margin: 0 0 0.45rem;
    color: rgba(255, 255, 255, 0.74);
}

.battle-ranking,
.battle-history {
    display: grid;
    gap: 0.6rem;
}

.battle-rank-row,
.battle-history-row {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.battle-rank-row {
    grid-template-columns: 20px 38px minmax(0, 1fr) auto;
}

.battle-rank-row b {
    color: var(--eu-yellow);
    font-size: 1.1rem;
    font-weight: 950;
}

.battle-rank-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 2px solid rgba(255, 204, 0, 0.7);
    border-radius: 50%;
    background: #12376f;
}

.battle-rank-avatar img,
.battle-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.battle-rank-avatar span {
    font-size: 0.72rem;
    font-weight: 950;
}

.battle-rank-row span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-rank-row strong {
    color: var(--eu-yellow);
    font-size: 1.3rem;
    font-weight: 950;
}

.battle-history-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
}

.battle-history-row b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
}

.battle-history-row.is-ok b {
    background: #2fae62;
}

.battle-history-row.is-ko b {
    background: #c83f46;
}

.battle-history-row span,
.battle-history-empty {
    color: rgba(255, 255, 255, 0.75);
}

.battle-history-row strong {
    color: #6cff8b;
}

.battle-players {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    margin-top: 0;
}

.battle-player-card {
    align-content: start;
    min-height: 182px;
    padding: 0.55rem 0.55rem 0.8rem;
    border-color: rgba(49, 143, 255, 0.55);
    text-align: center;
    background:
        linear-gradient(180deg, rgba(18, 54, 117, 0.9), rgba(2, 13, 35, 0.96) 48%),
        radial-gradient(circle at 50% 0, rgba(71, 166, 255, 0.42), transparent 42%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.33), inset 0 -22px 34px rgba(22, 107, 255, 0.15);
}

.battle-player-card::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 8px;
    height: 7px;
    border-radius: 999px;
    background: #2fb6ff;
    box-shadow: 0 0 18px rgba(47, 182, 255, 0.95);
}

.battle-player-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 48px;
    height: 18px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 35% 28%, #fff7a8, #ffcc00 58%, #b77a00);
    box-shadow: 0 6px 0 rgba(79, 46, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.65);
}

.battle-player-card.seat-2::before {
    background: #40bdff;
}

.battle-player-card.seat-3::before {
    background: #69d66f;
}

.battle-player-card.seat-3::after {
    background: radial-gradient(circle at 35% 28%, #d6ffd5, #69d66f 58%, #157a2f);
}

.battle-player-card.seat-4::before {
    background: #b84cff;
}

.battle-player-card.seat-4::after {
    background: radial-gradient(circle at 35% 28%, #f0d6ff, #b84cff 58%, #5a1280);
}

.battle-player-card.is-buzzer {
    transform: translateY(-7px);
    border-color: var(--eu-yellow);
    box-shadow: 0 0 34px rgba(255, 204, 0, 0.48);
}

.battle-player-card.is-winner {
    border-color: #6cff8b;
    box-shadow: 0 0 34px rgba(108, 255, 139, 0.38);
}

.battle-avatar {
    width: clamp(64px, 6vw, 92px);
    height: clamp(64px, 6vw, 92px);
    margin: 0 auto;
    border: 4px solid rgba(255, 204, 0, 0.88);
    box-shadow: 0 0 24px rgba(55, 153, 255, 0.55);
}

.battle-avatar span {
    font-size: 1.7rem;
    font-weight: 950;
}

.battle-player-meta strong {
    display: block;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 950;
}

.battle-player-meta span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.battle-player-score {
    padding-bottom: 1.65rem;
}

.battle-player-score b {
    display: block;
    color: var(--eu-yellow);
    font-size: clamp(1.45rem, 2.5vw, 2.05rem);
    font-weight: 950;
    line-height: 1;
}

.battle-player-score small {
    color: rgba(255, 255, 255, 0.58);
}

.battle-tv-progress {
    grid-area: progress;
    position: relative;
    display: grid;
    grid-template-columns: repeat(20, minmax(28px, 1fr));
    gap: 0.4rem;
    align-items: center;
    padding: 0.65rem 1rem;
}

.battle-tv-progress::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    background: rgba(84, 139, 231, 0.45);
    transform: translateY(-50%);
}

.battle-progress-step {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    justify-self: center;
    border: 2px solid rgba(113, 169, 255, 0.8);
    border-radius: 50%;
    color: #fff;
    background: #0a3476;
    font-weight: 950;
    box-shadow: 0 0 10px rgba(37, 139, 255, 0.25);
}

.battle-progress-step.is-done {
    border-color: #59d16c;
    background: #248142;
}

.battle-progress-step.is-current {
    width: 34px;
    height: 34px;
    border-color: var(--eu-yellow);
    color: #061436;
    background: var(--eu-yellow);
    box-shadow: 0 0 18px rgba(255, 204, 0, 0.75);
}

.battle-tv-footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) auto auto minmax(180px, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 1rem;
}

.battle-footer-help,
.battle-help {
    color: rgba(255, 255, 255, 0.74);
}

.battle-footer-help strong {
    display: block;
    color: #fff;
    font-weight: 950;
    text-transform: uppercase;
}

.battle-footer-help span {
    display: block;
    font-size: 0.82rem;
}

.battle-tv-footer .battle-buzzer {
    width: 76px;
    height: 76px;
    border-width: 5px;
    font-size: 1.25rem;
}

.battle-tv-footer .battle-help {
    max-width: 320px;
    margin: 0;
    font-size: 0.86rem;
}

.battle-chat {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(92, 159, 255, 0.45);
    border-radius: 8px;
    background: rgba(4, 18, 48, 0.78);
    box-shadow: inset 0 0 22px rgba(37, 128, 255, 0.16);
}

.battle-tv-rules .battle-chat {
    margin-top: 0.15rem;
}

.battle-chat-head,
.battle-chat-form,
.battle-chat-presets {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.battle-chat-head {
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.battle-chat-head strong {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.battle-chat-head span {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    color: #071b3a;
    background: var(--eu-yellow);
    font-size: 0.68rem;
    font-weight: 950;
}

.battle-chat-messages {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    height: 172px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.battle-chat-message {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.battle-chat-message b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #071b3a;
    background: #ffcc00;
    font-size: 0.72rem;
    font-weight: 950;
}

.battle-chat-message strong,
.battle-chat-message span,
.battle-chat-empty {
    display: block;
}

.battle-chat-message strong {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    line-height: 1.1;
}

.battle-chat-message span {
    color: #fff;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
}

.battle-chat-message.type-applause {
    border-color: rgba(255, 204, 0, 0.48);
    background: rgba(255, 204, 0, 0.13);
}

.battle-chat-empty {
    padding: 0.6rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

.battle-chat-form {
    margin-top: 0.55rem;
}

.battle-chat-form .form-control {
    min-width: 0;
    height: 36px;
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.battle-chat-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.48);
}

.battle-chat-form .btn {
    height: 36px;
    padding: 0 0.7rem;
    white-space: nowrap;
}

.battle-chat-presets {
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.battle-chat-presets button {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #dceaff;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.74rem;
    font-weight: 850;
}

.battle-chat-presets button:hover {
    border-color: var(--eu-yellow);
    color: #071b3a;
    background: var(--eu-yellow);
}

.battle-player-card.has-battle-reaction {
    border-color: var(--eu-yellow);
    animation: battleReactionPulse 1.8s ease;
}

.battle-player-card.has-battle-reaction::after {
    content: attr(data-reaction-label);
    display: grid;
    place-items: center;
    left: 50%;
    bottom: auto;
    top: -18px;
    width: 46px;
    height: 46px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    transform: translateX(-50%);
    color: #071b3a;
    background: radial-gradient(circle at 35% 25%, #fff8b2, #ffcc00 68%, #b77a00);
    box-shadow: 0 0 24px rgba(255, 204, 0, 0.9);
    font-size: 1rem;
    font-weight: 950;
    animation: battleReactionBadge 1.8s ease both;
}

.battle-player-card.has-applause-reaction {
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.6), 0 18px 38px rgba(0, 0, 0, 0.33);
}

@keyframes battleReactionPulse {
    0%,
    100% {
        transform: translateY(0);
    }
    28% {
        transform: translateY(-8px) scale(1.025);
    }
}

@keyframes battleReactionBadge {
    0% {
        opacity: 0;
        transform: translate(-50%, 12px) scale(0.75);
    }
    22%,
    72% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -18px) scale(0.88);
    }
}

@media (max-width: 1180px) {
    .battle-tv-nav {
        grid-template-columns: 210px 1fr;
    }

    .battle-tv-links {
        order: 3;
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .battle-tv-stage.battle-stage {
        grid-template-columns: 1fr;
        grid-template-areas:
            "center"
            "rules"
            "side"
            "progress"
            "footer";
    }

    .battle-tv-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .battle-tv-footer {
        grid-template-columns: 1fr auto auto 1fr;
    }
}

@media (max-width: 760px) {
    .battle-tv-nav {
        grid-template-columns: 1fr;
        padding: 0.8rem 1rem;
    }

    .battle-tv-user {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .battle-tv-shell {
        padding: 0.8rem;
    }

    .battle-tv-lobby-head {
        grid-template-columns: 1fr;
    }

    .battle-tv-side,
    .battle-players,
    .battle-tv-footer {
        grid-template-columns: 1fr;
    }

    .battle-board-top {
        grid-template-columns: 1fr;
    }

    .battle-tv-progress {
        grid-template-columns: repeat(10, minmax(28px, 1fr));
    }
}

body {
    min-height: 100vh;
    color: var(--eu-text);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--eu-blue);
}

.app-navbar {
    border-bottom: 1px solid rgba(7, 27, 58, 0.08);
    box-shadow: 0 7px 22px rgba(7, 27, 58, 0.05);
    min-height: 72px;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.logo-navbar {
    height: 68px;
    width: auto;
    object-fit: contain;
}

.brand-copy {
    display: none;
}

.brand-title {
    color: var(--eu-blue);
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-subtitle {
    color: #1c56b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22rem;
}

.navbar .nav-link {
    color: var(--eu-navy);
    font-size: 0.9rem;
    font-weight: 800;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--eu-blue);
}

.btn-eu {
    background: var(--eu-yellow);
    border-color: var(--eu-yellow);
    color: #111827;
    font-weight: 700;
}

.btn-eu:hover,
.btn-eu:focus {
    background: #f2bd00;
    border-color: #f2bd00;
    color: #111827;
}

.btn-primary {
    background: var(--eu-blue);
    border-color: var(--eu-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #002775;
    border-color: #002775;
}

.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(7, 27, 58, 0.96), rgba(0, 51, 153, 0.9)),
        radial-gradient(circle at 80% 20%, rgba(255, 204, 0, 0.38), transparent 26%);
    color: #fff;
    padding: 2.5rem 0 2.25rem;
}

.home-hero {
    position: relative;
    min-height: 410px;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 27, 58, 0.94) 0%, rgba(7, 27, 58, 0.76) 39%, rgba(7, 27, 58, 0.08) 74%),
        linear-gradient(180deg, rgba(0, 51, 153, 0.08), rgba(0, 51, 153, 0.2)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
    transform: scale(1.01);
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 61% 63%, transparent 0 4px, rgba(255, 204, 0, 0.8) 5px, transparent 6px),
        radial-gradient(circle at 73% 54%, transparent 0 5px, rgba(255, 255, 255, 0.7) 6px, transparent 7px),
        radial-gradient(circle at 76% 70%, rgba(255, 204, 0, 0.35), transparent 14%),
        radial-gradient(circle at 58% 62%, rgba(16, 124, 255, 0.45), transparent 18%),
        linear-gradient(110deg, transparent 49.6%, rgba(72, 169, 255, 0.4) 50%, transparent 50.4%);
    opacity: 0.55;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-top: 2.35rem;
    padding-bottom: 2.35rem;
}

.home-hero h1 {
    max-width: 620px;
    font-size: clamp(2.2rem, 4vw, 3.38rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    margin-bottom: 0;
}

.home-hero-motto {
    color: var(--eu-yellow);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 800;
    margin: 1rem 0 0.85rem;
}

.home-hero-copy {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.06rem;
    line-height: 1.55;
    margin-bottom: 1.7rem;
}

.home-hero .btn-lg {
    min-width: 210px;
    padding: 0.78rem 1.35rem;
    font-size: 1rem;
}

.airspace-label {
    position: absolute;
    z-index: 2;
    min-width: 54px;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(151, 207, 255, 0.65);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 51, 153, 0.34);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 28px rgba(0, 51, 153, 0.22);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.05;
}

.airspace-label span {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.64rem;
    font-weight: 700;
}

.airspace-label-ctr {
    right: 18%;
    top: 48%;
}

.airspace-label-tmz {
    right: 12%;
    top: 63%;
}

.airspace-label-atz {
    right: 12%;
    top: 79%;
}

.proof-strip {
    background: linear-gradient(90deg, #003399, #0047ba);
    color: #fff;
    padding: 1.05rem 0;
}

.home-vision {
    background: #fff;
    padding: 2.2rem 0 0;
}

.home-vision-inner {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.07);
}

.home-vision h2 {
    color: var(--eu-navy);
    font-weight: 800;
    margin-bottom: 0.6rem;
}

.home-vision p {
    margin-bottom: 0;
    color: var(--eu-muted);
    max-width: 780px;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.discover-page {
    background: #fff;
}

.discover-hero {
    padding: 3.5rem 0;
    color: #fff;
    background: linear-gradient(135deg, var(--eu-navy), var(--eu-blue));
}

.discover-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: 2rem;
    align-items: center;
}

.discover-hero-copy h1 {
    max-width: 820px;
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

.discover-hero-copy p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.08rem;
    line-height: 1.7;
}

.discover-hero-actions,
.discover-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.35rem;
}

.discover-hero-media img,
.discover-photo-stack img {
    width: 100%;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.24);
}

.discover-hero-media img {
    aspect-ratio: 16 / 10;
}

.discover-manifest {
    padding: 2rem 0;
    background: #fff;
}

.discover-manifest-grid,
.discover-difference-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(7, 27, 58, 0.07);
}

.discover-manifest h2,
.discover-section h2,
.discover-difference h2,
.discover-final h2 {
    color: var(--eu-navy);
    font-weight: 900;
    letter-spacing: 0;
}

.discover-manifest p,
.discover-section p,
.discover-difference p,
.discover-final p {
    color: var(--eu-muted);
    line-height: 1.7;
}

.discover-motto {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem;
    border-radius: 8px;
    color: #fff;
    background: var(--eu-blue);
}

.discover-motto span,
.discover-difference span {
    color: var(--eu-yellow);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.discover-motto strong {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.2;
}

.discover-section {
    padding: 3rem 0;
}

.discover-section-muted {
    background: #f3f6fb;
}

.discover-split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 2rem;
    align-items: center;
}

.discover-photo-stack {
    display: grid;
    grid-template-columns: 1fr 0.78fr;
    gap: 1rem;
    align-items: end;
}

.discover-photo-stack img:first-child {
    aspect-ratio: 4 / 3;
}

.discover-photo-stack img:last-child {
    aspect-ratio: 3 / 4;
}

.discover-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.discover-values span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    color: var(--eu-blue);
    background: #eef4ff;
    font-weight: 850;
}

.discover-section-head {
    max-width: 820px;
    margin-bottom: 1.4rem;
}

.discover-audience-grid,
.discover-module-grid {
    display: grid;
    gap: 0.9rem;
}

.discover-audience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discover-module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.discover-audience-grid article,
.discover-module-grid article {
    min-height: 150px;
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.05);
}

.discover-audience-grid h3,
.discover-module-grid h3 {
    color: var(--eu-navy);
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.discover-module-grid article {
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.discover-difference {
    padding: 3rem 0;
    color: #fff;
    background: linear-gradient(135deg, var(--eu-navy), #002775);
}

.discover-difference-grid {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.discover-difference h2,
.discover-difference p {
    color: #fff;
}

.discover-difference p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.discover-final {
    max-width: 940px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid rgba(0, 51, 153, 0.18);
    border-radius: 8px;
    text-align: center;
    background: #fff;
    box-shadow: 0 18px 45px rgba(7, 27, 58, 0.09);
}

.discover-final strong {
    display: block;
    max-width: 780px;
    margin: 1rem auto 0;
    color: var(--eu-navy);
    font-size: clamp(1.35rem, 2.8vw, 2.25rem);
    line-height: 1.2;
}

.discover-final-actions {
    justify-content: center;
}

.proof-item strong {
    font-size: 0.94rem;
}

.proof-item strong,
.proof-item small {
    display: block;
}

.proof-item small {
    color: rgba(255, 255, 255, 0.78);
}

.proof-icon,
.home-tool-icon,
.pass-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.proof-icon {
    width: 36px;
    height: 36px;
    color: #fff;
}

.proof-icon svg,
.home-tool-icon svg,
.pass-mark svg,
.trust-grid svg {
    width: 100%;
    height: 100%;
}

.home-tools {
    padding: 1.35rem 0 1.05rem;
    background: #fff;
}

.home-tools .section-title {
    position: relative;
    margin-bottom: 1.35rem;
    color: var(--eu-navy);
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 800;
}

.home-tools .section-title::after {
    content: "";
    display: block;
    width: 76px;
    height: 3px;
    background: var(--eu-yellow);
    margin: 0.85rem auto 0;
}

.home-tool-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.home-tool-card {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    padding: 1.05rem 0.9rem;
    text-align: center;
    min-height: 146px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(7, 27, 58, 0.06);
}

.home-tool-icon {
    width: 42px;
    height: 42px;
    color: var(--eu-blue);
    margin-bottom: 0.75rem;
}

.home-tool-card h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.55rem;
}

.home-tool-card p {
    margin: 0;
    color: var(--eu-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.home-pass-section {
    padding: 0.8rem 0 1rem;
    background: #fff;
}

.home-pass {
    min-height: 230px;
    display: grid;
    grid-template-columns: minmax(280px, 0.52fr) 1fr;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    background:
        linear-gradient(90deg, rgba(0, 51, 153, 0.98), rgba(0, 51, 153, 0.82) 38%, rgba(7, 27, 58, 0.62)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
}

.home-pass-card {
    background: linear-gradient(135deg, #003399, #00246d);
    color: #fff;
    padding: 1.55rem 1.8rem;
}

.pass-mark {
    width: 38px;
    height: 38px;
    color: var(--eu-yellow);
}

.home-pass-card h2,
.home-europe-card h2 {
    color: #fff;
    font-weight: 800;
}

.home-pass-card ul {
    padding-left: 0;
    list-style: none;
    margin: 1.1rem 0 1.6rem;
}

.home-pass-card li {
    margin-bottom: 0.33rem;
    font-size: 0.88rem;
}

.home-pass-card li::before {
    content: "✓";
    color: var(--eu-yellow);
    font-weight: 800;
    margin-right: 0.5rem;
}

.home-europe-card {
    color: #fff;
    padding: 1.9rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

.home-europe-card h2 {
    max-width: 420px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: min(520px, 100%);
    margin-top: 1.6rem;
}

.trust-grid div {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 1rem;
}

.trust-grid span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    color: #fff;
    margin-bottom: 0.4rem;
}

.trust-grid strong {
    display: block;
    font-size: 0.9rem;
}

.home-preview-section {
    padding: 2rem 0 3rem;
    background: var(--eu-light);
}

.dashboard-preview {
    display: grid;
    grid-template-columns: 185px 1fr;
    min-height: 360px;
    background: #fff;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.dashboard-preview aside {
    background: var(--eu-navy);
    color: rgba(255, 255, 255, 0.82);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.dashboard-preview aside img {
    width: 92px;
    height: auto;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.dashboard-preview aside span {
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
}

.dashboard-preview aside span:first-of-type {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
}

.preview-main {
    padding: 1.6rem;
    display: grid;
    gap: 1rem;
}

.preview-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.preview-topline strong {
    font-size: 1.35rem;
}

.preview-topline span {
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--eu-blue);
    font-weight: 800;
    border: 8px solid #dbeafe;
    border-top-color: var(--eu-blue);
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.preview-metrics div,
.preview-row {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}

.preview-metrics small,
.preview-row small {
    display: block;
    color: var(--eu-muted);
}

.preview-metrics strong {
    display: block;
    font-size: 1.55rem;
}

.preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.preview-progress {
    width: 45%;
    height: 8px;
    border-radius: 999px;
    background: #e6ecf8;
    overflow: hidden;
}

.preview-progress span {
    display: block;
    height: 100%;
    background: var(--eu-blue);
}

.hero h1 {
    max-width: 760px;
    font-size: clamp(2.15rem, 3.7vw, 3.45rem);
    font-weight: 800;
    line-height: 1.02;
}

.hero-copy {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.84);
}

.hero-panel,
.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    color: var(--eu-text);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.section {
    padding: 4.5rem 0;
}

.section-muted {
    background: var(--eu-light);
}

.section-navy {
    background: var(--eu-navy);
    color: #fff;
}

.section-title {
    font-weight: 800;
    color: var(--eu-navy);
}

.section-navy .section-title {
    color: #fff;
}

.feature-card,
.course-card,
.metric-card,
.auth-card,
.admin-card {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.07);
}

.feature-card {
    height: 100%;
    padding: 1.5rem;
}

.lesson-content {
    color: #18233a;
    font-size: 1rem;
    line-height: 1.72;
}

.lesson-content h2,
.lesson-content h3,
.lesson-content h4 {
    color: var(--eu-navy);
    font-weight: 850;
    letter-spacing: 0;
}

.lesson-content h2 {
    margin: 2rem 0 0.9rem;
    font-size: 1.55rem;
}

.lesson-content h3 {
    margin: 1.55rem 0 0.75rem;
    font-size: 1.25rem;
}

.lesson-content h4 {
    margin: 1.2rem 0 0.55rem;
    font-size: 1.05rem;
}

.lesson-content p {
    margin-bottom: 0.9rem;
}

.lesson-content ul,
.lesson-content ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.lesson-content li {
    margin-bottom: 0.38rem;
}

.lesson-content hr {
    border: 0;
    border-top: 1px solid #d9e3f2;
    margin: 1.6rem 0;
}

.lesson-table-wrap {
    margin: 1rem 0 1.25rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
}

.lesson-table {
    margin: 0;
    min-width: 720px;
}

.lesson-table th {
    background: #eef4ff;
    color: var(--eu-navy);
    font-size: 0.88rem;
    font-weight: 850;
    border-bottom: 1px solid #d4e1f5;
}

.lesson-table td {
    font-size: 0.9rem;
    color: #25324d;
    border-color: #e5edf8;
}

.lesson-diagram {
    background: #071b3a;
    color: #e8f1ff;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 1rem 0 1.25rem;
}

.lesson-content code {
    background: #eef4ff;
    color: #073b88;
    border-radius: 4px;
    padding: 0.08rem 0.28rem;
}

.lesson-figure {
    margin: 1.25rem 0 1.45rem;
    overflow: hidden;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #f8fbff;
}

.lesson-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.lesson-figure figcaption {
    padding: 0.7rem 0.9rem;
    color: #53627a;
    font-size: 0.84rem;
    font-weight: 700;
    border-top: 1px solid #dbe6f6;
}

.lesson-progress-result {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    text-align: center;
}

.lesson-progress-confetti {
    position: absolute;
    inset: 0 0 auto;
    height: 90px;
    pointer-events: none;
    background:
        radial-gradient(circle at 13% 24%, #2c7be5 0 2px, transparent 3px),
        radial-gradient(circle at 25% 44%, #ffc400 0 2px, transparent 3px),
        radial-gradient(circle at 39% 20%, #18a86b 0 2px, transparent 3px),
        radial-gradient(circle at 54% 38%, #ef5b5b 0 2px, transparent 3px),
        radial-gradient(circle at 68% 18%, #2c7be5 0 2px, transparent 3px),
        radial-gradient(circle at 82% 42%, #ffc400 0 2px, transparent 3px);
    opacity: 0.72;
}

.lesson-progress-check {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #18a86b, #12c28a);
    box-shadow: 0 14px 28px rgba(18, 194, 138, 0.25);
    font-size: 1.8rem;
    font-weight: 900;
}

.lesson-progress-kicker {
    position: relative;
    z-index: 1;
    color: var(--eu-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.lesson-progress-result h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--eu-navy);
    font-size: 1.35rem;
    font-weight: 850;
}

.lesson-progress-subtitle {
    position: relative;
    z-index: 1;
    margin: 0.35rem 0 1.1rem;
    color: #3d4b66;
    font-size: 0.95rem;
}

.lesson-progress-ring {
    display: inline-flex;
    width: 126px;
    height: 126px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.45rem;
    border-radius: 999px;
    background:
        radial-gradient(circle, #fff 0 58%, transparent 59%),
        conic-gradient(#18a86b calc(var(--lesson-progress) * 1%), #e7eef9 0);
}

.lesson-progress-ring span {
    color: var(--eu-navy);
    font-size: 2.05rem;
    font-weight: 900;
    line-height: 1;
}

.lesson-progress-caption {
    color: var(--eu-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.lesson-progress-bar {
    height: 9px;
    max-width: 420px;
    margin: 1.25rem auto 1.1rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eef9;
}

.lesson-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b49ad, #18a86b);
}

.lesson-progress-stats {
    display: grid;
    max-width: 460px;
    margin: 0 auto 1.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.lesson-progress-stats div {
    border: 1px solid #e4ebf6;
    border-radius: 8px;
    padding: 0.8rem 0.65rem;
    background: #fff;
}

.lesson-progress-stats strong {
    display: block;
    color: var(--eu-navy);
    font-size: 1.15rem;
    font-weight: 900;
}

.lesson-progress-stats span {
    color: var(--eu-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.lesson-progress-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.feature-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--eu-navy);
    background: var(--eu-yellow);
    font-weight: 800;
}

.badge-free {
    background: rgba(15, 143, 97, 0.12);
    color: var(--eu-success);
}

.badge-completed {
    background: #13a76b;
    color: #fff;
}

.badge-locked {
    background: rgba(199, 61, 61, 0.12);
    color: var(--eu-danger);
}

.course-module-card.is-completed {
    border-color: rgba(19, 167, 107, 0.34);
    box-shadow: 0 14px 30px rgba(19, 167, 107, 0.11);
}

.course-featured-path {
    border: 1px solid rgba(0, 51, 153, 0.18);
    border-radius: 8px;
    padding: 1.35rem;
    background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
    box-shadow: 0 16px 34px rgba(7, 27, 58, 0.08);
}

.course-featured-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.course-featured-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.35rem;
    color: var(--eu-blue);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.course-featured-head h2 {
    margin: 0 0 0.35rem;
    color: var(--eu-navy);
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    font-weight: 850;
}

.course-featured-head p {
    max-width: 760px;
    margin: 0;
    color: var(--eu-muted);
}

.course-featured-count {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    background: var(--eu-yellow);
    color: #111827;
    font-size: 0.82rem;
    font-weight: 850;
}

.course-featured-card {
    height: 100%;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.92);
}

.course-featured-card h3 {
    margin: 0;
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.course-featured-card p {
    min-height: 4.2rem;
    margin-bottom: 0.8rem;
    color: var(--eu-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.course-module-progress {
    color: #53627a;
    font-size: 0.78rem;
    font-weight: 750;
}

.course-module-progress > div:last-child {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6ecf8;
}

.course-module-progress > div:last-child span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--eu-blue), #13a76b);
}

.lesson-is-completed span:first-child::before {
    content: "✓";
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin-right: 0.45rem;
    border-radius: 999px;
    color: #fff;
    background: #13a76b;
    font-size: 0.72rem;
    font-weight: 900;
}

.offer-price-old {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: line-through;
}

.offer-price-new {
    color: var(--eu-navy);
    font-size: 1.65rem;
    font-weight: 850;
    line-height: 1.15;
}

.offer-credit-choice {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid #cfe1ff;
    border-radius: 8px;
    background: #f6f9ff;
}

.offer-credit-choice label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    color: var(--eu-text);
    font-size: 0.92rem;
    font-weight: 700;
}

.offer-credit-choice input {
    margin-top: 0.2rem;
}

.offer-promo-copy {
    margin-top: 0.35rem;
    color: #9a6a00;
    font-size: 0.9rem;
    font-weight: 750;
}

.offer-promo-copy span {
    display: block;
    color: #64748b;
    font-weight: 600;
}

.offer-feature-description {
    margin-top: 0.12rem;
    max-width: 250px;
    font-size: 0.72rem;
    line-height: 1.25;
}

.admin-plans-page {
    display: grid;
    gap: 0.95rem;
}

.admin-plans-hero,
.admin-plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-plans-hero {
    padding: 1.15rem 1.25rem;
}

.admin-plans-hero h1,
.admin-plan-card-head h2 {
    margin: 0;
    color: var(--eu-navy);
    font-weight: 850;
    letter-spacing: 0;
}

.admin-plans-hero h1 {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.admin-plans-hero p,
.admin-plan-card-head p {
    margin: 0.25rem 0 0;
    color: var(--eu-muted);
    font-size: 0.9rem;
}

.admin-plans-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-plans-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-plan-stat {
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(7, 27, 58, 0.055);
}

.admin-plan-stat span,
.admin-plan-card-head > div > span,
.admin-form-section-title span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
}

.admin-plan-stat strong {
    display: block;
    color: var(--eu-navy);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.05;
}

.admin-plan-stat small {
    color: var(--eu-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.admin-plans-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
    gap: 0.95rem;
    align-items: start;
}

.admin-plans-main {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
}

.admin-plan-editor,
.admin-paypal-panel,
.admin-plan-list {
    min-width: 0;
    padding: 1.05rem;
}

.admin-plan-editor {
    position: sticky;
    top: 76px;
}

.admin-plan-card-head {
    margin-bottom: 1rem;
}

.admin-plan-card-head h2 {
    font-size: 1.18rem;
}

.admin-form-section {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #e5edf8;
}

.admin-form-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.admin-form-section-soft {
    padding: 0.95rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #f8fbff;
}

.admin-form-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.admin-form-section-title strong {
    color: var(--eu-navy);
    font-size: 0.98rem;
    font-weight: 850;
}

.admin-form-section-title span {
    text-align: right;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    font-weight: 650;
}

.plan-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.plan-feature-toggle {
    display: flex;
    gap: 0.55rem;
    min-height: 74px;
    padding: 0.72rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.plan-feature-toggle:hover,
.plan-feature-toggle:has(input:checked) {
    border-color: rgba(0, 51, 153, 0.35);
    background: #f4f8ff;
    box-shadow: 0 8px 18px rgba(0, 51, 153, 0.07);
}

.plan-feature-toggle input {
    margin-top: 0.18rem;
}

.plan-feature-toggle strong,
.plan-feature-toggle small {
    display: block;
}

.plan-feature-toggle strong {
    color: var(--eu-navy);
    font-size: 0.86rem;
    line-height: 1.2;
}

.plan-feature-toggle small {
    margin-top: 0.18rem;
    color: var(--eu-muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.plan-switch {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 38px;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #fff;
    color: var(--eu-navy);
    font-weight: 800;
    cursor: pointer;
}

.plan-switch input {
    width: 1.05rem;
    height: 1.05rem;
}

.admin-plan-form-actions,
.admin-plan-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-plan-form-actions {
    margin-top: 1.1rem;
}

.admin-plan-form-actions .btn {
    min-width: 160px;
}

.admin-plan-table {
    min-width: 1120px;
    margin: 0;
}

.admin-plan-table th {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    border-color: #e6edf8;
}

.admin-plan-table td {
    color: var(--eu-text);
    font-size: 0.86rem;
    border-color: #eef3fa;
    vertical-align: top;
}

.admin-plan-table tbody tr:hover {
    background: #f8fbff;
}

.admin-plan-offer-cell strong,
.admin-plan-offer-cell small,
.admin-plan-offer-cell em,
.admin-plan-promo-cell strong,
.admin-plan-promo-cell span,
.admin-plan-promo-cell small {
    display: block;
}

.admin-plan-offer-cell strong {
    color: var(--eu-navy);
    font-size: 0.96rem;
}

.admin-plan-offer-cell small,
.admin-plan-promo-cell small {
    color: var(--eu-muted);
    font-size: 0.76rem;
}

.admin-plan-offer-cell em {
    margin-top: 0.2rem;
    color: #3d4b66;
    font-size: 0.78rem;
    font-style: normal;
}

.admin-plan-promo-cell strong {
    color: var(--eu-navy);
}

.admin-plan-promo-cell > span:not(.badge) {
    color: #9a6a00;
    font-weight: 850;
}

.admin-plan-quota-cell span {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    min-width: 104px;
    color: var(--eu-muted);
    font-size: 0.78rem;
}

.admin-plan-quota-cell span + span {
    margin-top: 0.25rem;
}

.admin-plan-quota-cell strong {
    color: var(--eu-navy);
}

.admin-plan-feature-pills {
    display: grid;
    max-width: 310px;
    gap: 0.28rem;
    justify-items: start;
}

.admin-plan-feature-pills span {
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    color: #0f7b52;
    background: rgba(19, 167, 107, 0.12);
    font-size: 0.7rem;
    font-weight: 800;
}

.admin-plan-feature-pills .is-muted {
    color: #64748b;
    background: #eef3fa;
}

.admin-plan-status-cell {
    white-space: nowrap;
}

.admin-accounting-page {
    display: grid;
    gap: 0.95rem;
}

.accounting-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-top: 3px solid #25b9d7;
}

.accounting-hero-copy > span,
.accounting-panel-head > div > span {
    color: #6c7a89;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

.accounting-hero h1,
.accounting-panel-head h2 {
    margin: 0.1rem 0 0;
    color: #1f2d3d;
    font-weight: 800;
    letter-spacing: 0;
}

.accounting-hero h1 {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
}

.accounting-hero p,
.accounting-panel-head p {
    max-width: 760px;
    margin: 0.25rem 0 0;
    color: #6c7a89;
    font-size: 0.9rem;
}

.accounting-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.accounting-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-left: 4px solid #fbbb22;
    border-radius: 8px;
    color: #6b4b00;
    background: #fff7df;
}

.accounting-alert strong {
    color: #2d2d2d;
}

.accounting-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.accounting-kpi {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 0.95rem;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(31, 45, 61, 0.06);
}

.accounting-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #8d98a5;
}

.accounting-kpi.is-positive::before {
    background: #72c279;
}

.accounting-kpi.is-danger::before {
    background: #e08f95;
}

.accounting-kpi.is-primary::before {
    background: #25b9d7;
}

.accounting-kpi.is-warning::before {
    background: #fbbb22;
}

.accounting-kpi span,
.accounting-kpi small {
    display: block;
}

.accounting-kpi span {
    color: #6c7a89;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.accounting-kpi strong {
    display: block;
    margin-top: 0.35rem;
    color: #1f2d3d;
    font-size: clamp(1.25rem, 1.7vw, 1.75rem);
    font-weight: 850;
    line-height: 1.08;
}

.accounting-kpi small {
    margin-top: 0.35rem;
    color: #6c7a89;
    font-size: 0.78rem;
    font-weight: 650;
}

.accounting-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #fff;
}

.accounting-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    color: #3d4b5f;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
}

.accounting-tabs a:hover,
.accounting-tabs a.active {
    color: #fff;
    background: #25b9d7;
}

.accounting-tabs span {
    min-width: 22px;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    color: inherit;
    background: rgba(255, 255, 255, 0.22);
    text-align: center;
    font-size: 0.74rem;
}

.accounting-panel {
    padding: 1rem;
}

.accounting-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.accounting-panel-head h2 {
    font-size: 1.2rem;
}

.accounting-filterbar {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(170px, 0.55fr);
    gap: 0.5rem;
    min-width: min(100%, 460px);
}

.accounting-table {
    min-width: 1180px;
    margin: 0;
}

.accounting-table th {
    color: #6c7a89;
    background: #f6f8fb;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    border-color: #dfe7f0;
}

.accounting-table td {
    color: #1f2d3d;
    font-size: 0.86rem;
    border-color: #edf2f7;
    vertical-align: top;
}

.accounting-table tbody tr:hover {
    background: #f9fbfd;
}

.accounting-table td strong,
.accounting-table td small,
.accounting-ref {
    display: block;
}

.accounting-table td strong {
    color: #1f2d3d;
    font-weight: 850;
}

.accounting-table td small {
    color: #6c7a89;
    font-size: 0.75rem;
    line-height: 1.35;
}

.accounting-ref {
    max-width: 220px;
    overflow: hidden;
    color: #42526b;
    font-size: 0.74rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.35rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.accounting-badge.is-success {
    color: #0f7b52;
    background: rgba(114, 194, 121, 0.18);
}

.accounting-badge.is-warning {
    color: #8a6200;
    background: rgba(251, 187, 34, 0.22);
}

.accounting-badge.is-danger {
    color: #b23b46;
    background: rgba(224, 143, 149, 0.2);
}

.accounting-badge.is-neutral {
    color: #52606f;
    background: #eef3f8;
}

.accounting-money {
    white-space: nowrap;
    color: #1f2d3d;
    font-weight: 850;
}

.accounting-money.is-positive {
    color: #0f7b52;
}

.accounting-money.is-danger {
    color: #b23b46;
}

.accounting-refund-cell {
    min-width: 210px;
}

.accounting-refund-cell details {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #fff;
}

.accounting-refund-cell summary {
    padding: 0.45rem 0.65rem;
    color: #b23b46;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
}

.accounting-refund-form {
    display: grid;
    gap: 0.45rem;
    padding: 0 0.65rem 0.65rem;
}

.accounting-refund-form label {
    margin: 0;
    color: #6c7a89;
    font-size: 0.72rem;
    font-weight: 800;
}

.accounting-muted-action,
.accounting-empty {
    color: #6c7a89;
    font-size: 0.82rem;
}

.accounting-empty {
    padding: 1.2rem !important;
    text-align: center;
}

.support-page {
    min-height: calc(100vh - 80px);
}

.support-hero,
.support-admin-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.support-hero span,
.support-admin-hero span,
.support-panel-head > div > span,
.support-admin-customer span {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
}

.support-hero h1,
.support-hero p,
.support-panel-head h2,
.support-panel-head p,
.support-admin-hero h1,
.support-admin-hero p {
    margin: 0;
}

.support-hero h1,
.support-admin-hero h1 {
    color: var(--eu-navy);
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    font-weight: 850;
}

.support-hero p,
.support-admin-hero p,
.support-panel-head p {
    margin-top: 0.3rem;
    color: var(--eu-muted);
}

.support-layout,
.support-admin-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.support-ticket-list,
.support-conversation,
.support-admin-list,
.support-admin-detail {
    min-width: 0;
    padding: 1rem;
}

.support-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.support-panel-head > .badge,
.support-ticket-link .badge,
.support-admin-ticket .badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    padding: 0.22rem 0.5rem;
    color: #fff !important;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.support-panel-head > .badge {
    flex: 0 0 auto;
    margin-left: auto;
}

.support-panel-head h2 {
    color: var(--eu-navy);
    font-size: 1.2rem;
    font-weight: 850;
}

.support-ticket-link,
.support-admin-ticket {
    display: block;
    padding: 0.8rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    color: var(--eu-text);
    text-decoration: none;
    background: #fff;
}

.support-ticket-link + .support-ticket-link,
.support-admin-ticket + .support-admin-ticket {
    margin-top: 0.55rem;
}

.support-ticket-link:hover,
.support-ticket-link.active,
.support-admin-ticket:hover,
.support-admin-ticket.active {
    border-color: rgba(0, 51, 153, 0.32);
    background: #f6f9ff;
}

.support-ticket-link strong,
.support-ticket-link span,
.support-ticket-link small,
.support-admin-ticket strong,
.support-admin-ticket span,
.support-admin-ticket small {
    display: block;
}

.support-ticket-link strong,
.support-admin-ticket strong {
    color: var(--eu-navy);
    font-size: 0.92rem;
    line-height: 1.25;
}

.support-ticket-link span,
.support-admin-ticket span {
    margin-top: 0.25rem;
    color: var(--eu-muted);
    font-size: 0.8rem;
}

.support-ticket-link small,
.support-admin-ticket small {
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.76rem;
}

.support-message-thread {
    display: grid;
    gap: 0.75rem;
    max-height: 560px;
    overflow-y: auto;
    padding: 0.8rem;
    border: 1px solid #e3ebf7;
    border-radius: 8px;
    background: #f8fbff;
}

.support-message {
    max-width: 78%;
    padding: 0.8rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #fff;
}

.support-message.is-user {
    justify-self: start;
}

.support-message.is-admin {
    justify-self: end;
    border-color: rgba(0, 51, 153, 0.24);
    background: #eef4ff;
}

.support-message.is-internal {
    justify-self: stretch;
    max-width: 100%;
    border-color: rgba(251, 187, 34, 0.45);
    background: #fff8e6;
}

.support-message div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.support-message strong {
    color: var(--eu-navy);
    font-size: 0.86rem;
}

.support-message small {
    color: var(--eu-muted);
    font-size: 0.72rem;
}

.support-message p {
    margin: 0;
    color: #25324d;
    line-height: 1.5;
}

.support-dropzone {
    position: relative;
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px dashed rgba(0, 51, 153, 0.38);
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.support-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.support-dropzone span {
    color: var(--eu-navy);
    font-weight: 850;
}

.support-dropzone small,
.support-dropzone em {
    color: var(--eu-muted);
    font-size: 0.8rem;
    font-style: normal;
}

.support-dropzone.is-dragover {
    border-color: var(--eu-blue);
    background: #eef4ff;
    box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.08);
}

.support-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.support-attachments a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.42rem 0.55rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    color: var(--eu-navy);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.support-attachments a::before {
    content: "";
    width: 0.65rem;
    height: 0.8rem;
    border: 1.7px solid currentColor;
    border-radius: 2px;
    opacity: 0.7;
}

.support-attachments a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-attachments a small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.support-form,
.support-reply-form {
    margin-top: 1rem;
}

.support-admin-page {
    display: grid;
    gap: 0.95rem;
}

.support-admin-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.support-admin-kpis a {
    padding: 0.8rem 0.9rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    color: var(--eu-text);
    background: #fff;
    text-decoration: none;
}

.support-admin-kpis a.active,
.support-admin-kpis a:hover {
    border-color: rgba(0, 51, 153, 0.35);
    background: #f6f9ff;
}

.support-admin-kpis span,
.support-admin-kpis strong {
    display: block;
}

.support-admin-kpis span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.support-admin-kpis strong {
    color: var(--eu-navy);
    font-size: 1.55rem;
    font-weight: 900;
}

.support-admin-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}

.support-admin-ticket-stack {
    max-height: 680px;
    overflow-y: auto;
}

.support-admin-customer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.support-admin-customer div {
    padding: 0.75rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #f8fbff;
}

.support-admin-customer strong,
.support-admin-customer small {
    display: block;
}

.support-admin-customer strong {
    color: var(--eu-navy);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.support-admin-customer small {
    color: var(--eu-muted);
    font-size: 0.76rem;
}

.support-admin-update,
.support-admin-reply-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.support-admin-reply-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    margin-top: 1rem;
    margin-bottom: 0;
}

.support-reply-form {
    padding: 0.9rem;
    border: 1px solid #dbe6f6;
    border-radius: 8px;
    background: #fff;
}

.support-reply-form.is-internal-note {
    background: #fff8e6;
}

.support-empty-state {
    padding: 3rem 1rem;
    text-align: center;
}

.support-empty-state h2 {
    color: var(--eu-navy);
    font-weight: 850;
}

.donation-page {
    min-height: 78vh;
    background:
        linear-gradient(135deg, rgba(0, 31, 84, 0.94), rgba(0, 78, 170, 0.76)),
        url("../img/hero-drone-airspace.png") center/cover no-repeat;
}

.donation-hero {
    padding: 4.5rem 0;
}

.donation-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    align-items: center;
    gap: 2rem;
}

.donation-copy {
    max-width: 760px;
    color: #fff;
}

.donation-eyebrow {
    display: inline-flex;
    margin-bottom: 0.9rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid rgba(255, 204, 0, 0.55);
    border-radius: 999px;
    color: #ffcc00;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.donation-copy h1 {
    max-width: 720px;
    margin: 0 0 1rem;
    font-size: clamp(2.35rem, 4vw, 4.6rem);
    font-weight: 900;
    line-height: 0.98;
}

.donation-copy p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.donation-impact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    max-width: 600px;
    margin-top: 1.25rem;
}

.donation-impact-list span {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 800;
}

.donation-card {
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 60px rgba(0, 20, 58, 0.34);
}

.donation-form .form-label {
    color: var(--eu-navy);
    font-weight: 850;
}

.donation-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.donation-amount-option {
    min-height: 44px;
    border: 1px solid #c9d8ee;
    border-radius: 8px;
    color: var(--eu-navy);
    background: #fff;
    font-weight: 850;
}

.donation-amount-option.active,
.donation-amount-option:hover {
    border-color: #ffcc00;
    background: #ffcc00;
}

.donation-feedback {
    min-height: 24px;
    margin: 0.9rem 0 0.65rem;
    color: #5d6b7c;
    font-size: 0.88rem;
    font-weight: 750;
}

.donation-feedback.is-success {
    color: #147446;
}

.donation-feedback.is-error {
    color: #b4232b;
}

.donation-feedback.is-info {
    color: #0b4bb3;
}

.donation-paypal-buttons {
    min-height: 150px;
}

.donation-state {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid #d8e2f2;
    border-radius: 8px;
    background: #f6f9fe;
}

.donation-state strong {
    color: var(--eu-navy);
    font-size: 1.15rem;
}

.donation-state span {
    color: #50627a;
}

.portfolio-page,
.portfolio-view-page,
.portfolio-manage-page {
    background: #f3f6fb;
}

.portfolio-hero,
.portfolio-public-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 25, 70, 0.94), rgba(0, 76, 160, 0.78)),
        url("../img/hero-drone-airspace.png") center/cover no-repeat;
}

.portfolio-hero {
    padding: 4.25rem 0;
}

.portfolio-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.65fr);
    align-items: center;
    gap: 2rem;
}

.portfolio-hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 4.7rem);
    font-weight: 900;
    line-height: 0.98;
}

.portfolio-hero p {
    max-width: 680px;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.portfolio-hero-actions,
.portfolio-public-actions,
.portfolio-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.portfolio-hero-actions,
.portfolio-public-actions {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.portfolio-search-card,
.portfolio-bio-card,
.portfolio-editor,
.portfolio-gallery-admin,
.portfolio-empty {
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(31, 45, 61, 0.08);
}

.portfolio-search-card {
    padding: 1.15rem;
}

.portfolio-section-head {
    margin-bottom: 1.2rem;
}

.portfolio-section-head h1,
.portfolio-section-head h2 {
    margin: 0;
    color: var(--eu-navy);
    font-weight: 900;
}

.portfolio-section-head p {
    margin: 0.2rem 0 0;
    color: #5f6f84;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-card {
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(31, 45, 61, 0.07);
}

.portfolio-card-media {
    display: grid;
    place-items: center;
    height: 230px;
    color: #fff;
    background: linear-gradient(135deg, #00245f, #0b73d9);
    text-decoration: none;
}

.portfolio-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-card-media span {
    font-size: 3rem;
    font-weight: 900;
}

.portfolio-card-body {
    padding: 1rem;
}

.portfolio-card-body > span,
.portfolio-card-meta small,
.portfolio-photo-card span,
.portfolio-photo-card small,
.portfolio-card-title span {
    color: #65758b;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.portfolio-card h3,
.portfolio-photo-card h3,
.portfolio-card-title h2 {
    margin: 0.25rem 0;
    color: var(--eu-navy);
    font-weight: 900;
}

.portfolio-card h3 a {
    color: inherit;
    text-decoration: none;
}

.portfolio-card p {
    min-height: 48px;
    margin: 0.35rem 0 0;
    color: #475569;
}

.portfolio-card-meta,
.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.portfolio-card-meta small,
.portfolio-tags span {
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    color: #0f6a48;
    background: rgba(19, 167, 107, 0.12);
}

.portfolio-empty {
    padding: 1.35rem;
    color: #596b82;
}

.portfolio-empty strong,
.portfolio-empty span {
    display: block;
}

.portfolio-empty strong {
    color: var(--eu-navy);
    font-size: 1.05rem;
}

.portfolio-public-hero {
    min-height: 470px;
    padding: 5.5rem 0 3.5rem;
    background:
        linear-gradient(135deg, rgba(0, 25, 70, 0.96), rgba(0, 61, 130, 0.62)),
        var(--portfolio-cover, url("../img/hero-drone-airspace.png")) center/cover no-repeat;
}

.portfolio-public-card {
    max-width: 760px;
}

.portfolio-public-card > span {
    color: #ffcc00;
    font-weight: 900;
    text-transform: uppercase;
}

.portfolio-public-card h1 {
    margin: 0.35rem 0;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    font-weight: 900;
    line-height: 0.95;
}

.portfolio-public-card p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.12rem;
}

.portfolio-public-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.portfolio-public-meta strong {
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.portfolio-view-layout,
.portfolio-manage-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.portfolio-bio-card,
.portfolio-editor,
.portfolio-gallery-admin {
    padding: 1.15rem;
}

.portfolio-bio-card {
    position: sticky;
    top: 96px;
}

.portfolio-bio-card h2,
.portfolio-bio-card h3 {
    color: var(--eu-navy);
    font-weight: 900;
}

.portfolio-bio-card p {
    color: #46576d;
    line-height: 1.65;
}

.portfolio-bio-card dl {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0 0;
}

.portfolio-bio-card dt {
    color: #65758b;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.portfolio-bio-card dd {
    margin: 0;
    color: var(--eu-navy);
    font-weight: 800;
}

.portfolio-photo-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-photo-card {
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(31, 45, 61, 0.07);
}

.portfolio-photo-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.portfolio-photo-card div {
    padding: 1rem;
}

.portfolio-photo-card p {
    color: #4b5c72;
}

.portfolio-contact-card {
    grid-column: 2;
    padding: 1.15rem;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(31, 45, 61, 0.07);
}

.portfolio-contact-form .form-label {
    color: var(--eu-navy);
    font-weight: 850;
}

.portfolio-hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.portfolio-admin-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.portfolio-admin-photo {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #f8fbff;
}

.portfolio-admin-photo img {
    width: 100%;
    height: 160px;
    border-radius: 6px;
    object-fit: cover;
}

.portfolio-admin-photo strong,
.portfolio-admin-photo span,
.portfolio-admin-photo small {
    display: block;
}

.portfolio-admin-photo strong {
    color: var(--eu-navy);
    font-weight: 900;
}

.portfolio-admin-photo span,
.portfolio-admin-photo small {
    color: #64748b;
}

.portfolio-contact-list {
    display: grid;
    gap: 0.75rem;
}

.portfolio-contact-message {
    padding: 0.85rem;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #f8fbff;
}

.portfolio-contact-message > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.portfolio-contact-message strong {
    color: var(--eu-navy);
    font-weight: 900;
}

.portfolio-contact-message span,
.portfolio-contact-message dt {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.portfolio-contact-message p {
    margin: 0.6rem 0;
    color: #334155;
}

.portfolio-contact-message dl {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.portfolio-contact-message dl div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.portfolio-contact-message dd {
    margin: 0;
    color: var(--eu-navy);
    font-weight: 800;
}

.admin-config-page {
    display: grid;
    gap: 1rem;
}

.admin-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

.admin-config-panel {
    padding: 1.1rem;
}

.admin-config-form .form-label,
.admin-config-test .form-label {
    color: var(--eu-navy);
    font-weight: 850;
}

.admin-config-status {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dbe5f3;
}

.admin-config-status h3 {
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 900;
}

.admin-config-status dl {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0 0;
}

.admin-config-status div {
    display: grid;
    gap: 0.1rem;
    padding: 0.65rem;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #f8fbff;
}

.admin-config-status dt {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-config-status dd {
    margin: 0;
    color: var(--eu-navy);
    font-weight: 850;
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    .admin-plans-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .accounting-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .support-admin-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-plans-layout {
        grid-template-columns: 1fr;
    }

    .admin-plan-editor {
        position: static;
    }
}

@media (max-width: 760px) {
    .admin-plans-hero,
    .accounting-hero,
    .accounting-panel-head,
    .support-hero,
    .support-admin-hero,
    .support-panel-head,
    .admin-plan-card-head,
    .admin-form-section-title {
        flex-direction: column;
    }

    .admin-plans-actions,
    .accounting-toolbar {
        justify-content: flex-start;
    }

    .admin-plans-stats,
    .accounting-kpis,
    .accounting-filterbar,
    .support-layout,
    .support-admin-layout,
    .support-admin-kpis,
    .support-admin-customer,
    .support-admin-update,
    .support-admin-reply-grid,
    .donation-hero-grid,
    .donation-impact-list,
    .portfolio-hero-grid,
    .portfolio-view-layout,
    .portfolio-manage-grid,
    .admin-config-grid,
    .plan-feature-grid {
        grid-template-columns: 1fr;
    }

    .support-message {
        max-width: 100%;
    }

    .admin-form-section-title span {
        text-align: left;
    }
}

.profile-page .section-title {
    letter-spacing: 0;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.45fr);
    gap: 1rem;
}

.profile-panel {
    padding: 1.35rem;
}

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

.profile-stack {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.profile-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-panel-head span {
    display: block;
    color: var(--eu-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.profile-panel-head h2 {
    color: var(--eu-navy);
    font-size: 1.22rem;
    font-weight: 850;
    line-height: 1.2;
    margin: 0.18rem 0 0;
}

.profile-panel-head > strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: var(--eu-blue);
    background: rgba(0, 51, 153, 0.08);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.profile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.profile-facts div {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
}

.profile-facts dt {
    color: var(--eu-muted);
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.profile-facts dd {
    color: var(--eu-navy);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.profile-avatar-preview {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-bottom: 1rem;
    border: 3px solid #ffcc00;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #003399, #071b3a);
    font-weight: 900;
    font-size: 1.6rem;
    box-shadow: 0 16px 30px rgba(7, 27, 58, 0.18);
}

.profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-plan-panel {
    border-color: rgba(0, 51, 153, 0.22);
}

.profile-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.profile-feature-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--eu-border);
    border-radius: 999px;
    color: var(--eu-muted);
    background: #f8fbff;
    font-size: 0.82rem;
    font-weight: 750;
}

.profile-feature-list span.enabled {
    color: #0b6d4a;
    border-color: rgba(15, 143, 97, 0.25);
    background: rgba(15, 143, 97, 0.1);
}

.profile-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.profile-usage-card {
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
}

.profile-usage-card strong {
    color: var(--eu-navy);
}

.profile-usage-card span,
.profile-usage-card small {
    color: var(--eu-muted);
    font-size: 0.85rem;
}

.profile-usage-bar {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf7;
}

.profile-usage-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--eu-blue), #0f8f61);
}

.profile-usage-bar.unlimited span {
    background: linear-gradient(90deg, #0f8f61, var(--eu-yellow));
}

.profile-empty-state {
    display: grid;
    place-items: center;
    min-height: 96px;
    padding: 1rem;
    border: 1px dashed var(--eu-border);
    border-radius: 8px;
    color: var(--eu-muted);
    background: #f8fbff;
    text-align: center;
    font-weight: 700;
}

.profile-mini-list {
    display: grid;
    gap: 0.7rem;
}

.profile-mini-list div {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.15rem 0.75rem;
    align-items: baseline;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--eu-border);
}

.profile-mini-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-mini-list span,
.profile-mini-list small {
    color: var(--eu-muted);
    font-size: 0.82rem;
}

.profile-mini-list strong {
    justify-self: end;
    color: #0f8f61;
}

.profile-mini-list small {
    grid-column: 1 / -1;
}

.admin-dashboard-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    background: #eef3fb;
    color: var(--eu-text);
}

.admin-dashboard-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 0.9rem 0.75rem;
    background: linear-gradient(180deg, #071b3a, #0b1f42 64%, #0f294f);
    color: #fff;
    box-shadow: 12px 0 30px rgba(7, 27, 58, 0.14);
}

.admin-dashboard-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    margin-bottom: 0.55rem;
    text-decoration: none;
}

.admin-dashboard-brand img {
    width: 106px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

.admin-dashboard-nav {
    display: grid;
    gap: 0.25rem;
}

.admin-dashboard-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 38px;
    padding: 0.55rem 0.62rem;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 750;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.admin-dashboard-nav a:hover,
.admin-dashboard-nav a:focus,
.admin-dashboard-nav a.active {
    color: #fff;
    background: #3159d4;
    transform: translateX(2px);
}

.admin-dashboard-nav a.has-notice,
.dashboard-sidebar-nav a.has-notice,
.admin-quick-grid a.has-notice {
    padding-right: 1.6rem;
}

.nav-notice-dot {
    position: absolute;
    top: 0.48rem;
    right: 0.5rem;
    width: 9px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: #ef233c;
    box-shadow: 0 0 0 2px rgba(239, 35, 60, 0.12);
}

.admin-dashboard-nav svg,
.admin-dashboard-title svg,
.admin-quick-grid svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.admin-dashboard-workspace {
    min-width: 0;
}

.admin-dashboard-topbar {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #dbe4f2;
    backdrop-filter: blur(12px);
}

.admin-dashboard-title,
.admin-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.admin-dashboard-title strong {
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 850;
}

.admin-dashboard-title span {
    display: inline-flex;
    color: var(--eu-navy);
}

.admin-dashboard-actions a {
    color: #3159d4;
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
}

.admin-dashboard-actions > span {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #3159d4, #10a36f);
    font-weight: 850;
}

.admin-dashboard-content {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem 1rem 1rem;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.admin-kpi-card,
.admin-dashboard-panel {
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(7, 27, 58, 0.08);
}

.admin-kpi-card {
    padding: 0.95rem 1rem;
}

.admin-kpi-card small {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
}

.admin-kpi-card div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
}

.admin-kpi-card strong {
    color: #071b3a;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 900;
    line-height: 1;
}

.admin-kpi-card span {
    color: #108a61;
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.admin-dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
    gap: 0.85rem;
}

.admin-dashboard-main-grid.compact {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.55fr);
}

.admin-dashboard-panel {
    min-width: 0;
    padding: 0.95rem 1rem;
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.admin-panel-head h2 {
    color: #071b3a;
    font-size: 1rem;
    font-weight: 850;
    margin: 0;
}

.admin-panel-head span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 750;
}

.admin-line-chart {
    width: 100%;
    height: 205px;
    display: block;
    overflow: visible;
}

.admin-line-chart line {
    stroke: #d7e0ee;
    stroke-width: 1.5;
}

.admin-line-chart line.muted {
    stroke: #eef3fb;
}

.admin-line-chart polyline {
    fill: none;
    stroke: #3159d4;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 8px 8px rgba(49, 89, 212, 0.14));
}

.admin-line-chart text {
    fill: #64748b;
    font-size: 11px;
    font-weight: 750;
    text-anchor: middle;
}

.admin-donut-layout {
    min-height: 205px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.admin-donut {
    width: 142px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--donut);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(7, 27, 58, 0.08), 0 12px 22px rgba(7, 27, 58, 0.08);
}

.admin-donut::after {
    content: "";
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e8eef8;
}

.admin-donut-legend {
    display: grid;
    gap: 0.7rem;
}

.admin-donut-legend div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    color: #071b3a;
    font-size: 0.86rem;
}

.admin-donut-legend span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--role-color);
}

.admin-donut-legend strong {
    font-weight: 800;
}

.admin-donut-legend em {
    color: #64748b;
    font-style: normal;
    font-weight: 800;
}

.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.admin-quick-grid a {
    position: relative;
    min-height: 74px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 0.8rem 0.55rem;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    color: #071b3a;
    background: #f8fbff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.admin-quick-grid a:hover,
.admin-quick-grid a:focus {
    border-color: #3159d4;
    background: #fff;
    transform: translateY(-2px);
}

.admin-quick-grid svg {
    color: #3159d4;
}

.admin-content-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-content-metrics div {
    min-height: 74px;
    display: grid;
    align-content: center;
    padding: 0.85rem;
    border-radius: 8px;
    background: #f8fbff;
    border: 1px solid #dbe4f2;
}

.admin-content-metrics strong {
    color: #071b3a;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.admin-content-metrics span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
    margin-top: 0.3rem;
}

.admin-activity-panel {
    padding-bottom: 0.25rem;
}

.admin-activity-table {
    margin: 0;
}

.admin-activity-table th {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
    border-color: #e7edf7;
}

.admin-activity-table td {
    color: #071b3a;
    font-size: 0.88rem;
    border-color: #edf2f8;
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
}

.admin-mission-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.35rem;
    border: 1px solid rgba(0, 51, 153, 0.14);
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--eu-navy), var(--eu-blue));
    box-shadow: 0 16px 36px rgba(7, 27, 58, 0.12);
}

.admin-mission-hero h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.admin-mission-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    overflow-wrap: anywhere;
}

.admin-mission-hero .btn {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
}

.admin-mission-kpi {
    margin-bottom: 1rem;
}

.admin-mission-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-mission-status-grid div,
.admin-mission-zone-grid article,
.admin-mission-bars div {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
}

.admin-mission-status-grid div {
    padding: 0.9rem;
}

.admin-mission-status-grid strong,
.admin-mission-status-grid span {
    display: block;
}

.admin-mission-status-grid strong {
    color: var(--eu-navy);
    font-size: 0.9rem;
}

.admin-mission-status-grid span {
    margin-top: 0.35rem;
    font-size: 1.75rem;
    font-weight: 900;
}

.admin-mission-map {
    position: relative;
    min-height: 260px;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0, 51, 153, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(0, 51, 153, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 18% 28%, rgba(16, 143, 97, 0.16), transparent 20%),
        radial-gradient(circle at 74% 64%, rgba(0, 51, 153, 0.14), transparent 23%),
        #f8fbff;
    background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

.admin-mission-map span {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 18px rgba(7, 27, 58, 0.18);
}

.admin-mission-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--eu-muted);
    font-weight: 800;
}

.admin-mission-bars {
    display: grid;
    gap: 0.65rem;
}

.admin-mission-bars div {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.7rem 0.8rem 0.9rem;
    overflow: hidden;
}

.admin-mission-bars span,
.admin-mission-bars strong {
    position: relative;
    z-index: 1;
}

.admin-mission-bars span {
    color: var(--eu-navy);
    font-weight: 850;
}

.admin-mission-bars strong {
    color: var(--eu-blue);
    font-weight: 900;
}

.admin-mission-bars em {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, var(--eu-blue), #0f8f61);
}

.admin-mission-zone-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.admin-mission-zone-grid article {
    padding: 0.9rem;
}

.admin-mission-zone-grid h3 {
    margin: 0 0 0.7rem;
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 900;
}

.admin-mission-zone-grid article div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(219, 228, 243, 0.75);
}

.admin-mission-zone-grid article div > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.admin-mission-zone-grid strong {
    color: var(--eu-text);
    font-size: 0.88rem;
}

.admin-mission-zone-grid em {
    color: var(--eu-blue);
    font-style: normal;
    font-weight: 900;
}

.admin-mission-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 900;
}

.admin-mission-pill.is-good,
.admin-mission-status-grid .is-good,
.admin-mission-map .is-good,
.admin-mission-zone-grid .is-good {
    color: #fff;
    background: var(--eu-success);
}

.admin-mission-pill.is-warning,
.admin-mission-status-grid .is-warning,
.admin-mission-map .is-warning,
.admin-mission-zone-grid .is-warning {
    color: #7a5200;
    background: #ffdc65;
}

.admin-mission-pill.is-danger,
.admin-mission-status-grid .is-danger,
.admin-mission-map .is-danger,
.admin-mission-zone-grid .is-danger {
    color: #fff;
    background: var(--eu-danger);
}

.admin-mission-pill.is-muted,
.admin-mission-status-grid .is-muted,
.admin-mission-map .is-muted,
.admin-mission-zone-grid .is-muted {
    color: #fff;
    background: #64748b;
}

.admin-mission-table td strong,
.admin-mission-table td small {
    display: block;
}

.admin-mission-table td strong {
    color: var(--eu-navy);
}

.admin-mission-table td small {
    color: var(--eu-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.auth-wrap {
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    padding: 3rem 0;
    background: linear-gradient(180deg, #fff, var(--eu-light));
}

.auth-card {
    padding: 2rem;
}

.dashboard-quick a,
.admin-nav a {
    text-decoration: none;
}

.dashboard-page {
    background: var(--eu-light);
}

.dashboard-hero {
    color: #fff;
    padding: 2.6rem 0;
    background:
        linear-gradient(90deg, rgba(7, 27, 58, 0.96), rgba(0, 51, 153, 0.82)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    align-items: center;
    gap: 1.5rem;
}

.dashboard-kicker {
    color: var(--eu-yellow);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

.dashboard-hero h1 {
    max-width: 760px;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.02;
    margin-bottom: 0.8rem;
}

.dashboard-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
}

.dashboard-command,
.dashboard-panel,
.dashboard-profile,
.dashboard-metric {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.07);
}

.dashboard-command {
    color: var(--eu-text);
    padding: 1.2rem;
}

.dashboard-command-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-command-top span,
.dashboard-command-row span,
.dashboard-metric span,
.dashboard-panel-head p,
.dashboard-profile span,
.dashboard-profile small {
    color: var(--eu-muted);
}

.dashboard-command-top strong {
    display: block;
    color: var(--eu-navy);
    font-size: 2rem;
    line-height: 1;
}

.dashboard-ring {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 55%, transparent 56%),
        conic-gradient(var(--eu-yellow) calc(var(--value) * 1%), #dbe4f3 0);
}

.dashboard-ring span {
    color: var(--eu-navy);
    font-weight: 800;
}

.dashboard-command-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(90px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0;
    border-top: 1px solid var(--eu-border);
}

.dashboard-command-row strong {
    color: var(--eu-navy);
    font-size: 0.92rem;
}

.dashboard-main {
    padding-top: 2rem;
}

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

.dashboard-metric {
    display: block;
    padding: 1.25rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-metric:hover,
.roadmap-card:hover,
.dashboard-list-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(7, 27, 58, 0.12);
}

.dashboard-metric strong {
    display: block;
    color: var(--eu-navy);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1;
    margin: 0.45rem 0;
}

.dashboard-metric small {
    color: var(--eu-muted);
}

.dashboard-panel {
    padding: 1.35rem;
}

.dashboard-panel h2 {
    color: var(--eu-navy);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.dashboard-panel-head.compact {
    margin-bottom: 0.75rem;
}

.dashboard-panel-head p {
    margin: 0;
}

.dashboard-status,
.roadmap-card em,
.dashboard-list-row em {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-status {
    color: var(--eu-blue);
    background: #eef4ff;
    border: 1px solid #dbeafe;
}

.pilot-path {
    display: grid;
    gap: 0.9rem;
}

.pilot-step {
    padding: 0.9rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
}

.pilot-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.pilot-step-top strong {
    color: var(--eu-navy);
}

.pilot-step-top span {
    color: var(--eu-blue);
    font-weight: 800;
}

.dashboard-mini-progress {
    height: 8px;
    border-radius: 999px;
    background: #e6ecf8;
    overflow: hidden;
}

.dashboard-mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--eu-blue), #2c7be5);
}

.dashboard-list {
    display: grid;
    gap: 0.75rem;
}

.dashboard-list-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    color: var(--eu-text);
    text-decoration: none;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-list-row strong,
.dashboard-list-row span {
    display: block;
}

.dashboard-list-row span {
    color: var(--eu-muted);
    font-size: 0.88rem;
}

.dashboard-list-row em.is-free {
    color: var(--eu-success);
    background: rgba(15, 143, 97, 0.1);
}

.dashboard-list-row em.is-locked {
    color: var(--eu-danger);
    background: rgba(199, 61, 61, 0.1);
}

.last-exam-score {
    color: var(--eu-navy);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.last-exam-score span {
    color: var(--eu-muted);
    font-size: 1.35rem;
}

.mission-checklist {
    display: grid;
    gap: 0.75rem;
}

.mission-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
}

.mission-checklist input {
    margin-top: 0.25rem;
    accent-color: var(--eu-blue);
}

.mission-checklist input:checked + span {
    color: var(--eu-navy);
    font-weight: 700;
}

.mission-hero {
    padding: 3.5rem 0;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(7, 27, 58, 0.96), rgba(0, 51, 153, 0.82)),
        url("../img/hero-drone-airspace.png") center/cover no-repeat;
}

.mission-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 2rem;
    align-items: center;
}

.mission-hero h1,
.mission-planner-title h1 {
    max-width: 820px;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.02;
    margin: 0.35rem 0 1rem;
    letter-spacing: 0;
}

.mission-hero p,
.mission-planner-title p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.08rem;
    line-height: 1.7;
}

.mission-hero-panel {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(8px);
}

.mission-hero-panel > strong {
    font-size: 4.5rem;
    line-height: 0.9;
}

.mission-hero-panel > span,
.mission-hero-stats small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.mission-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.mission-hero-stats div {
    padding: 0.9rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
}

.mission-hero-stats b,
.mission-hero-stats small {
    display: block;
}

.mission-hero-stats b {
    font-size: 1.65rem;
}

.mission-center-grid,
.mission-planner-layout,
.mission-form-grid {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.mission-center-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.mission-planner-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
}

.mission-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mission-panel {
    padding: 1.45rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(7, 27, 58, 0.07);
}

.mission-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.mission-panel-head h2 {
    margin: 0 0 0.3rem;
    color: var(--eu-navy);
    font-size: 1.35rem;
    font-weight: 900;
}

.mission-panel-head p {
    margin: 0;
    color: var(--eu-muted);
}

.mission-empty {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px dashed #b8c7e2;
    border-radius: 8px;
    color: var(--eu-muted);
    background: #f8fbff;
}

.mission-empty strong {
    color: var(--eu-navy);
}

.mission-list,
.mission-drone-list,
.mission-status-grid,
.mission-check-grid,
.mission-drone-select {
    display: grid;
    gap: 0.8rem;
}

.mission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    color: var(--eu-text);
    text-decoration: none;
    background: #fff;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.mission-row:hover {
    border-color: rgba(0, 51, 153, 0.36);
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.09);
    transform: translateY(-1px);
}

.mission-row span,
.mission-row small,
.mission-row p {
    color: var(--eu-muted);
}

.mission-row h3 {
    margin: 0.2rem 0 0.35rem;
    color: var(--eu-navy);
    font-size: 1.12rem;
    font-weight: 900;
}

.mission-row p {
    margin: 0 0 0.35rem;
}

.mission-row-status {
    display: grid;
    align-content: center;
    justify-items: end;
    text-align: right;
}

.mission-row-status em,
.mission-go-card strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-style: normal;
    font-weight: 900;
}

.mission-row-status strong {
    color: var(--eu-navy);
    font-size: 1.4rem;
}

.mission-drone-chip,
.mission-drone-select label,
.mission-check-grid label {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.85rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
}

.mission-drone-chip {
    display: grid;
    gap: 0.2rem;
}

.mission-drone-chip strong,
.mission-drone-select strong {
    color: var(--eu-navy);
}

.mission-drone-chip span,
.mission-drone-select em {
    color: var(--eu-muted);
    font-style: normal;
}

.mission-planner-top {
    padding: 2.4rem 0;
    color: #fff;
    background: linear-gradient(120deg, var(--eu-navy), var(--eu-blue));
}

.mission-planner-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 1.5rem;
    align-items: center;
}

.mission-back-link {
    color: var(--eu-yellow);
    font-weight: 900;
    text-decoration: none;
}

.mission-go-card {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.mission-go-card span {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.mission-map-panel {
    position: sticky;
    top: 90px;
}

.mission-map-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

#mission-map {
    width: 100%;
    min-height: 560px;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    overflow: hidden;
    background: #dce8f8;
}

.mission-map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
    color: var(--eu-muted);
    font-size: 0.9rem;
}

.mission-map-meta span {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #f2f6fd;
}

.mission-control-panel {
    position: sticky;
    top: 90px;
}

.mission-weather-box {
    display: grid;
    gap: 0.25rem;
    margin: 0.85rem 0;
    padding: 0.95rem;
    border-radius: 8px;
    color: var(--eu-navy);
    background: #f2f6fd;
}

.mission-weather-box span {
    color: var(--eu-muted);
}

.mission-status-grid label {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 0.75rem;
    align-items: center;
}

.mission-status-grid span {
    color: var(--eu-navy);
    font-weight: 800;
}

.mission-control-note {
    grid-column: 1 / -1;
    min-height: 0;
    color: var(--eu-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.mission-gps-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
}

.mission-gps-copy span,
.mission-gps-copy strong {
    display: block;
}

.mission-gps-copy span {
    color: var(--eu-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.mission-gps-copy strong {
    color: var(--eu-navy);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.mission-gps-copy .btn {
    flex: 0 0 auto;
}

.mission-form-subtitle {
    margin: 0.25rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--eu-border);
    color: var(--eu-navy);
    font-size: 0.95rem;
    font-weight: 900;
}

.mission-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
}

.mission-source-grid a {
    min-height: 38px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    color: var(--eu-blue);
    text-decoration: none;
    font-weight: 800;
    background: #fff;
}

.mission-drone-select input,
.mission-check-grid input {
    margin-top: 0.25rem;
    accent-color: var(--eu-blue);
}

.mission-drone-select span {
    display: grid;
    gap: 0.15rem;
}

.mission-check-grid label:has(input:checked) {
    border-color: rgba(15, 143, 97, 0.35);
    background: rgba(15, 143, 97, 0.08);
}

.mission-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -12px 30px rgba(7, 27, 58, 0.08);
    backdrop-filter: blur(8px);
}

.mission-save-bar strong,
.mission-save-bar span {
    display: block;
}

.mission-save-bar strong {
    color: var(--eu-navy);
}

.mission-save-bar span {
    color: var(--eu-muted);
}

.qcm-feed {
    display: grid;
    gap: 0.75rem;
}

.qcm-feed-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--eu-border);
}

.qcm-feed-item:last-child {
    border-bottom: 0;
}

.qcm-feed-item span {
    display: block;
    color: var(--eu-blue);
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.qcm-feed-item p {
    margin: 0;
    color: var(--eu-text);
}

.roadmap-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.roadmap-filter-group button {
    min-height: 34px;
    border: 1px solid var(--eu-border);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    color: var(--eu-blue);
    background: #fff;
    font-weight: 700;
}

.roadmap-filter-group button.active {
    color: #fff;
    background: var(--eu-blue);
    border-color: var(--eu-blue);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.roadmap-card {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--eu-text);
    text-decoration: none;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.roadmap-card.is-hidden {
    display: none;
}

.roadmap-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.roadmap-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 8px;
    background: var(--eu-navy);
    font-weight: 800;
}

.roadmap-card em {
    color: var(--eu-blue);
    background: #eef4ff;
}

.roadmap-card h3 {
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.roadmap-card p {
    flex: 1;
    color: var(--eu-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

.badge-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.badge-board span {
    padding: 0.85rem;
    color: var(--eu-navy);
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
    font-weight: 800;
}

.business-stack {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.business-stack div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #f8fbff;
}

.business-stack strong,
.business-stack span {
    display: block;
}

.business-stack span {
    color: var(--eu-muted);
    text-align: right;
}

.dashboard-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 0.4fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
}

.dashboard-profile strong,
.dashboard-profile small {
    display: block;
}

.dashboard-profile strong {
    color: var(--eu-navy);
}

.dashboard-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.dashboard-app-page {
    background: #f4f7fc;
    padding: 1rem 0 1.6rem;
}

.dashboard-app-container {
    max-width: 1420px;
}

.dashboard-app-shell {
    display: grid;
    grid-template-columns: 166px minmax(0, 1fr);
    min-height: calc(100vh - 112px);
    overflow: hidden;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(7, 27, 58, 0.1);
}

.dashboard-sidebar {
    color: rgba(255, 255, 255, 0.82);
    background: linear-gradient(180deg, #071b3a, #001b4f);
    padding: 1rem 0.85rem;
}

.dashboard-sidebar-brand {
    display: block;
    padding: 0.45rem;
    margin-bottom: 0.9rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.dashboard-sidebar-brand img {
    width: 100%;
    height: auto;
    display: block;
}

.dashboard-sidebar-nav {
    display: grid;
    gap: 0.28rem;
}

.dashboard-sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 38px;
    padding: 0.55rem 0.62rem;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.84);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-sidebar-nav a.active,
.dashboard-sidebar-nav a:hover,
.dashboard-sidebar-nav a:focus {
    color: #fff;
    background: var(--eu-blue);
}

.dashboard-sidebar-nav svg,
.dashboard-topbar-actions svg,
.dashboard-summary-card svg,
.dashboard-objective-box svg,
.dashboard-course-row svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.dashboard-workspace {
    min-width: 0;
    background: #f7f9fd;
}

.dashboard-topbar {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--eu-border);
    background: #fff;
}

.dashboard-topbar-left,
.dashboard-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.dashboard-topbar-left strong {
    color: var(--eu-navy);
    font-weight: 800;
}

.dashboard-topbar-left span,
.dashboard-topbar-actions span,
.dashboard-topbar-actions a {
    color: var(--eu-muted);
    font-size: 0.88rem;
    text-decoration: none;
}

.dashboard-menu-mark {
    color: var(--eu-navy) !important;
    font-weight: 800;
}

.dashboard-topbar-actions a,
.dashboard-topbar-actions > span {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--eu-border);
    border-radius: 50%;
    background: #fff;
    color: var(--eu-navy);
    font-weight: 800;
}

.dashboard-avatar {
    color: #fff !important;
    background: linear-gradient(135deg, var(--eu-blue), #0f8f61) !important;
    border-color: transparent !important;
}

.dashboard-workspace-body {
    padding: 1.2rem;
}

.dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-welcome h1 {
    color: var(--eu-navy);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 800;
    margin: 0;
}

.dashboard-welcome p {
    color: var(--eu-muted);
    margin: 0.25rem 0 0;
}

.dashboard-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    gap: 1rem;
}

.dashboard-main-column,
.dashboard-side-column {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.dashboard-card,
.dashboard-profile-card {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(7, 27, 58, 0.06);
}

.dashboard-card {
    padding: 1.05rem;
}

.dashboard-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.dashboard-card-head h2 {
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.dashboard-card-head span,
.dashboard-card-head a,
.dashboard-card small {
    color: var(--eu-muted);
    font-size: 0.8rem;
}

.dashboard-card-head a {
    text-decoration: none;
    font-weight: 800;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.dashboard-summary-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.35rem 0.6rem;
    align-items: center;
    min-height: 92px;
    padding: 0.85rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    color: var(--eu-text);
    text-decoration: none;
    background: #fbfdff;
}

.dashboard-summary-card span {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--eu-blue);
    background: #edf4ff;
}

.dashboard-summary-card.success span {
    color: var(--eu-success);
    background: rgba(15, 143, 97, 0.1);
}

.dashboard-summary-card strong {
    color: var(--eu-navy);
    font-size: 1.35rem;
    line-height: 1;
}

.dashboard-focus-grid,
.dashboard-lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-resume-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 0.75rem;
    align-items: center;
}

.dashboard-resume-box strong,
.dashboard-resume-box span,
.dashboard-objective-box strong,
.dashboard-objective-box small {
    display: block;
}

.dashboard-resume-box strong,
.dashboard-objective-box strong {
    color: var(--eu-navy);
}

.dashboard-resume-box > div:first-child span {
    color: var(--eu-muted);
    font-size: 0.85rem;
}

.dashboard-resume-box a,
.dashboard-plain-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 0.85rem;
    border-radius: 6px;
    color: #fff;
    background: var(--eu-blue);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
}

.dashboard-objective-box {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.9rem;
}

.dashboard-objective-box > span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--eu-blue);
    background: #edf4ff;
}

.dashboard-progress-card {
    text-align: center;
}

.dashboard-progress-card h2 {
    font-size: 1rem;
}

.dashboard-big-ring {
    width: 136px;
    height: 136px;
    display: grid;
    place-items: center;
    margin: 1rem auto 0.55rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 58%, transparent 59%),
        conic-gradient(var(--eu-blue) var(--value), #e6ecf8 0);
}

.dashboard-big-ring span {
    color: var(--eu-navy);
    font-size: 1.45rem;
    font-weight: 800;
}

.dashboard-course-tools {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.dashboard-course-tools span {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    border: 1px solid var(--eu-border);
    border-radius: 6px;
    color: var(--eu-muted);
    background: #fff;
    font-size: 0.78rem;
}

.dashboard-course-list {
    display: grid;
    gap: 0.65rem;
}

.dashboard-course-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    color: var(--eu-text);
    text-decoration: none;
    background: #fff;
}

.dashboard-course-row > span {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--course-color);
}

.dashboard-course-row strong,
.dashboard-course-row small {
    display: block;
}

.dashboard-course-row strong {
    color: var(--eu-navy);
    font-size: 0.88rem;
}

.dashboard-course-row em {
    color: var(--eu-blue);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
}

.dashboard-roadmap-head {
    align-items: center;
}

.dashboard-profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.4fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}

.dashboard-profile-card span,
.dashboard-profile-card small {
    display: block;
    color: var(--eu-muted);
    font-size: 0.82rem;
}

.dashboard-profile-card strong {
    display: block;
    color: var(--eu-navy);
}

.question-option {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.question-option:hover {
    border-color: var(--eu-blue);
    background: #f8fbff;
}

.question-option.correct {
    border-color: var(--eu-success);
    background: rgba(15, 143, 97, 0.08);
}

.question-option.wrong {
    border-color: var(--eu-danger);
    background: rgba(199, 61, 61, 0.08);
}

.marketplace-hero {
    color: #fff;
    padding: 3.2rem 0;
    background:
        linear-gradient(90deg, rgba(7, 27, 58, 0.96), rgba(0, 51, 153, 0.76)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
}

.marketplace-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.45fr);
    align-items: center;
    gap: 1.5rem;
}

.marketplace-hero h1 {
    max-width: 820px;
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 800;
    line-height: 1.04;
}

.marketplace-hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.06rem;
    line-height: 1.65;
}

.marketplace-hero-panel {
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.marketplace-hero-panel strong,
.marketplace-hero-panel span {
    display: block;
}

.marketplace-hero-panel strong {
    font-size: 1.25rem;
}

.marketplace-hero-panel span {
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.25rem;
}

.marketplace-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.marketplace-hero-metrics div {
    padding: 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
}

.marketplace-hero-metrics b,
.marketplace-hero-metrics small {
    display: block;
}

.marketplace-hero-metrics b {
    color: var(--eu-yellow);
    font-size: 1.6rem;
    line-height: 1;
}

.marketplace-hero-metrics small {
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.35rem;
}

.marketplace-search-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    max-width: 760px;
}

.marketplace-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.marketplace-filters {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.7fr) minmax(170px, 0.9fr) minmax(150px, 0.75fr) auto;
    gap: 0.6rem;
    min-width: min(860px, 100%);
}

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.marketplace-card {
    overflow: hidden;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.07);
}

.marketplace-card-media {
    position: relative;
    display: block;
    min-height: 190px;
    background: #dbe4f3 center / cover no-repeat;
    text-decoration: none;
}

.marketplace-card-media span,
.marketplace-card-body em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 800;
}

.marketplace-card-media span {
    position: absolute;
    left: 0.85rem;
    top: 0.85rem;
    color: var(--eu-navy);
    background: var(--eu-yellow);
}

.marketplace-card-media strong {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    color: #fff;
    background: rgba(7, 27, 58, 0.78);
    font-size: 0.72rem;
}

.marketplace-card-body {
    padding: 1rem;
}

.marketplace-card-body small,
.marketplace-card-body p,
.marketplace-card-foot span {
    color: var(--eu-muted);
}

.marketplace-card-body em {
    color: var(--eu-blue);
    background: #eef4ff;
}

.marketplace-card-body h3 {
    color: var(--eu-navy);
    font-size: 1.08rem;
    font-weight: 800;
}

.marketplace-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.marketplace-card-body p {
    min-height: 66px;
    font-size: 0.92rem;
}

.marketplace-asset-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.marketplace-asset-meta span,
.marketplace-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    color: var(--eu-blue);
    background: #eef4ff;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.marketplace-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--eu-border);
}

.marketplace-card-foot strong,
.marketplace-card-foot span {
    display: block;
}

.marketplace-card-foot strong {
    color: var(--eu-navy);
}

.marketplace-card-foot span {
    font-size: 0.78rem;
}

.marketplace-admin-form {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(120px, 0.6fr) minmax(160px, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.marketplace-detail-grid,
.marketplace-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.38fr);
    gap: 1.2rem;
    align-items: start;
}

.marketplace-preview-panel,
.marketplace-license-panel,
.marketplace-seller-box,
.marketplace-license-box,
.marketplace-seller-stock {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.07);
}

.marketplace-preview-panel {
    overflow: hidden;
}

.marketplace-preview-image {
    position: relative;
    min-height: 560px;
    background: #dbe4f3 center / cover no-repeat;
}

.marketplace-watermark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 16px rgba(7, 27, 58, 0.32);
    transform: rotate(-18deg);
    pointer-events: none;
}

.marketplace-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem;
}

.marketplace-detail-meta span {
    color: var(--eu-muted);
    font-size: 0.85rem;
}

.marketplace-license-panel {
    padding: 1.25rem;
}

.marketplace-license-panel h1 {
    color: var(--eu-navy);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
}

.marketplace-license-box {
    padding: 1rem;
    margin-top: 1rem;
}

.marketplace-license-box h2 {
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 800;
}

.marketplace-license-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: start;
    padding: 0.85rem;
    margin-bottom: 0.65rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    cursor: pointer;
}

.marketplace-license-option input {
    margin-top: 0.25rem;
    accent-color: var(--eu-blue);
}

.marketplace-license-option strong,
.marketplace-license-option small {
    display: block;
}

.marketplace-license-option small,
.marketplace-cart-item span,
.marketplace-cart-item small {
    color: var(--eu-muted);
}

.marketplace-license-option b {
    color: var(--eu-navy);
    white-space: nowrap;
}

.marketplace-seller-box {
    padding: 1rem;
    margin-top: 1rem;
}

.marketplace-seller-box strong,
.marketplace-seller-box span {
    display: block;
}

.marketplace-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.marketplace-cart-list {
    display: grid;
    gap: 0.8rem;
}

.marketplace-cart-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
}

.marketplace-cart-thumb {
    display: block;
    min-height: 82px;
    border-radius: 8px;
    background: #dbe4f3 center / cover no-repeat;
}

.marketplace-cart-item strong,
.marketplace-cart-item span,
.marketplace-cart-item small {
    display: block;
}

.marketplace-cart-price {
    text-align: right;
}

.marketplace-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    margin-bottom: 0.9rem;
    border-top: 1px solid var(--eu-border);
    border-bottom: 1px solid var(--eu-border);
}

.marketplace-total strong {
    color: var(--eu-navy);
    font-size: 1.25rem;
}

.marketplace-seller-stock {
    padding: 1rem;
}

.community-hero {
    color: #fff;
    padding: 3rem 0;
    background:
        linear-gradient(135deg, rgba(7, 27, 58, 0.96), rgba(0, 51, 153, 0.86)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
}

.community-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 1.5rem;
    align-items: center;
}

.community-hero h1 {
    max-width: 820px;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 850;
    line-height: 1.06;
}

.community-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.05rem;
    line-height: 1.6;
}

.community-hero-panel,
.community-panel,
.community-sidebar,
.community-topic-detail {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(7, 27, 58, 0.07);
}

.community-hero-panel {
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    padding: 1.2rem;
}

.community-hero-panel > strong {
    display: block;
    color: var(--eu-yellow);
    font-size: 2.25rem;
    line-height: 1;
}

.community-hero-panel > span,
.community-hero-panel p {
    color: rgba(255, 255, 255, 0.82);
}

.community-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
}

.community-stats div {
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
}

.community-stats b,
.community-stats small {
    display: block;
}

.community-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.community-sidebar {
    position: sticky;
    top: 88px;
    padding: 1rem;
}

.community-search {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.community-category-list {
    display: grid;
    gap: 0.35rem;
}

.community-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.62rem 0.75rem;
    border-radius: 8px;
    color: var(--eu-navy);
    text-decoration: none;
    font-weight: 750;
}

.community-category-list a:hover,
.community-category-list a:focus,
.community-category-list a.active {
    color: #fff;
    background: var(--eu-blue);
}

.community-main {
    min-width: 0;
}

.community-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.community-domain-card {
    display: block;
    min-height: 130px;
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    color: inherit;
    background: #fff;
    text-decoration: none;
}

.community-domain-card:hover,
.community-domain-card:focus {
    border-color: rgba(0, 51, 153, 0.42);
    box-shadow: 0 12px 28px rgba(0, 51, 153, 0.08);
}

.community-domain-card strong,
.community-domain-card span {
    display: block;
}

.community-domain-card strong {
    color: var(--eu-navy);
    font-size: 1rem;
    font-weight: 850;
    margin-bottom: 0.45rem;
}

.community-domain-card span {
    color: var(--eu-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.community-panel,
.community-topic-detail {
    padding: 1.2rem;
}

.community-panel-head,
.community-topic-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.community-panel-head h2,
.community-topic-head h1 {
    color: var(--eu-navy);
    font-weight: 850;
    margin-bottom: 0.2rem;
}

.community-panel-head p,
.community-topic-head p,
.community-topic-head span,
.community-topic-state small {
    color: var(--eu-muted);
    margin-bottom: 0;
}

.community-topic-list {
    display: grid;
    gap: 0.65rem;
}

.community-topic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    background: #fff;
}

.community-topic-row:hover,
.community-topic-row:focus {
    border-color: rgba(0, 51, 153, 0.38);
    box-shadow: 0 10px 24px rgba(7, 27, 58, 0.07);
}

.community-topic-row h3 {
    color: var(--eu-navy);
    font-size: 1.06rem;
    font-weight: 850;
    margin: 0.18rem 0 0.3rem;
}

.community-topic-row p {
    color: var(--eu-muted);
    margin-bottom: 0.35rem;
}

.community-topic-summary {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 0.85rem;
}

.community-topic-row span,
.community-topic-row small {
    color: var(--eu-muted);
    font-size: 0.8rem;
}

.community-topic-metrics {
    text-align: right;
}

.community-topic-metrics strong,
.community-topic-metrics span,
.community-topic-metrics small,
.community-topic-metrics em {
    display: block;
}

.community-topic-metrics strong {
    color: var(--eu-blue);
    font-size: 1.45rem;
    line-height: 1;
}

.community-topic-metrics em {
    color: var(--eu-success);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
}

.community-empty {
    display: grid;
    gap: 0.25rem;
    padding: 1.2rem;
    border-radius: 8px;
    background: #f6f8fc;
    color: var(--eu-muted);
}

.community-empty strong {
    color: var(--eu-navy);
}

.community-form textarea {
    resize: vertical;
}

.community-topic-state {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.community-post {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--eu-border);
}

.community-post:first-of-type {
    border-top: 0;
}

.community-post.is-pending {
    opacity: 0.76;
}

.community-post-author strong,
.community-post-author span,
.community-post-author em {
    display: block;
}

.community-post-author strong {
    color: var(--eu-navy);
    font-weight: 850;
}

.community-post-author span {
    color: var(--eu-muted);
    font-size: 0.82rem;
}

.community-post-author em {
    width: fit-content;
    margin-top: 0.4rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    color: #8a5a00;
    background: #fff3cd;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

.community-post-body {
    color: #263244;
    line-height: 1.65;
}

.community-post-report {
    grid-column: 2;
    margin-top: 0.55rem;
}

.community-post-report details {
    width: fit-content;
    max-width: 100%;
}

.community-post-report summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.24rem 0.62rem;
    border: 1px solid rgba(199, 61, 61, 0.28);
    border-radius: 999px;
    color: var(--eu-danger);
    background: #fff6f6;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 850;
    list-style: none;
}

.community-post-report summary::-webkit-details-marker {
    display: none;
}

.community-report-form {
    width: min(420px, calc(100vw - 3rem));
    margin-top: 0.6rem;
    padding: 0.8rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.08);
}

.community-report-sent {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    color: var(--eu-muted);
    background: #eef2f7;
    font-size: 0.8rem;
    font-weight: 800;
}

.community-attachments {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.community-attachments a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 750;
}

.community-attachments span {
    color: var(--eu-muted);
    font-size: 0.74rem;
}

.community-topic-page {
    min-height: calc(100vh - 72px);
    padding: 1.4rem 0 3rem;
    background:
        radial-gradient(circle at top right, rgba(0, 51, 153, 0.09), transparent 34rem),
        linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%);
}

.community-topic-back {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-bottom: 1rem;
    padding: 0.42rem 0.75rem;
    border: 1px solid rgba(0, 51, 153, 0.18);
    border-radius: 999px;
    color: var(--eu-blue);
    background: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 850;
}

.community-topic-back:hover,
.community-topic-back:focus {
    color: #fff;
    background: var(--eu-blue);
}

.community-topic-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1.2rem;
    padding: 1.45rem;
    border: 1px solid rgba(0, 51, 153, 0.12);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(7, 27, 58, 0.96), rgba(0, 51, 153, 0.88)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
    box-shadow: 0 18px 45px rgba(7, 27, 58, 0.16);
}

.community-topic-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.community-topic-category-row span,
.community-topic-state span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.78rem;
    font-weight: 900;
}

.community-topic-category-row span:first-child {
    color: var(--eu-yellow);
    background: rgba(255, 204, 0, 0.14);
}

.community-topic-hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
}

.community-topic-hero p {
    max-width: 780px;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
    line-height: 1.65;
}

.community-topic-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.3rem;
}

.community-topic-meta-grid div {
    min-height: 78px;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.community-topic-meta-grid small,
.community-topic-meta-grid strong {
    display: block;
}

.community-topic-meta-grid small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    font-weight: 800;
}

.community-topic-meta-grid strong {
    color: #fff;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
    margin-top: 0.3rem;
}

.community-topic-hero-side {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.community-topic-list-avatar,
.community-topic-avatar,
.community-post-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--eu-blue), #0f8f61);
    font-weight: 900;
    overflow: hidden;
    flex: 0 0 auto;
}

.community-topic-list-avatar {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
}

.community-topic-list-avatar img,
.community-topic-avatar img,
.community-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.community-post-author .community-post-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.community-topic-avatar {
    width: 64px;
    height: 64px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    font-size: 1.45rem;
}

.community-topic-state {
    align-items: flex-start;
}

.community-topic-lock,
.community-thread,
.community-topic-aside,
.community-reply-card {
    margin-top: 1.1rem;
    padding: 1.2rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(7, 27, 58, 0.07);
}

.community-topic-lock {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.community-topic-lock h2,
.community-thread-head h2,
.community-topic-aside h2,
.community-reply-head h2 {
    margin: 0 0 0.25rem;
    color: var(--eu-navy);
    font-size: 1.35rem;
    font-weight: 900;
}

.community-topic-lock p,
.community-thread-head p,
.community-reply-head p,
.community-reply-actions small {
    margin: 0;
    color: var(--eu-muted);
}

.community-topic-lock-actions,
.community-thread-head,
.community-reply-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.community-thread-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.community-thread .community-post {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0;
    border: 0;
}

.community-post-rail {
    display: grid;
    justify-items: center;
    grid-template-rows: 32px minmax(0, 1fr);
    gap: 0.3rem;
}

.community-post-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--eu-blue);
    background: #eef4ff;
    font-size: 0.82rem;
    font-weight: 900;
}

.community-post-line {
    width: 2px;
    min-height: 100%;
    border-radius: 99px;
    background: #dbe4f3;
}

.community-post-card {
    padding: 1rem;
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 27, 58, 0.05);
}

.community-post.is-own .community-post-card {
    border-color: rgba(0, 51, 153, 0.25);
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.community-post.is-pending .community-post-card {
    border-color: rgba(255, 204, 0, 0.55);
    background: #fffaf0;
}

.community-post-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.community-post-author {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.community-post-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.community-post-tools em {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    color: #8a5a00;
    background: #fff3cd;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
}

.community-thread .community-post-body {
    color: #263244;
    line-height: 1.72;
    white-space: normal;
}

.community-thread .community-post-report {
    grid-column: auto;
    margin-top: 0;
}

.community-thread .community-report-form {
    position: absolute;
    right: 0;
    z-index: 20;
}

.community-thread .community-post-report details {
    position: relative;
}

.community-thread .community-attachments {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.9rem;
}

.community-thread .community-attachments a {
    justify-content: space-between;
    min-height: 42px;
    color: var(--eu-blue);
    background: #f8fbff;
}

.community-thread .community-attachments em {
    color: var(--eu-muted);
    font-size: 0.76rem;
    font-style: normal;
}

.community-topic-grid {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.community-topic-aside {
    position: sticky;
    top: 88px;
}

.community-topic-aside ul {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    color: var(--eu-muted);
}

.community-reply-card textarea {
    min-height: 180px;
    border-color: #cfd9ec;
    background: #fbfdff;
}

.community-reply-actions {
    align-items: flex-end;
}

.community-reply-actions > div {
    flex: 1 1 auto;
}

.community-reply-actions .btn {
    min-width: 190px;
}

.community-admin-actions,
.community-admin-category {
    display: grid;
    gap: 0.45rem;
}

.community-admin-actions {
    grid-template-columns: minmax(110px, 0.55fr) minmax(120px, 1fr) auto;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.language-form {
    min-width: 76px;
}

.site-footer {
    background: var(--eu-navy);
    color: #fff;
    padding: 2rem 0;
}

.vision-hero {
    color: #fff;
    padding: 5rem 0 4.5rem;
    background:
        linear-gradient(90deg, rgba(7, 27, 58, 0.94), rgba(0, 51, 153, 0.76)),
        url("../img/hero-drone-airspace.png") center / cover no-repeat;
}

.vision-kicker {
    color: var(--eu-yellow);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

.vision-hero h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 0.95;
    margin-bottom: 0.85rem;
}

.vision-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    font-weight: 700;
}

.vision-lead {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.12rem;
    line-height: 1.75;
    margin: 1.5rem 0 1.8rem;
}

.vision-motto {
    display: inline-flex;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
}

.vision-band {
    background: var(--eu-blue);
    color: #fff;
    padding: 2.4rem 0;
}

.vision-statement {
    max-width: 980px;
}

.vision-statement span {
    color: var(--eu-yellow);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14rem;
    font-size: 0.8rem;
}

.vision-statement h2 {
    font-weight: 800;
    margin: 0.6rem 0;
}

.vision-statement p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

.vision-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
}

.vision-values span,
.vision-chip-grid span,
.vision-inline-list span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-weight: 700;
}

.vision-values span,
.vision-inline-list span {
    color: var(--eu-blue);
    background: #eef4ff;
    border: 1px solid #dbeafe;
}

.vision-quote {
    border-left: 4px solid var(--eu-yellow);
    padding: 1.1rem 0 1.1rem 1.3rem;
    margin: 0;
    color: var(--eu-navy);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
}

.vision-quote strong {
    display: block;
    margin-top: 0.25rem;
}

.vision-user-grid,
.vision-module-grid {
    display: grid;
    gap: 1rem;
}

.vision-user-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.vision-card,
.vision-module,
.vision-panel {
    border: 1px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(7, 27, 58, 0.07);
}

.vision-card {
    padding: 1.15rem;
    min-height: 160px;
}

.vision-card h3,
.vision-module h3,
.vision-panel h2 {
    color: var(--eu-navy);
    font-weight: 800;
}

.vision-card h3 {
    font-size: 1rem;
}

.vision-card p,
.vision-panel p {
    color: var(--eu-muted);
    margin: 0;
    line-height: 1.55;
}

.vision-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vision-module {
    padding: 1.25rem;
}

.vision-module h3 {
    font-size: 1.15rem;
}

.vision-module ul {
    padding-left: 1.1rem;
    margin: 0.8rem 0 0;
    color: var(--eu-muted);
}

.vision-module li {
    margin-bottom: 0.35rem;
}

.vision-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vision-chip-grid span {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
}

.vision-panel {
    height: 100%;
    padding: 1.6rem;
}

.vision-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.vision-final {
    color: #fff;
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--eu-navy), var(--eu-blue));
}

.vision-final p {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0.7rem;
}

.vision-final h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .logo-navbar {
        height: 46px;
    }

    .brand-title {
        font-size: 1.05rem;
    }

    .brand-subtitle {
        font-size: 0.62rem;
        letter-spacing: 0.15rem;
    }

    .hero {
        padding: 2.25rem 0;
    }

    .home-hero {
        min-height: 350px;
    }

    .airspace-label {
        display: none;
    }

    .home-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-hero-grid,
    .dashboard-profile,
    .marketplace-hero-grid,
    .marketplace-toolbar {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .marketplace-toolbar {
        display: grid;
    }

    .marketplace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketplace-admin-form {
        grid-template-columns: 1fr;
        min-width: 220px;
    }

    .marketplace-detail-grid,
    .marketplace-cart-grid {
        grid-template-columns: 1fr;
    }

    .community-hero-grid,
    .community-layout {
        grid-template-columns: 1fr;
    }

    .community-sidebar {
        position: static;
    }

    .community-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketplace-preview-image {
        min-height: 420px;
    }

    .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-app-shell {
        grid-template-columns: 128px minmax(0, 1fr);
    }

    .dashboard-sidebar {
        padding: 0.75rem 0.55rem;
    }

    .dashboard-sidebar-nav a {
        gap: 0.42rem;
        padding: 0.52rem 0.45rem;
        font-size: 0.72rem;
    }

    .dashboard-sidebar-nav svg {
        width: 16px;
        height: 16px;
    }

    .dashboard-layout-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .admin-dashboard-app {
        grid-template-columns: 154px minmax(0, 1fr);
    }

    .admin-dashboard-sidebar {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .admin-dashboard-nav a {
        gap: 0.45rem;
        padding: 0.5rem;
        font-size: 0.74rem;
    }

    .admin-kpi-grid,
    .admin-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-main-grid,
    .admin-dashboard-main-grid.compact,
    .profile-grid,
    .profile-usage-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-focus-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-profile-card {
        grid-template-columns: 1fr;
    }

    .dashboard-metric-grid,
    .roadmap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-profile-actions,
    .roadmap-filter-group {
        justify-content: flex-start;
    }

    .home-pass {
        grid-template-columns: 1fr;
    }

    .home-europe-card {
        align-items: flex-start;
        text-align: left;
    }

    .dashboard-preview {
        grid-template-columns: 150px 1fr;
    }

    .home-vision-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .vision-user-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vision-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-focus-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .hero-panel {
        display: none;
    }

    .hero h1 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .home-hero {
        min-height: auto;
    }

    .home-hero-bg {
        background:
            linear-gradient(180deg, rgba(7, 27, 58, 0.92), rgba(0, 51, 153, 0.76)),
            url("../img/hero-drone-airspace.png") center / cover no-repeat;
    }

    .home-hero-content {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .home-hero h1 {
        font-size: clamp(1.35rem, 5.9vw, 1.75rem);
    }

    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-pass-card,
    .home-europe-card {
        padding: 1.5rem;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-preview {
        grid-template-columns: 1fr;
    }

    .dashboard-preview aside {
        display: none;
    }

    .preview-metrics {
        grid-template-columns: 1fr;
    }

    .preview-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .preview-progress {
        width: 100%;
    }

    .dashboard-hero {
        padding: 2rem 0;
    }

    .dashboard-hero h1 {
        font-size: clamp(1.8rem, 7vw, 2.45rem);
    }

    .lesson-progress-result {
        padding: 1.45rem 1rem;
    }

    .lesson-progress-ring {
        width: 106px;
        height: 106px;
    }

    .lesson-progress-ring span {
        font-size: 1.72rem;
    }

    .lesson-progress-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-command-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .dashboard-app-page {
        padding: 0;
    }

    .admin-dashboard-app {
        grid-template-columns: 1fr;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .admin-dashboard-sidebar {
        position: static;
        min-width: 0;
        height: auto;
        padding: 0.75rem;
    }

    .admin-dashboard-brand {
        justify-content: flex-start;
        min-height: 46px;
        margin-bottom: 0.6rem;
    }

    .admin-dashboard-brand img {
        width: 92px;
        max-height: 46px;
    }

    .admin-dashboard-nav {
        display: flex;
        max-width: 100%;
        gap: 0.45rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .admin-dashboard-nav a {
        flex: 0 0 auto;
        min-height: 34px;
        white-space: nowrap;
        transform: none !important;
    }

    .admin-dashboard-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-dashboard-actions {
        flex-wrap: wrap;
    }

    .admin-dashboard-content {
        padding: 0.85rem;
        min-width: 0;
    }

    .admin-kpi-grid,
    .admin-quick-grid,
    .admin-content-metrics {
        grid-template-columns: 1fr;
    }

    .admin-donut-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: left;
    }

    .admin-donut-legend {
        width: 100%;
    }

    .admin-line-chart {
        height: 180px;
    }

    .dashboard-app-container {
        padding: 0;
    }

    .dashboard-app-shell {
        min-height: calc(100vh - 72px);
        grid-template-columns: 1fr;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .dashboard-sidebar {
        display: none;
    }

    .dashboard-layout-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-topbar,
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .dashboard-workspace-body {
        padding: 0.85rem;
    }

    .dashboard-summary-grid,
    .dashboard-focus-grid,
    .dashboard-lower-grid,
    .dashboard-course-tools,
    .profile-facts,
    .marketplace-search-hero,
    .marketplace-grid,
    .marketplace-filters,
    .marketplace-admin-form,
    .community-category-grid,
    .community-admin-actions,
    .mission-hero-grid,
    .mission-center-grid,
    .mission-planner-layout,
    .mission-form-grid,
    .mission-planner-title {
        grid-template-columns: 1fr;
    }

    .mission-map-panel,
    .mission-control-panel {
        position: static;
    }

    #mission-map {
        min-height: 420px;
    }

    .mission-row,
    .mission-status-grid label,
    .mission-map-search {
        grid-template-columns: 1fr;
    }

    .mission-row-status {
        justify-items: start;
        text-align: left;
    }

    .mission-save-bar,
    .mission-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-save-bar .btn {
        width: 100%;
    }

    .community-panel-head,
    .community-topic-head,
    .community-topic-row,
    .community-post {
        grid-template-columns: 1fr;
    }

    .community-panel-head,
    .community-topic-head {
        display: grid;
    }

    .community-topic-metrics,
    .community-topic-state {
        text-align: left;
        align-items: flex-start;
    }

    .community-attachments {
        grid-column: 1;
    }

    .community-post-report {
        grid-column: 1;
    }

    .marketplace-preview-image {
        min-height: 300px;
    }

    .marketplace-cart-item {
        grid-template-columns: 1fr;
    }

    .marketplace-cart-price {
        text-align: left;
    }

    .dashboard-resume-box {
        grid-template-columns: 1fr;
    }

    .dashboard-metric-grid,
    .roadmap-grid,
    .badge-board {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-head,
    .dashboard-list-row,
    .business-stack div {
        flex-direction: column;
        align-items: flex-start;
    }

    .business-stack span {
        text-align: left;
    }

    .dashboard-profile-actions .btn {
        width: 100%;
    }

    .vision-hero {
        padding: 3.5rem 0;
    }

    .vision-user-grid,
    .vision-module-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-mission-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-mission-status-grid,
    .admin-mission-zone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discover-hero-grid,
    .discover-manifest-grid,
    .discover-split,
    .discover-difference-grid {
        grid-template-columns: 1fr;
    }

    .discover-audience-grid,
    .discover-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discover-photo-stack {
        grid-template-columns: 1fr 1fr;
    }

    .community-topic-hero,
    .community-topic-grid {
        grid-template-columns: 1fr;
    }

    .community-topic-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-topic-aside {
        position: static;
    }

    .community-topic-lock {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .proof-grid,
    .home-tool-grid,
    .discover-audience-grid,
    .discover-module-grid,
    .discover-photo-stack {
        grid-template-columns: 1fr;
    }

    .discover-hero {
        padding: 2.25rem 0;
    }

    .discover-hero-copy h1 {
        font-size: 2.35rem;
    }

    .discover-hero-actions .btn,
    .discover-final-actions .btn {
        width: 100%;
    }

    .discover-final,
    .discover-manifest-grid,
    .discover-difference-grid {
        padding: 1.15rem;
    }

    .admin-mission-status-grid,
    .admin-mission-zone-grid {
        grid-template-columns: 1fr;
    }

    .admin-mission-hero .btn {
        width: 100%;
    }

    .community-topic-hero,
    .community-thread,
    .community-topic-lock,
    .community-topic-aside,
    .community-reply-card {
        padding: 0.95rem;
    }

    .community-topic-hero h1 {
        font-size: 2rem;
    }

    .community-topic-hero-side {
        gap: 0.6rem;
    }

    .community-topic-hero-side p {
        display: none;
    }

    .community-topic-meta-grid {
        grid-template-columns: 1fr;
    }

    .community-thread .community-post {
        grid-template-columns: 1fr;
    }

    .community-post-rail {
        display: none;
    }

    .community-post-header,
    .community-reply-actions,
    .community-topic-lock,
    .community-thread-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .community-post-tools {
        justify-content: flex-start;
        width: 100%;
    }

    .community-thread .community-report-form {
        position: static;
        width: 100%;
    }

    .community-thread .community-attachments {
        grid-template-columns: 1fr;
    }

    .community-reply-actions .btn,
    .community-topic-lock-actions .btn {
        width: 100%;
    }

    .donation-hero {
        padding: 2.5rem 0;
    }

    .donation-card {
        padding: 0.95rem;
    }

    .donation-amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-grid,
    .portfolio-photo-wall,
    .portfolio-admin-photo-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-bio-card {
        position: static;
    }

    .portfolio-contact-card {
        grid-column: auto;
    }

    .portfolio-hero,
    .portfolio-public-hero {
        padding: 2.6rem 0;
    }

    .portfolio-photo-card img {
        height: 230px;
    }
}