/*
 * LiquidPool interface system
 * Final visual layer shared by dashboard, auth, markets, exchange, balances
 * and administration. Page-specific styles remain responsible for business
 * layout; this file normalises presentation, accessibility and responsiveness.
 */

:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg2: #0a101a;
  --surface: #0e1623;
  --surface2: #131e2e;
  --surface3: #19283d;
  --surface4: #20324b;
  --border: rgba(151, 177, 210, .14);
  --border2: rgba(151, 177, 210, .25);
  --border-strong: rgba(77, 227, 255, .32);
  --accent: #4de3ff;
  --accent2: #46e6a4;
  --accent3: #7c9cff;
  --warning: #f7c96b;
  --text: #f4f8ff;
  --text-soft: #c7d2e1;
  --muted: #8797ad;
  --danger: #ff7185;
  --green: #46e6a4;
  --green-bg: rgba(70, 230, 164, .10);
  --red: #ff7185;
  --red-bg: rgba(255, 113, 133, .10);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .22);
  --shadow: 0 24px 70px rgba(0, 0, 0, .30);
  --shadow-accent: 0 16px 40px rgba(38, 193, 226, .16);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(900px 560px at -8% -8%, rgba(41, 171, 255, .18), transparent 62%),
    radial-gradient(740px 480px at 108% 22%, rgba(70, 230, 164, .10), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(180deg, #080d15 0%, #070b12 48%, #090f19 100%) !important;
  background-size: auto, auto, 48px 48px, 48px 48px, auto !important;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #041017;
  background: rgba(77, 227, 255, .82);
}

a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}

input, select, textarea {
  caret-color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: #64758d !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .018); }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(135, 151, 173, .35);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(77, 227, 255, .48); }

/* --------------------------------------------------------------------------
   Shared product navigation
   -------------------------------------------------------------------------- */

.page-dashboard > nav,
.page-markets > nav,
.page-balances > nav,
.page-exchange > nav {
  position: sticky !important;
  top: 0;
  z-index: 200;
  display: flex !important;
  align-items: center !important;
  min-height: 68px !important;
  height: 68px !important;
  padding: 0 clamp(1rem, 2.4vw, 2.5rem) !important;
  gap: clamp(.75rem, 1.5vw, 1.5rem) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(7, 11, 18, .88) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
}

.page-dashboard > nav::after,
.page-markets > nav::after,
.page-balances > nav::after,
.page-exchange > nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(77, 227, 255, .32), rgba(70, 230, 164, .20), transparent);
}

.page-dashboard .logo,
.page-markets .logo,
.page-balances .logo,
.page-exchange .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: .72rem !important;
  margin-right: 0 !important;
  color: var(--text) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(77, 227, 255, .20);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(77, 227, 255, .10), rgba(124, 156, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 25px rgba(21, 168, 203, .16);
}

.brand-mark img {
  width: 88px !important;
  height: 88px !important;
  max-width: none !important;
  flex: 0 0 88px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  transform: translateY(-8px);
  filter: drop-shadow(0 0 14px rgba(77, 227, 255, .22)) !important;
}

.logo span { color: var(--text) !important; }
.logo em { color: var(--accent) !important; font-style: normal; }

.page-dashboard .nav-links,
.page-markets .nav-links,
.page-balances .nav-links,
.page-dashboard .nav-tabs,
.page-exchange .nav-tabs {
  display: flex !important;
  align-items: center;
  gap: .22rem !important;
  min-width: 0;
}

.page-dashboard .nav-link,
.page-markets .nav-link,
.page-balances .nav-link,
.page-dashboard .nav-tab,
.page-exchange .nav-tab {
  position: relative;
  padding: .58rem .78rem !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease !important;
}

.page-dashboard .nav-link:hover,
.page-markets .nav-link:hover,
.page-balances .nav-link:hover,
.page-dashboard .nav-tab:hover,
.page-exchange .nav-tab:hover {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.page-dashboard .nav-link.active,
.page-markets .nav-link.active,
.page-balances .nav-link.active,
.page-dashboard .nav-tab.active,
.page-exchange .nav-tab.active {
  color: #eaffff !important;
  border-color: rgba(77, 227, 255, .20) !important;
  background: linear-gradient(180deg, rgba(77, 227, 255, .12), rgba(77, 227, 255, .05)) !important;
  box-shadow: inset 0 -2px 0 rgba(77, 227, 255, .68) !important;
}

.page-dashboard .nav-right,
.page-markets .nav-right,
.page-balances .nav-right,
.page-exchange .nav-right {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  margin-left: auto !important;
}

.nav-cta,
.page-exchange .nav-btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .55rem .88rem !important;
  border: 1px solid rgba(70, 230, 164, .26) !important;
  border-radius: 10px !important;
  background: rgba(70, 230, 164, .08) !important;
  color: var(--accent2) !important;
  font-size: .69rem !important;
  font-weight: 800 !important;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}

