:root{
    --base-width: 1912;
    --min-scale: 0.45;
    --max-scale: 1.15;
    --px: clamp(calc(100vw / var(--base-width) * var(--min-scale)), calc(100vw / var(--base-width)), calc(100vw / var(--base-width) * var(--max-scale)));
    --bg:#0f172a;
    --white:#282b35;
    --blue:#40b0ff;
    --blue-d:#2979ff;
    --border:#334155;
    --text:#e2e8f0;
    --text2:#94a3b8;
    --text3:#64748b;
    --red:#ef4444;
    --radius:12px;
    --shadow-lg:0 calc(12 * var(--px)) calc(32 * var(--px)) rgba(0,0,0,.35),0 0 0 max(1px, calc(1 * var(--px))) rgba(64,176,255,.08);
}

svg {
    max-width: 100%;
    height: auto;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:system-ui,-apple-system,Microsoft YaHei,sans-serif;
}
body{
    background:var(--bg);
    background-image: radial-gradient(rgba(51,65,85,.6) 1px, transparent 1px);
    background-size:calc(24 * var(--px)) calc(24 * var(--px));
    min-height:100vh;
    color:var(--text);
}
/* 顶部导航 */
.header-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:calc(16 * var(--px)) calc(40 * var(--px));
    background:var(--white);
    border-bottom:max(1px, calc(1 * var(--px))) solid var(--border);
}
.nav-logo{
    display:flex;
    align-items:center;
    gap:calc(10 * var(--px));
    font-size:calc(26 * var(--px));
    font-weight:600;
    color:var(--blue);
}
.nav-menu{
    display:flex;
    gap:calc(32 * var(--px));
    align-items:center;
}
.nav-menu a{
    color:var(--text2);
    text-decoration:none;
    font-size:calc(16 * var(--px));
    padding:calc(8 * var(--px)) calc(12 * var(--px));
    border-bottom:max(2px, calc(2 * var(--px))) solid transparent;
    transition:all .2s;
}
.nav-menu a:hover{
    color:var(--text);
}
.nav-menu a.active{
    color:var(--blue);
    border-bottom:max(2px, calc(2 * var(--px))) solid var(--blue);
}
/* 主体容器 */
.main-wrap{
    max-width:calc(980 * var(--px));
    margin:calc(32 * var(--px)) auto;
    padding:0 calc(20 * var(--px));
    text-align:center;
}
.page-title{
    font-size:calc(40 * var(--px));
    font-weight:800;
    margin-bottom:calc(10 * var(--px));
    color:#fff;
    letter-spacing:calc(-.3 * var(--px));
}
.page-desc{
    font-size:calc(16 * var(--px));
    color:var(--text2);
    margin-bottom:calc(28 * var(--px));
    line-height:1.6;
}
/* 主卡片 毛玻璃深色 */
.card-box{
    background:var(--white);
    border:max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius:calc(14 * var(--px));
    padding:calc(24 * var(--px));
    text-align:left;
    box-shadow:var(--shadow-lg);
}
.card-label{
    display:flex;
    align-items:center;
    gap:calc(6 * var(--px));
    font-size:calc(18 * var(--px));
    font-weight:700;
    margin-bottom:calc(14 * var(--px));
    color:var(--text);
}
.card-label svg{
    width:calc(24 * var(--px));height:calc(24 * var(--px));fill:var(--blue);
}
.nav-logo svg{
    width:calc(32 * var(--px));height:calc(32 * var(--px));
}
/* 输入框容器 */
.input-container{
    position:relative;
}
/* 输入框 */
.input-url{
    width:100%;
    background:var(--bg);
    border:max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius:calc(8 * var(--px));
    padding:calc(12 * var(--px)) calc(14 * var(--px));
    color:var(--text);
    font-size:calc(15 * var(--px));
    margin-bottom:calc(16 * var(--px));
    transition:all .2s;
    -webkit-appearance:none;
    -webkit-autocomplete:none;
}
.input-url::placeholder{
    color:var(--text3);
}
.input-url:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 calc(3 * var(--px)) rgba(64,176,255,.15);
}
.input-url:-webkit-autofill,
.input-url:-webkit-autofill:hover,
.input-url:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 calc(30 * var(--px)) var(--bg) inset !important;
    -webkit-text-fill-color:var(--text) !important;
}
/* 自定义历史记录下拉框 */
.history-dropdown{
    position:absolute;
    top:calc(100% - 16 * var(--px));
    left:0;
    right:0;
    background:var(--white);
    border:max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius:0 0 calc(8 * var(--px)) calc(8 * var(--px));
    box-shadow:0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,.3);
    list-style:none;
    padding:calc(8 * var(--px)) 0;
    margin:0;
    display:none;
    z-index:100;
    max-height:calc(240 * var(--px));
    overflow-y:auto;
}
.history-dropdown.active{
    display:block;
}
.history-dropdown li{
    padding:calc(10 * var(--px)) calc(14 * var(--px));
    cursor:pointer;
    transition:all .2s;
    display:flex;
    align-items:center;
    gap:calc(10 * var(--px));
}
.history-dropdown li:hover{
    background:rgba(64,176,255,.1);
}
.history-dropdown li .url-text{
    flex:1;
    color:var(--text);
    font-size:calc(14 * var(--px));
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.history-dropdown li .url-time{
    color:var(--text3);
    font-size:calc(12 * var(--px));
}
.history-dropdown li .delete-history{
    opacity:0;
    color:var(--text3);
    font-size:calc(16 * var(--px));
    transition:all .2s;
    padding:calc(2 * var(--px));
}
.history-dropdown li:hover .delete-history{
    opacity:1;
}
.history-dropdown li .delete-history:hover{
    color:var(--red);
}
.history-dropdown .empty-state{
    padding:calc(20 * var(--px));
    text-align:center;
    color:var(--text3);
    font-size:calc(14 * var(--px));
}
.history-dropdown-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:calc(8 * var(--px)) calc(14 * var(--px));
    border-bottom:max(1px, calc(1 * var(--px))) solid var(--border);
    margin-bottom:calc(4 * var(--px));
}
.history-dropdown-header span{
    color:var(--text2);
    font-size:calc(13 * var(--px));
    font-weight:600;
}
.history-dropdown-header .clear-history{
    color:var(--blue);
    font-size:calc(12 * var(--px));
    cursor:pointer;
    transition:color .2s;
}
.history-dropdown-header .clear-history:hover{
    color:var(--blue-d);
}
/* 切换标签按钮组 */
.tab-group{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:0;
    margin-bottom:calc(16 * var(--px));
}
.tab-btn{
    padding:calc(12 * var(--px));
    border:max(1px, calc(1 * var(--px))) solid var(--border);
    background:var(--bg);
    color:var(--text2);
    font-size:calc(14 * var(--px));
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
}
.tab-btn.active{
    background:linear-gradient(90deg,var(--blue-d),var(--blue));
    color:#fff;
    border-color:var(--blue);
    box-shadow:0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(64,176,255,.25);
}
.tab-btn:not(.active):hover{
    color:var(--text);
    background:rgba(51,65,85,.4);
}
.tab-btn:first-child{
    border-radius:calc(10 * var(--px)) 0 0 calc(10 * var(--px));
}
.tab-btn:last-child{
    border-radius:0 calc(10 * var(--px)) calc(10 * var(--px)) 0;
}
/* 代理状态显示 */
.proxy-status{
    padding:calc(8 * var(--px)) calc(12 * var(--px));
    background:rgba(64,176,255,.08);
    border:max(1px, calc(1 * var(--px))) solid rgba(64,176,255,.2);
    border-radius:calc(6 * var(--px));
    font-size:calc(13 * var(--px));
    color:var(--text2);
    margin-bottom:calc(14 * var(--px));
    text-align:center;
}
/* 节点选择器 */
.node-selector{
    margin-bottom:calc(16 * var(--px));
}
.node-selector-label{
    display:block;
    font-size:calc(14 * var(--px));
    color:var(--text2);
    margin-bottom:calc(8 * var(--px));
}
.node-select{
    width:100%;
    background:var(--bg);
    border:max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius:calc(8 * var(--px));
    padding:calc(10 * var(--px)) calc(12 * var(--px));
    color:var(--text);
    font-size:calc(14 * var(--px));
    cursor:pointer;
    transition:all .2s;
    -webkit-appearance:none;
    appearance:none;
}
.node-select:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 calc(3 * var(--px)) rgba(64,176,255,.15);
}
.node-select option{
    background:var(--white);
    color:var(--text);
    padding:calc(8 * var(--px));
}
.node-select-wrapper{
    position:relative;
}
.node-select-wrapper::after{
    content:'';
    position:absolute;
    right:calc(12 * var(--px));
    top:50%;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-left:max(5px, calc(5 * var(--px))) solid transparent;
    border-right:max(5px, calc(5 * var(--px))) solid transparent;
    border-top:max(5px, calc(5 * var(--px))) solid var(--text2);
    pointer-events:none;
}
/* 转换主按钮 */
.submit-btn{
    width:100%;
    padding:calc(14 * var(--px));
    background:linear-gradient(90deg,var(--blue-d),var(--blue));
    border:none;
    border-radius:calc(8 * var(--px));
    color:#fff;
    font-size:calc(16 * var(--px));
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:calc(8 * var(--px));
    transition:all .2s;
    box-shadow:0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(64,176,255,.25);
}
.submit-btn svg{
    width:calc(22 * var(--px));
    height:calc(22 * var(--px));
}
.submit-btn:hover{
    transform:translateY(calc(-1 * var(--px)));
    box-shadow:0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(64,176,255,.35);
}
/* 错误提示 */
.err-tip{
    background:rgba(239,68,68,.12);
    border:max(1px, calc(1 * var(--px))) solid rgba(239,68,68,.35);
    color:#fca5a5;
    padding:calc(10 * var(--px)) calc(14 * var(--px));
    border-radius:calc(8 * var(--px));
    margin-bottom:calc(14 * var(--px));
    display:none;
}
/* 跳转成功提示框 */
.jump-panel{
    margin-top:calc(16 * var(--px));
    padding:calc(14 * var(--px));
    background:rgba(64,176,255,.08);
    border:max(1px, calc(1 * var(--px))) solid rgba(64,176,255,.25);
    border-radius:calc(8 * var(--px));
    text-align:center;
    display:none;
}
.jump-panel p{
    color:var(--text2);
    margin-bottom:calc(12 * var(--px));
}
.jump-line{
    margin:calc(8 * var(--px)) 0 calc(14 * var(--px));
}
.jump-line a{
    color:var(--blue);
    font-size:calc(16 * var(--px));
    word-break:break-all;
    display:block;
    margin-bottom:calc(10 * var(--px));
    text-decoration:none;
    line-height:1.6;
    white-space:pre-wrap;
}
.jump-line a:hover{
    text-decoration:underline;
}
.copy-btn{
    padding:calc(8 * var(--px)) calc(16 * var(--px));
    background:linear-gradient(90deg,var(--blue-d),var(--blue));
    border:none;
    border-radius:calc(6 * var(--px));
    color:#fff;
    font-weight:600;
    cursor:pointer;
    margin:0 calc(6 * var(--px));
    transition:all .2s;
    font-size:calc(14 * var(--px));
}
.copy-btn:hover{
    box-shadow:0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(64,176,255,.3);
}
/* wget/curl容器，两个按钮同行 */
.wget-curl-wrap .btn-group{
    display:flex;
    justify-content:center;
    gap:calc(12 * var(--px));
    margin-top:calc(10 * var(--px));
}
/* 原始链接模式下按钮组居中 */
.raw-item .btn-group{
    display:flex;
    justify-content:center;
    gap:calc(12 * var(--px));
    margin-top:calc(10 * var(--px));
}
/* 加载状态 */
.loading-spinner {
    display: inline-block;
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    border: max(2px, calc(2 * var(--px))) solid rgba(64, 176, 255, 0.3);
    border-radius: 50%;
    border-top-color: #40b0ff;
    animation: spin 0.6s linear infinite;
    margin-right: calc(8 * var(--px));
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.submit-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}
/* 结果面板固定最小高度，避免抖动 */
.jump-panel {
    min-height: calc(100 * var(--px));
    transition: all 0.3s ease;
}
/* 直接下载按钮 */
.download-btn{
    padding:calc(8 * var(--px)) calc(16 * var(--px));
    background:linear-gradient(90deg,#10b981,#34d399);
    border:none;
    border-radius:calc(6 * var(--px));
    color:#fff;
    font-weight:600;
    cursor:pointer;
    margin:0 calc(6 * var(--px));
    transition:all .2s;
    display:flex;
    align-items:center;
    gap:calc(6 * var(--px));
    font-size:calc(14 * var(--px));
}
.download-btn svg{
    width:calc(16 * var(--px));
    height:calc(16 * var(--px));
}
.download-btn:hover{
    box-shadow:0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(16,185,129,.3);
}
.download-btn.downloading{
    background:linear-gradient(90deg,#6b7280,#9ca3af);
    pointer-events:none;
}
/* 下载进度条 */
.download-progress{
    margin-top:calc(12 * var(--px));
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
}
.download-info{
    margin-bottom:calc(12 * var(--px));
}
.download-filename{
    color:var(--text);
    font-weight:600;
    font-size:calc(15 * var(--px));
    word-break:break-all;
}
.progress-bar-container{
    height:calc(10 * var(--px));
    background:var(--border);
    border-radius:calc(5 * var(--px));
    overflow:hidden;
    margin-bottom:calc(10 * var(--px));
}
.progress-bar{
    height:100%;
    background:linear-gradient(90deg,#10b981,#34d399);
    border-radius:calc(5 * var(--px));
    transition:width .3s ease;
    width:0%;
}
.progress-details{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:calc(8 * var(--px));
}
.progress-text{
    color:#10b981;
    font-weight:600;
    font-size:calc(14 * var(--px));
}
.progress-speed{
    color:var(--text2);
    font-size:calc(14 * var(--px));
}
.progress-size{
    color:var(--text2);
    font-size:calc(14 * var(--px));
}
/* 网速检测面板 */
.speedtest-panel {
    position: fixed;
    right: calc(24 * var(--px));
    bottom: calc(24 * var(--px));
    width: calc(340 * var(--px));
    background: var(--white);
    border: max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius: calc(14 * var(--px));
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.3s ease;
}

.speedtest-panel.hidden {
    transform: translateY(calc(20 * var(--px)));
    opacity: 0;
    pointer-events: none;
}

.speedtest-header {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--px));
    padding: calc(14 * var(--px)) calc(18 * var(--px));
    background: rgba(64, 176, 255, 0.08);
    border-bottom: max(1px, calc(1 * var(--px))) solid var(--border);
    font-weight: 700;
    font-size: calc(15 * var(--px));
    color: var(--text);
    cursor: move;
    user-select: none;
}

.speedtest-header svg{
    width:calc(20 * var(--px));
    height:calc(20 * var(--px));
}

.speedtest-header span {
    flex: 1;
}

.speedtest-close {
    background: none;
    border: none;
    color: var(--text3);
    font-size: calc(22 * var(--px));
    line-height: 1;
    cursor: pointer;
    padding: 0 calc(4 * var(--px));
    transition: color 0.2s;
}

.speedtest-close:hover {
    color: var(--red);
}

.speedtest-content {
    padding: calc(18 * var(--px));
}

/* 速度仪表盘 */
.speed-gauge {
    position: relative;
    width: 100%;
    height: calc(140 * var(--px));
    margin-bottom: calc(18 * var(--px));
}

.gauge-svg {
    width: 100%;
    height: 100%;
}

.gauge-value {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#gaugeNumber {
    font-size: calc(36 * var(--px));
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
    display: block;
}

.gauge-unit {
    font-size: calc(13 * var(--px));
    color: var(--text2);
    font-weight: 600;
}

.gauge-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(13 * var(--px));
    color: var(--text2);
    font-weight: 600;
}

