/* ==========================================================================
   BICRYPTO5 DESIGN SYSTEM — MTR Integration
   Covers: tokens, theme, animations, trading, utilities, mobile bottom nav,
           page loader, login/auth wrappers, and all shared components
   Extracted from Bicrypto5/frontend — pure CSS (no Tailwind build required)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES — LIGHT & DARK TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Layout */
  --header-height: 60px;
  --footer-height: 40px;

  /* Semantic color tokens (HSL triplets — used with hsl()) */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --success: 142 76% 36%;
  --success-foreground: 210 40% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;

  /* Trading colors */
  --color-win: #22c55e;
  --color-loss: #ef4444;
  --price-increase: #10b981;
  --price-decrease: #ef4444;

  /* Theme-aware border colors */
  --border-color: rgba(228, 228, 231, 0.8);
  --border-color-light: rgba(228, 228, 231, 0.5);
  --table-border-color: rgba(228, 228, 231, 1);
  --table-border-color-light: rgba(228, 228, 231, 0.7);
  --panel-border-color: rgba(228, 228, 231, 1);
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --success-foreground: 0 0% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  --border-color: rgba(63, 63, 70, 0.5);
  --border-color-light: rgba(39, 39, 42, 0.5);
  --table-border-color: rgba(63, 63, 70, 0.8);
  --table-border-color-light: rgba(39, 39, 42, 0.7);
  --panel-border-color: rgba(63, 63, 70, 0.8);
}

/* --------------------------------------------------------------------------
   2. BASE RESETS & BODY
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. THEME SWITCHING
   -------------------------------------------------------------------------- */
.dark-theme { color-scheme: dark; }
.light-theme { color-scheme: light; }

/* Smooth theme transitions */
* {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.2s ease;
}

/* Disable transitions on initial page load */
.no-transition * { transition: none !important; }

/* --------------------------------------------------------------------------
   4. THEME-AWARE BORDER UTILITIES
   -------------------------------------------------------------------------- */
.border-theme        { border-color: var(--border-color) !important; }
.border-theme-light  { border-color: var(--border-color-light) !important; }
.table-border        { border-color: var(--table-border-color) !important; }
.table-border-light  { border-color: var(--table-border-color-light) !important; }
.panel-border        { border-color: var(--panel-border-color) !important; }

:root:not(.dark) table               { border-color: var(--table-border-color); }
:root:not(.dark) table th,
:root:not(.dark) table td            { border-color: var(--table-border-color-light); }
:root:not(.dark) .order-book-row     { border-color: var(--table-border-color-light); }

/* --------------------------------------------------------------------------
   5. SCROLLBARS
   -------------------------------------------------------------------------- */