.nav-cta:hover,
.page-exchange .nav-btn.primary:hover {
  transform: translateY(-1px);
  border-color: rgba(70, 230, 164, .46) !important;
  background: rgba(70, 230, 164, .13) !important;
}

.nav-user,
.nav-user-wrap {
  min-height: 42px;
  padding: .24rem .28rem .24rem .6rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color .16s ease, background .16s ease;
}

.nav-user:hover,
.nav-user-wrap:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, .025);
}

.nav-username,
.page-exchange .nav-user,
.menu-name { color: var(--text) !important; }
.nav-email, .menu-mail { color: var(--muted) !important; }

.nav-avatar {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(77, 227, 255, .35) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(77, 227, 255, .95), rgba(70, 230, 164, .82)) !important;
  color: #041017 !important;
  box-shadow: 0 8px 22px rgba(42, 191, 221, .20) !important;
}

.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  z-index: 1000 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: calc(100vw - 1.5rem);
  overflow: hidden;
  border: 1px solid var(--border2) !important;
  border-radius: 16px !important;
  background: rgba(12, 20, 32, .98) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
  backdrop-filter: blur(22px);
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 16px !important;
  text-align: left;
}

.menu-head {
  padding: 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(135deg, rgba(77, 227, 255, .08), rgba(124, 156, 255, .05)) !important;
}

.menu-name {
  color: var(--text) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
}

.menu-mail {
  margin-top: .18rem;
  overflow: hidden;
  color: var(--muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .62rem !important;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-body {
  display: block;
  padding: .45rem !important;
}

.menu-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  min-height: 40px;
  padding: .64rem .72rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--text-soft) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}
.menu-btn:hover { color: var(--text) !important; background: rgba(77, 227, 255, .07) !important; }
.menu-btn.danger { color: var(--danger) !important; }
.menu-btn > span:last-child {
  margin-left: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
}
.menu-sep {
  height: 1px;
  margin: .35rem .4rem;
  background: var(--border) !important;
}

/* --------------------------------------------------------------------------
   Shared surfaces, controls and data tables
   -------------------------------------------------------------------------- */

.card,
.panel,
.chart-container,
.blocks-section,
.markets-card,
.controls,
.dash-hero,
.cp-hero-main,
.cp-hero-aside,
.cp-panel,
.cp-market-table-wrap,
.page-markets .page-hero,
.page-balances .page-hero,
.page-balances .hist-item,
.page-balances .modal,
.page-exchange .hero-card,
.page-admin .card,
.page-admin .detail-panel {
  border: 1px solid var(--border) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 42%),
    linear-gradient(180deg, rgba(15, 24, 38, .97), rgba(10, 17, 28, .98)) !important;
  box-shadow: var(--shadow-sm) !important;
}

.card,
.chart-container,
.blocks-section,
.markets-card,
.controls,
.cp-panel,
.cp-market-table-wrap,
.page-balances .hist-item,
.page-admin .card {
  border-radius: var(--radius) !important;
}

.card:hover,
.cp-panel:hover,
.page-markets .stat-card:hover,
.page-balances .stat-card:hover,
.page-dashboard .dash-metric:hover {
  border-color: rgba(77, 227, 255, .22) !important;
}

.card-header,
.card-hdr,
.blocks-header,
.pnl-hdr,
.sb-head,
.chart-controls,
.c-tabs,
.page-balances .card-header {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .018) !important;
}

.card-title,
.card-ttl,
.blocks-title,
.pnl-ttl,
.sb-title,
.chart-title,
.section-label {
  color: var(--muted) !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
}