/* 三项指标卡片 */
.speed-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(10 * var(--px));
    margin-bottom: calc(14 * var(--px));
}

.metric-card {
    background: var(--bg);
    border: max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius: calc(8 * var(--px));
    padding: calc(10 * var(--px)) calc(8 * var(--px));
    text-align: center;
    transition: all 0.2s;
}

.metric-card:hover {
    border-color: var(--blue);
}

.metric-icon {
    width: calc(36 * var(--px));
    height: calc(36 * var(--px));
    border-radius: calc(8 * var(--px));
    margin: 0 auto calc(6 * var(--px));
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon svg{
    width:calc(18 * var(--px));
    height:calc(18 * var(--px));
}

.download-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.upload-icon {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.ping-icon {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.metric-label {
    font-size: calc(11 * var(--px));
    color: var(--text3);
    margin-bottom: calc(2 * var(--px));
    font-weight: 500;
}

.metric-value {
    font-size: calc(16 * var(--px));
    font-weight: 700;
    color: var(--text);
}

.metric-unit {
    font-size: calc(10 * var(--px));
    color: var(--text3);
    font-weight: 500;
    margin-left: calc(2 * var(--px));
}

/* 抖动和丢包 */
.speed-extra {
    display: flex;
    justify-content: space-between;
    padding: 0 calc(4 * var(--px));
    margin-bottom: calc(16 * var(--px));
}

.extra-item {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--px));
}

.extra-label {
    font-size: calc(11 * var(--px));
    color: var(--text3);
    font-weight: 500;
}

.extra-value {
    font-size: calc(13 * var(--px));
    font-weight: 600;
    color: var(--text);
}

/* 检测按钮 */
.speedtest-btn {
    width: 100%;
    padding: calc(12 * var(--px));
    background: linear-gradient(90deg, var(--blue-d), var(--blue));
    border: none;
    border-radius: calc(8 * var(--px));
    color: #fff;
    font-size: calc(14 * var(--px));
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--px));
    transition: all 0.2s;
    box-shadow: 0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(64, 176, 255, 0.25);
}

