@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════════════ */
:root {
  --ca14-bg:        #06101d;
  --ca14-bg-2:      #0b1727;
  --ca14-bg-3:      #102035;
  --ca14-bg-4:      #0d1e30;
  --ca14-br:        rgba(255,255,255,.08);
  --ca14-br-hover:  rgba(56,189,248,.22);
  --ca14-text:      #eef6ff;
  --ca14-muted:     #8fa8c2;
  --ca14-green:     #22c55e;
  --ca14-green-lt:  #4ade80;
  --ca14-red:       #ef4444;
  --ca14-red-lt:    #f87171;
  --ca14-blue:      #38bdf8;
  --ca14-blue-lt:   #7dd3fc;
  --ca14-yellow:    #f59e0b;
  --ca14-shadow:    0 24px 60px rgba(0,0,0,.45);
  --ca14-radius:    20px;
  --ca14-radius-sm: 14px;
  --ca14-radius-xs: 10px;
}

/* ═══════════════════════════════════════════════════
   BASE CARD
═══════════════════════════════════════════════════ */
.ca14-card, .ca14-card * {
  font-family: 'Tajawal', sans-serif !important;
  box-sizing: border-box;
}

.ca14-card {
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.13), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    var(--ca14-bg);
  border: 1px solid var(--ca14-br);
  border-radius: var(--ca14-radius);
  padding: 20px;
  color: var(--ca14-text);
  overflow: hidden;
  direction: rtl;
}

.ca14-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%);
}

/* ═══════════════════════════════════════════════════
   CARD HEAD
═══════════════════════════════════════════════════ */
.ca14-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ca14-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--ca14-text);
}

/* ═══════════════════════════════════════════════════
   CHIPS & BADGES
═══════════════════════════════════════════════════ */
.ca14-live-badge,
.ca14-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ca14-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ca14-chip.is-buy     { background: rgba(34,197,94,.15);  color: #86efac; border-color: rgba(34,197,94,.28); }
.ca14-chip.is-sell    { background: rgba(239,68,68,.15);  color: #fca5a5; border-color: rgba(239,68,68,.28); }
.ca14-chip.is-neutral { background: rgba(56,189,248,.15); color: #7dd3fc; border-color: rgba(56,189,248,.28); }

.ca14-live-badge span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ca14-green);
  animation: ca14Pulse 1.6s infinite;
}
@keyframes ca14Pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.5) }
  70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0)  }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0)  }
}

/* ═══════════════════════════════════════════════════
   SECTION LABEL
═══════════════════════════════════════════════════ */
.ca14-section-label {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--ca14-blue);
  letter-spacing: .5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ca14-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(56,189,248,.2), transparent);
}

/* ═══════════════════════════════════════════════════
   LOADER / ERROR / EMPTY
═══════════════════════════════════════════════════ */
.ca14-loader, .ca14-error, .ca14-empty {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ca14-muted);
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 14px;
  margin-top: 10px;
  font-size: 13px;
}
.ca14-error { color: var(--ca14-red-lt); border-color: rgba(239,68,68,.2); }

/* ═══════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════ */
.ca14-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ca14-tabs button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--ca14-muted);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s ease;
  font-family: 'Tajawal', sans-serif !important;
}
.ca14-tabs button:hover { background: rgba(255,255,255,.08); color: #fff; }
.ca14-tabs button.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(56,189,248,.28), rgba(56,189,248,.14));
  border-color: rgba(56,189,248,.3);
  box-shadow: 0 8px 22px rgba(56,189,248,.14);
}

/* ═══════════════════════════════════════════════════
   STATE CLASSES
═══════════════════════════════════════════════════ */
.is-up   { color: var(--ca14-green) !important; }
.is-down { color: var(--ca14-red)   !important; }
.is-buy     { background: rgba(34,197,94,.12)  !important; color: #86efac !important; border-color: rgba(34,197,94,.24)  !important; }
.is-sell    { background: rgba(239,68,68,.12)  !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.24)  !important; }
.is-neutral { background: rgba(56,189,248,.12) !important; color: #7dd3fc !important; border-color: rgba(56,189,248,.24) !important; }

/* ═══════════════════════════════════════════════════
   LIVE WIDGET
═══════════════════════════════════════════════════ */
.ca14-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}
.ca14-big-price {
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 0 28px rgba(56,189,248,.18);
  transition: transform .18s ease, color .18s ease;
}
.ca14-price-status {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  margin-bottom: 6px;
  color: var(--ca14-muted);
}
.flash-up   { animation: ca14FlashUp   .42s ease; }
.flash-down { animation: ca14FlashDown .42s ease; }
@keyframes ca14FlashUp   { 0%{transform:translateY(0)} 50%{transform:translateY(-3px) scale(1.02)} 100%{transform:translateY(0)} }
@keyframes ca14FlashDown { 0%{transform:translateY(0)} 50%{transform:translateY( 3px) scale(1.02)} 100%{transform:translateY(0)} }