::-webkit-scrollbar        { width: 8px; height: 8px; background-color: transparent; border-radius: 9999px; }
::-webkit-scrollbar-track  { background-color: #f4f4f5; border-radius: 9999px; }
::-webkit-scrollbar-thumb  { background-color: #d4d4d8; border: 2px solid #f4f4f5; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background-color: #a1a1aa; }

.dark ::-webkit-scrollbar        { width: 8px; height: 8px; background-color: #18181b; border-radius: 9999px; }
.dark ::-webkit-scrollbar-track  { background: #09090b; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb  { background-color: #27272a; border: 2px solid #09090b; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb:hover { background-color: #3f3f46; }

.scrollbar-thin              { scrollbar-width: thin; }
.scrollbar-thin::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; }
.scrollbar-thin::-webkit-scrollbar-track { background-color: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 9999px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

.hide-scrollbar, .scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar { display: none; }

.no-scrollbar::-webkit-scrollbar { width: 0; }
.no-scrollbar::-webkit-scrollbar-thumb { background-color: transparent; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(100,100,100,0.5); border-radius: 3px; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(100,100,100,0.5) transparent; }

/* --------------------------------------------------------------------------
   6. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.page-min-height          { min-height: calc(var(--vh, 1vh) * 100 - 117px); }
.page-min-height-semibox  { min-height: calc(var(--vh, 1vh) * 100 - 200px); }
.page-min-height-horizontal { min-height: calc(var(--vh, 1vh) * 100 - 170px); }
.app-height               { height: calc(var(--vh, 1vh) * 100 - 11.1rem) !important; }

@media (max-width: 768px) {
  .app-height { height: calc(var(--vh, 1vh) * 100 - 10.5rem) !important; }
}

.layout-padding { padding-bottom: 112px; }
@media (min-width: 768px) {
  .layout-padding { padding-bottom: 37px; }
}

@media (min-width: 1280px) {
  .semibox-content-wrapper { margin-left: 56px; margin-right: 56px; }
}

.loginwrapper                { min-height: calc(var(--vh, 1vh) * 100); flex-basis: 100%; }
.loginwrapper .lg-inner-column { height: calc(var(--vh, 1vh) * 100); }

/* Safe area */
.pb-safe         { padding-bottom: env(safe-area-inset-bottom, 0); }
.pb-safe-or-2    { padding-bottom: max(env(safe-area-inset-bottom, 0), 0.5rem); }
.h-screen-safe   { height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)); }
.min-h-screen-safe { min-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)); }
.h-screen-mobile { height: calc(var(--vh, 1vh) * 100); }
.min-h-screen-mobile { min-height: calc(var(--vh, 1vh) * 100); }

/* --------------------------------------------------------------------------
   7. INPUT GROUP
   -------------------------------------------------------------------------- */
.input-group :not(:first-child) input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group.merged :not(:first-child) input { border-left-width: 0 !important; padding-left: 0 !important; }
.input-group :not(:last-child) input  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group.merged :not(:last-child) input { border-right-width: 0 !important; padding-right: 0 !important; }

/* --------------------------------------------------------------------------
   8. COLLAPSIBLE CONTENT
   -------------------------------------------------------------------------- */
.CollapsibleContent { overflow: hidden; }
.CollapsibleContent[data-state="open"]   { animation: slideDown 300ms ease-out; }
.CollapsibleContent[data-state="closed"] { animation: slideUp 300ms ease-out; }

/* --------------------------------------------------------------------------
   9. STICKY HEADER BLUR
   -------------------------------------------------------------------------- */
.has-sticky-header::after {
  position: absolute;
  z-index: -10;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  content: "";
  background: linear-gradient(
    180deg,
    rgba(var(--v-theme-background), 70%) 44%,
    rgba(var(--v-theme-background), 43%) 73%,
    rgba(var(--v-theme-background), 0%)
  );
  background-repeat: repeat;
  block-size: 5.5rem;
  inset-block-start: -1.5rem;
  inset-inline: 0;
  -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
  mask: linear-gradient(black, black 18%, transparent 100%);
}

