:root{--bg:#0d1117;--panel:#161b22;--line:#30363d;--fg:#e6edf3;--mut:#8b949e;--acc:#58a6ff;--ok:#3fb950;--bad:#f85149}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 Inter,system-ui,sans-serif}
header,main,footer{max-width:1100px;margin:0 auto;padding:0 20px}
header{padding-top:40px}
h1{margin:0 0 4px;font-size:26px}
h2{margin:36px 0 4px;font-size:20px}
h3{margin:0 0 10px;font-size:16px}
.sub{color:var(--mut);margin:0 0 16px}
.method-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.method-list li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:6px;padding:12px 14px;font-size:14px;color:var(--mut)}
.method-list li strong{color:var(--fg)}
.method-list li em{color:var(--acc);font-style:normal}
.promo{background:linear-gradient(90deg,#3fb95022,#1f6feb22);border:1px solid var(--ok);border-radius:8px;padding:11px 14px;margin:0 auto 16px;max-width:520px;font-size:14px;color:var(--fg)}
.promo s{color:var(--mut)}
.promo strong{color:var(--ok)}
.muted{color:var(--mut)}
.promo-tag{color:var(--ok);font-size:12px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0}
.tabs button{background:transparent;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:5px 12px;margin-right:6px;cursor:pointer}
.tabs button.active{color:var(--fg);border-color:var(--acc);background:#1f6feb22}
.updated{color:var(--mut);font-size:13px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th.num,td.num{text-align:right}
thead th{color:var(--mut);font-weight:600;font-size:13px}
tbody tr:hover{background:#ffffff08}
.empty{color:var(--mut);padding:24px 0}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px}
.pill.quic{color:var(--acc);border-color:var(--acc)}
.pill.https,.pill.http{color:#d29922;border-color:#d29922}
.pill.ok{color:var(--ok);border-color:var(--ok)}
.pill.bad{color:var(--bad);border-color:var(--bad)}
form{display:grid;gap:12px;max-width:520px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
label{display:grid;gap:4px;font-size:13px;color:var(--mut)}
input,select{background:#0d1117;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font:inherit;min-width:0;max-width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
button[type=submit],.btn{background:var(--acc);color:#0d1117;border:none;border-radius:6px;padding:9px 16px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
button[disabled]{opacity:.6;cursor:default}
.pay{margin:16px auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;max-width:640px}
.addr{word-break:break-all;font-size:13px}
.hint{color:var(--mut);font-size:12px}
.hidden{display:none}
fieldset{border:1px solid var(--line);border-radius:8px;padding:14px;margin:0}
legend{color:var(--mut);font-size:13px;padding:0 6px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.ep-row{display:flex;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ep-row .ep-url{flex:1;min-width:0}
.ep-row .ep-transport{flex:0 0 auto}
.ep-del,.ep-toggle{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:6px;padding:0 10px;cursor:pointer;min-width:34px}
.ep-row.struck{opacity:.5}
.ep-row.struck .ep-url{text-decoration:line-through}
.ep-row.struck .ep-toggle{color:var(--ok);border-color:var(--ok)}
.ep-url[readonly],.ep-transport[disabled]{background:#161b22;color:var(--mut);cursor:not-allowed;border-style:dashed}
.ep-row[data-netsim="1"] .ep-url{font-weight:600;color:var(--fg)}
.ghost{background:transparent;border:1px dashed var(--line);color:var(--acc);border-radius:6px;padding:6px 12px;cursor:pointer}
.tabs button[disabled]{opacity:.45;cursor:default}
.price{background:#0d1117;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:14px;display:grid;gap:4px}
.price .total{margin-top:6px;font-size:16px}
#token-in{flex:1;min-width:0}
details.order{border:1px solid var(--line);border-radius:8px;margin:8px 0;background:var(--panel)}
details.order summary{cursor:pointer;padding:10px 12px;list-style:none}
details.order summary::-webkit-details-marker{display:none}
details.order[open] summary{border-bottom:1px solid var(--line)}
.order-body{padding:8px 12px 12px;overflow-x:auto}
table.slot,table.verify{width:auto;min-width:300px;margin:6px 0}
.hbar{display:inline-block;height:10px;background:var(--acc);border-radius:2px;min-width:2px;vertical-align:middle}
.dist h4,.order-body h4{margin:14px 0 6px;font-size:13px;color:var(--mut);font-weight:600}
table.slot tr.sumrow td{border-top:2px solid var(--line);color:var(--fg);font-weight:600}
table.slot strong{color:var(--ok)}
.slot-wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.hist{min-width:240px;flex:1}
.hist .legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;font-size:12px;color:var(--mut)}
.hist .chip{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.hist-row{display:flex;align-items:center;gap:8px;margin:2px 0}
.hist-label{width:64px;text-align:right;font-size:12px;color:var(--mut);flex:0 0 auto}
.hist-bars{flex:1;min-width:120px}
.hist-bars .hbar{display:block;height:8px;border-radius:2px;margin:1px 0;min-width:2px}
.order-actions{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.del-btn{background:transparent;color:var(--bad);border:1px solid var(--bad);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer}
.del-btn:hover{background:var(--bad);color:#fff}
a{color:var(--acc)}
code{background:#ffffff10;padding:1px 5px;border-radius:4px}
footer{color:var(--mut);font-size:12px;border-top:1px solid var(--line);margin-top:48px;padding:18px 20px 40px}

/* Responsive: wide nowrap tables scroll within their card instead of overflowing
   the viewport; form rows reflow on narrow screens. */
#table,#queue,.order-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:560px){
  header,main{padding:0 14px}
  footer{padding:18px 14px 40px}
  h1{font-size:22px}
  form{padding:14px}
  th,td{padding:7px 8px}
  .ep-row{flex-wrap:wrap}
  .ep-row .ep-url{flex:1 1 100%}
  .ep-row .ep-transport{flex:1 1 auto}
  .slot-wrap{gap:14px}
}