/* ═══════════════════════════════════════════════════
   OHLC WIDGET
═══════════════════════════════════════════════════ */
.ca14-date-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--ca14-muted);
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.ca14-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.ca14-kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 14px;
}
.ca14-kpi-label {
  font-size: 11px;
  color: var(--ca14-muted);
  font-weight: 800;
  margin-bottom: 8px;
}
.ca14-kpi-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}
.ca14-kpi-value small { font-size: 11px; color: #8fdcff; font-weight: 700; }

.ca14-session-change {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--ca14-radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════
   CHART WIDGET
═══════════════════════════════════════════════════ */
.ca14-chart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.ca14-chart-price {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}
.ca14-chart-price small { font-size: 12px; color: #8fdcff; font-weight: 700; }
.ca14-chart-change { font-size: 13px; font-weight: 800; }

.ca14-chart-canvas {
  height: 330px;
  margin-top: 12px;
  border-radius: var(--ca14-radius-sm);
  overflow: hidden;
  background: var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.ca14-chart-canvas.is-loading::after {
  content: "جاري تحميل الشارت...";
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  color: var(--ca14-muted);
  font-family: 'Tajawal', sans-serif;
}

/* ═══════════════════════════════════════════════════
   ANALYSIS WIDGET
═══════════════════════════════════════════════════ */
.ca14-analysis-text {
  margin-top: 12px;
  color: #b7c8df;
  font-size: 13px;
  line-height: 2;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  padding: 14px 16px;
  border-radius: var(--ca14-radius-sm);
}

/* Signal card */
.ca14-signal-card {
  border-radius: var(--ca14-radius);
  padding: 18px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.ca14-signal-card.is-buy     { background: linear-gradient(135deg,#07281a,#0d3b24); border-color: rgba(34,197,94,.2); }
.ca14-signal-card.is-sell    { background: linear-gradient(135deg,#2b0a0f,#451018); border-color: rgba(239,68,68,.2); }
.ca14-signal-card.is-neutral { background: linear-gradient(135deg,#102035,#0c1524); border-color: rgba(56,189,248,.18); }

.ca14-signal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.ca14-signal-title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}
.ca14-signal-sub {
  color: #c3d4ea;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.7;
}

.ca14-score-ring {
  min-width: 74px; width: 74px; height: 74px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 2px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.ca14-score-ring.is-buy     { border-color: rgba(34,197,94,.3);  color: #86efac; }
.ca14-score-ring.is-sell    { border-color: rgba(239,68,68,.3);  color: #fca5a5; }
.ca14-score-ring.is-neutral { border-color: rgba(56,189,248,.3); color: #7dd3fc; }

.ca14-meter {
  margin-top: 14px;
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}
.ca14-meter-fill { height: 100%; border-radius: inherit; transition: width .8s ease; }
.ca14-meter-fill.is-buy     { background: linear-gradient(90deg, var(--ca14-green), var(--ca14-green-lt)); }
.ca14-meter-fill.is-sell    { background: linear-gradient(90deg, var(--ca14-red),   var(--ca14-red-lt));   }
.ca14-meter-fill.is-neutral { background: linear-gradient(90deg, var(--ca14-blue),  var(--ca14-blue-lt));  }

/* Volatility badges */
.ca14-vol-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.ca14-vol-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-xs);
  padding: 10px 14px;
  min-width: 100px;
  flex: 1;
}
.ca14-vol-badge span   { font-size: 11px; color: var(--ca14-muted); font-weight: 800; }
.ca14-vol-badge strong { font-size: 15px; font-weight: 900; }
.ca14-vol-badge small  { font-size: 10px; color: #8fdcff; font-weight: 700; }

/* Bollinger row */
.ca14-boll-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 4px;
}
.ca14-boll-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-xs);
  padding: 10px 14px;
}
.ca14-boll-item span   { font-size: 11px; color: var(--ca14-muted); font-weight: 800; }
.ca14-boll-item strong { font-size: 15px; font-weight: 900; }
.ca14-boll-item small  { font-size: 10px; color: #8fdcff; font-weight: 700; }

/* Price Action row */
.ca14-pa-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 4px;
}
.ca14-pa-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-xs);
  padding: 10px 14px;
}
.ca14-pa-item span   { font-size: 11px; color: var(--ca14-muted); font-weight: 800; }
.ca14-pa-item strong { font-size: 15px; font-weight: 900; }
.ca14-pa-item small  { font-size: 10px; color: #8fdcff; font-weight: 700; }

/* Oscillator grid */
.ca14-osc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 4px;
}
.ca14-osc-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 14px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ca14-osc-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.1), transparent 44%);
  pointer-events: none;
}
.ca14-osc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.3);
  border-color: var(--ca14-br-hover);
}
.ca14-osc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ca14-osc-name  { font-size: 11px; color: var(--ca14-muted); font-weight: 800; }
.ca14-osc-value { font-size: 20px; font-weight: 900; line-height: 1.2; }
.ca14-osc-value small { font-size: 10px; color: #8fdcff; font-weight: 700; }

.ca14-osc-bar-wrap { margin-top: 10px; }
.ca14-osc-bar {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}
.ca14-osc-bar-fill { height: 100%; border-radius: inherit; transition: width .7s ease; }
.ca14-osc-bar-fill.is-buy     { background: linear-gradient(90deg, var(--ca14-green), var(--ca14-green-lt)); }
.ca14-osc-bar-fill.is-sell    { background: linear-gradient(90deg, var(--ca14-red),   var(--ca14-red-lt));   }
.ca14-osc-bar-fill.is-neutral { background: linear-gradient(90deg, var(--ca14-blue),  var(--ca14-blue-lt));  }

.ca14-osc-score { margin-top: 8px; font-size: 11px; color: var(--ca14-muted); font-weight: 700; }

/* Source row */
.ca14-source-row {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--ca14-radius-xs);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ca14-muted);
}
.ca14-source-row strong { color: var(--ca14-text); }

/* ═══════════════════════════════════════════════════
   MA WIDGET
═══════════════════════════════════════════════════ */

/* Summary block */
.ca14-ma-summary-block {
  margin-top: 12px;
  border-radius: var(--ca14-radius);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
}
.ca14-ma-summary-block.is-buy     { background: linear-gradient(135deg,#07281a,#0d3b24); border-color: rgba(34,197,94,.2);  }
.ca14-ma-summary-block.is-sell    { background: linear-gradient(135deg,#2b0a0f,#451018); border-color: rgba(239,68,68,.2);  }
.ca14-ma-summary-block.is-neutral { background: linear-gradient(135deg,#102035,#0c1524); border-color: rgba(56,189,248,.18);}

.ca14-ma-summary-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 6px;
}
.ca14-ma-summary-meta {
  font-size: 12px;
  color: #c3d4ea;
  margin-bottom: 14px;
  line-height: 1.7;
}

/* Counters row */
.ca14-ma-counters {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.ca14-ma-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 52px;
  padding: 10px;
  border-radius: var(--ca14-radius-xs);
  border: 1px solid rgba(255,255,255,.08);
}
.ca14-ma-count span  { font-size: 22px; font-weight: 900; line-height: 1; }
.ca14-ma-count small { font-size: 11px; font-weight: 800; color: var(--ca14-muted); }
.ca14-ma-count.is-buy     { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.2);  }
.ca14-ma-count.is-buy span { color: var(--ca14-green); }
.ca14-ma-count.is-sell    { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.2);  }
.ca14-ma-count.is-sell span { color: var(--ca14-red); }
.ca14-ma-count.is-neutral { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.2); }
.ca14-ma-count.is-neutral span { color: var(--ca14-blue); }

/* Distribution bar */
.ca14-ma-dist-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: rgba(255,255,255,.06);
}
.ca14-ma-dist-fill { height: 100%; transition: width .8s ease; }
.ca14-ma-dist-fill.is-buy     { background: var(--ca14-green); }
.ca14-ma-dist-fill.is-sell    { background: var(--ca14-red);   }
.ca14-ma-dist-fill.is-neutral { background: var(--ca14-blue);  }

/* MA grid */
.ca14-ma-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 4px;
}
.ca14-ma-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 14px;
  opacity: 0;
  transform: translateY(10px);
  animation: ca14MAIn .4s ease forwards;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@keyframes ca14MAIn { to { opacity:1; transform:translateY(0); } }
.ca14-ma-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
  border-color: var(--ca14-br-hover);
}

.ca14-ma-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ca14-ma-name  { font-size: 12px; color: var(--ca14-muted); font-weight: 800; }
.ca14-ma-value { font-size: 17px; font-weight: 900; }
.ca14-ma-value small { font-size: 10px; color: #8fdcff; font-weight: 700; }

.ca14-ma-bar {
  width: 100%; height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 999px; overflow: hidden;
  margin-bottom: 10px;
}
.ca14-ma-fill { height: 100%; border-radius: inherit; transition: width .7s ease; }
.ca14-ma-fill.is-buy     { background: linear-gradient(90deg, var(--ca14-green), var(--ca14-green-lt)); }
.ca14-ma-fill.is-sell    { background: linear-gradient(90deg, var(--ca14-red),   var(--ca14-red-lt));   }
.ca14-ma-fill.is-neutral { background: linear-gradient(90deg, var(--ca14-blue),  var(--ca14-blue-lt));  }

.ca14-ma-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ca14-ma-foot strong { font-size: 13px; font-weight: 900; }

/* ═══════════════════════════════════════════════════
   PERFORMANCE WIDGET
═══════════════════════════════════════════════════ */

/* Returns bars */
.ca14-perf-bars  { display: grid; gap: 10px; margin-top: 4px; }
.ca14-perf-row   { display: flex; align-items: center; gap: 10px; }
.ca14-perf-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ca14-muted);
  font-weight: 800;
  text-align: right;
}
.ca14-perf-track {
  flex: 1; min-width: 0;
  height: 10px;
  background: rgba(255,255,255,.07);
  border-radius: 999px; overflow: hidden;
}
.ca14-perf-fill { height: 100%; border-radius: inherit; transition: width .7s ease; }
.ca14-perf-fill.is-up   { background: linear-gradient(90deg, var(--ca14-green), var(--ca14-green-lt)); }
.ca14-perf-fill.is-down { background: linear-gradient(90deg, var(--ca14-red),   var(--ca14-red-lt));   }
.ca14-perf-value {
  width: 76px;
  flex-shrink: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 900;
}