/* --------------------------------------------------------------------------
   10. KEYFRAMES — CORE
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}
@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideLeft {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideRight {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes slideInLeft {
  from { transform: translateX(-10%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(10%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInTop {
  from { transform: translateY(-10%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideInBottom {
  from { transform: translateY(10%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes grid-slideUp   { 0% { transform: translateY(0); }    100% { transform: translateY(-50%); } }
@keyframes grid-slideDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes row-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 5px  rgba(59,130,246,0.5); }
  50%  { box-shadow: 0 0 15px rgba(59,130,246,0.8); }
  100% { box-shadow: 0 0 5px  rgba(59,130,246,0.5); }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%  { transform: translateY(-20px); }
  60%  { transform: translateY(-10px); }
}
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes zoomIn   { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes zoomOut  { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes zoomIn95 { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes panel-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-slide-in-right { from { transform: translateX(20px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes panel-slide-in-left  { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes panel-slide-in-top   { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes panel-slide-in-bottom{ from { transform: translateY(20px);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes panel-collapse { from { transform: scale(1); }    to { transform: scale(0.98); } }
@keyframes panel-expand   { from { transform: scale(0.98); } to { transform: scale(1); } }
@keyframes flipX { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0); opacity: 1; } }
@keyframes flipY { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0); opacity: 1; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80%      { transform: translateX(5px); }
}
@keyframes tada {
  0%       { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80%      { transform: scale(1.1) rotate(-3deg); }
  100%     { transform: scale(1) rotate(0); }
}
@keyframes wobble {
  0%   { transform: translateX(0%); }
  15%  { transform: translateX(-25%) rotate(-5deg); }
  30%  { transform: translateX(20%) rotate(3deg); }
  45%  { transform: translateX(-15%) rotate(-3deg); }
  60%  { transform: translateX(10%) rotate(2deg); }
  75%  { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
@keyframes heartBeat {
  0%  { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
@keyframes rubberBand {
  0%   { transform: scale(1); }
  30%  { transform: scaleX(1.25) scaleY(0.75); }
  40%  { transform: scaleX(0.75) scaleY(1.25); }
  50%  { transform: scaleX(1.15) scaleY(0.85); }
  65%  { transform: scaleX(0.95) scaleY(1.05); }
  75%  { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}

/* Flash animations — light/dark variants */
@keyframes flash-green       { 0% { background-color: rgba(34,197,94,0.2);  } 100% { background-color: transparent; } }
@keyframes flash-red         { 0% { background-color: rgba(239,68,68,0.2);  } 100% { background-color: transparent; } }
@keyframes flash-green-dark  { 0% { background-color: rgba(34,197,94,0.15); } 100% { background-color: transparent; } }
@keyframes flash-red-dark    { 0% { background-color: rgba(239,68,68,0.15); } 100% { background-color: transparent; } }
@keyframes flash-green-light { 0% { background-color: rgba(22,163,74,0.1);  } 100% { background-color: transparent; } }
@keyframes flash-red-light   { 0% { background-color: rgba(220,38,38,0.1);  } 100% { background-color: transparent; } }

