*{margin:0;padding:0;box-sizing:border-box}
body{background:#0c0c0c;color:#00ff41;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:#00ff41;font-size:24px;letter-spacing:4px;border-top:3px solid #00ff41;padding-top:16px}
.header .sub{color:#00ff4150;font-size:11px;margin-top:4px}
.section{margin-top:24px}
.section-label{color:#555;font-size:10px;text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}
.input-box{background:#111;border:none;border-left:3px solid #00ff41;color:#00ff41;font-family:'Courier New',monospace;font-size:13px;width:100%;padding:12px;resize:vertical;min-height:70px;outline:none}
.input-box::placeholder{color:#00ff4160}
.input-box:focus{border-left-color:#00ff41;background:#0a0a0a}

/* controls row */
.controls-row{display:flex;gap:24px;margin-top:10px;align-items:center;flex-wrap:wrap}
.control-group{display:flex;align-items:center;gap:8px}
.control-group label{color:#555;font-size:11px;white-space:nowrap}
.mode-select{background:#111;border:1px solid #333;color:#ff6600;font-family:'Courier New',monospace;font-size:12px;padding:4px 8px;outline:none}
.mode-select:focus{border-color:#ff6600}

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

/* 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:#111;border:1px solid #333;border-left:3px solid #00ccff;padding:16px 20px;max-width:460px;width:90vw;font-size:12px;color:#ccc;line-height:1.6}
.hint-modal-title{color:#00ccff;font-size:13px;margin-bottom:8px;font-weight:bold}
.hint-modal-close{float:right;background:none;border:none;color:#555;font-family:'Courier New',monospace;font-size:14px;cursor:pointer;padding:0}
.hint-modal-close:hover{color:#ff0000}

/* hwid checkbox */
#hwid-enabled{accent-color:#00ccff;vertical-align:middle;margin-right:4px;cursor:pointer}

/* ua combobox */
.ua-combo{position:relative;display:flex}
.ua-input{background:#111;border:1px solid #333;border-right:none;color:#00ccff;font-family:'Courier New',monospace;font-size:12px;padding:4px 8px;outline:none;width:180px}
.ua-input:focus{border-color:#00ccff;background:#0a0a0a}
.ua-input::placeholder{color:#00ccff30}
.ua-toggle{background:#111;border:1px solid #333;color:#555;font-family:'Courier New',monospace;font-size:10px;padding:4px 6px;cursor:pointer;line-height:1}
.ua-toggle:hover{color:#00ccff;border-color:#00ccff}
.ua-combo.open .ua-toggle{color:#00ccff;border-color:#00ccff}
.ua-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:#111;border:1px solid #333;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:#888;cursor:pointer;display:flex;align-items:center;gap:6px}
.ua-option:hover{background:#1a1a1a;color:#00ccff}
.ua-sep{border-top:1px solid #222;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:#888;border-color:#555}
.ua-tag.current{color:#00ff41;border-color:#00ff41}
.ua-tag.future{color:#ff6600;border-color:#ff6600}

/* 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:#00ff41}
.btn-encrypt{color:#ff6600}
.btn-clear{color:#555}

/* output */
.output-box{background:#111;border-left:3px solid #ff6600;color:#ff6600;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:#00ff41;color:#00ff41}
.copy-btn{background:none;border:1px solid #333;color:#555;font-family:'Courier New',monospace;font-size:10px;padding:2px 8px;cursor:pointer;float:right;margin-left:8px}
.copy-btn:hover{color:#00ff41;border-color:#00ff41}
.copy-btn.copied{color:#00ff41;border-color:#00ff41}

/* dividers */
.divider{border-top:1px solid #1a1a1a;margin:20px 0}

/* headers section */
.headers-grid{display:grid;grid-template-columns:auto 1fr;gap:0;font-size:12px;background:#111;border-left:3px solid #00ccff;padding:8px 12px}
.hdr-key{color:#555;padding:3px 12px 3px 0;white-space:nowrap}
.hdr-val{color:#00ccff;padding:3px 0;word-break:break-all}
.hdr-val.announce{color:#888;white-space:pre-line}

/* routing section */
.routing-box{background:#111;border-left:3px solid #ff00ff;padding:12px;font-size:12px}
.rt-name{color:#ff00ff;font-size:14px;font-weight:bold;margin-bottom:10px}
.rt-group{margin-bottom:10px}
.rt-group-label{color:#555;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;padding-bottom:2px;border-bottom:1px solid #1a1a1a}
.rt-row{display:flex;padding:2px 0}
.rt-row::before{content:'|';color:#333;margin-right:8px}
.rt-key{color:#555;min-width:130px}
.rt-val{color:#ff00ff;word-break:break-all}
.rt-val.geo{color:#00ff41}
.rt-val.dns{color:#00ccff}
.rt-rules{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0 4px 16px}
.rt-rule{background:#1a1a1a;border:1px solid #333;color:#888;font-size:11px;padding:2px 6px}
.rt-rule.direct{border-color:#00ff4140;color:#00ff41}
.rt-rule.proxy{border-color:#ff660040;color:#ff6600}
.rt-rule.block{border-color:#ff000040;color:#ff0000}

/* servers */
.server-count{color:#555;font-size:11px;margin-bottom:8px}
.server-row{border-bottom:1px solid #1a1a1a;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:#00ff41}
.server-country{color:#00ff41;min-width:140px}
.server-addr{color:#888;flex:1}
.server-security{color:#ff6600;min-width:80px;text-align:right}
.server-toggle{color:#555;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:#333;margin-right:8px}
.detail-key{color:#555;min-width:120px}
.detail-value{color:#00ff41;word-break:break-all}
.server-buttons{display:flex;gap:12px;padding:6px 0 0 0}
.server-buttons::before{content:'|';color:#333;margin-right:8px}
.server-btn{background:none;border:none;font-family:'Courier New',monospace;font-size:11px;cursor:pointer;padding:0;color:#555}
.server-btn:hover{color:#00ff41}
.server-btn.copied-vless{color:#00ff41}
.server-btn.copied-json{color:#ff6600}

/* loading & states */
.loading{color:#00ff41}
.loading::after{content:'\2588';animation:blink .7s step-end infinite}
@keyframes blink{50%{opacity:0}}
.error{color:#ff0000;border-left-color:#ff0000}
.footer{color:#333;font-size:10px;margin-top:24px;padding-top:8px;border-top:1px solid #1a1a1a}
.hidden{display:none}
/* fetch fallback */
.sub-loading{margin-top:12px}
.fallback-box{background:#111;border-left:3px solid #ff6600;padding:12px;margin-top:4px}
.fallback-error{color:#ff6600;font-size:12px;margin-bottom:8px}
.fallback-hint{color:#888;font-size:11px;margin-bottom:8px}
.fallback-curl{background:#0a0a0a;padding:8px;margin-bottom:10px;font-size:12px;color:#00ff41;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:#ff6600;color:#ff6600}
.fallback-textarea::placeholder{color:#ff660070}

/* support section */
.support-section{margin-top:24px}
.support-msg{background:#111;border:none;border-left:3px solid #00ccff;color:#00ccff;font-family:'Courier New',monospace;font-size:13px;width:100%;padding:8px;resize:vertical;outline:none;margin-bottom:8px}
.support-msg::placeholder{color:#00ccff60}
.support-msg:focus{background:#0a0a0a}
.support-contact{background:#111;border:none;border-left:3px solid #333;color:#888;font-family:'Courier New',monospace;font-size:12px;width:100%;padding:6px 8px;outline:none;margin-bottom:10px}
.support-contact::placeholder{color:#88888870}
.support-contact:focus{background:#0a0a0a;border-left-color:#00ccff}
.support-row{display:flex;align-items:center;gap:12px}
.support-status{font-size:12px}
.support-status.ok{color:#00ff41}
.support-status.err{color:#ff0000}