:root{--bg:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--surface3:#222;--border:#242424;--border2:#2e2e2e;--accent:#3b82f6;--accent2:#6366f1;--online:#22c55e;--offline:#ef4444;--warn:#f59e0b;--text:#e8e8e8;--text2:#a0a0a0;--text3:#555;--r:10px;--r2:14px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',system-ui,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;overflow-x:hidden}
.container{max-width:620px;margin:0 auto;padding:0 16px 80px}

.site-header{text-align:center;padding:60px 0 36px;animation:slide-down .5s ease both}
.logo{display:inline-flex;align-items:center;gap:12px;font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:10px}
.logo svg{transition:transform .3s ease}
.logo:hover svg{transform:scale(1.08)}
.tagline{color:var(--text2);font-size:14px}

.layout{}

.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:4px;margin-bottom:24px;animation:slide-down .5s .1s ease both}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border-radius:var(--r);background:none;border:none;color:var(--text2);font-size:14px;font-weight:500;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s;font-family:inherit}
.tab:hover:not(:disabled){color:var(--text)}
.tab.active{background:var(--surface3);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tab-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;background:rgba(99,102,241,.15);color:#a5b4fc;letter-spacing:.3px;text-transform:uppercase}

.tab-content{animation:fade-up .25s ease both}
.tab-content.hidden{display:none}

.proxy-list{display:flex;flex-direction:column;gap:12px}
.proxy-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:20px;transition:border-color .2s,transform .2s,box-shadow .2s;animation:fade-up .3s ease both}
.proxy-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3)}

.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-title-row{display:flex;align-items:center;gap:8px;min-width:0}
.card-title{font-size:16px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.card-badge.main{background:rgba(34,197,94,.14);color:#4ade80}
.card-badge.warn{background:rgba(245,158,11,.14);color:#fbbf24}
.card-status-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}

.proxy-status{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid transparent;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.proxy-status.checking{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--warn)}
.proxy-status.online{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.2);color:var(--online)}
.proxy-status.offline{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.2);color:var(--offline)}

.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s}
.checking .dot{background:var(--warn);animation:blink 1.2s ease-in-out infinite}
.online .dot{background:var(--online);animation:blink 2.8s ease-in-out infinite}
.offline .dot{background:var(--offline)}

.refresh-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:none;border:1px solid var(--border);color:var(--text3);cursor:pointer;transition:border-color .15s,color .15s,background .15s;flex-shrink:0}
.refresh-btn:hover{border-color:var(--border2);color:var(--text2);background:var(--surface2)}
.refresh-btn svg{display:block}
.refresh-btn.spinning svg{animation:spin-infinite .7s linear infinite}

.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.meta-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 9px;transition:border-color .15s,color .15s,background .15s}
.proxy-card:hover .meta-pill{border-color:var(--border2)}
.ping-pill{font-variant-numeric:tabular-nums}
.ping-pill .ping-val{min-width:8px}
.ping-pill.checking{color:var(--text3)}
.ping-pill.online{color:var(--online);background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.22)}
.ping-pill.mid{color:var(--warn);background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.22)}
.ping-pill.slow{color:var(--offline);background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}
.ping-pill.offline{color:var(--text3);background:var(--surface2);border-color:var(--border)}

.proxy-link-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:16px;transition:border-color .15s}
.proxy-card:hover .proxy-link-wrap{border-color:var(--border2)}
.proxy-link-box{font-family:'Courier New','Consolas',monospace;font-size:12px;color:var(--text2);word-break:break-all;overflow-wrap:anywhere;white-space:normal;line-height:1.6;-webkit-user-select:all;user-select:all}

.card-actions{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:148px;height:38px;padding:0 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;font-family:inherit;text-decoration:none;transition:background .15s,box-shadow .15s,border-color .15s,color .15s,transform .1s;white-space:nowrap;line-height:1}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 2px 12px rgba(59,130,246,.25)}
.btn-primary:hover{box-shadow:0 2px 20px rgba(59,130,246,.45);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.96) translateY(0)}
.btn-outline{background:var(--surface2);color:var(--text2);border:1px solid var(--border);min-width:auto}
.btn-outline:hover{color:var(--text);border-color:var(--border2);transform:translateY(-1px)}
.btn-outline:active{transform:scale(.96) translateY(0)}

.news-section{margin-top:40px;animation:fade-up .4s .2s ease both}
.section-title{font-size:16px;font-weight:600;margin-bottom:14px;letter-spacing:-.2px}
.news-list{display:flex;flex-direction:column;gap:8px}
.news-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:14px 18px;transition:transform .2s,border-color .2s;animation:slide-right .3s ease both}
.news-card:hover{transform:translateX(3px);border-color:var(--border2)}
.news-date{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.news-title{font-weight:600;margin-bottom:4px}
.news-body{font-size:13px;color:var(--text2);line-height:1.6}

.site-footer{text-align:center;color:var(--text3);font-size:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);animation:fade-up .4s .3s ease both}

.empty-state{text-align:center;color:var(--text3);padding:40px;border:1px dashed var(--border);border-radius:var(--r2)}
.ping-note{margin-top:16px;font-size:12px;color:var(--text3);text-align:center;line-height:1.5}

.modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);z-index:100;align-items:center;justify-content:center;padding:20px;transition:background .25s,backdrop-filter .25s}
.modal-overlay.open{display:flex;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);padding:24px;width:100%;max-width:340px;text-align:center;transform:scale(.92) translateY(16px);opacity:0;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.modal-overlay.open .modal{transform:scale(1) translateY(0);opacity:1}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text3);cursor:pointer;display:flex;padding:2px;transition:color .15s,transform .15s}
.modal-close:hover{color:var(--text);transform:rotate(90deg)}
.qr-wrap{background:#fff;border-radius:12px;padding:12px;width:100%}
.qr-holder{width:100%;line-height:0}
.qr-holder svg{width:100%;height:auto;display:block;border-radius:6px}
.qr-hint{margin-top:14px;font-size:12px;color:#c8c8c8;line-height:1.6}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes spin-infinite{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slide-down{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slide-right{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

@media(min-width:900px){
    .container{max-width:1080px}
    .layout{display:grid;grid-template-columns:288px minmax(0,1fr);align-items:start}
    .news-section{grid-column:1;grid-row:1;margin-top:0;padding-right:32px;position:-webkit-sticky;position:sticky;top:24px}
    .main-col{grid-column:2;grid-row:1;min-width:0;border-left:1px solid var(--border);padding-left:32px}
}

@media(max-width:480px){.site-header{padding:40px 0 28px}.card-actions{flex-direction:column}.card-actions .btn{width:100%}}