html,
body{
    margin:0;
    height:100%;
    overflow:hidden;
    font-family:Arial;
}

body{
    display:flex;
}

*{
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.75) rgba(15, 23, 42, 0.18);
}

*::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track{
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.7));
    border-radius: 999px;
    border: 2px solid rgba(15, 23, 42, 0.18);
}

*::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.95), rgba(96, 165, 250, 0.85));
}

#sidebar,
#igcSidebar{
    width: 330px;
    background: #f8f8f8;
    /* border-right: 1px solid #ddd; */
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
    background: rgba(25, 25, 25, .72);
    backdrop-filter: blur(12px);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    color: white;
    max-width: 380px;
    margin: 16px;
    border-radius: 15px;
    max-height: calc(100vh - 232px);
    -webkit-overflow-scrolling: touch;
    overflow: inherit;
}

#igcSidebar{
    z-index: 5;
    transform: translate(12px, 12px);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    background: transparent;
    backdrop-filter: none;
    min-height: 700px;
    width: 100%;
    max-width: 367px;
    display: block;
}

#sidebar{
    z-index: 2;
    box-shadow: none;
}

#igcSidebar.hidden{
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(12px, 4px);
}

#sidebar h3{
    margin:15px;
}

#sidebar .flightHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.flightHeadingActions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 35px;
}

.flightHeadingIcon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    background: none;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
    padding: 0;
}

.flightHeadingIcon:hover {
    background: rgba(30, 58, 138, 0.45);
}

.flightHeadingIcon i {
    font-size: 15px;
    display: inline-block;
}

#flightFilterQuickBtn {
    /* width: auto; */
    /* height: auto; */
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 8px;
}

#flightFilterQuickBtn:hover {
    background: rgba(30, 58, 138, 0.45);
}

#igcSidebar h3{
    margin:15px;
}

.igcFlightListPlaceholder{
    list-style: none;
    margin: 0;
    padding: 0 12px 16px;
    min-height: 280px;
}

.igcFlightListPlaceholder::before,
.igcFlightListPlaceholder::after{
    content: '';
    display: block;
    height: 58px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(148,163,184,0.2), rgba(51,65,85,0.28));
}

.sidebarHeader{
    padding: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    /* position: absolute; */
}

#sidebar.logged-in .authButtons {
    display: none;
}

#sidebar.logged-in .profileRole {
    display: none;
}

#sidebar.flight-compact {
    max-height: 81px;
    overflow: hidden;
}

#sidebar.flight-compact .sidebarHeader {
    border-bottom-color: transparent;
}

#sidebar.flight-compact .sidebarHeader > :not(.profileCard),
#sidebar.flight-compact .flightHeading,
#sidebar.flight-compact .flightActionBar,
#sidebar.flight-compact #flightList {
    display: none !important;
}

#sidebar.flight-compact .pilotScoreBadge {
    display: none !important;
}

.auth-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s linear, visibility 0.35s linear;
}

.auth-modal.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.0);
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background-color 0.35s linear, backdrop-filter 0.35s linear, opacity 0.35s linear, -webkit-backdrop-filter 0.35s linear;
    will-change: backdrop-filter, opacity, background-color;
}

.auth-modal.visible .auth-backdrop {
    background: rgba(3, 7, 18, 0.62);
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.auth-shell {
    position: relative;
    width: min(460px, calc(100vw - 32px));
    background: rgba(10, 14, 22, 0.9);
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 18px 60px rgba(15, 23, 42, 0.65), 0 0 30px rgba(59, 130, 246, 0.3);
    padding: 26px 24px 24px;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.25s ease;
}

.request-robot-shell {
    width: min(420px, calc(100vw - 32px));
}

.auth-modal.visible .auth-shell {
    transform: translateY(0) scale(1);
}

.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
    font-size: 24px;
    cursor: pointer;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.auth-mark {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: white;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.5);
}

.auth-kicker {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.02em;
    color: #f8fafc;
}

.auth-subtitle {
    font-size: 12px;
    color: rgba(191, 219, 254, 0.8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: rgba(15, 23, 42, 0.8);
    padding: 7px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    margin-bottom: 18px;
}

.auth-modal[data-auth-mode^="reset"] .auth-tabs {
    display: none;
}

.auth-tab {
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(224, 231, 255, 0.8);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
}

.auth-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(14, 165, 233, 0.2));
    color: white;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5), 0 8px 18px rgba(59, 130, 246, 0.2);
}

.auth-forms {
    position: relative;
}

.auth-form {
    display: none;
    gap: 14px;
}

.auth-form.active {
    display: grid;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(191, 219, 254, 0.9);
    letter-spacing: 0.04em;
}

.auth-field input,
.auth-field select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
    padding: 14px 14px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:focus,
.auth-field select:focus {
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: rgba(191, 219, 254, 0.82);
    margin-top: 4px;
}

.auth-row a {
    color: #7dd3fc;
    text-decoration: none;
}

.auth-link-button {
    border: none;
    background: transparent;
    color: #7dd3fc;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-link-back {
    justify-self: start;
    margin-top: -4px;
}

.auth-reset-copy {
    display: grid;
    gap: 6px;
    margin-bottom: 2px;
}

.auth-reset-title {
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
}

.auth-reset-copy p {
    margin: 0;
    color: rgba(191, 219, 254, 0.78);
    font-size: 13px;
    line-height: 1.5;
}

.request-robot-question {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.85);
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.request-robot-row {
    margin-top: 0;
}

.request-robot-help {
    max-width: 280px;
    color: rgba(191, 219, 254, 0.76);
    font-size: 12px;
    line-height: 1.4;
}

.request-robot-modal .auth-submit {
    margin-top: 2px;
}

.check-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(191, 219, 254, 0.85);
    font-size: 13px;
    line-height: 1.4;
}

.check-wrap input {
    accent-color: #3b82f6;
}

.consent {
    margin-top: 4px;
}

.consent-note {
    margin: -2px 0 12px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(191, 219, 254, 0.7);
}

.consent-note a {
    color: #7dd3fc;
    text-decoration: none;
}

.auth-captcha {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.auth-captcha-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: rgba(191, 219, 254, 0.88);
}

.auth-captcha input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
    padding: 12px 12px;
    font-size: 14px;
    outline: none;
}

.auth-refresh {
    /* border: 1px solid rgba(96, 165, 250, 0.35); */
    background: rgba(30, 41, 59, 0.82);
    color: #dbeafe;
    border-radius: 14px;
    /* padding: 6px 12px; */
    font-size: 12px;
    cursor: pointer;
    width: 65px;
}

.auth-status {
    margin: 2px 0 0;
    min-height: 18px;
    font-size: 12px;
    color: rgba(248, 250, 252, 0.92);
}

.auth-status.error {
    color: #fda4af;
}

.auth-status.success {
    color: #86efac;
}

.auth-submit,
.auth-social {
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: auto;
}

.auth-submit {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: white;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.38), inset 0 0 0 1px rgba(255,255,255,0.18);
}