table { width: 100%; border-collapse: collapse; }
thead tr { background: rgba(255, 255, 255, .016) !important; }
thead th {
  padding: .78rem 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  color: #8ea6c7 !important;
  font-size: .59rem !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr {
  border-bottom: 1px solid rgba(151, 177, 210, .08) !important;
  transition: background .14s ease !important;
}
tbody tr:hover { background: rgba(77, 227, 255, .035) !important; }
tbody td {
  padding: .82rem 1rem !important;
  color: var(--text-soft);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: .69rem !important;
}

.search-input,
.search-inp,
.sb-search,
.f-inp,
.input,
.adj-inp,
.mini-inp,
.sort-select,
.page-admin .f-inp {
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: rgba(4, 9, 16, .52) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.search-input:focus,
.search-inp:focus,
.sb-search:focus,
.f-inp:focus,
.input:focus,
.adj-inp:focus,
.mini-inp:focus,
.sort-select:focus,
.page-admin .f-inp:focus {
  border-color: rgba(77, 227, 255, .48) !important;
  background: rgba(8, 16, 27, .86) !important;
  box-shadow: 0 0 0 4px rgba(77, 227, 255, .08) !important;
}

.hero-action,
.hero-btn,
.cp-btn,
.trade-btn,
.btn-primary,
.btn-secondary,
.btn-dep,
.btn-ret,
.btn-copy,
.filter-tab,
.type-tab,
.pct-b,
.iv-btn,
.c-tab,
.sec-tab,
.hist-tab,
.dp-tab,
.pg-btn,
.btn-adj,
.btn-mini,
.btn-logout,
.btn-login {
  min-height: 38px;
  border-radius: 10px !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease, opacity .15s ease !important;
}

.hero-action:hover,
.hero-btn:hover,
.cp-btn:hover,
.trade-btn:hover,
.btn-dep:hover,
.btn-ret:hover,
.btn-copy:hover,
.btn-adj:hover,
.btn-mini:hover,
.btn-login:hover {
  transform: translateY(-1px);
}

.hero-action.primary,
.hero-btn-primary,
.cp-btn-primary,
.btn-primary,
.btn-login,
.btn-adj:not(.neg) {
  border: 1px solid rgba(77, 227, 255, .34) !important;
  background: linear-gradient(135deg, #3cc8ef, #45dda5) !important;
  color: #031017 !important;
  box-shadow: 0 13px 30px rgba(38, 193, 226, .15) !important;
}

.badge,
.badge-confirmed,
.change-badge,
.hi-badge,
.tag {
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Public dashboard and pool views
   -------------------------------------------------------------------------- */

#page-miningpool .dashboard-layout {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 260px !important;
  min-height: calc(100dvh - 68px) !important;
  height: auto !important;
  align-items: start;
}

#page-miningpool .dashboard-main {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.8rem) !important;
  overflow: visible !important;
}

#page-miningpool .dash-left,
#page-miningpool .dash-right {
  position: sticky;
  top: 68px;
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  border-color: var(--border) !important;
  background: rgba(6, 11, 18, .46);
}

.dash-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.4vw, 2rem) !important;
  border-radius: var(--radius-lg) !important;
}

.dash-hero::before,
.cp-hero-main::before,
.page-markets .page-hero::before,
.page-balances .page-hero::before,
.page-exchange .hero-card:first-child::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  top: -210px;
  right: -90px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(77, 227, 255, .11);
  filter: blur(3px);
  box-shadow: 0 0 110px rgba(77, 227, 255, .16);
}

.dash-kicker,
.hero-kicker,
.cp-eyebrow,
.command-eyebrow {
  color: var(--accent2) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.dash-title {
  margin-top: .35rem;
  color: var(--text);
  font-size: clamp(1.9rem, 3vw, 3.1rem) !important;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.dash-subtitle {
  max-width: 68ch !important;
  margin-top: .7rem !important;
  color: var(--text-soft) !important;
  font-size: .84rem !important;
  line-height: 1.75 !important;
}

.dash-pill,
.trust-pill,
.hero-pill {
  border-color: rgba(70, 230, 164, .22) !important;
  background: rgba(70, 230, 164, .065) !important;
  color: #b9f8dc !important;
}

.dash-metrics {
  gap: .75rem !important;
  margin-top: 1.35rem !important;
}

.dash-metric,
.quick-signal,
.hash-stat,
.stat-card,
.stat-box,
.hero-side-card,
.hero-metric,
.cp-side-stat {
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .022) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.dash-metric {
  min-height: 118px;
  padding: 1rem !important;
  border-radius: 14px !important;
}

.dash-metric-label,
.hash-stat-label,
.stat-label,
.stat-lbl,
.hero-metric-label,
.hero-side-label {
  color: var(--muted) !important;
  font-size: .57rem !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.dash-metric-value,
.hash-stat-value,
.stat-val,
.hero-metric-value,
.hero-side-value {
  color: var(--text) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: -.035em;
}

.miner-card,
.coin-item,
.quick-signal {
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .018) !important;
  box-shadow: none !important;
}

.miner-card:hover,
.coin-item:hover {
  border-color: rgba(77, 227, 255, .26) !important;
  background: rgba(77, 227, 255, .035) !important;
}

.dashboard-intel-grid { gap: 1rem !important; }
.dashboard-command-panel {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(155deg, rgba(77, 227, 255, .07), rgba(70, 230, 164, .025)) !important;
  box-shadow: var(--shadow-sm) !important;
}

.command-steps > div {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .02) !important;
}

.section-tabs,
.filter-tabs,
.hist-tabs,
.type-tabs {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: rgba(4, 9, 16, .42) !important;
}

.sec-tab.active,
.filter-tab.active,
.hist-tab.active,
.type-tab.active,
.dp-tab.active,
.c-tab.active,
.iv-btn.active {
  border-color: rgba(77, 227, 255, .22) !important;
  background: rgba(77, 227, 255, .08) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

#page-coinpool {
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2.4rem) !important;
}

