/* =========================================================
   LIQUID GLASS MODE OVERRIDES
   ========================================================= */
/* body.liquid-glass-mode .topheader, */
/* body.liquid-glass-mode .history-modal-card .history-grid,
body.liquid-glass-mode .history-modal-card .history-grid .history-card, */
body.liquid-glass-mode .main-content {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.liquid-glass-mode .history-modal {
    background-color: none !important;
}

body.liquid-glass-mode .topheader,
body.liquid-glass-mode .branddefault,
body.liquid-glass-mode footer,
body.liquid-glass-mode .sidebar,
body.liquid-glass-mode .settings-popover,
body.liquid-glass-mode .mode-btn,
body.liquid-glass-mode .nav-toggle-button,
/* body.liquid-glass-mode .main-content, */
/* body.liquid-glass-mode .server-test, */
/* body.liquid-glass-mode .latency-test, */
body.liquid-glass-mode .latency-card,
body.liquid-glass-mode .gauge-box,
body.liquid-glass-mode .start-test,
body.liquid-glass-mode .duration-test,
body.liquid-glass-mode .infor-test,
body.liquid-glass-mode .history-modal-card,
body.liquid-glass-mode .page-card,
body.liquid-glass-mode .login-card,
body.liquid-glass-mode .learning-title,
body.liquid-glass-mode .learning-card,
body.liquid-glass-mode .learning-popup-card,
body.liquid-glass-mode .learning-popup-head,
body.liquid-glass-mode .learning-popup-close,
body.liquid-glass-mode .learning-topic section,
body.liquid-glass-mode .footer-test button,
body.liquid-glass-mode .history-modal-card .history-grid,
body.liquid-glass-mode .history-modal-card .history-grid .history-card,
body.liquid-glass-mode .ipcheck-content,
body.liquid-glass-mode .ipcheck-form-container,
body.liquid-glass-mode .ipcheck-results,
body.liquid-glass-mode .ipcheck-input,
body.liquid-glass-mode .ipcheck-select,
body.liquid-glass-mode .ipcheck-submit-btn,
body.liquid-glass-mode .terminal-output,
body.liquid-glass-mode .server-select {
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.0) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--radius) !important;
}


body.liquid-glass-mode .latency-card {
    border-radius: 18px !important;
}

body.liquid-glass-mode .duration-test,
body.liquid-glass-mode .server-select,
body.liquid-glass-mode .infor-test {
    border-radius: 14px !important;
}

body.liquid-glass-mode .infor-test {
    border-bottom: none !important;
}

body.liquid-glass-mode .server-test {
    border-bottom: none !important;
}

body.liquid-glass-mode .footer-test button {
    padding: 10px 20px !important;
}

body.liquid-glass-mode .navlink {
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2) !important;
    border-radius: 14px !important;
}


body.liquid-glass-mode .navlink:hover,
body.liquid-glass-mode .navlink.active,
body.liquid-glass-mode .mode-btn.active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.3) !important;
}



/* Make toggle icon look nice */
.navlink svg {
    display: block;
}

/* =========================================================
   IOS-STYLE LIQUID GLASS REFINEMENT
   ========================================================= */

body.liquid-glass-mode {
    --panel: rgba(255, 255, 255, 0.18);
    --panel-2: rgba(255, 255, 255, 0.28);
    --line: rgba(255, 255, 255, 0.28);
    --border-color: rgba(255, 255, 255, 0.34);
    --muted: rgba(255, 255, 255, 0.78);
    background:
        radial-gradient(circle at 18% 16%, rgba(0, 194, 255, 0.62), transparent 34%),
        radial-gradient(circle at 82% 24%, rgba(255, 226, 82, 0.48), transparent 30%),
        radial-gradient(circle at 28% 82%, rgba(255, 93, 137, 0.54), transparent 34%),
        radial-gradient(circle at 76% 78%, rgba(20, 221, 151, 0.46), transparent 32%),
        linear-gradient(135deg, #0ba7ff 0%, #2ec7ff 36%, #ffd65c 70%, #ff7a45 100%) !important;
}

body.liquid-glass-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: inherit;
    filter: blur(30px) saturate(145%);
    transform: scale(1.05);
}