.auth-social {
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-submit:hover,
.auth-social:hover,
.auth-tab:hover,
.auth-close:hover,
.secondaryBtn:hover {
    transform: translateY(-1px);
}

.appToastHost {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: grid;
    gap: 10px;
    z-index: 80;
    pointer-events: none;
}

.appToast {
    min-width: min(460px, calc(100vw - 32px));
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    box-shadow: 0 20px 55px rgba(2, 6, 23, 0.35);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    animation: appToastIn 180ms ease forwards;
}

.appToast.success {
    border-color: rgba(74, 222, 128, 0.35);
}

.appToast.error {
    border-color: rgba(248, 113, 113, 0.36);
}

.appToastIcon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.appToast strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.appToast span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.78);
}

@keyframes appToastIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profileCard{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.profileCard > div {
    min-width: 0;
}

.avatarImage {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.avatar{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6ee7f9, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.profileName{
    font-weight: 700;
}

.profileNameButton {
    border: none;
    background: transparent;
    color: #f8fafc;
    font-weight: 700;
    font-size: 15px;
    padding: 0;
    height: auto;
    width: auto;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    text-align: left;
}

.profileNameLine {
    /* display: flex; */
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profileCompactToggle {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* border: 1px solid rgba(125, 211, 252, 0.34); */
    background: rgba(255,255,255,0.1);
    color: #f8fafc;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    position: absolute;
    top: 23px;
    right: 9px;
}

.profileCompactToggle.is-icon-animating i {
    display: inline-block;
    animation: sidebarCompactToggleIconPop 180ms ease;
}

@keyframes sidebarCompactToggleIconPop {
    0% {
        transform: translateY(4px) scale(0.75);
        opacity: 0.35;
    }
    50% {
        transform: translateY(-2px) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.profileNotificationToggle {
    position: relative;
    width: 34px;
    height: 34px;
    margin-left: 2px;
    position: absolute;
    right: 48px;
}

.profileNotificationBadge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fb7185;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(251, 113, 133, 0.35);
}

.profileCardStats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.profileCardStats span,
.profileCardStats strong {
    min-width: 0;
}

.profileCardStats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(125, 211, 252, 0.14);
    color: rgba(226, 232, 240, 0.92);
    font-size: 11px;
    font-weight: 700;
}

.profileCardStats i {
    color: #7dd3fc;
    font-size: 12px;
}

.profileCardStats strong {
    font-weight: 800;
    color: #f8fafc;
}

.notificationDrawer {
    position: fixed;
    /* inset: 16px 475px 16px auto; */
    width: min(320px, calc(100vw - 32px));
    height: calc(100vh - 234px);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 25;
    border-radius: 50px;
    transform: scale(0.8);
    transform-origin: right top;
    transition: opacity 140ms ease-out, visibility 140ms ease-out, transform 140ms ease-out;
    margin-top: 25px;
    margin-left: 25px;
}

.notificationDrawer.visible,
.notificationDrawer[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.notificationDrawerActions {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    padding:  0 10px;
}

.notificationRefreshButton {
    flex: 1;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.24);
    color: #eff6ff;
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    /* gap: 8px; */
    font-size: 11px;
    font-weight: 800;
    width: 20px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    box-shadow: none;
    margin-top: -8px;
}

.notificationList {
    display: grid;
    gap: 8px;
    max-height: calc(78vh - 150px);
    overflow: auto;
    padding-right: 2px;
}

.notificationItem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.notificationItem.unread {
    border-color: rgba(125, 211, 252, 0.32);
    background: rgba(8, 47, 73, 0.52);
}

.notificationItemIcon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 211, 252, 0.14);
    color: #7dd3fc;
}

.notificationItemBody {
    min-width: 0;
    flex: 1;
}

.notificationItemTitle {
    font-size: 13px;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 3px;
}

.notificationItemMeta {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.74);
    line-height: 1.35;
}

.notificationEmpty {
    padding: 18px;
    text-align: center;
    color: rgba(226, 232, 240, 0.72);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px dashed rgba(148, 163, 184, 0.18);
}

.profileCompactToggle:hover,
.profileCompactToggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.58);
    background: rgba(255,255,255,0.16);
    box-shadow: 0 10px 22px rgba(0,0,0,0.24);
    outline: none;
}

.pilotScoreBadge {
    display: block;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 8px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.26), rgba(37, 99, 235, 0.42));
    border: 1px solid rgba(125, 211, 252, 0.45);
    color: #e0f2fe;
    width: fit-content;
    margin-top: 7px;
}

#sidebar.logged-in .profileNameButton {
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-color: rgba(125, 211, 252, 0.8);
}

.profileRole{
    font-size: 12px;
    color: rgba(255,255,255,0.72);
}

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

.uploadFlightButton {
    width: 100%;
    margin-top: 12px;
    height: 46px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.34);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(37, 99, 235, 0.36));
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 18px 40px rgba(2, 132, 199, 0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}

.uploadFlightButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 48px rgba(2, 132, 199, 0.28), inset 0 1px 0 rgba(255,255,255,0.16);
}

.uploadFlightButtonIcon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.googleBtn,
.secondaryBtn{
    width: 100%;
    height: 40px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.googleBtn{
    background: #ffffff;
    color: #1f2937;
}

.secondaryBtn{
    background: rgba(255,255,255,0.12);
    color: white;
}

.googleIcon{
    width: 18px;
    height: 18px;
    display: inline-block;
}

#flightList{
    list-style:none;
    padding:0;
    margin:0;
    overflow-y: auto;
    overflow-x: hidden;
    /* height: 73%; */
    max-height: calc(100vh - 490px);
    box-sizing: border-box;
}

.flightActionBar {
    padding: 0 15px 14px;
    display: grid;
    /* gap: 10px; */
}

.flightTabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(12, 18, 30, 0.76);
}

.flightTab {
    border: none;
    border-radius: 10px;
    width: auto;
    height: auto;
    padding: 9px 10px;
    background: transparent;
    color: rgba(226, 232, 240, 0.82);
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.flightTab.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.52), rgba(56, 189, 248, 0.38));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.45);
}

.flightSearchWrap {
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(8, 12, 20, 0.68);
    padding: 0 12px;
    max-height: 44px;
    opacity: 1;
    margin: 0;
    transform: translateY(0);
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.flightSearchWrap.is-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    border-color: transparent;
    pointer-events: none;
}

.flightSearchWrap input {
    width: 100%;
    height: 38px;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-size: 13px;
    background: transparent;
}

.flightSearchWrap input::placeholder {
    color: rgba(148, 163, 184, 0.9);
}

#flightList li{
    /* padding: 9px 11px; */
    cursor:pointer;
    /* border-bottom:1px solid #eee; */
}

#flightList li{align-items:center;gap: 5px;}

#flightList li {
    transition: transform 220ms ease, opacity 220ms ease, max-height 220ms ease, margin 220ms ease, padding 220ms ease;
    /* will-change: transform, opacity; */
}

#flightList li.flightItemEntering {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
}

#flightList li.flightItemLeaving {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.flightItem {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
}

.flightCardHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.flightPilotAvatarWrap {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(37, 99, 235, 0.42));
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.24);
    display: grid;
    place-items: center;
}

.flightPilotAvatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flightPilotAvatarFallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.72), rgba(37, 99, 235, 0.9));
}

.flightCardHeaderBody {
    min-width: 0;
    display: grid;
    gap: 4px;
    margin-top: -18px;
}

