@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Saira+Semi+Condensed:ital,wght@0,700;0,800;1,700;1,800&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

.brand-mark--word {
  width: 186px;
  height: auto;
}

.brand-wordmark {
  font-family: var(--font-logo);
  font-weight: 800;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.14em;
  display: inline-block;
  line-height: 1;
  font-size: 1.06em;
  transform: skewX(-8deg);
  transform-origin: left center;
  text-shadow: 0 0 18px rgba(240,185,11,0.12);
}

a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--accent); }

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  color: var(--text-primary);
  font-size: inherit;
}

input, select {
  font-family: var(--font);
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23848e9c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
  cursor: pointer;
}

select:hover { border-color: var(--border-light); }

select option {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 8px;
}

input:focus, select:focus { border-color: var(--accent); }
input::placeholder { color: var(--text-third); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-third); }

.btn-primary {
  background: var(--accent);
  color: #181a20;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  transition: background var(--transition);
  font-size: 14px;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 6px;
  transition: all var(--transition);
  font-size: 14px;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-green {
  background: var(--green);
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  width: 100%;
  font-size: 15px;
}
.btn-green:hover { opacity: 0.9; }

.btn-red {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  width: 100%;
  font-size: 15px;
}
.btn-red:hover { opacity: 0.9; }

.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--text-secondary); }

