/* ============================================================
   ZEUS TRADING v9 — PRO TERMINAL THEME
   Tokyo Night palette + glassmorphism + tick-flash + pro typography
   Override dla elegant.css (ładowany PO nim, ma priorytet)
   ============================================================ */

:root{
  /* Surfaces */
  --pro-bg-base:        #0b0e14;
  --pro-bg-panel:       #11151c;
  --pro-bg-elevated:    #161b24;
  --pro-bg-glass:       rgba(17, 21, 28, 0.72);
  --pro-bg-glass-hi:    rgba(22, 27, 36, 0.82);
  --pro-bg-glass-alert: rgba(247, 118, 142, 0.06);

  /* Borders / lines */
  --pro-border:         rgba(125, 207, 255, 0.08);
  --pro-border-hi:      rgba(125, 207, 255, 0.18);
  --pro-border-accent:  rgba(125, 207, 255, 0.35);
  --pro-divider:        rgba(192, 202, 245, 0.06);

  /* Text */
  --pro-text:           #c0caf5;
  --pro-text-dim:       #a0a8c8;
  --pro-text-muted:     #7f85a3;
  --pro-text-faint:     #565c75;

  /* Accents */
  --pro-accent:         #7dcfff;   /* cyan terminal */
  --pro-accent-hi:      #a5e3ff;
  --pro-accent-glow:    rgba(125, 207, 255, 0.45);
  --pro-green:          #9ece6a;
  --pro-green-hi:       #c3e88d;
  --pro-green-glow:     rgba(158, 206, 106, 0.35);
  --pro-red:            #f7768e;
  --pro-red-hi:         #ff9ea8;
  --pro-red-glow:       rgba(247, 118, 142, 0.40);
  --pro-gold:           #e0af68;
  --pro-purple:         #bb9af7;
  --pro-orange:         #ff9e64;

  /* Shadows */
  --pro-shadow-lg:      0 24px 60px -12px rgba(0,0,0,0.65), 0 8px 20px -8px rgba(0,0,0,0.45), inset 0 1px 0 0 rgba(255,255,255,0.025);
  --pro-shadow-md:      0 12px 36px -10px rgba(0,0,0,0.55), 0 4px 12px -4px rgba(0,0,0,0.35), inset 0 1px 0 0 rgba(255,255,255,0.02);
  --pro-shadow-sm:      0 4px 12px -2px rgba(0,0,0,0.4), inset 0 1px 0 0 rgba(255,255,255,0.015);
  --pro-shadow-glow-a:  0 0 0 1px var(--pro-border-hi), 0 0 24px -6px var(--pro-accent-glow);
  --pro-shadow-glow-g:  0 0 0 1px rgba(158,206,106,0.25), 0 0 20px -8px var(--pro-green-glow);
  --pro-shadow-glow-r:  0 0 0 1px rgba(247,118,142,0.25), 0 0 20px -8px var(--pro-red-glow);

  /* Type */
  --pro-font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pro-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', 'Consolas', 'Menlo', monospace;

  /* Sizing */
  --pro-radius-sm: 6px;
  --pro-radius:    10px;
  --pro-radius-lg: 14px;
  --pro-radius-xl: 20px;

  --pro-sidebar-w: 232px;
  --pro-topbar-h:  56px;
}

/* ============================================================
   GLOBAL RESET / BASE
   ============================================================ */