.flightPilotLine {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.flightPilotName {
    font-size: 14px;
    font-weight: 800;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flightPilotScore {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.85), rgba(250, 204, 21, 0.9));
    color: #102a43;
}

.flightRecordName {
    font-size: 16px;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1.25;
    word-break: break-word;
}

.flightRecordMeta {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.45;
}

.flightRecordStats {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(125, 211, 252, 0.12);
}

.flightStatItem {
    font-size: 12px;
    color: rgba(241, 245, 249, 0.92);
}

.flightCardActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.flightCardActions .likeBtn,
.flightCardActions .commentBtn,
.flightCardActions .aiBtn {
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    box-shadow: none;
}

.flightCardActions .likeBtn:hover,
.flightCardActions .commentBtn:hover,
.flightCardActions .aiBtn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.flightCardActions .aiBtn {
    margin-left: auto;
}

.flightSparkline{flex:0 0 auto;display:block;width:100%;max-width:280px;height:35px;object-fit:contain;background:transparent;border-radius:4px}

.flightItem.selected{background:var(--sel-bg,#ffd54f);color:var(--sel-color,#1f2937);}
.flightItem.selected .flightTitle,
.flightItem.selected .flightMeta{color:var(--sel-color,#1f2937)}
.flightItem.selected .flightActions button{color:var(--sel-color,#1f2937)}
.flightItem.inactive{opacity:0.72}

.flightBadge{
    display:inline-block;
    font-size:12px;
    padding:4px 6px;
    border-radius:8px;
    margin-left:6px;
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.92);
}
.flightBadge.scoreBadge{background:linear-gradient(90deg,#ffd54f,#f59e0b);color:#102a43;font-weight:700;min-width: 30px;}
.flightBadge.gainBadge{background:rgba(99,102,241,0.14);color:#c7d2fe}
.flightBadge.climbBadge{background:rgba(34,197,94,0.10);color:#bbf7d0}

.flightActions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transform: translateY(-8px);
    transition: opacity 240ms ease-out, visibility 240ms ease-out, transform 240ms ease-out, max-height 0.05s ease-out;
    /* transform: translateY(0) scaleY(0); */
}

.flightActionIconButton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* min-width: 72px; */
    /* padding: 6px 4px; */
    border: none;
    background: transparent;
    color: rgba(248, 250, 252, 0.86);
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.flightActionIconButton i {
    font-size: 1.05rem;
    line-height: 1;
}

.flightActionIconButton .actionCount {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.flightActionIconButton:hover {
    transform: translateY(-1px);
    color: #ffffff;
    background: transparent;
}

.flightActionIconButton:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.55);
    outline-offset: 3px;
    border-radius: 14px;
}

.flightActionIconButton.is-liked {
    color: #ff0000;
}

.saveBtn.is-saved {
    color: #86efac;
}

.flightItem.selected .flightActions button {
    color: #fdfdfd;
}

.flightItem.selected .flightActionIconButton.is-liked {
    color: #b91c1c;
}

.flightItem.selected .saveBtn.is-saved {
    color: #166534;
}

.aiBtn.flightActionIconButton {
    margin-left: auto;
}

#flightList li {
    position: relative;
}

#flightList li:hover{
    background: #343434;
    color: #f8b021;
}

#flightList li:hover .flightInfoBadge, #flightList li:hover .flightAddFriendBadge{
    visibility: visible !important;
}

.flightItemPreviewPanel {
    position: fixed;
    left: 100%;
    top: 0;
    margin-left: 12px;
    min-width: 220px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(8, 12, 20, 0.95);
    border: 1px solid rgba(125, 211, 252, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity 240ms ease-out, visibility 240ms ease-out, transform 240ms ease-out;
    z-index: 100;
}

#flightList .infoPreviewOpen .flightItemPreviewPanel, 
#flightList li:hover .flightActions  {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#flightList li:hover .flightActions {
    transform: translateY(0) scaleY(1);
    max-height: 35px !important;
    color: gray;
}

.flightItemPreviewPanel .previewTitle {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fef3c7;
}

.flightItemPreviewPanel .previewCoord {
    font-size: 11px;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.flightItemPreviewPanel .previewStats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    color: #e2e8f0;
}

.flightInfoBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 22px;
    border: 1px solid rgba(125, 211, 252, 0.55);
    border-radius: 7px;
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    box-shadow: none;
    padding: 0;
    visibility: hidden;
}

.flightInfoBadge:hover, .flightInfoBadge:focus-visible, 
.flightAddFriendBadge:hover, .flightAddFriendBadge:focus-visible {
    background: rgba(56, 189, 248, 0.24);
    border-color: rgba(125, 211, 252, 0.9);
    color: #e0f2fe;
    transform: translateY(-1px);
}

.flightAddFriendBadge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 22px;
    border: 1px solid rgba(125, 211, 252, 0.55);
    border-radius: 7px;
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    box-shadow: none;
    padding: 0;
    visibility: hidden;
}

.commentDrawer {
    position: fixed;
    /* inset: 16px 475px 16px auto; */
    width: min(320px, calc(100vw - 32px));
    height: calc(100vh - 234px);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 25;
    border-radius: 50px;
    transform: scale(0.8);
    transform-origin: right top;
    transition: opacity 140ms ease-out, visibility 140ms ease-out, transform 140ms ease-out;
    margin-top: 25px;
    margin-left: 25px;
}

.commentDrawer.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.commentDrawerBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.38);
    backdrop-filter: blur(2px);
    border-radius: 27px;
}

.commentDrawerPanel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgb(6 10 18 / 72%), rgba(10, 15, 24, 0.96));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    padding: 10px;
}

.commentDrawerHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 10px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.commentDrawerEyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
    margin-bottom: 6px;
}

.commentDrawerTitle {
    margin: 0;
    font-size: 18px;
    color: #f8fafc;
}

.commentDrawerUploader {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* margin-top: 10px; */
    padding: 8px 10px;
    border-radius: 16px;
    /* border: 1px solid rgba(148, 163, 184, 0.12); */
    /* background: rgba(15, 23, 42, 0.5); */
}

.commentDrawerUploaderAvatarWrap {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.commentDrawerUploaderAvatar,
.commentDrawerUploaderAvatarFallback {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.commentDrawerUploaderAvatar {
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.commentDrawerUploaderAvatarFallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.92), rgba(14, 165, 233, 0.78));
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
}

.commentDrawerUploaderBody {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.commentDrawerUploaderLabel {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.82);
}

.commentDrawerUploaderName {
    font-size: 13px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}

.commentDrawerMeta {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(203, 213, 225, 0.8);
    word-break: break-word;
}

.commentDrawerClose {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    box-shadow: none;
    margin-top: -8px;
}

.commentDrawerClose:hover,
.commentDrawerClose:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.commentDrawerCountBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 0;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.8);
}

.commentDrawerCountValue {
    font-size: 13px;
    color: #f8fafc;
}

.commentDrawerStatus {
    margin: 10px 18px 0;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.commentDrawerStatus.hidden {
    display: none;
}

.commentDrawerStatus.is-error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.24);
    border-color: rgba(248, 113, 113, 0.22);
}

.commentDrawerList {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px 12px;
    /* display: grid; */
    gap: 12px;
}