.cp-hero { gap: 1rem !important; }
.cp-hero-main,
.cp-hero-aside {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) !important;
}

.cp-title {
  max-width: 16ch;
  color: var(--text) !important;
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  letter-spacing: -.05em !important;
  line-height: 1.02 !important;
}

.cp-copy { color: var(--text-soft) !important; line-height: 1.75 !important; }
.cp-brand-orb {
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .02) !important;
}
.cp-market-table-wrap { overflow: hidden; }

#page-pool .layout {
  min-height: calc(100dvh - 68px) !important;
  height: auto !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Authentication
   -------------------------------------------------------------------------- */

.page-login {
  display: grid !important;
  min-height: 100dvh;
  padding: clamp(1rem, 3vw, 2.5rem) !important;
  place-items: center;
}

.page-login .shell {
  width: min(1180px, 100%) !important;
  min-height: min(740px, calc(100dvh - 5rem));
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: rgba(7, 12, 20, .88) !important;
  box-shadow: 0 36px 110px rgba(0, 0, 0, .50) !important;
  backdrop-filter: blur(24px);
}

.user-menu.open {
  display: block !important;
}

#user-menu {
  border-color: var(--border2) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #101a2a, #09111d) !important;
}

.page-login .brand {
  position: relative;
  padding: clamp(2rem, 4vw, 4rem) !important;
  overflow: hidden;
  border-right: 1px solid var(--border) !important;
  background:
    radial-gradient(460px 360px at 8% 0%, rgba(77, 227, 255, .16), transparent 70%),
    radial-gradient(400px 360px at 100% 100%, rgba(70, 230, 164, .10), transparent 72%),
    linear-gradient(155deg, rgba(15, 27, 43, .98), rgba(8, 14, 24, .98)) !important;
}

.page-login .brand::before {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -150px;
  width: 500px;
  height: 500px;
  opacity: .10;
  background: url("/img/logo.png") center / contain no-repeat;
  transform: rotate(-8deg);
  pointer-events: none;
}

.page-login .logo-mark {
  position: relative;
  width: 50px !important;
  height: 50px !important;
  border: 1px solid rgba(77, 227, 255, .22) !important;
  border-radius: 15px !important;
  background: rgba(77, 227, 255, .06) !important;
}

.page-login .logo-mark img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 92px !important;
  height: 92px !important;
  max-width: none;
  transform: translate(-50%, -7px);
  filter: drop-shadow(0 0 12px rgba(77, 227, 255, .22));
}

.page-login h1 {
  max-width: 13ch;
  margin-top: 1.25rem !important;
  color: var(--text);
  font-size: clamp(2.35rem, 4.5vw, 4.3rem) !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
}

.page-login .lead { color: var(--text-soft) !important; }
.page-login .feature-grid { gap: .75rem !important; }
.page-login .feature {
  min-height: 110px;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .024) !important;
}

.page-login .panel {
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(8, 14, 23, .96) !important;
  box-shadow: none !important;
}

.page-login .auth-card {
  width: min(450px, 100%) !important;
  padding: .75rem !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(14, 23, 36, .86) !important;
  box-shadow: var(--shadow) !important;
}

