:root { --rate-primary: #2563eb; --rate-navy: #0f172a; --rate-soft: #eff6ff; }
body { font-feature-settings: "tnum" 1; }
.app-content { padding-bottom: 2rem; }
.topbar-pair-search { width: clamp(260px, 30vw, 430px); }
.topbar-pair-search .input-group-text { background: var(--bs-tertiary-bg); }
.card { border-radius: .75rem; box-shadow: 0 2px 12px rgba(15,23,42,.055); }
.card-header { min-height: 3.25rem; display: flex; align-items: center; }
.table > :not(caption) > * > * { padding: .72rem .8rem; }
.table thead th { color: var(--bs-secondary-color); font-size: .76rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.pair-link { color: var(--bs-emphasis-color); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pair-link:hover, .provider-link:hover { color: var(--rate-primary); }
.pair-heading { font-size: 1.35rem; font-weight: 750; letter-spacing: .02em; }
.pair-toolbar { min-height: 2.5rem; }
.compact-pair-summary .summary-cell { display: flex; flex-direction: column; height: 100%; min-height: 82px; padding: .55rem .75rem; border-left: 3px solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: .35rem; }
.compact-pair-summary .summary-buy { border-left-color: var(--bs-success); }
.compact-pair-summary .summary-sell { border-left-color: var(--bs-danger); }
.compact-pair-summary .summary-label { margin-bottom: .15rem; color: var(--bs-secondary-color); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.compact-pair-summary strong { font-size: 1rem; }
.compact-pair-summary small { line-height: 1.35; }
.provider-source-list { columns: 2; column-gap: 1.5rem; padding-left: 1.15rem; font-size: .8rem; }
.provider-source-list li { break-inside: avoid; padding-block: .08rem; }
.rate-direction-title { padding: .45rem .75rem; background: var(--bs-tertiary-bg); font-weight: 650; }
.rate-direction-title small { margin-left: .3rem; color: var(--bs-secondary-color); }
.pair-section-title { margin: .35rem 0 .65rem; font-size: .92rem; font-weight: 700; }
.pair-rates-table { font-size: .78rem; }
.pair-rates-table > :not(caption) > * > * { padding: .34rem .48rem; }
.pair-rates-table thead th { font-size: .67rem; }
.pair-rates-table .rate-value { min-width: 9.5rem; }
.provider-rate-name { color: var(--bs-emphasis-color); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pair-rates-table tr.provider-rate-selected > * { background-color: rgba(var(--bs-primary-rgb), .12); }
.btn-xs { --bs-btn-padding-y: .16rem; --bs-btn-padding-x: .38rem; --bs-btn-font-size: .7rem; --bs-btn-border-radius: .25rem; }
.asset-pill { display: inline-flex; padding: .25rem .6rem; border: 1px solid var(--bs-border-color); border-radius: 999px; font-family: var(--bs-font-monospace); font-weight: 600; }
.provider-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--bs-emphasis-color); font-weight: 650; text-decoration: none; }
.provider-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; color: #fff; background: linear-gradient(135deg,#2563eb,#7c3aed); font-size: .72rem; font-weight: 800; }
.provider-avatar-lg { width: 2.8rem; height: 2.8rem; font-size: .9rem; margin-right: .75rem; }
.row-disabled { opacity: .62; }
.empty-state { padding: 3rem !important; text-align: center; color: var(--bs-secondary-color) !important; }
.empty-state > i { display: block; margin-bottom: .6rem; font-size: 2rem; }
.empty-state p { margin: 0; font-weight: 600; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: .75rem; }
.asset-card { display: flex; flex-direction: column; padding: .8rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; }
.asset-card small { color: var(--bs-secondary-color); }
.rate-login-page { min-height: 100vh; padding: 0; background: var(--bs-body-bg); }
.login-shell { display: grid; grid-template-columns: minmax(420px,1.1fr) minmax(420px,.9fr); min-height: 100vh; width: 100%; }
.login-hero { position: relative; align-items: center; padding: clamp(3rem,8vw,8rem); overflow: hidden; color: #fff; background: radial-gradient(circle at 20% 20%,rgba(59,130,246,.6),transparent 35%), radial-gradient(circle at 85% 80%,rgba(124,58,237,.45),transparent 38%), #0f172a; }
.login-hero::after { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 42px 42px; }
.login-hero > div { position: relative; z-index: 1; max-width: 630px; }
.login-hero h1 { font-size: clamp(3rem,6vw,5.6rem); line-height: .96; letter-spacing: -.055em; font-weight: 800; margin: .7rem 0 1.5rem; }
.login-hero p { max-width: 540px; font-size: 1.15rem; color: #cbd5e1; }
.eyebrow { letter-spacing: .2em; font-size: .75rem !important; font-weight: 800; color: #93c5fd !important; }
.brand-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: linear-gradient(135deg,#3b82f6,#8b5cf6); color: white; font-size: 1.55rem; box-shadow: 0 14px 35px rgba(37,99,235,.35); }
.login-features { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.login-features span { padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); font-size: .85rem; }
.login-panel { display: grid; place-items: center; padding: 2rem; }
.login-box { width: min(100%,430px); }
.login-box .input-group-text { min-width: 3rem; justify-content: center; }
@media (max-width: 991.98px) { .login-shell { display: block; } .login-panel { min-height: 100vh; } }
@media (max-width: 575.98px) { .app-content-header { padding: 1rem .25rem .5rem; } .table > :not(caption) > * > * { padding: .58rem; } .login-panel { padding: 1.25rem; } }