.commentDrawerEmpty {
    padding: 22px 16px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.72);
    background: rgba(15, 23, 42, 0.42);
    text-align: center;
    font-size: 13px;
}

.commentCard {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
}

.commentAvatarWrap {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
}

.commentAvatarImage,
.commentAvatarFallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.commentAvatarImage {
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.commentAvatarFallback {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(14, 165, 233, 0.72));
    color: #f8fafc;
    font-weight: 700;
    font-size: 14px;
}

.commentBubble {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px 8px 8px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.78);
    /* border: 1px solid rgba(148, 163, 184, 0.14); */
}

.commentBubbleOwn {
    border-color: rgba(96, 165, 250, 0.22);
}

.commentBubbleActions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.commentCard:hover .commentBubbleActions,
.commentCard.is-actions-open .commentBubbleActions,
.commentCard:focus-within .commentBubbleActions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.commentBubbleMoreButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.82);
    color: #cbd5e1;
    box-shadow: none;
}

.commentBubbleActionMenu {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.94);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.36);
    opacity: 0;
    visibility: hidden;
    margin-top: -27px;
    margin-right: 95px;
    z-index: 5;
}

.commentBubbleActionButton,
.commentDrawerCancelEdit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    padding: 7px 11px;
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    box-shadow: none;
    width: auto;
    font-size: x-small;
}

.commentBubbleActionButton.is-danger {
    border-color: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

.commentBubbleActionButton:hover,
.commentBubbleActionButton:focus-visible,
.commentDrawerCancelEdit:hover,
.commentDrawerCancelEdit:focus-visible {
    background: rgba(30, 41, 59, 0.98);
}

.commentBubbleActionButton.is-danger:hover,
.commentBubbleActionButton.is-danger:focus-visible {
    background: rgba(127, 29, 29, 0.28);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fff1f2;
}

.commentTopLine {
    /* display: flex; */
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.commentAuthor {
    font-size: 13px;
    font-weight: 700;
    color: #f8fafc;
}

.commentMeta {
    font-size: 11px;
    color: rgba(203, 213, 225, 0.72);
    white-space: nowrap;
}

.commentText {
    color: rgba(226, 232, 240, 0.94);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.commentTimeLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin: 0 2px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.16);
    color: #bae6fd;
    font: inherit;
    cursor: pointer;
    box-shadow: none;
    width: auto;
    height: auto;
}

.commentTimeLink:hover,
.commentTimeLink:focus-visible {
    background: rgba(59, 130, 246, 0.28);
    color: #e0f2fe;
}

.commentDrawerComposer {
    padding: 9px 19px 11px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.72);
    display: flex;
}

.commentDrawerInput {
    width: 100%;
    min-height: 31px;
    resize: vertical;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.88);
    color: #f8fafc;
    padding: 8px 15px;
    box-shadow: none;
    outline: none;
}

.commentDrawerInput:focus {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.commentDrawerComposerActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    margin-left: 15px;
    gap: 8px;
}

.commentDrawerSubmit {
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #f8fafc;
    font-weight: 700;
    box-shadow: none;
}

.commentDrawerSubmit:hover,
.commentDrawerSubmit:focus-visible {
    background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
}

@media (max-width: 900px) {
    .commentDrawer {
        inset: auto 12px 12px 12px;
        width: auto;
        height: min(72vh, calc(100vh - 24px));
    }
}

.uploadDrawer {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px 16px;
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.98), rgba(14, 20, 34, 0.96));
    transform: translateX(calc(100% + 26px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.18s ease, visibility 0.18s ease;
    border-radius: 15px;
    box-sizing: border-box;
    min-height: 350px;
}

.uploadDrawer.visible {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.uploadDrawerHeader {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.uploadDrawerBack {
    width: auto;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #e0f2fe;
    box-shadow: none;
}

.uploadDrawerKicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(125, 211, 252, 0.78);
    margin-top: 2px;
}

.uploadDrawerTitle {
    font-size: 22px;
    font-weight: 800;
    color: #f8fafc;
    margin-top: 3px;
}

.uploadDrawerBody {
    display: grid;
    gap: 14px;
    overflow: auto;
    padding-right: 2px;
}

.uploadPickButton {
    width: 100%;
    height: auto;
    border-radius: 22px;
    padding: 18px 16px;
    display: grid;
    gap: 8px;
    text-align: left;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.16), rgba(37, 99, 235, 0.18));
    border: 1px dashed rgba(125, 211, 252, 0.42);
}

.uploadPickTitle {
    font-size: 15px;
    font-weight: 800;
    color: #f8fafc;
}

.uploadPickMeta {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.78);
}

.uploadMediaGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.uploadMediaButton {
    width: 100%;
    min-height: 78px;
    border-radius: 18px;
    padding: 14px 14px;
    display: grid;
    gap: 6px;
    text-align: left;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: none;
}

.uploadMediaTitle {
    font-size: 14px;
    font-weight: 800;
    color: #f8fafc;
}

.uploadMediaMeta {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(191, 219, 254, 0.78);
}

.uploadExtraOptionsToggle {
    width: 100%;
    height: auto;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(15, 23, 42, 0.72);
    color: #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.uploadExtraOptionsToggle[aria-expanded="true"] .uploadExtraOptionsIcon {
    transform: rotate(45deg);
}

.uploadExtraOptionsIcon {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.uploadExtraOptionsPanel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.uploadProgressCard {
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(125, 211, 252, 0.16);
}

.uploadProgressHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    margin-bottom: 10px;
    color: rgba(226, 232, 240, 0.82);
}

.uploadProgressHead strong {
    color: #f8fafc;
    font-size: 13px;
}

.uploadProgressTrack {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.uploadProgressBar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    transition: width 0.18s ease;
}

.uploadAutoScheduleToggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.86);
}

.uploadScheduleFields {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.uploadScheduleGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.uploadStatus {
    min-height: 18px;
    margin: 0;
    font-size: 12px;
    color: rgba(191, 219, 254, 0.9);
}

.uploadStatus.error {
    color: #fca5a5;
}

.uploadStatus.success {
    color: #86efac;
}

.uploadDrawerFooter {
    margin-top: auto;
}

.uploadPolicyNote {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(191, 219, 254, 0.72);
}

.uploadFlightSubmit {
    width: 100%;
    height: 46px;
    border-radius: 18px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #f0fdf4;
    font-size: 14px;
    font-weight: 800;
}

.uploadFlightSubmit:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.2);
}

.profileDrawerBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 18, 0.24);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 39;
}

.profileDrawerBackdrop.visible {
    opacity: 1;
    visibility: visible;
}

.profileDrawer {
    position: fixed;
    top: 30px;
    left: 36px;
    width: min(320px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    z-index: 41;
    background: rgba(12, 18, 30, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.25);
    border-radius: 20px;
    /* clip-path: polygon(0 0, 94% 0, 100% 6%, 100% 100%, 0 100%); */
    padding: 18px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.52);
    transform: translateX(calc(30px));
    transition: transform 0.32s ease;
    visibility: hidden;
    opacity: 0;
}

.profileDrawer.visible {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

.profileDrawerClose {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    font-size: 21px;
}

.profileDrawerHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-right: 36px;
}