.page-login .auth-title { font-size: 1.55rem !important; }
.page-login .auth-sub { color: var(--muted) !important; }
.page-login .tabs { border-color: var(--border) !important; background: rgba(4, 9, 16, .45) !important; }
.page-login .tab { min-height: 42px; border-radius: 10px !important; }
.page-login .tab.active {
  border: 1px solid rgba(77, 227, 255, .20) !important;
  background: rgba(77, 227, 255, .08) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.page-login .input { min-height: 50px; }
.page-login .btn { min-height: 50px; border-radius: 12px !important; }
.auth-security-note {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .2rem 1rem 1rem;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.5;
}
.auth-security-note::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 12px rgba(70, 230, 164, .64);
}
.auth-back {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
  padding: .52rem .72rem;
  border: 1px solid rgba(151, 169, 194, .15);
  border-radius: 999px;
  background: rgba(7, 12, 20, .72);
  backdrop-filter: blur(12px);
}
.auth-back:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Markets
   -------------------------------------------------------------------------- */

.page-markets .main {
  width: min(1480px, 100%);
  max-width: none !important;
  margin: 0 auto;
  padding: clamp(1rem, 2.4vw, 2.3rem) !important;
}

.page-markets .page-hero {
  position: relative;
  padding: clamp(1.35rem, 2.8vw, 2.35rem) !important;
  overflow: hidden;
  border-radius: var(--radius-lg) !important;
}

.page-markets .page-title,
.page-balances .page-title {
  color: var(--text);
  font-size: clamp(1.8rem, 3vw, 2.9rem) !important;
  font-weight: 800;
  letter-spacing: -.045em !important;
  line-height: 1.05;
}
.page-markets .page-title span { color: var(--accent) !important; }
.page-markets .page-sub,
.page-balances .page-sub,
.page-admin .page-sub {
  color: var(--text-soft) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: .79rem !important;
  line-height: 1.7 !important;
}

.page-markets .hero-side { gap: .7rem !important; }
.page-markets .hero-side-card {
  min-height: 106px;
  padding: 1rem !important;
  border-radius: 14px !important;
}

.page-markets .stats-row,
.page-balances .stats-row,
.page-admin .stats-grid,
.hash-stats {
  gap: .7rem !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-markets .stat-card,
.page-balances .stat-card,
.page-admin .stat-box,
.hash-stat {
  min-height: 100px;
  padding: 1rem 1.05rem !important;
  border-radius: 14px !important;
}

.page-markets .controls {
  padding: .75rem !important;
  border-radius: 14px !important;
}
.page-markets .search-input { min-height: 44px; padding-left: 2.4rem !important; }
.page-markets .filter-tabs { padding: .25rem !important; }
.page-markets .sort-select { min-height: 44px; padding: 0 .85rem !important; }
.page-markets .markets-card { overflow: hidden; }
.page-markets .markets-table tbody tr:hover { transform: none !important; }
.page-markets .coin-icon {
  border: 1px solid var(--border) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .22);
}
.page-markets .trade-btn {
  border: 1px solid rgba(70, 230, 164, .25) !important;
  background: rgba(70, 230, 164, .07) !important;
  color: var(--accent2) !important;
}

/* --------------------------------------------------------------------------
   Balances and secure transfer modals
   -------------------------------------------------------------------------- */

.page-balances > .layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 1.2rem !important;
  width: min(1500px, 100%);
  max-width: none !important;
  margin: 0 auto;
  padding: clamp(1rem, 2.4vw, 2.2rem) !important;
}

.page-balances .page-hero {
  padding: clamp(1.25rem, 2.4vw, 2rem) !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
}
.page-balances .hero-panel,
.page-balances .hero-metric {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .02) !important;
}
.page-balances .hero-panel { border-radius: 14px !important; }
.page-balances .hero-panel-copy { color: var(--text-soft) !important; }
.page-balances .sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
}
.page-balances .card { overflow: hidden !important; }
.page-balances .hist-tabs { padding: .3rem !important; }
.page-balances .hist-item { padding: 1rem !important; }
.page-balances .coin-ico,
.page-balances .hi-ico {
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .20);
}

.page-balances .modal-overlay,
.auth-modal-overlay,
.page-admin .detail-overlay {
  background: rgba(2, 6, 11, .78) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}
.page-balances .modal {
  width: min(560px, 100%) !important;
  max-height: min(86dvh, 820px) !important;
  overflow-y: auto !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .55) !important;
}
.page-balances .modal::before { display: none !important; }
.page-balances .modal-header { padding: 1.2rem 1.35rem !important; }
.page-balances .modal-title { font-size: 1.2rem !important; }
.modal-close,
.dp-close {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .025) !important;
  color: var(--muted) !important;
}
.modal-close:hover,
.dp-close:hover { border-color: rgba(255, 113, 133, .30) !important; color: var(--danger) !important; }
.page-balances .net-item {
  padding: .85rem .9rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .018) !important;
}
.page-balances .net-item.selected {
  border-color: rgba(70, 230, 164, .46) !important;
  background: rgba(70, 230, 164, .055) !important;
  box-shadow: 0 0 0 3px rgba(70, 230, 164, .06);
}
.page-balances .addr-box,
.page-balances .summary,
.page-balances .notice-card {
  border-color: var(--border) !important;
  border-radius: 12px !important;
  background: rgba(4, 9, 16, .48) !important;
}
.page-balances .addr-warning {
  border-color: rgba(247, 201, 107, .22) !important;
  background: rgba(247, 201, 107, .055) !important;
  color: var(--warning) !important;
}