body.liquid-glass-mode .main-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.liquid-glass-mode .topheader,
body.liquid-glass-mode footer,
body.liquid-glass-mode .sidebar,
body.liquid-glass-mode .settings-popover,
body.liquid-glass-mode .mode-btn,
body.liquid-glass-mode .nav-toggle-button,
body.liquid-glass-mode .latency-card,
body.liquid-glass-mode .gauge-box,
body.liquid-glass-mode .start-test,
body.liquid-glass-mode .duration-test,
body.liquid-glass-mode .infor-test,
body.liquid-glass-mode .history-modal-card,
body.liquid-glass-mode .page-card,
body.liquid-glass-mode .login-card,
body.liquid-glass-mode .learning-title,
body.liquid-glass-mode .learning-card,
body.liquid-glass-mode .learning-popup-card,
body.liquid-glass-mode .learning-popup-head,
body.liquid-glass-mode .learning-popup-close,
body.liquid-glass-mode .learning-topic section,
body.liquid-glass-mode .footer-test button,
body.liquid-glass-mode .history-card,
body.liquid-glass-mode .ipcheck-content,
body.liquid-glass-mode .ipcheck-form-container,
body.liquid-glass-mode .ipcheck-results,
body.liquid-glass-mode .ipcheck-input,
body.liquid-glass-mode .ipcheck-select,
body.liquid-glass-mode .ipcheck-submit-btn,
body.liquid-glass-mode .terminal-output,
body.liquid-glass-mode .server-select,
body.liquid-glass-mode .youtube-frame-shell,
body.liquid-glass-mode .youtube-playlist-item,
body.liquid-glass-mode .youtube-search-form input,
body.liquid-glass-mode .admin-profile-menu,
body.liquid-glass-mode .admin-role-list form,
body.liquid-glass-mode .admin-access-rule {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.26)),
        rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -18px 34px rgba(255, 255, 255, 0.08),
        0 18px 44px rgba(31, 50, 86, 0.22),
        0 2px 8px rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(34px) saturate(210%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(34px) saturate(210%) brightness(1.08) !important;
    border-radius: calc(var(--radius) + 6px) !important;
}

body.liquid-glass-mode .page-card,
body.liquid-glass-mode .learning-card,
body.liquid-glass-mode .sidebar,
body.liquid-glass-mode .topheader,
body.liquid-glass-mode footer {
    overflow: hidden;
}

body.liquid-glass-mode .page-card::before,
body.liquid-glass-mode .learning-card::before,
body.liquid-glass-mode .sidebar::before,
body.liquid-glass-mode .topheader::before,
body.liquid-glass-mode footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.52), transparent 26%),
        radial-gradient(circle at 86% 82%, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.38), transparent 32%, rgba(255, 255, 255, 0.15) 78%, transparent);
    mix-blend-mode: screen;
}

body.liquid-glass-mode .navlink,
body.liquid-glass-mode .settings-btn,
body.liquid-glass-mode .mode-btn,
body.liquid-glass-mode .theme-dot,
body.liquid-glass-mode .start-test-button,
body.liquid-glass-mode .footer-test button,
body.liquid-glass-mode button {
    backdrop-filter: blur(24px) saturate(190%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.08) !important;
}

body.liquid-glass-mode .navlink,
body.liquid-glass-mode .mode-btn,
body.liquid-glass-mode .settings-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 10px 24px rgba(22, 42, 84, 0.18) !important;
    border-radius: 18px !important;
}