html, body{
  background:
    radial-gradient(ellipse 80% 60% at 30% -10%, rgba(125,207,255,0.05), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 110%, rgba(187,154,247,0.04), transparent 60%),
    var(--pro-bg-base) !important;
  color: var(--pro-text) !important;
  font-family: var(--pro-font-sans) !important;
  font-feature-settings: "cv11","ss01","ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* All numbers use monospace with tabular figures — universal rule */
.mono, code, pre, kbd, samp,
.price, .num, .val, .value, .pnl, .ticker, .pct,
td.mono, td.num, td.val, td.price, td.pct, td.pnl,
.metric-value, .card-value, .stat-value,
[class*="-price"], [class*="-value"], [class*="-amount"],
.amount, .qty, .hash, .order-id, .address {
  font-family: var(--pro-font-mono) !important;
  font-feature-settings: "tnum","zero","ss01";
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.01em;
}

/* Scrollbar premium */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,207,255,0.18), rgba(125,207,255,0.08));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(125,207,255,0.35), rgba(125,207,255,0.18));
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Selection */
::selection{ background: rgba(125,207,255,0.25); color: var(--pro-accent-hi); }

/* ============================================================
   CARDS / PANELS — glassmorphism
   Override obecnych .card, .panel, .tile, .box
   ============================================================ */
.card, .panel, .tile, .box, .widget, .block,
[class*="-card"], [class*="-panel"], [class*="-tile"]{
  background: var(--pro-bg-glass) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: var(--pro-shadow-md) !important;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              box-shadow 220ms ease,
              border-color 220ms ease;
  position: relative;
  overflow: hidden;
}
.card::before, .panel::before, .tile::before, .box::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 120px at 50% -40px, rgba(125,207,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
  opacity: .85;
}
.card:hover, .panel:hover, .tile:hover{
  transform: translateY(-1px);
  border-color: var(--pro-border-hi) !important;
  box-shadow: var(--pro-shadow-lg) !important;
}

/* State tinting */
.card.ok, .panel.ok, .tile.ok, .state-ok{ box-shadow: var(--pro-shadow-glow-g) !important; }
.card.alert, .panel.alert, .tile.alert, .state-alert{ box-shadow: var(--pro-shadow-glow-r) !important; background: var(--pro-bg-glass-alert) !important; }
.card.active, .panel.active, .tile.active, .state-active{ box-shadow: var(--pro-shadow-glow-a) !important; }

/* ============================================================
   HEADINGS
   ============================================================ */
h1,h2,h3,h4{
  color: var(--pro-text) !important;
  font-weight: 650;
  letter-spacing: -0.015em;
}
h1{ font-size: 22px; }
h2{ font-size: 17px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pro-text-dim) !important; font-weight: 600; }
h3{ font-size: 14px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--pro-text-muted) !important; font-weight: 600; }

/* ============================================================
   TOPBAR / HEADER
   ============================================================ */
header, .topbar, .navbar, .page-header{
  background: linear-gradient(180deg, rgba(11,14,20,0.88), rgba(11,14,20,0.62)) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--pro-border) !important;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6);
}

/* ============================================================
   BUTTONS
   ============================================================ */
button, .btn, [type="submit"]{
  font-family: var(--pro-font-sans);
  font-weight: 550;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, rgba(125,207,255,0.10), rgba(125,207,255,0.04)) !important;
  color: var(--pro-accent-hi) !important;
  border: 1px solid var(--pro-border-hi) !important;
  border-radius: var(--pro-radius) !important;
  padding: 10px 18px !important;
  cursor: pointer;
  transition: all 160ms ease;
  position: relative;
  overflow: hidden;
}
button:hover, .btn:hover, [type="submit"]:hover{
  background: linear-gradient(180deg, rgba(125,207,255,0.18), rgba(125,207,255,0.08)) !important;
  border-color: var(--pro-border-accent) !important;
  box-shadow: 0 0 0 1px var(--pro-border-accent), 0 0 16px -4px var(--pro-accent-glow);
  transform: translateY(-1px);
}
button:active, .btn:active{ transform: translateY(0); }

button.danger, .btn.danger, .btn-danger, [class*="emergency"]{
  background: linear-gradient(180deg, rgba(247,118,142,0.14), rgba(247,118,142,0.05)) !important;
  color: var(--pro-red-hi) !important;
  border-color: rgba(247,118,142,0.30) !important;
}
button.danger:hover, .btn-danger:hover, [class*="emergency"]:hover{
  background: linear-gradient(180deg, rgba(247,118,142,0.22), rgba(247,118,142,0.09)) !important;
  box-shadow: 0 0 0 1px rgba(247,118,142,0.45), 0 0 18px -4px var(--pro-red-glow);
}

