:root {
  --bg: #0f1722; --panel: #182434; --panel-2: #1f2e42; --line: #2b3d55;
  --text: #e7eef8; --muted: #8fa3bd; --accent: #4fd1c5; --accent-ink: #062621;
  --buy: #4fd1c5; --sell: #f0a35e; --danger: #ff7a7a; --good: #6fdc8c; --radius: 6px;
  font-family: 'Heebo', 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-size: 15px; line-height: 1.5; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 700; margin: 0; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0.4rem 0 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
button { font: inherit; font-weight: 500; cursor: pointer; border: 0; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1.1rem; border-radius: var(--radius); }
button:hover { filter: brightness(1.08); } button:disabled { opacity: 0.5; cursor: wait; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=text], input[type=password], input[type=search], select { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.8rem; width: 100%; }
input::placeholder { color: var(--muted); }
select { width: auto; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 2rem; }
.login-card h1 { font-size: 1.6rem; } .login-card p { margin: 0.3rem 0 1.4rem; }
.login-card label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.35rem; }
.login-card button { width: 100%; margin-top: 1.2rem; }

/* shell */
.top { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.4rem; border-bottom: 1px solid var(--line); }
.brand { font-weight: 900; font-size: 1.15rem; } .brand span { color: var(--accent); font-weight: 400; }
.top-actions { display: flex; align-items: center; gap: 1rem; }
.logout { color: var(--muted); font-size: 0.9rem; }
.layout { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 58px); }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } .side { border-inline-start: 0; border-bottom: 1px solid var(--line); } }
.side { border-inline-start: 1px solid var(--line); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; background: var(--panel); }
.side h2 { font-size: 1rem; color: var(--muted); font-weight: 500; }
.add-form { display: flex; flex-direction: column; gap: 0.45rem; }
.add-form input[dir=ltr] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }
.wallet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wallet-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.7rem; border-radius: var(--radius); background: var(--panel-2); cursor: pointer; border: 1px solid transparent; }
.wallet-list li:hover { border-color: var(--line); } .wallet-list li.active { border-color: var(--accent); }
.wallet-list .wl-label { font-weight: 700; } .wallet-list .wl-addr { font-size: 0.72rem; color: var(--muted); text-align: left; }
.wallet-list .wl-info { font-size: 0.72rem; color: var(--muted); }
.wallet-list .wl-del { background: none; color: var(--muted); padding: 0.2rem 0.4rem; font-size: 1rem; line-height: 1; }
.wallet-list .wl-del:hover { color: var(--danger); }
.main { padding: 1.4rem; max-width: 1100px; }
.status { margin: 0 0 1rem; color: var(--muted); min-height: 1.4rem; } .status.err { color: var(--danger); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-inline-end: 0.4rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* wallet head */
.wallet-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.wallet-head h1 { font-size: 1.5rem; }
.wallet-addr { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; font-size: 0.85rem; color: var(--muted); }
.wallet-stats { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.wallet-stats div { text-align: center; } .wallet-stats b { display: block; font-size: 1.25rem; } .wallet-stats small { color: var(--muted); }
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs button { background: none; color: var(--muted); border-radius: 0; padding: 0.6rem 1rem; border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

/* token cards */
.tok { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 0.9rem; overflow: hidden; }
.tok-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.9rem; align-items: center; padding: 0.9rem 1.1rem; cursor: pointer; }
.tok-head:hover { background: var(--panel-2); }
.tok-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); object-fit: cover; display: grid; place-items: center; font-weight: 900; color: var(--muted); }
.tok-name { font-size: 1.15rem; font-weight: 700; } .tok-name small { font-weight: 400; color: var(--muted); margin-inline-start: 0.5rem; }
.tok-line { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }
.tok-line b { color: var(--text); font-weight: 500; }
.badge { padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.badge.holding { background: rgba(79,209,197,0.15); color: var(--buy); }
.badge.sold_part { background: rgba(240,163,94,0.15); color: var(--sell); }
.badge.sold_all { background: rgba(255,122,122,0.15); color: var(--danger); }
.badge.sold_only { background: var(--panel-2); color: var(--muted); }
.tok-body { border-top: 1px solid var(--line); padding: 1rem 1.1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; font-size: 0.9rem; align-content: start; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; font-weight: 500; }
.facts dd.pos { color: var(--good); } .facts dd.neg { color: var(--danger); }
.tok-body h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.tok-body h3.buy { color: var(--buy); } .tok-body h3.sell { color: var(--sell); }
.ops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; }
.ops li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; padding: 0.45rem 0.7rem; background: var(--panel-2); border-radius: var(--radius); border-inline-start: 3px solid var(--line); }
.ops li.b { border-inline-start-color: var(--buy); } .ops li.s { border-inline-start-color: var(--sell); }
.ops .when { font-weight: 700; } .ops .amt { color: var(--muted); grid-column: 1 / -1; }
.ops a { font-size: 0.75rem; }
.tok-span { grid-column: 1 / -1; }
.empty { color: var(--muted); padding: 1rem 0; }