.profileDrawerAvatar,
.profileDrawerAvatarImage {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

.profileDrawerAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.38);
}

.profileDrawerAvatarImage {
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
}

.profileDrawerName {
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
}

.drawerNameLine {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawerAddButton {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(125, 211, 252, 0.42);
    background: rgba(14, 116, 144, 0.32);
    color: #e0f2fe;
    font-size: 13px;
    line-height: 1;
    box-shadow: none;
}

.profileDrawerMeta {
    font-size: 12px;
    color: rgba(191, 219, 254, 0.82);
    margin-top: 3px;
}

.drawerAddButton {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.drawerAddButton:hover,
.drawerAddButton:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.72);
    background: rgba(14, 116, 144, 0.48);
    outline: none;
}

.profileEditCard {
    border-color: rgba(59, 130, 246, 0.28);
    background: linear-gradient(180deg, rgba(6, 14, 28, 0.78), rgba(4, 10, 22, 0.58));
}

.profileEditCard .drawerCardHead {
    background: rgba(37, 99, 235, 0.24);
}

.profileEditForm {
    display: grid;
    gap: 12px;
}

.profileActionBar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(96, 165, 250, 0.16);
}

.profileBranchTabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.profileActionBarRight {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.profileActionTab,
.profileActionAdd,
.profileBranchPickerItem {
    border: 1px solid rgba(125, 211, 252, 0.22);
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    border-radius: 999px;
    min-height: 36px;
    padding: 0 14px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
}

.profileActionTab {
    /* min-height: 58px; */
    padding: 10px 12px;
    border-radius: 14px;
    display: grid;
    gap: 3px;
    align-content: start;
    justify-items: start;
    width: auto;
}

.profileActionTab strong {
    font-size: 12px;
    line-height: 1.2;
}

.profileActionTab span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.72);
}

.profileActionTab.active,
.profileActionTab[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.36), rgba(14, 165, 233, 0.3));
    border-color: rgba(125, 211, 252, 0.7);
    color: #f8fafc;
}

.profileActionAdd {
    width: 36px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.profileBranchPicker {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(96, 165, 250, 0.18);
}

.profileBranchPicker.hidden {
    display: none;
}

.profileBranchPickerItem {
    /* min-height: 64px; */
    padding: 10px 12px;
    text-align: left;
    border-radius: 12px;
    display: grid;
    gap: 4px;
    align-content: start;
    justify-items: start;
    width: auto;
    height: auto;
}

.profileBranchPickerItem strong {
    font-size: 13px;
    line-height: 1.2;
}

.profileBranchPickerItem span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.72);
}

.profileEditorPanel {
    display: grid;
    gap: 10px;
}

.profileEditorPanel.hidden {
    display: none;
}

.profileEditorBranchNote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(96, 165, 250, 0.18);
    color: rgba(191, 219, 254, 0.82);
    font-size: 12px;
}

.profileEditorBranchNote strong {
    color: #f8fafc;
    font-size: 12px;
    text-align: right;
}

.profileBranchSelect {
    min-width: 180px;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.2);
    background: rgba(15, 23, 42, 0.86);
    color: #f8fafc;
    font: inherit;
}

.profileBranchSelect:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.profileBranchMetaSummary {
    display: grid;
    gap: 8px;
}

.profileBranchMetaCard {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(96, 165, 250, 0.16);
}

.profileBranchMetaCard strong {
    color: #f8fafc;
    font-size: 13px;
}

.profileBranchMetaCard span {
    color: rgba(191, 219, 254, 0.82);
    font-size: 12px;
    line-height: 1.45;
}

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

.profileBranchFeatureGrid .auth-field {
    gap: 6px;
}

.profileBranchFeatureGrid .auth-field textarea {
    min-height: 92px;
}

.profileBranchFeatureGrid .auth-field-full {
    grid-column: 1 / -1;
}

.profileEditorBranchActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.profileBranchDeleteButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
    color: #fecaca;
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    width: auto;
    margin: 15px;
}

.profileBranchDeleteButton:hover {
    background: rgba(153, 27, 27, 0.42);
    border-color: rgba(248, 113, 113, 0.5);
    color: #fee2e2;
}

.profileBranchDeleteButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.profileEditorNote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(96, 165, 250, 0.18);
    color: rgba(191, 219, 254, 0.82);
    font-size: 12px;
}

.profileEditorNote strong {
    color: #f8fafc;
    font-size: 12px;
    word-break: break-word;
    text-align: right;
}

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

.profileEditorGrid .auth-field {
    gap: 6px;
}

.profileEditorGrid .auth-field input,
.profileEditorGrid .auth-field select {
    padding: 11px 12px;
    font-size: 14px;
}

.profileEditorGrid .auth-field textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.2);
    background: rgba(15, 23, 42, 0.76);
    color: #e2e8f0;
    font-size: 14px;
}

.profileEditorGrid .auth-field textarea:focus {
    outline: none;
    border-color: rgba(125, 211, 252, 0.55);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.14);
}

.auth-field-full {
    grid-column: 1 / -1;
}

.profileEditorGrid .auth-field:nth-child(3),
.profileEditorGrid .auth-field:nth-child(4) {
    grid-column: span 1;
}

.profileEditorGrid .auth-field:first-child,
.profileEditorGrid .auth-field:nth-child(2),
.profileEditorGrid .auth-field:nth-child(3),
.profileEditorGrid .auth-field:nth-child(4),
.profileEditorGrid .auth-field:nth-child(5),
.profileEditorGrid .auth-field:nth-child(6),
.profileEditorGrid .auth-field:nth-child(7),
.profileEditorGrid .auth-field:nth-child(8) {
    min-width: 0;
}

.profileEditorActions {
    display: flex;
    justify-content: flex-end;
}

.profileEditorActions .auth-submit {
    width: 100%;
}

.profileEditStatus {
    margin-top: 0;
}

.profileDrawerGrid {
    display: grid;
    gap: 10px;
}

.drawerCard {
    background: rgba(4, 10, 22, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 12px;
}

.drawerCard h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #bfdbfe;
}

.drawerCardHead {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #dbeafe;
    background: rgba(30, 58, 138, 0.28);
    box-shadow: none;
    position: relative;
}

.drawerCardHead::after {
    content: '+';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: rgba(186, 230, 253, 0.92);
}
.profileAvatarUploadField {
    grid-column: 1 / -1;
}
.profileAvatarUploadRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(96, 165, 250, 0.18);
}
.profileAvatarUploadPreview {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    overflow: hidden;
    flex: 0 0 auto;
    position: relative;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(125, 211, 252, 0.22);
}
.profileAvatarUploadImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profileAvatarUploadFallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f8fafc;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.profileAvatarUploadContent {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 7px;
}
.profileAvatarUploadButton {
    width: fit-content;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(125, 211, 252, 0.3);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(37, 99, 235, 0.24));
    color: #f8fafc;
    font-weight: 800;
    box-shadow: none;
}
.profileAvatarUploadButton:hover,
.profileAvatarUploadButton:focus-visible {
    border-color: rgba(125, 211, 252, 0.65);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(37, 99, 235, 0.32));
    outline: none;
}
.profileAvatarUploadHint {
    color: rgba(191, 219, 254, 0.82);
    font-size: 12px;
    line-height: 1.45;
}

