/* @filename: style.css V-0.0.0.001 */
/* @desc: QMT Core全局样式 - 精确复刻QMTPRO (base+layout+components合并) */

/* ===== CSS变量（暗色默认，复刻QMTPRO） ===== */
:root {
  --bg:#0d1117; --bg-blur:rgba(22,27,34,0.8); --card:#161b22; --card-blur:rgba(28,33,40,0.75); --card-2:#1c2128;
  --border:#21262d; --border-2:#30363d; --border-subtle:rgba(255,255,255,0.06);
  --text:#f0f6fc; --text-2:#c9d1d9; --text-dim:#8b949e; --text-mute:#484f58;
  --red:#f85149; --red-bg:rgba(248,81,73,0.1); --red-border:rgba(248,81,73,0.3);
  --green:#3fb950; --green-bg:rgba(63,185,80,0.1); --green-border:rgba(63,185,80,0.3);
  --blue:#58a6ff; --blue-bg:rgba(88,166,255,0.1); --yellow:#d29922; --orange:#db6d28; --purple:#bc8cff;
  --glass-blur:blur(20px); --glass-saturate:saturate(180%);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.2); --shadow-md:0 2px 8px rgba(0,0,0,0.3); --shadow-lg:0 8px 24px rgba(0,0,0,0.35);
  --radius-sm:6px; --radius-md:12px; --radius-lg:14px; --radius-xl:20px; --radius-pill:9999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --ease:cubic-bezier(0.4,0,0.2,1); --transition-fast:all 0.15s var(--ease); --transition:all 0.3s var(--ease);
  --font-sans:'HarmonyOS Sans','HarmonyOS Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-num:'DIN Alternate','HarmonyOS Sans','SF Pro Display',tabular-nums;
  --header-h:56px; --sidebar-w:220px;
}
@media (prefers-color-scheme:light) {
  :root {
    --bg:#f6f8fa; --bg-blur:rgba(255,255,255,0.8); --card:#ffffff; --card-blur:rgba(255,255,255,0.75); --card-2:#f0f2f5;
    --border:#d0d7de; --border-2:#afb8c1; --border-subtle:rgba(0,0,0,0.06);
    --text:#1f2328; --text-2:#3c434d; --text-dim:#636c76; --text-mute:#818b98;
    --red-bg:rgba(248,81,73,0.08); --green-bg:rgba(63,185,80,0.08); --blue-bg:rgba(88,166,255,0.08);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.06); --shadow-md:0 2px 8px rgba(0,0,0,0.08); --shadow-lg:0 8px 24px rgba(0,0,0,0.12);
  }
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; overflow:hidden; }
.up { color:var(--red); } .down { color:var(--green); } .flat { color:var(--text-dim); }
.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; }
::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:var(--radius-pill); }
a { color:var(--blue); text-decoration:none; transition:var(--transition-fast); }
input,select,textarea { font-family:var(--font-sans); font-size:14px; color:var(--text); background:var(--card-2); border:1px solid var(--border-2); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(88,166,255,0.12); }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn 0.4s var(--ease) both; }

/* ===== Layout ===== */
.app-layout { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.topbar { height:var(--header-h); display:flex; align-items:center; padding:0 var(--space-6); backdrop-filter:var(--glass-blur) var(--glass-saturate); -webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate); background:var(--bg-blur); border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); z-index:100; flex-shrink:0; }
.topbar-logo { font-size:20px; font-weight:800; letter-spacing:0.05em; background:linear-gradient(135deg,var(--blue),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-right:var(--space-8); }
.topbar-divider { width:1px; height:24px; background:var(--border-2); margin:0 var(--space-4); }
.account-switch { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--card-2); border-radius:var(--radius-md); cursor:pointer; }
.account-switch:hover { background:var(--border-2); }
.account-switch .acct-id { font-family:var(--font-num); font-size:13px; color:var(--text-2); }
.account-switch .acct-name { font-size:12px; color:var(--text-dim); }
.topbar-asset { display:flex; align-items:baseline; gap:var(--space-3); margin-left:var(--space-6); }
.topbar-asset .label { font-size:12px; color:var(--text-dim); }
.topbar-asset .value { font-family:var(--font-num); font-size:18px; font-weight:700; color:var(--text); }
.trade-switch { margin-left:auto; display:flex; align-items:center; gap:var(--space-2); }
.trade-switch .switch-label { font-size:12px; color:var(--text-dim); }
.switch-toggle { width:44px; height:24px; border-radius:var(--radius-pill); background:var(--border-2); position:relative; cursor:pointer; transition:var(--transition); flex-shrink:0; }
.switch-toggle.on { background:var(--green); }
.switch-toggle .knob { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:var(--transition); }
.switch-toggle.on .knob { left:22px; }
.user-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#fff; margin-left:var(--space-4); cursor:pointer; }

