:root {
  color-scheme: dark;
  --bg: #07100f;
  --surface: #0c1716;
  --surface-2: #111d1d;
  --surface-3: #162321;
  --text: #eef7f3;
  --muted: #82958e;
  --line: rgba(181, 218, 204, .12);
  --brand: #24e6ba;
  --brand-2: #86ffd9;
  --purple: #7178ff;
  --gold: #e5b862;
  --red: #ff6577;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
  --radius: 24px;
  --field: #091311;
  --field-soft: #0a1412;
  --sidebar-bg: rgba(7,16,15,.74);
  --glass: rgba(12,23,22,.92);
  --overlay: rgba(2,7,6,.75);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; overflow-x: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; border-radius: 50%; filter: blur(110px); opacity: .14; pointer-events: none; }
.ambient-a { width: 560px; height: 560px; background: #00e6b0; top: -260px; right: -180px; }
.ambient-b { width: 420px; height: 420px; background: #6670ff; bottom: -220px; left: 18%; }

.app-shell { width: min(1540px, 100%); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 220px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 32px 22px; border-right: 1px solid var(--line); background: var(--sidebar-bg); backdrop-filter: blur(20px); display: flex; flex-direction: column; z-index: 10; }
.brand { border: 0; background: transparent; display: flex; align-items: center; text-align: left; cursor: pointer; padding: 0 8px; }
.brand-logo { display: block; width: 156px; max-width: 100%; height: auto; padding: 7px 9px; border-radius: 5px; background: #fff; }
.side-nav { display: grid; gap: 9px; margin-top: 64px; }
.nav-item { border: 1px solid transparent; background: transparent; color: var(--muted); height: 50px; border-radius: 14px; padding: 0 15px; text-align: left; cursor: pointer; transition: .2s ease; }
.nav-item span { display: inline-grid; place-items: center; width: 25px; margin-right: 10px; font-size: 21px; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.025); }
.nav-item.active { color: var(--brand); border-color: rgba(36,230,186,.15); background: linear-gradient(90deg, rgba(36,230,186,.13), rgba(36,230,186,.02)); }
.demo-note { margin-top: auto; border: 1px solid var(--line); background: var(--surface); padding: 14px; border-radius: 15px; display: flex; gap: 10px; align-items: center; }
.demo-note strong, .demo-note small { display: block; }
.demo-note strong { font-size: 12px; }.demo-note small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(36,230,186,.09); }

.main { min-width: 0; padding: 34px clamp(28px, 4vw, 64px) 70px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.eyebrow { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .18em; margin: 0 0 7px; }
.topbar h1 { font-size: clamp(24px, 3vw, 34px); margin: 0; letter-spacing: -.04em; }
.top-actions { display: flex; gap: 12px; }
.icon-button, .profile-chip { border: 1px solid var(--line); background: rgba(15,28,26,.72); cursor: pointer; }
.icon-button { width: 44px; border-radius: 14px; font-size: 18px; }
.notification-button { position: relative; }.notification-button i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--red); right: 9px; top: 9px; box-shadow: 0 0 0 3px var(--surface); }
.profile-chip { padding: 7px 13px 7px 7px; border-radius: 15px; display: flex; align-items: center; gap: 9px; text-align: left; }
.profile-chip strong,.profile-chip small { display: block; }.profile-chip strong { font-size: 12px; }.profile-chip small { color: var(--muted); margin-top: 2px; font-size: 9px; }
.avatar { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, var(--brand), #097864); color: #052019; font-weight: 900; }
.avatar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.page { display: none; animation: fadeIn .3s ease; }.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }

.hero-card { min-height: 370px; padding: clamp(30px, 5vw, 62px); border: 1px solid rgba(36,230,186,.12); border-radius: 30px; background: radial-gradient(circle at 72% 20%, rgba(36,230,186,.17), transparent 32%), linear-gradient(125deg, #101d1a 0%, #0b1514 60%, #101b23 100%); display: grid; grid-template-columns: 1.15fr .85fr; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero-card:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, black, transparent); }
.hero-copy { position: relative; z-index: 2; align-self: center; }
.pill { display: inline-block; color: var(--brand); background: rgba(36,230,186,.09); border: 1px solid rgba(36,230,186,.17); border-radius: 999px; padding: 8px 12px; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.hero-copy h2 { margin: 20px 0 15px; font-size: clamp(42px, 5vw, 70px); line-height: 1.02; letter-spacing: -.07em; }
.hero-copy h2 em { font-style: normal; color: var(--brand); }
.hero-copy p { max-width: 500px; color: #9baba6; line-height: 1.8; font-size: 14px; }
.hero-actions,.asset-actions { display: flex; gap: 10px; margin-top: 25px; flex-wrap: wrap; }
.primary-button,.ghost-button { border-radius: 13px; padding: 13px 20px; cursor: pointer; font-weight: 800; font-size: 12px; border: 1px solid transparent; }
.primary-button { background: var(--brand); color: #062019; box-shadow: 0 10px 28px rgba(36,230,186,.17); }.primary-button:hover { background: var(--brand-2); }
.ghost-button { background: rgba(255,255,255,.03); border-color: var(--line); }.ghost-button:hover { border-color: rgba(36,230,186,.35); }
.hero-visual { position: relative; min-height: 260px; }
.orbit { position: absolute; border: 1px solid rgba(36,230,186,.22); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 330px; height: 140px; top: 50px; right: 0; }.orbit-two { width: 260px; height: 260px; top: 0; right: 20px; border-style: dashed; opacity: .55; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(342deg); } }
.coin { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #2c1b00; background: radial-gradient(circle at 32% 25%, #ffe595, #d69426 50%, #73420c); box-shadow: 0 22px 60px rgba(0,0,0,.5), inset 0 0 0 6px rgba(255,255,255,.14); font-family: Georgia, serif; }
.coin-main { width: 146px; height: 146px; right: 85px; top: 55px; font-size: 72px; transform: rotate(8deg); }.coin-small { width: 70px; height: 70px; right: 6px; top: 20px; font-size: 28px; opacity: .85; }
.metric-float { position: absolute; right: 0; bottom: 10px; width: 190px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(7,16,15,.72); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.metric-float span,.metric-float strong,.metric-float small { display: block; }.metric-float span { color: var(--muted); font-size: 9px; }.metric-float strong { font-size: 18px; margin: 6px 0; }.metric-float small { color: var(--brand); }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 45px; }
.trust-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 16px 0 18px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.trust-strip > span { min-height: 72px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; align-items: end; column-gap: 9px; padding: 14px 16px; background: var(--surface); }.trust-strip i { grid-row: 1/3; align-self: center; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--brand); background: rgba(36,230,186,.08); font-style: normal; font-size: 12px; }.trust-strip b { font-size: 10px; }.trust-strip small { color: var(--muted); font-size: 8px; align-self: start; margin-top: 3px; }
.quick-card { min-height: 118px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 19px; padding: 20px; cursor: pointer; transition: .22s ease; }
.quick-card:hover { transform: translateY(-3px); border-color: rgba(36,230,186,.28); }
.quick-card b,.quick-card small { display: block; }.quick-card b { margin: 12px 0 5px; font-size: 13px; }.quick-card small { color: var(--muted); font-size: 10px; }
.quick-icon { font-size: 19px; }.cyan { color: var(--brand); }.violet { color: #8187ff; }.amber { color: var(--gold); }.green { color: #55e891; }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 24px 0 15px; }.section-head h3 { font-size: 21px; margin: 0; }.section-head.compact { margin-top: 28px; }
.text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }.text-button:hover { color: var(--brand); }

.market-table { border: 1px solid var(--line); background: var(--surface); border-radius: 21px; overflow: hidden; }
.market-row { display: grid; grid-template-columns: minmax(180px,1.5fr) 1fr 1fr 1.2fr 55px; align-items: center; min-height: 74px; padding: 0 20px; border-bottom: 1px solid var(--line); cursor: pointer; transition: .2s; }.market-row:last-child { border-bottom: 0; }.market-row:not(.market-header):hover { background: rgba(255,255,255,.025); }
.market-header { min-height: 46px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; cursor: default; }
.asset-name { display: flex; align-items: center; gap: 12px; }.asset-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); font-size: 19px; }.asset-name b,.asset-name small { display: block; }.asset-name b { font-size: 12px; }.asset-name small { color: var(--muted); font-size: 9px; margin-top: 3px; }.market-row > span { font-size: 12px; }.positive { color: var(--brand)!important; }.negative { color: var(--red)!important; }.mini-chart { width: 110px; height: 36px; }.mini-chart path { fill: none; stroke-width: 2.3; }.trade-arrow { color: var(--muted); font-size: 19px; }

.market-toolbar { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 17px; }.search-box { width: min(440px, 100%); height: 47px; display: flex; gap: 10px; align-items: center; padding: 0 15px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; }.search-box span { color: var(--muted); font-size: 20px; }.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.segment { display: flex; padding: 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; }.segment button { border: 0; background: transparent; color: var(--muted); border-radius: 9px; padding: 8px 13px; cursor: pointer; font-size: 10px; }.segment button.active { color: var(--text); background: var(--surface-3); box-shadow: 0 5px 12px rgba(0,0,0,.2); }.segment.mini button { padding: 6px 10px; }
.market-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-bottom: 17px; }.market-summary article { border: 1px solid var(--line); background: var(--surface); border-radius: 17px; padding: 18px 20px; }.market-summary small,.market-summary strong,.market-summary span { display: block; }.market-summary small { color: var(--muted); font-size: 9px; }.market-summary strong { font-size: 22px; margin: 8px 0 4px; }.market-summary span { color: var(--muted); font-size: 9px; }

.trade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }.chart-card,.order-panel,.allocation-card,.account-card { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.chart-card { overflow: hidden; }.symbol-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 12px; }.symbol-name { display: flex; align-items: center; gap: 12px; }.symbol-name > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gold); color: #271800; font-weight: 900; }.symbol-name h3 { margin: 0; font-size: 17px; }.symbol-name small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.symbol-price { text-align: right; }.symbol-price strong,.symbol-price span { display: block; }.symbol-price strong { font-size: 22px; }.symbol-price span { font-size: 10px; margin-top: 4px; }
.ohlc { display: flex; gap: 22px; padding: 0 24px 13px; border-bottom: 1px solid var(--line); }.ohlc span { color: var(--muted); font-size: 9px; }.ohlc b { margin-left: 4px; color: #bbc8c3; font-weight: 600; }
.timeframes { padding: 10px 18px 0; display: flex; gap: 4px; }.timeframes button { border: 0; color: var(--muted); background: transparent; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 9px; }.timeframes button.active { color: var(--brand); background: rgba(36,230,186,.08); }
.chart-wrap { height: 365px; position: relative; overflow: hidden; }.chart-grid { position: absolute; inset: 14px 0 20px; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 100% 25%, 16.666% 100%; opacity: .55; }.chart-wrap svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.order-panel { padding: 18px; }.order-panel label { display: block; color: var(--muted); font-size: 10px; margin: 16px 0 8px; }.order-panel select,.amount-input { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); height: 44px; padding: 0 12px; outline: 0; }
.order-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 4px; background: #091211; border-radius: 12px; }.order-tabs button { border: 0; background: transparent; color: var(--muted); padding: 10px; border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 800; }.order-tabs button.active[data-direction="up"] { background: rgba(36,230,186,.14); color: var(--brand); }.order-tabs button.active[data-direction="down"] { background: rgba(255,101,119,.13); color: var(--red); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.option-grid button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px; padding: 11px; color: var(--text); text-align: left; cursor: pointer; }.option-grid button.active { border-color: rgba(36,230,186,.55); background: rgba(36,230,186,.07); }.option-grid b,.option-grid small { display: block; }.option-grid b { font-size: 11px; }.option-grid small { color: var(--muted); font-size: 8px; margin-top: 4px; }
.amount-input { display: flex; align-items: center; }.amount-input span { color: var(--muted); }.amount-input input { min-width: 0; width: 100%; padding-left: 7px; border: 0; outline: 0; background: transparent; color: var(--text); }
.amount-chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 7px; }.amount-chips button { border: 1px solid var(--line); color: var(--muted); background: transparent; border-radius: 8px; padding: 6px 0; cursor: pointer; font-size: 8px; }
.order-preview { display: flex; justify-content: space-between; margin: 17px 0 12px; }.order-preview span { color: var(--muted); font-size: 8px; }.order-preview b { display: block; color: var(--text); font-size: 11px; margin-top: 4px; }.submit-order { width: 100%; height: 46px; border: 0; border-radius: 12px; font-weight: 900; cursor: pointer; }.submit-order.up { background: var(--brand); color: #052219; }.submit-order.down { background: var(--red); color: #26060b; }.risk-copy { color: #61716b; font-size: 8px; text-align: center; line-height: 1.5; }
.orders-list,.ledger { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }.order-row,.ledger-row { display: grid; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }.order-row { grid-template-columns: 1.1fr .8fr .8fr .8fr 80px; }.ledger-row { grid-template-columns: 1.2fr .8fr .8fr; }.order-row:last-child,.ledger-row:last-child { border-bottom: 0; }.order-row span,.ledger-row span { font-size: 10px; color: var(--muted); }.order-row b,.ledger-row b { display: block; color: var(--text); margin-bottom: 4px; }.order-badge { justify-self: end; border-radius: 999px; padding: 6px 9px; background: rgba(229,184,98,.1); color: var(--gold)!important; }.empty-state { padding: 30px; text-align: center; color: var(--muted); font-size: 11px; }

.asset-hero { padding: clamp(26px, 4vw, 42px); border: 1px solid rgba(36,230,186,.16); border-radius: 25px; background: radial-gradient(circle at 78% 40%, rgba(36,230,186,.12), transparent 30%), linear-gradient(120deg,#101e1b,#0c1615); display: flex; justify-content: space-between; align-items: center; }.asset-value { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; }.asset-value small { color: var(--muted); font-size: 16px; margin-top: 8px; }.asset-value strong { font-size: clamp(38px, 5vw, 58px); letter-spacing: -.05em; }.asset-hero p { color: var(--muted); font-size: 11px; }.asset-actions { margin-top: 0; }
.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }.allocation-card,.account-card { padding: 22px; }.card-title { display: flex; align-items: center; justify-content: space-between; }.card-title h3 { font-size: 15px; margin: 0; }.card-title > span { color: var(--muted); font-size: 9px; }.status-chip { color: var(--brand)!important; background: rgba(36,230,186,.08); padding: 6px 9px; border-radius: 999px; }
.allocation-body { display: flex; align-items: center; gap: 34px; padding-top: 20px; }.donut { width: 128px; height: 128px; flex: 0 0 auto; padding: 14px; border-radius: 50%; background: conic-gradient(var(--brand) 0 62%,var(--purple) 62% 83%,var(--gold) 83% 94%,#d966ff 94%); }.donut > div { height: 100%; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; }.donut strong,.donut small { display: block; }.donut strong { font-size: 23px; }.donut small { color: var(--muted); font-size: 8px; }.allocation-body ul { list-style: none; margin: 0; padding: 0; flex: 1; }.allocation-body li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; font-size: 10px; }.allocation-body li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }.allocation-body li span { color: var(--muted); }
.account-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }.account-stats span { background: var(--surface-2); border-radius: 12px; padding: 14px; }.account-stats small,.account-stats b { display: block; }.account-stats small { color: var(--muted); font-size: 8px; }.account-stats b { margin-top: 7px; font-size: 12px; }
.ledger-row > span:last-child { text-align: right; }.ledger-row b { font-size: 11px; }.ledger-row time { display: block; font-size: 8px; color: var(--muted); margin-top: 4px; }
.section-note { color: var(--muted); font-size: 9px; }.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.service-grid button { display: grid; grid-template-columns: 37px 1fr 15px; grid-template-rows: 1fr 1fr; align-items: end; gap: 0 11px; padding: 16px; min-height: 78px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); text-align: left; cursor: pointer; transition: .2s; }.service-grid button:hover { border-color: rgba(36,230,186,.25); transform: translateY(-2px); }.service-grid button > span { grid-row: 1/3; align-self: center; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-3); color: var(--brand); }.service-grid b { font-size: 10px; }.service-grid small { color: var(--muted); font-size: 8px; align-self: start; margin-top: 4px; }.service-grid i { grid-row: 1/3; grid-column: 3; align-self: center; color: var(--muted); font-style: normal; }

.site-footer { margin-top: 54px; padding: 34px 4px 10px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 28px; }.site-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }.site-footer .footer-brand { padding: 0; pointer-events: none; }.site-footer .footer-brand .brand-logo { width: 132px; padding: 6px 8px; }.site-footer p { max-width: 300px; color: var(--muted); line-height: 1.65; font-size: 9px; }.site-footer b { font-size: 10px; margin-bottom: 3px; }.site-footer button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }.site-footer button:hover { color: var(--brand); }.site-footer small { color: var(--muted); font-size: 8px; }.footer-status { display:flex;align-items:center;gap:7px;color:var(--brand);font-size:9px}.footer-status i { width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(36,230,186,.08) }