body.liquid-glass-mode .navlink:hover,
body.liquid-glass-mode .navlink.active,
body.liquid-glass-mode .mode-btn.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 14px 30px rgba(29, 64, 128, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

body.liquid-glass-mode h1,
body.liquid-glass-mode h2,
body.liquid-glass-mode h3,
body.liquid-glass-mode p,
body.liquid-glass-mode label,
body.liquid-glass-mode .navlink,
body.liquid-glass-mode .learning-card,
body.liquid-glass-mode .youtube-playlist-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

body.liquid-glass-mode input,
body.liquid-glass-mode select,
body.liquid-glass-mode textarea,
body.liquid-glass-mode .terminal-output {
    background: rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
}

body.liquid-glass-mode .learning-card h3,
body.liquid-glass-mode .youtube-playlist-item:hover,
body.liquid-glass-mode .youtube-playlist-item.active {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
}

/* =========================================================
   IOS LIQUID GLASS FINAL OVERRIDES
   ========================================================= */

body.liquid-glass-mode {
    --panel: rgba(255, 255, 255, 0.26);
    --panel-2: rgba(255, 255, 255, 0.36);
    --line: rgba(255, 255, 255, 0.54);
    --border-color: rgba(255, 255, 255, 0.52);
    --muted: rgba(255, 255, 255, 0.84);
    isolation: isolate;
    color: rgba(255, 255, 255, 0.96);
    background:
        linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
        radial-gradient(circle at 16% 14%, rgba(0, 204, 255, 0.84), transparent 30%),
        radial-gradient(circle at 76% 12%, rgba(255, 237, 82, 0.78), transparent 28%),
        radial-gradient(circle at 34% 62%, rgba(255, 72, 150, 0.72), transparent 32%),
        radial-gradient(circle at 82% 76%, rgba(43, 226, 150, 0.64), transparent 30%),
        url("/static/images/background.png") center / cover fixed no-repeat,
        linear-gradient(135deg, #10b9ff 0%, #44d6ff 32%, #ffe16a 65%, #ff7958 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.liquid-glass-mode::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        inherit !important;
    filter: blur(42px) saturate(190%) brightness(1.14) !important;
    transform: scale(1.08) !important;
    opacity: 0.96;
}

body.liquid-glass-mode .topheader,
body.liquid-glass-mode footer,
body.liquid-glass-mode .sidebar,
body.liquid-glass-mode .settings-popover,
body.liquid-glass-mode .mode-btn,
body.liquid-glass-mode .nav-toggle-button,
body.liquid-glass-mode .latency-card,
body.liquid-glass-mode .gauge-box,
body.liquid-glass-mode .start-test,
body.liquid-glass-mode .duration-test,
body.liquid-glass-mode .infor-test,
body.liquid-glass-mode .history-modal-card,
body.liquid-glass-mode .page-card,
body.liquid-glass-mode .login-card,
body.liquid-glass-mode .learning-title,
body.liquid-glass-mode .learning-card,
body.liquid-glass-mode .learning-popup-card,
body.liquid-glass-mode .learning-popup-head,
body.liquid-glass-mode .learning-popup-close,
body.liquid-glass-mode .learning-topic section,
body.liquid-glass-mode .footer-test button,
body.liquid-glass-mode .history-card,
body.liquid-glass-mode .ipcheck-content,
body.liquid-glass-mode .ipcheck-form-container,
body.liquid-glass-mode .ipcheck-results,
body.liquid-glass-mode .ipcheck-input,
body.liquid-glass-mode .ipcheck-select,
body.liquid-glass-mode .ipcheck-submit-btn,
body.liquid-glass-mode .terminal-output,
body.liquid-glass-mode .server-select,
body.liquid-glass-mode .youtube-frame-shell,
body.liquid-glass-mode .youtube-playlist-item,
body.liquid-glass-mode .youtube-search-form input,
body.liquid-glass-mode .admin-profile-menu,
body.liquid-glass-mode .admin-role-list form,
body.liquid-glass-mode .admin-access-rule {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.18) 43%, rgba(255, 255, 255, 0.34) 100%),
        rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-top-color: rgba(255, 255, 255, 0.78) !important;
    border-left-color: rgba(255, 255, 255, 0.66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -20px 42px rgba(255, 255, 255, 0.12),
        0 16px 36px rgba(30, 58, 120, 0.18),
        0 2px 8px rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(52px) saturate(245%) contrast(1.05) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(52px) saturate(245%) contrast(1.05) brightness(1.12) !important;
    border-radius: 28px !important;
}

body.liquid-glass-mode .navlink,
body.liquid-glass-mode .settings-btn,
body.liquid-glass-mode .mode-btn,
body.liquid-glass-mode .theme-dot,
body.liquid-glass-mode .start-test-button,
body.liquid-glass-mode .footer-test button,
body.liquid-glass-mode button {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)),
        rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 10px 24px rgba(35, 65, 130, 0.16) !important;
    backdrop-filter: blur(38px) saturate(230%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(38px) saturate(230%) brightness(1.1) !important;
}

