/* 前台用户侧边栏 - 最新会员 / 当前在线 */
.ukSide {
    position: fixed;
    top: var(--uk-sb-top, 90px);
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --uk-sb-ava: 40px;
    --uk-sb-radius: 14px;
    --uk-sb-dur: 260ms;
    --sb-bg: rgba(255, 255, 255, .88);
    --sb-ink: #1b2a26;
    --sb-sub: #7d8a85;
    --sb-line: #e5eae7;
    --sb-accent: #1f6f5c;
    --sb-hover: #f3f8f5;
    --sb-shadow: 0 18px 40px -26px rgba(24, 38, 34, .38);
}
.ukSide.is-hidden { display: none; }

/* 七套预设配色 */
.ukSide-theme-frost { --sb-bg: rgba(255, 255, 255, .88); --sb-ink: #1b2a26; --sb-sub: #7d8a85; --sb-line: #e5eae7; --sb-accent: #1f6f5c; --sb-hover: #f3f8f5; }
.ukSide-theme-obsidian { --sb-bg: rgba(24, 26, 30, .93); --sb-ink: #f3f5f4; --sb-sub: #a7b0ad; --sb-line: rgba(255,255,255,.12); --sb-accent: #d8a44a; --sb-hover: rgba(255,255,255,.06); --sb-shadow: 0 18px 40px -22px rgba(0,0,0,.55); }
.ukSide-theme-dusk { --sb-bg: rgba(250, 245, 238, .94); --sb-ink: #3a2e28; --sb-sub: #8a7668; --sb-line: #e8dbcf; --sb-accent: #c4663a; --sb-hover: #f8efe6; }
.ukSide-theme-nord { --sb-bg: rgba(238, 243, 248, .93); --sb-ink: #22303d; --sb-sub: #6c8091; --sb-line: #d7e2ec; --sb-accent: #3f7fb8; --sb-hover: #eaf1f8; }
.ukSide-theme-moss { --sb-bg: rgba(240, 245, 238, .94); --sb-ink: #253026; --sb-sub: #6f8072; --sb-line: #d9e4d8; --sb-accent: #4c7a4f; --sb-hover: #eef4ec; }
.ukSide-theme-clay { --sb-bg: rgba(252, 246, 240, .95); --sb-ink: #3b2f26; --sb-sub: #90806f; --sb-line: #ecded0; --sb-accent: #a26b3d; --sb-hover: #f7efe7; }
.ukSide-theme-ink { --sb-bg: rgba(18, 30, 45, .94); --sb-ink: #eef4fb; --sb-sub: #9fb2c6; --sb-line: rgba(255,255,255,.12); --sb-accent: #4aa3e0; --sb-hover: rgba(255,255,255,.06); --sb-shadow: 0 18px 40px -22px rgba(0,0,0,.55); }

.ukSide-panel {
    pointer-events: auto;
    width: calc(var(--uk-sb-ava) + 26px);
    max-width: 46vw;
    background: var(--sb-bg);
    color: var(--sb-ink);
    border: 1px solid var(--sb-line);
    box-shadow: var(--sb-shadow);
    backdrop-filter: saturate(1.15) blur(10px);
    -webkit-backdrop-filter: saturate(1.15) blur(10px);
    overflow: hidden;
    transition: width var(--uk-sb-dur) cubic-bezier(.22, .8, .28, 1);
    animation: ukSideIn .4s ease both;
}
.ukSide-panel--left { border-radius: 0 var(--uk-sb-radius) var(--uk-sb-radius) 0; border-left: 0; }
.ukSide-panel--right { border-radius: var(--uk-sb-radius) 0 0 var(--uk-sb-radius); border-right: 0; }
.ukSide.is-open .ukSide-panel { width: 262px; }
.ukSide-flat .ukSide-panel { box-shadow: none; }
.ukSide-noanim .ukSide-panel { transition: none; animation: none; }

@keyframes ukSideIn { from { opacity: 0; } to { opacity: 1; } }

/* 标题栏 */
.ukSide-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid var(--sb-line);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.ukSide-hd b {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--sb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity var(--uk-sb-dur) ease;
}
.ukSide.is-open .ukSide-hd b { opacity: 1; }
.ukSide-hd::before {
    content: "⋯";
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--sb-sub);
    font-size: 15px;
    letter-spacing: 1px;
}
.ukSide.is-open .ukSide-hd::before { display: none; }
.ukSide-total {
    margin-left: auto;
    font-size: 11px;
    color: var(--sb-sub);
    opacity: 0;
    transition: opacity var(--uk-sb-dur) ease;
}
.ukSide.is-open .ukSide-total { opacity: 1; }
.ukSide-close {
    margin-left: auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sb-sub);
    font-size: 15px;
    line-height: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}
.ukSide-hd:hover .ukSide-close,
.ukSide.is-open .ukSide-close { opacity: 1; }
.ukSide-close:hover { background: var(--sb-hover); color: var(--sb-ink); }

/* 列表 */
.ukSide-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: calc(100vh - var(--uk-sb-top, 90px) - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.ukSide-list::-webkit-scrollbar { width: 4px; }
.ukSide-list::-webkit-scrollbar-thumb { background: var(--sb-line); border-radius: 4px; }

.ukSide-item { display: block; }
.ukSide-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: var(--sb-ink);
    text-decoration: none;
    transition: background .18s ease;
}
.ukSide-link:hover { background: var(--sb-hover); color: var(--sb-ink); text-decoration: none; }

.ukSide-ava {
    position: relative;
    flex: 0 0 var(--uk-sb-ava);
    width: var(--uk-sb-ava);
    height: var(--uk-sb-ava);
    border-radius: 50%;
    background: var(--sb-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ukSide-ava img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px var(--sb-line);
}
.ukSide-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--sb-bg);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
    animation: ukSidePulse 2.4s ease-out infinite;
}
@keyframes ukSidePulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.ukSide-noanim .ukSide-dot { animation: none; }
.ukSide-new {
    position: absolute;
    top: -4px;
    right: -6px;
    padding: 0 3px;
    border-radius: 4px;
    background: #e04f4f;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px;
    letter-spacing: .3px;
    animation: ukSideBlink 1.8s ease-in-out infinite;
}
@keyframes ukSideBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ukSide-noanim .ukSide-new { animation: none; }

.ukSide-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--uk-sb-dur) ease, transform var(--uk-sb-dur) ease;
    pointer-events: none;
}
.ukSide.is-open .ukSide-info { opacity: 1; transform: none; pointer-events: auto; }
.ukSide-info b {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ukSide-info small {
    font-size: 11px;
    color: var(--sb-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ukSide-level {
    align-self: flex-start;
    margin: 1px 0;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--sb-hover);
    color: var(--sb-accent);
    font-size: 10px;
    font-style: normal;
    line-height: 15px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ukSide-page { opacity: .9; }
.ukSide-dev {
    font-style: normal;
    padding: 0 3px;
    border-radius: 3px;
    border: 1px solid var(--sb-line);
    font-size: 9.5px;
    color: var(--sb-sub);
}
.ukSide-empty {
    padding: 18px 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--sb-sub);
    white-space: nowrap;
}

.ukSide-pin {
    display: none;
    padding: 6px 10px 10px;
    font-size: 10.5px;
    color: var(--sb-sub);
    text-align: center;
    border-top: 1px dashed var(--sb-line);
    white-space: nowrap;
}
.ukSide.is-open:not(.is-pinned) .ukSide-pin { display: block; }

/* 单侧模式 */
.ukSide-only-left .ukSide-panel--right,
.ukSide-only-right .ukSide-panel--left { display: none; }

/* 移动端：窄屏时改为底部抽屉式展开 */
@media (max-width: 900px) {
    .ukSide { top: auto; bottom: 86px; align-items: flex-end; }
    .ukSide-panel { width: 54px; }
    .ukSide.is-open .ukSide-panel { width: 78vw; max-width: 320px; }
    .ukSide-list { max-height: 46vh; }
    .ukSide-panel--left { border-radius: 0 var(--uk-sb-radius) var(--uk-sb-radius) 0; }
    .ukSide-panel--right { border-radius: var(--uk-sb-radius) 0 0 var(--uk-sb-radius); }
}