/* ============================================================
   صدى · لوحة الأسهم — Style
   هوية «صَدى» البصرية، RTL، متوافق مع CSP الصارم (لا إيموجي إلا نصًا).
   ============================================================ */

:root {
  --bg: #0d2418;
  --panel: rgba(19, 45, 32, .72);
  --panel-2: rgba(24, 56, 40, .55);
  --line: rgba(143, 214, 181, .16);
  --ink: #e8e2d0;
  --muted: rgba(212, 205, 192, .62);
  --gold: #f5c04f;
  --leaf: #8fd6b5;
  --rose: #e08f7a;
  --sky: #7cc4d8;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(245, 192, 79, .07), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(143, 214, 181, .06), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Noto Kufi Arabic", Tahoma, "Arial", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 18px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 192, 79, .1);
}
.brand strong { display: block; font-size: 1rem; }
.brand small { display: block; color: var(--muted); font-size: .72rem; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--gold); color: #1a1408; border: none;
  border-radius: 10px; padding: 10px 22px; font-weight: 700; cursor: pointer;
}
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-small { font-size: .82rem; padding: 8px 14px; }

/* ---------- Hero ---------- */
.hero { padding: 26px 0 10px; }
.hero h1 { margin: 0 0 8px; font-size: 1.6rem; }
.hero p { margin: 0 0 6px; color: var(--muted); }
.delay-note { font-size: .8rem; color: var(--gold); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; }
.filter-input {
  flex: 1 1 240px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: .92rem;
}
.filter-input:focus { outline: none; border-color: var(--gold); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 5px 13px; font-size: .8rem; cursor: pointer;
}
.chip:hover { border-color: var(--gold); }
.chip.active { background: rgba(245, 192, 79, .15); border-color: var(--gold); color: var(--gold); }

.status { min-height: 24px; font-size: .86rem; color: var(--muted); }
.status.error { color: var(--rose); }
.status.hint { color: var(--sky); }

/* ---------- Cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; margin: 14px 0;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card h2 { margin: 0 0 10px; font-size: 1.1rem; }

/* ---------- Price ---------- */
.price-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stock-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: var(--panel-2); }
.price-symbol { font-weight: 800; font-size: 1.15rem; }
.price-name { color: var(--muted); font-size: .86rem; }
.price-value { margin-inline-start: auto; font-size: 1.7rem; font-weight: 800; color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: .8rem; }

/* ---------- Chart ---------- */
.chart-container { width: 100%; height: 340px; margin: 10px 0; }

.indicator-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ind-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ind-item .k { font-size: .74rem; color: var(--muted); }
.ind-item .v { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
.ind-item .v.positive { color: var(--leaf); }
.ind-item .v.negative { color: var(--rose); }
.ind-item .v.neutral { color: var(--gold); }

/* ---------- Links ---------- */
.links-card h2 { font-size: 1rem; }
.links-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 26px; padding: 16px 18px; text-align: center; color: var(--muted); font-size: .78rem; }
.site-footer p { margin: 4px 0; }

@media (max-width: 560px) {
  .price-value { margin-inline-start: 0; }
  .chart-container { height: 280px; }
}