/* ===== App Body + Sidebar ===== */
.app-body { display:flex; flex:1; overflow:hidden; }
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--card); border-right:1px solid var(--border-subtle); padding:var(--space-4) 0; overflow-y:auto; }
.sidebar-section-title { font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.08em; padding:var(--space-2) var(--space-4); margin-top:var(--space-2); }
.sidebar-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); color:var(--text-dim); cursor:pointer; transition:var(--transition); margin:var(--space-1) var(--space-2); font-size:14px; text-decoration:none; }
.sidebar-item:hover { background:var(--card-2); color:var(--text); }
.sidebar-item.active { background:var(--red-bg); color:var(--red); font-weight:500; }

/* ===== Main Content ===== */
.main-content { flex:1; overflow-y:auto; padding:var(--space-6); background:var(--bg); }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-6); }
.page-title { font-size:22px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.page-title::before { content:''; width:4px; height:18px; background:var(--red); border-radius:2px; flex-shrink:0; }
.page-subtitle { font-size:13px; color:var(--text-dim); margin-top:var(--space-1); }

/* ===== Grid ===== */
.grid { display:grid; gap:var(--space-4); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-12 { grid-template-columns:2fr 1fr; }
@media (max-width:1200px) { .grid-12 { grid-template-columns:1fr; } }

/* ===== Dot (竖条) ===== */
.dot { width:3px; height:12px; border-radius:2px; display:inline-block; flex-shrink:0; }
.dot-r { background:var(--red); } .dot-g { background:var(--green); } .dot-y { background:var(--yellow); } .dot-gray { background:var(--text-mute); }

/* ===== Card ===== */
.card { background:var(--card-blur); backdrop-filter:var(--glass-blur) var(--glass-saturate); -webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-md); border:1px solid var(--border-subtle); transition:var(--transition); }
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.card-title { font-size:15px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.card-title::before { content:''; width:3px; height:14px; background:var(--red); border-radius:2px; flex-shrink:0; }
.card-action { font-size:12px; color:var(--blue); cursor:pointer; }

/* ===== Hero ===== */
.hero { padding:var(--space-6) var(--space-5); background:var(--card-blur); backdrop-filter:var(--glass-blur) var(--glass-saturate); -webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); border:1px solid var(--border-subtle); }
.hero-label { font-size:13px; color:var(--text-dim); margin-bottom:var(--space-2); }
.hero-value { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:42px; font-weight:800; letter-spacing:-0.03em; line-height:1.1; }
.hero-sub { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3); flex-wrap:wrap; }
.hero-sub-item { display:flex; align-items:baseline; gap:var(--space-2); }
.hero-sub-item .label { font-size:12px; color:var(--text-dim); }
.hero-sub-item .value { font-family:var(--font-num); font-size:16px; font-weight:600; }

/* ===== Pill ===== */
.pill { display:inline-flex; align-items:center; gap:var(--space-1); padding:2px var(--space-3); border-radius:var(--radius-pill); font-size:11px; font-weight:600; line-height:20px; }
.pill-red { background:var(--red-bg); color:var(--red); border:1px solid var(--red-border); }
.pill-green { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.pill-gray { background:var(--card-2); color:var(--text-dim); border:1px solid var(--border-2); }

/* ===== KPI ===== */
.kpi { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-5); background:var(--card-blur); backdrop-filter:var(--glass-blur) var(--glass-saturate); -webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); border:1px solid var(--border-subtle); }
.kpi-label { font-size:12px; color:var(--text-dim); }
.kpi-value { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; letter-spacing:-0.02em; }

/* ===== Pos/Strategy Cards ===== */
.pos-card { padding:var(--space-3) 0; border-bottom:1px solid var(--border-subtle); }
.pos-card:last-child { border-bottom:none; }
.pos-card-header { display:flex; justify-content:space-between; align-items:center; }
.pos-card-name { font-weight:600; font-size:14px; }
.pos-card-code { font-size:11px; color:var(--text-mute); margin-left:4px; }
.pos-card-price { font-weight:700; font-family:var(--font-num); font-size:15px; }
.pos-card-detail { display:flex; gap:var(--space-4); margin-top:var(--space-2); flex-wrap:wrap; }
.pos-card-detail-item .label { font-size:11px; color:var(--text-mute); display:block; }
.pos-card-detail-item .value { font-size:13px; font-family:var(--font-num); }
.strategy-card { padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); margin-bottom:var(--space-3); }
.strategy-header { display:flex; justify-content:space-between; align-items:center; }
.strategy-name { font-weight:600; font-size:14px; }
.strategy-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); margin-top:var(--space-3); }
@media (max-width:768px) { .strategy-stats { grid-template-columns:repeat(2,1fr); } }
.strategy-stat-item .label { font-size:11px; color:var(--text-mute); display:block; }
.strategy-stat-item .value { font-size:14px; font-weight:600; font-family:var(--font-num); }

/* ===== Toast ===== */
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:var(--card); color:var(--text); padding:10px 20px; border-radius:var(--radius-md); font-size:13px; z-index:9999; opacity:0; transition:opacity 0.3s; box-shadow:var(--shadow-lg); border:1px solid var(--border-2); }
.toast.show { opacity:1; }

/* ===== Responsive ===== */
@media (max-width:768px) { .sidebar { display:none; } .main-content { padding:var(--space-3); } .grid-2 { grid-template-columns:1fr; } .hero-value { font-size:32px; } .topbar-asset { display:none; } }