* {margin: 0; padding: 0; box-sizing: border-box;}

@keyframes blinkGreen {
    0% {opacity: 0.5;}
    50% {opacity: 1;}
    100% {opacity: 0.5;}
}
.dot-online {
    background:#22c55e;
    animation-name: blinkGreen;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.node-item:nth-child(1) .dot-online { animation-duration: 0.2s; animation-delay: 0.2s; }
.node-item:nth-child(2) .dot-online { animation-duration: 0.2s; animation-delay: 0.2s; }
.node-item:nth-child(3) .dot-online { animation-duration: 0.1s; animation-delay: 0.1s; }
.node-item:nth-child(4) .dot-online { animation-duration: 0.3s; animation-delay: 0.3s; }
.node-item:nth-child(5) .dot-online { animation-duration: 0.3s; animation-delay: 0.3s; }
.node-item:nth-child(6) .dot-online { animation-duration: 0.1s; animation-delay: 0.1s; }
.node-item:nth-child(7) .dot-online { animation-duration: 0.1s; animation-delay: 0.1s; }
.node-item:nth-child(8) .dot-online { animation-duration: 0.2s; animation-delay: 0.2s; }
.node-item:nth-child(9) .dot-online { animation-duration: 0.5s; animation-delay: 0.5s; }
.node-item:nth-child(10) .dot-online { animation-duration: 0.1s; animation-delay: 0.1s; }

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #111827;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

body {
    font-family:"Microsoft YaHei",sans-serif;
    font-size:14px;
    min-height:100vh;
    transition: all 0.3s ease;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.dark-mode {
    background:#111827;
    color:#f3f4f6;
}
.light-mode {
    background: #f8fafc;
    color: #1e293b;
}

.container {
    width: 100%;
    max-width: 700px;
    margin:0 auto;
    padding:10px 15px 25px;
}

.theme-switch {
    max-width: 700px;
    margin: 15px auto 0;
    text-align: right;
    font-size:14px;
    padding: 0 15px;
}
.theme-switch a{
    text-decoration: none;
    padding: 2px 8px;
    margin: 0 4px;
    border-radius: 4px;
    background: transparent !important;
    border: none !important;
}
.theme-switch a:hover{
    background: transparent !important;
}
.dark-mode .theme-switch a{
    color:#cbd5e1;
}
.light-mode .theme-switch a{
    color:#475569;
}
.theme-switch a.active {
    background: transparent !important;
    color: #3b82f6 !important;
}

.page-title {
    text-align:center;
    font-size:22px;
    margin-bottom:20px;
    font-weight:50px;
}

.btn-group {
    text-align:center;
    margin-bottom:24px;
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
}
.common-btn {
    padding:9px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    border:none;
    transition: all 0.25s ease;
    background:#1f2937;
    color:#d1d5db;
    border:1px solid #374151;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.dark-mode .common-btn {
    background:#1f2937;
    color:#d1d5db;
    border-color:#374151;
}
.light-mode .common-btn {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

.main-card {
    border-radius:12px;
    padding:20px;
    transition: all 0.3s ease;
}
.dark-mode .main-card {
    background:#1f2937;
}
.light-mode .main-card {
    background: #ffffff;
    box-shadow: 0 1px 3 rgba(0,0,0,0.1);
}
.main-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.light-mode .main-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}

.card-head {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
    font-size:14px;
}
.dark-mode .card-head {
    color:#d1d5db;
}
.light-mode .card-head {
    color: #475569;
}
.stat-item {
    display:flex;
    align-items:center;
    gap:4px;
}
.stat-label {
    font-weight:normal;
}
.stat-value {
    color:#60a5fa;
    font-weight:bold;
}

.call-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
}
.call-item {
    padding:9px 0;
    text-align:center;
    border-radius:8px;
    font-size:14px;
    transition: all 0.25s ease;
    font-weight: bold;
    cursor: pointer;
}
.dark-mode .call-item {
    background:#334155;
    color:#f1f5f9;
}
.light-mode .call-item {
    background:#e2e8f0;
    color:#334155;
}
.dark-mode .call-item.online {
    background:#1e3a5f;
    color:#bfdbfe;
}
.light-mode .call-item.online {
    background:#dbeafe;
    color:#1e40af;
}
.dark-mode .call-item.chief {
    background:#3b2e5a;
    color:#e9d5ff;
}
.light-mode .call-item.chief {
    background:#f3e8ff;
    color:#6d28d9;
}
.call-item.offline {
    opacity:0.55;
}
.call-item:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.light-mode .call-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.node-toggle {
    margin-top:20px;
    padding-top:16px;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    transition: all 0.25s;
}
.dark-mode .node-toggle {
    border-top:1px solid #374151;
    color:#d1d5db;
}
.light-mode .node-toggle {
    border-top: 1px solid #e2e8f0;
    color: #475569;
}
.node-toggle:hover {
    opacity: 0.9;
}
.node-arrow {
    margin-left:6px;
    transition:transform 0.25s;
}
.node-arrow.open {
    transform:rotate(180deg);
}
.node-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.node-wrap.open {
    max-height: 1000px;
    margin-top: 12px;
}

.node-list {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
}
.node-item {
    border-radius:8px;
    padding:12px;
    font-size:13px;
    cursor:pointer;
    transition: all 0.25s ease;
}
.dark-mode .node-item {
    background:#334155;
}
.light-mode .node-item {
    background: #e2e8f0;
}
.node-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.light-mode .node-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}
.node-top {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
    justify-content: space-between;
}
.status-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    flex-shrink:0;
}
.dot-offline {
    background:#94a3b8;
    animation: none;
}
.node-name-text {
    font-weight: 50px;
}
.node-version-tag {
    font-size:11px;
    opacity:0.8;
    text-align:right;
}
.node-ip-text {
    font-size:12px;
    padding-left:16px;
    display:flex;
    justify-content:space-between;
}
.dark-mode .node-ip-text {
    color:#9ca3af;
}
.light-mode .node-ip-text {
    color: #64748b;
}
.node-uptime-tag {
    font-size:11px;
    opacity:0.75;
}

