:root { font-family: Inter, "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; color: #eaf7f3; background: #06100e; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1100px; min-height: 100vh; background: #06100e; }
button, input { font: inherit; }
button { cursor: pointer; }
.login-shell { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #123a31, #06100e 48%); }
.login-card { width: 390px; padding: 34px; border: 1px solid #245348; border-radius: 12px; background: #0b1815; box-shadow: 0 30px 80px #0008; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: #55f5dc; color: #07110f; font-size: 23px; font-weight: 1000; }
.brand div { display: grid; }.brand b { font-size: 21px; }.brand small { margin-top: 3px; color: #73958c; }
.login-card .brand { margin-bottom: 28px; }
.login-card label { display: grid; gap: 8px; margin-top: 16px; color: #92aaa3; font-size: 13px; }
.login-card input { height: 48px; padding: 0 14px; border: 1px solid #294b43; border-radius: 7px; outline: 0; background: #07110f; color: #fff; }
.login-card input:focus { border-color: #55f5dc; }
.login-card button, .top-actions button { height: 44px; border: 0; border-radius: 7px; background: #55f5dc; color: #06100e; font-weight: 900; }
.login-card button { width: 100%; margin-top: 8px; }
.error { min-height: 20px; color: #ff8294; font-size: 12px; }
.topbar { height: 74px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1c3731; background: #091512; }
.top-actions { display: flex; align-items: center; gap: 10px; }.top-actions span { color: #76978f; font-size: 12px; }.top-actions button { min-width: 74px; padding: 0 14px; height: 36px; }.top-actions .ghost { border: 1px solid #3b544e; background: transparent; color: #d2e0dc; }
.dashboard { width: min(1500px, calc(100% - 48px)); margin: 24px auto 50px; }
.hero { min-height: 160px; padding: 24px 28px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; border: 1px solid #24473f; border-radius: 10px; background: linear-gradient(120deg, #0d2e27, #0b1714 60%); }
.hero span { color: #73978e; }.hero h1 { margin: 8px 0; font-size: 34px; }.hero h1.healthy { color: #55f5dc; }.hero h1.warning { color: #f4c84b; }.hero h1.critical { color: #ff7188; }.hero p { max-width: 550px; margin: 0; overflow-wrap: anywhere; color: #758f88; font-family: monospace; }
.alerts { display: grid; align-content: center; gap: 8px; }.alert { min-height: 46px; padding: 10px 13px; display: grid; grid-template-columns: 54px 1fr; align-items: center; border: 1px solid #2b4942; border-radius: 7px; background: #101d1a; font-size: 13px; }.alert.healthy b { color: #55f5dc; }.alert.warning b { color: #f4c84b; }.alert.critical b { color: #ff7188; }
.metrics { margin: 16px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.metrics article { min-height: 110px; padding: 17px; display: grid; align-content: center; border: 1px solid #1e3933; border-radius: 8px; background: #0a1513; }.metrics span, .metrics small { color: #718e87; font-size: 12px; }.metrics b { margin: 6px 0; color: #eaf7f3; font-size: 24px; font-variant-numeric: tabular-nums; }
.grid-two { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; }.panel { overflow: hidden; border: 1px solid #1e3933; border-radius: 8px; background: #0a1513; }.panel-head { min-height: 56px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1e3933; }.panel-head span { color: #718e87; font-size: 12px; }.panel-head.sub { border-top: 1px solid #1e3933; }
.book-head, .book > div { display: grid; grid-template-columns: 1fr 1fr; }.book-head { padding: 10px 18px; color: #718e87; font-size: 11px; }.book-head span:last-child { text-align: right; }.book > div { padding: 8px 18px; border-top: 1px solid #10241f; font: 13px/1.2 monospace; }.book > div:hover { background: #10221e; }.book .bid { color: #55f5dc; }.book .ask { color: #ff7188; text-align: right; }.empty { padding: 30px; color: #718e87; text-align: center; }
.balance-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }.balance-grid div { min-height: 92px; padding: 16px; display: grid; align-content: center; border-right: 1px solid #152c27; border-bottom: 1px solid #152c27; }.balance-grid span { color: #718e87; font-size: 12px; }.balance-grid b { margin-top: 8px; color: #d9e9e5; font-size: 16px; }.contracts { padding: 7px 18px 18px; }.contracts div { min-height: 47px; display: grid; grid-template-columns: 150px 1fr; align-items: center; border-bottom: 1px solid #152c27; }.contracts span { color: #718e87; font-size: 12px; }.contracts code { color: #dceae6; text-align: right; }
@media (max-width: 1200px) { .metrics { grid-template-columns: repeat(3, 1fr); }.grid-two { grid-template-columns: 1fr; } }