/* related */
.filters { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.8rem; flex-wrap: wrap; }
.filters label { font-size: 0.88rem; color: var(--muted); display: flex; gap: 0.35rem; align-items: center; white-space: nowrap; }
.filters input[type=search] { flex: 1; min-width: 160px; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.rel { display: flex; flex-direction: column; gap: 0.45rem; }
.rel-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem 0.9rem; align-items: center; padding: 0.6rem 0.8rem; background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); }
.rel-score { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; border: 2px solid var(--line); }
.rel-item.two .rel-score { border-color: var(--accent); color: var(--accent); }
.rel-addr { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; font-size: 0.84rem; }
.rel-meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.rel-tokens { font-size: 0.78rem; color: var(--muted); }
.rel-tokens i { font-style: normal; background: var(--panel-2); padding: 0.05rem 0.4rem; border-radius: 3px; margin-inline-end: 0.3rem; }
.flow { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; display: flex; }
.flow .in { background: var(--buy); } .flow .out { background: var(--sell); }
.rel-actions { display: flex; gap: 0.4rem; }
.rel-actions button, .rel-actions a { background: transparent; color: var(--accent); border: 1px solid var(--line); padding: 0.3rem 0.6rem; font-size: 0.8rem; border-radius: 4px; }

/* common */
.com { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 0.9rem; padding: 0.9rem 1.1rem; }
.com-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.com-count { font-size: 1.6rem; font-weight: 900; color: var(--accent); }
.com table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-top: 0.7rem; }
.com th, .com td { padding: 0.4rem 0.5rem; border-top: 1px solid var(--line); text-align: right; }
.com th { color: var(--muted); font-weight: 500; }

/* v3: ROI + copytrade */
.side-row { font-size: 0.85rem; } .side-row label { display: flex; gap: 0.35rem; align-items: center; }
.side-gap { margin-top: 1rem; }
.wallet-list li { grid-template-columns: 1fr auto auto; }
.roi { font-weight: 700; font-size: 0.9rem; direction: ltr; white-space: nowrap; padding: 0.15rem 0.5rem; border-radius: 4px; }
.roi.pos { color: var(--good); background: rgba(111,220,140,0.12); }
.roi.neg { color: var(--danger); background: rgba(255,122,122,0.12); }
.roi.na { color: var(--muted); background: var(--panel); font-weight: 400; }
.roi-bar { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--panel); }
.roi-bar .big { font-size: 2rem; font-weight: 900; direction: ltr; }
.roi-bar.pos { border-color: rgba(111,220,140,0.5); } .roi-bar.pos .big { color: var(--good); }
.roi-bar.neg { border-color: rgba(255,122,122,0.5); } .roi-bar.neg .big { color: var(--danger); }
.roi-bar .meter { flex: 1; min-width: 160px; height: 10px; border-radius: 5px; background: var(--panel-2); overflow: hidden; display: flex; }
.roi-bar .meter .w { background: var(--good); } .roi-bar .meter .l { background: var(--danger); }
.roi-bar small { color: var(--muted); display: block; }
.ct-start { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted); margin-bottom: 1rem; }
.ct-start label { display: flex; gap: 0.3rem; align-items: center; }
.ct-start input { width: 90px; padding: 0.35rem 0.5rem; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; }
.ct-start button { padding: 0.4rem 0.9rem; }
.h-gap { margin: 1.2rem 0 0.6rem; font-size: 1.05rem; }
.ct-stats { margin-bottom: 0.5rem; }
.pos-table, .tr-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: var(--panel); border-radius: 8px; overflow: hidden; }
.pos-table th, .pos-table td, .tr-table th, .tr-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); text-align: right; }
.pos-table th, .tr-table th { color: var(--muted); font-weight: 500; }
td.pos { color: var(--good); } td.neg { color: var(--danger); }
.side-b { color: var(--buy); font-weight: 700; } .side-s { color: var(--sell); font-weight: 700; } .side-k { color: var(--muted); }
.table-wrap { overflow-x: auto; }