/* 🔥 修复1：提高所有弹窗的z-index到最高层级，确保全屏时可见 */
.modal-mask {
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999; /* 从999改为99999，和服务器切换同级 */
    padding:15px;
    font-family:"Microsoft YaHei",sans-serif;
    font-size:14px;
}
.dark-mode .modal-mask {
    background:rgba(0,0,0,0.8);
}
.light-mode .modal-mask {
    background:rgba(0,0,0,0.5);
}
.modal-box {
    width:100%;
    max-width:400px;
    border-radius:12px;
    overflow:hidden;
    transition: all 0.3;
    font-family:"Microsoft YaHei",sans-serif;
}
.dark-mode .modal-box {
    background:#1f2937;
}
.light-mode .modal-box {
    background: #fff;
}
.modal-hd {
    padding:14px 18px;
    font-size:15px;
    font-weight:50px;
    font-family:"Microsoft YaHei",sans-serif;
}
.dark-mode .modal-hd {
    background:#374151;
}
.light-mode .modal-hd {
    background: #f1f5f9;
}
.modal-bd {
    padding:18px;
    font-family:"Microsoft YaHei",sans-serif;
}
.modal-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    font-size:14px !important;
    line-height:1.5;
    font-family:"Microsoft YaHei",sans-serif !important;
}
.dark-mode .modal-row {
    border-bottom:1px solid #374151;
}
.light-mode .modal-row {
    border-bottom: 1px solid #e2e8f0;
}
.modal-label {
    font-size:14px !important;
    font-weight:normal !important;
    font-family:"Microsoft YaHei",sans-serif !important;
}
.dark-mode .modal-label {
    color:#9ca3af;
}
.light-mode .modal-label {
    color: #64748b;
}
.modal-val {
    font-size:14px !important;
    font-weight:normal !important;
    font-family:"Microsoft YaHei",sans-serif !important;
    text-align:right !important;
    white-space:nowrap !important;
}
.dark-mode .modal-val {
    color:#f3f4f6;
}
.light-mode .modal-val {
    color:#1e293b;
}
.modal-ft {
    padding:12px 18px;
    text-align:center;
}
.modal-close {
    padding:7px 20px;
    border-radius:8px;
    font-size:14px;
    cursor: pointer;
    transition: all 0.25s;
    font-family:"Microsoft YaHei",sans-serif;
}
.modal-close:hover {
    transform: scale(1.05);
}
.dark-mode .modal-close {
    background:#273444;
    border:1px solid #3b82f6;
    color:#e5e7eb;
}
.light-mode .modal-close {
    background: #e2e8f0;
    border: 1px solid #3b82f6;
    color:#1e293b;
}