.mobile-nav { display: none; }.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--overlay); backdrop-filter: blur(8px); place-items: center; padding: 18px; }.modal-backdrop:not([hidden]) { display: grid; }.modal { width: min(410px,100%); padding: 30px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 24px; box-shadow: var(--shadow); position: relative; text-align: center; }.modal-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 25px; cursor: pointer; }.modal-icon { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 16px; display: grid; place-items: center; background: rgba(36,230,186,.1); color: var(--brand); font-size: 26px; }.modal h3 { margin: 0 0 8px; }.modal > p { color: var(--muted); font-size: 11px; line-height: 1.6; }.full-button { width: 100%; margin-top: 12px; }.modal-form,#walletFields { display: grid; gap: 10px; }.modal-form { margin: 18px 0; text-align: left; }.modal-form label { display:block; color: var(--muted); font-size: 9px; }.modal-form input,.modal-form select,.modal-form textarea,.display-field { width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--line); background: var(--field-soft); color: var(--text); border-radius: 11px; outline: 0; }.display-field { display:flex;align-items:center;color:var(--text);font-weight:700 }.modal-form textarea{padding-top:11px;min-height:90px;resize:vertical}.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(36,230,186,.1)}
.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translate(-50%,30px); opacity: 0; padding: 11px 17px; background: #effff9; color: #09271e; border-radius: 999px; font-size: 11px; font-weight: 800; transition: .25s ease; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%,0); }
.settings-list { display: grid; gap: 8px; margin: 18px 0; }.settings-list button,.settings-item { width: 100%; padding: 13px; border: 1px solid var(--line); background: var(--field-soft); color: var(--text); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; text-align: left; }.settings-list button { cursor: pointer; }.settings-list b,.settings-list small { display: block; }.settings-list b { font-size: 10px; }.settings-list small { color: var(--muted); font-size: 8px; margin-top: 4px; }.settings-list i { color: var(--muted); font-style: normal; }.verify-panel { margin: 18px 0; text-align: left; }.verify-badge { display: inline-block; padding: 7px 9px; border-radius: 999px; color: var(--brand); background: rgba(36,230,186,.08); font-size: 9px; }.verify-panel p { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 11px 2px; margin: 0; }.verify-panel b,.verify-panel small { font-size: 9px; }.verify-panel small { color: var(--muted); }.notification-list { margin: 16px 0; text-align: left; }.notification-list p { display: flex; gap: 10px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }.notification-list p > i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--brand); }.notification-list b,.notification-list small,.notification-list time { display: block; }.notification-list b { font-size: 10px; }.notification-list small { color: var(--muted); font-size: 8px; margin: 5px 0; line-height: 1.5; }.notification-list time { color: #53645e; font-size: 7px; }.legal-copy { margin: 18px 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--field-soft); color: var(--muted); font-size: 9px; line-height: 1.8; text-align: left; }
.service-flow { margin: 18px 0; text-align: left; }.support-agent { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(36,230,186,.16); border-radius: 13px; background: rgba(36,230,186,.05); }.support-agent > span,.chat-head > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg,var(--brand),#168b73); color: #05251b; font-weight: 900; }.support-agent b,.support-agent small { display: block; }.support-agent b { font-size: 10px; }.support-agent small { color: var(--muted); font-size: 8px; margin-top: 4px; }.support-agent small i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--brand); }.service-flow ol { list-style: none; padding: 3px 0; margin: 12px 0; }.service-flow li { display: flex; align-items: center; gap: 11px; padding: 8px 2px; }.service-flow li > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: var(--surface-3); font-size: 9px; }.service-flow p { margin: 0; }.service-flow b,.service-flow small { display: block; }.service-flow b { font-size: 9px; }.service-flow small { color: var(--muted); margin-top: 3px; font-size: 8px; }.flow-notice { padding: 10px; border-radius: 9px; background: rgba(229,184,98,.07); color: #c9ae75; font-size: 8px; line-height: 1.5; }.chat-demo { margin: 17px 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; text-align: left; }.chat-head { display: flex; align-items: center; gap: 10px; padding: 11px; border-bottom: 1px solid var(--line); }.chat-head > span { width: 32px; height: 32px; border-radius: 9px; }.chat-head p { margin: 0; }.chat-head b,.chat-head small { display: block; font-size: 9px; }.chat-head small { color: var(--brand); margin-top: 3px; font-size: 7px; }.chat-body { min-height: 150px; max-height: 220px; overflow-y: auto; padding: 12px; background: var(--field); }.chat-body p { width: fit-content; max-width: 80%; padding: 9px 11px; margin: 7px 0; border-radius: 11px; font-size: 8px; line-height: 1.5; }.agent-message { background: var(--surface-3); border-bottom-left-radius: 3px!important; }.user-message { margin-left: auto!important; background: rgba(36,230,186,.14); color: var(--brand); border-bottom-right-radius: 3px!important; }.chat-compose { display: grid; grid-template-columns: 1fr 60px; gap: 7px; padding: 9px; }.chat-compose input { min-width: 0; border: 1px solid var(--line); background: var(--field); color: var(--text); border-radius: 9px; padding: 0 10px; font-size: 9px; }.chat-compose button { border: 0; border-radius: 9px; background: var(--brand); color: #05251b; font-size: 9px; font-weight: 800; cursor: pointer; }.withdraw-summary { margin: 16px 0; padding: 15px; border-radius: 13px; text-align: left; background: linear-gradient(120deg,rgba(36,230,186,.12),rgba(36,230,186,.03)); border: 1px solid rgba(36,230,186,.13); }.withdraw-summary small,.withdraw-summary strong { display: block; }.withdraw-summary small { color: var(--muted); font-size: 8px; }.withdraw-summary strong { margin-top: 6px; font-size: 24px; }.withdraw-form select { width: 100%; height: 44px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); color: var(--text); outline: 0; }.withdraw-input { display: grid; grid-template-columns: 20px 1fr 42px; align-items: center; height: 44px; margin-top: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }.withdraw-input input { height: 40px!important; padding: 0!important; margin: 0!important; border: 0!important; }.withdraw-input button { border: 0; color: var(--brand); background: transparent; font-size: 8px; cursor: pointer; }.withdraw-detail { display: flex; justify-content: space-between; padding: 4px 2px; }.withdraw-detail span { color: var(--muted); font-size: 8px; }.withdraw-detail b { display: block; color: var(--text); margin-top: 4px; font-size: 10px; }
.language-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 12px; }.language-grid button,.currency-row { min-height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--field-soft); color: var(--text); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }.language-grid button:hover,.language-grid button.active { border-color: rgba(36,230,186,.42); background: rgba(36,230,186,.06); }.language-grid button span { font-size: 9px; }.language-grid button i,.currency-row i { color: var(--muted); font-style: normal; }.language-grid button.active i { color: var(--brand); }.currency-row { text-align: left; cursor: default; }.currency-row b,.currency-row small { display: block; }.currency-row b { font-size: 9px; }.currency-row small { margin-top: 3px; color: var(--muted); font-size: 7px; }