body.liquid-glass-mode .navlink:hover,
body.liquid-glass-mode .navlink.active,
body.liquid-glass-mode .mode-btn.active,
body.liquid-glass-mode button:hover {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)),
        rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
    transform: translateY(-1px);
}

body.liquid-glass-mode input,
body.liquid-glass-mode select,
body.liquid-glass-mode textarea,
body.liquid-glass-mode .terminal-output {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.44) !important;
    backdrop-filter: blur(34px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(210%) !important;
}

body.liquid-glass-mode input::placeholder,
body.liquid-glass-mode textarea::placeholder {
    color: rgba(255, 255, 255, 0.68) !important;
}

body.liquid-glass-mode .main-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.liquid-glass-mode .branddefault {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.liquid-glass-mode .logodefault {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.liquid-glass-mode .logoimgdefault {
    filter: none !important;
}

body.liquid-glass-mode .settings-popover {
    color: #ffffff !important;
    background:
        linear-gradient(145deg, rgba(22, 18, 24, 0.78), rgba(28, 18, 22, 0.48)),
        rgba(8, 8, 12, 0.52) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

body.liquid-glass-mode .theme-dot {
    background-clip: padding-box !important;
    border: 2px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.26),
        0 4px 12px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.liquid-glass-mode .theme-dot.active {
    border-color: #ffffff !important;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 8px 18px rgba(0, 0, 0, 0.26) !important;
}

body.liquid-glass-mode .theme-dot-black { background: #111111 !important; }
body.liquid-glass-mode .theme-dot-blue { background: #002b5e !important; }
body.liquid-glass-mode .theme-dot-red { background: #8a0000 !important; }
body.liquid-glass-mode .theme-dot-white { background: #f5f7fb !important; border-color: rgba(40, 40, 40, 0.42) !important; }
body.liquid-glass-mode .theme-dot-ocean-sunset { background: linear-gradient(135deg, #0F2027, #2C5364) !important; }
body.liquid-glass-mode .theme-dot-indigo-steel { background: linear-gradient(135deg, #2C3E50, #4CA1AF) !important; }
body.liquid-glass-mode .theme-dot-bronze-eclipse { background: linear-gradient(135deg, #3C2A21, #8E735B) !important; }
body.liquid-glass-mode .theme-dot-mocha-mist { background: linear-gradient(135deg, #B79891, #94716B) !important; }
body.liquid-glass-mode .theme-dot-velvet-smoke { background: linear-gradient(135deg, #ADA996, #F2F2F2) !important; }
body.liquid-glass-mode .theme-dot-emerald-dusk { background: linear-gradient(135deg, #134E5E, #71B280) !important; }
body.liquid-glass-mode .theme-dot-royal-aurora { background: linear-gradient(135deg, #3E2F5B, #E94560) !important; }
body.liquid-glass-mode .theme-dot-royal-charcoal { background: linear-gradient(135deg, #232526, #414345) !important; }
body.liquid-glass-mode .theme-dot-champagne-blush { background: linear-gradient(135deg, #FCEABB, #F8B500) !important; }
body.liquid-glass-mode .theme-dot-crimson-velvet { background: linear-gradient(135deg, #5A2A27, #9A4D42) !important; }