.app-shell { --account-polish-surface: rgba(18, 33, 50, .92); }
.app-shell .sidebar { width: 260px; padding: 28px 16px 18px; }
.app-shell .sidebar .brand { margin-bottom: 38px; font-size: 21px; }
.app-shell .sidebar .main-nav { gap: 7px; }
.app-shell .sidebar .nav-item { height: 48px; border-radius: 11px; gap: 14px; padding-inline: 14px; font-size: 14px; }
.app-shell .sidebar .nav-item.active { box-shadow: inset 0 0 0 1px rgba(100, 160, 235, .09); }
.app-shell .main-area { margin-left: 260px; }
.app-shell .main-area > .topbar { height: 58px; min-height: 58px; padding-inline: clamp(22px, 2.4vw, 36px); gap: 22px; }
.app-shell .content-area { width: 100%; max-width: 1680px; margin-inline: auto; padding: 30px clamp(24px, 3vw, 48px) 48px; font-size: 15px; line-height: 1.55; }
.app-shell .content-area h1 { font-size: clamp(25px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.035em; }
.app-shell .content-area h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.app-shell .content-area h3 { font-size: 17px; line-height: 1.35; }
.app-shell .content-area p { line-height: 1.6; }
.app-shell .content-area label { line-height: 1.45; }
.app-shell .content-area input, .app-shell .content-area select, .app-shell .content-area textarea { font-size: 14px; }
.app-shell .content-area input:not([type="checkbox"]):not([type="radio"]), .app-shell .content-area select { min-height: 42px; border-radius: 10px; }
.app-shell .content-area textarea { min-height: 96px; border-radius: 10px; }
.app-shell .content-area .panel, .app-shell .content-area .market-summary-card { border-radius: 16px; border-color: rgba(126, 158, 196, .2); box-shadow: 0 10px 28px rgba(1, 8, 18, .16); }
.app-shell .content-area .account-hub { gap: 20px; }
.app-shell .content-area .account-overview-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 18px; }
.app-shell .content-area .account-overview-side { gap: 16px; }
.app-shell .content-area .account-finance-wallet, .app-shell .content-area .referral-program-card, .app-shell .content-area .account-overview-profile, .app-shell .content-area .wallet-conversion-panel { padding: 22px; }
.app-shell .content-area .account-overview-section { gap: 16px; }
.app-shell .content-area .account-overview-section-heading { margin-bottom: 2px; }
.app-shell .content-area .token-form-section, .app-shell .content-area .token-preview-card, .app-shell .content-area .token-fee-card, .app-shell .content-area .token-help-card { border-radius: 16px; padding: 20px; }
.app-shell .content-area .token-form-section { margin-bottom: 16px; }
.app-shell .content-area .market-summary-card { padding: 18px; }
.app-shell .content-area .nav-item { transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.app-shell .content-area button, .app-shell .sidebar button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.app-shell .content-area button:hover:not(:disabled), .app-shell .sidebar .nav-item:hover { transform: translateY(-1px); }
.app-shell .content-area .account-finance-wallet, .app-shell .content-area .referral-program-card, .app-shell .content-area .account-overview-profile, .app-shell .content-area .wallet-conversion-panel, .app-shell .content-area .token-form-section, .app-shell .content-area .token-preview-card, .app-shell .content-area .token-fee-card, .app-shell .content-area .token-help-card, .app-shell .content-area .market-summary-card, .app-shell .content-area .markets-full, .app-shell .content-area .chart-panel, .app-shell .content-area .orderbook-panel, .app-shell .content-area .order-panel { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.app-shell .content-area .account-finance-wallet:hover, .app-shell .content-area .referral-program-card:hover, .app-shell .content-area .account-overview-profile:hover, .app-shell .content-area .wallet-conversion-panel:hover, .app-shell .content-area .token-form-section:hover, .app-shell .content-area .token-preview-card:hover, .app-shell .content-area .token-fee-card:hover, .app-shell .content-area .token-help-card:hover, .app-shell .content-area .market-summary-card:hover, .app-shell .content-area .markets-full:hover, .app-shell .content-area .chart-panel:hover, .app-shell .content-area .orderbook-panel:hover, .app-shell .content-area .order-panel:hover { transform: translateY(-2px); border-color: rgba(100, 164, 232, .34); box-shadow: 0 16px 36px rgba(0, 5, 14, .23); }
.app-shell .content-area > * { animation: account-page-enter .55s cubic-bezier(.2, .8, .2, 1) both; }
.app-shell .content-area > * > .panel, .app-shell .content-area > * > [class*="card"] { animation: account-card-enter .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.app-shell .content-area > * > .panel:nth-child(2), .app-shell .content-area > * > [class*="card"]:nth-child(2) { animation-delay: .06s; }
.app-shell .content-area > * > .panel:nth-child(3), .app-shell .content-area > * > [class*="card"]:nth-child(3) { animation-delay: .12s; }
.app-shell .content-area > * > .panel:nth-child(4), .app-shell .content-area > * > [class*="card"]:nth-child(4) { animation-delay: .18s; }
@keyframes account-page-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes account-card-enter { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 1100px) and (min-width: 761px) {
  .app-shell .main-area { margin-left: 220px; }
  .app-shell .sidebar { width: 220px; }
  .app-shell .content-area { padding: 26px 24px 40px; }
  .app-shell .content-area .account-overview-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app-shell .main-area { margin-left: 0; }
  .app-shell .main-area > .topbar { min-height: 54px; height: 54px; padding-inline: 16px; gap: 10px; }
  .app-shell .content-area { padding: 20px 16px calc(124px + env(safe-area-inset-bottom)); font-size: 14px; }
  .app-shell .content-area h1 { font-size: clamp(23px, 6vw, 28px); }
  .app-shell .content-area h2 { font-size: 19px; }
  .app-shell .content-area h3 { font-size: 16px; }
  .app-shell .content-area .account-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .app-shell .content-area .account-hub { gap: 18px; }
  .app-shell .content-area .account-finance-wallet, .app-shell .content-area .referral-program-card, .app-shell .content-area .account-overview-profile, .app-shell .content-area .wallet-conversion-panel { padding: 17px; }
  .app-shell .content-area .account-overview-side { gap: 14px; }
  .app-shell .content-area .token-form-section, .app-shell .content-area .token-preview-card, .app-shell .content-area .token-fee-card, .app-shell .content-area .token-help-card { padding: 17px; }
  .app-shell .content-area .market-summary-card { padding: 14px; }
  .app-shell .content-area .panel, .app-shell .content-area .market-summary-card { border-radius: 14px; }
  .app-shell .content-area input:not([type="checkbox"]):not([type="radio"]), .app-shell .content-area select { min-height: 44px; }
}
@media (max-width: 420px) {
  .app-shell .content-area { padding-inline: 13px; }
  .app-shell .content-area .account-finance-wallet, .app-shell .content-area .referral-program-card, .app-shell .content-area .account-overview-profile, .app-shell .content-area .wallet-conversion-panel, .app-shell .content-area .token-form-section { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .content-area > *, .app-shell .content-area > * > .panel, .app-shell .content-area > * > [class*="card"] { animation: none !important; }
  .app-shell .content-area button, .app-shell .sidebar button, .app-shell .content-area .account-finance-wallet, .app-shell .content-area .referral-program-card, .app-shell .content-area .account-overview-profile, .app-shell .content-area .wallet-conversion-panel, .app-shell .content-area .token-form-section, .app-shell .content-area .token-preview-card, .app-shell .content-area .token-fee-card, .app-shell .content-area .token-help-card, .app-shell .content-area .market-summary-card, .app-shell .content-area .markets-full, .app-shell .content-area .chart-panel, .app-shell .content-area .orderbook-panel, .app-shell .content-area .order-panel { transition: none !important; }
}
/* Keep hover feedback visual-only: no cards, panels, or controls shift position. */
.app-shell .content-area .panel:hover, .app-shell .content-area [class*="-card"]:hover, .app-shell .content-area [class*="-panel"]:hover, .app-shell .content-area button:hover:not(:disabled), .app-shell .sidebar .nav-item:hover { transform: none !important; }
.app-shell .content-area .account-finance-wallet, .app-shell .content-area .referral-program-card, .app-shell .content-area .account-overview-profile, .app-shell .content-area .wallet-conversion-panel, .app-shell .content-area .token-form-section, .app-shell .content-area .token-preview-card, .app-shell .content-area .token-fee-card, .app-shell .content-area .token-help-card, .app-shell .content-area .market-summary-card, .app-shell .content-area .markets-full, .app-shell .content-area .chart-panel, .app-shell .content-area .orderbook-panel, .app-shell .content-area .order-panel, .app-shell .content-area button, .app-shell .sidebar .nav-item { transition-property: border-color, box-shadow, color, background-color, opacity !important; }

/* Market summary cards: match compact reference sizing without changing the table. */
.app-shell .content-area .market-summary-card { min-height: 153px; padding: 14px; }
.app-shell .content-area .market-summary-card .market-summary-heading { min-height: 24px; margin-bottom: 8px; }
.app-shell .content-area .market-summary-card .market-summary-heading h2 { font-size: 14px; line-height: 20px; letter-spacing: 0; }
.app-shell .content-area .market-summary-card .market-summary-heading button { min-height: 24px; font-size: 12px; }
.app-shell .content-area .market-summary-card .market-summary-row { min-height: 23px; }
.app-shell .content-area .market-summary-card .market-summary-row .coin-icon { flex-basis: 20px; width: 20px; height: 20px; font-size: 10px; }
.app-shell .content-area .market-summary-card .market-summary-row strong, .app-shell .content-area .market-summary-card .market-summary-row > span:not(.coin-icon), .app-shell .content-area .market-summary-card .market-summary-row b { font-size: 12px; line-height: 18px; }
@media (max-width: 760px) {
  .app-shell .content-area .market-summary-card { min-height: 0; padding: 14px; }
  .app-shell .content-area .market-summary-card .market-summary-row .coin-icon { flex-basis: 20px; width: 20px; height: 20px; font-size: 10px; }
}

@media (max-width: 760px) {
  .app-shell .content-area .market-summary-card { display: none !important; }
}