:root { --bg:#14161a; --card:#1d2026; --line:#2a2e35; --txt:#e8eaed; --mut:#8a8f98;
         --pos:#3ddc84; --neg:#ff6b6b; --acc:#4da3ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
       font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; font-size:15px; }
a { color:var(--acc); text-decoration:none; }
.topbar { display:flex; justify-content:space-between; align-items:center;
          padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:17px; }
.topbar nav a { margin-left:16px; color:var(--mut); }
.topbar nav a.active, .topbar nav a:hover { color:var(--txt); }
.topbar nav a.logout { color:var(--neg); }
.container { max-width:1080px; margin:0 auto; padding:20px; }
.foot { text-align:center; color:var(--mut); font-size:12px; padding:24px 12px 32px; }

h2 { margin:18px 0 12px; font-size:18px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.card .k { color:var(--mut); font-size:12px; margin-bottom:6px; }
.card .v { font-size:21px; font-weight:700; }
.pos { color:var(--pos); } .neg { color:var(--neg); } .mut { color:var(--mut); }

table { width:100%; border-collapse:collapse; background:var(--card);
        border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:14px; }
th,td { padding:10px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--mut); font-weight:500; font-size:12px; background:#191c21; }
tr:last-child td { border-bottom:none; }
.tag { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; }
.tag.stock { background:#1d3a5f; color:#8fc3ff; }
.tag.crypto { background:#3f2f5f; color:#cfa8ff; }
.tag.buy { background:#173b2a; color:var(--pos); }
.tag.sell { background:#4a2323; color:var(--neg); }
.stale { font-size:11px; color:#e0a63c; }

.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:16px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12px; color:var(--mut); }
input,select,textarea { background:#14161a; border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:9px 12px; font-size:14px; min-width:0; }
input:focus,select:focus { outline:none; border-color:var(--acc); }
button,.btn { background:var(--acc); color:#06121f; border:none; border-radius:8px;
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; }
button:hover,.btn:hover { filter:brightness(1.1); }
button.danger { background:#3a2222; color:var(--neg); padding:6px 12px; font-size:12px; }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--txt); }

.flash-wrap { margin-bottom:12px; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:8px; font-size:14px; }
.flash.ok { background:#173b2a; color:var(--pos); }
.flash.error { background:#4a2323; color:#ffb3b3; }

.login-wrap { max-width:380px; margin:80px auto; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:32px 28px; text-align:center; }
.login-wrap h1 { margin:0 0 8px; font-size:22px; }
.login-wrap p { color:var(--mut); font-size:13px; }
.login-wrap input { width:100%; margin:12px 0; }
.login-wrap button { width:100%; }
.err { color:var(--neg); font-size:13px; margin-top:8px; }

.toolbar { display:flex; justify-content:space-between; align-items:center; margin:18px 0 12px; flex-wrap:wrap; gap:8px; }
.toolbar h2 { margin:0; }
.hint { color:var(--mut); font-size:12px; }
.chart { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 8px 4px; margin-top:12px; }
.empty { text-align:center; color:var(--mut); padding:40px 0; }
@media (max-width:640px){ th,td{ padding:8px 6px; font-size:12px; } .container{ padding:12px; } }

/* ---- 标的详情页（参照深色卡片风） ---- */
.asset-head { display:flex; justify-content:space-between; align-items:center; margin:18px 0 4px; flex-wrap:wrap; gap:8px; }
.asset-title { display:flex; align-items:center; gap:12px; }
.coin { width:40px; height:40px; border-radius:50%; background:#f5a623; color:#141414;
        display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; }
.ghost-link { color:var(--mut); border:1px solid var(--line); border-radius:8px;
              padding:7px 14px; font-size:13px; }
.ghost-link:hover { color:var(--txt); border-color:var(--acc); }
.topbar nav a.ghost-link { margin-left:8px; }

.hero-grid { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:12px; margin-top:12px; }
@media (max-width:800px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-price { background:linear-gradient(160deg,#1c1a12,#14161a 70%); border:1px solid #3a3325;
              border-radius:12px; padding:22px; }
.big-price { font-size:40px; font-weight:800; letter-spacing:-1px; margin:8px 0; }
.src-line { display:flex; align-items:center; gap:6px; margin-top:6px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--pos); display:inline-block; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat-grid .card .v { font-size:24px; }
.stat-grid .card .hint { margin-top:6px; }

.two-col { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:12px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

/* 分段切换（买入/卖出、筛选） */
.seg { display:inline-flex; background:#101216; border:1px solid var(--line); border-radius:10px; padding:4px; gap:4px; }
.seg-btn { border:none; background:transparent; color:var(--mut); padding:8px 18px;
           border-radius:7px; font-size:14px; font-weight:600; cursor:pointer; }
.seg-btn:hover { color:var(--txt); }
.seg-btn.active-buy { background:#f5a623; color:#141414; }
.seg-btn.active-sell { background:#3a3f47; color:var(--txt); }
.seg-btn.active { background:#2a2e35; color:var(--txt); }
.seg.sm .seg-btn { padding:6px 12px; font-size:12px; }
a.seg-btn { display:inline-block; }

/* 手动价格折叠 */
details.manual summary { list-style:none; cursor:pointer; }
details.manual summary::-webkit-details-marker { display:none; }
.btn-like { display:inline-block; }
button.sm, .ghost.sm { padding:7px 14px; font-size:13px; }

h3 { font-size:16px; }