.footer-copyright {
    text-align:center;
    margin-top:24px;
    font-size:12px;
    line-height:1.8;
}
.dark-mode .footer-copyright {
    color:#6b7280;
}
.light-mode .footer-copyright {
    color: #64748b;
}
.footer-copyright a {
    text-decoration:none;
    margin:0 4px;
}
.dark-mode .footer-copyright a {
    color:#6b7280;
}
.light-mode .footer-copyright a {
    color: #64748b;
}
.beian-icon {
    width:14px;
    height:14px;
    vertical-align:middle;
    margin-right:4px;
    object-fit:contain;
}

/* 电台面板样式 */
.device-frame {
    width: 100%;
    height: 210px;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 24px;
    padding: 20px;
    position: relative;
    z-index: 1; /* 降低设备框架的z-index，确保下拉列表在上面 */
}
.dark-mode .device-frame {
    background:#1f2937;
}
.light-mode .device-frame {
    background: #ffffff;
    box-shadow: 0 1px 3 rgba(0,0,0,0.1);
}
.device-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.light-mode .device-frame:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}

.device-frame:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 5vh 5vw !important;
}
.device-frame:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 5vh 5vw !important;
}

.device-frame:fullscreen .current-call {
    font-size: clamp(80px, 20vw, 220px) !important;
    letter-spacing: 2px !important;
}
.device-frame:-webkit-full-screen .current-call {
    font-size: clamp(80px, 20vw, 220px) !important;
    letter-spacing: 2px !important;
}
/* 🔥 全屏欢迎语大幅缩小，彻底解决溢出 */
.device-frame:fullscreen .current-call.welcome-text {
    font-size: clamp(32px, 8vw, 60px) !important;
    letter-spacing: 0px !important;
}
.device-frame:-webkit-full-screen .current-call.welcome-text {
    font-size: clamp(32px, 8vw, 60px) !important;
    letter-spacing: 0px !important;
}

.device-frame:fullscreen .screen-time {
    font-size: clamp(80px, 18vw, 200px) !important;
}
.device-frame:-webkit-full-screen .screen-time {
    font-size: clamp(80px, 18vw, 200px) !important;
}

.device-frame:fullscreen .date-info {
    font-size: clamp(20px, 3vw, 40px) !important;
    margin-top: 15px !important;
}
.device-frame:-webkit-full-screen .date-info {
    font-size: clamp(20px, 3vw, 40px) !important;
    margin-top: 15px !important;
}

/* 🔥 完美平衡：全屏时图标和按钮大小 */
.device-frame:fullscreen .top-btn,
.device-frame:-webkit-full-screen .top-btn {
    width: 36px !important;
    height: 36px !important;
}

.device-frame:fullscreen .mute-icon,
.device-frame:fullscreen .fullscreen-icon,
.device-frame:fullscreen .globe-icon,
.device-frame:-webkit-full-screen .mute-icon,
.device-frame:-webkit-full-screen .fullscreen-icon,
.device-frame:-webkit-full-screen .globe-icon {
    width: 24px !important;
    height: 24px !important;
}