button.success, .btn-success{
  background: linear-gradient(180deg, rgba(158,206,106,0.14), rgba(158,206,106,0.05)) !important;
  color: var(--pro-green-hi) !important;
  border-color: rgba(158,206,106,0.30) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
input, select, textarea{
  background: rgba(11,14,20,0.55) !important;
  color: var(--pro-text) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  padding: 10px 14px !important;
  font-family: var(--pro-font-sans);
  font-size: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--pro-border-accent) !important;
  box-shadow: 0 0 0 3px rgba(125,207,255,0.10), 0 0 20px -6px var(--pro-accent-glow);
  background: rgba(11,14,20,0.85) !important;
}
input::placeholder{ color: var(--pro-text-faint); }

/* ============================================================
   TABLES — pro terminal look
   ============================================================ */
table{ border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }
thead th{
  background: rgba(11,14,20,0.55) !important;
  color: var(--pro-text-muted) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--pro-border-hi) !important;
  position: sticky; top: 0;
  backdrop-filter: blur(8px);
}
tbody td{
  padding: 11px 12px !important;
  color: var(--pro-text) !important;
  border-bottom: 1px solid var(--pro-divider) !important;
  transition: background 140ms ease;
}
tbody tr:hover td{ background: rgba(125,207,255,0.03) !important; }
tbody tr.row-up td{ animation: pro-flash-green 900ms ease-out; }
tbody tr.row-down td{ animation: pro-flash-red 900ms ease-out; }

/* ============================================================
   STATUS DOTS — live pulse
   ============================================================ */
.dot, .status-dot, [class*="dot-"]{
  display:inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  box-shadow: 0 0 0 0 currentColor;
}
.dot-green, .dot.ok, .status-dot.ok{ background: var(--pro-green); color: var(--pro-green); animation: pro-pulse-dot 2.2s infinite; }
.dot-red, .dot.err, .status-dot.err{ background: var(--pro-red); color: var(--pro-red); animation: pro-pulse-dot 1.4s infinite; }
.dot-gold, .dot.warn, .status-dot.warn{ background: var(--pro-gold); color: var(--pro-gold); animation: pro-pulse-dot 2.6s infinite; }
.dot-cyan, .dot.info{ background: var(--pro-accent); color: var(--pro-accent); animation: pro-pulse-dot 2.2s infinite; }

@keyframes pro-pulse-dot{
  0%   { box-shadow: 0 0 0 0    currentColor, 0 0 6px 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 8px  transparent,  0 0 6px 0 currentColor; opacity: .75; }
  100% { box-shadow: 0 0 0 0    transparent,  0 0 6px 0 currentColor; opacity: 1; }
}

/* ============================================================
   TICK FLASH — price change animations
   Applied by JS: class="tick-up" / class="tick-down" briefly
   ============================================================ */
@keyframes pro-flash-green{
  0%   { background: rgba(158,206,106,0.25); color: var(--pro-green-hi); }
  60%  { background: rgba(158,206,106,0.08); }
  100% { background: transparent; }
}
@keyframes pro-flash-red{
  0%   { background: rgba(247,118,142,0.25); color: var(--pro-red-hi); }
  60%  { background: rgba(247,118,142,0.08); }
  100% { background: transparent; }
}
.tick-up, .flash-up, [data-flash="up"]{ animation: pro-flash-green 700ms ease-out; }
.tick-down, .flash-down, [data-flash="down"]{ animation: pro-flash-red 700ms ease-out; }

/* Up/down semantic text colors */
.up, .positive, .pnl-positive, .change-up, [data-sign="+"]{ color: var(--pro-green) !important; }
.down, .negative, .pnl-negative, .change-down, [data-sign="-"]{ color: var(--pro-red) !important; }
.neutral, .pnl-zero{ color: var(--pro-text-muted) !important; }