/* Toggle switch */
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; vertical-align:middle; }
.toggle-switch input { opacity:0; width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; cursor:pointer; margin:0; }
.toggle-switch .slider { position:absolute; inset:0; background:var(--bg-input); border-radius:20px; cursor:pointer; transition:all .25s ease; border:1px solid var(--border); z-index:1; }
.toggle-switch .slider::before { content:''; position:absolute; width:14px; height:14px; left:2px; top:50%; transform:translateY(-50%); background:var(--text-third); border-radius:50%; transition:all .25s ease; }
.toggle-switch input:checked + .slider { background:var(--accent); border-color:var(--accent); }
.toggle-switch input:checked + .slider::before { left:18px; background:#181a20; }
.text-accent { color: var(--accent); }
.mono { font-family: var(--font-mono); }

/* ===== LIGHT THEME ===== */
body.light-theme {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f1f3;
  --bg-input: #f5f5f5;
  --text-primary: #1e2329;
  --text-secondary: #474d57;
  --text-third: #707a8a;
  --border: #eaecef;
  --border-light: #d5d8dc;
  --green-bg: rgba(14, 203, 129, 0.1);
  --red-bg: rgba(246, 70, 93, 0.1);
}

body.light-theme ::-webkit-scrollbar-thumb { background: #d5d8dc; }
body.light-theme ::-webkit-scrollbar-thumb:hover { background: #b7bdc6; }

/* --- Light: global overrides --- */
body.light-theme { background: #f8f9fa; }

body.light-theme input,
body.light-theme select {
  background: #f5f5f5;
  border-color: #e0e3e8;
  color: #1e2329;
}
body.light-theme input:focus,
body.light-theme select:focus { border-color: #f0b90b; }
body.light-theme input::placeholder { color: #b7bdc6; }

body.light-theme select option {
  background: #ffffff;
  color: #1e2329;
}

body.light-theme .btn-outline {
  border-color: #d5d8dc;
  color: #474d57;
}
body.light-theme .btn-outline:hover {
  border-color: #f0b90b;
  color: #f0b90b;
}

body.light-theme .toggle-switch .slider {
  background: #e0e3e8;
  border-color: #d5d8dc;
}
body.light-theme .toggle-switch .slider::before { background: #b7bdc6; }

/* --- Light: Navbar --- */
body.light-theme .navbar {
  background: #ffffff;
  border-bottom-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light-theme .navbar__item { color: #474d57; }
body.light-theme .navbar__item:hover,
body.light-theme .navbar__item--active { color: #1e2329; }
body.light-theme .navbar__dropdown {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body.light-theme .navbar__dropdown a { color: #474d57; }
body.light-theme .navbar__dropdown a:hover {
  background: #f5f5f5;
  color: #1e2329;
}
body.light-theme .navbar__dropdown--trade a:hover {
  background: rgba(240,185,11,0.06);
}
body.light-theme .navbar__icon-btn:hover {
  background: #f0f1f3;
}
body.light-theme .navbar__search-dropdown {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body.light-theme .navbar__search-item:hover {
  background: #f5f5f5;
}
body.light-theme .navbar__right .btn-login {
  color: #1e2329;
  border-color: #d5d8dc;
}
body.light-theme .navbar__right .btn-login:hover {
  border-color: #f0b90b;
  color: #f0b90b;
  background: rgba(240,185,11,0.04);
}
body.light-theme .navbar__wallet-btn {
  background: rgba(240,185,11,0.06);
  border-color: rgba(240,185,11,0.15);
}
body.light-theme .navbar__wallet-btn:hover {
  background: rgba(240,185,11,0.12);
}

/* --- Light: Hero --- */
body.light-theme .hero {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(240,185,11,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,185,11,0.05) 1px, transparent 1px),
    linear-gradient(rgba(240,185,11,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,185,11,0.025) 1px, transparent 1px);
}
body.light-theme .hero > .hero__grid-fade {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #ffffff 80%);
}
body.light-theme .hero::before {
  background:
    radial-gradient(circle at 25% 35%, rgba(240,185,11,0.12) 0%, transparent 50%),
    radial-gradient(circle at 65% 55%, rgba(14,203,129,0.06) 0%, transparent 45%);
}
body.light-theme .hero::after {
  background:
    radial-gradient(circle at 50% 40%, rgba(246,70,93,0.06) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(240,185,11,0.08) 0%, transparent 45%);
}
body.light-theme .hero__price-card {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.light-theme .hero__price-card:hover {
  border-color: #f0b90b;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.08);
}
body.light-theme .hero__btn-deposit {
  background: rgba(240,185,11,0.06);
}
body.light-theme .hero__btn-deposit:hover {
  background: rgba(240,185,11,0.12);
}

/* --- Light: Announcement bar --- */
body.light-theme .announcement-bar {
  background: linear-gradient(90deg, #fef8e0 0%, #fffdf5 50%, #fef8e0 100%);
  color: #1e2329;
}

/* --- Light: Ticker tape --- */
body.light-theme .ticker-tape {
  background: #ffffff;
  border-bottom-color: #eaecef;
}

/* --- Light: Stats bar --- */
body.light-theme .stats-bar {
  background: #f8f9fa;
  border-bottom-color: #eaecef;
}

/* --- Light: Markets table --- */
body.light-theme .markets-table tr:hover {
  background: rgba(240,185,11,0.03);
}
body.light-theme .markets-table tr:nth-child(even) {
  background: #fafbfc;
}
body.light-theme .markets-table tr:nth-child(even):hover {
  background: rgba(240,185,11,0.03);
}
body.light-theme .markets-tabs {
  border-bottom-color: #eaecef;
}
body.light-theme .markets-tabs button { color: #707a8a; }
body.light-theme .markets-tabs button:hover { color: #1e2329; }
body.light-theme .markets-tabs button.active { color: #f0b90b; }

/* --- Light: How it works --- */
body.light-theme .how-step__icon {
  background: rgba(240,185,11,0.06);
}

/* --- Light: Products cards --- */
body.light-theme .product-card {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-theme .product-card:hover {
  border-color: #d5d8dc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.light-theme .product-card__icon {
  background: rgba(240,185,11,0.06);
}

/* --- Light: Security section --- */
body.light-theme .security-section {
  background: #ffffff;
}

/* --- Light: App section --- */
body.light-theme .app-btn {
  background: #f5f5f5;
  border-color: #eaecef;
}
body.light-theme .app-btn:hover {
  border-color: #f0b90b;
  background: #fafafa;
}
body.light-theme .phone-mockup {
  background: #f0f1f3;
  border-color: #d5d8dc;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

/* --- Light: CTA section --- */
body.light-theme .cta-section {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

/* --- Light: Footer --- */
body.light-theme .footer {
  background: #f0f1f3;
  border-top-color: #eaecef;
}
body.light-theme .footer__socials a {
  background: #e0e3e8;
}
body.light-theme .footer__socials a:hover {
  background: #f0b90b;
  color: #181a20;
}
body.light-theme .footer__bottom {
  border-top-color: #d5d8dc;
}

/* --- Light: Toast --- */
body.light-theme .toast {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  color: #1e2329;
}

/* --- Light: Mobile drawer --- */
body.light-theme .mobile-drawer {
  background: #ffffff;
  border-top-color: #eaecef;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
body.light-theme .mobile-drawer::before {
  background: #d5d8dc;
}
body.light-theme .mobile-drawer a { color: #474d57; }
body.light-theme .mobile-drawer a:hover,
body.light-theme .mobile-drawer a.active {
  color: #1e2329;
  background: #f5f5f5;
}
body.light-theme .mobile-drawer__divider { background: #eaecef; }

/* --- Light: Trading pages (spot, futures) --- */
body.light-theme .spot-header {
  background: #ffffff;
  border-bottom-color: #eaecef;
}
body.light-theme .pairs-panel {
  background: #ffffff;
  border-right-color: #eaecef;
}
body.light-theme .pair-row:hover,
body.light-theme .pair-row.active {
  background: #f5f5f5;
}
body.light-theme .chart-panel {
  background: #ffffff;
  border-right-color: #eaecef;
}
body.light-theme .chart-toolbar {
  border-bottom-color: #eaecef;
}
body.light-theme .chart-toolbar button:hover {
  background: #f0f1f3;
}
body.light-theme .chart-toolbar button.active {
  background: rgba(240,185,11,0.08);
}
body.light-theme .chart-tools-sidebar {
  background: #ffffff;
  border-right-color: #eaecef;
}
body.light-theme .chart-tools-sidebar button:hover {
  background: #f0f1f3;
}
body.light-theme .book-trades-panel {
  background: #ffffff;
  border-right-color: #eaecef;
}
body.light-theme .book-trades-tabs {
  border-bottom-color: #eaecef;
}
body.light-theme .ob-row:hover { background: #f5f5f5; }
body.light-theme .trade-panel { background: #ffffff; }
body.light-theme .orders-panel {
  background: #ffffff;
  border-top-color: #eaecef;
}
body.light-theme .orders-live__tabs {
  border-bottom-color: #eaecef;
}
body.light-theme .orders-live__row {
  border-bottom-color: #eaecef;
}
body.light-theme .trade-form__slider button {
  background: #eaecef;
  color: #474d57;
}
body.light-theme .trade-form__slider button:hover { color: #1e2329; }
body.light-theme .trade-form__total {
  border-top-color: #eaecef;
}
body.light-theme .mobile-trade-tabs {
  background: #ffffff;
  border-top-color: #eaecef;
}

/* --- Light: Pair modal --- */
body.light-theme .pair-modal {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 16px 56px rgba(0,0,0,0.12);
}
body.light-theme .pair-modal__header {
  background: #ffffff;
  border-bottom-color: #eaecef;
}
body.light-theme .pair-modal__item {
  border-bottom-color: #eaecef;
}
body.light-theme .pair-modal__item:active,
body.light-theme .pair-modal__item.active {
  background: #f5f5f5;
}

/* --- Light: Wallet / Account pages --- */
body.light-theme .account-sidebar {
  background: #ffffff;
  border-right-color: #eaecef;
}
body.light-theme .account-sidebar a:hover {
  background: rgba(240,185,11,0.04);
}
body.light-theme .account-sidebar a.active {
  background: rgba(240,185,11,0.06);
}
body.light-theme .wallet-total {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-theme .asset-table {
  background: #ffffff;
  border-color: #eaecef;
}
body.light-theme .asset-table th {
  border-bottom-color: #eaecef;
  color: #707a8a;
}
body.light-theme .asset-table td {
  border-bottom-color: #f0f1f3;
}
body.light-theme .asset-table tr:hover { background: #fafbfc; }
body.light-theme .asset-table tr:nth-child(even) { background: #fafbfc; }
body.light-theme .asset-table tr:nth-child(even):hover { background: #f5f5f5; }
body.light-theme .asset-actions a {
  background: #f5f5f5;
  border-color: #eaecef;
}
body.light-theme .asset-actions a:hover {
  background: rgba(240,185,11,0.08);
}

/* --- Light: Profile card --- */
body.light-theme .profile-card {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* --- Light: Form card (deposit/withdraw) --- */
body.light-theme .form-card {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-theme .deposit-result {
  background: #f5f5f5;
}
body.light-theme .deposit-result__address {
  background: #ffffff;
}
body.light-theme .deposit-result__address:hover {
  background: #f0f1f3;
}

/* --- Light: Orders table --- */
body.light-theme .orders-table {
  background: #ffffff;
  border-color: #eaecef;
}
body.light-theme .orders-table th {
  border-bottom-color: #eaecef;
}
body.light-theme .orders-table td {
  border-bottom-color: #f0f1f3;
}
body.light-theme .filter-tabs {
  border-bottom-color: #eaecef;
}

/* --- Light: Staking cards --- */
body.light-theme .stake-card,
body.light-theme [class*="stake-card"] {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-theme .stake-card:hover,
body.light-theme [class*="stake-card"]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
body.light-theme .staking-hero,
body.light-theme [class*="staking-hero"] {
  background: #ffffff;
}
body.light-theme .staking-hero__stat,
body.light-theme [class*="staking-hero__stat"] {
  background: #f5f5f5;
}
body.light-theme .hero--staking__token {
  background: #f5f5f5;
  border-color: #eaecef;
}
body.light-theme .hero--staking__token:hover {
  border-color: #f0b90b;
}
body.light-theme .hero--staking__label {
  background: rgba(240,185,11,0.06);
  border-color: rgba(240,185,11,0.12);
}
body.light-theme .stakes-table,
body.light-theme [class*="stakes-table"] {
  background: #ffffff;
  border-color: #eaecef;
}
body.light-theme .stake-card__detail,
body.light-theme [class*="stake-card__detail"] {
  background: #f5f5f5;
  border-color: #eaecef;
}

/* --- Light: Skeleton loading --- */
body.light-theme .skeleton-line {
  background: linear-gradient(90deg, #f0f1f3 25%, #e8e9eb 50%, #f0f1f3 75%);
  background-size: 200% 100%;
}

/* --- Light: Support chat --- */
body.light-theme .support-fab {
  background: rgba(240,185,11,0.1);
  border-color: rgba(240,185,11,0.2);
}
body.light-theme .support-fab:hover {
  background: rgba(240,185,11,0.16);
  border-color: #f0b90b;
}
body.light-theme .support-popup {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 16px 56px rgba(0,0,0,0.12);
}
body.light-theme .support-popup__header {
  background: #f5f5f5;
  border-bottom-color: #eaecef;
}
body.light-theme .support-msg--user {
  background: rgba(240,185,11,0.08);
}
body.light-theme .support-msg--admin {
  background: #f0f1f3;
}
body.light-theme .support-popup__input {
  background: #f5f5f5;
  border-top-color: #eaecef;
}
body.light-theme .support-popup__input input {
  background: #ffffff;
  border-color: #eaecef;
}

/* --- Light: Admin panel --- */
body.light-theme .admin-sidebar {
  background: #ffffff;
  border-right-color: #eaecef;
}
body.light-theme .admin-sidebar__header {
  border-bottom-color: #eaecef;
}
body.light-theme .admin-nav-item:hover {
  background: #f5f5f5;
}
body.light-theme .admin-nav-item.active {
  background: rgba(240,185,11,0.08);
}
body.light-theme .admin-nav-divider { background: #eaecef; }
body.light-theme .admin-sidebar__footer { border-top-color: #eaecef; }
body.light-theme .admin-return-btn {
  background: #f5f5f5;
  border-color: #eaecef;
}
body.light-theme .admin-stat-card {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-theme .admin-placeholder {
  background: #ffffff;
  border-color: #eaecef;
}
body.light-theme .adm-table-wrap {
  background: #ffffff;
  border-color: #eaecef;
}
body.light-theme .adm-table-header {
  border-bottom-color: #eaecef;
}
body.light-theme .adm-table th {
  background: #f5f5f5;
  border-bottom-color: #eaecef;
}
body.light-theme .adm-table td {
  border-bottom-color: #f0f1f3;
}
body.light-theme .adm-table tr:hover td {
  background: #fafbfc;
}
body.light-theme .adm-settings-panel {
  background: #ffffff;
  border-color: #eaecef;
}
body.light-theme .act-btn {
  border-color: #d5d8dc;
  color: #474d57;
}
body.light-theme .act-btn:hover {
  border-color: #f0b90b;
  color: #f0b90b;
}
body.light-theme .cell-role.user {
  background: #f0f1f3;
}

/* --- Light: Dropdowns general --- */
body.light-theme .navbar__dropdown--lang a:hover {
  background: #f5f5f5;
}

/* --- Light: Partners --- */
body.light-theme .partners-section {
  border-top-color: #eaecef;
}

/* --- Light: Auth pages --- */
body.light-theme .auth-card {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
body.light-theme .auth-page {
  background: #f8f9fa;
}

/* --- Light: Notifications --- */
body.light-theme .notif-dropdown {
  background: #ffffff;
  border-color: #eaecef;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* --- Light: Misc shadows fix --- */
body.light-theme .hero__price-card:hover,
body.light-theme .product-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Old support widget removed — styles now in css/support.css */