.drawerCard.open .drawerCardHead::after {
    content: '-';
}

.drawerCardBody {
    display: none;
}

.drawerCard.open .drawerCardBody {
    display: block;
}

.drawerCard p {
    margin: 0;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.drawerCard p:first-of-type {
    border-top: none;
    padding-top: 0;
}

.drawerCard span {
    color: rgba(148, 163, 184, 0.92);
    font-size: 12px;
}

.drawerCard strong {
    color: #f8fafc;
    font-size: 12px;
    text-align: right;
}

.drawerFlightArea {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.profileLogoutButton {
    width: 100%;
    height: auto;
    margin-top: 14px;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.45);
    color: #fecaca;
    padding: 11px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.floatingFilterDock {
    /* position: absolute; */
    top: 38%;
    right: 66px;
    z-index: 36;
    display: flex;
    align-items: center;
    /* display: none; */
    opacity: 1;
    max-height: 0;
    transform: translateY(0);
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.floatingFilterButton {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(125, 211, 252, 0.36);
    background: rgba(6, 12, 22, 0.86);
    color: #e2e8f0;
    font-size: 18px;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
}

.floatingFilterPopup {
    width: 100%;
    /* margin-right: 10px; */
    /* padding: 10px; */
    border-radius: 14px;
    /* border: 1px solid rgba(125, 211, 252, 0.28); */
    /* background: rgba(9, 15, 26, 0.92); */
    /* box-shadow: 0 14px 38px rgba(2, 6, 23, 0.45); */
    opacity: 0;
    /* transform: translateX(18px); */
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    /* display: grid; */
    gap: 8px;
}

.floatingFilterDock:hover .floatingFilterPopup,
.floatingFilterDock:focus-within .floatingFilterPopup,
.floatingFilterDock.open .floatingFilterPopup {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.floatingFilterTitle {
    font-size: 12px;
    color: rgba(191, 219, 254, 0.88);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.floatingFilterItem {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 10px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 41, 59, 0.42);
    color: #f8fafc;
    font-size: 12px;
    text-align: left;
    box-shadow: none;
    height: 30px;
}

.floatingSearchSubmit {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.48), rgba(14, 165, 233, 0.35));
    border: 1px solid rgba(125, 211, 252, 0.28);
}

.floatingSortGroup {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.16);
    margin-top: 10px;
}

.floatingSortLabel {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.88);
}

.floatingSortSelect {
    width: 100%;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.72);
    color: #f8fafc;
    padding: 10px 10px;
    font-size: 12px;
    outline: none;
}

.floatingSportModeSelect {
    min-width: 148px;
}

.floatingSortDirection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.floatingSortDirectionButton {
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.54);
    color: #e2e8f0;
    padding: 9px 8px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none;
}

.floatingSortDirectionButton.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(56, 189, 248, 0.36));
    color: #fff;
    border-color: rgba(125, 211, 252, 0.44);
}

.floatingFilterItem + .floatingFilterItem {
    /* margin-top: 6px; */
    margin-left: 5px;
}

.floatingFilterItem:hover {
    background: rgba(37, 99, 235, 0.4);
}

.filterIcon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.filterIcon.live {
    background: #22c55e;
}

.filterIcon.global {
    background: #38bdf8;
}

.filterIcon.mine {
    background: #f59e0b;
}

.settingsPopup{
    position:absolute;
    bottom: 67px;
    right: 60px;
    z-index:3;
    width:220px;
    background:rgba(10,14,22,0.92);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    padding:10px 12px;
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
    color:#f8fafc;
    font-size:13px;
    line-height:1.4;
}

.settingsPopup.hidden{display:none;}

.settingsPopup .settingsRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
}

.settingsPopup label{
    font-size:12px;
    color:rgba(255,255,255,0.72);
    text-align: left;
    user-select: none;
}

.settingsPopup input[type="color"],
.settingsPopup select{
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.05);
    color:white;
    padding:6px 8px;
    min-width:80px;
}

.settingsNote{
    font-size:11px;
    color:rgba(255,255,255,0.6);
    margin-top:4px;
}

.brandDock {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 60;
    margin: 0;
    background: transparent;
}

.brandDockSummary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0px 3px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    /* background: linear-gradient(135deg, rgba(15, 23, 42, 0.68), rgba(30, 41, 59, 0.58)); */
    /* border: 1px solid rgba(96, 165, 250, 0.18); */
    /* box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(148, 163, 184, 0.06); */
    color: rgb(27 27 27 / 92%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    /* backdrop-filter: blur(10px); */
    background: transparent;
}

.brandDockSummary::-webkit-details-marker {
    display: none;
}

.brandDockSummary:hover,
.brandDock[open] .brandDockSummary,
.brandDockSummary:focus-visible {
    transform: translateY(-1px) scale(0.99);
    border-color: rgba(125, 211, 252, 0.38);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(125, 211, 252, 0.12);
}

.brandDockMark {
    width: 30px;
    height: 26px;
    flex: 0 0 auto;
    /* border-radius: 50%; */
    display: grid;
    place-items: center;
    overflow: hidden;
    background: transparent;
    /* box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); */
}

.brandDockLogo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandDockTitleWrap {
    display: flex;
    gap: 2px;
    line-height: 1.1;
    color: black;
}

.brandDockTitle {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.brandDockSubtitle {
    font-size: 9px;
    color: rgb(25 32 41 / 64%);
    margin-top: 3px;
}

.brandDockPanel {
    position: absolute;
    left: calc(100% + 8px);
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    /* background: rgba(10, 14, 22, 0.72); */
    /* border: 1px solid rgba(96, 165, 250, 0.16); */
    /* box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22); */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px) scale(0.98);
    transform-origin: left center;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
}

.brandDock:hover .brandDockPanel,
.brandDock[open] .brandDockPanel,
.brandDock:focus-within .brandDockPanel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.brandDockLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.12);
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.brandDockLink:hover,
.brandDockLink:focus-visible {
    transform: translateY(-1px);
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.3);
    color: #ffffff;
}

@media (max-width: 768px) {
    .brandDock {
        left: 8px;
        bottom: 8px;
        max-width: calc(100vw - 20px);
    }

    .brandDockSummary {
        width: 100%;
    }

    .brandDockPanel {
        left: 0;
        bottom: calc(100% + 10px);
        right: auto;
        flex-wrap: wrap;
        width: min(360px, calc(100vw - 20px));
        border-radius: 22px;
    }
}

.settingsGroup {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
}

.settingsGroupTitle {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
}

.settingsPopup .settingsCheck {
    display: block;
    margin-bottom: 7px;
}

.settingsPopup .settingsRowCompact {
    margin-bottom: 6px;
}

.settingsPopup input[type="range"]#shadowFollowDistance {
    width: 100%;
    margin: 2px 0 0;
}

#shadowFollowDistanceValue {
    font-size: 11px;
    color: rgba(255,255,255,0.86);
}

#map{
    flex:1;
    position:relative;
    overflow:hidden;
}

.previewPopupContainer {
    pointer-events: auto;
    z-index: 20;
    /* margin: 20px; */
}