/* --------------------------------------------------------------------------
   Exchange terminal
   -------------------------------------------------------------------------- */

.page-exchange { background: var(--bg) !important; }
.page-exchange .ticker-bar {
  gap: clamp(.7rem, 1.25vw, 1.25rem) !important;
  justify-content: flex-start !important;
}
.page-exchange .tk-pair { color: var(--text) !important; font-size: .78rem !important; }
.page-exchange .tk-item {
  padding-left: .8rem;
  border-left: 1px solid var(--border);
}
.page-exchange .nav-btn:not(.primary) {
  min-height: 36px;
  padding: .5rem .7rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .02) !important;
  color: var(--muted) !important;
}

.page-exchange > .layout {
  display: grid !important;
  grid-template-columns: 220px 235px minmax(420px, 1fr) 300px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: calc(100dvh - 68px) !important;
  overflow: hidden;
  background: rgba(4, 8, 14, .36);
}
.page-exchange .exchange-hero {
  gap: .8rem !important;
  padding: .85rem !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(5, 10, 17, .58) !important;
}
.page-exchange .hero-card {
  position: relative;
  min-height: 126px !important;
  overflow: hidden;
  border-radius: 15px !important;
}
.page-exchange .hero-symbol { font-size: 1.55rem !important; letter-spacing: -.03em !important; }
.page-exchange .hero-price { font-size: 1.65rem !important; }
.page-exchange .hero-metric,
.page-exchange .hero-balance-row {
  border-color: var(--border) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .018) !important;
}
.page-exchange .hero-note { color: var(--text-soft) !important; line-height: 1.7 !important; }

.page-exchange .pairs-sidebar,
.page-exchange .orderbook,
.page-exchange .main-center,
.page-exchange .form-panel {
  border-color: var(--border) !important;
  background: rgba(8, 14, 23, .88) !important;
}
.page-exchange .pair-item {
  padding: .58rem .72rem !important;
  border-bottom-color: rgba(151, 177, 210, .07) !important;
}
.page-exchange .pair-item:hover { background: rgba(77, 227, 255, .035) !important; }
.page-exchange .pair-item.active {
  padding-left: .62rem !important;
  border-left: 2px solid var(--accent) !important;
  background: linear-gradient(90deg, rgba(77, 227, 255, .10), rgba(77, 227, 255, .025)) !important;
}
.page-exchange .pair-item.active .pi-name { color: var(--accent) !important; }
.page-exchange .ob-row { padding: .17rem .72rem !important; }
.page-exchange .ob-mid { background: rgba(77, 227, 255, .025) !important; }
.page-exchange #chart-container { height: 280px !important; background: rgba(4, 8, 14, .32); }
.page-exchange .iv-btn { min-height: 28px; border-radius: 7px !important; }
.page-exchange .c-tab { min-height: 40px; }
.page-exchange .f-scroll { padding: .8rem !important; gap: .65rem !important; }
.page-exchange .f-inp { min-height: 42px; padding: .55rem .7rem !important; }
.page-exchange .f-sum {
  padding: .65rem .7rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: rgba(4, 9, 16, .40) !important;
}
.page-exchange .sub-btn { min-height: 44px; border-radius: 10px !important; }
.page-exchange .sub-btn.buy { background: var(--green) !important; color: #03130d !important; }
.page-exchange .sub-btn.sell { background: var(--red) !important; color: #21070c !important; }

/* --------------------------------------------------------------------------
   Administration
   -------------------------------------------------------------------------- */

.page-admin .login-wrap { padding: 1rem; }
.page-admin .login-card {
  max-width: 460px !important;
  padding: 2rem !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background:
    radial-gradient(320px 220px at 50% -20%, rgba(77, 227, 255, .13), transparent 72%),
    linear-gradient(180deg, rgba(15, 24, 38, .98), rgba(9, 15, 25, .99)) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .52) !important;
}
.page-admin .login-card::before {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent) !important;
}
.page-admin .login-logo,
.page-admin .admin-logo { color: var(--text) !important; }
.page-admin .login-logo img,
.page-admin .admin-logo img {
  border: 1px solid rgba(77, 227, 255, .18);
  background: rgba(77, 227, 255, .05);
}
.page-admin .login-sub { margin-top: .4rem !important; }
.page-admin .f-inp { min-height: 46px; padding: .7rem .8rem !important; }
.page-admin .btn-login { min-height: 48px; }

