/* Saturn trade: black, Saturn red, Inter Tight + JetBrains Mono. Terminal density, no decoration. */
:root { --bg: #050505; --s1: #0d0d0d; --s2: #161616; --s3: #1f1f1f; --line: rgba(255,255,255,.08); --text: #f4f4f2; --muted: rgba(244,244,242,.55); --accent: #ff3b1f; --on-accent: #fff; --up: #2fd68a; --down: #ff5468; --font: "Inter Tight", Inter, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--bg); color-scheme: dark } body { background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100vh }
a { color: inherit; text-decoration: none; cursor: pointer } button, input { font: inherit; color: inherit } button { cursor: pointer; border: 0; background: none }
.muted { color: var(--muted) } .up { color: var(--up) } .down { color: var(--down) } .num, .mono { font-family: var(--mono) } em { font-style: normal }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent }
::-webkit-scrollbar { width: 8px; height: 8px } ::-webkit-scrollbar-track { background: transparent } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box } ::-webkit-scrollbar-thumb:hover { background: rgba(255,59,31,.6); background-clip: padding-box }
.btn { height: 36px; padding: 0 16px; border-radius: 8px; background: var(--s2); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s, background .15s } .btn:hover { background: var(--s3) }
.btn.primary { background: var(--accent); color: var(--on-accent) } .btn.primary:hover { opacity: .9 } .btn[disabled] { opacity: .4; cursor: not-allowed }
.btn.sm { height: 28px; padding: 0 12px; font-size: 12px }

.top { position: sticky; top: 0; z-index: 10; height: 58px; display: flex; align-items: center; gap: 28px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(5,5,5,.9); backdrop-filter: blur(12px) }
.logo { display: flex; align-items: center; gap: 9px; font: 700 19px var(--font); letter-spacing: -.03em } .logo img { width: 26px; height: 26px }
.top nav { display: flex; gap: 2px } .top nav a { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; color: var(--muted); font-weight: 500 } .top nav a.on { color: var(--text); background: var(--s2) } .top nav a:hover { color: var(--text) }
.top .right { margin-left: auto; display: flex; gap: 8px; align-items: center }
.net { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--s1); color: var(--muted); font-size: 13px } .net img { width: 16px; height: 16px }

.trade { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; height: calc(100vh - 58px) }
.markets { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0 }
.search { margin: 12px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); outline: none } .search:focus { border-color: rgba(255,59,31,.6) }
.mhead { display: grid; grid-template-columns: 1fr 96px 58px; padding: 0 14px 8px; font-size: 11px; color: var(--muted) } .mhead span + span { text-align: right }
.mlist { overflow-y: auto; flex: 1 }
.mrow { display: grid; grid-template-columns: 1fr 96px 58px; align-items: center; padding: 9px 14px; cursor: pointer; border-left: 2px solid transparent } .mrow:hover { background: var(--s1) } .mrow.on { background: var(--s1); border-left-color: var(--accent) }
.mrow .c { display: flex; align-items: center; gap: 9px; min-width: 0 } .mrow img { width: 24px; height: 24px; border-radius: 50%; background: var(--s2); flex: none } .mrow b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .mrow small { display: block; color: var(--muted); font-size: 11px }
.mrow .p, .mrow .ch { text-align: right; font: 12px var(--mono) }
.pad { padding: 14px }

