* { box-sizing: border-box; font-family: Inter, Segoe UI, Arial, sans-serif; }
body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, #1d2f52 0%, #0b1018 46%), #0b1018; color: #e8eefc; min-width: 1024px; }
.app-shell { min-height: 100vh; }
.site-nav { height: 64px; border-bottom: 1px solid #23324a; background: rgba(6, 11, 18, .92); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; backdrop-filter: blur(5px); }
.brand { font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -1px; color: #f4f8ff; }
.brand span { color: #8be642; }
.nav-links { display: flex; align-items: center; gap: 14px; }
.nav-links > a, .nav-dd > button { color: #c8d7f0; text-decoration: none; background: transparent; border: none; font-size: 14px; cursor: pointer; padding: 8px 10px; border-radius: 8px; }
.nav-links > a.active, .nav-links > a:hover, .nav-dd.active > button, .nav-dd > button:hover { color: #fff; background: rgba(70,110,170,.28); }
.nav-dd { position: relative; }
.dd-menu { display: none; position: absolute; top: 38px; left: 0; min-width: 220px; background: #0f1623; border: 1px solid #314864; border-radius: 10px; padding: 6px; }
.dd-menu a { display: block; color: #d0e2ff; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.dd-menu a:hover { background: #1e3555; }
.nav-dd:hover .dd-menu { display: block; }
.nav-actions { display: flex; gap: 8px; }
.icon-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #314864; display: grid; place-items: center; text-decoration: none; color: #d0e2ff; font-size: 12px; }
.page { padding: 14px 24px 24px; max-width: 1400px; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: rgba(14, 21, 34, .78); border: 1px solid #23324a; border-radius: 12px; margin: 14px 0; backdrop-filter: blur(5px); }
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: .2px; }
.top-sub { margin: 4px 0 0; color: #91a8cf; font-size: 12px; }
.top-pills { display: flex; gap: 8px; }
.pill { border: 1px solid #31507e; border-radius: 999px; padding: 6px 10px; font-size: 11px; color: #b5d4ff; background: rgba(59,97,153,.2); }
.pill-btn { border: 1px solid #31507e; border-radius: 999px; padding: 6px 10px; font-size: 11px; color: #b5d4ff; background: rgba(59,97,153,.2); cursor: pointer; }
.container { display: grid; gap: 12px; grid-template-columns: 1fr; }
.card { background: linear-gradient(180deg, rgba(23,33,50,.94), rgba(14,20,32,.94)); border: 1px solid #273957; border-radius: 12px; padding: 12px; min-height: 180px; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.card h2 { margin-top: 0; margin-bottom: 10px; font-size: 17px; letter-spacing: .2px; }
.pro-grid { display: grid; grid-template-columns: 280px 1fr 360px; gap: 12px; }
.pro-watchlist, .pro-center, .pro-right { min-height: 640px; }
#watchlist { max-height: 560px; overflow: auto; margin-top: 8px; }
.watch-item { padding: 9px; border: 1px solid #304160; border-radius: 10px; margin-bottom: 7px; cursor: pointer; transition: .15s ease; }
.watch-item:hover { transform: translateY(-1px); border-color: #4f73ac; }
.watch-item.active { border-color: #69b7ff; background: linear-gradient(180deg, rgba(42,66,104,.45), rgba(24,38,61,.45)); }
.watch-top { display: flex; justify-content: space-between; font-size: 12px; }
.ob-row { display: flex; justify-content: space-between; font-size: 12px; border-bottom: 1px solid #21304a; padding: 5px 0; }
.ob-ask { color: #ff8a8a; }
.ob-bid { color: #6bf3a2; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tab-btn { background: #17253a; border: 1px solid #304b70; color: #b9d7ff; padding: 7px 10px; border-radius: 8px; width: auto; }
.tab-btn.active { background: #2a4f84; color: #fff; border-color: #5f95de; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
select, input, button { width: 100%; padding: 10px; border-radius: 9px; border: 1px solid #2f4263; background: #101a29; color: #fff; }
input::placeholder { color: #7f97bd; }
button { cursor: pointer; font-weight: 700; transition: .15s ease; }
button:hover { filter: brightness(1.08); }
.buy { background: linear-gradient(180deg, #1cb971, #118453); border-color: #118453; }
.sell { background: linear-gradient(180deg, #e55e5e, #bd3434); border-color: #bd3434; }
.msg { min-height: 18px; color: #ff8787; }
.msg.success { color: #5ff0b2; }
.live { font-size: 32px; font-weight: 800; margin: 10px 0; color: #7fd7ff; letter-spacing: .3px; }
.live.up { animation: upBlink .35s ease; }
.live.down { animation: downBlink .35s ease; }
#tvChart { height: 340px; margin-bottom: 10px; }
.order, .hist { border: 1px solid #2d4060; border-radius: 10px; padding: 9px; margin-bottom: 8px; background: rgba(17,26,41,.7); }
h3 { margin-top: 14px; margin-bottom: 8px; font-size: 15px; }
.pnl { font-weight: 700; }
.pnl.up { color: #68f4a3; animation: upBlink .35s ease; }
.pnl.down { color: #ff8f8f; animation: downBlink .35s ease; }
.skeleton { position: relative; overflow: hidden; background: #1a2a42; border-radius: 8px; height: 18px; margin-bottom: 7px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: shimmer 1.2s infinite; }
.auth-body { min-height: 100vh; display: grid; place-items: center; }
.auth-card { width: min(96vw, 430px); background: linear-gradient(180deg, rgba(23,33,50,.96), rgba(15,21,33,.96)); border: 1px solid #2d4263; border-radius: 14px; padding: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.36); }
.auth-card h1 { margin: 0 0 8px; }
.auth-card form { display: grid; gap: 8px; }
.hidden { display: none; }

body.light-theme { background: #edf3fb; color: #1e2a3a; }
body.light-theme .site-nav { background: rgba(248,252,255,.95); border-bottom-color: #cdddf0; }
body.light-theme .brand { color: #0f2f56; }
body.light-theme .nav-links > a, body.light-theme .nav-dd > button { color: #31507a; }
body.light-theme .nav-links > a.active, body.light-theme .nav-links > a:hover, body.light-theme .nav-dd.active > button, body.light-theme .nav-dd > button:hover { background: #dcecff; color: #14365d; }
body.light-theme .dd-menu { background: #fff; border-color: #c7d8ee; }
body.light-theme .dd-menu a { color: #234164; }
body.light-theme .dd-menu a:hover { background: #eaf2ff; }
body.light-theme .icon-btn { border-color: #b7cdea; color: #234164; }
body.light-theme .topbar, body.light-theme .card { background: #ffffff; color: #1d2f44; border-color: #d6e2f2; }
body.light-theme select, body.light-theme input, body.light-theme button { background: #f5f9ff; color: #1d2f44; border-color: #c7d8ec; }
body.light-theme .order, body.light-theme .hist { background: #f6faff; border-color: #d2e0f0; }
body.light-theme .watch-item { border-color: #c8d8eb; }
body.light-theme .watch-item.active { background: #e8f1ff; border-color: #83aee2; }

body.dense-mode .card { padding: 9px; }
body.dense-mode .watch-item { padding: 6px; margin-bottom: 4px; }
body.dense-mode .ob-row { padding: 3px 0; font-size: 11px; }
body.dense-mode select, body.dense-mode input, body.dense-mode button { padding: 7px; }

@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes upBlink { 0% { background: rgba(72,197,121,.35); } 100% { background: transparent; } }
@keyframes downBlink { 0% { background: rgba(220,74,74,.35); } 100% { background: transparent; } }

@media (max-width: 1300px) {
  body { min-width: 0; }
  .site-nav { padding: 0 12px; }
  .pro-grid { grid-template-columns: 230px 1fr; }
  .pro-right { grid-column: 1 / -1; min-height: 320px; }
  .top-pills { display: none; }
}

@media (max-width: 900px) {
  .site-nav { height: auto; flex-wrap: wrap; padding: 10px; gap: 8px; }
  .brand { width: 100%; font-size: 26px; }
  .nav-links { flex-wrap: wrap; }
  .grid2 { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .topbar h1 { font-size: 17px; }
  .pro-grid { grid-template-columns: 1fr; }
  .page { padding: 10px; }
}