.page-admin .admin-nav {
  width: 258px !important;
  border-right: 1px solid var(--border) !important;
  background: rgba(8, 14, 23, .95) !important;
  box-shadow: 18px 0 55px rgba(0, 0, 0, .18) !important;
}
.page-admin .admin-nav-logo { padding: 1.25rem !important; border-color: var(--border) !important; }
.page-admin .nav-items { padding: .8rem !important; }
.page-admin .nav-item {
  min-height: 44px;
  margin-bottom: .25rem !important;
  padding: .65rem .75rem !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: var(--muted) !important;
}
.page-admin .nav-item:hover {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, .025) !important;
  color: var(--text) !important;
}
.page-admin .nav-item.active {
  border-color: rgba(77, 227, 255, .18) !important;
  background: linear-gradient(90deg, rgba(77, 227, 255, .10), rgba(77, 227, 255, .025)) !important;
  color: var(--text) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.page-admin .ni-icon {
  display: inline-grid;
  width: 26px !important;
  height: 26px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: .58rem !important;
}
.page-admin .nav-footer { padding: 1rem !important; border-color: var(--border) !important; }
.page-admin .admin-main {
  max-width: 1780px;
  margin-left: 258px !important;
  padding: clamp(1rem, 2.2vw, 2.25rem) !important;
}
.page-admin .page-header {
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.page-admin .page-title {
  font-size: 1.65rem !important;
  letter-spacing: -.035em;
}
.page-admin .stat-box { min-height: 108px; }
.page-admin .card { overflow-x: auto !important; }
.page-admin .search-inp { min-height: 46px; padding: .65rem .85rem !important; }
.page-admin .detail-panel {
  max-width: 980px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .52) !important;
}
.page-admin .dp-tabs { overflow-x: auto; border-color: var(--border) !important; }
.page-admin .adj-form {
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  background: rgba(4, 9, 16, .38) !important;
}
.page-admin .coin-chip {
  border-color: var(--border) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .02) !important;
}

/* --------------------------------------------------------------------------
   Responsive behaviour
   -------------------------------------------------------------------------- */

@media (max-width: 1480px) {
  .page-exchange > .layout {
    grid-template-columns: 190px 215px minmax(380px, 1fr) 280px !important;
  }
  .page-exchange .nav-btn:not(.primary) { display: none; }
}

@media (max-width: 1240px) {
  #page-miningpool .dashboard-layout {
    grid-template-columns: 210px minmax(0, 1fr) !important;
  }
  #page-miningpool .dash-right { display: none !important; }

  .page-exchange > nav .ticker-bar { display: none !important; }
  .page-exchange > .layout {
    grid-template-columns: 180px 210px minmax(380px, 1fr) 280px !important;
  }
}