/* ============================================================
   BADGES / PILLS / TAGS
   ============================================================ */
.badge, .pill, .tag, .chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(125,207,255,0.08);
  color: var(--pro-accent);
  border: 1px solid rgba(125,207,255,0.18);
}
.badge.green, .pill.green, .tag.green{ background: rgba(158,206,106,0.10); color: var(--pro-green); border-color: rgba(158,206,106,0.22); }
.badge.red,   .pill.red,   .tag.red  { background: rgba(247,118,142,0.10); color: var(--pro-red);   border-color: rgba(247,118,142,0.22); }
.badge.gold,  .pill.gold,  .tag.gold { background: rgba(224,175,104,0.10); color: var(--pro-gold);  border-color: rgba(224,175,104,0.22); }
.badge.muted, .pill.muted { background: rgba(192,202,245,0.05); color: var(--pro-text-muted); border-color: rgba(192,202,245,0.10); }

/* ============================================================
   TABS
   ============================================================ */
.tab, .tabs a, [role="tab"]{
  color: var(--pro-text-muted) !important;
  font-weight: 550;
  letter-spacing: 0.01em;
  padding: 10px 14px !important;
  border-radius: var(--pro-radius) var(--pro-radius) 0 0;
  transition: all 150ms ease;
  position: relative;
}
.tab:hover, .tabs a:hover{ color: var(--pro-text) !important; background: rgba(125,207,255,0.04); }
.tab.active, .tabs a.active, [role="tab"][aria-selected="true"]{
  color: var(--pro-accent-hi) !important;
  background: linear-gradient(180deg, rgba(125,207,255,0.10), rgba(125,207,255,0.02));
}
.tab.active::after, .tabs a.active::after{
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pro-accent), transparent);
  box-shadow: 0 0 10px var(--pro-accent-glow);
}

/* ============================================================
   SIDEBAR NAV (opcjonalny, jeśli HTML doda .pro-sidebar)
   ============================================================ */
.pro-sidebar{
  position: fixed; left: 0; top: 0;
  width: var(--pro-sidebar-w);
  height: 100vh;
  background: linear-gradient(180deg, rgba(11,14,20,0.92), rgba(11,14,20,0.78));
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid var(--pro-border);
  padding: 18px 12px;
  z-index: 50;
  display: flex; flex-direction: column; gap: 4px;
}
.pro-sidebar .brand{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 22px;
  border-bottom: 1px solid var(--pro-divider);
  margin-bottom: 10px;
}
.pro-sidebar .brand .logo{
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--pro-accent) 0%, var(--pro-purple) 100%);
  display:flex; align-items:center; justify-content:center;
  color: #0b0e14; font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 20px -6px var(--pro-accent-glow);
}
.pro-sidebar .brand .name{ font-weight: 700; font-size: 15px; color: var(--pro-text); letter-spacing: 0.01em; }
.pro-sidebar .brand .sub{ font-size: 10px; color: var(--pro-text-muted); letter-spacing: 0.12em; text-transform: uppercase; }

.pro-nav-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--pro-text-muted);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  transition: all 140ms ease;
}
.pro-nav-item:hover{ color: var(--pro-text); background: rgba(125,207,255,0.05); }
.pro-nav-item.active{
  color: var(--pro-accent-hi);
  background: linear-gradient(90deg, rgba(125,207,255,0.14), transparent);
  box-shadow: inset 2px 0 0 var(--pro-accent);
}
.pro-nav-item .icon{ width: 16px; text-align: center; opacity: .9; }

.pro-sidebar .section-label{
  padding: 14px 12px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--pro-text-faint);
  text-transform: uppercase;
}