@keyframes progress-bar-stripes { 0% { background-position: 1rem 0; } to { background-position: 0 0; } }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes slideDownAndFade  { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUpAndFade    { from { opacity: 0; transform: translateY(2px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeftAndFade  { from { opacity: 0; transform: translateX(2px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRightAndFade { from { opacity: 0; transform: translateX(-2px); } to { opacity: 1; transform: translateX(0); } }

/* --------------------------------------------------------------------------
   11. ANIMATION CLASSES
   -------------------------------------------------------------------------- */
.animate-slide-up           { animation: grid-slideUp   30s linear infinite; }
.animate-slide-down         { animation: grid-slideDown 30s linear infinite; }
.animate-slide-up-slow      { animation: grid-slideUp   45s linear infinite; }
.animate-slide-down-slow    { animation: grid-slideDown 45s linear infinite; }
.animate-slide-up-fast      { animation: grid-slideUp   20s linear infinite; }
.animate-slide-down-fast    { animation: grid-slideDown 20s linear infinite; }
.animate-marquee            { animation: marquee 30s linear infinite; }
.animate-bounce-subtle      { animation: bounce-subtle 2s infinite; }
.animate-pulse-glow         { animation: pulse-glow 2s infinite; }
.animate-flash-green        { animation: flash-green 1s ease-out; }
.animate-flash-red          { animation: flash-red  1s ease-out; }
.dark .animate-flash-green  { animation: flash-green-dark 1s ease-out; }
.dark .animate-flash-red    { animation: flash-red-dark   1s ease-out; }
.light .animate-flash-green { animation: flash-green-light 1s ease-out; }
.light .animate-flash-red   { animation: flash-red-light   1s ease-out; }
.animate-slideIn            { animation: slideIn  0.3s ease-out forwards; }
.animate-fadeIn             { animation: fadeIn   0.3s ease-out forwards; }
.animate-stripes            { animation: progress-bar-stripes 1s linear infinite; }
.animate-in                 { animation-duration: 150ms; animation-timing-function: cubic-bezier(0.4,0,0.2,1); animation-fill-mode: both; }
.fade-in                    { animation-name: fadeIn; }
.zoom-in-95                 { transform-origin: top left; animation-name: zoomIn95; }

/* Order card / slide panel */
.order-card-enter  { animation: fadeIn  0.3s ease-out forwards; }
.order-card-exit   { animation: fadeOut 0.3s ease-in  forwards; }
.order-card-update { animation: pulse   0.5s ease-in-out; }
.slide-panel-enter { animation: slideIn  0.3s ease-out forwards; }
.slide-panel-exit  { animation: slideOut 0.3s ease-in  forwards; }
.row-appear        { animation: row-appear 0.2s ease-out forwards; }

/* Panel animate */
.panel-animate-in       { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.4,0,0.2,1); animation-fill-mode: both; }
.panel-fade-in          { animation-name: panel-fade-in; }
.panel-slide-in-right   { animation-name: panel-slide-in-right; }
.panel-slide-in-left    { animation-name: panel-slide-in-left; }
.panel-slide-in-top     { animation-name: panel-slide-in-top; }
.panel-slide-in-bottom  { animation-name: panel-slide-in-bottom; }
.panel-delay-100        { animation-delay: 100ms; }
.panel-delay-200        { animation-delay: 200ms; }
.panel-delay-300        { animation-delay: 300ms; }

/* --------------------------------------------------------------------------
   12. HOVER & INTERACTION EFFECTS
   -------------------------------------------------------------------------- */
.hover-gradient-transition { position: relative; z-index: 1; overflow: hidden; }
.hover-gradient-transition::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 0; transition: opacity 0.3s ease;
}
.hover-gradient-transition:hover::before { opacity: 1; }

.text-gradient-hover { position: relative; z-index: 1; }
.text-gradient-hover .hover-text { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
.text-gradient-hover:hover .hover-text    { opacity: 1; }
.text-gradient-hover:hover .default-text  { opacity: 0; }

.gradient-border-hover { position: relative; z-index: 1; }
.gradient-border-hover::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px;
  z-index: -1; opacity: 0; transition: opacity 0.3s ease; border-radius: inherit;
}
.gradient-border-hover:hover::before { opacity: 1; }

.hover-elevate { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-elevate:hover {
  transform: translateY(calc(-4px * var(--hover-intensity, 1)));
  box-shadow: 0 calc(10px * var(--hover-intensity, 1)) calc(20px * var(--hover-intensity, 1)) rgba(0,0,0,0.1);
}
.hover-scale { transition: transform 0.3s ease; }
.hover-scale:hover { transform: scale(calc(1 + (0.1 * var(--hover-intensity, 1)))); }
.hover-glow  { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 calc(15px * var(--hover-intensity, 1)) rgba(124,58,237,calc(0.5 * var(--hover-intensity, 1))); }
.hover-tilt  { transition: transform 0.3s ease; }
.hover-tilt:hover { transform: perspective(1000px) rotateX(calc(5deg * var(--hover-intensity, 1))) rotateY(calc(5deg * var(--hover-intensity, 1))); }

/* Dark mode select options */
.dark select option { background-color: #27272a; color: #e4e4e7; }

/* --------------------------------------------------------------------------
   13. TRADING UI
   -------------------------------------------------------------------------- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.order-panel-container   { position: relative; z-index: 50; }
.order-panel-dropdown    { z-index: 100; }
.trade-confirmation-modal { z-index: 200; }

.trading-history-footer {
  background: linear-gradient(to right, #1a1d29, #131722);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.trading-history-footer:hover { background: linear-gradient(to right, #1e2235, #171b2a); }
.trading-history-toggle {
  background: rgba(30,33,48,0.8);
  border: 1px solid rgba(42,46,57,0.8);
  transition: all 0.2s ease;
}
.trading-history-toggle:hover { background: rgba(36,39,56,0.9); transform: scale(1.05); }

.pb-trading-history       { padding-bottom: 40px; }
.trading-history-visible  { margin-bottom: 40px; }
.trading-buttons-container { margin-bottom: 60px; }

/* Glass morphism */
.glass-morphism {
  background: rgba(30,33,48,0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Press / price level */
.press-effect:active { transform: scale(0.95); transition: transform 0.1s; }
.price-level   { transition: background-color 0.2s ease-in-out; }
.price-increase { transition: color 0.2s ease; color: #10b981; }
.price-decrease { transition: color 0.2s ease; color: #ef4444; }

.orderbook-section { max-height: 100%; overflow-y: auto; }

/* --------------------------------------------------------------------------
   14. VERTICAL TEXT / COLLAPSED PANEL UTILITIES
   -------------------------------------------------------------------------- */
.writing-vertical-rl  { writing-mode: vertical-rl; }
.vertical-text-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; }
.vertical-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  text-orientation: mixed; white-space: nowrap; letter-spacing: 0.05em;
  text-align: center; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.collapsed-panel-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%; text-align: center; white-space: nowrap;
  letter-spacing: 0.05em; padding: 1rem 0; font-weight: 500;
}

/* --------------------------------------------------------------------------
   15. PARALLAX & GRADIENT EFFECTS
   -------------------------------------------------------------------------- */
.parallax      { transform: translateZ(0); transition: transform 0.2s ease-out; }
.parallax-slow { transform: translateZ(0); transition: transform 0.4s ease-out; }
.parallax-layer-1 { transform: translateZ(-10px) scale(2); }
.parallax-layer-2 { transform: translateZ(-5px)  scale(1.5); }
.parallax-layer-3 { transform: translateZ(-2px)  scale(1.2); }

.gradient-animate { background-size: 200% 200%; animation: gradient 15s ease infinite; }

.glow      { box-shadow: 0 0 15px rgba(79,70,229,0.5); transition: box-shadow 0.3s ease; }
.glow:hover { box-shadow: 0 0 25px rgba(79,70,229,0.8); }
.text-glow { text-shadow: 0 0 10px rgba(79,70,229,0.5); }

.btn-hover-effect { position: relative; overflow: hidden; }
.btn-hover-effect::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; width: 0; height: 0;
  background: rgba(255,255,255,0.2); border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.btn-hover-effect:hover::after { width: 300%; height: 300%; }

/* --------------------------------------------------------------------------
   16. MISC GLOBAL UTILITIES
   -------------------------------------------------------------------------- */
.text-balance { text-wrap: balance; }
.bg-grid-white {
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   17. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .no-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
  .touch-target { min-height: 44px; min-width: 44px; }
  .slide-in-right  { animation: slideInRight 0.3s forwards; }
  .slide-out-right { animation: slideOutRight 0.3s forwards; }

  @keyframes slideInRight  { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes slideOutRight { from { transform: translateX(0); }    to { transform: translateX(100%); } }

  .mobile-footer { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -5px 20px rgba(0,0,0,0.3); }
  .mobile-btn:active { transform: scale(0.96); transition: transform 0.1s; }
}
.mobile-footer { box-shadow: 0 -5px 25px rgba(0,0,0,0.3); }
.tab-transition { transition: transform 0.3s ease; }

@media (max-width: 480px) {
  .modal-container { width: 95% !important; max-width: 350px; padding: 12px !important; }
  .modal-header    { margin-bottom: 10px !important; }
  .modal-content   { font-size: 0.875rem !important; }
  .modal-buttons   { gap: 8px !important; }
}

/* --------------------------------------------------------------------------
   18. MOBILE BOTTOM NAVIGATION BAR
   -------------------------------------------------------------------------- */
.ih-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: hsl(var(--card) / 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid hsl(var(--border));
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .ih-bottom-nav { display: none; } }

.ih-bottom-nav-inner {
  display: flex; align-items: center; justify-content: space-around;
  height: 64px; max-width: 500px; margin: 0 auto;
}
.ih-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; flex: 1; padding: 6px 0; cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent; transition: all 0.15s ease; text-decoration: none;
}
.ih-nav-item ion-icon { font-size: 22px; color: hsl(var(--muted-foreground)); transition: color 0.15s ease; }
.ih-nav-item span     { font-size: 10px; font-weight: 500; color: hsl(var(--muted-foreground)); transition: color 0.15s ease; }
.ih-nav-item.active ion-icon { color: hsl(var(--primary)); }
.ih-nav-item.active span     { color: hsl(var(--primary)); font-weight: 600; }
.ih-nav-item:active { transform: scale(0.9); }

.ih-nav-trade { position: relative; margin-top: -16px; }
.ih-nav-trade-btn {
  width: 52px; height: 52px; border-radius: 1rem;
  background: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px hsl(var(--primary) / 0.3);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.ih-nav-trade-btn ion-icon { font-size: 24px; color: hsl(var(--primary-foreground)) !important; }
.ih-nav-trade:active .ih-nav-trade-btn { transform: scale(0.9); }

@media (max-width: 1023px) {
  body { padding-bottom: 72px; }
}

/* --------------------------------------------------------------------------
   19. PAGE LOADER
   -------------------------------------------------------------------------- */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: hsl(var(--background));
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loading-icon {
  width: 64px; height: 64px;
  animation: loader-pulse 1.5s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.92); }
}
.animate-pulse-logo { animation: loader-pulse 1.5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   20. LOGIN / AUTH WRAPPERS
   -------------------------------------------------------------------------- */
.auth-page-bg {
  min-height: 100vh;
  background: hsl(var(--background));
}

/* --------------------------------------------------------------------------
   21. DASH-LOCK (mobile viewport lock for dashboard)
   -------------------------------------------------------------------------- */
html.dash-lock,
html.dash-lock body {
  height: 100dvh !important;
  height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
html.dash-lock body {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width: 1024px) {
  html.dash-lock,
  html.dash-lock body {
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
  }
  html.dash-lock body {
    min-height: 100vh !important;
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   22. BICRYPTOO COMPONENT SYSTEM — exact shadcn/ui patterns from Bicryptoo
   -------------------------------------------------------------------------- */

/* shadow-2xs utility (Tailwind v4 — fallback definition) */
.shadow-2xs { box-shadow: 0 1px rgb(0 0 0 / 0.05); }
.shadow-xs   { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* ---- Card ---- */
/* Base card: rounded-md border bg-card text-card-foreground */
.bc-card, [data-slot="card"] {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--card-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
[data-slot="card-header"] {
  display: flex; flex-direction: column; gap: 0.375rem;
  padding: 1.5rem 1.5rem 0;
}
[data-slot="card-title"]  { font-weight: 600; line-height: 1; letter-spacing: -0.015em; }
[data-slot="card-description"] { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
[data-slot="card-content"] { padding: 1.5rem; padding-top: 0; }
[data-slot="card-footer"]  { display: flex; align-items: center; padding: 0 1.5rem 1.5rem; }

/* bc-card shorthands */
.bc-card-header { padding: 1.5rem 1.5rem 0; }
.bc-card-body   { padding: 1.5rem; }
.bc-card-footer { padding: 0 1.5rem 1.5rem; }

/* ---- Badge ---- */
/* Base: inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium */
.bc-badge, [data-slot="badge"] {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: calc(var(--radius) - 2px); border: 1px solid transparent;
  padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500;
  white-space: nowrap; width: fit-content; overflow: hidden;
  transition: color 0.15s, box-shadow 0.15s;
}
.bc-badge-default  { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.bc-badge-success  { background: hsl(var(--success)); color: hsl(var(--success-foreground)); border-color: transparent; }
.bc-badge-danger   { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: transparent; }
.bc-badge-warning  { background: hsl(var(--warning)); color: hsl(var(--warning-foreground)); border-color: transparent; }
.bc-badge-secondary{ background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: transparent; }
.bc-badge-outline  { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
/* Soft variants (colored bg at 15% opacity) */
.bc-badge-success-soft  { background: hsl(var(--success)/0.15); color: hsl(var(--success)); border-color: transparent; }
.bc-badge-danger-soft   { background: hsl(var(--destructive)/0.15); color: hsl(var(--destructive)); border-color: transparent; }
.bc-badge-warning-soft  { background: hsl(var(--warning)/0.15); color: hsl(var(--warning)); border-color: transparent; }
.bc-badge-primary-soft  { background: hsl(var(--primary)/0.15); color: hsl(var(--primary)); border-color: transparent; }
.bc-badge-muted         { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: transparent; }

/* ---- Button ---- */
/* Base: inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium */
.bc-btn {
  display: inline-flex; cursor: pointer; align-items: center; justify-content: center;
  gap: 0.5rem; white-space: nowrap; border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; height: 2.5rem;
  border: none; text-decoration: none; outline: none;
  transition: color 0.15s, box-shadow 0.15s;
}
.bc-btn:disabled { pointer-events: none; opacity: 0.5; }
.bc-btn:focus-visible { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring)/0.5); }
.bc-btn:active { transform: scale(0.98); }

/* Variants */
.bc-btn-primary   { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px rgb(0 0 0 / 0.05); }
.bc-btn-primary:hover { background: hsl(var(--primary)/0.9); }
.bc-btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); box-shadow: 0 1px rgb(0 0 0 / 0.05); }
.bc-btn-secondary:hover { background: hsl(var(--secondary)/0.8); }
.bc-btn-outline   { background: hsl(var(--background)); border: 1px solid hsl(var(--input)); box-shadow: 0 1px rgb(0 0 0 / 0.05); color: hsl(var(--foreground)); }
.bc-btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.bc-btn-ghost     { background: transparent; color: hsl(var(--foreground)); }
.bc-btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.bc-btn-destructive { background: hsl(var(--destructive)); color: #fff; box-shadow: 0 1px rgb(0 0 0 / 0.05); }
.bc-btn-destructive:hover { background: hsl(var(--destructive)/0.9); }
.bc-btn-success   { background: hsl(var(--success)); color: hsl(var(--success-foreground)); }
.bc-btn-success:hover { background: hsl(var(--success)/0.9); }
.bc-btn-link      { background: transparent; color: hsl(var(--primary)); text-underline-offset: 4px; height: auto; padding: 0; }
.bc-btn-link:hover { text-decoration: underline; }

/* Sizes */
.bc-btn-xs  { height: 2rem; padding: 0 0.5rem; font-size: 0.8125rem; }
.bc-btn-sm  { height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.bc-btn-md  { height: 2.5rem; padding: 0 1rem; }
.bc-btn-lg  { height: 2.75rem; padding: 0 2rem; font-size: 1rem; }
.bc-btn-icon { height: 2.5rem; width: 2.5rem; padding: 0; }
.bc-btn-icon-sm { height: 2rem; width: 2rem; padding: 0; }

/* ---- Input ---- */
/* Base: border-input h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base */
.bc-input {
  display: flex; align-items: center;
  width: 100%; min-width: 0;
  height: 2.25rem; /* h-9 */
  background: transparent;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  padding: 0.25rem 0.75rem;
  font-size: 1rem; /* text-base */
  color: hsl(var(--foreground));
  outline: none;
  transition: color 0.15s, box-shadow 0.15s;
}
.bc-input::placeholder { color: hsl(var(--muted-foreground)); }
.bc-input:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring)/0.5);
}
.bc-input:disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }

/* ---- Table ---- */
/* Base: w-full caption-bottom text-sm */
.bc-table-wrap { position: relative; width: 100%; overflow-x: auto; }
.bc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; caption-side: bottom; }
.bc-table thead tr { border-bottom: 1px solid hsl(var(--border)); }
.bc-table tbody tr:last-child { border-bottom: none; }
.bc-table tbody tr { border-bottom: 1px solid hsl(var(--border)); transition: background 0.15s; }
.bc-table tbody tr:hover { background: hsl(var(--muted)/0.5); }
.bc-table th {
  padding: 0.625rem 0.5rem; text-align: left; align: middle; font-weight: 500;
  color: hsl(var(--muted-foreground)); white-space: nowrap; height: 2.5rem;
}
.bc-table td { padding: 0.5rem; align: middle; white-space: nowrap; color: hsl(var(--foreground)); }

/* ---- Skeleton shimmer ---- */
.bc-skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--border)) 25%,
    hsl(var(--accent)) 50%,
    hsl(var(--border)) 75%
  );
  background-size: 200% 100%;
  animation: bc-shimmer 1.4s infinite;
  border-radius: calc(var(--radius) - 2px);
}
@keyframes bc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Divider ---- */
.bc-divider { height: 1px; background: hsl(var(--border)); margin: 1rem 0; }

/* ---- Page layout utilities (from Bicryptoo globals.css) ---- */
.page-min-height            { min-height: calc(var(--vh, 1vh) * 100 - 117px); }
.page-min-height-semibox    { min-height: calc(var(--vh, 1vh) * 100 - 200px); }
.page-min-height-horizontal { min-height: calc(var(--vh, 1vh) * 100 - 170px); }
.app-height                 { height: calc(var(--vh, 1vh) * 100 - 11.1rem) !important; }
.layout-padding             { padding-bottom: 112px; }
@media (min-width: 768px) { .layout-padding { padding-bottom: 37px; } }
@media (max-width: 768px) { .app-height { height: calc(var(--vh, 1vh) * 100 - 10.5rem) !important; } }

/* ---- Auth layout (loginwrapper) ---- */
.loginwrapper { min-height: calc(var(--vh, 1vh) * 100); flex-basis: 100%; }
.loginwrapper .lg-inner-column { height: calc(var(--vh, 1vh) * 100); }

/* ---- Collapsed panel system (from Bicryptoo panels.css) ---- */
.collapsed-panel {
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1), height 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
:root:not(.dark) .collapsed-panel { background-color: #f4f4f5; border-color: #e4e4e7; color: #71717a; }
:root.dark .collapsed-panel       { background-color: #121212; border-color: rgba(82,82,82,0.2); color: #888; }
:root:not(.dark) .collapsed-panel:hover { background-color: #e4e4e7; }
:root.dark .collapsed-panel:hover       { background-color: #1a1a1a; }

/* ---- Collapsible animation ---- */
.CollapsibleContent { overflow: hidden; }
.CollapsibleContent[data-state="open"]   { animation: bc-slideDown 300ms ease-out; }
.CollapsibleContent[data-state="closed"] { animation: bc-slideUp 300ms ease-out; }
@keyframes bc-slideDown { from { height: 0; } to { height: var(--radix-collapsible-content-height, auto); } }
@keyframes bc-slideUp   { from { height: var(--radix-collapsible-content-height, auto); } to { height: 0; } }

/* ---- Support drawer ---- */
.support-drawer-content {
  width: 90vw !important; max-width: 90vw !important;
  min-width: 90vw !important; height: 100vh !important;
}

/* ---- Input group ---- */
.input-group :not(:first-child) input  { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group :not(:last-child)  input  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group.merged :not(:first-child) input { border-left-width: 0 !important; padding-left: 0 !important; }
.input-group.merged :not(:last-child)  input { border-right-width: 0 !important; padding-right: 0 !important; }

/* --------------------------------------------------------------------------
   23. LANGUAGE SIDEBAR OVERLAY
   -------------------------------------------------------------------------- */
#langSidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 85vw; z-index: 1100;
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  box-shadow: -4px 0 32px rgba(0,0,0,0.15);
}
#langSidebar.open { transform: translateX(0); }
#langSidebarOverlay {
  position: fixed; inset: 0; z-index: 1099;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#langSidebarOverlay.open { opacity: 1; visibility: visible; }