.center { display: flex; flex-direction: column; min-width: 0; min-height: 0 }
.mtitle { display: flex; align-items: center; gap: 22px; padding: 12px 18px; border-bottom: 1px solid var(--line); min-height: 62px; flex-wrap: wrap }
.mtitle .who { display: flex; align-items: center; gap: 10px } .mtitle img { width: 32px; height: 32px; border-radius: 50%; background: var(--s2) } .mtitle b { font-size: 18px; font-weight: 700; letter-spacing: -.02em } .mtitle small { display: block; color: var(--muted); font-size: 12px }
.mtitle .st span { display: block; color: var(--muted); font-size: 11px } .mtitle .st strong { font: 500 14px var(--mono) }
.chartbox { position: relative; flex: 1; min-height: 280px; border-bottom: 1px solid var(--line) }
.tf { position: absolute; top: 10px; left: 14px; z-index: 2; display: flex; gap: 2px; background: var(--s1); padding: 3px; border-radius: 8px } .tf a { padding: 4px 10px; border-radius: 6px; color: var(--muted); font-size: 12px } .tf a.on { background: var(--s3); color: var(--text) }
#chart { position: absolute; inset: 0; width: 100%; height: 100% }
.chartmsg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none }
.lower { height: 260px; display: flex; flex-direction: column; min-height: 0 }
.ltabs { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line) } .ltabs a { padding: 12px 0; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent } .ltabs a.on { color: var(--text); border-color: var(--accent) }
#lbody { overflow-y: auto; flex: 1 }
table.t { width: 100%; border-collapse: collapse; font-size: 13px } table.t th { text-align: right; font-weight: 400; color: var(--muted); font-size: 11px; padding: 8px 18px } table.t td { text-align: right; padding: 9px 18px; border-top: 1px solid var(--line); font-family: var(--mono); white-space: nowrap } table.t th:first-child, table.t td:first-child { text-align: left }
.tagb { color: var(--up) } .tags { color: var(--down) } .st1 { color: var(--text) } .st2 { color: var(--up) } .st3 { color: var(--muted) }

.ticket { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--s1); padding: 4px; border-radius: 10px } .side a { height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-weight: 600; color: var(--muted) }
.side a.on[data-s=buy] { background: rgba(47,214,138,.14); color: var(--up) } .side a.on[data-s=sell] { background: rgba(255,84,104,.14); color: var(--down) }
.field { display: block; background: var(--s1); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; position: relative } .field:focus-within { border-color: rgba(255,59,31,.55) }
.field > span { font-size: 12px; color: var(--muted) } .field .bal { position: absolute; right: 12px; top: 10px; font-size: 12px }
.field .row { display: flex; align-items: center; gap: 8px; margin-top: 4px } .field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: 500 22px var(--mono) } .field .row b { font-size: 13px; color: var(--muted); font-weight: 600 }
.field.small { padding-bottom: 12px }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px } .chips a { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 6px; background: var(--s1); color: var(--muted); font-size: 12px } .chips a:hover { color: var(--text); background: var(--s2) }
.exp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px } .exp a { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--s2); color: var(--muted); font-size: 12px } .exp a.on { background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,59,31,.5) }
.sum { display: grid; gap: 7px; font-size: 13px } .sum div { display: flex; justify-content: space-between } .sum span:first-child { color: var(--muted) } .sum span:last-child { font-family: var(--mono) }
.go { height: 48px; border-radius: 10px; font-size: 15px }
.note { color: var(--muted); font-size: 12px; line-height: 1.5 }

.orders { max-width: 1100px; margin: 0 auto; padding: 36px 20px 80px } .orders h1 { font: 700 32px var(--font); letter-spacing: -.03em } .orders > p { margin: 8px 0 24px }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; z-index: 40; transition: .25s; pointer-events: none; max-width: 92vw } .toast.on { opacity: 1; transform: translate(-50%, 0) } .toast.bad { border-color: rgba(255,84,104,.6) }

@media (max-width: 1100px) { .trade { grid-template-columns: 240px minmax(0, 1fr) 320px } }
@media (max-width: 860px) {
  .trade { display: flex; flex-direction: column; height: auto } .markets { border-right: 0; border-bottom: 1px solid var(--line) } .mlist { max-height: 260px } .chartbox { height: 320px; flex: none } .ticket { border-left: 0; border-top: 1px solid var(--line) } .lower { height: auto; max-height: 360px }
  .top nav, .net { display: none } .top { gap: 12px }
}