/* Modern Icons CSS - Professional Theme (No neon/glow effects) */
.btn svg,
.btn-icon svg,
.nav-item svg,
.card-header svg {
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform
}

.btn:hover svg,
.btn-icon:hover svg {
    transform: scale(1.05)
}

.btn:active svg,
.btn-icon:active svg {
    transform: scale(0.95)
}

.nav-item:hover svg {
    transform: translateX(3px) scale(1.03)
}

.card-header svg {
    filter: none
}

.card-header:hover svg {
    transform: scale(1.03)
}

.toggle {
    position: relative;
    width: 52px;
    height: 28px;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(145deg, #1a1a2e 0, #252542 100%);
    border: 2px solid rgba(59, 130, 246, 0.16);
    border-radius: 50px;
    cursor: pointer;
    transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)
}

.toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg, #4a4a6a 0, #3a3a5a 100%);
    border-radius: 50%;
    transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1)
}

.toggle:hover {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2)
}

.toggle:hover::before {
    background: linear-gradient(145deg, #5a5a7a 0, #4a4a6a 100%);
    transform: translateY(-50%) scale(1.03)
}

.toggle:checked {
    background: var(--accent-gradient);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 2px 8px rgba(255, 255, 255, 0.1)
}

.toggle:checked::before {
    left: calc(100% - 24px);
    background: linear-gradient(145deg, #fff 0, #f0f0f5 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3)
}

.toggle:active::before {
    width: 26px
}

.toggle:checked:active::before {
    left: calc(100% - 30px)
}

.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.3) 0, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform .6s, opacity .6s
}

.btn:active::after {
    opacity: 1;
    transform: scale(2.5);
    transition: transform .1s, opacity 0s
}

.btn-primary {
    background: var(--accent-gradient);
    background-size: 100% 100%;
    border: 0;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
}

.btn-primary:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2)
}

.btn-secondary {
    background: rgba(59, 130, 246, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1)
}

.btn-secondary:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.26);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2)
}

.btn-secondary:active {
    transform: translateY(1px);
    background: rgba(59, 130, 246, 0.14)
}

.btn-icon {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--text-secondary);
    transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.btn-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.08) 0, transparent 70%);
    opacity: 0;
    transition: opacity .3s, transform .3s;
    transform: scale(0.8)
}

.btn-icon:hover {
    color: var(--accent-primary);
    transform: scale(1.08)
}

.btn-icon:hover::before {
    opacity: 1;
    transform: scale(1)
}

.btn-icon:active {
    transform: scale(0.95)
}

.card {
    position: relative;
    transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0, transparent 30%, transparent 70%, rgba(20, 184, 166, 0.15) 100%);
    opacity: 0;
    transition: opacity .4s;
    z-index: -1
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25)
}

.card:hover::before {
    opacity: 1
}

textarea,
input[type="text"],
input[type="password"] {
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(59, 130, 246, 0.16)
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    transform: none
}

.status-dot {
    position: relative
}

.status-dot::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    transform: scale(1)
}

.connection-status:hover .status-dot::before {
    opacity: .3;
    transform: scale(1.5)
}

.nav-item {
    position: relative;
    overflow: hidden
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-gradient);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.nav-item:hover::after,
.nav-item.active::after {
    transform: translateX(0)
}

.message-item {
    animation: messageSlideIn .4s ease-out
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.message-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15)
}

.toast {
    animation: toastSlide .4s ease-out
}

@keyframes toastSlide {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.modal.active .modal-content {
    animation: modalFade .3s ease-out
}

@keyframes modalFade {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.feature-item {
    opacity: 0;
    animation: featureFadeUp .5s ease-out forwards
}

.feature-item:nth-child(1) {
    animation-delay: .1s
}

.feature-item:nth-child(2) {
    animation-delay: .15s
}

.feature-item:nth-child(3) {
    animation-delay: .2s
}

.feature-item:nth-child(4) {
    animation-delay: .25s
}

.feature-item:nth-child(5) {
    animation-delay: .3s
}

.feature-item:nth-child(6) {
    animation-delay: .35s
}

@keyframes featureFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.loading {
    border: 3px solid transparent;
    border-top: 3px solid var(--accent-primary);
    border-right: 3px solid rgba(20, 184, 166, 0.9);
    animation: spin .8s linear infinite
}

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

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: rgba(59, 130, 246, 0.04);
    border-radius: 5px
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.35) 0, rgba(20, 184, 166, 0.35) 100%);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.5) 0, rgba(20, 184, 166, 0.5) 100%);
    background-clip: padding-box
}

.room-id {
    position: relative;
    text-shadow: none
}

.room-id:hover {
    text-shadow: none
}

.logo-img {
    transition: all .3s ease
}

.logo-img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2)
}

.connection-status {
    position: relative;
    overflow: hidden
}

.connection-status::before {
    display: none
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

@media(max-width:768px) {

    .glass,
    .modal-content,
    .btn-secondary,
    .connection-status,
    .bottom-nav-bar,
    .radial-item {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px)
    }

    .card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15)
    }

    .btn-primary:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2)
    }
}