*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--green);font-family:'Courier New',monospace;min-height:100vh;display:flex;justify-content:center;padding:40px 20px}
.container{max-width:760px;width:100%}
.header h1{color:var(--green);font-size:24px;letter-spacing:4px;border-top:3px solid var(--green);padding-top:16px}
.header .sub{color:var(--green-dim);font-size:11px;margin-top:4px}
.section{margin-top:24px}
.section-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}
.input-box{background:var(--panel);border:none;border-left:3px solid var(--green);color:var(--green);font-family:'Courier New',monospace;font-size:13px;width:100%;padding:12px;resize:vertical;min-height:70px;outline:none}
.input-box::placeholder{color:var(--green-ph)}
.input-box:focus{border-left-color:var(--green);background:var(--panel-2)}

/* controls row */
.controls-row{display:flex;gap:24px;margin-top:10px;align-items:center}
@media(max-width:600px){.controls-row{flex-wrap:wrap;gap:12px}}
.control-group{display:flex;align-items:center;gap:8px}
.control-group label{color:var(--muted);font-size:11px;white-space:nowrap}
.mode-select{background:var(--panel);border:1px solid var(--line);color:var(--orange);font-family:'Courier New',monospace;font-size:12px;padding:4px 8px;outline:none}
.mode-select:focus{border-color:var(--orange)}

/* hint icons */
.hint-icon{display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;font-size:10px;color:var(--muted);border:1px solid var(--muted);border-radius:50%;cursor:pointer;vertical-align:middle;margin-left:2px;font-style:normal;user-select:none}
.hint-icon:hover{color:var(--cyan);border-color:var(--cyan)}

/* hint modal */
.hint-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:2000}
.hint-modal{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--cyan);padding:16px 20px;max-width:460px;width:90vw;font-size:12px;color:var(--fg);line-height:1.6}
.hint-modal-title{color:var(--cyan);font-size:13px;margin-bottom:8px;font-weight:bold}
.hint-modal-close{float:right;background:none;border:none;color:var(--muted);font-family:'Courier New',monospace;font-size:14px;cursor:pointer;padding:0}
.hint-modal-close:hover{color:var(--red)}

/* hwid toggle */
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted);font-size:11px;white-space:nowrap}
.toggle-label input{display:none}
.toggle-switch{position:relative;width:32px;height:16px;background:var(--line);border-radius:8px;transition:background .2s}
.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--dim);border-radius:50%;transition:transform .2s,background .2s}
.toggle-label input:checked+.toggle-switch{background:var(--cyan-soft)}
.toggle-label input:checked+.toggle-switch::after{transform:translateX(16px);background:var(--cyan)}

/* ua combobox */
.ua-combo{position:relative;display:flex}
.ua-input{background:var(--panel);border:1px solid var(--line);border-right:none;color:var(--cyan);font-family:'Courier New',monospace;font-size:12px;padding:4px 8px;outline:none;width:180px}
.ua-input:focus{border-color:var(--cyan);background:var(--panel-2)}
.ua-input::placeholder{color:var(--cyan-soft)}
.ua-toggle{background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:'Courier New',monospace;font-size:10px;padding:4px 6px;cursor:pointer;line-height:1}
.ua-toggle:hover{color:var(--cyan);border-color:var(--cyan)}
.ua-combo.open .ua-toggle{color:var(--cyan);border-color:var(--cyan)}
.ua-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-top:none;z-index:100;max-height:200px;overflow-y:auto}
.ua-combo.open .ua-dropdown{display:block}
.ua-option{padding:6px 8px;font-size:11px;color:var(--fg-3);cursor:pointer;display:flex;align-items:center;gap:6px}
.ua-option:hover{background:var(--panel-3);color:var(--cyan)}
.ua-sep{border-top:1px solid var(--line2);margin:2px 0}
.ua-tag{font-size:9px;padding:1px 4px;border:1px solid;font-weight:bold;letter-spacing:0.5px}
.ua-tag.old{color:var(--fg-3);border-color:var(--muted)}
.ua-tag.current{color:var(--green);border-color:var(--green)}
.ua-tag.future{color:var(--orange);border-color:var(--orange)}

/* buttons */
.buttons{display:flex;gap:16px;margin-top:14px}
.btn{background:none;border:none;font-family:'Courier New',monospace;font-size:14px;cursor:pointer;padding:0}
.btn:hover{text-decoration:underline}
.btn-decrypt{color:var(--green)}
.btn-encrypt{color:var(--orange)}
.btn-clear{color:var(--muted)}