.auth-gate { position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at 15% 15%,rgba(36,230,186,.15),transparent 25%),radial-gradient(circle at 85% 80%,rgba(113,120,255,.15),transparent 24%),#07100f; display: grid; place-items: center; padding: 75px 18px 52px; overflow-y: auto; }.auth-gate[hidden] { display: none; }.auth-brand { position: absolute; top: 28px; left: 34px; display: flex; align-items: center; }.auth-brand .brand-logo { width: 156px; }.auth-card { width: min(430px,100%); padding: 34px; border: 1px solid var(--line); border-radius: 25px; background: var(--glass); box-shadow: 0 35px 100px rgba(0,0,0,.5); position: relative; }.auth-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }.auth-card h2 { margin: 5px 0 7px; font-size: 27px; }.auth-card > p { margin: 0 0 22px; color: var(--muted); font-size: 10px; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }.auth-tabs button { border: 0; border-radius: 9px; padding: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }.auth-tabs button.active { color: var(--text); background: var(--surface-3); }.auth-card form > label { display: block; color: var(--muted); font-size: 9px; margin: 12px 0; }.auth-card form > label input { width: 100%; height: 44px; padding: 0 12px; margin-top: 7px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--field); color: var(--text); }.auth-options { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; }.auth-options label { color: var(--muted); font-size: 8px; }.auth-options button { border: 0; background: transparent; color: var(--brand); font-size: 8px; cursor: pointer; }.auth-submit { width: 100%; }.auth-security { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px; border-radius: 11px; background: rgba(36,230,186,.05); color: var(--brand); }.auth-security p { margin: 0; }.auth-security b,.auth-security small { display: block; }.auth-security b { font-size: 9px; }.auth-security small { color: var(--muted); font-size: 7px; margin-top: 3px; }.auth-legal { position: absolute; bottom: 20px; color: var(--muted); font-size: 8px; text-align: center; }
.auth-language-switcher{position:absolute;top:25px;right:34px;display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--glass);color:var(--text);z-index:2}.auth-language-switcher span{font-size:15px}.auth-language-switcher select{max-width:150px;border:0;outline:0;background:transparent;color:var(--text);font-size:11px;cursor:pointer}.auth-language-switcher option{background:var(--surface);color:var(--text)}