.speedtest-btn svg{
    width:calc(18 * var(--px));
    height:calc(18 * var(--px));
}

.speedtest-btn:hover:not(:disabled) {
    transform: translateY(calc(-1 * var(--px)));
    box-shadow: 0 calc(6 * var(--px)) calc(18 * var(--px)) rgba(64, 176, 255, 0.35);
}

.speedtest-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.speedtest-btn.testing {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}

/* 历史最佳 */
.speed-best {
    margin-top: calc(14 * var(--px));
    padding: calc(10 * var(--px)) calc(12 * var(--px));
    background: var(--bg);
    border: max(1px, calc(1 * var(--px))) solid var(--border);
    border-radius: calc(8 * var(--px));
}

.best-title {
    font-size: calc(11 * var(--px));
    color: var(--text3);
    font-weight: 600;
    margin-bottom: calc(4 * var(--px));
    text-align: center;
}

.best-values {
    display: flex;
    justify-content: space-around;
    font-size: calc(12 * var(--px));
    color: var(--text);
    font-weight: 600;
}

.best-values span {
    color: var(--text2);
}

.best-values span span {
    color: var(--blue);
    font-weight: 700;
}

/* 悬浮按钮 */
.speedtest-fab {
    position: fixed;
    right: calc(24 * var(--px));
    bottom: calc(24 * var(--px));
    width: calc(56 * var(--px));
    height: calc(56 * var(--px));
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-d), var(--blue));
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(64, 176, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s ease;
}

.speedtest-fab svg{
    width:calc(24 * var(--px));
    height:calc(24 * var(--px));
}

.speedtest-fab:hover {
    transform: scale(1.08) translateY(calc(-2 * var(--px)));
    box-shadow: 0 calc(10 * var(--px)) calc(28 * var(--px)) rgba(64, 176, 255, 0.5);
}