/* output */
.output-box{background:var(--panel);border-left:3px solid var(--orange);color:var(--orange);font-family:'Courier New',monospace;font-size:13px;width:100%;padding:12px;word-break:break-all;min-height:20px;position:relative}
.output-encrypted{border-left-color:var(--green);color:var(--green)}
.copy-btn{background:none;border:1px solid var(--line);color:var(--muted);font-family:'Courier New',monospace;font-size:10px;padding:2px 8px;cursor:pointer;float:right;margin-left:8px}
.copy-btn:hover{color:var(--green);border-color:var(--green)}
.copy-btn.copied{color:var(--green);border-color:var(--green)}

/* dividers */
.divider{border-top:1px solid var(--border-soft);margin:20px 0}

/* headers section */
.headers-grid{display:grid;grid-template-columns:auto 1fr;gap:0;font-size:12px;background:var(--panel);border-left:3px solid var(--cyan);padding:8px 12px}
.hdr-key{color:var(--muted);padding:3px 12px 3px 0;white-space:nowrap}
.hdr-val{color:var(--cyan);padding:3px 0;word-break:break-all}
.hdr-val.announce{color:var(--fg-3);white-space:pre-line}

/* body (decoded) section */
.body-details{margin-top:20px;font-family:'Courier New',monospace}
.body-details[open]{}
.body-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:2px;padding:4px 0;user-select:none}
.body-summary::-webkit-details-marker{display:none}
.body-summary:hover{color:var(--amber)}
.body-chevron{display:inline-block;font-size:10px;color:var(--muted);transition:transform .15s}
.body-details[open] .body-chevron{transform:rotate(90deg);color:var(--amber)}
.body-title{color:inherit}
.body-kind{margin-left:auto;color:var(--amber-dim);font-size:10px;letter-spacing:1px;text-transform:none}
.body-box{background:var(--panel);border-left:3px solid var(--amber);padding:10px 12px;margin-top:6px;position:relative}
.body-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:6px}
.body-actions .copy-btn{float:none;margin:0}
.body-pre{color:var(--fg);font-family:'Courier New',monospace;font-size:11px;line-height:1.55;white-space:pre-wrap;word-break:break-all;max-height:340px;overflow-y:auto;margin:0;padding-right:4px}
.body-pre::-webkit-scrollbar{width:6px}
.body-pre::-webkit-scrollbar-track{background:var(--panel-2)}
.body-pre::-webkit-scrollbar-thumb{background:var(--line)}
.body-pre::-webkit-scrollbar-thumb:hover{background:var(--amber-dim)}
.body-inner-json{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.body-inner-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}
.body-pre-json{color:var(--json-fg);max-height:260px}