.previewPopupContainer .maplibregl-popup-content,
.previewPopupContainer .mapboxgl-popup-content,
.previewPopupContainer .maplibregl-popup-content *,
.previewPopupContainer .mapboxgl-popup-content * {
    pointer-events: auto !important;
    /* background: #3333338c !important; */
    /* box-shadow: none !important; */
    /* padding: 0 !important; */
    /* border: none !important; */
}

.previewPopupContainer .maplibregl-popup-tip,
.previewPopupContainer .mapboxgl-popup-tip {
    display: none;
}

#flightListPopup {
    position: absolute;
    top: 18px;
    right: 51px;
    width: 200px;
    max-height: calc(100% - 36px);
    overflow: hidden;
    background: rgba(7, 11, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
    padding: 14px;
    z-index: 25;
    color: #f8fafc;
    pointer-events: auto;
}

#flightListPopup .popupHeader {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

#flightListPopup .popupFlightList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

#flightListPopup .flightPopupItem {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    font-size: 13px;
    color: #f8fafc;
}

#flightListPopup .flightPopupItem:hover {
    background: rgba(56, 189, 248, 0.18);
    transform: translateX(2px);
}

#flightListPopup .popupHoverPanel {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.88);
    color: #e2e8f0;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

#flightListPopup .popupHoverPanel.hidden {
    display: none;
}

#flightListPopup .popupHoverTitle {
    font-size: 13px;
    font-weight: 700;
}

#flightListPopup .popupHoverMeta {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.85);
}

.previewPopup{
    /* display:flex; */
    align-items:flex-start;
    gap:10px;
    padding:8px;
    border-radius:14px;
    background: rgb(10 14 22 / 71%);
    border:1px solid rgba(255,255,255,0.16);
    box-shadow: 0 14px 36px rgb(0 0 0 / 64%);
    color:white;
    max-width: 460px;
    pointer-events: auto;
}

.previewThumb{
    flex:0 0 96px;
    height:96px;
    border-radius:12px;
    overflow:hidden;
    border:2px solid rgba(255,255,255,0.22);
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    margin-bottom: 14px;
}

.previewImage{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.previewPanel{
    min-width:160px;
}

.previewTitle{
    font-size:12px;
    font-weight:700;
    margin-bottom:6px;
    color:#fef3c7;
}

.previewCoord{
    font-size:11px;
    color:#cbd5e1;
    margin-bottom:6px;
}

.previewStats{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:11px;
    color:#e2e8f0;
}

.previewOwnerCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(125, 211, 252, 0.18);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.previewOwnerCard:hover,
.previewOwnerCard:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.42);
    background: rgba(255,255,255,0.09);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    outline: none;
}

.previewOwnerCardShell {
    margin-bottom: 8px;
}

.previewOwnerAvatarWrap {
    flex: 0 0 auto;
}

.previewOwnerAvatar,
.previewOwnerAvatarFallback {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.previewOwnerBody {
    min-width: 0;
    flex: 1 1 auto;
}

.previewOwnerName {
    font-size: 13px;
    font-weight: 800;
    color: #f8fafc;
}

.previewOwnerMeta {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(226, 232, 240, 0.78);
}

.previewOwnerStats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 11px;
    color: #e2e8f0;
}

.previewListHeader {
    font-size:13px;
    font-weight:700;
    margin-bottom:10px;
    color:#f8fafc;
}

.previewFlightList {
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:180px;
    overflow-y:auto;
    margin-bottom:12px;
    padding-right:4px;
}

.previewFlightRow {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.previewFlightRow.selected {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.35);
}

.previewFlightName {
    font-size:12px;
    font-weight:600;
    color:#f8fafc;
    flex:1 1 auto;
    min-width:0;
}

.previewFlightStats {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
}

.previewFlightBadge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    background: rgba(255,255,255,0.08);
    color:#e2e8f0;
}

.previewFlightBadge.score { background: rgba(249, 115, 22, 0.14); }
.previewFlightBadge.duration { background: rgba(56, 189, 248, 0.14); }
.previewFlightBadge.likes { background: rgba(34, 197, 94, 0.14); }
.previewFlightBadge.comments { background: rgba(168, 85, 247, 0.14); }

.previewDetails {
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.measureCalculatorCard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 260px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(125, 211, 252, 0.18);
}

.measureCalculatorTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.measureCalculatorDistance {
    font-size: 15px;
    font-weight: 800;
    color: #f8fafc;
}

.measureCalculatorResetButton {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
    width: auto;
}

.measureCalculatorResetButton:hover,
.measureCalculatorResetButton:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
    outline: none;
}

.measureCalculatorCoords,
.measureCalculatorMath {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measureCalculatorResult {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(56, 189, 248, 0.18);
}

.measureCalculatorResult span {
    font-size: 11px;
    color: rgba(226, 232, 240, 0.72);
}

.measureCalculatorResult strong {
    font-size: 12px;
    color: #f8fafc;
    font-weight: 800;
    line-height: 1.5;
}

.measureCalculatorPoint,
.measureCalculatorRow {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255,255,255,0.08);
}

.measureCalculatorPoint span,
.measureCalculatorRow span {
    font-size: 11px;
    color: rgba(226, 232, 240, 0.72);
}

.measureCalculatorPoint strong,
.measureCalculatorRow strong {
    font-size: 12px;
    color: #f8fafc;
    font-weight: 700;
}

.previewDetails .previewThumb {
    flex:0 0 96px;
}

.previewDetails .previewPanel {
    flex:1 1 auto;
}

.previewPopup{
    transition: transform 180ms ease, filter 180ms ease;
    cursor:pointer;
}

.previewMarker:hover,
.previewMarkerActive {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px rgba(56,189,248,0.75));
}

#markerTelemetry{
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    min-width:132px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:12px;
    background:rgba(20,24,32,0.82);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    color:#fff;
    pointer-events:none;
    transition:transform 80ms linear;
}
.markerTelemetry div{display:flex;justify-content:space-between;gap:12px;line-height:1.45}
.markerTelemetry span{font-size:11px;color:rgba(255,255,255,0.68)}
.markerTelemetry strong{font-size:12px;color:#fef08a;white-space:nowrap}
.markerTelemetry strong.descending{color:#93c5fd}

#player{

    position: absolute;
    left: 20%;
    bottom: 20px;
    /* transform: translateX(-50%); */
    border-radius: 25px;
    background: rgba(25, 25, 25, .72);
    backdrop-filter: blur(12px);
    align-items: center;
    gap: 15px;
    padding: 11px;
    color: white;
    font-family: sans-serif;
    z-index: 1;
    width: 60%;
    text-align: center;
    margin: auto;
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: max-height 420ms ease-out, opacity 260ms ease-out, transform 260ms ease-out;
}

#player.is-visible {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#player > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease-out, transform 220ms ease-out;
}

#player.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.playerControls{
    display: flex;
    align-items: center;
    gap: 15px;
}

.hidden{
    display:none !important;
}

#timeline{

    flex:1;
}

button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#444;
    color:white;
    cursor:pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.player_switch{
    padding: 8px 8px;
    border-radius: 999px;
    border: 0px solid rgba(255, 255, 255, 0.15);
    background: #0000003d;
    color: #fff;
    box-shadow: 0 1px 25px rgba(0, 0, 0, 0.35);
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    text-align: center;
    width: 32px;
    height: 31px;
}

