* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: #000;
color: #c9d1d9;
font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hidden { display: none !important; }
.gate {
padding: 40px 16px;
text-align: center;
color: #8b949e;
}
header {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center; justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid #1e1e1e;
background: #0e0e0e;
position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; letter-spacing: 0.5px; color: #58a6ff; }
.brand span { color: #c9d1d9; }
.conn { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
font-size: 11px; padding: 2px 8px;
border: 1px solid #1e1e1e; border-radius: 10px;
background: #0e0e0e; color: #8b949e;
}
.chip.ok { color: #3fb950; border-color: #274e33; }
.chip.bad { color: #f85149; border-color: #5b2320; }
.chip.warn { color: #d2991d; border-color: #574417; }
.tabs {
display: flex;
border-bottom: 1px solid #1e1e1e;
background: #0e0e0e;
position: sticky; top: 42px; z-index: 9;
}
.tab {
flex: 1; padding: 10px 4px;
background: none; border: none;
color: #8b949e; font-size: 13px; font-weight: 600;
border-bottom: 2px solid transparent;
cursor: pointer;
}
.tab.active { color: #58a6ff; border-bottom-color: #58a6ff; }
.tabpane { padding: 10px; }
.panel {
background: #0e0e0e;
border: 1px solid #1e1e1e;
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
}
.ptitle {
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.8px;
color: #58a6ff; margin-bottom: 10px;
}
.row3 { display: flex; gap: 8px; margin-bottom: 8px; }
.kv {
flex: 1; background: #000;
border: 1px solid #1e1e1e; border-radius: 6px;
padding: 6px 8px; min-width: 0;
}
.kv span { display: block; font-size: 10px; color: #8b949e; text-transform: uppercase; }
.kv b { font-size: 14px; overflow-wrap: break-word; }
.btnrow { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.btn {
flex: 1; padding: 12px 8px;
border: none; border-radius: 6px;
font-size: 14px; font-weight: 700;
cursor: pointer; color: #fff;
min-width: 120px;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.green { background: #238636; }
.btn.red { background: #b62324; }
.btn.orange { background: #9e6a03; }
.btn.blue { background: #1f6feb; }
.btn.gray { background: #30363d; }
.statline { font-size: 13px; color: #8b949e; margin-top: 4px; }
.statline b { color: #c9d1d9; }
.banner {
margin-top: 8px; padding: 8px 10px;
border: 1px solid #574417; border-radius: 6px;
background: #1d1704; color: #d2991d; font-size: 12px;
}
.tblwrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -12px;
padding: 0 12px;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th, .tbl td {
padding: 5px 6px; text-align: left;
border-bottom: 1px solid #1e1e1e;
white-space: nowrap;
}
.tbl th { color: #8b949e; font-weight: 600; font-size: 10px; text-transform: uppercase; }
.green { color: #3fb950; }
.red { color: #f85149; }
.orange { color: #d2991d; }
.muted { color: #8b949e; font-size: 12px; }
.small { font-size: 11px; margin-top: 6px; }
.fld { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fld span { color: #8b949e; font-size: 13px; flex: 1; }
.fld input, .fld select {
width: 130px; padding: 7px 8px;
background: #000; color: #c9d1d9;
border: 1px solid #1e1e1e; border-radius: 6px;
font-size: 14px;
}
.fld select { width: 220px; }
.fld input:focus, .fld select:focus { outline: none; border-color: #58a6ff; }
.fld input:disabled { opacity: 0.4; }
.chk {
display: flex; align-items: center; gap: 8px;
margin: 10px 0 6px; font-size: 13px;
cursor: pointer;
}
.chk input { width: 18px; height: 18px; accent-color: #58a6ff; }
.chk input:disabled + span { opacity: 0.4; }
.sub { margin-left: 26px; }
.tophint { margin: -6px 0 8px; }
.navwrap {
margin: 8px 10px 0;
max-height: 38vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #1e1e1e;
border-radius: 8px;
background: #0e0e0e;
}
.acct-group { border-bottom: 1px solid #1e1e1e; }
.acct-group:last-of-type { border-bottom: none; }
.acct-head {
display: flex; align-items: center; gap: 8px;
width: 100%; text-align: left;
background: none; border: none; cursor: pointer;
padding: 10px 12px 8px;
color: #c9d1d9; font-size: 14px; font-weight: 700;
}
.acct-head.active { color: #58a6ff; }
.acct-head .cnt {
margin-left: auto; flex: 0 0 auto;
color: #8b949e; font-weight: 400; font-size: 11px;
}
.acct-head .cnt.green { color: #3fb950; }
.coins {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 0 12px 10px 26px;
}
.addrow { padding: 10px 12px; }
.acctlist { display: flex; flex-direction: column; gap: 6px; }
.acct-row {
display: flex; align-items: center; gap: 8px;
width: 100%; text-align: left;
background: #161b22; color: #c9d1d9;
border: 1px solid #30363d; border-radius: 8px;
padding: 10px 12px; font-size: 14px; cursor: pointer;
}
.acct-row.active { border-color: #58a6ff; background: #0d1b2c; }
.acct-row .nm { font-weight: 700; flex: 0 0 auto; }
.acct-row.active .nm { color: #58a6ff; }
.acct-row .cnt {
margin-left: auto; min-width: 0;
color: #8b949e; font-size: 11px; text-align: right;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.botchip {
display: inline-flex; align-items: center; gap: 6px;
background: #161b22; color: #c9d1d9;
border: 1px solid #30363d; border-radius: 14px;
padding: 7px 14px; font-size: 13px; cursor: pointer;
white-space: nowrap; flex: 0 0 auto;
}
.botchip.active { border-color: #58a6ff; color: #58a6ff; background: #0d1b2c; }
.botchip.addchip { color: #8b949e; border-style: dashed; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.d-green { background: #3fb950; }
.d-orange { background: #d2991d; }
.d-gray { background: #6e7681; }
#addBox, #accBox .panel, #emptyBox .panel { margin: 10px; }
.panel.empty { text-align: center; }
.panel.empty .btnrow { margin-top: 12px; }
.btn.big { padding: 16px 10px; font-size: 15px; }
.inrow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.inrow input {
flex: 1 1 auto; min-width: 0; padding: 10px 8px;
background: #000; color: #c9d1d9;
border: 1px solid #1e1e1e; border-radius: 6px; font-size: 15px;
}
.inrow input:focus { outline: none; border-color: #58a6ff; }
.inrow .btn { flex: 0 0 auto; min-width: 110px; padding: 10px 12px; }
.kv.wide { margin-bottom: 8px; }
.mono {
font: 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
word-break: break-all;
}
@media (max-width: 420px) {
.fld { flex-wrap: wrap; }
.fld span { flex: 1 1 100%; margin-bottom: 4px; }
.fld input, .fld select { width: 100%; }
.tbl { font-size: 11px; }
.tbl th, .tbl td { padding: 5px 3px; }
.tbl th { font-size: 9px; }
}
.linkbar {
margin: 8px 10px 0;
padding: 7px 10px;
border: 1px solid #574417;
border-radius: 8px;
background: #2a2311;
color: #d2991d;
font-size: 13px;
}