/* 🔥 完美平衡：全屏时顶部栏高度和位置 */
.device-frame:fullscreen .top-bar,
.device-frame:-webkit-full-screen .top-bar {
    height: 60px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.device-frame:fullscreen .main-area,
.device-frame:-webkit-full-screen .main-area {
    top: 70px !important;
}

.fmo-ui {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1; /* 降低UI容器的z-index */
}
.audio-activation-hint {
    position: absolute;
    bottom: 8px;
    left: 20px;
    font-size: 14px;
    display: flex;
    align-items:center;
    gap: 8px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3;
}
.dark-mode .audio-activation-hint {
    color:#9ca3af;
}
.light-mode .audio-activation-hint {
    color:#64748b;
}
.audio-activation-hint.visible {
    opacity: 1;
}
.play-icon {
    width: 18px;
    height: 18px;
    fill: #60a5fa;
}

/* ================================== */
/* 🔥 重新设计的顶部栏（完美居中+对齐） */
/* ================================== */
.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px; /* 🔥 修复2：从28px增加到38px，容纳34px的按钮 */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 三栏布局：左-中-右 */
    padding: 0 12px;
    z-index: 100; /* 提高顶部栏的z-index */
}

.top-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* 🔥 修复2：从-6px改为0，横线在顶部栏底部 */
    height: 1px;
}
.dark-mode .top-bar::after {
    background-color: #374151;
}
.light-mode .top-bar::after {
    background-color: #e2e8f0;
}

/* 顶部栏三栏结构 */
.top-bar-left, .top-bar-center, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.top-bar-left {
    justify-content: flex-start;
}