#btnUpper.is-icon-animating i {
    display: inline-block;
    animation: playerChartToggleIconPop 180ms ease;
}

@keyframes playerChartToggleIconPop {
    0% {
        transform: translateY(4px) scale(0.75);
        opacity: 0.35;
    }
    50% {
        transform: translateY(-2px) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

select option{
    border-radius: 8px;
    background: #222;
    color: #fff;
}

#altitude{
    min-width: 50px;
    text-align: center;
    font-weight: 600;
}

#chartBox{
    height:100px;
    border-radius:8px;
    background:rgba(255,255,255,0.08);
    padding:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
}

#altitudeChart{
    width:100%;
    height:100%;
    display:block;
}

#btnSettings{
    font-size: 19px;
    cursor: pointer;
    width: 32px;
    height: 31px;
    text-align: center;
    padding: 5px;
}

.maplibregl-popup-content {
    min-width: 400px;
    border-radius: 12px;
    background: transparent;
    margin: 50px;
    box-shadow: none;
    padding: 0;
    backdrop-filter: blur(12px);
}

.maplibregl-popup-tip {
    display: none;
}

.previewMarkerIcon img {
    border-radius: 20px;
    display: block;
    width: 50px;
    height: 50px;
    border: 2px solid #535353;
}

/* Close 3D button */
.close3dBtn {
    position: absolute;
    top: 17px;
    right: 60px;
    z-index: 9999;
    padding: 6px 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    width: 25px;
    height: 25px;
    margin-top: 7px;
}
.close3dBtn:hover{ background: rgba(0,0,0,0.8); }

.fitViewToggle,
.editModeToggle,
.measureModeToggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 44px;
    border-radius: 16px;
    /* border: 1px solid rgba(14, 116, 204, 0.24); */
    background: #ffffff;
    color: #537ea5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 26px rgb(1 13 24 / 14%);
    transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.fitViewToggle {
    top: calc(50% - 56px);
}

.fitViewToggle i,
.editModeToggle i,
.measureModeToggle i {
    font-size: 15px;
    color: #0a5ea8;
    text-shadow: 0 1px 6px rgba(14, 116, 204, 0.32);
}

.fitViewToggle:hover,
.editModeToggle:hover,
.measureModeToggle:hover {
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 10px 30px rgba(10, 94, 168, 0.32);
}

.fitViewToggle:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.editModeToggle.active {
    background: linear-gradient(180deg, #ffffff 0%, #eaf5ff 100%);
    color: #0b4f90;
    box-shadow: 0 12px 34px rgba(10, 94, 168, 0.42);
}

.measureModeToggle {
    top: calc(50% + 56px);
}

.measureModeToggle.active {
    background: linear-gradient(180deg, #ffffff 0%, #ecfeff 100%);
    color: #0f766e;
    box-shadow: 0 12px 34px rgba(15, 118, 110, 0.36);
}

.paintToolbar {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(10, 94, 168, 0.16);
    box-shadow: 0 8px 22px rgba(5, 29, 52, 0.16);
}

.paintToolbar button {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: #fff;
    color: #334155;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.paintTool i {
    font-size: 13px;
}

.paintTool[data-tool="pen"] i { color: #0a5ea8; }
.paintTool[data-tool="eraser"] i { color: #0f766e; }
.paintTool[data-tool="line"] i { color: #7c3aed; }
.paintTool[data-tool="circle"] i { color: #e11d48; }
.paintTool[data-tool="square"] i { color: #d97706; }
.paintTool[data-tool="triangle"] i { color: #16a34a; }

.paintTool:hover,
.paintColor:hover {
    transform: translateY(-1px);
    border-color: rgba(10, 94, 168, 0.45);
}

.paintTool.active,
.paintColor.active {
    border-color: rgba(10, 94, 168, 0.65);
    box-shadow: 0 0 0 2px rgba(10, 94, 168, 0.14);
}

.paintColor {
    border-radius: 999px !important;
}

.paintColor[data-color="#0a5ea8"] { background: #0a5ea8; }
.paintColor[data-color="#f97316"] { background: #f97316; }
.paintColor[data-color="#16a34a"] { background: #16a34a; }
.paintColor[data-color="#e11d48"] { background: #e11d48; }

.editModeBadge {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1101;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(14, 116, 204, 0.2);
    color: #0a5ea8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 22px rgba(10, 94, 168, 0.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease, transform 260ms ease;
}

.editModeBadge.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.editModeBadge.fading {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
}

body.edit-mode .editModeToggle {
    border-color: rgba(14, 116, 204, 0.5);
}

body.measure-mode .measureModeToggle {
    border-color: rgba(15, 118, 110, 0.52);
}

body.edit-mode .paintToolbar {
    display: flex !important;
}

/* Small polish for preview popup */
.previewPopup .previewTitle{ letter-spacing:0.2px }
.previewPopup .previewStats span{ display:block }

/* ensure marker hover state uses class */
.previewMarkerActive { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(56,189,248,0.75)); }

@media (max-width: 900px) {
    #sidebar {
        /* width: calc(100% - 22px); */
        max-width: 380px;
    }

    .uploadScheduleGrid {
        grid-template-columns: 1fr;
    }

    #player {
        left: 12px;
        right: 12px;
        width: auto;
    }

    .profileDrawer {
        width: calc(100vw - 20px);
        top: 10px;
        right: 10px;
        max-height: calc(100vh - 20px);
    }

    .profileEditorGrid {
        grid-template-columns: 1fr;
    }

    .profileEditorNote {
        flex-direction: column;
        align-items: flex-start;
    }

    .profileEditorNote strong {
        text-align: left;
    }

    .fitViewToggle,
    .editModeToggle {
        right: 8px;
        width: 30px;
        /* height: 74px; */
    }

    .fitViewToggle {
        top: calc(50% - 86px);
    }

    .paintToolbar {
        right: 44px;
        padding: 7px 5px;
        gap: 5px;
    }

    .paintToolbar button {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .editModeBadge {
        bottom: 110px;
        font-size: 12px;
    }
}

.maplibregl-ctrl.maplibregl-ctrl-group {
    background: none;
    box-shadow: none;
}

.maplibregl-ctrl-group button {
    background: #ffffff;
    color: white;
    margin-top: 5px;
}

.maplibregl-ctrl button:not(:disabled):hover {
    background: #ddd;
}

.floatingFilterDock.open {
    max-height: 130px;
    /* opacity: 0; */
    transform: translateY(-6px);
    border-color: transparent;
    pointer-events: none;
}

.floatingFilterGroup {
    display: flex;
    /* margin-top: 57px; */
}

.floatingSortSelectWrap {
    position: relative;
    display: flex;
    width: 100%;
    gap: 8px;
}

.flightTitle {
    margin-left: 55px;
    margin-top: -30px;
}

.flightBadges {
    text-align: center;
    /* margin-left: -100px; */
}

body.measure-mode #map canvas {
    cursor: crosshair;
}

button.floatingFilterItem.active {
    background: #0321507d;
}

.commentBubbleMoreButton:hover .commentBubbleActionMenu {
    visibility:visible;
    opacity:1;
}

.commentBubbleMoreButton .bi-three-dots-vertical{
    position:absolute;
}