/* When .pro-theme-with-sidebar applied, offset main content */
body.pro-theme-with-sidebar, body.pro-theme-with-sidebar > *:not(.pro-sidebar):not(.pro-toast-root){
  /* handled inline by consumer */
}
body.pro-theme-with-sidebar .pro-main-shift{ margin-left: var(--pro-sidebar-w); }

/* ============================================================
   GRID LAYOUT for pro panels (when HTML uses .pro-grid)
   ============================================================ */
.pro-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}
.pro-grid > .span-3{ grid-column: span 3; }
.pro-grid > .span-4{ grid-column: span 4; }
.pro-grid > .span-6{ grid-column: span 6; }
.pro-grid > .span-8{ grid-column: span 8; }
.pro-grid > .span-9{ grid-column: span 9; }
.pro-grid > .span-12{ grid-column: span 12; }
@media (max-width: 1280px){
  .pro-grid > [class*="span-"]{ grid-column: span 12; }
  .pro-grid > .span-3, .pro-grid > .span-4{ grid-column: span 6; }
}

/* ============================================================
   METRICS — big numbers
   ============================================================ */
.metric{
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
}
.metric-label{
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pro-text-muted); font-weight: 600;
}
.metric-value{
  font-size: 26px; font-weight: 650;
  color: var(--pro-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.metric-sub{
  font-size: 12px; color: var(--pro-text-muted);
  font-family: var(--pro-font-mono);
}
.metric.accent .metric-value{ color: var(--pro-accent-hi); text-shadow: 0 0 24px var(--pro-accent-glow); }
.metric.gain .metric-value{ color: var(--pro-green); }
.metric.loss .metric-value{ color: var(--pro-red); }

/* ============================================================
   TOAST — premium
   ============================================================ */
.toast, .pro-toast{
  background: var(--pro-bg-glass-hi) !important;
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--pro-border-hi) !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: var(--pro-shadow-lg) !important;
  color: var(--pro-text);
  font-family: var(--pro-font-sans);
}
.toast.success, .pro-toast.success{ box-shadow: var(--pro-shadow-glow-g) !important; }
.toast.error,   .pro-toast.error  { box-shadow: var(--pro-shadow-glow-r) !important; }
.toast.info,    .pro-toast.info   { box-shadow: var(--pro-shadow-glow-a) !important; }

/* ============================================================
   CHART CONTAINERS
   ============================================================ */
[id*="chart"], .tv-chart, .lw-chart, canvas.chart-canvas{
  background: var(--pro-bg-panel) !important;
  border-radius: var(--pro-radius) !important;
  overflow: hidden;
}

/* ============================================================
   FOOTER / STATUS BAR
   ============================================================ */
.pro-statusbar{
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, rgba(11,14,20,0.6), rgba(11,14,20,0.92));
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--pro-border);
  padding: 8px 16px;
  font-size: 11.5px;
  color: var(--pro-text-muted);
  display: flex; align-items: center; gap: 16px;
  font-family: var(--pro-font-mono);
  letter-spacing: 0.02em;
}
.pro-statusbar .sep{ opacity: .3; }
.pro-statusbar .ws-state{ display: inline-flex; align-items: center; gap: 6px; }
.pro-statusbar .ws-state.connected{ color: var(--pro-green); }
.pro-statusbar .ws-state.reconnecting{ color: var(--pro-gold); }
.pro-statusbar .ws-state.disconnected{ color: var(--pro-red); }

/* ============================================================
   PRINT / REDUCE MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   LOGIN BOX pro-look (matches terminal aesthetic)
   ============================================================ */
body > .box{
  background: var(--pro-bg-glass-hi) !important;
  border: 1px solid var(--pro-border-hi) !important;
  box-shadow: var(--pro-shadow-lg), 0 0 60px -10px var(--pro-accent-glow) !important;
  border-radius: var(--pro-radius-xl) !important;
}
body > .box .logo{
  font-size: 42px;
  filter: drop-shadow(0 0 16px var(--pro-accent-glow));
}