/* v4: related classification */
.small { font-size: 0.82rem; margin: 0 0 0.8rem; }
.rel-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.25rem 0; }
.tag { font-size: 0.74rem; padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.tag.hot { background: rgba(255,122,122,0.15); color: var(--danger); font-weight: 700; }
.tag.warm { background: rgba(240,163,94,0.15); color: var(--sell); font-weight: 500; }
.tag.cool { background: rgba(79,209,197,0.12); color: var(--buy); }
.rel-item.s3 { border-color: var(--danger); } .rel-item.s3 .rel-score { border-color: var(--danger); color: var(--danger); }
.rel-item.s2 { border-color: var(--sell); } .rel-item.s2 .rel-score { border-color: var(--sell); color: var(--sell); }
.pools { margin-top: 1.2rem; }
.pools summary { cursor: pointer; color: var(--muted); padding: 0.5rem 0; }
.pools .rel-item { opacity: 0.75; }

/* v5: csv import */
.import-row { display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.ghost-btn { display: inline-block; cursor: pointer; color: var(--accent); border: 1px solid var(--line); padding: 0.45rem 0.9rem; border-radius: var(--radius); }
.ghost-btn:hover { background: var(--panel-2); }

/* v6: quality, safety, alerts, discover */
.quality { display: grid; grid-template-columns: auto repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1.1rem; margin-bottom: 1rem; }
.q-score { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 900; border: 4px solid var(--line); }
.q-score.g { border-color: var(--good); color: var(--good); } .q-score.y { border-color: var(--sell); color: var(--sell); } .q-score.r { border-color: var(--danger); color: var(--danger); }
.quality div b { display: block; font-size: 1.05rem; } .quality div small { color: var(--muted); }
.q-note { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); }
.safety { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.safety h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.sf-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.sf { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.sf.ok { background: rgba(111,220,140,0.12); color: var(--good); } .sf.warn { background: rgba(240,163,94,0.15); color: var(--sell); } .sf.bad { background: rgba(255,122,122,0.15); color: var(--danger); font-weight: 700; }
.sf-risks { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--muted); }
.sf-risks li { padding: 0.15rem 0; } .sf-risks li b { color: var(--text); font-weight: 500; } .sf-risks li.danger b { color: var(--danger); } .sf-risks li.warn b { color: var(--sell); }
.search-row { display: flex; gap: 0.6rem; margin-bottom: 1rem; } .search-row input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; }
.small-btn { padding: 0.25rem 0.6rem; font-size: 0.8rem; margin-inline-start: 0.5rem; }
.al { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; padding: 0.55rem 0.8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.4rem; font-size: 0.88rem; }
.al .k { font-weight: 700; } .al.buy .k { color: var(--buy); } .al.sell .k { color: var(--sell); } .al.convergence .k { color: var(--danger); }
.al .w { color: var(--muted); font-size: 0.8rem; grid-column: 1 / -1; }
.disc-head { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1.1rem; margin-bottom: 0.8rem; }
.disc-head div b { display: block; } .disc-head div small { color: var(--muted); }
.disc-table td.addr { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; font-size: 0.78rem; }
.disc-table .mini { padding: 0.2rem 0.5rem; font-size: 0.75rem; }

/* v7: copyability */
.side-row { display: flex; flex-direction: column; gap: 0.3rem; }
.wl-flags { font-size: 0.72rem; margin-top: 0.1rem; }
.wl-flags .flag { padding: 0.05rem 0.4rem; border-radius: 3px; background: var(--panel); color: var(--muted); }
.wl-flags .flag.fast { background: rgba(255,122,122,0.15); color: var(--danger); }
.wl-flags .flag.ok { background: rgba(111,220,140,0.12); color: var(--good); }
.copy-box { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 0.6rem; display: grid; grid-template-columns: auto repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; align-items: center; }
.copy-box .q-score { width: 52px; height: 52px; font-size: 1.2rem; border-width: 3px; }
.copy-box .lbl { font-weight: 700; grid-column: 1 / -1; font-size: 0.9rem; }

/* v8: status dot */
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-inline-end: 0.45rem; vertical-align: middle; background: var(--line); box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.dot.green { background: var(--good); box-shadow: 0 0 6px rgba(111,220,140,0.6); }
.dot.red { background: var(--danger); box-shadow: 0 0 6px rgba(255,122,122,0.6); }
.dot.yellow { background: var(--sell); }
.dot.grey { background: var(--line); }
.legend-dots { font-size: 0.75rem; color: var(--muted); display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* v9: settings */
.settings-form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 560px; }
.settings-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--muted); }
.settings-form input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; }
.settings-form button { align-self: flex-start; }