@media (max-width: 1080px) {
  .page-dashboard > nav,
  .page-markets > nav,
  .page-balances > nav,
  .page-exchange > nav {
    height: auto !important;
    min-height: 68px !important;
    flex-wrap: wrap !important;
    padding-top: .65rem !important;
    padding-bottom: .65rem !important;
  }

  .page-dashboard .nav-links,
  .page-markets .nav-links,
  .page-balances .nav-links,
  .page-dashboard .nav-tabs,
  .page-exchange .nav-tabs {
    order: 3;
    width: 100%;
    padding: .15rem 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar { display: none; }

  .page-login .shell { grid-template-columns: 1fr !important; }
  .page-login .brand { min-height: 480px; border-right: 0 !important; border-bottom: 1px solid var(--border); }

  .page-markets .page-header { grid-template-columns: 1fr !important; }
  .page-balances > .layout { grid-template-columns: 1fr !important; }
  .page-balances .sidebar { position: static; }

  .page-exchange > .layout {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
    flex-direction: column;
  }
  .page-exchange .exchange-hero { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-exchange .hero-card:last-child { grid-column: 1 / -1; }
  .page-exchange .pairs-sidebar { max-height: 310px; }
  .page-exchange .orderbook { min-height: 430px; max-height: 520px; }
  .page-exchange .main-center { min-height: 650px; }
  .page-exchange .form-panel { min-height: 620px; }

  .page-admin .admin-layout.show { display: block !important; }
  .page-admin .admin-nav {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .page-admin .admin-nav-logo { display: flex; align-items: center; justify-content: space-between; }
  .page-admin .nav-items { display: flex !important; overflow-x: auto; }
  .page-admin .nav-item { width: auto !important; flex: 0 0 auto; white-space: nowrap; }
  .page-admin .nav-footer { display: flex; align-items: center; gap: 1rem; }
  .page-admin .admin-user { margin: 0 !important; }
  .page-admin .btn-logout { width: auto !important; padding: .55rem 1rem !important; }
  .page-admin .admin-main { margin-left: 0 !important; }
}

@media (max-width: 820px) {
  #page-miningpool .dashboard-layout { display: block !important; }
  #page-miningpool .dash-left { display: none !important; }
  #page-miningpool .dashboard-main { padding: .85rem !important; }
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-intel-grid { grid-template-columns: 1fr !important; }
  .dashboard-command-panel { display: none !important; }
  .bottom-grid { grid-template-columns: 1fr !important; }

  .page-login { padding: .75rem !important; }
  .page-login .shell { min-height: 0; border-radius: var(--radius-lg) !important; }
  .page-login .brand { min-height: 430px; padding: 2rem !important; }
  .page-login .feature-grid { grid-template-columns: 1fr !important; }
  .page-login .feature { min-height: 0; }

  .page-markets .hero-side { grid-template-columns: 1fr !important; }
  .page-markets .stats-row,
  .page-balances .stats-row,
  .page-admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-markets .controls { align-items: stretch !important; }
  .page-markets .filter-tabs { width: 100%; overflow-x: auto; }
  .page-markets .filter-tab { flex: 1 0 auto; }
  .page-markets .sort-select { width: 100%; }

  .page-balances .hero-top,
  .page-balances .hero-grid { display: grid !important; grid-template-columns: 1fr !important; }
  .page-balances .trust-strip { justify-content: flex-start !important; }
  .page-balances .hero-meta { grid-template-columns: 1fr !important; }
  .page-balances .card { overflow-x: auto !important; }
  .page-balances .card table { min-width: 680px; }

  .page-exchange .exchange-hero { grid-template-columns: 1fr !important; }
  .page-exchange .hero-card:last-child { grid-column: auto; }
  .page-exchange .chart-info { display: none !important; }
}

@media (max-width: 620px) {
  .page-dashboard > nav,
  .page-markets > nav,
  .page-balances > nav,
  .page-exchange > nav { padding-inline: .7rem !important; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .page-dashboard .logo,
  .page-markets .logo,
  .page-balances .logo,
  .page-exchange .logo { font-size: .78rem !important; }
  .nav-user-meta, .nav-cta { display: none !important; }
  .page-dashboard .nav-link,
  .page-markets .nav-link,
  .page-balances .nav-link,
  .page-exchange .nav-tab { padding: .5rem .65rem !important; }

  .dash-metrics,
  .page-markets .stats-row,
  .page-balances .stats-row,
  .page-admin .stats-grid { grid-template-columns: 1fr !important; }
  .dash-metric { min-height: 94px; }

  .page-login { padding-top: 4rem !important; }
  .page-login .brand { min-height: 390px; }
  .page-login h1 { font-size: 2.35rem !important; }
  .page-login .panel { padding: .75rem !important; }
  .page-login .auth-card { border: 0 !important; padding: .4rem !important; box-shadow: none !important; }
  .auth-back { top: .8rem; left: 1rem; }

  .page-markets .main,
  .page-balances > .layout { padding: .7rem !important; }
  .page-markets .page-hero,
  .page-balances .page-hero { padding: 1.1rem !important; }
  .page-markets .page-title,
  .page-balances .page-title { font-size: 1.7rem !important; }
  .page-markets .markets-table { min-width: 820px; }
  .page-markets .hero-action,
  .page-balances .hero-action { width: 100%; }

  .page-exchange .nav-right { width: auto !important; margin-left: auto !important; }
  .page-exchange .nav-btn { display: none !important; }
  .page-exchange .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-exchange .hero-pair { align-items: flex-start !important; flex-direction: column; }
  .page-exchange .chart-controls { overflow-x: auto; }

  .page-admin .login-card { padding: 1.25rem !important; }
  .page-admin .admin-main { padding: .75rem !important; }
  .page-admin .card table { min-width: 760px; }
  .page-admin .adj-form { min-width: 700px; }
  .page-admin .nav-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}