body.light { --bg:#edf2f0; --surface:#f9fcfb; --surface-2:#eef4f2; --surface-3:#e4eeeb; --text:#12201c; --muted:#667a73; --line:rgba(10,45,35,.14); --shadow:0 24px 70px rgba(23,55,45,.12); --field:#ffffff; --field-soft:#f5f9f7; --sidebar-bg:rgba(242,247,245,.88); --glass:rgba(249,252,251,.94); --overlay:rgba(18,32,28,.32); color-scheme:light; }
.light .hero-card,.light .asset-hero { color:#edf7f3; }.light .hero-copy p,.light .asset-hero p { color:#a8bab4; }.light .modal { background:#f9fcfb; }.light .chart-grid { opacity:.8; }

@media (max-width: 1000px) { .app-shell { grid-template-columns: 82px 1fr; }.sidebar { padding: 28px 13px; }.brand > span:last-child,.nav-item:not(.active)::after,.nav-item { font-size: 0; }.brand { justify-content:center; }.nav-item { text-align:center;padding:0;}.nav-item span { margin:0;font-size:21px;}.demo-note div{display:none}.demo-note{justify-content:center}.hero-card{grid-template-columns:1fr .72fr}.quick-grid{grid-template-columns:1fr 1fr}.trust-strip{grid-template-columns:1fr 1fr}.trade-layout{grid-template-columns:1fr}.order-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.order-tabs,.submit-order,.risk-copy,.order-preview{grid-column:1/-1}.asset-grid{grid-template-columns:1fr}.site-footer{grid-template-columns:2fr 1fr 1fr}.site-footer>div:last-child{display:none} }
@media (max-width: 720px) { body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}.app-shell{display:block}.sidebar{display:none}.main{padding:20px 15px 28px}.topbar{margin-bottom:22px}.topbar h1{font-size:25px}.profile-chip > span:last-child{display:none}.hero-card{grid-template-columns:1fr;min-height:480px;padding:28px 24px}.hero-copy h2{font-size:43px}.hero-copy p{font-size:12px}.hero-visual{min-height:190px}.coin-main{width:110px;height:110px;right:50px;top:40px;font-size:52px}.coin-small{right:5px}.orbit-one{width:280px}.orbit-two{width:210px;height:210px}.metric-float{right:0;bottom:-8px}.quick-grid{gap:9px;margin-bottom:35px}.trust-strip{grid-template-columns:1fr 1fr}.quick-card{min-height:108px;padding:15px}.market-row{grid-template-columns:1.5fr 1fr .8fr 25px;padding:0 13px}.market-row .volume,.market-row .mini-chart{display:none}.market-toolbar{display:grid}.market-toolbar .segment{overflow-x:auto}.market-summary{grid-template-columns:1fr 1fr}.market-summary article:last-child{grid-column:1/-1}.ohlc{overflow-x:auto;gap:16px}.chart-wrap{height:310px}.order-panel{display:block}.asset-hero{display:block}.asset-actions{margin-top:20px}.allocation-body{gap:18px}.donut{width:108px;height:108px}.service-grid{grid-template-columns:1fr 1fr}.site-footer{grid-template-columns:1fr 1fr}.site-footer>div:first-child{grid-column:1/-1}.mobile-nav{position:fixed;z-index:50;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));height:62px;padding:5px 8px;border:1px solid var(--line);border-radius:19px;background:rgba(12,23,22,.94);backdrop-filter:blur(18px);display:flex;justify-content:space-around;box-shadow:var(--shadow)}.mobile-nav button{min-width:58px;border:0;background:transparent;color:var(--muted);font-size:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.mobile-nav span{font-size:18px}.mobile-nav button.active{color:var(--brand)}.mobile-nav .trade-fab{width:58px;height:58px;margin-top:-17px;border-radius:18px;background:var(--brand);color:#062019;box-shadow:0 12px 30px rgba(36,230,186,.25)}.mobile-nav .trade-fab.active{color:#062019}.order-row{grid-template-columns:1fr 1fr 70px}.order-row span:nth-child(3),.order-row span:nth-child(4){display:none}.ledger-row{grid-template-columns:1.2fr .8fr}.ledger-row span:nth-child(2){display:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.primary-button,.ghost-button{padding:12px 10px}.section-head{align-items:center}}
@media (max-width:420px){.quick-grid{grid-template-columns:1fr 1fr}.quick-card small{line-height:1.4}.trust-strip{grid-template-columns:1fr}.hero-copy h2{font-size:38px}.asset-value strong{font-size:40px}.account-stats{grid-template-columns:1fr 1fr}.allocation-body{display:grid;grid-template-columns:110px 1fr}.service-grid{grid-template-columns:1fr}.modal,.auth-card{padding:25px 20px}}

.auth-terms{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:8px!important;font-size:12px!important}.auth-terms[hidden]{display:none!important}.auth-terms input{width:auto!important;margin-top:2px}.kyc-status{padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;background:rgba(255,255,255,.025)}.kyc-status strong,.kyc-status small{display:block}.kyc-status small{color:var(--muted);margin-top:4px}.kyc-upload{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kyc-upload label{min-height:96px;justify-content:center;border:1px dashed rgba(255,255,255,.18);border-radius:12px;padding:12px}.kyc-upload input{font-size:11px}@media(max-width:560px){.kyc-upload{grid-template-columns:1fr}}

.register-only[hidden]{display:none!important}

.wallet-detail{display:grid;gap:0;margin:18px 0;text-align:left;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--field-soft)}.wallet-detail p{display:flex;justify-content:space-between;gap:18px;margin:0;padding:13px 14px;border-bottom:1px solid var(--line)}.wallet-detail p:last-child{border-bottom:0}.wallet-detail span{color:var(--muted);font-size:9px}.wallet-detail b{max-width:68%;font-size:10px;text-align:right;overflow-wrap:anywhere}.wallet-detail .bank-number{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}
.wallet-status{display:inline-flex;margin-left:8px;padding:3px 7px;border-radius:999px;font-size:8px;font-style:normal;vertical-align:middle;background:rgba(229,184,98,.14);color:#d6aa55}.wallet-status.active{background:rgba(36,230,186,.12);color:var(--brand)}.wallet-status.rejected,.wallet-status.disabled{background:rgba(255,112,137,.12);color:#ff7089}.wallet-review-state{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:12px;text-align:left;background:rgba(229,184,98,.08);border:1px solid rgba(229,184,98,.2)}.wallet-review-state b{font-size:10px;color:#d6aa55;white-space:nowrap}.wallet-review-state span{font-size:9px;color:var(--muted)}.wallet-review-state.active{background:rgba(36,230,186,.07);border-color:rgba(36,230,186,.18)}.wallet-review-state.active b{color:var(--brand)}.wallet-review-state.rejected,.wallet-review-state.disabled{background:rgba(255,112,137,.07);border-color:rgba(255,112,137,.18)}.wallet-review-state.rejected b,.wallet-review-state.disabled b{color:#ff7089}


input::placeholder,textarea::placeholder{color:var(--muted);opacity:.72}
input,select,textarea{caret-color:var(--brand)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.auth-card form>label input:focus,.search-box:focus-within,.order-panel select:focus,.amount-input:focus-within,.chat-compose input:focus,.withdraw-form select:focus,.withdraw-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(36,230,186,.1)}
.light .icon-button,.light .profile-chip{background:var(--glass)}
.light .metric-float{background:rgba(245,250,248,.88);color:var(--text)}
.light .auth-gate{background:radial-gradient(circle at 15% 15%,rgba(36,230,186,.12),transparent 25%),radial-gradient(circle at 85% 80%,rgba(113,120,255,.1),transparent 24%),var(--bg)}
.light .mobile-nav{background:var(--glass)}
.light .order-tabs{background:var(--surface-2)}

/* Desktop WebTrader workspace */
.terminal-statusbar{min-height:68px;margin-bottom:8px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-top:3px solid #ef5b3f;border-radius:5px;background:#242726}.market-clocks{display:flex;gap:18px;color:#98a09d;font-size:8px}.market-clocks b{margin-left:4px;color:#d8dddb;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.terminal-account-stats{display:flex;justify-content:flex-end;gap:22px}.terminal-account-stats span{color:#8d9692;font-size:8px;text-align:right}.terminal-account-stats b{display:block;margin-top:5px;color:#f0f3f2;font-size:10px;font-weight:600}.terminal-account-stats span:last-child b{color:var(--brand)}
.webtrader-workspace{display:grid;grid-template-columns:250px minmax(420px,1fr) 330px;gap:8px;min-height:590px}.webtrader-workspace>.chart-card,.webtrader-workspace>.order-panel,.quote-panel,.information-panel{border:1px solid var(--line);border-radius:10px;background:var(--surface)}.terminal-panel-head{height:58px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.terminal-panel-head h3{margin:2px 0 0;font-size:14px}.panel-tool{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--muted);cursor:pointer}.quote-panel{min-width:0;overflow:hidden}.quote-search{height:38px;margin:10px 10px 7px;padding:0 9px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--muted)}.quote-search input{width:100%;min-width:0;border:0;background:transparent;color:var(--text);font-size:10px;outline:0}.quote-categories{display:flex;gap:3px;padding:0 10px 9px;overflow-x:auto}.quote-categories button{white-space:nowrap;border:0;border-radius:6px;padding:6px 8px;background:transparent;color:var(--muted);font-size:8px;cursor:pointer}.quote-categories button.active{background:rgba(36,230,186,.1);color:var(--brand)}.quote-head,.quote-item{display:grid;grid-template-columns:minmax(90px,1fr) 62px 62px;gap:5px;align-items:center}.quote-head{padding:8px 10px;border-block:1px solid var(--line);color:var(--muted);font-size:8px}.quote-head span:not(:first-child),.quote-item>span{text-align:right}.quote-list{max-height:456px;overflow:auto}.quote-item{width:100%;padding:10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}.quote-item:hover,.quote-item.active{background:rgba(36,230,186,.055)}.quote-item.active{box-shadow:inset 2px 0 var(--brand)}.quote-item strong,.quote-item small{display:block;text-align:left}.quote-item strong{font-size:10px}.quote-item small{margin-top:3px;color:var(--muted);font-size:7px}.quote-item>span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px}.terminal-chart{border-radius:10px}.terminal-chart .chart-wrap{height:430px}.terminal-ticket{border-radius:10px;padding:0 14px 14px}.terminal-ticket>.terminal-panel-head{margin:0 -14px 13px}.connection-state{color:var(--brand);font-size:8px}.connection-state i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--brand)}.information-panel{margin-top:8px;overflow:hidden}.information-tabs{min-height:44px;padding:0 12px;display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line)}.information-tabs button{height:44px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}.information-tabs button.active{border-bottom-color:var(--brand);color:var(--text)}.information-tabs button b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:9px;background:rgba(36,230,186,.1);color:var(--brand);font-size:8px}.information-tabs>span{margin-left:auto;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px}.terminal-orders{border:0;border-radius:0}.terminal-ledger{max-height:260px;overflow:auto}.terminal-ledger .ledger-row{grid-template-columns:1.2fr .8fr .8fr}.webtrader-workspace.compact-quotes{grid-template-columns:72px minmax(420px,1fr) 330px}.compact-quotes .quote-search,.compact-quotes .quote-categories,.compact-quotes .quote-head,.compact-quotes .terminal-panel-head>div{display:none}.compact-quotes .terminal-panel-head{justify-content:center}.compact-quotes .quote-item{display:block;padding:11px 4px}.compact-quotes .quote-item strong{text-align:center}.compact-quotes .quote-item small,.compact-quotes .quote-item>span{display:none}
.quote-head,.quote-item{grid-template-columns:minmax(92px,1fr) 53px 34px 53px}.quote-item{padding:9px 8px}.quote-symbol-cell{min-width:0;display:grid;grid-template-columns:14px minmax(0,1fr);align-items:center;gap:3px}.quote-favorite{width:14px;padding:0;border:0;background:transparent;color:#7d8581;cursor:pointer}.quote-favorite:hover,.quote-favorite.active{color:#f2c94c}.quote-symbol{min-width:0;border:0;background:transparent;color:inherit;cursor:pointer}.quote-side{padding:4px 2px;border:0;border-radius:4px;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:8px;cursor:pointer}.quote-side.sell{color:#ff776d}.quote-side.buy{color:#66d49f}.quote-side:hover,.quote-side:focus-visible{background:rgba(255,255,255,.06);outline:1px solid rgba(255,255,255,.08)}.quote-side:active,.quote-symbol:active,.quote-favorite:active{transform:translateY(1px)}.quote-spread{text-align:center!important;color:#8b938f;font-size:7px!important}.terminal-chart .symbol-head{padding-top:14px}.terminal-chart .chart-grid{left:0}.terminal-chart #priceChart{padding-left:0}.trade-notice-list{padding:18px}.trade-notice-list p{margin:0;padding:11px 4px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px}.trade-notice-list p:last-child{border-bottom:0}.trade-notice-list b{display:block;margin-bottom:4px;color:var(--text)}
@media(max-width:1400px){.webtrader-workspace{grid-template-columns:264px minmax(296px,1fr) 270px}.webtrader-workspace.compact-quotes{grid-template-columns:66px minmax(350px,1fr) 288px}.quote-head,.quote-item{grid-template-columns:minmax(116px,1fr) 48px 28px 48px}.terminal-ticket{padding-inline:12px}.terminal-ticket>.terminal-panel-head{margin-inline:-12px}.terminal-account-stats{gap:12px}}
@media(max-width:1180px){.webtrader-workspace{grid-template-columns:250px minmax(285px,1fr) 260px}.webtrader-workspace.compact-quotes{grid-template-columns:66px minmax(330px,1fr) 280px}.quote-head,.quote-item{grid-template-columns:minmax(105px,1fr) 46px 27px 46px}}
@media(max-width:1000px){.webtrader-workspace,.webtrader-workspace.compact-quotes{grid-template-columns:250px minmax(0,1fr)}.terminal-ticket{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;gap:0 16px}.terminal-ticket>.terminal-panel-head,.terminal-ticket>.order-tabs,.terminal-ticket>.submit-order,.terminal-ticket>.risk-copy,.terminal-ticket>.order-preview{grid-column:1/-1}}
@media(max-width:720px){.terminal-statusbar{display:block}.market-clocks{justify-content:space-between}.terminal-account-stats{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr)}.terminal-account-stats span{text-align:left}.webtrader-workspace,.webtrader-workspace.compact-quotes{display:block}.quote-panel{margin-bottom:8px}.quote-list{display:flex;max-height:none;overflow-x:auto}.quote-head{display:none}.quote-item{flex:0 0 250px}.terminal-chart .chart-wrap{height:310px}.terminal-ticket{display:block!important;margin-top:8px}.information-tabs{overflow-x:auto}.information-tabs>span{display:none}}
.quote-categories{scrollbar-width:none}.quote-categories::-webkit-scrollbar{display:none}@media(max-width:1400px){.quote-list{overflow-x:hidden}.quote-item{padding-inline:6px}.quote-side{font-size:7px}}
.market-chart-frame{position:absolute;z-index:2;inset:0;width:100%;height:100%;border:0;background:#0b0e0d}.market-chart-frame[hidden]{display:none}.market-chart-frame>div,.market-chart-frame iframe{width:100%!important;height:100%!important}.chart-loading{display:grid;place-items:center;color:var(--muted);font-size:10px}
.asset-icon img,.symbol-name>span img{width:100%;height:100%;object-fit:contain;border-radius:50%}.asset-icon em,.symbol-name>span em{font-style:normal}.quote-symbol{display:flex;align-items:center;gap:5px;text-align:left}.quote-coin-icon{flex:0 0 18px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--coin-color) 18%,transparent);font-size:8px}.quote-coin-icon img{width:18px;height:18px;object-fit:contain;border-radius:50%}.quote-coin-icon em{font-style:normal;color:var(--coin-color)}.quote-symbol>span:last-child{min-width:0}.quote-symbol strong,.quote-symbol small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.symbol-name>span:has(img){padding:5px;background:rgba(255,255,255,.06)!important}.terminal-ticket.quote-selected{animation:quoteTicketPulse .72s ease}@keyframes quoteTicketPulse{0%,100%{box-shadow:none}42%{box-shadow:0 0 0 2px rgba(36,230,186,.5),0 0 26px rgba(36,230,186,.18)}}