/* routing section */
.routing-box{background:var(--panel);border-left:3px solid var(--magenta);padding:12px;font-size:12px}
.rt-name{color:var(--magenta);font-size:14px;font-weight:bold;margin-bottom:10px}
.rt-group{margin-bottom:10px}
.rt-group-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;padding-bottom:2px;border-bottom:1px solid var(--border-soft)}
.rt-row{display:flex;padding:2px 0}
.rt-row::before{content:'|';color:var(--line);margin-right:8px}
.rt-key{color:var(--muted);min-width:130px}
.rt-val{color:var(--magenta);word-break:break-all}
.rt-val.geo{color:var(--green)}
.rt-val.dns{color:var(--cyan)}
.rt-group-collapsible{padding:0}
.rt-group-collapsible>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;padding-bottom:2px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.rt-group-collapsible>summary::-webkit-details-marker{display:none}
.rt-group-collapsible>summary::before{content:'\25B6';color:var(--muted);font-size:9px;transition:transform .15s;display:inline-block;flex-shrink:0}
.rt-group-collapsible[open]>summary::before{transform:rotate(90deg);color:var(--magenta)}
.rt-group-collapsible>summary:hover .rt-group-label{color:var(--magenta)}
.rt-group-collapsible[open]>summary{border-bottom-color:var(--magenta-soft)}
.rt-group-collapsible[open]>summary .rt-group-label{color:var(--magenta)}
.rt-group-summary .rt-group-label{border-bottom:none;padding-bottom:0;margin-bottom:0;flex-shrink:0}
.rt-rules-peek{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.rt-peek-more{color:var(--dim);font-size:10px}
.rt-group-collapsible[open] .rt-rules-peek{display:none}
.rt-count{color:var(--muted);font-size:10px}
.rt-rules{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0 4px 16px}
.rt-rule{background:var(--panel-3);border:1px solid var(--line);color:var(--fg-3);font-size:11px;padding:2px 6px}
.rt-rule.direct{border-color:var(--green-soft);color:var(--green)}
.rt-rule.proxy{border-color:var(--orange-soft);color:var(--orange)}
.rt-rule.block{border-color:var(--red-soft);color:var(--red)}

/* servers */
.server-count{color:var(--muted);font-size:11px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.copy-all-btn{background:none;border:1px solid var(--line);color:var(--fg-3);font-family:'Courier New',monospace;font-size:11px;padding:3px 10px;cursor:pointer;white-space:nowrap}
.copy-all-btn:hover{color:var(--green);border-color:var(--green)}
.copy-all-btn.copied{color:var(--green);border-color:var(--green)}
.server-row{border-bottom:1px solid var(--border-soft);cursor:pointer;user-select:none}
.server-header{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12px}
.server-header:hover{color:var(--green)}
.server-country{color:var(--green);min-width:140px}
.server-addr{color:var(--fg-3);flex:1}
.server-security{color:var(--orange);min-width:80px;text-align:right}
.server-toggle{color:var(--muted);margin-left:12px}
.server-details{display:none;padding:8px 0 12px 0;font-size:12px}
.server-details.open{display:block}
.detail-row{display:flex;padding:2px 0}
.detail-row::before{content:'|';color:var(--line);margin-right:8px}
.detail-key{color:var(--muted);min-width:120px}
.detail-value{color:var(--green);word-break:break-all}
.server-buttons{display:flex;gap:12px;padding:6px 0 0 0}
.server-buttons::before{content:'|';color:var(--line);margin-right:8px}
.server-btn{background:none;border:none;font-family:'Courier New',monospace;font-size:11px;cursor:pointer;padding:0;color:var(--muted)}
.server-btn:hover{color:var(--green)}
.server-btn.copied-vless{color:var(--green)}
.server-btn.copied-json{color:var(--orange)}

/* loading & states */
.loading{color:var(--green)}
.loading::after{content:'\2588';animation:blink .7s step-end infinite}
@keyframes blink{50%{opacity:0}}
.error{color:var(--red);border-left-color:var(--red)}
.footer{color:var(--line);font-size:10px;margin-top:24px;padding-top:8px;border-top:1px solid var(--border-soft)}
.hidden{display:none}
/* fetch fallback */
.sub-loading{margin-top:12px}
.fallback-box{background:var(--panel);border-left:3px solid var(--orange);padding:12px;margin-top:4px}
.fallback-error{color:var(--orange);font-size:12px;margin-bottom:8px}
.fallback-hint{color:var(--fg-3);font-size:11px;margin-bottom:8px}
.fallback-curl{background:var(--panel-2);padding:8px;margin-bottom:10px;font-size:12px;color:var(--green);display:flex;align-items:center;justify-content:space-between;gap:8px;overflow-x:auto}
.fallback-curl code{white-space:nowrap}
.fallback-textarea{margin-bottom:10px;border-left-color:var(--orange);color:var(--orange)}
.fallback-textarea::placeholder{color:var(--orange-dim)}

/* support section */
.support-section{margin-top:24px}
.support-msg{background:var(--panel);border:none;border-left:3px solid var(--cyan);color:var(--cyan);font-family:'Courier New',monospace;font-size:13px;width:100%;padding:8px;resize:vertical;outline:none;margin-bottom:8px}
.support-msg::placeholder{color:var(--cyan-dim)}
.support-msg:focus{background:var(--panel-2)}
.support-contact{background:var(--panel);border:none;border-left:3px solid var(--line);color:var(--fg-3);font-family:'Courier New',monospace;font-size:12px;width:100%;padding:6px 8px;outline:none;margin-bottom:10px}
.support-contact::placeholder{color:var(--muted)}
.support-contact:focus{background:var(--panel-2);border-left-color:var(--cyan)}
.support-row{display:flex;align-items:center;gap:12px}
.support-status{font-size:12px}
.support-status.ok{color:var(--green)}
.support-status.err{color:var(--red)}
@keyframes shake{0%,100%{border-left-color:var(--green)}20%,60%{border-left-color:var(--red);background:var(--red-bg)}40%,80%{border-left-color:var(--red);background:var(--panel)}}
.shake{animation:shake .6s ease}
@keyframes shake-blue{0%,100%{border-left-color:var(--cyan)}20%,60%{border-left-color:var(--red);background:var(--red-bg)}40%,80%{border-left-color:var(--red);background:var(--panel)}}
.shake-blue{animation:shake-blue .6s ease}
/* Device limit warning */
.device-limit-warning{background:var(--warn-bg);border:1px solid var(--warn-soft);border-left:3px solid var(--warn);border-radius:4px;padding:16px;margin-top:8px;font-family:'Courier New',monospace;font-size:12px;color:var(--fg);line-height:1.7}
.dlw-title{color:var(--warn);font-size:14px;font-weight:700;margin-bottom:10px}
.dlw-text{margin-bottom:12px}
.dlw-steps{margin-bottom:12px}
.dlw-steps b{color:var(--warn)}
.dlw-steps ol{margin:6px 0 0 20px;color:var(--fg)}
.dlw-steps li{margin-bottom:4px}
.dlw-safe{color:var(--green);margin-bottom:12px}
.dlw-safe b{color:var(--green)}
.dlw-provider-msg{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.dlw-provider-msg b{color:var(--fg-3)}
.dlw-provider-msg pre{color:var(--warn);margin-top:6px;white-space:pre-wrap;font-size:11px}
/* Duplicate server highlighting */
.dupe-tag{color:var(--amber);font-size:10px;margin-left:6px;cursor:pointer;transition:color .15s}
.dupe-tag:hover{color:var(--amber-hi)}
.dupe-tag.dupe-active{color:var(--on-accent);background:var(--amber);padding:1px 4px;border-radius:3px}
.server-row.highlight-dupe{background:var(--amber-tint);border-left:2px solid var(--amber)}
.seo-block{margin-top:24px;color:var(--line);font-size:12px;line-height:1.7}
.seo-block h2{color:var(--muted2);font-size:13px;margin:16px 0 6px;font-weight:600}
.seo-block p{color:var(--line)}
.seo-block code{color:var(--muted);background:var(--panel);padding:1px 4px;border-radius:3px;font-size:11px}

/* top-nav (shared across /, /proxy, /api) */
.topnav{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-soft);margin-bottom:6px;font-size:12px;letter-spacing:1px;flex-wrap:wrap}
.topnav a{color:var(--muted);text-decoration:none;padding:2px 4px}
.topnav a:hover{color:var(--cyan)}
.topnav a.active{color:var(--green)}
.topnav .sep{color:var(--line2)}

/* proxy page */
.px-section{margin-top:18px}
.px-grid{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;align-items:center;margin-top:10px}
@media(max-width:600px){.px-grid{grid-template-columns:1fr}.px-grid label{margin-top:6px}}
.px-grid label{color:var(--muted);font-size:11px;white-space:nowrap}
.px-input{background:var(--panel);border:1px solid var(--line);color:var(--cyan);font-family:'Courier New',monospace;font-size:12px;padding:5px 8px;outline:none;width:100%}
.px-input:focus{border-color:var(--cyan);background:var(--panel-2)}
.px-input::placeholder{color:var(--cyan-soft)}
.px-radio-group{display:flex;gap:14px}
.px-radio-group label{cursor:pointer;color:var(--fg-3);font-size:12px;display:flex;align-items:center;gap:5px}
.px-radio-group input[type=radio]{accent-color:var(--green)}
.px-radio-group input[type=radio]:checked+span{color:var(--green)}
.px-result-box{background:var(--panel);border-left:3px solid var(--orange);color:var(--orange);font-family:'Courier New',monospace;font-size:12px;padding:10px 12px;margin-top:8px;word-break:break-all;line-height:1.55;white-space:pre-wrap}
.px-result-actions{display:flex;gap:14px;margin-top:10px}
.px-doc{margin-top:24px;color:var(--fg-2);font-size:12px;line-height:1.7}
.px-doc h3{color:var(--green);font-size:13px;margin:16px 0 6px;letter-spacing:1px}
.px-doc p{margin-bottom:8px;color:var(--fg-2)}
.px-doc code{background:var(--panel);color:var(--green);padding:1px 5px;font-size:11px}
.px-doc ul{list-style:none;padding-left:0;margin:6px 0 10px}
.px-doc ul li{padding:3px 0;color:var(--fg-2);font-size:12px;border-bottom:1px solid var(--border-soft)}
.px-doc ul li:last-child{border-bottom:none}