:root {
  --bg: #05070b;
  --panel: #0d131d;
  --panel-2: #121b28;
  --line: #27364a;
  --line-soft: #1c2838;
  --text: #eef4fb;
  --muted: #94a4b7;
  --blue: #63b7ff;
  --blue-deep: #154f7a;
  --green: #43dd8d;
  --red: #ff747c;
  --amber: #ffc563;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -20%, #12304a 0, #05070b 34rem); font-size: 16px; }
button { font: inherit; }
.shell { width: min(100%, 760px); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px 22px; }
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(23px, 7vw, 36px); line-height: 1.05; }
.freshness { border: 1px solid var(--line); border-radius: 99px; padding: 9px 12px; color: var(--muted); font-size: 13px; white-space: nowrap; background: rgba(8,13,20,.78); }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px currentColor; }
.freshness.ok .pulse { background: var(--green); }
.freshness.bad .pulse { background: var(--red); }
.tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 6px; border: 1px solid var(--line-soft); border-radius: 18px; background: rgba(8,12,18,.9); position: sticky; top: max(8px,env(safe-area-inset-top)); z-index: 10; backdrop-filter: blur(18px); }
.tab,.account,.position-tab,.refresh { min-height: 44px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; }
.tab.active,.account.active,.position-tab.active { color: #fff; border-color: #315d82; background: linear-gradient(180deg,#24608e,#184462); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0; }
.segmented { display: grid; grid-template-columns: repeat(3,1fr); flex: 1; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.account { min-width: 0; }
.refresh { padding: 0 15px; color: var(--blue); border-color: var(--line); background: var(--panel); }
.refresh.loading { opacity: .6; }
.primary-sell { width:100%; min-height:64px; margin:0 0 14px; padding:14px 18px; border:1px solid #7b3039; border-radius:16px; color:#ff9da4; background:linear-gradient(145deg,#281319,#1d1118); font-weight:800; font-size:18px; cursor:pointer; }
.primary-sell:active { transform:translateY(1px); }
.position-card.position-sellable { position:relative; overflow:hidden; padding:0; cursor:grab; touch-action:pan-y; }
.position-sellable:active { border-color:#66c5ff; }
.position-card-content { position:relative; z-index:2; }
.position-sellable .position-card-content { padding:16px; border-radius:14px; background:#0a1018; will-change:transform; }
.swipe-action { position:absolute; inset:0 auto 0 0; z-index:1; width:165px; display:flex; flex-direction:column; justify-content:center; padding:16px; color:#d8efff; background:linear-gradient(90deg,#11679b,#164865); }
.swipe-action b { font-size:16px; }
.swipe-action span { margin-top:5px; font-size:12px; color:#bfe7ff; }
.position-sellable.swipe-ready .swipe-action { background:linear-gradient(90deg,#148f66,#17634f); }
.sell-hint { display:block; margin-top:9px; color:#72cfff; font-size:12px; }
.sell-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; padding:18px 12px max(18px,env(safe-area-inset-bottom)); background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.sell-sheet { width:min(100%,620px); max-height:88vh; overflow:auto; padding:20px; border:1px solid #34516d; border-radius:22px; background:linear-gradient(155deg,#111d2a,#080d14 70%); box-shadow:0 24px 90px rgba(0,0,0,.65); }
.sell-sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.sell-sheet-head small { color:var(--blue); font-weight:800; letter-spacing:.08em; }
.sell-sheet-head h2 { margin:5px 0 0; font-size:24px; }
.sell-close { width:44px; height:44px; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; color:var(--text); background:#111b28; font-size:28px; line-height:1; }
.sell-position-name { margin:15px 0; color:#d8e7f5; line-height:1.5; }
.sell-status { padding:12px 14px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:#0a111a; line-height:1.5; }
.sell-status.ok { color:#96f2c0; border-color:#28684e; background:#0b1d17; }
.sell-status.bad { color:#ffabb0; border-color:#7b3039; background:#241116; }
.sell-login { display:grid; gap:10px; margin-top:14px; }
.sell-login label { color:var(--muted); font-size:13px; }
.sell-login input { width:100%; min-height:52px; padding:0 14px; border:1px solid #38516d; border-radius:12px; color:var(--text); background:#0a111a; font-size:17px; }
.sell-primary,.sell-danger { width:100%; min-height:54px; border-radius:13px; font-weight:800; }
.sell-primary { border:1px solid #3877a8; color:#e4f4ff; background:linear-gradient(180deg,#236692,#184966); }
.sell-danger { grid-column:1/-1; margin-top:4px; border:1px solid #9a3944; color:#fff; background:linear-gradient(180deg,#b33d49,#812a34); }
.sell-primary:disabled,.sell-danger:disabled { opacity:.48; }
.sell-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
.sell-preview>div { min-width:0; padding:12px; border:1px solid var(--line-soft); border-radius:12px; background:#0d1621; }
.sell-preview span { display:block; color:var(--muted); font-size:12px; }
.sell-preview b { display:block; margin-top:5px; font-size:19px; overflow-wrap:anywhere; }
.sell-preview>small { grid-column:1/-1; color:var(--muted); line-height:1.55; }
.notice { padding: 12px 14px; margin: 12px 0; border: 1px solid #694e22; border-radius: 12px; color: #ffd391; background: #21190e; }
.hidden { display: none !important; }
.view { display: none; }
.view.active { display: block; }
.hero-card,.section-block,.safety-panel,.empty-card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,#0e1926,#0a111a); box-shadow: 0 14px 50px rgba(0,0,0,.25); }
.hero-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px; min-height: 140px; }
.hero-card p { margin: 0 0 8px; color: var(--muted); }
.money { font-size: clamp(34px,11vw,56px); line-height: 1; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.quality { max-width: 42%; padding: 7px 10px; border-radius: 99px; color: var(--amber); background: rgba(255,197,99,.08); font-size: 12px; text-align: right; }
.summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 12px 0; }
.metric { min-height: 112px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--panel); }
.metric span { display:block; color: var(--muted); font-size: 14px; }
.metric strong { display:block; margin-top: 8px; font-size: 25px; }
.metric small { display:block; margin-top: 7px; color: #74879c; }
.section-block { margin-top: 14px; padding: 16px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-title h2 { margin:0; font-size:21px; }
.section-title span { color:var(--muted); font-size:12px; text-align:right; }
.account-cards,.server-cards { display:grid; gap:12px; }
.account-card,.server-card,.position-card,.history-card { padding:16px; border:1px solid var(--line-soft); border-radius:15px; background:#0a1018; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; }
.card-head h3 { margin:0; font-size:20px; }
.card-head strong { font-size:22px; }
.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mini { padding:11px; border-radius:10px; background:#0e1621; }
.mini span { display:block; color:var(--muted); font-size:12px; }
.mini b { display:block; margin-top:4px; font-size:17px; }
.buckets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bucket { padding:12px 8px; text-align:center; border:1px solid var(--line-soft); border-radius:12px; background:#0a1018; }
.bucket strong { display:block; font-size:20px; }
.bucket span { color:var(--muted); font-size:12px; }
.empty-card { margin-top:14px; padding:26px 20px; text-align:center; }
.empty-card .icon { display:inline-grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); border-radius:50%; color:var(--blue); }
.empty-card h2 { margin-bottom:8px; }
.empty-card p,.scope-note { color:var(--muted); line-height:1.65; }
.history-list:empty::after { content:"暂无已锁定日结数据"; display:block; padding:18px; color:var(--muted); text-align:center; }
.history-list { display:grid; gap:14px; }
.history-day-card { padding:16px; }
.history-day-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.history-day-head > div { display:flex; align-items:baseline; gap:16px; min-width:0; }
.history-day-head h3 { margin:0; font-size:24px; }
.history-day-head strong { font-size:22px; white-space:nowrap; }
.history-toggle { min-width:72px; min-height:44px; padding:0 14px; border:1px solid #496582; border-radius:12px; color:#d9ecff; background:#17263a; font-weight:700; cursor:pointer; }
.history-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.history-metric { min-width:0; padding:11px; border-radius:10px; background:#182437; }
.history-metric span { display:block; color:var(--muted); font-size:12px; }
.history-metric b { display:block; margin-top:5px; font-size:17px; overflow-wrap:anywhere; }
.history-metric small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.history-details { margin-top:16px; border-top:1px solid #8090a3; }
.history-account-detail { padding:17px 0; border-bottom:1px solid #8090a3; }
.history-account-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.history-account-head h4 { margin:0; font-size:23px; }
.history-account-head strong { font-size:20px; text-align:right; }
.history-detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.history-activity { margin:10px 2px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.history-window { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; padding-top:15px; color:var(--muted); font-size:12px; line-height:1.55; }
.history-window b { color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.history-warning { color:var(--amber) !important; }
.server-cards { margin-top:14px; }
.health-row { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:8px; margin:9px 0; color:var(--muted); }
.bar { height:7px; overflow:hidden; border-radius:99px; background:#1b2736; }
.bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2d86c6,#5fd7a1); }
.service { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line-soft); }
.service b { color:var(--green); }
.position-filter { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.position-list { display:grid; gap:10px; }
.position-card { border-left:4px solid #2e80b9; }
.position-card p { margin:5px 0; color:var(--muted); word-break:break-word; }
.position-card .position-name { color:var(--text); font-weight:700; }
.safety-panel { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:20px; padding:16px; }
.safety-panel p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.safety-panel button { padding:12px 14px; border:1px solid #6d2d35; border-radius:12px; color:#d9858b; background:#281319; white-space:nowrap; }
.safety-state { padding:9px 12px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:12px; white-space:nowrap; }
@media (min-width:700px) { .account-cards,.server-cards { grid-template-columns:repeat(2,1fr); } .summary-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:430px) { .shell{padding-inline:12px}.tabs{gap:3px}.tab{font-size:13px}.buckets{grid-template-columns:repeat(2,1fr)}.hero-card{align-items:flex-start;flex-direction:column}.quality{max-width:100%;text-align:left}.safety-panel{align-items:flex-start;flex-direction:column}.safety-panel button{width:100%}.history-day-head>div{display:block}.history-day-head strong{display:block;margin-top:4px}.history-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.history-summary-grid .history-metric{padding:9px 7px}.history-summary-grid .history-metric b{font-size:15px}.history-summary-grid .history-metric span{font-size:11px}.history-account-head{align-items:flex-start}.history-account-head strong{font-size:18px}.history-window{grid-template-columns:1fr}.history-window span{margin-top:5px} }
@media (prefers-reduced-motion:no-preference) { .view.active{animation:fade .18s ease-out}@keyframes fade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}} }