/* Form layout and upload controls */
.modal{width:min(430px,100%);max-height:calc(100dvh - 36px);overflow-y:auto}.modal-form,#walletFields{gap:12px}
.auth-gate{display:flex;flex-direction:column;align-items:center;padding:82px 18px 34px}.auth-gate[hidden]{display:none}.auth-card{margin:auto auto 0}.auth-legal{position:static;margin:18px auto auto;line-height:1.6}.auth-options[hidden]{display:none}.auth-options label{display:flex;align-items:center;gap:7px}.auth-options input{width:14px;height:14px;margin:0;accent-color:var(--brand)}.auth-submit{margin-top:4px}.register-mode .auth-card{padding-top:28px;padding-bottom:28px}.register-mode .auth-card>p{margin-bottom:16px}.register-mode .auth-tabs{margin-bottom:12px}.register-mode .auth-card form>label{margin:9px 0}.register-mode .auth-card form>label input{height:42px}
.auth-terms{display:flex!important;align-items:flex-start!important;gap:9px!important;margin:16px 0!important;color:var(--muted)!important;font-size:10px!important;line-height:1.55!important;text-align:left}.auth-terms[hidden]{display:none!important}.auth-terms input{flex:0 0 16px;width:16px!important;height:16px!important;min-height:0!important;margin:0!important;padding:0!important;accent-color:var(--brand)}.auth-terms span{display:block;min-width:0}
.kyc-upload{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-form .kyc-upload-card{position:relative;min-width:0;min-height:150px;margin:0;padding:14px;border:1px dashed rgba(181,218,204,.24);border-radius:14px;background:var(--field-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;cursor:pointer;overflow:hidden;transition:.2s ease}.modal-form .kyc-upload-card:hover,.modal-form .kyc-upload-card.selected{border-color:rgba(36,230,186,.55);background:rgba(36,230,186,.05)}.kyc-upload-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(36,230,186,.1);color:var(--brand);font-size:18px;font-weight:700}.kyc-upload-card b{font-size:10px;color:var(--text)}.kyc-upload-card small{max-width:100%;min-height:24px;color:var(--muted);font-size:7px;line-height:1.5;overflow-wrap:anywhere}.kyc-upload-card em{padding:6px 10px;border-radius:8px;background:var(--surface-3);color:var(--brand);font-size:8px;font-style:normal}.kyc-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}.kyc-upload-card>*:not(.kyc-preview){position:relative;z-index:1}
@media(max-width:560px){.auth-gate{padding:82px 14px 24px}.auth-brand{top:22px;left:20px}.auth-language-switcher{top:18px;right:16px;height:36px}.auth-language-switcher select{max-width:112px}.auth-card{padding:28px 24px}.kyc-upload{grid-template-columns:1fr 1fr}.modal-form .kyc-upload-card{min-height:136px}}
@media(max-width:380px){.kyc-upload{grid-template-columns:1fr}.modal-form .kyc-upload-card{min-height:118px}}