.top-bar-center {
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top-bar-right {
    justify-content: flex-end;
    margin-left: auto;
}

.rx-pill {
    background:#22c55e;
    color: #000;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    display: none;
}
.rx-pill.active {
    display: block;
}
.tx-pill {
    background:#ef4444;
    color: #000;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    display: none;
}
.tx-pill.active {
    display: block;
}

.connect-tip {
    font-size: 14px;
    color:#60a5fa;
    display: none;
}

.top-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    z-index: 999;
    background:rgba(55, 65, 81, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark-mode .top-btn {
    background:rgba(55, 65, 81, 0.6);
}
.light-mode .top-btn {
    background:rgba(226, 232, 240, 0.8);
}
.top-btn.active {
    background: rgba(239, 68, 68, 0.25) !important;
}
.mute-icon {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2360a5fa"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
    position: relative;
}
.mute-icon.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ef4444"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.73-7.86-6.5-9.13v2.06c3.08 1.18 5.5 4.12 5.5 7.07zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"/></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.fullscreen-icon {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2360a5fa"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
    position: relative;
}
.fullscreen-icon.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2360a5fa"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.globe-icon {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2394a3b8"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
    position: relative;
}
.globe-icon.connected {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2322c55e"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
}
.globe-icon.connecting {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f59e0b"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
    animation: blink 1s infinite;
}

.main-area {
    position: absolute;
    top: 48px; /* 🔥 修复2：从38px增加到48px，避免内容被顶部栏遮挡 */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1; /* 降低主区域的z-index */
}
.current-call {
    font-size: 90px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
}
.dark-mode .current-call {
    color:#60a5fa;
}
.light-mode .current-call {
    color:#1e40af;
}
.current-call.inactive {
    color:#9ca3af;
}
.current-call.welcome-text {
    font-size: 34px !important;
    letter-spacing: 0px !important;
}
.date-info {
    font-size: 18px;
    margin-top:12px;
    white-space: nowrap;
}
.dark-mode .date-info {
    color:#9ca3af;
}
.light-mode .date-info {
    color:#64748b;
}
.screen-time {
    font-size: 85px;
    display: none;
    white-space: nowrap;
}
.dark-mode .screen-time {
    color:#60a5fa;
}
.light-mode .screen-time {
    color:#1e40af;
}

/* 微信横屏优化 */
.wechat-fullscreen #deviceFrame {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100vh !important;
    height: 100vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50vw 0 0 -50vh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
.wechat-fullscreen .device-frame:fullscreen .current-call.welcome-text,
.wechat-fullscreen .device-frame:-webkit-full-screen .current-call.welcome-text {
    font-size: clamp(28px, 6vw, 50px) !important;
}

/* ================================== */
/* 🔥 新增：日志专属样式（无冲突） */
/* ================================== */
.log-icon {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2360a5fa"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}
.log-table th, .log-table td {
    padding: 4px;
    text-align: center;
    white-space: nowrap;
}
.dark-mode .log-table th {
    background: #374151;
    color: #9ca3af;
    border-bottom: 1px solid #4b5563;
}
.light-mode .log-table th {
    background: #f1f5f9;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}
.dark-mode .log-table td {
    color: #f3f4f6;
    border-bottom: 1px solid #374151;
}
.light-mode .log-table td {
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
}
.log-table th:nth-child(1),.log-table td:nth-child(1){ width: 22px; }
.log-table th:nth-child(2),.log-table td:nth-child(2){ width: 110px; }

/* ================================== */
/* 🔥 服务器切换组件样式（最上层版） */
/* ================================== */
.server-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    background: rgba(55, 65, 81, 0.6);
    border: none;
    min-width: 120px;
    justify-content: center;
    position: relative !important; /* 强制相对定位，确保下拉列表以此为基准 */
    z-index: 99999 !important; /* 提高到最高层级 */
}

.dark-mode .server-switcher {
    background: rgba(55, 65, 81, 0.6);
    color: #60a5fa;
}

.light-mode .server-switcher {
    background: rgba(226, 232, 240, 0.8);
    color: #1e40af;
}

.server-switcher:hover {
    background: rgba(55, 65, 81, 0.8);
}

.light-mode .server-switcher:hover {
    background: rgba(226, 232, 240, 1);
}

.server-switcher .arrow {
    font-size: 12px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.server-switcher.open .arrow {
    transform: rotate(180deg);
}

.server-dropdown {
    position: absolute !important; /* 强制绝对定位 */
    top: 100% !important; /* 强制在父元素正下方 */
    left: 50% !important; /* 左边缘对齐父元素中心 */
    transform: translateX(-50%) !important; /* 向左偏移自身宽度的一半，实现完美居中 */
    margin-top: 8px !important;
    width: 280px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    display: none !important;
    z-index: 99999 !important; /* 提高到最高层级，确保在所有元素之上 */
    backdrop-filter: blur(10px) !important;
    /* 清除所有可能的偏移 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.dark-mode .server-dropdown {
    background: rgba(30, 34, 45, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.light-mode .server-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.server-dropdown.show {
    display: block !important;
}

.server-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .server-item {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.light-mode .server-item {
    color: #1e293b;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.server-item:last-child {
    border-bottom: none;
}

.server-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.light-mode .server-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.server-item.current {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.light-mode .server-item.current {
    background: rgba(96, 165, 250, 0.1);
    color: #1e40af;
}

.server-item .badge {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #60a5fa;
    color: #ffffff;
}

/* 滚动条样式 */
.server-dropdown::-webkit-scrollbar {
    width: 6px;
}

.server-dropdown::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.server-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.server-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.light-mode .server-dropdown::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.light-mode .server-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.light-mode .server-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 全屏模式适配 */
.device-frame:fullscreen .server-switcher,
.device-frame:-webkit-full-screen .server-switcher {
    width: auto;
    min-width: 140px !important;
    font-size: 16px !important;
    padding: 4px 10px !important;
}

.device-frame:fullscreen .server-dropdown,
.device-frame:-webkit-full-screen .server-dropdown {
    width: 360px !important;
    max-height: 500px !important;
}

.device-frame:fullscreen .server-item,
.device-frame:-webkit-full-screen .server-item {
    font-size: 18px;
    padding: 14px 20px;
}