/* Range grid */
.ca14-range-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 4px;
}
.ca14-range-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ca14-range-card--single {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ca14-range-label { font-size: 11px; color: var(--ca14-muted); font-weight: 800; }
.ca14-range-high,
.ca14-range-low {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.ca14-range-high span,
.ca14-range-low span { color: var(--ca14-muted); font-size: 11px; font-weight: 700; }
.ca14-range-high strong,
.ca14-range-low  strong { font-size: 14px; font-weight: 900; }
.ca14-range-high strong small,
.ca14-range-low  strong small { font-size: 10px; color: #8fdcff; }

.ca14-range-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.ca14-range-bar-fill {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, var(--ca14-red-lt), var(--ca14-blue), var(--ca14-green-lt));
  border-radius: inherit;
}

/* Range card big value */
.ca14-range-card--single strong {
  font-size: 18px;
  font-weight: 900;
}
.ca14-range-card--single strong small { font-size: 11px; color: #8fdcff; font-weight: 700; }

/* Volatility grid */
.ca14-volt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 4px;
}
.ca14-volt-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: transform .22s ease, border-color .22s ease;
}
.ca14-volt-card:hover {
  transform: translateY(-3px);
  border-color: var(--ca14-br-hover);
}
.ca14-volt-icon  { font-size: 22px; line-height: 1; }
.ca14-volt-label { font-size: 12px; color: var(--ca14-muted); font-weight: 800; }
.ca14-volt-value { font-size: 22px; font-weight: 900; color: var(--ca14-text); }

/* ═══════════════════════════════════════════════════
   INFO GRID (shared)
═══════════════════════════════════════════════════ */
.ca14-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.ca14-info-box {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--ca14-bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ca14-radius-sm);
  padding: 14px;
}
.ca14-info-box span   { display: block; font-size: 11px; color: var(--ca14-muted); font-weight: 800; margin-bottom: 6px; }
.ca14-info-box strong { display: block; font-size: 18px; font-weight: 900; }
.ca14-info-box strong small { font-size: 11px; color: #8fdcff; font-weight: 700; }
.ca14-info-box em     { display: block; font-size: 11px; color: var(--ca14-muted); font-style: normal; margin-top: 4px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 1024px)
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ca14-kpi-grid,
  .ca14-info-grid,
  .ca14-osc-grid,
  .ca14-boll-row  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ca14-range-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ca14-ma-grid   { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 782px)
═══════════════════════════════════════════════════ */
@media (max-width: 782px) {
  .ca14-card { padding: 14px; }

  .ca14-card-head,
  .ca14-signal-top,
  .ca14-price-row,
  .ca14-date-line,
  .ca14-session-change,
  .ca14-chart-top,
  .ca14-ma-card-head,
  .ca14-ma-foot,
  .ca14-perf-row,
  .ca14-source-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ca14-kpi-grid,
  .ca14-info-grid,
  .ca14-osc-grid,
  .ca14-boll-row,
  .ca14-pa-row,
  .ca14-range-grid,
  .ca14-ma-grid,
  .ca14-volt-grid { grid-template-columns: 1fr; }

  .ca14-big-price    { font-size: 36px; }
  .ca14-signal-title { font-size: 22px; }
  .ca14-score-ring   { width: 60px; height: 60px; font-size: 16px; }

  .ca14-perf-label { width: auto; text-align: right; }
  .ca14-perf-value { width: auto; }

  .ca14-vol-badges { flex-direction: column; }
  .ca14-ma-counters { flex-wrap: wrap; }
}