:root{--bg: #0b0e14;--bg-elevated: #161a23;--bg-sticky: #0b0e14;--border: #232936;--border-soft: #1a1f2a;--text-primary: #e8ecf3;--text-muted: #8a93a6;--text-subtle: #5b6477;--accent: #4f8fff;--up: #2bb673;--down: #e54848;--warn: #f5a524;--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;--font-sans: -apple-system, "Segoe UI", Roboto, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;background:var(--bg);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}#app{min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}input,select,textarea{font-family:inherit;color:inherit;background:none}table{border-collapse:collapse;border-spacing:0}.cost-table{width:max-content;min-width:100%;font-family:var(--font-sans);border-collapse:separate;border-spacing:0}.cost-table th,.cost-table td{padding:8px 12px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--border-soft)}.cost-table thead th{position:sticky;top:0;z-index:3;background:var(--bg);font-size:13px;font-weight:500;color:var(--text-muted);height:40px;border-bottom:1px solid var(--border);white-space:nowrap}.cost-table .sticky-col{position:sticky;z-index:2;background:var(--bg-sticky);font-family:var(--font-mono)}.cost-table thead .sticky-col{z-index:4}.cost-table .col-symbol{left:0;width:104px;min-width:104px;font-size:13px;font-weight:500;color:var(--text-primary)}.cost-table .col-side{left:104px;width:44px;min-width:44px;padding:4px 6px}.cost-table thead .col-side,.cost-table tbody .col-side{box-shadow:2px 0 6px #0000004d}.symbol-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;line-height:1.2}.symbol-cell .symbol-name{font-size:14px;font-weight:600;color:var(--text-primary);font-family:var(--font-mono)}.symbol-cell .symbol-price{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.2px}.symbol-cell .symbol-price.is-empty{color:var(--text-subtle)}.side-pill{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;font-size:12px;font-weight:600;font-family:var(--font-sans);border-radius:11px;letter-spacing:1px}.side-pill-long{background:#2bb6732e;color:var(--up);border:1px solid rgba(43,182,115,.55)}.side-pill-short{background:#e548482e;color:var(--down);border:1px solid rgba(229,72,72,.55)}.cost-table tbody .col-side-long{box-shadow:inset 3px 0 0 var(--up),2px 0 6px #0000004d}.cost-table tbody .col-side-short{box-shadow:inset 3px 0 0 var(--down),2px 0 6px #0000004d}.cost-table tbody tr.row-long>td{border-bottom:none;padding-bottom:4px}.cost-table tbody tr.row-short{border-bottom:1px solid var(--border)}.cost-table tbody tr.row-short td{border-bottom:1px solid var(--border);padding-top:4px}.cost-table tbody td:not(.sticky-col){width:140px;min-width:140px;position:relative}.cost-table tbody tr:hover td:not(.sticky-col){background:var(--bg-elevated)}@media(max-width:767px){.cost-table th,.cost-table td{padding:6px 8px;height:32px}.cost-table .col-symbol{width:84px;min-width:84px;font-size:12px}.cost-table .col-side{left:84px;width:36px;min-width:36px;padding:2px 4px}.cost-table thead .col-side,.cost-table tbody .col-side{box-shadow:4px 0 8px #0006}.cost-table tbody .col-side-long{box-shadow:inset 3px 0 0 var(--up),4px 0 8px #0006}.cost-table tbody .col-side-short{box-shadow:inset 3px 0 0 var(--down),4px 0 8px #0006}.symbol-cell .symbol-name{font-size:13px}.symbol-cell .symbol-price{font-size:10px}.side-pill{width:24px;height:20px;font-size:11px;border-radius:10px}.cost-table thead th{font-size:12px;height:36px}}.skeleton{display:flex;flex-direction:column;gap:0;padding:16px 0}.skeleton-row{display:flex;gap:8px;padding:6px 0}.skeleton-cell{height:28px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-elevated) 0%,var(--border-soft) 50%,var(--bg-elevated) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;flex-shrink:0}.skeleton-cell.is-symbol{width:104px}.skeleton-cell.is-side{width:44px}.skeleton-cell:not(.is-symbol):not(.is-side){width:140px}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(max-width:767px){.skeleton-cell.is-symbol{width:84px}.skeleton-cell.is-side{width:36px}}