@media(max-width:720px){
  .quote-list{display:flex;max-height:none;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .quote-item{flex-basis:280px;min-height:56px;scroll-snap-align:start}
  .quote-categories button{min-height:36px;padding:8px 10px}
  .quote-symbol-cell{grid-template-columns:26px minmax(0,1fr);gap:4px}
  .quote-favorite{width:30px;height:36px;margin-left:-2px}
  .quote-side{min-height:36px}
  input,select,textarea{font-size:16px!important}
  button{touch-action:manipulation}
  .webtrader-workspace.mobile-quotes-expanded .quote-list{display:block;max-height:420px;overflow-x:hidden!important;overflow-y:auto!important;scroll-snap-type:none;touch-action:pan-y}
  .webtrader-workspace.mobile-quotes-expanded .quote-item{display:grid;width:100%;min-height:56px}
  .webtrader-workspace.compact-quotes .quote-search{display:flex}
  .webtrader-workspace.compact-quotes .quote-categories{display:flex}
  .webtrader-workspace.compact-quotes .terminal-panel-head>div{display:block}
  .webtrader-workspace.compact-quotes .quote-item{display:grid;padding:9px 8px}
  .webtrader-workspace.compact-quotes .quote-item strong,
  .webtrader-workspace.compact-quotes .quote-item small,
  .webtrader-workspace.compact-quotes .quote-item>span{display:block;text-align:inherit}
}
/* Quote table: keep all four columns within the panel at desktop widths. */
.quote-head,.quote-item{width:100%;min-width:0;grid-template-columns:minmax(112px,1fr) minmax(42px,50px) 28px minmax(42px,50px);gap:2px}
.quote-head{padding-inline:8px}.quote-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quote-head span:nth-child(3){text-align:center}
.quote-list{overflow-x:hidden;scrollbar-gutter:auto}.quote-symbol-cell{min-width:0;overflow:hidden}.quote-symbol{min-width:0;overflow:hidden}.quote-symbol strong,.quote-symbol small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quote-side{min-width:0;overflow:hidden;padding-inline:1px}
@media(max-width:1400px){.quote-head,.quote-item{grid-template-columns:minmax(108px,1fr) minmax(40px,46px) 25px minmax(40px,46px)}}
@media(max-width:1180px){.quote-head,.quote-item{grid-template-columns:minmax(101px,1fr) minmax(38px,43px) 24px minmax(38px,43px)}}
@media(max-width:720px){.quote-list{overflow-x:auto;scrollbar-gutter:auto}.quote-item{grid-template-columns:minmax(101px,1fr) minmax(38px,43px) 24px minmax(38px,43px)}}