/* ══ THEME DEFINITIONS ══ */
  :root {
    --bg: #0f1117; --surface: #181c2a; --surface2: #1e2236; --surface3: #252b42;
    --border: #2e3450; --accent-gold: #f5c842; --accent-gold-dim: #c9a22e;
    --accent-blue: #4c8ef5; --accent-green: #3ecf8e; --accent-red: #f5564a;
    --accent-purple: #9b72f5; --text: #e8eaf6; --text-dim: #8892b0; --text-muted: #4a5280;
    --usd: #3ecf8e; --eur: #4c8ef5; --try: #f5c842;
    --shadow: 0 8px 32px rgba(0,0,0,0.4); --radius: 14px; --radius-sm: 8px;
    --particle-color: rgba(245,200,66,0.15);
    --glow-primary: rgba(245,200,66,0.08);
    --transition-speed: 0.4s;
    --device-accent: #d97706;
    --device-accent-rgb: 217, 119, 6;
    --device-light-strength: .55;
    --device-light-soft: .055;
    --device-light-faint: .014;
  }
  [data-theme="midnight"] {
    --bg:#060a14; --surface:#0d1220; --surface2:#111827; --surface3:#1a2235;
    --border:#1e2d4a; --accent-gold:#60a5fa; --accent-gold-dim:#3b82f6;
    --text:#e2e8f0; --text-dim:#94a3b8; --text-muted:#334155;
    --usd:#34d399; --eur:#60a5fa; --try:#a78bfa;
    --particle-color:rgba(96,165,250,0.12); --glow-primary:rgba(96,165,250,0.07);
  }
  [data-theme="emerald"] {
    --bg:#071410; --surface:#0d1f18; --surface2:#112920; --surface3:#163326;
    --border:#1e4535; --accent-gold:#10b981; --accent-gold-dim:#059669;
    --text:#d1fae5; --text-dim:#6ee7b7; --text-muted:#065f46;
    --usd:#34d399; --eur:#60a5fa; --try:#fbbf24;
    --particle-color:rgba(16,185,129,0.12); --glow-primary:rgba(16,185,129,0.08);
  }
  [data-theme="crimson"] {
    --bg:#120a0a; --surface:#1e1010; --surface2:#271414; --surface3:#311818;
    --border:#4a2020; --accent-gold:#f87171; --accent-gold-dim:#ef4444;
    --text:#fee2e2; --text-dim:#fca5a5; --text-muted:#7f1d1d;
    --usd:#4ade80; --eur:#60a5fa; --try:#fb923c;
    --particle-color:rgba(248,113,113,0.1); --glow-primary:rgba(248,113,113,0.07);
  }
  [data-theme="violet"] {
    --bg:#0d0a18; --surface:#160f25; --surface2:#1c1430; --surface3:#231a3a;
    --border:#3b2d5e; --accent-gold:#c084fc; --accent-gold-dim:#a855f7;
    --text:#ede9fe; --text-dim:#c4b5fd; --text-muted:#4c1d95;
    --usd:#34d399; --eur:#60a5fa; --try:#f472b6;
    --particle-color:rgba(192,132,252,0.1); --glow-primary:rgba(192,132,252,0.07);
  }
  [data-theme="light"] {
    --bg:#f1f5f9; --surface:#ffffff; --surface2:#f8fafc; --surface3:#f1f5f9;
    --border:#e2e8f0; --accent-gold:#d97706; --accent-gold-dim:#b45309;
    --accent-blue:#3b82f6; --accent-green:#059669; --accent-red:#dc2626;
    --text:#1e293b; --text-dim:#64748b; --text-muted:#cbd5e1;
    --usd:#059669; --eur:#3b82f6; --try:#d97706;
    --shadow:0 4px 20px rgba(0,0,0,0.08);
    --particle-color:rgba(217,119,6,0.06); --glow-primary:rgba(217,119,6,0.04);
  }
  [data-theme="desert"] {
    --bg:#1a1208; --surface:#261b0e; --surface2:#302213; --surface3:#3c2a18;
    --border:#5a3e24; --accent-gold:#f59e0b; --accent-gold-dim:#d97706;
    --text:#fef3c7; --text-dim:#fcd34d; --text-muted:#78350f;
    --usd:#6ee7b7; --eur:#93c5fd; --try:#fbbf24;
    --particle-color:rgba(245,158,11,0.12); --glow-primary:rgba(245,158,11,0.08);
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family: 'Tajawal', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    direction: rtl;
    transition: background var(--transition-speed), color var(--transition-speed);
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 88% 8%, rgba(var(--device-accent-rgb), var(--device-light-soft)), transparent 34%),
      linear-gradient(135deg, rgba(var(--device-accent-rgb), var(--device-light-faint)), transparent 46%);
    transition: background .25s ease;
  }

  /* ── Animated background canvas ── */
  #bg-canvas {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:1; transition:opacity .5s;
  }
  #app, #login-screen { position:relative; z-index:1; }

  /* Theme controls are shown inside Settings. */
  .theme-swatch-row {
    display:flex; flex-direction:column; padding:8px 10px; gap:6px;
  }
  .theme-swatch {
    width:36px; height:36px; border-radius:10px; cursor:pointer;
    border:2px solid transparent; transition:.2s;
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; position:relative;
    overflow:hidden;
  }
  .theme-swatch:hover { transform:scale(1.1); }
  .theme-swatch.active { border-color:var(--text) !important; }
  .theme-swatch .swatch-tip {
    position:absolute; left:calc(100% + 8px); right:auto; top:50%; transform:translateY(-50%);
    background:var(--surface3); border:1px solid var(--border);
    padding:3px 10px; border-radius:6px; font-size:.75rem;
    white-space:nowrap; color:var(--text); pointer-events:none;
    opacity:0; transition:.15s; z-index:600;
  }
  .theme-swatch:hover .swatch-tip { opacity:1; }

  .settings-theme-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 10px;
    margin-bottom: 10px;
  }
  .settings-subtitle {
    font-size: .76rem;
    color: var(--text-dim);
    font-weight: 900;
    margin-bottom: 8px;
  }
  .settings-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
  }
  .settings-theme-swatch {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: 2px solid transparent;
    color: #fff;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 10px;
    font-family: 'Tajawal', sans-serif;
    box-shadow: inset 0 0 0 999px rgba(0,0,0,.12);
  }
  .settings-theme-swatch:hover {
    transform: translateY(-1px);
  }
  .settings-theme-swatch.active {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 2px rgba(217,119,6,.18), inset 0 0 0 999px rgba(0,0,0,.06);
  }
  .settings-theme-swatch .theme-icon {
    flex: 0 0 auto;
  }
  .settings-theme-swatch .theme-name {
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
  }
  .settings-fx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
  }
  .settings-fx-grid .fx-btn {
    width: 100%;
    height: 34px;
    font-size: .75rem;
  }

  .appearance-settings {
    background: var(--surface2);
    border: 1px solid rgba(var(--device-accent-rgb), .34);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(var(--device-accent-rgb), var(--device-light-faint));
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .appearance-settings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--device-accent);
  }
  .appearance-settings-title > span {
    font-size: 1.15rem;
  }
  .appearance-settings-title strong {
    display: block;
    font-size: .92rem;
    font-weight: 900;
  }
  .appearance-settings-title small {
    display: block;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: .68rem;
    font-weight: 600;
  }
  .appearance-settings-grid {
    display: grid;
    grid-template-columns: minmax(130px, .55fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
  }
  .appearance-presets {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
  }
  .appearance-color-swatch {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 2px solid var(--surface);
    border-radius: 8px;
    background: var(--swatch-color);
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .appearance-color-swatch:hover {
    transform: translateY(-2px);
  }
  .appearance-color-swatch.active {
    box-shadow: 0 0 0 3px rgba(var(--device-accent-rgb), .25);
    transform: translateY(-1px);
  }
  .appearance-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: .76rem;
    font-weight: 800;
  }
  .appearance-control input[type="color"] {
    width: 48px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface2);
    cursor: pointer;
  }
  .appearance-intensity-control {
    flex-direction: column;
    align-items: stretch;
  }
  .appearance-intensity-control > span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .appearance-intensity-control strong {
    color: var(--device-accent);
    direction: ltr;
  }
  .appearance-intensity-control input[type="range"] {
    width: 100%;
    accent-color: var(--device-accent);
    cursor: pointer;
  }
  .appearance-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--device-accent-rgb), .38);
    background: rgba(var(--device-accent-rgb), var(--device-light-soft));
    border-radius: 8px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
    transition: background .2s ease, border-color .2s ease;
  }
  .appearance-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--device-accent);
    box-shadow: 0 0 12px rgba(var(--device-accent-rgb), .55);
  }
  .appearance-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .appearance-actions .btn {
    flex: 1;
    min-height: 38px;
  }
  .appearance-actions .btn-blue {
    border-color: var(--device-accent);
    background: var(--device-accent);
    color: #fff;
  }

  @media (max-width: 600px) {
    .appearance-settings-grid {
      grid-template-columns: 1fr;
    }
    .appearance-actions {
      flex-direction: column;
    }
  }

  /* ══ HAREMALTIN PANEL – Enhanced ══ */
  .harem-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  /* top gradient bar */
  .harem-panel::before {
    content: '';
    position: absolute; top: 0; right: 0; left: 0; z-index: 1;
    height: 3px;
    background: linear-gradient(90deg, #8b0000, #c9121f 30%, #e5a500 50%, #c9121f 70%, #8b0000);
    animation: haremBarShimmer 3s linear infinite;
    background-size: 200% 100%;
  }
  @keyframes haremBarShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }
  /* subtle gold shimmer background */
  .harem-panel::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,18,31,.04) 0%, transparent 70%);
  }

  .harem-inner { position: relative; z-index: 1; padding: 16px 20px 18px; }

  .harem-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
  }
  .harem-title-row {
    display: flex; align-items: center; gap: 10px;
  }
  .harem-logo-badge {
    background: linear-gradient(135deg, #c9121f 0%, #8b0000 100%);
    border-radius: 9px; padding: 6px 14px;
    font-size: .85rem; font-weight: 900; color: #fff;
    letter-spacing: .05em;
    box-shadow: 0 4px 14px rgba(201,18,31,.4), inset 0 1px 0 rgba(255,255,255,.15);
    display: flex; align-items: center; gap: 6px;
  }
  .harem-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    animation: haremDotPulse 1.5s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes haremDotPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
  }
  .harem-source-tag {
    font-size: .7rem; color: var(--text-muted);
    background: var(--surface3); padding: 3px 9px;
    border-radius: 20px; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 4px;
  }
  .harem-updated {
    font-size: .73rem; color: var(--text-muted);
  }
  .harem-right-controls {
    display: flex; align-items: center; gap: 8px;
  }

  /* ── Section labels (Currencies / Gold) ── */
  .harem-section-label {
    font-size: .7rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
    margin: 14px 0 8px; display: flex; align-items: center; gap: 6px;
  }
  .harem-section-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
  }
  .harem-section-label.gold { color: #e5a500; }
  .harem-section-label.gold::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: #e5a500; display: inline-block; }
  .harem-section-label.forex { color: var(--accent-blue); }
  .harem-section-label.forex::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-blue); display: inline-block; }

  /* ── Cards ── */
  .harem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .harem-grid.forex-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-bottom: 4px;
  }
  .harem-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative; overflow: hidden;
    cursor: default;
  }
  .harem-card::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0;
    height: 2px; opacity: 0; transition: opacity .2s;
  }
  .harem-card.gold-card::before  { background: linear-gradient(90deg, #e5a500, #f5c842); }
  .harem-card.forex-card::before { background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); }
  .harem-card:hover { transform: translateY(-3px); }
  .harem-card:hover::before { opacity: 1; }
  .harem-card.gold-card:hover  { border-color: #e5a500; box-shadow: 0 6px 22px rgba(229,165,0,.18); }
  .harem-card.forex-card:hover { border-color: var(--accent-blue); box-shadow: 0 6px 22px rgba(76,142,245,.15); }

  .harem-card-top {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 8px;
  }
  .harem-card-icon { font-size: 1.35rem; }
  .harem-card-name {
    font-size: .72rem; color: var(--text-dim);
    font-weight: 700; letter-spacing: .03em;
  }
  .harem-prices {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px; margin-top: 4px;
  }
  .harem-price-box {
    background: var(--surface3);
    border-radius: 6px; padding: 5px 4px;
    border: 1px solid var(--border);
  }
  .harem-price-lbl {
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; margin-bottom: 2px;
  }
  .harem-price-lbl.buy  { color: var(--accent-green); }
  .harem-price-lbl.sell { color: var(--accent-red); }
  .harem-price-val {
    font-size: .88rem; font-weight: 900; line-height: 1.1;
  }
  .harem-price-val.buy  { color: var(--accent-green); }
  .harem-price-val.sell { color: var(--accent-red); }
  .harem-price-sub {
    font-size: .58rem; color: var(--text-muted); margin-top: 1px;
  }

  /* spread badge */
  .harem-spread {
    font-size: .6rem; color: var(--text-muted);
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .harem-spread-val { color: var(--accent-gold); font-weight: 700; }

  /* change badge */
  .harem-chg {
    font-size: .65rem; font-weight: 800;
    padding: 1px 6px; border-radius: 10px;
    display: inline-block; margin-top: 4px;
  }
  .harem-chg.up   { background: rgba(62,207,142,.12); color: var(--accent-green); }
  .harem-chg.down { background: rgba(245,86,74,.12);  color: var(--accent-red);   }
  .harem-chg.flat { background: var(--surface3);       color: var(--text-muted);   }

  /* Loading / Error */
  .harem-loading {
    text-align: center; padding: 28px;
    color: var(--text-muted); font-size: .85rem;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .harem-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: #c9121f;
    border-radius: 50%;
    animation: haremSpin .7s linear infinite;
    flex-shrink: 0;
  }
  @keyframes haremSpin { to { transform: rotate(360deg); } }
  .harem-error {
    text-align: center; padding: 20px;
    color: var(--accent-red); font-size: .85rem; line-height: 1.7;
  }

  /* price flash animation */
  @keyframes haremFlash {
    0%   { background: rgba(245,200,66,.15); }
    100% { background: transparent; }
  }
  .harem-price-flash { animation: haremFlash .8s ease forwards; }

  /* Effect toggles */
  .fx-row {
    border-top:1px solid var(--border); padding:8px 10px;
    display:flex; flex-direction:column; gap:6px;
  }
  .fx-btn {
    width:36px; height:30px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface3); color:var(--text-dim);
    cursor:pointer; font-size:.72rem; font-weight:700;
    transition:.2s; display:flex; align-items:center; justify-content:center;
    gap:3px; white-space:nowrap; padding:0 6px;
  }
  .fx-btn:hover { background:var(--border); color:var(--text); }
  .fx-btn.on { background:var(--accent-gold); color:#1a1500; border-color:transparent; }

  /* ── Page transition overlay ── */
  .page-transition {
    position:fixed; inset:0; z-index:999; pointer-events:none;
    background: var(--accent-gold);
    opacity:0; transition: opacity .18s ease;
  }
  .page-transition.flash { opacity:.06; }

  /* ── Ripple ── */
  .ripple-container { position:relative; overflow:hidden; }
  .ripple {
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,.15); transform:scale(0);
    animation: rippleAnim .5s linear; pointer-events:none;
  }
  @keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

  /* ── Card hover glow ── */
  .currency-card {
    transition: transform .2s, box-shadow .3s, border-color .3s !important;
  }
  .currency-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow-primary), var(--shadow) !important;
    border-color: var(--accent-gold) !important;
  }

  /* ── Topbar glassmorphism ── */
  .topbar {
    backdrop-filter: blur(12px);
    background: rgba(var(--surface-rgb, 24,28,42), 0.85) !important;
  }
  [data-theme="light"] .topbar { background: rgba(255,255,255,0.9) !important; }

  /* ── Logo Sidebar ── */
  #app { display:flex; flex-direction:column; min-height:100vh; }

  /* ══ SIDEBAR ══ */
  .logo-sidebar {
    position: fixed; top: 56px; right: 0;
    width: 200px; height: calc(100vh - 56px);
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 90;
    display: flex; flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  /* خط ضوء على اليسار */
  .logo-sidebar::before {
    content:''; position:absolute; top:0; bottom:0; right:0; width:2px;
    background: linear-gradient(180deg,
      transparent 0%, var(--accent-gold) 30%,
      var(--accent-green) 60%, transparent 100%);
    opacity: .35;
  }

  .logo-sidebar-inner {
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    padding: 18px 10px 16px;
    flex: 1;
  }

  /* الشعار */
  .logo-sidebar-img {
    width: 68px; height: 68px; object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 2px 12px rgba(245,200,66,.45));
    animation: lsbLogoPulse 5s ease-in-out infinite;
  }
  @keyframes lsbLogoPulse {
    0%,100% { filter: drop-shadow(0 2px 8px rgba(245,200,66,.3)); }
    50%      { filter: drop-shadow(0 2px 18px rgba(245,200,66,.7)); }
  }

  /* الاسم */
  .logo-sidebar-name {
    margin-top: 10px;
    font-size: .62rem; font-weight: 900;
    color: var(--accent-gold); line-height: 1.4;
    text-align: center; letter-spacing: .02em;
  }
  .logo-sidebar-sub {
    font-size: .56rem; color: var(--text-muted);
    margin-top: 2px; text-align: center;
    letter-spacing: .04em; text-transform: uppercase;
  }

  /* فاصل */
  .logo-sidebar-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 12px 0;
  }

  /* بطاقات العملات */
  .logo-sidebar-currencies {
    display: flex; flex-direction: column;
    gap: 6px; width: 100%;
  }
  .lsb-cur {
    border-radius: 8px; border: 1px solid;
    padding: 7px 8px; cursor: pointer;
    transition: .15s;
  }
  .lsb-cur:hover { transform: translateX(-2px); }
  .lsb-cur-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 3px;
  }
  .lsb-cur-sym { font-size: .8rem; font-weight: 900; }
  .lsb-cur-code { font-size: .58rem; font-weight: 800; letter-spacing: .05em; opacity: .75; }
  .lsb-cur-bal {
    font-size: .72rem; font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: left; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .lsb-cur-sub {
    display: flex; justify-content: space-between;
    margin-top: 3px;
  }
  .lsb-sub-val {
    font-size: .52rem; font-weight: 700;
    opacity: .7; font-variant-numeric: tabular-nums;
  }
  .lsb-cur.usd { background:rgba(62,207,142,.06);  border-color:rgba(62,207,142,.22); color:#3ecf8e; }
  .lsb-cur.eur { background:rgba(76,142,245,.06);  border-color:rgba(76,142,245,.22); color:#4c8ef5; }
  .lsb-cur.try { background:rgba(245,200,66,.06);  border-color:rgba(245,200,66,.22); color:#f5c842; }


  /* أزرار التنقل في الشريط الجانبي (عملات أجنبية / مصروفات / موظفون) */
  .lsb-nav-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    transition: all .18s ease;
    text-align: center;
    user-select: none;
    position: relative;
    overflow: hidden;
  }
  .lsb-nav-btn:hover {
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  .lsb-nav-btn:active { transform: translateX(0) scale(.97); }
  .lsb-nav-btn .lsb-nav-icon {
    font-size: 1.5rem; line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
  }
  .lsb-nav-btn .lsb-nav-label {
    font-size: .68rem; font-weight: 900;
    letter-spacing: .01em; line-height: 1.2;
    font-family: Tajawal, sans-serif;
  }
  .lsb-nav-btn.nav-rates {
    background: linear-gradient(160deg, rgba(245,200,66,.14), rgba(245,200,66,.05));
    border-color: rgba(245,200,66,.34);
  }
  .lsb-nav-btn.nav-rates .lsb-nav-label { color: var(--accent-gold); }
  .lsb-nav-btn.nav-rates:hover {
    background: linear-gradient(160deg, rgba(245,200,66,.24), rgba(245,200,66,.09));
    border-color: rgba(245,200,66,.52);
  }
  .lsb-nav-btn.lsb-rates-toggle .section-toggle-btn {
    position: absolute;
    top: 6px;
    left: 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1;
    padding: 0;
    pointer-events: none;
  }
  .lsb-nav-btn.nav-fc {
    background: linear-gradient(160deg, rgba(76,142,245,.12), rgba(76,142,245,.04));
    border-color: rgba(76,142,245,.32);
  }
  .lsb-nav-btn.nav-fc .lsb-nav-label { color: var(--accent-blue); }
  .lsb-nav-btn.nav-fc:hover {
    background: linear-gradient(160deg, rgba(76,142,245,.22), rgba(76,142,245,.08));
    border-color: rgba(76,142,245,.5);
  }
  .lsb-nav-btn.nav-exp {
    background: linear-gradient(160deg, rgba(245,86,74,.12), rgba(245,86,74,.04));
    border-color: rgba(245,86,74,.32);
  }
  .lsb-nav-btn.nav-exp .lsb-nav-label { color: var(--accent-red); }
  .lsb-nav-btn.nav-exp:hover {
    background: linear-gradient(160deg, rgba(245,86,74,.22), rgba(245,86,74,.08));
    border-color: rgba(245,86,74,.5);
  }
  .lsb-nav-btn.nav-ext {
    background: linear-gradient(160deg, rgba(62,207,142,.12), rgba(201,162,46,.05));
    border-color: rgba(62,207,142,.32);
  }
  .lsb-nav-btn.nav-ext .lsb-nav-label { color: var(--accent-green); }
  .lsb-nav-btn.nav-ext:hover {
    background: linear-gradient(160deg, rgba(62,207,142,.2), rgba(201,162,46,.1));
    border-color: rgba(62,207,142,.5);
  }
  .lsb-nav-btn.nav-emp {
    background: linear-gradient(160deg, rgba(245,200,66,.12), rgba(245,200,66,.04));
    border-color: rgba(245,200,66,.32);
  }
  .lsb-nav-btn.nav-emp .lsb-nav-label { color: var(--accent-gold); }
  .lsb-nav-btn.nav-emp:hover {
    background: linear-gradient(160deg, rgba(245,200,66,.22), rgba(245,200,66,.08));
    border-color: rgba(245,200,66,.5);
  }
  .logo-sidebar-currencies { gap: 8px !important; }

  /* إخفاء أزرار الـ spinner (↑↓) من حقول الأسعار في الشريط الجانبي */
  #lsb-rates-mini input[type="number"]::-webkit-outer-spin-button,
  #lsb-rates-mini input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  #lsb-rates-mini input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* push main content */
  main.with-sidebar { padding-left: 12px; padding-right: 216px; }
  @media (max-width: 800px) {
    .logo-sidebar { display: none; }
    main.with-sidebar { padding-right: 0; }
  }

  /* ── Number counter animation ── */
  .card-amount {
    transition: color .4s;
  }
  .count-flash {
    animation: countPop .4s ease;
  }
  @keyframes countPop {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.12); }
    100% { transform:scale(1); }
  }

  /* ── Section slide-in ── */
  .section.active {
    animation: sectionIn .3s ease;
  }
  @keyframes sectionIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:none; }
  }

  /* ── Row highlight on add ── */
  @keyframes rowHighlight {
    0%   { background: rgba(62,207,142,.18); }
    100% { background: transparent; }
  }
  .row-new { animation: rowHighlight 1.6s ease forwards; }

  /* ── Login ── */
  #login-screen {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #08090d;
    transition: background var(--transition-speed);
  }

  /* Light theme login screen */
  [data-theme="light"] #login-screen {
    background: #e8f0fe;
  }
  [data-theme="light"] .login-split-visual {
    background: linear-gradient(160deg,
      rgba(219,234,254,.95) 0%,
      rgba(255,255,255,.85) 50%,
      rgba(219,234,254,.95) 100%) !important;
    border-left: 1px solid rgba(217,119,6,.18) !important;
  }
  [data-theme="light"] .login-split-visual::before {
    opacity: 0.04 !important;
  }
  [data-theme="light"] .login-visual-title {
    text-shadow: 0 2px 20px rgba(180,83,9,.25) !important;
  }
  [data-theme="light"] .login-visual-sub {
    color: rgba(180,83,9,.55) !important;
  }
  [data-theme="light"] .login-split-form {
    background: transparent !important;
  }
  [data-theme="light"] .login-split-form .input-group input {
    background: rgba(255,255,255,.75) !important;
    border-color: rgba(180,83,9,.2) !important;
    color: #1e293b !important;
  }
  [data-theme="light"] .login-split-form .input-group input:focus {
    background: rgba(255,255,255,1) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(217,119,6,.12) !important;
  }
  [data-theme="light"] .login-split-form .input-group label {
    color: #475569 !important;
  }
  [data-theme="light"] .login-form-divider {
    background: linear-gradient(90deg, transparent, rgba(217,119,6,.3), transparent) !important;
  }
  [data-theme="light"] .login-hint {
    color: #94a3b8 !important;
  }
  [data-theme="light"] #login-screen::after {
    background:
      radial-gradient(ellipse 55% 60% at 75% 50%, rgba(217,119,6,.08) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 20% 50%, rgba(5,150,105,.06) 0%, transparent 55%),
      radial-gradient(ellipse 70% 40% at 50% 90%, rgba(59,130,246,.05) 0%, transparent 55%) !important;
  }
  [data-theme="light"] .coin {
    opacity: 0.25 !important;
  }
  [data-theme="light"] .lc-badge.usd { background:rgba(5,150,105,.12) !important; border-color:rgba(5,150,105,.4) !important; }
  [data-theme="light"] .lc-badge.eur { background:rgba(59,130,246,.12) !important; border-color:rgba(59,130,246,.4) !important; }
  [data-theme="light"] .lc-badge.try { background:rgba(217,119,6,.12) !important; border-color:rgba(217,119,6,.4) !important; }

  /* subtle full-page glow */
  #login-screen::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 55% 60% at 75% 50%, rgba(245,200,66,.07) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 20% 50%, rgba(62,207,142,.05) 0%, transparent 55%),
      radial-gradient(ellipse 70% 40% at 50% 90%, rgba(76,142,245,.04) 0%, transparent 55%);
    animation: bgPulse 8s ease-in-out infinite alternate;
  }
  @keyframes bgPulse { from{opacity:.7} to{opacity:1} }

  /* floating coins */
  .login-coins { position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
  .coin {
    position: absolute; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; animation: floatCoin linear infinite; opacity: 0;
  }
  @keyframes floatCoin {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
    6%   { opacity: .65; }
    88%  { opacity: .55; }
    100% { transform: translateY(-15vh) rotate(540deg); opacity: 0; }
  }

  /* ── full-screen split ── */
  .login-split {
    display: flex;
    width: 100%; min-height: 100vh;
    position: relative; z-index: 2;
  }

  /* RIGHT: visual half */
  .login-split-visual {
    flex: 1.1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 48px;
    position: relative; overflow: hidden;
    /* soft separator line */
    border-left: 1px solid rgba(245,200,66,.1);
    background: linear-gradient(160deg,
      rgba(8,6,2,.7) 0%,
      rgba(18,13,2,.6) 50%,
      rgba(8,6,2,.7) 100%);
  }
  /* logo watermark behind */
  .login-split-visual::before {
    content: '';
    position: absolute; inset: -5%; z-index: 0;
    background-image: url("./brand-logo.png?v=20260803-startup-perf1");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    opacity: .055;
    filter: blur(3px);
  }
  /* glow ring */
  .login-split-visual::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,200,66,.12) 0%, transparent 70%);
    animation: ringPulse 3.5s ease-in-out infinite;
    z-index: 0;
  }
  @keyframes ringPulse {
    0%,100% { transform:scale(.9); opacity:.6; }
    50%      { transform:scale(1.1); opacity:1; }
  }

  .login-logo-img {
    width: 170px; height: auto;
    position: relative; z-index: 1;
    filter: drop-shadow(0 0 28px rgba(245,200,66,.6)) drop-shadow(0 0 60px rgba(245,200,66,.25));
    animation: logoPulse 3.5s ease-in-out infinite;
  }
  @keyframes logoPulse {
    0%,100% { filter: drop-shadow(0 0 20px rgba(245,200,66,.5)) drop-shadow(0 0 50px rgba(245,200,66,.2)); }
    50%      { filter: drop-shadow(0 0 42px rgba(245,200,66,.85)) drop-shadow(0 0 84px rgba(245,200,66,.35)); }
  }
  .login-visual-title {
    margin-top: 28px; font-size: 1.6rem; font-weight: 900;
    color: var(--accent-gold); text-align: center;
    position: relative; z-index: 1;
    text-shadow: 0 2px 20px rgba(245,200,66,.4); letter-spacing:.03em;
  }
  .login-visual-sub {
    margin-top: 10px; font-size: .9rem; color: rgba(245,200,66,.5);
    text-align: center; position: relative; z-index: 1; line-height: 1.7;
  }
  .login-currencies {
    display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap;
    justify-content: center; position: relative; z-index: 1;
  }
  .lc-badge {
    padding: 8px 18px; border-radius: 12px;
    font-size: .88rem; font-weight: 800; border: 1px solid;
    animation: badgePop 2.2s ease-in-out infinite;
    backdrop-filter: blur(4px);
  }
  .lc-badge.usd { background:rgba(62,207,142,.1); border-color:rgba(62,207,142,.35); color:#3ecf8e; animation-delay:0s; }
  .lc-badge.eur { background:rgba(76,142,245,.1); border-color:rgba(76,142,245,.35); color:#4c8ef5; animation-delay:.55s; }
  .lc-badge.try { background:rgba(245,200,66,.1); border-color:rgba(245,200,66,.35); color:#f5c842; animation-delay:1.1s; }
  @keyframes badgePop {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-5px); }
  }

  /* LEFT: form half — NO box, NO border, transparent background */
  .login-split-form {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 60px 56px;
    text-align: right;
    background: transparent;
    min-width: 280px;
  }

  /* logo + name row at top of form */
  .login-form-logo {
    display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
  }
  .login-form-logo img {
    width: 48px; height: auto;
    filter: drop-shadow(0 0 10px rgba(245,200,66,.55));
  }
  .login-form-name {
    font-size: 1.25rem; font-weight: 900; color: var(--accent-gold);
    text-shadow: 0 0 14px rgba(245,200,66,.3);
  }
  .login-form-sub {
    font-size: .78rem; color: var(--text-dim); margin-top: 2px;
  }
  .login-form-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,200,66,.25), transparent);
    margin-bottom: 28px;
  }
  .login-form-title {
    font-size: 1.1rem; font-weight: 800; color: var(--text);
    margin-bottom: 22px;
  }
  /* input fields on transparent bg get a subtle glass style */
  .login-split-form .input-group input {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  .login-split-form .input-group input:focus {
    background: rgba(245,200,66,.04) !important;
    border-color: var(--accent-gold) !important;
  }
  .login-hint {
    margin-top: 14px; font-size: .78rem;
    color: var(--text-muted); text-align: center;
  }

  @media (max-width: 680px) {
    .login-split { flex-direction: column; }
    .login-split-visual { padding: 40px 28px; border-left: none; border-bottom: 1px solid rgba(245,200,66,.1); }
    .login-logo-img { width: 110px; }
    .login-split-form { padding: 40px 28px; }
  }


  .input-group { margin-bottom:16px; text-align:right; }
  .input-group label { display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:6px; }
  .input-group input, .input-group select, .input-group textarea {
    width:100%; padding:11px 14px;
    background: var(--surface3); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text);
    font-family:'Tajawal',sans-serif; font-size:.95rem;
    transition:.2s;
  }
  .input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    outline:none; border-color:var(--accent-gold); background:var(--surface2);
  }
  .btn {
    padding:11px 24px; border:none; border-radius:var(--radius-sm);
    font-family:'Tajawal',sans-serif; font-size:1rem; font-weight:700;
    cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:6px;
  }
  .btn-gold { background:var(--accent-gold); color:#1a1500; }
  .btn-gold:hover { background:var(--accent-gold-dim); transform:translateY(-1px); }
  .btn-blue { background:var(--accent-blue); color:#fff; }
  .btn-blue:hover { background:#3a7de0; }
  .btn-green { background:var(--accent-green); color:#003322; }
  .btn-green:hover { background:#32b87a; }
  .btn-red { background:var(--accent-red); color:#fff; }
  .btn-red:hover { background:#e0443a; }
  .btn-ghost { background:var(--surface3); color:var(--text-dim); border:1px solid var(--border); }
  .btn-ghost:hover { background:var(--border); color:var(--text); }
  .btn-full { width:100%; justify-content:center; }
  .error-msg { color:var(--accent-red); font-size:.85rem; margin-top:8px; }

  /* ── App shell ── */
  #app { display:none; min-height:100vh; flex-direction:column; }
  /* ══ TOPBAR ══ */
  .topbar {
    background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
    min-height: 56px;
    height: auto;
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,.3);
    flex-wrap: nowrap;
  }
  .topbar-brand { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .topbar-brand-icon {
    width:38px; height:38px; border-radius:9px;
    background:linear-gradient(135deg,#fff8e7,#ffe9b3);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:0 2px 8px rgba(245,200,66,.35);
    overflow:hidden; padding:2px; box-sizing:border-box;
  }
  .topbar-brand-icon img { width:100%; height:100%; object-fit:contain; display:block; }
  .topbar-brand h2 { font-size:.98rem; font-weight:800; color:var(--accent-gold); letter-spacing:.01em; }
  .topbar-brand span.brand-sub { font-size:.65rem; color:var(--text-muted); font-weight:400; display:block; margin-top:-1px; }
  .topbar-right { display:flex; align-items:center; gap:7px; flex-shrink:0; }
  .user-chip {
    background:var(--surface3); border:1px solid var(--border);
    padding:4px 12px; border-radius:20px; font-size:.82rem; color:var(--text-dim);
  }
  .user-chip span { color:var(--accent-gold); font-weight:700; }
  /* ── Nav wrapper: يتمدد ويتقلص مع الشاشة ── */
  nav {
    display:flex; align-items:center; gap:2px;
    flex: 1 1 0; min-width: 0;
    background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:3px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  nav::-webkit-scrollbar { display:none; }
  .nav-btn {
    padding:6px 11px; border-radius:8px;
    background:transparent; border:1px solid transparent; color:var(--text-dim);
    font-family:'Tajawal',sans-serif; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:.18s; white-space:nowrap; position:relative;
    flex-shrink:0;
  }
  .nav-btn:hover { background:var(--surface3); color:var(--text); }
  .nav-btn.active {
    background:linear-gradient(135deg,var(--surface3) 0%,rgba(245,200,66,.08) 100%);
    color:var(--accent-gold);
    box-shadow:0 1px 6px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
    border-color:rgba(245,200,66,.2);
  }
  .nav-divider { width:1px; height:20px; background:var(--border); margin:0 3px; flex-shrink:0; align-self:center; display:inline-block; }

  /* ══ TOPBAR RATES STRIP ══ */
  .topbar-rates-strip {
    flex: 1; min-width: 0; max-width: 560px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 5px 12px;
    cursor: pointer;
    transition: .18s;
    display: flex; align-items: center; gap: 10px;
    position: relative; overflow: hidden;
    margin: 0 6px;
  }
  .topbar-rates-strip::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--accent-green),var(--accent-blue),var(--accent-gold));
    background-size:200% 100%;
    animation:trsBarShimmer 4s linear infinite;
  }
  @keyframes trsBarShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
  .topbar-rates-strip:hover { border-color:var(--accent-gold); box-shadow:0 2px 16px rgba(245,200,66,.12); }

  .trs-live-row {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    flex-shrink:0; padding-left:4px;
  }
  .trs-dot {
    width:7px; height:7px; border-radius:50%;
    background:#3ecf8e; box-shadow:0 0 6px #3ecf8e;
    animation:dotBlink 1.5s ease-in-out infinite;
    display:inline-block;
  }
  .trs-label { font-size:.58rem; color:var(--text-muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
  .trs-time  { font-size:.55rem; color:var(--text-muted); white-space:nowrap; }

  .trs-cards { display:flex; align-items:center; gap:0; flex:1; min-width:0; overflow:hidden; }
  .trs-sep   { width:1px; height:28px; background:var(--border); flex-shrink:0; margin:0 8px; }
  .trs-sep-wide { margin:0 10px; }

  .trs-card {
    display:flex; flex-direction:column; align-items:center; gap:1px;
    flex-shrink:0;
  }
  .trs-card-top { display:flex; align-items:center; gap:4px; }
  .trs-flag { font-size:.9rem; line-height:1; }
  .trs-code { font-size:.65rem; font-weight:800; color:var(--text-dim); letter-spacing:.03em; }
  .trs-prices { display:flex; gap:5px; align-items:center; margin-top:1px; }
  .trs-buy  {
    font-size:.72rem; font-weight:800; color:var(--accent-green);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .trs-sell {
    font-size:.72rem; font-weight:800; color:var(--accent-red);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .trs-market-only {
    font-size:.75rem; font-weight:800; color:var(--text);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .trs-buy::before  { content:'↓'; font-size:.6rem; margin-left:1px; opacity:.7; }
  .trs-sell::before { content:'↑'; font-size:.6rem; margin-left:1px; opacity:.7; }
  .trs-edit-hint {
    font-size:.58rem; color:var(--text-muted); white-space:nowrap;
    padding:2px 6px; border:1px dashed var(--border); border-radius:5px; transition:.15s;
  }
  .topbar-rates-strip:hover .trs-edit-hint { color:var(--accent-gold); border-color:var(--accent-gold); }
  .trs-countdown {
    font-size:.52rem; font-weight:700; color:var(--text-muted);
    background:var(--surface3); border:1px solid var(--border);
    border-radius:4px; padding:1px 4px; min-width:20px; text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .trs-right-col { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
  .trs-source { font-size:.52rem; color:var(--text-muted); white-space:nowrap; max-width:100px; overflow:hidden; text-overflow:ellipsis; }
  .trs-card { cursor:pointer; }
  .trs-flash { animation:trsFlash .5s ease; }
  @keyframes trsFlash{0%{opacity:.4}100%{opacity:1}}

  @media(max-width:1100px){ .trs-sep-wide + .trs-card, .trs-sep-wide { display:none; } }
  @media(max-width:900px) { .topbar-rates-strip { display:none; } }

  /* ── Main ── */
  main {
    padding: 20px 12px 24px;
    max-width: none;
    margin: 0;
    width: 100%;
  }
  main.with-sidebar {
    max-width: none;
    margin: 0;
    width: 100%;
  }
  .section { display:none; }
  .section.active { display:block; }

  /* ── Summary cards ── */
  .summary-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px; margin-bottom:24px;
  }
  .currency-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px 22px;
    position:relative; overflow:hidden;
    transition:.2s;
  }
  .main-balance-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .main-balance-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: var(--surface2);
  }
  .main-balance-toggle:active { transform: scale(.96); }
  .main-balance-card.balances-hidden .card-amount,
  .main-balance-card.balances-hidden .card-detail .val {
    letter-spacing: .12em;
  }
  .main-balance-card.balances-hidden .card-amount {
    filter: blur(.02em);
  }
  .currency-card::before {
    content:''; position:absolute; top:0; right:0;
    width:4px; height:100%; border-radius:0 var(--radius) var(--radius) 0;
  }
  .currency-card.usd::before { background:var(--usd); }
  .currency-card.eur::before { background:var(--eur); }
  .currency-card.try::before { background:var(--try); }
  .card-label { font-size:.8rem; color:var(--text-dim); margin-bottom:4px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
  .card-symbol { font-size:1.8rem; margin-bottom:4px; }
  .card-amount { font-size:2rem; font-weight:900; line-height:1; }
  .card-amount.usd { color:var(--usd); }
  .card-amount.eur { color:var(--eur); }
  .card-amount.try { color:var(--try); }
  .card-sub { font-size:.8rem; color:var(--text-muted); margin-top:6px; }
  .card-detail { display:flex; gap:16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .card-detail-item { flex:1; }
  .card-detail-item .lbl { font-size:.75rem; color:var(--text-muted); margin-bottom:2px; }
  .card-detail-item .val { font-size:.95rem; font-weight:700; }
  .val.in { color:var(--accent-green); }
  .val.out { color:var(--accent-red); }

  /* ── Opening balance ── */
  .opening-section {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; margin-bottom:24px;
  }
  .opening-section h3 { font-size:1rem; font-weight:700; color:var(--text-dim); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .opening-grid { display:flex; gap:12px; flex-wrap:wrap; }
  .opening-item { display:flex; align-items:center; gap:8px; }
  .opening-item label { font-size:.85rem; color:var(--text-dim); white-space:nowrap; }
  .opening-item input { width:130px; }

  /* ── Table section ── */
  .section-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; flex-wrap:wrap; gap:10px;
  }
  .section-header h2 { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:8px; }
  .action-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .filter-bar {
    display:flex; gap:10px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px 18px;
    margin-bottom:16px;
  }
  .filter-bar .input-group { margin-bottom:0; min-width:160px; flex:1; }
  .table-wrap {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    width: 100%;
  }
  table { width:100%; border-collapse:collapse; font-size:.88rem; }
  thead { background:var(--surface3); }
  th {
    padding:12px 14px; text-align:right; font-weight:700;
    color:var(--text-dim); font-size:.8rem; letter-spacing:.03em;
    border-bottom:1px solid var(--border);
  }
  td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tr:hover td { background:rgba(255,255,255,.02); }
  table.resizable-table {
    table-layout: fixed;
    min-width: 100%;
  }
  table.resizable-table th,
  table.resizable-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.resizable-table th {
    position: relative;
    user-select: none;
  }
  table.resizing-columns,
  table.resizing-columns * {
    cursor: col-resize !important;
  }
  .col-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 8px;
    cursor: col-resize;
    z-index: 5;
    touch-action: none;
  }
  html:not([dir="rtl"]) .col-resize-handle {
    left: auto;
    right: -4px;
  }
  .col-resize-handle::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 3px;
    width: 1px;
    background: rgba(201,161,74,.32);
    opacity: .95;
    transition: width .12s, background .12s, box-shadow .12s;
  }
  html:not([dir="rtl"]) .col-resize-handle::after {
    left: auto;
    right: 3px;
  }
  .col-resize-handle:hover::after,
  .col-resize-handle.active::after {
    width: 3px;
    background: var(--accent-gold);
    box-shadow: 0 0 10px rgba(224,126,0,.24);
  }
  @media print {
    .col-resize-handle { display: none !important; }
  }
  .badge {
    display:inline-block; padding:3px 10px; border-radius:20px;
    font-size:.75rem; font-weight:700;
  }
  .badge-in { background:rgba(62,207,142,.12); color:var(--accent-green); }
  .badge-out { background:rgba(245,86,74,.12); color:var(--accent-red); }
  .badge-usd { background:rgba(62,207,142,.12); color:var(--usd); }
  .badge-eur { background:rgba(76,142,245,.12); color:var(--eur); }
  .badge-try { background:rgba(245,200,66,.12); color:var(--try); }
  .btn-icon {
    width:30px; height:30px; border-radius:6px; border:none;
    background:var(--surface3); color:var(--text-dim);
    cursor:pointer; font-size:.9rem; display:inline-flex;
    align-items:center; justify-content:center; transition:.15s;
    margin:0 2px;
  }
  .btn-icon:hover.edit { background:rgba(76,142,245,.15); color:var(--accent-blue); }
  .btn-icon:hover.del { background:rgba(245,86,74,.15); color:var(--accent-red); }
  .empty-state { text-align:center; padding:50px; color:var(--text-muted); font-size:1rem; }

  /* ── Modal ── */
  .modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:200; display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
  }
  .modal-overlay.open { display:flex; }
  .modal {
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:32px; width:480px; max-width:95vw;
    max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow);
    animation: modalIn .2s ease;
  }
  @keyframes modalIn { from{transform:scale(.96) translateY(8px);opacity:0} to{transform:none;opacity:1} }
  .modal h3 { font-size:1.2rem; font-weight:800; margin-bottom:24px; color:var(--accent-gold); }
  .modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* ── Transaction Mode Tabs ── */
  .tx-mode-tabs { display:flex; gap:6px; margin-bottom:18px; background:var(--surface2); border-radius:var(--radius-sm); padding:4px; }
  .tx-mode-tab { flex:1; padding:9px 12px; border:none; border-radius:6px; cursor:pointer; font-family:"Tajawal",sans-serif; font-size:.85rem; font-weight:700; background:transparent; color:var(--text-dim); transition:.25s; }
  .tx-mode-tab:hover { color:var(--text); background:var(--surface3); }
  .tx-mode-tab.active { background:var(--accent-gold); color:#0f1117; }
  .exchange-rate-box { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; position:relative; }
  .exchange-rate-header { display:flex; align-items:center; gap:6px; }
  .ex-op-btn { width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface3); color:var(--accent-gold); font-size:1rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:"Tajawal",sans-serif; transition:.2s; flex-shrink:0; }
  .ex-op-btn:hover { background:var(--accent-gold); color:#0f1117; }
  .ex-op-btn.divide { color:var(--accent-blue); }
  .ex-op-btn.divide:hover { background:var(--accent-blue); color:#fff; }
  .exchange-result-box { background:linear-gradient(135deg, var(--surface2), var(--surface3)); border:1px solid var(--accent-gold); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:12px; }
  .dcur-modal-inner { max-width:400px; }
  .dcur-list { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
  .dcur-item { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.88rem; }
  .dcur-item .dcur-remove { cursor:pointer; color:var(--accent-red); font-size:.8rem; }

  /* ── Fixed Rate Converter Cards ── */
  .frc-converter {
    background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:8px;
  }
  .frc-header-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
  .frc-flag { font-size:1rem; }
  .frc-title { font-size:.8rem; font-weight:800; color:var(--text); flex:1; }
  .frc-rate-badge {
    font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:4px;
    background:rgba(62,207,142,.12); color:var(--accent-green); border:1px solid rgba(62,207,142,.3);
  }
  .frc-rate-badge.frc-sell-badge { background:rgba(245,86,74,.1); color:var(--accent-red); border-color:rgba(245,86,74,.3); }
  .frc-fields { display:flex; align-items:center; gap:6px; }
  .frc-field { flex:1; }
  .frc-field label { font-size:.68rem; color:var(--text-muted); display:block; margin-bottom:3px; }
  .frc-field input {
    width:100%; padding:7px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--text); font-family:'Tajawal',sans-serif;
    font-size:.88rem; font-weight:700; text-align:center; box-sizing:border-box;
  }
  .frc-field input:focus { outline:none; border-color:var(--accent-gold); }
  .frc-arrow { color:var(--accent-gold); font-weight:800; font-size:.9rem; margin-top:14px; }
  .frc-result-field { }
  .frc-result {
    padding:7px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface3); color:var(--accent-gold); font-weight:800; font-size:.88rem;
    text-align:center; min-height:20px;
  }
  .frc-edit-input {
    width:100%; padding:6px 6px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--text); font-family:'Tajawal',sans-serif;
    font-size:.82rem; font-weight:700; text-align:center; box-sizing:border-box;
  }
  .frc-edit-input:focus { outline:none; border-color:var(--accent-gold); }
  .frc-buy-border { border-color:rgba(62,207,142,.4); }
  .frc-sell-border { border-color:rgba(245,86,74,.4); }
  @media(max-width:600px) {
    #rates-view-buysell > div:first-child { grid-template-columns:1fr !important; }
  }

  /* ── Exchange Converter Cards (لوحة التصريف) ── */
  .exc-card {
    background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:8px;
  }
  .exc-card-head {
    display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:800;
    color:var(--text); margin-bottom:8px;
  }
  .exc-rate-tag {
    margin-right:auto; font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:4px;
    background:rgba(62,207,142,.12); color:var(--accent-green); border:1px solid rgba(62,207,142,.25);
  }
  .exc-rate-tag.exc-sell-tag { background:rgba(245,86,74,.1); color:var(--accent-red); border-color:rgba(245,86,74,.25); }
  .exc-card-body { display:flex; align-items:center; gap:6px; }
  .exc-inp-wrap, .exc-res-wrap { flex:1; }
  .exc-inp-wrap label, .exc-res-wrap label {
    font-size:.7rem; color:var(--text-muted); display:block; margin-bottom:2px; font-weight:700;
  }
  .exc-inp-wrap input {
    width:100%; padding:8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--text); font-family:'Tajawal',sans-serif;
    font-size:.92rem; font-weight:700; text-align:center; box-sizing:border-box;
  }
  .exc-inp-wrap input:focus { outline:none; border-color:var(--accent-gold); }
  .exc-eq { color:var(--accent-gold); font-weight:900; font-size:1rem; margin-top:14px; }
  .exc-res {
    padding:8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface3); color:var(--accent-gold); font-weight:800; font-size:.92rem;
    text-align:center;
  }
  @media(max-width:600px) {
    .exchange-modal-inner .exchange-body-scroll > div:first-child { grid-template-columns:1fr !important; }
  }

  /* ── Users ── */
  .users-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
  .user-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px 20px;
    display:flex; flex-direction:column; gap:12px; transition:.2s;
  }
  .user-card:hover { border-color:var(--accent-gold); box-shadow:0 4px 20px rgba(0,0,0,.15); }
  .user-card-top { display:flex; align-items:center; gap:14px; }
  .user-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; font-weight:800; flex-shrink:0;
  }
  .user-info { flex:1; min-width:0; }
  .user-info .name { font-weight:700; font-size:.95rem; }
  .user-info .role { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
  .tag-admin { color:var(--accent-gold); }
  .tag-user { color:var(--text-dim); }
  .user-card-actions { display:flex; gap:8px; margin-top:2px; }
  .perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; padding-top:10px; border-top:1px solid var(--border); }
  .perm-item { display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--text-dim); }
  .perm-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .perm-dot.on  { background:var(--accent-green); box-shadow:0 0 4px var(--accent-green); }
  .perm-dot.off { background:var(--text-muted); }
  .perm-section-title { font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--border); }
  .perm-checkboxes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .perm-check-item { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; transition:.15s; user-select:none; }
  .perm-check-item:hover { border-color:var(--accent-gold); }
  .perm-check-item input[type=checkbox] { accent-color:var(--accent-green); width:15px; height:15px; cursor:pointer; }
  .perm-check-item .pci-label { font-size:.82rem; font-weight:700; }
  .perm-check-item .pci-desc  { font-size:.68rem; color:var(--text-muted); }
  #u-perms-section.hidden { display:none; }
  .current-user-card { border-color: var(--accent-green) !important; box-shadow: 0 0 0 1px var(--accent-green), 0 4px 20px rgba(62,207,142,.12); }
  /* ── Reports ── */
  .stat-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px; margin-bottom:20px;
  }
  .stat-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:16px 18px;
    text-align:center;
  }
  .stat-card .s-val { font-size:1.6rem; font-weight:900; }
  .stat-card .s-lbl { font-size:.78rem; color:var(--text-muted); margin-top:4px; }
  .report-filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .report-quick-ranges,
  .report-filter-grid {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .report-quick-ranges button,
  .report-filter-grid select,
  .report-filter-grid input {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: .82rem;
    font-weight: 800;
  }
  .report-quick-ranges button {
    cursor: pointer;
    color: var(--accent-gold);
  }
  .report-filter-grid select { min-width: 145px; }
  .report-category-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  .report-category-pill {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    font-weight: 900;
    transition: .16s ease;
  }
  .report-category-pill:hover,
  .report-category-pill.active {
    border-color: var(--accent-gold);
    background: rgba(245,200,66,.1);
    transform: translateY(-1px);
  }
  .report-category-pill-count {
    min-width: 26px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: .78rem;
  }
  .report-money-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .report-money-lines .muted { color: var(--text-muted); font-weight: 700; }
  .report-section-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
  }
  .report-detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 18px;
  }
  .report-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .report-detail-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
  }
  #report-detail-count {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 800;
  }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar { width:6px; height:6px; }
  ::-webkit-scrollbar-track { background:var(--bg); }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

  select option { background:var(--surface3); }

  @media(max-width:600px){
    main{padding:12px;}
    .topbar{padding:0 12px;}
    nav .nav-btn{padding:5px 10px;font-size:.8rem;}
    .grid-2{grid-template-columns:1fr;}
    .modal{padding:20px;}
    .filter-bar{padding:10px 12px;}
    .card-amount{font-size:1.6rem;}
  }

  .toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:var(--surface3); border:1px solid var(--border);
    color:var(--text); padding:10px 24px; border-radius:20px;
    font-size:.9rem; z-index:999;
    animation:toastIn .3s ease;
    box-shadow:var(--shadow);
    white-space:nowrap;
  }
  @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}

  /* ═══ Toast نجاح بارز للعمليات ═══ */
  .toast-success {
    position:fixed !important; top:50% !important; left:50% !important;
    transform:translate(-50%,-50%) !important;
    background:linear-gradient(135deg, rgba(62,207,142,.96), rgba(45,170,115,.96)) !important;
    color:#fff !important; padding:24px 38px; border-radius:18px;
    font-size:1.15rem; font-weight:900; z-index:99999 !important;
    box-shadow:0 12px 40px rgba(62,207,142,.4), 0 4px 14px rgba(0,0,0,.25);
    border:2px solid rgba(255,255,255,.25);
    display:flex !important; align-items:center; gap:12px; pointer-events:none;
    animation:toastSuccessPop .35s cubic-bezier(.34,1.56,.64,1) both;
    font-family:'Tajawal',sans-serif; text-align:center;
    min-width:240px; max-width:90vw;
  }
  .toast-success .ts-icon {
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; flex-shrink:0; color:#fff;
  }
  .toast-success .ts-main { font-size:1.15rem; font-weight:900; color:#fff; }
  .toast-success .ts-detail { font-size:.78rem; font-weight:600; opacity:.92; margin-top:3px; color:#fff; }
  .toast-success .ts-text { display:flex; flex-direction:column; align-items:flex-start; }
  @keyframes toastSuccessPop {
    0%   { opacity:0; transform:translate(-50%,-50%) scale(.7); }
    60%  { opacity:1; transform:translate(-50%,-50%) scale(1.05); }
    100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  }
  @keyframes toastSuccessOut {
    from { opacity:1; transform:translate(-50%,-50%) scale(1); }
    to   { opacity:0; transform:translate(-50%,-50%) scale(.85); }
  }
  .toast-success.out { animation:toastSuccessOut .3s ease forwards !important; }


  /* ── Search bar ── */
  .search-bar-wrap {
    margin-bottom: 10px;
  }
  .search-main-input {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 10px 16px;
    transition: border-color .2s, box-shadow .2s;
  }
  .search-main-input:focus-within {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--glow-primary);
  }
  .search-icon { font-size: 1rem; flex-shrink:0; }
  .search-main-input input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-family: 'Tajawal', sans-serif;
    font-size: 1rem; min-width: 0;
  }
  .search-main-input input::placeholder { color: var(--text-muted); }
  .search-clear-btn {
    background: transparent; border: none; color: var(--text-muted);
    cursor: pointer; font-size: .9rem; padding: 2px 6px;
    border-radius: 6px; transition: .15s; display:none;
  }
  .search-clear-btn.visible { display:block; }
  .search-clear-btn:hover { background: var(--surface3); color: var(--accent-red); }
  .search-results-info {
    font-size: .8rem; color: var(--text-muted);
    padding: 4px 6px; min-height: 20px;
  }
  .search-results-info .s-count { color: var(--accent-gold); font-weight: 700; }
  .search-results-info .s-highlight {
    background: rgba(245,200,66,.18); color: var(--accent-gold);
    border-radius: 3px; padding: 0 3px;
  }

  /* ── Filter pills row ── */
  .filter-pills-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
    margin-bottom: 16px;
  }
  .fp-group {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .fp-label {
    font-size: .78rem; color: var(--text-muted); font-weight: 700;
    white-space: nowrap;
  }
  .fp-sep { color: var(--text-muted); font-size: .8rem; }
  .fp-input {
    padding: 5px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface3);
    color: var(--text); font-family: 'Tajawal',sans-serif; font-size: .82rem;
    width: 130px; transition: .2s;
  }
  .fp-input:focus { outline:none; border-color: var(--accent-gold); }
  .fp-pills { display: flex; gap: 4px; }
  .fp-pill {
    padding: 4px 12px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface3);
    color: var(--text-dim); font-family: 'Tajawal',sans-serif;
    font-size: .78rem; font-weight: 700; cursor: pointer; transition: .15s;
  }
  .fp-pill:hover { background: var(--border); color: var(--text); }
  .fp-pill.active { background: var(--surface2); color: var(--text); border-color: var(--text-muted); }
  .fp-pill.usd.active  { background:rgba(62,207,142,.1);  color:var(--usd); border-color:var(--usd); }
  .fp-pill.eur.active  { background:rgba(76,142,245,.1);  color:var(--eur); border-color:var(--eur); }
  .fp-pill.try.active  { background:rgba(245,200,66,.1);  color:var(--try); border-color:var(--try); }
  .fp-pill.in.active   { background:rgba(62,207,142,.1);  color:var(--accent-green); border-color:var(--accent-green); }
  .fp-pill.out.active  { background:rgba(245,86,74,.1);   color:var(--accent-red);   border-color:var(--accent-red); }
  .fp-select {
    padding: 5px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface3);
    color: var(--text); font-family: 'Tajawal',sans-serif; font-size: .82rem;
    cursor: pointer; transition: .2s;
  }
  .fp-select:focus { outline: none; border-color: var(--accent-gold); }
  .fp-reset-btn {
    margin-right: auto; padding: 5px 14px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); font-family: 'Tajawal',sans-serif;
    font-size: .8rem; cursor: pointer; transition: .15s;
  }
  .fp-reset-btn:hover { background: var(--surface3); color: var(--accent-red); border-color: var(--accent-red); }

  /* highlight matched text */
  mark.hl {
    background: rgba(245,200,66,.25); color: var(--accent-gold);
    border-radius: 2px; padding: 0 1px;
  }

  /* ── Row color picker ── */
  .row-actions {
    display: flex; align-items: center; gap: 4px;
  }
  .color-picker-wrap {
    position: relative; display: inline-flex;
  }
  .color-dot-btn {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--surface3);
    cursor: pointer; font-size: .75rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: .15s; padding: 0; flex-shrink: 0;
  }
  .color-dot-btn:hover { transform: scale(1.2); border-color: var(--accent-gold); }

  .color-palette {
    display: none; position: absolute; left: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 999; flex-wrap: wrap;
    gap: 5px; width: 148px;
  }
  .color-palette.open { display: flex; }

  .cp-swatch {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    transition: .15s; flex-shrink: 0;
  }
  .cp-swatch:hover { transform: scale(1.25); border-color: var(--text); }
  .cp-clear {
    background: var(--surface3) !important; border: 2px dashed var(--border) !important;
    color: var(--text-muted); font-size: .75rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
  }
  .cp-clear:hover { border-color: var(--accent-red) !important; color: var(--accent-red); }

  /* ── Checkbox ── */
  .cb-wrap {
    display: inline-flex; align-items: center; cursor: pointer;
    position: relative;
  }
  .cb-wrap input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .cb-box {
    width: 17px; height: 17px; border-radius: 5px;
    border: 2px solid var(--border); background: var(--surface3);
    transition: .15s; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center;
  }
  .cb-wrap input:checked + .cb-box {
    background: var(--accent-gold); border-color: var(--accent-gold);
  }
  .cb-wrap input:checked + .cb-box::after {
    content: '✓'; font-size: 11px; color: #1a1500; font-weight: 900; line-height: 1;
  }
  .cb-wrap:hover .cb-box { border-color: var(--accent-gold); }

  /* selected row highlight */
  .tx-row.selected { background: rgba(245,200,66,.06) !important; }
  .tx-row.selected td:first-child { border-right: 3px solid var(--accent-gold); }

  /* bulk action bar */
  .bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; margin-bottom: 8px;
    background: rgba(245,200,66,.08); border: 1px solid rgba(245,200,66,.25);
    border-radius: var(--radius); animation: slideDown .2s ease;
  }
  @keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .bulk-count {
    font-weight: 800; font-size: .9rem; color: var(--accent-gold);
    white-space: nowrap;
  }
  .bulk-btn { font-size: .82rem !important; padding: 5px 12px !important; }

  /* ── Company chip ── */
  .company-chip {
    display:inline-block; padding:2px 10px; border-radius:6px;
    background:rgba(155,114,245,.1); border:1px solid rgba(155,114,245,.2);
    color:var(--accent-purple); font-size:.78rem; font-weight:600;
    white-space:nowrap;
  }
  .add-company-inline {
    margin-right:8px; padding:1px 8px; border-radius:6px;
    border:1px solid var(--border); background:var(--surface3);
    color:var(--text-dim); font-family:'Tajawal',sans-serif;
    font-size:.75rem; cursor:pointer; transition:.15s; float:left;
  }
  .add-company-inline:hover { background:var(--accent-gold); color:#1a1500; border-color:transparent; }

  /* ── Time chip ── */
  .time-chip {
    display:inline-block; padding:2px 8px; border-radius:6px;
    background:var(--surface3); border:1px solid var(--border);
    font-size:.78rem; color:var(--text-dim); font-weight:600;
    letter-spacing:.03em; white-space:nowrap;
  }

  /* ── Clickable card ── */
  .clickable-card {
    cursor: pointer;
    user-select: none;
  }
  .clickable-card:active { transform: scale(.98) !important; }
  .card-click-hint {
    font-size: .7rem; color: var(--text-muted);
    margin-bottom: 6px; letter-spacing:.03em;
    opacity: 0; transition: opacity .2s;
  }
  .clickable-card:hover .card-click-hint { opacity: 1; }

  /* ── Ledger modal ── */
  .ledger-modal-inner {
    width: calc(100vw - 28px) !important;
    height: calc(100vh - 28px) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important; overflow: hidden !important;
    display: flex; flex-direction: column;
  }
  .ledger-modal-head {
    display: flex; align-items: center; gap: 16px;
    padding: 22px 26px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface2), var(--surface3));
  }
  .ledger-flag { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
  .ledger-title { font-size: 1.2rem; font-weight: 900; letter-spacing: .01em; }
  .ledger-sub   { font-size: .78rem; color: var(--text-dim); margin-top:3px; letter-spacing: .04em; }
  .ledger-balance-wrap {
    margin-right: auto; text-align: left;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .ledger-bal-label { font-size: .7rem; color: var(--text-muted); letter-spacing:.05em; }
  .ledger-bal { font-size: 1.7rem; font-weight: 900; line-height: 1.1; margin-top: 2px; }

  /* tabs */
  .ledger-tabs {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 22px; border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
  }
  .ledger-tab {
    padding: 5px 16px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface3); color: var(--text-dim);
    font-family: 'Tajawal',sans-serif; font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: .15s;
  }
  .ledger-tab:hover { background: var(--border); color: var(--text); }
  .ledger-tab.active { background: var(--accent-gold); color: #1a1500; border-color: transparent; }

  .ledger-date-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-wrap: wrap;
  }
  .ledger-date-presets {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .ledger-date-btn,
  .ledger-date-clear {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Tajawal', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
  }
  .ledger-date-btn:hover,
  .ledger-date-clear:hover {
    border-color: var(--accent-gold);
    color: var(--text);
  }
  .ledger-date-btn.active {
    background: var(--surface3);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    box-shadow: inset 0 0 0 1px var(--accent-gold);
  }
  .ledger-custom-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
  }
  .ledger-custom-dates[hidden] { display: none !important; }
  .ledger-custom-dates label {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 800;
  }
  .ledger-custom-dates input {
    width: 138px;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font-family: 'Tajawal', sans-serif;
    font-size: .78rem;
  }
  .ledger-date-arrow { color: var(--text-muted); }
  .ledger-date-clear { margin-inline-start: auto; }

  /* summary strip */
  .ledger-strip {
    display: flex; align-items: stretch; gap: 0;
    padding: 14px 22px; background: var(--surface3);
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
  }
  .ls-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 22px; min-width: 130px;
  }
  .ls-lbl  { font-size: .72rem; color: var(--text-muted); letter-spacing:.04em; font-weight:600; }
  .ls-val  { font-size: 1.1rem; font-weight: 900; margin-top: 3px; letter-spacing: .01em; }
  .ls-val.green { color: var(--accent-green); }
  .ls-val.red   { color: var(--accent-red); }
  .ls-val.gold  { color: var(--accent-gold); }
  .ls-sep {
    color: var(--text-muted); font-size: 1.3rem; font-weight: 300;
    padding: 0 4px; align-self: center;
  }
  /* جدول السجل المحسّن */
  .ledger-modal-inner .table-wrap {
    padding: 0; background: var(--surface);
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow: auto !important;
  }
  .ledger-modal-inner table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    table-layout: fixed;
  }
  .ledger-modal-inner colgroup col:nth-child(1) { width: 42px; }
  .ledger-modal-inner colgroup col:nth-child(2) { width: 82px; }
  .ledger-modal-inner colgroup col:nth-child(3) { width: 78px; }
  .ledger-modal-inner colgroup col:nth-child(4) { width: 170px; }
  .ledger-modal-inner colgroup col:nth-child(5) { width: 82px; }
  .ledger-modal-inner colgroup col:nth-child(6) { width: 112px; }
  .ledger-modal-inner colgroup col:nth-child(7) { width: 82px; }
  .ledger-modal-inner colgroup col:nth-child(8) { width: 120px; }
  .ledger-modal-inner colgroup col:nth-child(9) { width: 150px; }
  .ledger-modal-inner colgroup col:nth-child(10){ width: 160px; }
  .ledger-modal-inner thead th {
    position: sticky; top: 0; background: var(--surface2);
    color: var(--text-dim); font-size: .76rem; font-weight: 800;
    padding: 12px 10px; text-align: center;
    border-bottom: 2px solid var(--border); white-space: nowrap; letter-spacing: .03em;
  }
  .ledger-modal-inner tbody td {
    height: 52px;
    max-height: 52px;
    padding: 8px 9px; text-align: center; border-bottom: 1px solid var(--border);
    font-size: .84rem; line-height: 1.25; vertical-align: middle;
    overflow: hidden;
  }
  .ledger-modal-inner tbody tr:hover { background: var(--surface2); }
  .ledger-modal-inner tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
  .ledger-modal-inner tbody tr:nth-child(even):hover { background: var(--surface2); }
  .ledger-modal-inner .ledger-cell-amount {
    font-weight: 900; font-size: .92rem; background: rgba(0,0,0,.06);
  }
  .ledger-modal-inner .ledger-cell-balance {
    font-weight: 900; font-size: .92rem; background: var(--surface3);
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  }
  .ledger-modal-inner .ledger-row-num {
    color: var(--text-muted); font-weight: 700; background: var(--surface2); width: 44px;
  }
  .ledger-modal-inner .ledger-client-cell,
  .ledger-modal-inner .ledger-note-cell,
  .ledger-modal-inner .ledger-user-cell {
    text-align: right;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ledger-modal-inner .ledger-client-cell {
    color: var(--text);
    font-weight: 800;
  }
  .ledger-modal-inner .ledger-note-cell {
    font-size: .8rem;
  }
  .ledger-modal-inner .ledger-user-cell {
    direction: ltr;
    text-align: left;
    font-size: .78rem;
  }
  .ledger-modal-inner .modal-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding: 12px 18px;
    background: var(--surface);
  }

  .fc-full-ledger-modal {
    width: calc(100vw - 28px) !important;
    height: calc(100vh - 28px) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
  }
  .fc-full-ledger-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }
  .fc-full-ledger-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .fc-full-ledger-table-wrap table {
    min-width: 980px;
  }
  .fc-full-ledger-modal .modal-footer {
    flex-shrink: 0;
    margin-top: 10px !important;
    padding-top: 10px;
  }
  @media (max-width: 800px) {
    .ledger-modal-inner,
    .fc-full-ledger-modal {
      width: 100vw !important;
      height: 100dvh !important;
      border-radius: 0 !important;
    }
    .ledger-modal-head {
      padding: 14px 16px;
      gap: 10px;
      flex-wrap: wrap;
    }
    .ledger-tabs,
    .ledger-date-filters,
    .ledger-strip {
      padding-inline: 12px;
    }
    .ledger-date-filters {
      align-items: stretch;
      gap: 8px;
    }
    .ledger-date-presets {
      width: 100%;
    }
    .ledger-date-btn {
      flex: 1 1 auto;
    }
    .ledger-custom-dates {
      width: 100%;
      margin-inline-start: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
    }
    .ledger-custom-dates input {
      width: 100%;
      min-width: 0;
    }
    .ledger-date-clear {
      margin-inline-start: 0;
    }
    .fc-full-ledger-modal {
      padding: 12px !important;
    }
  }

  /* running balance cell */
  .rb-pos { color: var(--accent-green); font-weight: 700; }
  .rb-neg { color: var(--accent-red);   font-weight: 700; }

  /* ── Currency nav buttons ── */
  .nav-usd:hover { color:var(--usd) !important; background:rgba(62,207,142,.1) !important; border-color:rgba(62,207,142,.2) !important; }
  .nav-usd.active { color:var(--usd) !important; background:rgba(62,207,142,.12) !important; border-color:rgba(62,207,142,.3) !important; box-shadow: 0 1px 6px rgba(62,207,142,.15) !important; }
  .nav-eur:hover { color:var(--eur) !important; background:rgba(76,142,245,.1) !important; border-color:rgba(76,142,245,.2) !important; }
  .nav-eur.active { color:var(--eur) !important; background:rgba(76,142,245,.12) !important; border-color:rgba(76,142,245,.3) !important; box-shadow: 0 1px 6px rgba(76,142,245,.15) !important; }
  .nav-try:hover { color:var(--try) !important; background:rgba(245,200,66,.1) !important; border-color:rgba(245,200,66,.2) !important; }
  .nav-try.active { color:var(--try) !important; background:rgba(245,200,66,.12) !important; border-color:rgba(245,200,66,.3) !important; box-shadow: 0 1px 6px rgba(245,200,66,.15) !important; }

  /* ── Currency page ── */
  .cur-page-header {
    border-radius:var(--radius); padding:24px 28px; margin-bottom:4px;
    border:1px solid var(--border); position:relative; overflow:hidden;
  }
  .usd-header { background:linear-gradient(135deg, rgba(62,207,142,.08) 0%, var(--surface) 60%); border-color:rgba(62,207,142,.2); }
  .eur-header { background:linear-gradient(135deg, rgba(76,142,245,.08) 0%, var(--surface) 60%); border-color:rgba(76,142,245,.2); }
  .try-header { background:linear-gradient(135deg, rgba(245,200,66,.08) 0%, var(--surface) 60%); border-color:rgba(245,200,66,.2); }

  .cur-page-header::before {
    content:''; position:absolute; top:-40px; left:-40px;
    width:200px; height:200px; border-radius:50%;
    opacity:.04; pointer-events:none;
  }
  .usd-header::before { background:var(--usd); }
  .eur-header::before { background:var(--eur); }
  .try-header::before { background:var(--try); }

  .cur-page-hero {
    display:flex; align-items:center; gap:18px; margin-bottom:20px;
  }
  .cur-flag { font-size:2.8rem; line-height:1; }
  .cur-page-title { font-size:1.4rem; font-weight:900; }
  .cur-page-sub   { font-size:.85rem; color:var(--text-dim); margin-top:2px; }
  .cur-page-balance {
    margin-right:auto; font-size:2.4rem; font-weight:900; line-height:1;
  }
  .cur-page-balance.usd { color:var(--usd); }
  .cur-page-balance.eur { color:var(--eur); }
  .cur-page-balance.try { color:var(--try); }

  .cur-stats-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  }
  @media(max-width:700px){ .cur-stats-row { grid-template-columns:repeat(2,1fr); } }
  .cur-stat-box {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:12px 14px;
  }
  .cur-stat-box.in  { border-color:rgba(62,207,142,.2); }
  .cur-stat-box.out { border-color:rgba(245,86,74,.2); }
  .csb-label { font-size:.75rem; color:var(--text-muted); margin-bottom:4px; }
  .csb-val   { font-size:1.2rem; font-weight:800; }
  .csb-val.green { color:var(--accent-green); }
  .csb-val.red   { color:var(--accent-red); }
  .csb-val.gold  { color:var(--accent-gold); }

  .btn-blue  { background:var(--accent-blue);  color:#fff; }
  .btn-blue:hover  { background:#3a7de0; transform:translateY(-1px); }

  /* ── Notifications ── */
  .notif-bell-wrap { position:relative; }
  .notif-badge {
    position:absolute; top:-4px; left:-4px;
    background:var(--accent-red); color:#fff;
    font-size:.65rem; font-weight:900;
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--surface);
    animation: pulse-badge 2s infinite;
  }
  @keyframes pulse-badge {
    0%,100%{box-shadow:0 0 0 0 rgba(245,86,74,.5)}
    50%{box-shadow:0 0 0 6px rgba(245,86,74,0)}
  }
  .notif-badge.hidden { display:none; }

  .notif-list { display:flex; flex-direction:column; gap:10px; }
  .notif-item {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px 16px;
    display:flex; align-items:flex-start; gap:14px;
    position:relative; overflow:hidden;
    animation: notifSlide .3s ease;
    transition:.2s;
  }
  @keyframes notifSlide { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
  .notif-item:hover { border-color:var(--text-muted); }
  .notif-item.unread::before {
    content:''; position:absolute; top:0; right:0;
    width:3px; height:100%;
  }
  .notif-item.unread.edit::before { background:var(--accent-blue); }
  .notif-item.unread.delete::before { background:var(--accent-red); }
  .notif-item.unread.add::before { background:var(--accent-green); }
  .notif-icon {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  }
  .notif-icon.edit   { background:rgba(76,142,245,.12); }
  .notif-icon.delete { background:rgba(245,86,74,.12); }
  .notif-icon.add    { background:rgba(62,207,142,.12); }
  .notif-body { flex:1; min-width:0; }
  .notif-title { font-weight:700; font-size:.92rem; margin-bottom:3px; display:flex; align-items:center; gap:8px; }
  .notif-title .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .notif-title .dot.edit   { background:var(--accent-blue); }
  .notif-title .dot.delete { background:var(--accent-red); }
  .notif-title .dot.add    { background:var(--accent-green); }
  .notif-detail { font-size:.82rem; color:var(--text-dim); line-height:1.5; }
  .notif-detail .highlight { color:var(--text); font-weight:600; }
  .notif-meta { font-size:.75rem; color:var(--text-muted); margin-top:5px; display:flex; align-items:center; gap:10px; }
  .notif-time-ago { color:var(--accent-gold); }
  .notif-close {
    width:24px; height:24px; border-radius:6px; border:none;
    background:transparent; color:var(--text-muted);
    cursor:pointer; font-size:.9rem; display:flex;
    align-items:center; justify-content:center; transition:.15s; flex-shrink:0;
  }
  .notif-close:hover { background:var(--surface3); color:var(--accent-red); }

  .notif-filter-bar {
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center;
  }
  .notif-filter-stack {
    display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
  }
  .notif-filter-stack .notif-filter-bar {
    margin-bottom:0;
  }
  .notif-filter-label {
    min-width:56px; color:var(--text-muted); font-size:.76rem; font-weight:800;
  }
  .notif-filter-btn {
    padding:6px 16px; border-radius:20px; border:1px solid var(--border);
    background:var(--surface3); color:var(--text-dim);
    font-family:'Tajawal',sans-serif; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:.2s; display:flex; align-items:center; gap:5px;
  }
  .notif-filter-btn:hover, .notif-filter-btn.active { background:var(--surface2); color:var(--text); border-color:var(--text-muted); }
  .notif-filter-btn.edit.active   { border-color:var(--accent-blue); color:var(--accent-blue); }
  .notif-filter-btn.delete.active { border-color:var(--accent-red);  color:var(--accent-red); }
  .notif-filter-btn.add.active    { border-color:var(--accent-green);color:var(--accent-green); }
  .notif-filter-btn.range.active  { border-color:var(--accent-gold); color:var(--accent-gold); }
  .notif-filter-btn.exchange.active { border-color:var(--accent-purple); color:var(--accent-purple); }
  .notif-filter-btn.transfer.active { border-color:var(--accent-green); color:var(--accent-green); }

  .notif-top-bar {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; flex-wrap:wrap; gap:10px;
  }
  .unread-count-chip {
    background:rgba(245,86,74,.12); color:var(--accent-red);
    border:1px solid rgba(245,86,74,.2);
    padding:3px 12px; border-radius:20px; font-size:.8rem; font-weight:700;
  }
  .notif-empty {
    text-align:center; padding:60px 20px; color:var(--text-muted);
  }
  .notif-empty .big { font-size:2.5rem; margin-bottom:8px; }

  .diff-old { color:var(--accent-red); text-decoration:line-through; opacity:.7; }
  .diff-new { color:var(--accent-green); }
  .diff-arrow { color:var(--text-muted); margin:0 4px; }

  /* ── Rates button ── */
  @keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* ══ RATES MODAL ══ */
  /* ══ RATES MODAL ══ */
  .rates-overlay {
    position:fixed; inset:0; z-index:1100;
    background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:12px; animation:fadeIn .2s ease;
  }
  .rates-overlay.hidden { display:none; }
  .rates-panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; width:min(900px,100%);
    max-height:92vh; display:flex; flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(245,200,66,.08);
    animation:slideUp .22s ease; overflow:hidden;
  }
  @keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

  /* header */
  .rates-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px 13px; border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,var(--surface2),var(--surface3));
    flex-shrink:0; flex-wrap:wrap; gap:10px;
  }
  .rates-header-left { display:flex; flex-direction:column; gap:2px; }
  .rates-title { font-size:1.05rem; font-weight:900; color:var(--accent-gold); }
  .rates-update-time { font-size:.7rem; color:var(--text-muted); }
  .rates-header-right { display:flex; align-items:center; gap:8px; }
  .rates-close {
    width:30px; height:30px; border-radius:50%;
    background:var(--surface3); border:1px solid var(--border);
    color:var(--text-dim); cursor:pointer; font-size:.95rem;
    display:flex; align-items:center; justify-content:center; transition:.15s;
  }
  .rates-close:hover{background:rgba(245,86,74,.15);color:var(--accent-red);border-color:var(--accent-red);}

  /* controls bar */
  .rates-controls-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 22px; border-bottom:1px solid var(--border);
    background:var(--surface2); flex-wrap:wrap; gap:8px; flex-shrink:0;
  }
  .rates-base-wrap { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .rates-base-label { font-size:.72rem; color:var(--text-muted); font-weight:700; white-space:nowrap; }
  .rates-base-btns { display:flex; gap:4px; flex-wrap:wrap; }
  .rates-base-btn {
    padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:700;
    border:1px solid var(--border); background:var(--surface3); color:var(--text-dim);
    cursor:pointer; transition:.15s; font-family:'Tajawal',sans-serif;
  }
  .rates-base-btn:hover{background:var(--surface);color:var(--text);}
  .rates-base-btn.active{background:rgba(245,200,66,.15);border-color:var(--accent-gold);color:var(--accent-gold);}
  .rates-right-controls { display:flex; align-items:center; gap:8px; }
  .rates-search-wrap { position:relative; }
  .rates-search {
    padding:5px 12px 5px 30px; border-radius:20px;
    border:1px solid var(--border); background:var(--surface3);
    color:var(--text); font-family:'Tajawal',sans-serif; font-size:.8rem;
    width:160px; transition:border-color .15s;
  }
  .rates-search:focus{outline:none;border-color:var(--accent-gold);}
  .rates-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--text-muted);pointer-events:none;}

  /* view toggle */
  .rates-view-toggle { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .rates-view-btn {
    padding:4px 10px; font-size:.72rem; font-weight:700; cursor:pointer;
    border:none; background:var(--surface3); color:var(--text-dim);
    font-family:'Tajawal',sans-serif; transition:.15s;
  }
  .rates-view-btn.active{background:var(--accent-gold);color:#1a1500;}

  /* body */
  .rates-body { overflow-y:auto; flex:1; padding:18px 22px 8px; }

  /* section label */
  .rates-section-title {
    font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-muted); margin:0 0 12px;
    display:flex; align-items:center; gap:8px;
  }
  .rates-section-title::after{content:'';flex:1;height:1px;background:var(--border);}

  /* ── VIEW: MARKET (read-only cards) ── */
  .rates-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:9px; margin-bottom:22px;
  }
  .rate-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:11px; padding:11px 13px;
    display:flex; flex-direction:column; gap:3px;
    transition:.18s; position:relative; overflow:hidden;
  }
  .rate-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--border);transition:.18s;}
  .rate-card:hover{border-color:var(--accent-gold);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.22);}
  .rate-card:hover::before{background:var(--accent-gold);}
  .rate-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
  .rate-card-flag{font-size:1.3rem;line-height:1;}
  .rate-card-code{font-size:.78rem;font-weight:900;color:var(--text);letter-spacing:.03em;}
  .rate-card-name{font-size:.65rem;color:var(--text-muted);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rate-card-val{font-size:1.05rem;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;}
  .rate-card-change{font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:7px;display:inline-block;margin-top:4px;align-self:flex-start;}
  .rate-card-change.up  {background:rgba(62,207,142,.12);color:#3ecf8e;}
  .rate-card-change.down{background:rgba(245,86,74,.12); color:var(--accent-red);}
  .rate-card-change.flat{background:rgba(255,255,255,.05);color:var(--text-muted);}
  .rate-card.highlight{border-color:rgba(245,200,66,.3);background:rgba(245,200,66,.03);}
  .rate-card.highlight::before{background:rgba(245,200,66,.55);}
  .rate-card.hidden-card{display:none;}

  /* ── VIEW: BUY/SELL table ── */
  .rates-bs-table-wrap { margin-bottom:22px; }
  .rates-bs-table {
    width:100%; border-collapse:collapse;
    font-size:.82rem;
  }
  .rates-bs-table thead th {
    padding:8px 12px; font-size:.68rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
    background:var(--surface2); border-bottom:1px solid var(--border);
    text-align:right;
  }
  .rates-bs-table thead th:first-child { border-radius:8px 0 0 0; }
  .rates-bs-table thead th:last-child  { border-radius:0 8px 0 0; text-align:left; }
  .rates-bs-table tbody tr {
    border-bottom:1px solid var(--border); transition:.12s;
  }
  .rates-bs-table tbody tr:hover { background:var(--surface2); }
  .rates-bs-table tbody tr.hidden-row { display:none; }
  .rates-bs-table td { padding:9px 12px; vertical-align:middle; }
  .rbs-cur-cell { display:flex; align-items:center; gap:9px; }
  .rbs-flag { font-size:1.25rem; flex-shrink:0; }
  .rbs-code { font-weight:900; font-size:.88rem; }
  .rbs-name { font-size:.68rem; color:var(--text-muted); }
  .rbs-market-val { font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
  .rbs-chg { font-size:.68rem; }

  /* editable buy/sell cells */
  .rbs-rate-cell { display:flex; align-items:center; gap:6px; min-width:110px; }
  .rbs-rate-input {
    width:90px; padding:5px 8px; border-radius:7px;
    border:1px solid var(--border); background:var(--surface3);
    color:var(--text); font-family:'Tajawal',sans-serif;
    font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums;
    text-align:center; transition:.15s;
  }
  .rbs-rate-input:focus{outline:none;border-color:var(--accent-gold);}
  .rbs-rate-input.buy-field:focus{border-color:var(--accent-green);}
  .rbs-rate-input.sell-field:focus{border-color:var(--accent-red);}
  .rbs-rate-input.changed{background:rgba(245,200,66,.08);border-color:rgba(245,200,66,.4);}
  .rbs-spread {
    font-size:.68rem; color:var(--text-muted); white-space:nowrap;
    min-width:54px; text-align:center;
  }
  .rbs-spread.has-spread{color:var(--accent-gold);font-weight:700;}
  .rbs-save-btn {
    padding:4px 10px; border-radius:7px; font-size:.72rem; font-weight:700;
    border:1px solid var(--border); background:var(--surface3); color:var(--text-dim);
    cursor:pointer; transition:.15s; font-family:'Tajawal',sans-serif; white-space:nowrap;
  }
  .rbs-save-btn:hover{background:rgba(245,200,66,.15);border-color:var(--accent-gold);color:var(--accent-gold);}
  .rbs-save-btn.saved{background:rgba(62,207,142,.15);border-color:var(--accent-green);color:var(--accent-green);}

  /* col headers color hints */
  .th-buy  { color:var(--accent-green) !important; }
  .th-sell { color:var(--accent-red)   !important; }

  /* chart */
  .rates-chart-section{border-top:1px solid var(--border);padding-top:18px;margin-top:4px;}
  .rates-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
  .rates-chart-title{font-size:.82rem;font-weight:800;color:var(--text-dim);}
  .rates-chart-tabs{display:flex;gap:4px;}
  .rates-chart-tab{padding:3px 10px;border-radius:7px;font-size:.72rem;font-weight:700;border:1px solid var(--border);background:var(--surface3);color:var(--text-dim);cursor:pointer;font-family:'Tajawal',sans-serif;transition:.15s;}
  .rates-chart-tab.active{background:rgba(245,200,66,.15);border-color:var(--accent-gold);color:var(--accent-gold);}

  /* loading / error */
  .rates-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 24px;color:var(--text-dim);font-size:.9rem;}
  .rates-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent-gold);animation:spin .8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .rates-error{padding:48px 24px;text-align:center;color:var(--accent-red);font-size:.9rem;line-height:1.8;}

  /* footer */
  .rates-footer{
    padding:9px 22px;border-top:1px solid var(--border);
    background:var(--surface2);font-size:.7rem;color:var(--text-muted);
    flex-shrink:0;border-radius:0 0 20px 20px;
    display:flex;align-items:center;justify-content:center;gap:10px;
  }
  .rates-footer-dot{width:3px;height:3px;border-radius:50%;background:var(--border);}

  @media(max-width:560px){
    .rates-panel{border-radius:14px;}
    .rates-body{padding:12px 14px 6px;}
    .rates-controls-bar{padding:9px 14px;}
    .rates-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
    .rbs-rate-input{width:72px;}
    .rates-search{width:120px;}
  }

  
    /* ══ HAREMALTIN PANEL – Enhanced ══ */
  .harem-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  /* top gradient bar */
  .harem-panel::before {
    content: '';
    position: absolute; top: 0; right: 0; left: 0; z-index: 1;
    height: 3px;
    background: linear-gradient(90deg, #8b0000, #c9121f 30%, #e5a500 50%, #c9121f 70%, #8b0000);
    animation: haremBarShimmer 3s linear infinite;
    background-size: 200% 100%;
  }
  @keyframes haremBarShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }
  /* subtle gold shimmer background */
  .harem-panel::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,18,31,.04) 0%, transparent 70%);
  }

  .harem-inner { position: relative; z-index: 1; padding: 16px 20px 18px; }

  .harem-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
  }
  .harem-title-row {
    display: flex; align-items: center; gap: 10px;
  }
  .harem-logo-badge {
    background: linear-gradient(135deg, #c9121f 0%, #8b0000 100%);
    border-radius: 9px; padding: 6px 14px;
    font-size: .85rem; font-weight: 900; color: #fff;
    letter-spacing: .05em;
    box-shadow: 0 4px 14px rgba(201,18,31,.4), inset 0 1px 0 rgba(255,255,255,.15);
    display: flex; align-items: center; gap: 6px;
  }
  .harem-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    animation: haremDotPulse 1.5s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes haremDotPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
  }
  .harem-source-tag {
    font-size: .7rem; color: var(--text-muted);
    background: var(--surface3); padding: 3px 9px;
    border-radius: 20px; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 4px;
  }
  .harem-updated {
    font-size: .73rem; color: var(--text-muted);
  }
  .harem-right-controls {
    display: flex; align-items: center; gap: 8px;
  }

  /* ── Section labels (Currencies / Gold) ── */
  .harem-section-label {
    font-size: .7rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
    margin: 14px 0 8px; display: flex; align-items: center; gap: 6px;
  }
  .harem-section-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
  }
  .harem-section-label.gold { color: #e5a500; }
  .harem-section-label.gold::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: #e5a500; display: inline-block; }
  .harem-section-label.forex { color: var(--accent-blue); }
  .harem-section-label.forex::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-blue); display: inline-block; }

  /* ── Cards ── */
  .harem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .harem-grid.forex-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-bottom: 4px;
  }
  .harem-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative; overflow: hidden;
    cursor: default;
  }
  .harem-card::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0;
    height: 2px; opacity: 0; transition: opacity .2s;
  }
  .harem-card.gold-card::before  { background: linear-gradient(90deg, #e5a500, #f5c842); }
  .harem-card.forex-card::before { background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); }
  .harem-card:hover { transform: translateY(-3px); }
  .harem-card:hover::before { opacity: 1; }
  .harem-card.gold-card:hover  { border-color: #e5a500; box-shadow: 0 6px 22px rgba(229,165,0,.18); }
  .harem-card.forex-card:hover { border-color: var(--accent-blue); box-shadow: 0 6px 22px rgba(76,142,245,.15); }

  .harem-card-top {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 8px;
  }
  .harem-card-icon { font-size: 1.35rem; }
  .harem-card-name {
    font-size: .72rem; color: var(--text-dim);
    font-weight: 700; letter-spacing: .03em;
  }
  .harem-prices {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px; margin-top: 4px;
  }
  .harem-price-box {
    background: var(--surface3);
    border-radius: 6px; padding: 5px 4px;
    border: 1px solid var(--border);
  }
  .harem-price-lbl {
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; margin-bottom: 2px;
  }
  .harem-price-lbl.buy  { color: var(--accent-green); }
  .harem-price-lbl.sell { color: var(--accent-red); }
  .harem-price-val {
    font-size: .88rem; font-weight: 900; line-height: 1.1;
  }
  .harem-price-val.buy  { color: var(--accent-green); }
  .harem-price-val.sell { color: var(--accent-red); }
  .harem-price-sub {
    font-size: .58rem; color: var(--text-muted); margin-top: 1px;
  }

  /* spread badge */
  .harem-spread {
    font-size: .6rem; color: var(--text-muted);
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .harem-spread-val { color: var(--accent-gold); font-weight: 700; }

  /* change badge */
  .harem-chg {
    font-size: .65rem; font-weight: 800;
    padding: 1px 6px; border-radius: 10px;
    display: inline-block; margin-top: 4px;
  }
  .harem-chg.up   { background: rgba(62,207,142,.12); color: var(--accent-green); }
  .harem-chg.down { background: rgba(245,86,74,.12);  color: var(--accent-red);   }
  .harem-chg.flat { background: var(--surface3);       color: var(--text-muted);   }

  /* Loading / Error */
  .harem-loading {
    text-align: center; padding: 28px;
    color: var(--text-muted); font-size: .85rem;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .harem-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: #c9121f;
    border-radius: 50%;
    animation: haremSpin .7s linear infinite;
    flex-shrink: 0;
  }
  @keyframes haremSpin { to { transform: rotate(360deg); } }
  .harem-error {
    text-align: center; padding: 20px;
    color: var(--accent-red); font-size: .85rem; line-height: 1.7;
  }

  /* price flash animation */
  @keyframes haremFlash {
    0%   { background: rgba(245,200,66,.15); }
    100% { background: transparent; }
  }
  .harem-price-flash { animation: haremFlash .8s ease forwards; }

  /* Effect toggles */
  .fx-row {
    border-top:1px solid var(--border); padding:8px 10px;
    display:flex; flex-direction:column; gap:6px;
  }
  .fx-btn {
    width:36px; height:30px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface3); color:var(--text-dim);
    cursor:pointer; font-size:.72rem; font-weight:700;
    transition:.2s; display:flex; align-items:center; justify-content:center;
    gap:3px; white-space:nowrap; padding:0 6px;
  }
  .fx-btn:hover { background:var(--border); color:var(--text); }
  .fx-btn.on { background:var(--accent-gold); color:#1a1500; border-color:transparent; }

  /* ── Page transition overlay ── */
  .page-transition {
    position:fixed; inset:0; z-index:999; pointer-events:none;
    background: var(--accent-gold);
    opacity:0; transition: opacity .18s ease;
  }
  .page-transition.flash { opacity:.06; }

  /* ── Ripple ── */
  .ripple-container { position:relative; overflow:hidden; }
  .ripple {
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,.15); transform:scale(0);
    animation: rippleAnim .5s linear; pointer-events:none;
  }
  @keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

  /* ── Card hover glow ── */
  .currency-card {
    transition: transform .2s, box-shadow .3s, border-color .3s !important;
  }
  .currency-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--glow-primary), var(--shadow) !important;
    border-color: var(--accent-gold) !important;
  }

  /* ── Topbar glassmorphism ── */
  .topbar {
    backdrop-filter: blur(12px);
    background: rgba(var(--surface-rgb, 24,28,42), 0.85) !important;
  }
  [data-theme="light"] .topbar { background: rgba(255,255,255,0.9) !important; }

  /* ── Logo Sidebar ── */
  #app { display:flex; flex-direction:column; min-height:100vh; }

  /* ══ SIDEBAR ══ */
  .logo-sidebar {
    position: fixed; top: 56px; right: 0;
    width: 200px; height: calc(100vh - 56px);
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 90;
    display: flex; flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  /* خط ضوء على اليسار */
  .logo-sidebar::before {
    content:''; position:absolute; top:0; bottom:0; right:0; width:2px;
    background: linear-gradient(180deg,
      transparent 0%, var(--accent-gold) 30%,
      var(--accent-green) 60%, transparent 100%);
    opacity: .35;
  }

  .logo-sidebar-inner {
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    padding: 18px 10px 16px;
    flex: 1;
  }

  /* الشعار */
  .logo-sidebar-img {
    width: 68px; height: 68px; object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 2px 12px rgba(245,200,66,.45));
    animation: lsbLogoPulse 5s ease-in-out infinite;
  }
  @keyframes lsbLogoPulse {
    0%,100% { filter: drop-shadow(0 2px 8px rgba(245,200,66,.3)); }
    50%      { filter: drop-shadow(0 2px 18px rgba(245,200,66,.7)); }
  }

  /* الاسم */
  .logo-sidebar-name {
    margin-top: 10px;
    font-size: .62rem; font-weight: 900;
    color: var(--accent-gold); line-height: 1.4;
    text-align: center; letter-spacing: .02em;
  }
  .logo-sidebar-sub {
    font-size: .56rem; color: var(--text-muted);
    margin-top: 2px; text-align: center;
    letter-spacing: .04em; text-transform: uppercase;
  }

  /* فاصل */
  .logo-sidebar-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 12px 0;
  }

  /* بطاقات العملات */
  .logo-sidebar-currencies {
    display: flex; flex-direction: column;
    gap: 6px; width: 100%;
  }
  .lsb-cur {
    border-radius: 8px; border: 1px solid;
    padding: 7px 8px; cursor: pointer;
    transition: .15s;
  }
  .lsb-cur:hover { transform: translateX(-2px); }
  .lsb-cur-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 3px;
  }
  .lsb-cur-sym { font-size: .8rem; font-weight: 900; }
  .lsb-cur-code { font-size: .58rem; font-weight: 800; letter-spacing: .05em; opacity: .75; }
  .lsb-cur-bal {
    font-size: .72rem; font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: left; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .lsb-cur-sub {
    display: flex; justify-content: space-between;
    margin-top: 3px;
  }
  .lsb-sub-val {
    font-size: .52rem; font-weight: 700;
    opacity: .7; font-variant-numeric: tabular-nums;
  }
  .lsb-cur.usd { background:rgba(62,207,142,.06);  border-color:rgba(62,207,142,.22); color:#3ecf8e; }
  .lsb-cur.eur { background:rgba(76,142,245,.06);  border-color:rgba(76,142,245,.22); color:#4c8ef5; }
  .lsb-cur.try { background:rgba(245,200,66,.06);  border-color:rgba(245,200,66,.22); color:#f5c842; }

  /* push main content */
  main.with-sidebar { padding-left: 12px; padding-right: 216px; }
  @media (max-width: 800px) {
    .logo-sidebar { display: none; }
    main.with-sidebar { padding-right: 0; }
  }

  /* ── Number counter animation ── */
  .card-amount {
    transition: color .4s;
  }
  .count-flash {
    animation: countPop .4s ease;
  }
  @keyframes countPop {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.12); }
    100% { transform:scale(1); }
  }

  /* ── Section slide-in ── */
  .section.active {
    animation: sectionIn .3s ease;
  }
  @keyframes sectionIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:none; }
  }

  /* ── Row highlight on add ── */
  @keyframes rowHighlight {
    0%   { background: rgba(62,207,142,.18); }
    100% { background: transparent; }
  }
  .row-new { animation: rowHighlight 1.6s ease forwards; }

  /* ── Login ── */
  #login-screen {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #08090d;
    transition: background var(--transition-speed);
  }

  /* Light theme login screen */
  [data-theme="light"] #login-screen {
    background: #e8f0fe;
  }
  [data-theme="light"] .login-split-visual {
    background: linear-gradient(160deg,
      rgba(219,234,254,.95) 0%,
      rgba(255,255,255,.85) 50%,
      rgba(219,234,254,.95) 100%) !important;
    border-left: 1px solid rgba(217,119,6,.18) !important;
  }
  [data-theme="light"] .login-split-visual::before {
    opacity: 0.04 !important;
  }
  [data-theme="light"] .login-visual-title {
    text-shadow: 0 2px 20px rgba(180,83,9,.25) !important;
  }
  [data-theme="light"] .login-visual-sub {
    color: rgba(180,83,9,.55) !important;
  }
  [data-theme="light"] .login-split-form {
    background: transparent !important;
  }
  [data-theme="light"] .login-split-form .input-group input {
    background: rgba(255,255,255,.75) !important;
    border-color: rgba(180,83,9,.2) !important;
    color: #1e293b !important;
  }
  [data-theme="light"] .login-split-form .input-group input:focus {
    background: rgba(255,255,255,1) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(217,119,6,.12) !important;
  }
  [data-theme="light"] .login-split-form .input-group label {
    color: #475569 !important;
  }
  [data-theme="light"] .login-form-divider {
    background: linear-gradient(90deg, transparent, rgba(217,119,6,.3), transparent) !important;
  }
  [data-theme="light"] .login-hint {
    color: #94a3b8 !important;
  }
  [data-theme="light"] #login-screen::after {
    background:
      radial-gradient(ellipse 55% 60% at 75% 50%, rgba(217,119,6,.08) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 20% 50%, rgba(5,150,105,.06) 0%, transparent 55%),
      radial-gradient(ellipse 70% 40% at 50% 90%, rgba(59,130,246,.05) 0%, transparent 55%) !important;
  }
  [data-theme="light"] .coin {
    opacity: 0.25 !important;
  }
  [data-theme="light"] .lc-badge.usd { background:rgba(5,150,105,.12) !important; border-color:rgba(5,150,105,.4) !important; }
  [data-theme="light"] .lc-badge.eur { background:rgba(59,130,246,.12) !important; border-color:rgba(59,130,246,.4) !important; }
  [data-theme="light"] .lc-badge.try { background:rgba(217,119,6,.12) !important; border-color:rgba(217,119,6,.4) !important; }

  /* subtle full-page glow */
  #login-screen::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 55% 60% at 75% 50%, rgba(245,200,66,.07) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 20% 50%, rgba(62,207,142,.05) 0%, transparent 55%),
      radial-gradient(ellipse 70% 40% at 50% 90%, rgba(76,142,245,.04) 0%, transparent 55%);
    animation: bgPulse 8s ease-in-out infinite alternate;
  }
  @keyframes bgPulse { from{opacity:.7} to{opacity:1} }

  /* floating coins */
  .login-coins { position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
  .coin {
    position: absolute; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; animation: floatCoin linear infinite; opacity: 0;
  }
  @keyframes floatCoin {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
    6%   { opacity: .65; }
    88%  { opacity: .55; }
    100% { transform: translateY(-15vh) rotate(540deg); opacity: 0; }
  }

  /* ── full-screen split ── */
  .login-split {
    display: flex;
    width: 100%; min-height: 100vh;
    position: relative; z-index: 2;
  }

  /* RIGHT: visual half */
  .login-split-visual {
    flex: 1.1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 48px;
    position: relative; overflow: hidden;
    /* soft separator line */
    border-left: 1px solid rgba(245,200,66,.1);
    background: linear-gradient(160deg,
      rgba(8,6,2,.7) 0%,
      rgba(18,13,2,.6) 50%,
      rgba(8,6,2,.7) 100%);
  }
  /* logo watermark behind */
  .login-split-visual::before {
    content: '';
    position: absolute; inset: -5%; z-index: 0;
    background-image: url("./brand-logo.png?v=20260803-startup-perf1");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    opacity: .055;
    filter: blur(3px);
  }
  /* glow ring */
  .login-split-visual::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,200,66,.12) 0%, transparent 70%);
    animation: ringPulse 3.5s ease-in-out infinite;
    z-index: 0;
  }
  @keyframes ringPulse {
    0%,100% { transform:scale(.9); opacity:.6; }
    50%      { transform:scale(1.1); opacity:1; }
  }

  .login-logo-img {
    width: 170px; height: auto;
    position: relative; z-index: 1;
    filter: drop-shadow(0 0 28px rgba(245,200,66,.6)) drop-shadow(0 0 60px rgba(245,200,66,.25));
    animation: logoPulse 3.5s ease-in-out infinite;
  }
  @keyframes logoPulse {
    0%,100% { filter: drop-shadow(0 0 20px rgba(245,200,66,.5)) drop-shadow(0 0 50px rgba(245,200,66,.2)); }
    50%      { filter: drop-shadow(0 0 42px rgba(245,200,66,.85)) drop-shadow(0 0 84px rgba(245,200,66,.35)); }
  }
  .login-visual-title {
    margin-top: 28px; font-size: 1.6rem; font-weight: 900;
    color: var(--accent-gold); text-align: center;
    position: relative; z-index: 1;
    text-shadow: 0 2px 20px rgba(245,200,66,.4); letter-spacing:.03em;
  }
  .login-visual-sub {
    margin-top: 10px; font-size: .9rem; color: rgba(245,200,66,.5);
    text-align: center; position: relative; z-index: 1; line-height: 1.7;
  }
  .login-currencies {
    display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap;
    justify-content: center; position: relative; z-index: 1;
  }
  .lc-badge {
    padding: 8px 18px; border-radius: 12px;
    font-size: .88rem; font-weight: 800; border: 1px solid;
    animation: badgePop 2.2s ease-in-out infinite;
    backdrop-filter: blur(4px);
  }
  .lc-badge.usd { background:rgba(62,207,142,.1); border-color:rgba(62,207,142,.35); color:#3ecf8e; animation-delay:0s; }
  .lc-badge.eur { background:rgba(76,142,245,.1); border-color:rgba(76,142,245,.35); color:#4c8ef5; animation-delay:.55s; }
  .lc-badge.try { background:rgba(245,200,66,.1); border-color:rgba(245,200,66,.35); color:#f5c842; animation-delay:1.1s; }
  @keyframes badgePop {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-5px); }
  }

  /* LEFT: form half — NO box, NO border, transparent background */
  .login-split-form {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 60px 56px;
    text-align: right;
    background: transparent;
    min-width: 280px;
  }

  /* logo + name row at top of form */
  .login-form-logo {
    display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
  }
  .login-form-logo img {
    width: 48px; height: auto;
    filter: drop-shadow(0 0 10px rgba(245,200,66,.55));
  }
  .login-form-name {
    font-size: 1.25rem; font-weight: 900; color: var(--accent-gold);
    text-shadow: 0 0 14px rgba(245,200,66,.3);
  }
  .login-form-sub {
    font-size: .78rem; color: var(--text-dim); margin-top: 2px;
  }
  .login-form-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,200,66,.25), transparent);
    margin-bottom: 28px;
  }
  .login-form-title {
    font-size: 1.1rem; font-weight: 800; color: var(--text);
    margin-bottom: 22px;
  }
  /* input fields on transparent bg get a subtle glass style */
  .login-split-form .input-group input {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  .login-split-form .input-group input:focus {
    background: rgba(245,200,66,.04) !important;
    border-color: var(--accent-gold) !important;
  }
  .login-hint {
    margin-top: 14px; font-size: .78rem;
    color: var(--text-muted); text-align: center;
  }

  @media (max-width: 680px) {
    .login-split { flex-direction: column; }
    .login-split-visual { padding: 40px 28px; border-left: none; border-bottom: 1px solid rgba(245,200,66,.1); }
    .login-logo-img { width: 110px; }
    .login-split-form { padding: 40px 28px; }
  }


  .input-group { margin-bottom:16px; text-align:right; }
  .input-group label { display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:6px; }
  .input-group input, .input-group select, .input-group textarea {
    width:100%; padding:11px 14px;
    background: var(--surface3); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text);
    font-family:'Tajawal',sans-serif; font-size:.95rem;
    transition:.2s;
  }
  .input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    outline:none; border-color:var(--accent-gold); background:var(--surface2);
  }
  .btn {
    padding:11px 24px; border:none; border-radius:var(--radius-sm);
    font-family:'Tajawal',sans-serif; font-size:1rem; font-weight:700;
    cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:6px;
  }
  .btn-gold { background:var(--accent-gold); color:#1a1500; }
  .btn-gold:hover { background:var(--accent-gold-dim); transform:translateY(-1px); }
  .btn-blue { background:var(--accent-blue); color:#fff; }
  .btn-blue:hover { background:#3a7de0; }
  .btn-green { background:var(--accent-green); color:#003322; }
  .btn-green:hover { background:#32b87a; }
  .btn-red { background:var(--accent-red); color:#fff; }
  .btn-red:hover { background:#e0443a; }
  .btn-ghost { background:var(--surface3); color:var(--text-dim); border:1px solid var(--border); }
  .btn-ghost:hover { background:var(--border); color:var(--text); }
  .btn-full { width:100%; justify-content:center; }
  .error-msg { color:var(--accent-red); font-size:.85rem; margin-top:8px; }

  /* ── App shell ── */
  #app { display:none; min-height:100vh; flex-direction:column; }


  /* ── Main ── */
  main {
    padding: 20px 12px 24px;
    max-width: none;
    margin: 0;
    width: 100%;
  }
  main.with-sidebar {
    max-width: none;
    margin: 0;
    width: 100%;
  }
  .section { display:none; }
  .section.active { display:block; }

  /* ── Summary cards ── */
  .summary-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px; margin-bottom:24px;
  }
  .currency-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px 22px;
    position:relative; overflow:hidden;
    transition:.2s;
  }
  .currency-card::before {
    content:''; position:absolute; top:0; right:0;
    width:4px; height:100%; border-radius:0 var(--radius) var(--radius) 0;
  }
  .currency-card.usd::before { background:var(--usd); }
  .currency-card.eur::before { background:var(--eur); }
  .currency-card.try::before { background:var(--try); }
  .card-label { font-size:.8rem; color:var(--text-dim); margin-bottom:4px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
  .card-symbol { font-size:1.8rem; margin-bottom:4px; }
  .card-amount { font-size:2rem; font-weight:900; line-height:1; }
  .card-amount.usd { color:var(--usd); }
  .card-amount.eur { color:var(--eur); }
  .card-amount.try { color:var(--try); }
  .card-sub { font-size:.8rem; color:var(--text-muted); margin-top:6px; }
  .card-detail { display:flex; gap:16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .card-detail-item { flex:1; }
  .card-detail-item .lbl { font-size:.75rem; color:var(--text-muted); margin-bottom:2px; }
  .card-detail-item .val { font-size:.95rem; font-weight:700; }
  .val.in { color:var(--accent-green); }
  .val.out { color:var(--accent-red); }

  /* ── Opening balance ── */
  .opening-section {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; margin-bottom:24px;
  }
  .opening-section h3 { font-size:1rem; font-weight:700; color:var(--text-dim); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .opening-grid { display:flex; gap:12px; flex-wrap:wrap; }
  .opening-item { display:flex; align-items:center; gap:8px; }
  .opening-item label { font-size:.85rem; color:var(--text-dim); white-space:nowrap; }
  .opening-item input { width:130px; }

  /* ── Table section ── */
  .section-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; flex-wrap:wrap; gap:10px;
  }
  .section-header h2 { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:8px; }
  .action-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .filter-bar {
    display:flex; gap:10px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px 18px;
    margin-bottom:16px;
  }
  .filter-bar .input-group { margin-bottom:0; min-width:160px; flex:1; }
  .table-wrap {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    width: 100%;
  }
  table { width:100%; border-collapse:collapse; font-size:.88rem; }
  thead { background:var(--surface3); }
  th {
    padding:12px 14px; text-align:right; font-weight:700;
    color:var(--text-dim); font-size:.8rem; letter-spacing:.03em;
    border-bottom:1px solid var(--border);
  }
  td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tr:hover td { background:rgba(255,255,255,.02); }
  .badge {
    display:inline-block; padding:3px 10px; border-radius:20px;
    font-size:.75rem; font-weight:700;
  }
  .badge-in { background:rgba(62,207,142,.12); color:var(--accent-green); }
  .badge-out { background:rgba(245,86,74,.12); color:var(--accent-red); }
  .badge-usd { background:rgba(62,207,142,.12); color:var(--usd); }
  .badge-eur { background:rgba(76,142,245,.12); color:var(--eur); }
  .badge-try { background:rgba(245,200,66,.12); color:var(--try); }
  .btn-icon {
    width:30px; height:30px; border-radius:6px; border:none;
    background:var(--surface3); color:var(--text-dim);
    cursor:pointer; font-size:.9rem; display:inline-flex;
    align-items:center; justify-content:center; transition:.15s;
    margin:0 2px;
  }
  .btn-icon:hover.edit { background:rgba(76,142,245,.15); color:var(--accent-blue); }
  .btn-icon:hover.del { background:rgba(245,86,74,.15); color:var(--accent-red); }
  .empty-state { text-align:center; padding:50px; color:var(--text-muted); font-size:1rem; }

  /* ── Modal ── */
  .modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:200; display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
  }
  .modal-overlay.open { display:flex; }
  .modal {
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:32px; width:480px; max-width:95vw;
    max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow);
    animation: modalIn .2s ease;
  }
  @keyframes modalIn { from{transform:scale(.96) translateY(8px);opacity:0} to{transform:none;opacity:1} }
  .modal h3 { font-size:1.2rem; font-weight:800; margin-bottom:24px; color:var(--accent-gold); }
  .modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* ── Users ── */
  .users-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
  .user-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px 20px;
    display:flex; flex-direction:column; gap:12px; transition:.2s;
  }
  .user-card:hover { border-color:var(--accent-gold); box-shadow:0 4px 20px rgba(0,0,0,.15); }
  .user-card-top { display:flex; align-items:center; gap:14px; }
  .user-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; font-weight:800; flex-shrink:0;
  }
  .user-info { flex:1; min-width:0; }
  .user-info .name { font-weight:700; font-size:.95rem; }
  .user-info .role { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
  .tag-admin { color:var(--accent-gold); }
  .tag-user { color:var(--text-dim); }
  .user-card-actions { display:flex; gap:8px; margin-top:2px; }
  .perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; padding-top:10px; border-top:1px solid var(--border); }
  .perm-item { display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--text-dim); }
  .perm-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .perm-dot.on  { background:var(--accent-green); box-shadow:0 0 4px var(--accent-green); }
  .perm-dot.off { background:var(--text-muted); }
  .perm-section-title { font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--border); }
  .perm-checkboxes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .perm-check-item { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; transition:.15s; user-select:none; }
  .perm-check-item:hover { border-color:var(--accent-gold); }
  .perm-check-item input[type=checkbox] { accent-color:var(--accent-green); width:15px; height:15px; cursor:pointer; }
  .perm-check-item .pci-label { font-size:.82rem; font-weight:700; }
  .perm-check-item .pci-desc  { font-size:.68rem; color:var(--text-muted); }
  #u-perms-section.hidden { display:none; }
  .current-user-card { border-color: var(--accent-green) !important; box-shadow: 0 0 0 1px var(--accent-green), 0 4px 20px rgba(62,207,142,.12); }
  /* ── Reports ── */
  .stat-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px; margin-bottom:20px;
  }
  .stat-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:16px 18px;
    text-align:center;
  }
  .stat-card .s-val { font-size:1.6rem; font-weight:900; }
  .stat-card .s-lbl { font-size:.78rem; color:var(--text-muted); margin-top:4px; }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar { width:6px; height:6px; }
  ::-webkit-scrollbar-track { background:var(--bg); }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

  select option { background:var(--surface3); }

  @media(max-width:600px){
    main{padding:12px;}
    .topbar{padding:0 12px;}
    nav .nav-btn{padding:5px 10px;font-size:.8rem;}
    .grid-2{grid-template-columns:1fr;}
    .modal{padding:20px;}
    .filter-bar{padding:10px 12px;}
    .card-amount{font-size:1.6rem;}
  }

  .toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:var(--surface3); border:1px solid var(--border);
    color:var(--text); padding:10px 24px; border-radius:20px;
    font-size:.9rem; z-index:999;
    animation:toastIn .3s ease;
    box-shadow:var(--shadow);
    white-space:nowrap;
  }
  @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}

  /* ── Search bar ── */
  .search-bar-wrap {
    margin-bottom: 10px;
  }
  .search-main-input {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 10px 16px;
    transition: border-color .2s, box-shadow .2s;
  }
  .search-main-input:focus-within {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--glow-primary);
  }
  .search-icon { font-size: 1rem; flex-shrink:0; }
  .search-main-input input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-family: 'Tajawal', sans-serif;
    font-size: 1rem; min-width: 0;
  }
  .search-main-input input::placeholder { color: var(--text-muted); }
  .search-clear-btn {
    background: transparent; border: none; color: var(--text-muted);
    cursor: pointer; font-size: .9rem; padding: 2px 6px;
    border-radius: 6px; transition: .15s; display:none;
  }
  .search-clear-btn.visible { display:block; }
  .search-clear-btn:hover { background: var(--surface3); color: var(--accent-red); }
  .search-results-info {
    font-size: .8rem; color: var(--text-muted);
    padding: 4px 6px; min-height: 20px;
  }
  .search-results-info .s-count { color: var(--accent-gold); font-weight: 700; }
  .search-results-info .s-highlight {
    background: rgba(245,200,66,.18); color: var(--accent-gold);
    border-radius: 3px; padding: 0 3px;
  }

  /* ── Filter pills row ── */
  .filter-pills-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
    margin-bottom: 16px;
  }
  .fp-group {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .fp-label {
    font-size: .78rem; color: var(--text-muted); font-weight: 700;
    white-space: nowrap;
  }
  .fp-sep { color: var(--text-muted); font-size: .8rem; }
  .fp-input {
    padding: 5px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface3);
    color: var(--text); font-family: 'Tajawal',sans-serif; font-size: .82rem;
    width: 130px; transition: .2s;
  }
  .fp-input:focus { outline:none; border-color: var(--accent-gold); }
  .fp-pills { display: flex; gap: 4px; }
  .fp-pill {
    padding: 4px 12px; border-radius: 20px;
    border: 1px solid var(--border); background: var(--surface3);
    color: var(--text-dim); font-family: 'Tajawal',sans-serif;
    font-size: .78rem; font-weight: 700; cursor: pointer; transition: .15s;
  }
  .fp-pill:hover { background: var(--border); color: var(--text); }
  .fp-pill.active { background: var(--surface2); color: var(--text); border-color: var(--text-muted); }
  .fp-pill.usd.active  { background:rgba(62,207,142,.1);  color:var(--usd); border-color:var(--usd); }
  .fp-pill.eur.active  { background:rgba(76,142,245,.1);  color:var(--eur); border-color:var(--eur); }
  .fp-pill.try.active  { background:rgba(245,200,66,.1);  color:var(--try); border-color:var(--try); }
  .fp-pill.in.active   { background:rgba(62,207,142,.1);  color:var(--accent-green); border-color:var(--accent-green); }
  .fp-pill.out.active  { background:rgba(245,86,74,.1);   color:var(--accent-red);   border-color:var(--accent-red); }
  .fp-select {
    padding: 5px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface3);
    color: var(--text); font-family: 'Tajawal',sans-serif; font-size: .82rem;
    cursor: pointer; transition: .2s;
  }
  .fp-select:focus { outline: none; border-color: var(--accent-gold); }
  .fp-reset-btn {
    margin-right: auto; padding: 5px 14px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); font-family: 'Tajawal',sans-serif;
    font-size: .8rem; cursor: pointer; transition: .15s;
  }
  .fp-reset-btn:hover { background: var(--surface3); color: var(--accent-red); border-color: var(--accent-red); }

  /* highlight matched text */
  mark.hl {
    background: rgba(245,200,66,.25); color: var(--accent-gold);
    border-radius: 2px; padding: 0 1px;
  }

  /* ── Row color picker ── */
  .row-actions {
    display: flex; align-items: center; gap: 4px;
  }
  .color-picker-wrap {
    position: relative; display: inline-flex;
  }
  .color-dot-btn {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--surface3);
    cursor: pointer; font-size: .75rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: .15s; padding: 0; flex-shrink: 0;
  }
  .color-dot-btn:hover { transform: scale(1.2); border-color: var(--accent-gold); }

  .color-palette {
    display: none; position: absolute; left: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 999; flex-wrap: wrap;
    gap: 5px; width: 148px;
  }
  .color-palette.open { display: flex; }

  .cp-swatch {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    transition: .15s; flex-shrink: 0;
  }
  .cp-swatch:hover { transform: scale(1.25); border-color: var(--text); }
  .cp-clear {
    background: var(--surface3) !important; border: 2px dashed var(--border) !important;
    color: var(--text-muted); font-size: .75rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
  }
  .cp-clear:hover { border-color: var(--accent-red) !important; color: var(--accent-red); }

  /* ── Checkbox ── */
  .cb-wrap {
    display: inline-flex; align-items: center; cursor: pointer;
    position: relative;
  }
  .cb-wrap input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .cb-box {
    width: 17px; height: 17px; border-radius: 5px;
    border: 2px solid var(--border); background: var(--surface3);
    transition: .15s; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center;
  }
  .cb-wrap input:checked + .cb-box {
    background: var(--accent-gold); border-color: var(--accent-gold);
  }
  .cb-wrap input:checked + .cb-box::after {
    content: '✓'; font-size: 11px; color: #1a1500; font-weight: 900; line-height: 1;
  }
  .cb-wrap:hover .cb-box { border-color: var(--accent-gold); }

  /* selected row highlight */
  .tx-row.selected { background: rgba(245,200,66,.06) !important; }
  .tx-row.selected td:first-child { border-right: 3px solid var(--accent-gold); }

  /* bulk action bar */
  .bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; margin-bottom: 8px;
    background: rgba(245,200,66,.08); border: 1px solid rgba(245,200,66,.25);
    border-radius: var(--radius); animation: slideDown .2s ease;
  }
  @keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .bulk-count {
    font-weight: 800; font-size: .9rem; color: var(--accent-gold);
    white-space: nowrap;
  }
  .bulk-btn { font-size: .82rem !important; padding: 5px 12px !important; }

  /* ── Company chip ── */
  .company-chip {
    display:inline-block; padding:2px 10px; border-radius:6px;
    background:rgba(155,114,245,.1); border:1px solid rgba(155,114,245,.2);
    color:var(--accent-purple); font-size:.78rem; font-weight:600;
    white-space:nowrap;
  }
  .add-company-inline {
    margin-right:8px; padding:1px 8px; border-radius:6px;
    border:1px solid var(--border); background:var(--surface3);
    color:var(--text-dim); font-family:'Tajawal',sans-serif;
    font-size:.75rem; cursor:pointer; transition:.15s; float:left;
  }
  .add-company-inline:hover { background:var(--accent-gold); color:#1a1500; border-color:transparent; }

  /* ── Time chip ── */
  .time-chip {
    display:inline-block; padding:2px 8px; border-radius:6px;
    background:var(--surface3); border:1px solid var(--border);
    font-size:.78rem; color:var(--text-dim); font-weight:600;
    letter-spacing:.03em; white-space:nowrap;
  }

  /* ── Clickable card ── */
  .clickable-card {
    cursor: pointer;
    user-select: none;
  }
  .clickable-card:active { transform: scale(.98) !important; }
  .card-click-hint {
    font-size: .7rem; color: var(--text-muted);
    margin-bottom: 6px; letter-spacing:.03em;
    opacity: 0; transition: opacity .2s;
  }
  .clickable-card:hover .card-click-hint { opacity: 1; }

  /* ── Ledger modal ── */
  .ledger-modal-inner {
    width: calc(100vw - 28px) !important;
    height: calc(100vh - 28px) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important; overflow: hidden !important;
    display: flex; flex-direction: column;
  }
  .ledger-modal-head {
    display: flex; align-items: center; gap: 14px;
    padding: 22px 24px; border-bottom: 1px solid var(--border);
    background: var(--surface2);
  }
  .ledger-flag { font-size: 2rem; }
  .ledger-title { font-size: 1.1rem; font-weight: 900; }
  .ledger-sub   { font-size: .8rem; color: var(--text-dim); margin-top:2px; }
  .ledger-balance-wrap { margin-right: auto; text-align: left; }
  .ledger-bal-label { font-size: .72rem; color: var(--text-muted); }
  .ledger-bal { font-size: 1.6rem; font-weight: 900; }

  /* tabs */
  .ledger-tabs {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 20px; border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
  }
  .ledger-tab {
    padding: 5px 16px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface3); color: var(--text-dim);
    font-family: 'Tajawal',sans-serif; font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: .15s;
  }
  .ledger-tab:hover { background: var(--border); color: var(--text); }
  .ledger-tab.active { background: var(--accent-gold); color: #1a1500; border-color: transparent; }

  /* summary strip */
  .ledger-strip {
    display: flex; align-items: center; gap: 0;
    padding: 10px 20px; background: var(--surface3);
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
  }
  .ls-item { display: flex; flex-direction: column; align-items: center; padding: 0 14px; }
  .ls-lbl  { font-size: .7rem; color: var(--text-muted); }
  .ls-val  { font-size: 1rem; font-weight: 800; margin-top: 2px; }
  .ls-val.green { color: var(--accent-green); }
  .ls-val.red   { color: var(--accent-red); }
  .ls-val.gold  { color: var(--accent-gold); }
  .ls-sep { color: var(--text-muted); font-size: 1.1rem; font-weight: 300; padding: 0 2px; }

  /* running balance cell */
  .rb-pos { color: var(--accent-green); font-weight: 700; }
  .rb-neg { color: var(--accent-red);   font-weight: 700; }

  /* ── Currency nav buttons ── */
  .nav-usd:hover { color:var(--usd) !important; background:rgba(62,207,142,.1) !important; border-color:rgba(62,207,142,.2) !important; }
  .nav-usd.active { color:var(--usd) !important; background:rgba(62,207,142,.12) !important; border-color:rgba(62,207,142,.3) !important; box-shadow: 0 1px 6px rgba(62,207,142,.15) !important; }
  .nav-eur:hover { color:var(--eur) !important; background:rgba(76,142,245,.1) !important; border-color:rgba(76,142,245,.2) !important; }
  .nav-eur.active { color:var(--eur) !important; background:rgba(76,142,245,.12) !important; border-color:rgba(76,142,245,.3) !important; box-shadow: 0 1px 6px rgba(76,142,245,.15) !important; }
  .nav-try:hover { color:var(--try) !important; background:rgba(245,200,66,.1) !important; border-color:rgba(245,200,66,.2) !important; }
  .nav-try.active { color:var(--try) !important; background:rgba(245,200,66,.12) !important; border-color:rgba(245,200,66,.3) !important; box-shadow: 0 1px 6px rgba(245,200,66,.15) !important; }

  /* ── Currency page ── */
  .cur-page-header {
    border-radius:var(--radius); padding:24px 28px; margin-bottom:4px;
    border:1px solid var(--border); position:relative; overflow:hidden;
  }
  .usd-header { background:linear-gradient(135deg, rgba(62,207,142,.08) 0%, var(--surface) 60%); border-color:rgba(62,207,142,.2); }
  .eur-header { background:linear-gradient(135deg, rgba(76,142,245,.08) 0%, var(--surface) 60%); border-color:rgba(76,142,245,.2); }
  .try-header { background:linear-gradient(135deg, rgba(245,200,66,.08) 0%, var(--surface) 60%); border-color:rgba(245,200,66,.2); }

  .cur-page-header::before {
    content:''; position:absolute; top:-40px; left:-40px;
    width:200px; height:200px; border-radius:50%;
    opacity:.04; pointer-events:none;
  }
  .usd-header::before { background:var(--usd); }
  .eur-header::before { background:var(--eur); }
  .try-header::before { background:var(--try); }

  .cur-page-hero {
    display:flex; align-items:center; gap:18px; margin-bottom:20px;
  }
  .cur-flag { font-size:2.8rem; line-height:1; }
  .cur-page-title { font-size:1.4rem; font-weight:900; }
  .cur-page-sub   { font-size:.85rem; color:var(--text-dim); margin-top:2px; }
  .cur-page-balance {
    margin-right:auto; font-size:2.4rem; font-weight:900; line-height:1;
  }
  .cur-page-balance.usd { color:var(--usd); }
  .cur-page-balance.eur { color:var(--eur); }
  .cur-page-balance.try { color:var(--try); }

  .cur-stats-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  }
  @media(max-width:700px){ .cur-stats-row { grid-template-columns:repeat(2,1fr); } }
  .cur-stat-box {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:12px 14px;
  }
  .cur-stat-box.in  { border-color:rgba(62,207,142,.2); }
  .cur-stat-box.out { border-color:rgba(245,86,74,.2); }
  .csb-label { font-size:.75rem; color:var(--text-muted); margin-bottom:4px; }
  .csb-val   { font-size:1.2rem; font-weight:800; }
  .csb-val.green { color:var(--accent-green); }
  .csb-val.red   { color:var(--accent-red); }
  .csb-val.gold  { color:var(--accent-gold); }

  .btn-blue  { background:var(--accent-blue);  color:#fff; }
  .btn-blue:hover  { background:#3a7de0; transform:translateY(-1px); }

  /* ── Notifications ── */
  .notif-bell-wrap { position:relative; }
  .notif-badge {
    position:absolute; top:-4px; left:-4px;
    background:var(--accent-red); color:#fff;
    font-size:.65rem; font-weight:900;
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--surface);
    animation: pulse-badge 2s infinite;
  }
  @keyframes pulse-badge {
    0%,100%{box-shadow:0 0 0 0 rgba(245,86,74,.5)}
    50%{box-shadow:0 0 0 6px rgba(245,86,74,0)}
  }
  .notif-badge.hidden { display:none; }

  .notif-list { display:flex; flex-direction:column; gap:10px; }
  .notif-item {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px 16px;
    display:flex; align-items:flex-start; gap:14px;
    position:relative; overflow:hidden;
    animation: notifSlide .3s ease;
    transition:.2s;
  }
  @keyframes notifSlide { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
  .notif-item:hover { border-color:var(--text-muted); }
  .notif-item.unread::before {
    content:''; position:absolute; top:0; right:0;
    width:3px; height:100%;
  }
  .notif-item.unread.edit::before { background:var(--accent-blue); }
  .notif-item.unread.delete::before { background:var(--accent-red); }
  .notif-item.unread.add::before { background:var(--accent-green); }
  .notif-icon {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  }
  .notif-icon.edit   { background:rgba(76,142,245,.12); }
  .notif-icon.delete { background:rgba(245,86,74,.12); }
  .notif-icon.add    { background:rgba(62,207,142,.12); }
  .notif-body { flex:1; min-width:0; }
  .notif-title { font-weight:700; font-size:.92rem; margin-bottom:3px; display:flex; align-items:center; gap:8px; }
  .notif-title .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .notif-title .dot.edit   { background:var(--accent-blue); }
  .notif-title .dot.delete { background:var(--accent-red); }
  .notif-title .dot.add    { background:var(--accent-green); }
  .notif-detail { font-size:.82rem; color:var(--text-dim); line-height:1.5; }
  .notif-detail .highlight { color:var(--text); font-weight:600; }
  .notif-meta { font-size:.75rem; color:var(--text-muted); margin-top:5px; display:flex; align-items:center; gap:10px; }
  .notif-time-ago { color:var(--accent-gold); }
  .notif-close {
    width:24px; height:24px; border-radius:6px; border:none;
    background:transparent; color:var(--text-muted);
    cursor:pointer; font-size:.9rem; display:flex;
    align-items:center; justify-content:center; transition:.15s; flex-shrink:0;
  }
  .notif-close:hover { background:var(--surface3); color:var(--accent-red); }

  .notif-filter-bar {
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center;
  }
  .notif-filter-btn {
    padding:6px 16px; border-radius:20px; border:1px solid var(--border);
    background:var(--surface3); color:var(--text-dim);
    font-family:'Tajawal',sans-serif; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:.2s; display:flex; align-items:center; gap:5px;
  }
  .notif-filter-btn:hover, .notif-filter-btn.active { background:var(--surface2); color:var(--text); border-color:var(--text-muted); }
  .notif-filter-btn.edit.active   { border-color:var(--accent-blue); color:var(--accent-blue); }
  .notif-filter-btn.delete.active { border-color:var(--accent-red);  color:var(--accent-red); }
  .notif-filter-btn.add.active    { border-color:var(--accent-green);color:var(--accent-green); }

  .notif-top-bar {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; flex-wrap:wrap; gap:10px;
  }
  .unread-count-chip {
    background:rgba(245,86,74,.12); color:var(--accent-red);
    border:1px solid rgba(245,86,74,.2);
    padding:3px 12px; border-radius:20px; font-size:.8rem; font-weight:700;
  }
  .notif-empty {
    text-align:center; padding:60px 20px; color:var(--text-muted);
  }
  .notif-empty .big { font-size:2.5rem; margin-bottom:8px; }

  .diff-old { color:var(--accent-red); text-decoration:line-through; opacity:.7; }
  .diff-new { color:var(--accent-green); }
  .diff-arrow { color:var(--text-muted); margin:0 4px; }

  /* ── Rates button ── */
  @keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* ══ RATES MODAL ══ */
  /* ══ RATES MODAL ══ */
  .rates-overlay {
    position:fixed; inset:0; z-index:1100;
    background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:12px; animation:fadeIn .2s ease;
  }
  .rates-overlay.hidden { display:none; }
  .rates-panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; width:min(900px,100%);
    max-height:92vh; display:flex; flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(245,200,66,.08);
    animation:slideUp .22s ease; overflow:hidden;
  }
  @keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

  /* header */
  .rates-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px 13px; border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,var(--surface2),var(--surface3));
    flex-shrink:0; flex-wrap:wrap; gap:10px;
  }
  .rates-header-left { display:flex; flex-direction:column; gap:2px; }
  .rates-title { font-size:1.05rem; font-weight:900; color:var(--accent-gold); }
  .rates-update-time { font-size:.7rem; color:var(--text-muted); }
  .rates-header-right { display:flex; align-items:center; gap:8px; }
  .rates-close {
    width:30px; height:30px; border-radius:50%;
    background:var(--surface3); border:1px solid var(--border);
    color:var(--text-dim); cursor:pointer; font-size:.95rem;
    display:flex; align-items:center; justify-content:center; transition:.15s;
  }
  .rates-close:hover{background:rgba(245,86,74,.15);color:var(--accent-red);border-color:var(--accent-red);}

  /* controls bar */
  .rates-controls-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 22px; border-bottom:1px solid var(--border);
    background:var(--surface2); flex-wrap:wrap; gap:8px; flex-shrink:0;
  }
  .rates-base-wrap { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .rates-base-label { font-size:.72rem; color:var(--text-muted); font-weight:700; white-space:nowrap; }
  .rates-base-btns { display:flex; gap:4px; flex-wrap:wrap; }
  .rates-base-btn {
    padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:700;
    border:1px solid var(--border); background:var(--surface3); color:var(--text-dim);
    cursor:pointer; transition:.15s; font-family:'Tajawal',sans-serif;
  }
  .rates-base-btn:hover{background:var(--surface);color:var(--text);}
  .rates-base-btn.active{background:rgba(245,200,66,.15);border-color:var(--accent-gold);color:var(--accent-gold);}
  .rates-right-controls { display:flex; align-items:center; gap:8px; }
  .rates-search-wrap { position:relative; }
  .rates-search {
    padding:5px 12px 5px 30px; border-radius:20px;
    border:1px solid var(--border); background:var(--surface3);
    color:var(--text); font-family:'Tajawal',sans-serif; font-size:.8rem;
    width:160px; transition:border-color .15s;
  }
  .rates-search:focus{outline:none;border-color:var(--accent-gold);}
  .rates-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--text-muted);pointer-events:none;}

  /* view toggle */
  .rates-view-toggle { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .rates-view-btn {
    padding:4px 10px; font-size:.72rem; font-weight:700; cursor:pointer;
    border:none; background:var(--surface3); color:var(--text-dim);
    font-family:'Tajawal',sans-serif; transition:.15s;
  }
  .rates-view-btn.active{background:var(--accent-gold);color:#1a1500;}

  /* body */
  .rates-body { overflow-y:auto; flex:1; padding:18px 22px 8px; }

  /* section label */
  .rates-section-title {
    font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-muted); margin:0 0 12px;
    display:flex; align-items:center; gap:8px;
  }
  .rates-section-title::after{content:'';flex:1;height:1px;background:var(--border);}

  /* ── VIEW: MARKET (read-only cards) ── */
  .rates-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:9px; margin-bottom:22px;
  }
  .rate-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:11px; padding:11px 13px;
    display:flex; flex-direction:column; gap:3px;
    transition:.18s; position:relative; overflow:hidden;
  }
  .rate-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--border);transition:.18s;}
  .rate-card:hover{border-color:var(--accent-gold);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.22);}
  .rate-card:hover::before{background:var(--accent-gold);}
  .rate-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
  .rate-card-flag{font-size:1.3rem;line-height:1;}
  .rate-card-code{font-size:.78rem;font-weight:900;color:var(--text);letter-spacing:.03em;}
  .rate-card-name{font-size:.65rem;color:var(--text-muted);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rate-card-val{font-size:1.05rem;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;}
  .rate-card-change{font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:7px;display:inline-block;margin-top:4px;align-self:flex-start;}
  .rate-card-change.up  {background:rgba(62,207,142,.12);color:#3ecf8e;}
  .rate-card-change.down{background:rgba(245,86,74,.12); color:var(--accent-red);}
  .rate-card-change.flat{background:rgba(255,255,255,.05);color:var(--text-muted);}
  .rate-card.highlight{border-color:rgba(245,200,66,.3);background:rgba(245,200,66,.03);}
  .rate-card.highlight::before{background:rgba(245,200,66,.55);}
  .rate-card.hidden-card{display:none;}

  /* ── VIEW: BUY/SELL table ── */
  .rates-bs-table-wrap { margin-bottom:22px; }
  .rates-bs-table {
    width:100%; border-collapse:collapse;
    font-size:.82rem;
  }
  .rates-bs-table thead th {
    padding:8px 12px; font-size:.68rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
    background:var(--surface2); border-bottom:1px solid var(--border);
    text-align:right;
  }
  .rates-bs-table thead th:first-child { border-radius:8px 0 0 0; }
  .rates-bs-table thead th:last-child  { border-radius:0 8px 0 0; text-align:left; }
  .rates-bs-table tbody tr {
    border-bottom:1px solid var(--border); transition:.12s;
  }
  .rates-bs-table tbody tr:hover { background:var(--surface2); }
  .rates-bs-table tbody tr.hidden-row { display:none; }
  .rates-bs-table td { padding:9px 12px; vertical-align:middle; }
  .rbs-cur-cell { display:flex; align-items:center; gap:9px; }
  .rbs-flag { font-size:1.25rem; flex-shrink:0; }
  .rbs-code { font-weight:900; font-size:.88rem; }
  .rbs-name { font-size:.68rem; color:var(--text-muted); }
  .rbs-market-val { font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
  .rbs-chg { font-size:.68rem; }

  /* editable buy/sell cells */
  .rbs-rate-cell { display:flex; align-items:center; gap:6px; min-width:110px; }
  .rbs-rate-input {
    width:90px; padding:5px 8px; border-radius:7px;
    border:1px solid var(--border); background:var(--surface3);
    color:var(--text); font-family:'Tajawal',sans-serif;
    font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums;
    text-align:center; transition:.15s;
  }
  .rbs-rate-input:focus{outline:none;border-color:var(--accent-gold);}
  .rbs-rate-input.buy-field:focus{border-color:var(--accent-green);}
  .rbs-rate-input.sell-field:focus{border-color:var(--accent-red);}
  .rbs-rate-input.changed{background:rgba(245,200,66,.08);border-color:rgba(245,200,66,.4);}
  .rbs-spread {
    font-size:.68rem; color:var(--text-muted); white-space:nowrap;
    min-width:54px; text-align:center;
  }
  .rbs-spread.has-spread{color:var(--accent-gold);font-weight:700;}
  .rbs-save-btn {
    padding:4px 10px; border-radius:7px; font-size:.72rem; font-weight:700;
    border:1px solid var(--border); background:var(--surface3); color:var(--text-dim);
    cursor:pointer; transition:.15s; font-family:'Tajawal',sans-serif; white-space:nowrap;
  }
  .rbs-save-btn:hover{background:rgba(245,200,66,.15);border-color:var(--accent-gold);color:var(--accent-gold);}
  .rbs-save-btn.saved{background:rgba(62,207,142,.15);border-color:var(--accent-green);color:var(--accent-green);}

  /* col headers color hints */
  .th-buy  { color:var(--accent-green) !important; }
  .th-sell { color:var(--accent-red)   !important; }

  /* chart */
  .rates-chart-section{border-top:1px solid var(--border);padding-top:18px;margin-top:4px;}
  .rates-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
  .rates-chart-title{font-size:.82rem;font-weight:800;color:var(--text-dim);}
  .rates-chart-tabs{display:flex;gap:4px;}
  .rates-chart-tab{padding:3px 10px;border-radius:7px;font-size:.72rem;font-weight:700;border:1px solid var(--border);background:var(--surface3);color:var(--text-dim);cursor:pointer;font-family:'Tajawal',sans-serif;transition:.15s;}
  .rates-chart-tab.active{background:rgba(245,200,66,.15);border-color:var(--accent-gold);color:var(--accent-gold);}

  /* loading / error */
  .rates-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 24px;color:var(--text-dim);font-size:.9rem;}
  .rates-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent-gold);animation:spin .8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .rates-error{padding:48px 24px;text-align:center;color:var(--accent-red);font-size:.9rem;line-height:1.8;}

  /* footer */
  .rates-footer{
    padding:9px 22px;border-top:1px solid var(--border);
    background:var(--surface2);font-size:.7rem;color:var(--text-muted);
    flex-shrink:0;border-radius:0 0 20px 20px;
    display:flex;align-items:center;justify-content:center;gap:10px;
  }
  .rates-footer-dot{width:3px;height:3px;border-radius:50%;background:var(--border);}

  @media(max-width:560px){
    .rates-panel{border-radius:14px;}
    .rates-body{padding:12px 14px 6px;}
    .rates-controls-bar{padding:9px 14px;}
    .rates-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
    .rbs-rate-input{width:72px;}
    .rates-search{width:120px;}
  }

  /* ── Live Rates Cards (dashboard) ── */
  .live-rates-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px; margin-bottom: 14px;
  }
  .live-rate-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 7px 9px;
    display: flex; flex-direction: column; gap: 2px;
    position: relative; overflow: hidden;
    transition: .2s; cursor: default;
  }
  .live-rate-card:hover { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
  .live-rate-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(245,200,66,.04), transparent);
    pointer-events: none;
  }
  .lrc-header { display: flex; align-items: center; justify-content: space-between; }
  .lrc-flag { font-size: .85rem; }
  .lrc-chg { font-size: .58rem; font-weight: 700; padding: 1px 4px; border-radius: 4px; }
  .lrc-chg.up   { background: rgba(62,207,142,.12); color: #3ecf8e; }
  .lrc-chg.down { background: rgba(245,86,74,.12);  color: var(--accent-red); }
  .lrc-chg.flat { background: rgba(255,255,255,.06); color: var(--text-muted); }
  .lrc-code { font-size: .62rem; font-weight: 800; color: var(--text-dim); letter-spacing: .05em; margin-top: 2px; }
  .lrc-name { font-size: .55rem; color: var(--text-muted); }
  .lrc-val  { font-size: .82rem; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
  .lrc-base { font-size: .52rem; color: var(--text-muted); }

  .live-rates-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
  }
  .live-rates-title {
    font-size: .85rem; font-weight: 800; color: var(--text-dim);
    display: flex; align-items: center; gap: 6px;
  }
  .live-rates-updated { font-size: .72rem; color: var(--text-muted); }


  /* ── Print styles ── */
  @media print {
    #bg-canvas, .topbar, .logo-sidebar,
    .action-bar, .filter-pills-row, .search-bar-wrap,
    .btn-icon, .bulk-bar, nav { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .table-wrap { box-shadow: none !important; border: 1px solid #ccc !important; }
    th, td { color: #000 !important; border-color: #ccc !important; }
    main { padding: 0 !important; }
    .currency-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  }

  /* ── Improved empty state ── */
  .empty-state {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
  }
  .empty-state-icon { font-size: 2.5rem; opacity: .4; }
  .empty-state-text { font-size: .95rem; color: var(--text-muted); }
  .empty-state-sub  { font-size: .8rem;  color: var(--text-muted); opacity: .7; }

  /* ── Confirm dialog improvement ── */
  .modal-confirm-msg {
    font-size: .95rem; color: var(--text-dim);
    margin-bottom: 20px; line-height: 1.6;
  }

  /* ── Scrollable table on mobile ── */
  @media (max-width: 760px) {
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }
  }

  /* ── Input focus ring improvement ── */
  .input-group input:focus,
  .input-group select:focus,
  .input-group textarea:focus {
    outline: none;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px var(--glow-primary);
  }

  /* ── Login button pulse while loading ── */
  #login-btn:disabled {
    opacity: .75; cursor: not-allowed;
  }

  /* ── Topbar user chip ── */
  .user-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 12px;
    font-size: .82rem; font-weight: 700; color: var(--text-dim);
    cursor: pointer; transition: .2s;
  }
  .user-chip:hover { background: var(--border); color: var(--text); }


    background: rgba(245,200,66,.06); border: 1px solid rgba(245,200,66,.2);
    border-radius: var(--radius-sm); padding: 8px 12px;
    font-size: .8rem; color: var(--accent-gold);
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
  }
  .rate-hint-box.hidden { display: none; }
  .rate-hint-icon { font-size: 1rem; }


  /* ══ EXCHANGE MODAL ══ */
  /* ══ EXCHANGE MODAL ══ */
  .exchange-modal-inner {
    max-width: 680px; width: 96vw;
    padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .exchange-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px 14px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 100%);
    flex-shrink: 0;
  }
  .exchange-header-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.05rem; font-weight: 800; color: var(--text);
  }
  .exchange-icon { font-size: 1.2rem; }

  /* شريط الأرصدة */
  .exchange-balances-strip {
    display: flex; border-bottom: 1px solid var(--border);
    background: var(--surface2); flex-shrink: 0;
  }
  .ex-bal-item {
    flex: 1; padding: 8px 12px; text-align: center;
    border-left: 1px solid var(--border);
  }
  .ex-bal-item:last-child { border-left: none; }
  .ex-bal-lbl { font-size: .62rem; color: var(--text-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .ex-bal-val { font-size: .88rem; font-weight: 900; margin-top: 1px; font-variant-numeric: tabular-nums; }
  .ex-bal-val.usd { color: var(--usd); }
  .ex-bal-val.eur { color: var(--eur); }
  .ex-bal-val.try { color: var(--try); }

  /* body يحتوي كل المحتوى مع scroll */
  .exchange-body-scroll {
    overflow-y: auto; max-height: calc(100vh - 200px);
    padding: 18px 20px 4px;
    display: flex; flex-direction: column; gap: 14px;
  }

  /* صف من / إلى */
  .exchange-sides-row {
    display: grid; grid-template-columns: 1fr 44px 1fr; gap: 0; align-items: start;
  }
  .exchange-side { }
  .exchange-side-label {
    font-size: .68rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .exchange-cur-select { display: flex; gap: 5px; flex-wrap: wrap; }
  .ex-cur-btn {
    padding: 6px 11px; border-radius: 8px;
    background: var(--surface3); border: 1px solid var(--border);
    color: var(--text-dim); font-family: 'Tajawal', sans-serif;
    font-size: .8rem; font-weight: 700; cursor: pointer; transition: .15s;
  }
  .ex-cur-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
  .ex-cur-btn.active {
    background: rgba(245,200,66,.12); border-color: rgba(245,200,66,.5);
    color: var(--accent-gold); box-shadow: 0 2px 8px rgba(245,200,66,.12);
  }
  .exchange-side .input-group { margin-top: 10px; margin-bottom: 0; }
  .exchange-side .input-group input {
    font-size: 1.05rem; font-weight: 800; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .ex-avail {
    font-size: .7rem; color: var(--text-muted); margin-top: 5px;
    padding: 3px 9px; background: var(--surface3); border-radius: 6px; display: none;
  }
  .ex-avail.show { display: block; }
  .ex-avail.warn { color: var(--accent-red); }

  /* زر العكس وسط */
  .exchange-arrow-col {
    display: flex; align-items: center; justify-content: center;
    padding-top: 46px;
  }
  .exchange-arrow {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface3); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--accent-gold);
    cursor: pointer; transition: .2s; user-select: none; flex-shrink: 0;
  }
  .exchange-arrow:hover { transform: rotate(180deg); border-color: var(--accent-gold); background: rgba(245,200,66,.1); }

  /* صف الأسعار — شراء + هامش + بيع */
  .exchange-rates-section {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
  }
  .ex-dual-rate-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
  }
  .exchange-rate-label {
    font-size: .68rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .ex-market-rate { font-size: .7rem; color: var(--text-muted); }
  .ex-market-rate span { color: var(--accent-gold); font-weight: 800; }

  .ex-dual-rates {
    display: grid; grid-template-columns: 1fr 80px 1fr; gap: 8px; align-items: center;
  }
  .ex-rate-block { }
  .ex-rate-type-lbl {
    font-size: .7rem; font-weight: 900; letter-spacing: .04em; margin-bottom: 4px;
  }
  .ex-rate-type-lbl.buy  { color: var(--accent-green); }
  .ex-rate-type-lbl.sell { color: var(--accent-red); }
  .ex-rate-sub-lbl { font-size: .66rem; color: var(--text-muted); margin-bottom: 5px; }
  .rate-lock-row { display: flex; align-items: center; gap: 4px; }
  .ex-rate-input {
    flex: 1; min-width: 0; padding: 7px 10px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface3); color: var(--text);
    font-family: 'Tajawal', sans-serif; font-size: .92rem; font-weight: 700;
    font-variant-numeric: tabular-nums; text-align: center;
    transition: border-color .15s;
  }
  .ex-rate-input:focus { outline: none; border-color: var(--accent-gold); }
  .ex-rate-input.buy-input:focus  { border-color: var(--accent-green); }
  .ex-rate-input.sell-input:focus { border-color: var(--accent-red); }
  .ex-rate-cur-lbl { font-size: .75rem; color: var(--text-dim); font-weight: 700; white-space: nowrap; flex-shrink: 0; }

  /* عمود الهامش الأوسط */
  .ex-spread-col {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; padding: 0 4px;
  }
  .ex-spread-lbl { font-size: .6rem; color: var(--text-muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .ex-spread-val { font-size: .92rem; font-weight: 900; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
  .ex-spread-pct { font-size: .65rem; color: var(--accent-gold); opacity: .75; }

  /* معاينة النتيجة */
  .exchange-preview {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px;
  }
  .ex-preview-row {
    display: flex; justify-content: space-between; align-items: center; padding: 4px 0;
  }
  .ex-preview-label { font-size: .8rem; color: var(--text-dim); }
  .ex-preview-val { font-size: .92rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .ex-preview-val.red   { color: var(--accent-red); }
  .ex-preview-val.green { color: var(--accent-green); }

  /* حقول إضافية */
  .ex-extra-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .ex-profit-row {
    display: grid; grid-template-columns: 1fr 100px; gap: 8px; align-items: end;
  }

  /* footer */
  .exchange-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    background: var(--surface2); display: flex; gap: 10px;
    justify-content: flex-end; flex-shrink: 0;
  }
  .btn-exchange {
    background: linear-gradient(135deg, rgba(62,207,142,.18), rgba(76,142,245,.18));
    border: 1px solid rgba(62,207,142,.4); color: var(--accent-green);
    padding: 9px 24px; border-radius: var(--radius-sm);
    font-family: 'Tajawal', sans-serif; font-size: .92rem; font-weight: 800;
    cursor: pointer; transition: .2s;
  }
  .btn-exchange:hover { background: rgba(62,207,142,.28); transform: translateY(-1px); }

  @media (max-width: 500px) {
    .exchange-sides-row { grid-template-columns: 1fr; }
    .exchange-arrow-col { padding-top: 0; transform: rotate(90deg); margin: 0 auto; }
    .ex-dual-rates { grid-template-columns: 1fr; }
    .ex-spread-col { flex-direction: row; gap: 8px; }
    .ex-extra-row { grid-template-columns: 1fr; }
  }
  /* Exchange button in topbar */
  .btn-exchange-nav {
    background: linear-gradient(135deg, rgba(62,207,142,.12), rgba(76,142,245,.12));
    border: 1px solid rgba(62,207,142,.35); color: var(--accent-green);
    padding: 7px 14px; border-radius: var(--radius-sm);
    font-family: 'Tajawal', sans-serif; font-size: .85rem; font-weight: 700;
    cursor: pointer; transition: .2s; display: inline-flex; align-items: center; gap: 5px;
  }
  .btn-exchange-nav:hover { background: rgba(62,207,142,.2); transform: translateY(-1px); }


  /* ══ DASHBOARD INLINE EXCHANGE WIDGET ══ */
  .dash-exchange-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
  }
  .dash-exchange-widget::before {
    content: '';
    position: absolute; top: 0; right: 0; left: 0; height: 3px; z-index: 1;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-green));
    background-size: 200% 100%;
    animation: dexBarShimmer 3s linear infinite;
  }
  @keyframes dexBarShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

  .dex-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-wrap: wrap; gap: 8px;
  }
  .dex-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 800; color: var(--text);
  }
  .dex-icon { font-size: 1.1rem; }
  .dex-header-right { display: flex; align-items: center; gap: 10px; }
  .dex-market-hint { font-size: .72rem; color: var(--text-muted); }

  .dex-body {
    display: flex; align-items: center; gap: 0;
    padding: 18px 20px 14px;
  }
  .dex-side { flex: 1; min-width: 0; }
  .dex-side-lbl {
    font-size: .68rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px;
  }
  .dex-cur-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
  .dex-pill {
    padding: 5px 11px; border-radius: 8px;
    background: var(--surface3); border: 1px solid var(--border);
    color: var(--text-dim); font-family: 'Tajawal', sans-serif;
    font-size: .78rem; font-weight: 700; cursor: pointer; transition: .15s;
  }
  .dex-pill:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
  .dex-pill.active {
    background: rgba(245,200,66,.12); border-color: rgba(245,200,66,.45);
    color: var(--accent-gold);
  }
  .dex-input-wrap {
    position: relative; display: flex; align-items: center;
  }
  .dex-amount-input {
    width: 100%; padding: 9px 36px 9px 12px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal', sans-serif; font-size: 1.05rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: .15s;
  }
  .dex-amount-input:focus { outline: none; border-color: var(--accent-gold); background: var(--surface3); }
  .dex-sym {
    position: absolute; left: 10px;
    font-size: .85rem; font-weight: 800; color: var(--text-muted);
    pointer-events: none;
  }
  .dex-bal {
    font-size: .68rem; color: var(--text-muted);
    margin-top: 5px; padding-right: 2px;
  }
  .dex-bal.warn { color: var(--accent-red); }

  .dex-swap-col {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 14px; gap: 10px; flex-shrink: 0; margin-top: 12px;
  }
  .dex-swap-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--surface3); border: 1px solid var(--border);
    color: var(--accent-gold); font-size: 1.1rem;
    cursor: pointer; transition: .2s; display: flex; align-items: center; justify-content: center;
  }
  .dex-swap-btn:hover { background: rgba(245,200,66,.12); transform: rotate(180deg); }
  .dex-rate-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .dex-rate-lbl { font-size: .6rem; color: var(--text-muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .dex-rate-input {
    width: 90px; padding: 7px 8px; text-align: center;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--accent-gold);
    font-family: 'Tajawal', sans-serif; font-size: .82rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .dex-rate-input:focus { outline: none; border-color: var(--accent-gold); }

  .dex-footer {
    border-top: 1px solid var(--border); padding: 12px 20px 16px;
    background: var(--surface2);
    display: flex; flex-direction: column; gap: 10px;
  }
  .dex-preview {
    display: flex; align-items: center; gap: 10px;
    font-size: .85rem; font-weight: 700; min-height: 22px;
  }
  .dex-preview-from { color: var(--accent-red); }
  .dex-preview-to   { color: var(--accent-green); }
  .dex-preview-arrow { color: var(--text-muted); }
  .dex-client-row { display: flex; gap: 10px; align-items: center; }
  .dex-client-input {
    flex: 1; padding: 8px 12px;
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal', sans-serif; font-size: .85rem;
  }
  .dex-client-input:focus { outline: none; border-color: var(--accent-gold); }
  .dex-exec-btn {
    padding: 9px 20px; white-space: nowrap; font-size: .88rem;
    border-radius: var(--radius-sm);
  }
  .dex-err { font-size: .8rem; color: var(--accent-red); min-height: 18px; }

  @media(max-width:700px) {
    .dex-body { flex-direction: column; }
    .dex-swap-col { flex-direction: row; padding: 8px 0; }
  }


  /* ══ EXCHANGE LOG ══ */
  .exlog-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 14px; margin-bottom: 20px;
  }
  .exlog-stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
    position: relative; overflow: hidden;
  }
  .exlog-stat-card::before {
    content:''; position:absolute; top:0; right:0; width:4px; height:100%;
  }
  .exlog-stat-card.total::before  { background: var(--accent-gold); }
  .exlog-stat-card.profit::before { background: var(--accent-green); }
  .exlog-stat-card.usd::before    { background: var(--usd); }
  .exlog-stat-card.eur::before    { background: var(--eur); }
  .exlog-stat-card.try-c::before  { background: var(--try); }
  .exlog-stat-lbl { font-size:.72rem; color:var(--text-muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; }
  .exlog-stat-val { font-size:1.4rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
  .exlog-stat-val.green { color:var(--accent-green); }
  .exlog-stat-val.gold  { color:var(--accent-gold); }
  .exlog-stat-sub { font-size:.72rem; color:var(--text-muted); margin-top:4px; }

  .exlog-filters {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 16px; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .exlog-search-input {
    flex: 1; min-width: 160px; padding: 7px 12px;
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size:.85rem;
  }
  .exlog-search-input:focus { outline:none; border-color:var(--accent-gold); }
  .exlog-filters select {
    padding: 7px 10px; background: var(--surface3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size:.82rem;
  }
  .exlog-filters input[type="date"] {
    padding: 7px 10px; background: var(--surface3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size:.82rem;
  }

  .exlog-pair {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.82rem; font-weight:700;
  }
  .exlog-pair-arrow { color:var(--text-muted); font-size:.8rem; }
  .exlog-heading-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
  }
  .exlog-direction-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
  }
  .exlog-direction-arrow.out {
    color: var(--accent-red);
    background: rgba(239, 68, 68, .1);
  }
  .exlog-direction-arrow.in {
    color: var(--accent-green);
    background: rgba(16, 185, 129, .1);
  }
  #exchange-log .table-wrap { overflow: auto; }
  #exchange-log table {
    table-layout: fixed;
    min-width: 1180px;
  }
  #exchange-log th,
  #exchange-log td {
    height: 58px;
    max-height: 58px;
    padding: 7px 8px;
    vertical-align: middle;
    overflow: hidden;
  }
  #exchange-log .exlog-row.fc-row { background: rgba(245,200,66,.03); }
  .exlog-cell-clip {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 40px;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-word;
  }
  .exlog-client-cell {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
  }
  .exlog-user-cell {
    color: var(--text-dim);
    font-size: .76rem;
  }
  .exlog-amount {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .exlog-amount.out { color: var(--accent-red); }
  .exlog-amount.in { color: var(--accent-green); }
  .exlog-rate {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
  }
  .exlog-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Profit fields in DEX widget */
  .dex-profit-wrap {
    display:flex; align-items:center; gap:5px;
    background:rgba(62,207,142,.06); border:1px solid rgba(62,207,142,.2);
    border-radius:var(--radius-sm); padding:4px 10px;
  }
  .dex-profit-lbl { font-size:.72rem; color:var(--accent-green); font-weight:800; white-space:nowrap; }
  .dex-profit-input {
    width:80px; padding:5px 8px; text-align:center;
    background:transparent; border:none;
    color:var(--accent-green); font-family:'Tajawal',sans-serif;
    font-size:.88rem; font-weight:800;
  }
  .dex-profit-input:focus { outline:none; }
  .dex-profit-cur {
    background:transparent; border:none; color:var(--accent-green);
    font-family:'Tajawal',sans-serif; font-size:.82rem; font-weight:700; cursor:pointer;
  }


  /* ══ RATE LOCK ══ */
  .rate-lock-row { display:flex; align-items:center; gap:4px; }
  .rate-lock-btn {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    background:var(--surface3); border:1px solid var(--border);
    font-size:.9rem; cursor:pointer; transition:.15s;
    display:flex; align-items:center; justify-content:center;
    line-height:1;
  }
  .rate-lock-btn:hover { border-color:var(--accent-gold); }
  .rate-lock-btn.locked {
    background:rgba(245,200,66,.15);
    border-color:rgba(245,200,66,.6);
    box-shadow:0 0 8px rgba(245,200,66,.2);
  }
  .dex-rate-input.locked, .ex-rate-input.locked {
    border-color:rgba(245,200,66,.5) !important;
    background: rgba(245,200,66,.06) !important;
    color:var(--accent-gold) !important;
  }
  .rate-locked-badge {
    font-size:.65rem; font-weight:800; color:var(--accent-gold);
    background:rgba(245,200,66,.12); border:1px solid rgba(245,200,66,.3);
    border-radius:4px; padding:1px 6px; letter-spacing:.04em;
    animation: lockPulse 2s ease-in-out infinite;
  }
  @keyframes lockPulse { 0%,100%{opacity:1} 50%{opacity:.6} }


  /* ══ DUAL BUY/SELL RATES ══ */

  /* ── Dashboard widget ── */
  .dex-dual-rates {
    display: flex; flex-direction: column; gap: 6px; align-items: center;
    min-width: 130px;
  }
  .dex-rate-block { width: 100%; }
  .dex-rate-type-lbl {
    font-size: .62rem; font-weight: 900; letter-spacing: .06em;
    text-transform: uppercase; margin-bottom: 4px; text-align: center;
  }
  .dex-rate-type-lbl.buy  { color: var(--accent-green); }
  .dex-rate-type-lbl.sell { color: var(--accent-red); }

  .buy-input  { border-color: rgba(62,207,142,.4) !important; color: var(--accent-green) !important; }
  .sell-input { border-color: rgba(245,86,74,.4)  !important; color: var(--accent-red)   !important; }
  .buy-input:focus  { border-color: rgba(62,207,142,.8)  !important; }
  .sell-input:focus { border-color: rgba(245,86,74,.8)   !important; }
  .buy-input.locked  { background: rgba(62,207,142,.08) !important; }
  .sell-input.locked { background: rgba(245,86,74,.08)  !important; }

  .dex-spread-row {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 10px; width: 100%;
    justify-content: center;
  }
  .dex-spread-lbl { font-size: .65rem; color: var(--text-muted); font-weight: 700; }
  .dex-spread-val { font-size: .82rem; font-weight: 900; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
  .dex-market-line { font-size: .62rem; color: var(--text-muted); text-align: center; margin-top: 2px; }

  /* ── Exchange modal ── */
  .ex-dual-rate-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
  }
  .ex-dual-rates {
    display: flex; gap: 10px; align-items: flex-start;
  }
  .ex-rate-block { flex: 1; }
  .ex-rate-type-lbl {
    font-size: .72rem; font-weight: 900; letter-spacing: .05em;
    margin-bottom: 4px;
  }
  .ex-rate-type-lbl.buy  { color: var(--accent-green); }
  .ex-rate-type-lbl.sell { color: var(--accent-red); }
  .ex-rate-sub-lbl { font-size: .68rem; color: var(--text-muted); margin-bottom: 5px; }
  .ex-rate-cur-lbl { font-size: .78rem; color: var(--text-dim); font-weight: 700; white-space: nowrap; }

  .ex-spread-col {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0 8px; gap: 4px; margin-top: 28px;
  }
  .ex-spread-lbl { font-size: .65rem; color: var(--text-muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .ex-spread-val { font-size: 1rem; font-weight: 900; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
  .ex-spread-pct { font-size: .68rem; color: var(--accent-gold); opacity: .8; }


  /* ══ SPLIT BUY/SELL PANELS ══ */
  .dex-split-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    padding: 0;
  }

  .dex-panel {
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  .dex-panel-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--border);
  }
  .dex-panel-header.buy  { background: rgba(62,207,142,.07); }
  .dex-panel-header.sell { background: rgba(245,86,74,.07); }

  .dex-panel-icon { font-size: 1.1rem; }
  .dex-panel-title {
    font-size: 1rem; font-weight: 900; letter-spacing: .02em;
  }
  .buy  .dex-panel-title { color: var(--accent-green); }
  .sell .dex-panel-title { color: var(--accent-red); }
  .dex-panel-sub { font-size: .7rem; color: var(--text-muted); margin-right: 4px; }

  .dex-panel-body { padding: 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }

  .dex-panel-label {
    font-size: .68rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .05em; text-transform: uppercase;
    display: flex; align-items: center; gap: 5px;
  }
  .dex-panel-unit { font-size: .62rem; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

  .dex-panel-pills { display: flex; gap: 5px; }
  .dex-ppill {
    padding: 5px 11px; border-radius: 8px;
    background: var(--surface3); border: 1px solid var(--border);
    color: var(--text-dim); font-family: 'Tajawal',sans-serif;
    font-size: .78rem; font-weight: 700; cursor: pointer; transition: .15s;
  }
  .dex-ppill.buy.active  { background: rgba(62,207,142,.14); border-color: rgba(62,207,142,.5); color: var(--accent-green); }
  .dex-ppill.sell.active { background: rgba(245,86,74,.12);  border-color: rgba(245,86,74,.5);  color: var(--accent-red); }
  .dex-ppill:hover { opacity: .85; }

  .dex-panel-input-wrap {
    display: flex; align-items: center; gap: 5px; position: relative;
  }
  .dex-panel-input {
    flex: 1; padding: 9px 38px 9px 12px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size: 1rem; font-weight: 800;
    font-variant-numeric: tabular-nums; transition: .15s;
  }
  .dex-panel-input:focus { outline: none; background: var(--surface3); }
  .buy-panel  .dex-panel-input:focus { border-color: rgba(62,207,142,.6); }
  .sell-panel .dex-panel-input:focus { border-color: rgba(245,86,74,.6); }
  .dex-panel-input.buy-input  { border-color: rgba(62,207,142,.35); color: var(--accent-green); }
  .dex-panel-input.sell-input { border-color: rgba(245,86,74,.35);  color: var(--accent-red); }
  .dex-panel-sym {
    position: absolute; left: 10px;
    font-size: .82rem; font-weight: 800; color: var(--text-muted); pointer-events: none;
  }

  .dex-panel-result {
    border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 4px;
  }
  .dex-panel-result.buy  { background: rgba(62,207,142,.07); border: 1px solid rgba(62,207,142,.2); }
  .dex-panel-result.sell { background: rgba(245,86,74,.07);  border: 1px solid rgba(245,86,74,.2); }
  .dex-panel-result-lbl  { font-size: .65rem; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
  .dex-panel-result-val  { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .buy-panel  .dex-panel-result-val { color: var(--accent-green); }
  .sell-panel .dex-panel-result-val { color: var(--accent-red); }

  .dex-panel-footer {
    padding: 10px 18px 14px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px;
    background: var(--surface2);
  }

  .dex-panel-exec-btn {
    width: 100%; padding: 10px;
    border-radius: var(--radius-sm); border: none;
    font-family: 'Tajawal',sans-serif; font-size: .95rem; font-weight: 900;
    cursor: pointer; transition: .2s; letter-spacing: .02em;
  }
  .buy-exec  { background: rgba(62,207,142,.18); color: var(--accent-green); border: 1px solid rgba(62,207,142,.4); }
  .sell-exec { background: rgba(245,86,74,.15);  color: var(--accent-red);   border: 1px solid rgba(245,86,74,.4); }
  .buy-exec:hover  { background: rgba(62,207,142,.3);  transform: translateY(-1px); }
  .sell-exec:hover { background: rgba(245,86,74,.25);  transform: translateY(-1px); }

  .dex-split-divider {
    width: 1px; background: var(--border);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .dex-split-divider-label {
    position: absolute; background: var(--surface);
    border: 1px solid var(--border); border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--text-muted); font-weight: 700;
  }

  @media (max-width: 700px) {
    .dex-split-body { grid-template-columns: 1fr; }
    .dex-split-divider { width: 100%; height: 1px; }
    .dex-split-divider-label { top: 50%; left: 50%; transform: translate(-50%,-50%); }
  }


  /* ══ CUSTOM RATES BOARD ══ */
  .rates-board {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
  }
  .rates-board::before {
    content:''; position:absolute; top:0; right:0; left:0; height:3px; z-index:1;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold), var(--accent-blue), var(--accent-gold), var(--accent-green));
    background-size: 300% 100%;
    animation: boardShimmer 4s linear infinite;
  }
  @keyframes boardShimmer { 0%{background-position:100%} 100%{background-position:-100%} }

  .rates-board-header {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .rates-board-title {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 800; color: var(--text);
  }
  .rates-board-hint { font-size: .65rem; color: var(--text-muted); flex: 1; }

  .rates-board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .rate-pair-card {
    padding: 7px 10px;
    border-left: 1px solid var(--border);
    transition: background .15s;
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
  }
  .rate-pair-card:last-child { border-left: none; }
  .rate-pair-card:hover { background: var(--surface2); }

  .rate-pair-flags {
    font-size: .9rem; flex-shrink: 0;
    display: flex; align-items: center; gap: 2px;
  }
  .rate-pair-sep { color: var(--text-muted); font-size: .65rem; }
  .rate-pair-name { display: none; }

  .rate-pair-inputs {
    display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0;
  }
  .rate-pair-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rpf-lbl {
    font-size: .57rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
  }
  .rpf-lbl.buy  { color: var(--accent-green); }
  .rpf-lbl.sell { color: var(--accent-red); }

  .rpf-wrap { display: flex; align-items: center; border-radius: 5px; border: 1px solid var(--border); background: var(--surface3); min-width: 0; }
  .rpf-input {
    flex: 1; min-width: 0; width: 100%; padding: 5px 4px;
    background: transparent; border: none;
    color: var(--text); font-family: 'Tajawal',sans-serif;
    font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .rpf-input:focus { outline: none; }
  .rpf-input.buy-input  { color: var(--accent-green); }
  .rpf-input.sell-input { color: var(--accent-red); }
  .rpf-wrap:focus-within { border-color: var(--accent-gold); }

  .rpf-unit { display: none; }

  .rate-pair-divider { width: 1px; background: var(--border); height: 24px; flex-shrink: 0; }

  .rate-pair-spread {
    font-size: .58rem; color: var(--text-muted);
    white-space: nowrap; flex-shrink: 0; display: none;
  }
  .rate-pair-spread.has-spread { color: var(--accent-gold); font-weight: 700; display: block; }

  @media (max-width: 700px) {
    .rates-board-grid { grid-template-columns: 1fr; }
    .rate-pair-card { border-left: none; border-top: 1px solid var(--border); }
    .rate-pair-card:first-child { border-top: none; }
  }


  /* ── Rate pair card active state ── */
  .rate-pair-card.active-in-panel {
    border-right: 3px solid var(--accent-green);
    background: rgba(62,207,142,.03);
  }
  .rpf-input:not([value=""]):not([value="0"]) {
    background: rgba(245,200,66,.04);
  }
  /* flash animation when rate applied to panel */
  @keyframes rateFlash {
    0%   { background: rgba(245,200,66,.25); }
    100% { background: transparent; }
  }
  .rate-applied { animation: rateFlash .5s ease-out; }


  /* ══ QUICK ADD TRANSACTION ══ */
  /* ══ QUICK ADD ══ */
  .quick-add-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
    box-shadow: var(--shadow); position: relative;
  }
  .quick-add-wrap::before {
    content:''; position:absolute; top:0; right:0; left:0; height:3px; z-index:1;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-green), var(--accent-gold));
    background-size: 200% 100%; animation: qaShimmer 3s linear infinite;
  }
  @keyframes qaShimmer { 0%{background-position:100%} 100%{background-position:-100%} }

  .quick-add-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; background: var(--surface2);
    border-bottom: 1px solid var(--border); cursor: pointer;
  }
  .quick-add-header:hover { background: var(--surface3); }
  .quick-add-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 800; color: var(--accent-gold);
  }
  .quick-add-toggle {
    background: none; border: none; color: var(--text-muted);
    font-size: .85rem; cursor: pointer; transition: transform .25s; padding: 2px 6px;
  }
  .quick-add-wrap.collapsed .quick-add-toggle { transform: rotate(180deg); }
  .quick-add-body {
    padding: 14px 16px; transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
    max-height: 600px; overflow: hidden;
  }
  .quick-add-wrap.collapsed .quick-add-body {
    max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
  }

  /* ── شبكة الحقول الجديدة: صفّان منظمان ── */
  .quick-add-row {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(0, 1fr));
    gap: 10px; align-items: stretch;
  }
  @media (max-width: 1280px) {
    .quick-add-row {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .qa-field-submit {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  .qa-field {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 10px;
    transition: border-color .15s, background .15s;
  }
  .qa-field:hover { border-color: rgba(245,200,66,.25); }
  .qa-field:focus-within { border-color: var(--accent-gold); background: var(--surface3); }
  .qa-field-submit {
    background: transparent !important; border: none !important;
    padding: 0; display: flex; align-items: stretch;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .qa-lbl {
    font-size: .66rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .04em; text-transform: uppercase;
    display: flex; align-items: center; gap: 4px;
  }
  .qa-lbl::before {
    content: ''; width: 3px; height: 11px; border-radius: 2px;
    background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-dim));
  }

  /* أزرار النوع */
  .qa-type-pills { display: flex; gap: 4px; }
  .qa-type-pill {
    flex: 1; padding: 9px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    font-family: 'Tajawal',sans-serif; font-size: .82rem; font-weight: 800;
    cursor: pointer; transition: .15s; background: var(--surface); color: var(--text-muted);
    white-space: nowrap;
  }
  .qa-type-pill.in.active  {
    background: linear-gradient(135deg, rgba(62,207,142,.22), rgba(62,207,142,.1));
    border-color: var(--accent-green); color: var(--accent-green);
    box-shadow: 0 2px 6px rgba(62,207,142,.18);
  }
  .qa-type-pill.out.active {
    background: linear-gradient(135deg, rgba(245,86,74,.2), rgba(245,86,74,.08));
    border-color: var(--accent-red); color: var(--accent-red);
    box-shadow: 0 2px 6px rgba(245,86,74,.16);
  }
  .qa-type-pill:hover:not(.active) { background: var(--surface3); }

  /* أزرار العملة */
  .qa-cur-pills { display: flex; gap: 3px; }
  .qa-cur-pill {
    flex: 1; padding: 9px 4px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    font-family: 'Tajawal',sans-serif; font-size: .8rem; font-weight: 800;
    cursor: pointer; transition: .15s; background: var(--surface); color: var(--text-muted);
  }
  .qa-cur-pill.active {
    background: linear-gradient(135deg, rgba(245,200,66,.22), rgba(245,200,66,.08));
    border-color: var(--accent-gold); color: var(--accent-gold);
    box-shadow: 0 2px 6px rgba(245,200,66,.16);
  }
  .qa-cur-pill:hover:not(.active) { background: var(--surface3); }

  /* الحقول */
  .qa-input-wrap { position: relative; }
  .qa-input {
    width: 100%; padding: 9px 30px 9px 10px; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size: .9rem; font-weight: 700;
    transition: .13s; height: 38px;
  }
  .qa-input:focus { outline: none; border-color: var(--accent-gold); background: var(--surface2); }
  .inline-select-search {
    position: relative;
    width: 100%;
    min-width: 0;
  }
  .inline-select-search-input {
    width: 100%;
    height: 38px;
    padding: 8px 30px 8px 10px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-family: 'Tajawal', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .inline-select-search::before {
    content: '⌕';
    position: absolute;
    z-index: 2;
    right: 9px;
    top: 19px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .9rem;
    pointer-events: none;
  }
  .inline-select-search-input:focus {
    border-color: var(--accent-gold);
    background: var(--surface2);
    box-shadow: 0 0 0 2px rgba(217,119,6,.12);
  }
  .inline-select-search.disabled {
    opacity: .48;
  }
  .inline-select-search.disabled .inline-select-search-input {
    cursor: not-allowed;
    background: var(--surface2);
  }
  .inline-select-search-menu {
    display: none;
    position: absolute;
    z-index: 1200;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(15,23,42,.18);
  }
  .inline-select-search-menu.open { display: block; }
  .inline-select-search-option {
    display: block;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    text-align: right;
    font-family: 'Tajawal', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
  }
  .inline-select-search-option:hover,
  .inline-select-search-option.active {
    background: var(--surface3);
    color: var(--accent-gold);
  }
  .inline-select-search-empty {
    padding: 9px;
    color: var(--text-muted);
    text-align: center;
    font-size: .76rem;
  }
  .qa-select {
    padding: 9px 10px !important;
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%237a8290' d='M5 6L0 0h10z'/></svg>");
    background-repeat: no-repeat; background-position: left 10px center;
    padding-left: 28px !important;
  }
  .qa-sym {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: .82rem; font-weight: 800; color: var(--accent-gold); pointer-events: none;
  }

  /* زر الحفظ */
  .qa-submit-btn {
    width: 100%; padding: 0 22px; height: 100%; min-height: 78px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dim));
    border: none; color: #1a1500;
    font-family: 'Tajawal',sans-serif; font-size: 1rem; font-weight: 900;
    cursor: pointer; transition: .18s; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 4px 14px rgba(245,200,66,.25);
  }
  .qa-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245,200,66,.35);
  }
  .qa-submit-btn:active { transform: scale(.97); }

  /* أزرار التبديل بين شركة/عميل */
  .qa-party-tabs { display: flex; gap: 3px; margin-bottom: 4px; }
  .qa-party-tab {
    flex: 1; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-muted);
    font-size: .68rem; font-weight: 800; cursor: pointer; transition: .13s;
    font-family: 'Tajawal',sans-serif;
  }
  .qa-party-tab.active {
    background: rgba(245,200,66,.15); border-color: var(--accent-gold); color: var(--accent-gold);
  }
  .qa-party-tab:hover:not(.active) { background: var(--surface3); }

  .qa-err { font-size: .78rem; color: var(--accent-red); min-height: 16px; margin-top: 8px; }

  @media (max-width: 1000px) {
    .quick-add-row {
      grid-template-columns: 1fr 1fr;
    }
    .qa-field-submit { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .quick-add-row { grid-template-columns: 1fr; }
    #hw-in-debtor-row > div:last-child,
    #hw-out-debtor-row > div:last-child,
    #hw-sw-debtor-row > div:last-child {
      grid-template-columns: 1fr !important;
    }
  }


  /* ══ EDITABLE RESULT INPUT ══ */
  .dex-result-input-wrap {
    display: flex; align-items: center; gap: 5px; position: relative;
  }
  .dex-result-input {
    flex: 1; padding: 8px 36px 8px 10px;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.2rem; font-weight: 900;
    font-variant-numeric: tabular-nums;
    background: transparent; width: 100%;
    transition: .2s;
  }
  .dex-result-input:focus {
    outline: none;
    background: var(--surface3);
  }
  .buy-result-input  { color: var(--accent-green); }
  .buy-result-input:focus  { border-color: rgba(62,207,142,.5); }
  .sell-result-input { color: var(--accent-red); }
  .sell-result-input:focus { border-color: rgba(245,86,74,.5); }

  .dex-result-sym {
    position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
    font-size: .8rem; font-weight: 800; color: var(--text-muted);
    pointer-events: none;
  }
  .result-calc-btn {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--surface3); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .75rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: .15s; flex-shrink: 0;
  }
  .result-calc-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

  /* مؤشر التعديل اليدوي */
  .dex-panel-result.manual-override {
    border-style: dashed !important;
  }
  .dex-panel-result.manual-override .dex-panel-result-lbl::after {
    content: ' ✏️';
    font-size: .6rem;
  }


  /* ── Pair row selector ── */
  .dex-pair-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
  }
  .dex-pair-col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .dex-pair-arrow {
    font-size: 1rem; color: var(--text-muted); flex-shrink: 0;
    padding: 0 2px; margin-top: 18px;
  }
  /* "مقابل" pills — نفس شكل العملة لكن بألوان أفتح */
  .dex-ppill.buy-to.active  { background: rgba(62,207,142,.09);  border-color: rgba(62,207,142,.35); color: var(--accent-green); opacity: .85; }
  .dex-ppill.sell-to.active { background: rgba(245,86,74,.08);   border-color: rgba(245,86,74,.35);  color: var(--accent-red);   opacity: .85; }
  .dex-ppill.buy-to, .dex-ppill.sell-to { font-size: .72rem; padding: 4px 9px; }


  /* ══ COMPACT EXCHANGE WIDGET ══ */
  /* ══ DEX COMPACT ROW — ارتفاع موحّد 34px لكل العناصر ══ */
  :root { --dex-h: 38px; --dex-r: 8px; --dex-fs: .88rem; --dex-gap: 10px; }

  .dex-compact-row {
    display: flex; align-items: center;
    gap: var(--dex-gap); padding: 10px 16px;
    flex-wrap: nowrap; box-sizing: border-box;
  }
  .buy-row  { background: rgba(62,207,142,.04); }
  .sell-row { background: rgba(245,86,74,.04); }

  /* ── شارة — نفس الارتفاع ── */
  .dex-compact-badge {
    flex: 0 0 auto;
    height: var(--dex-h); padding: 0 10px; border-radius: var(--dex-r);
    font-size: var(--dex-fs); font-weight: 900;
    display: flex; align-items: center; white-space: nowrap; box-sizing: border-box;
  }
  .dex-compact-badge.buy  { background: rgba(62,207,142,.18); color: var(--accent-green); border: 1px solid rgba(62,207,142,.35); }
  .dex-compact-badge.sell { background: rgba(245,86,74,.14);  color: var(--accent-red);   border: 1px solid rgba(245,86,74,.35); }

  /* ── أزرار العملة — نفس الارتفاع ── */
  .dex-compact-pairs { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
  .dex-ppill-group   { display: flex; gap: 3px; }
  .dex-compact-arrow { color: var(--text-muted); font-size: .85rem; padding: 0 1px; }
  .dex-ppill {
    width: var(--dex-h); height: var(--dex-h);
    border-radius: var(--dex-r); border: 1px solid var(--border);
    background: var(--surface3); cursor: pointer; transition: .12s;
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
    padding: 0; box-sizing: border-box;
  }
  .dex-ppill:hover { border-color: var(--accent-gold); transform: scale(1.07); }
  .dex-ppill.buy.active     { border-color: rgba(62,207,142,.65); background: rgba(62,207,142,.18); }
  .dex-ppill.sell.active    { border-color: rgba(245,86,74,.65);  background: rgba(245,86,74,.15); }
  .dex-ppill.buy-to.active  { border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.1); }
  .dex-ppill.sell-to.active { border-color: rgba(245,86,74,.45);  background: rgba(245,86,74,.09); }

  /* ── حقول إدخال — تتوزع بالتساوي ── */
  .dex-compact-field {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
  }
  .dex-compact-profit-wrap { flex: 0 0 80px; min-width: 0; }

  .dex-compact-lbl {
    font-size: .6rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  }
  .dex-compact-input-wrap { position: relative; display: flex; align-items: center; }

  /* ── حقل النص — ارتفاع موحّد بالـ padding ── */
  .dex-compact-input {
    width: 100%; min-width: 0; box-sizing: border-box;
    height: var(--dex-h); padding: 0 20px 0 8px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--dex-r); color: var(--text);
    font-family: 'Tajawal',sans-serif;
    font-size: var(--dex-fs); font-weight: 700;
    font-variant-numeric: tabular-nums; transition: .12s;
  }
  .dex-compact-input:focus { outline: none; border-color: var(--accent-gold); background: var(--surface3); }
  .dex-compact-input.buy-input  { border-color: rgba(62,207,142,.4); color: var(--accent-green); }
  .dex-compact-input.sell-input { border-color: rgba(245,86,74,.4);  color: var(--accent-red); }
  .dex-compact-input.dex-compact-result.buy  { border-color: rgba(62,207,142,.5); background: rgba(62,207,142,.07); font-weight:900; }
  .dex-compact-input.dex-compact-result.sell { border-color: rgba(245,86,74,.5);  background: rgba(245,86,74,.06); font-weight:900; }

  .dex-compact-sym {
    position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
    font-size: .65rem; font-weight: 800; color: var(--text-muted); pointer-events: none;
  }
  .dex-compact-sym-sel {
    position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--text-muted);
    font-family: 'Tajawal',sans-serif; font-size: .65rem; font-weight: 800;
    cursor: pointer; padding: 0;
  }

  /* ── زر القفل — نفس الارتفاع ── */
  .rate-lock-btn {
    flex-shrink: 0;
    width: var(--dex-h); height: var(--dex-h);
    border-radius: var(--dex-r); font-size: .82rem;
    box-sizing: border-box;
  }

  /* ── زر التنفيذ — نفس الارتفاع ── */
  .dex-compact-exec {
    flex: 0 0 auto;
    height: var(--dex-h); padding: 0 14px; border-radius: var(--dex-r);
    font-family: 'Tajawal',sans-serif;
    font-size: var(--dex-fs); font-weight: 900;
    cursor: pointer; transition: .15s; border: 1px solid; white-space: nowrap;
    box-sizing: border-box; display: flex; align-items: center;
  }
  .dex-compact-exec.buy-exec  { background: rgba(62,207,142,.18); border-color: rgba(62,207,142,.45); color: var(--accent-green); }
  .dex-compact-exec.sell-exec { background: rgba(245,86,74,.14);  border-color: rgba(245,86,74,.45);  color: var(--accent-red); }
  .dex-compact-exec:hover { opacity: .85; transform: translateY(-1px); }

  .dex-compact-bal { flex: 0 0 auto; font-size: .62rem; color: var(--text-muted); white-space: nowrap; }
  .dex-compact-bal.warn { color: var(--accent-red); }
  .dex-compact-err { flex: 0 0 auto; font-size: .68rem; color: var(--accent-red); }

  .dex-compact-divider { height: 1px; background: var(--border); }

  /* إخفاء القديم */
  .dex-split-body, .dex-panel, .dex-panel-header, .dex-panel-body,
  .dex-panel-footer, .dex-split-divider { display: none !important; }
  .dex-split-body:has(.dex-compact-row) { display: block !important; }

  @media (max-width: 900px) {
    :root { --dex-gap: 5px; }
    .dex-compact-row { flex-wrap: wrap; padding: 8px 12px; }
    .dex-compact-profit-wrap { flex: 1 1 70px; }
  }


  /* ══ COLLAPSIBLE SECTIONS ══ */
  .collapsible-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .collapsible-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    cursor: pointer; gap: 10px;
    font-size: .92rem; font-weight: 800; color: var(--text);
    user-select: none;
  }
  .collapsible-header:hover { background: var(--surface3); }
  .collapsible-header > span:first-child { flex: 1; }

  .section-toggle-btn {
    background: none; border: none; color: var(--text-muted);
    font-size: .8rem; cursor: pointer; padding: 2px 6px;
    transition: transform .25s ease; flex-shrink: 0;
    pointer-events: none;
  }

  /* الطي/الفرد */
  .section-collapsible {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease;
    opacity: 1;
  }
  .collapsed-section > .section-collapsible,
  .collapsed-section > div > .section-collapsible {
    max-height: 0;
    opacity: 0;
  }
  .collapsed-section > .rates-board-header .section-toggle-btn,
  .collapsed-section > .dex-header .section-toggle-btn,
  .collapsed-section > .collapsible-header .section-toggle-btn,
  .collapsed-section > .quick-add-header .quick-add-toggle {
    transform: rotate(180deg);
  }

  /* تطبيق نفس التصميم على quick-add-wrap وrates-board و dash-exchange-widget */
  .rates-board-header, .dex-header {
    cursor: pointer; user-select: none;
  }

  /* إخفاء border-bottom عند الطي */
  .collapsed-section > .rates-board-header,
  .collapsed-section > .dex-header,
  .collapsed-section > .collapsible-header {
    border-bottom-color: transparent;
  }


    50%  { background-position:  -100% 0; opacity: 1; }
    100% { background-position: 100% 0; opacity: .7; }
  }

  /* ══════════════════════════════════════
     CLIENTS SYSTEM
  ══════════════════════════════════════ */

  /* Category badges */
  .client-cat-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:20px;
    font-size:.72rem; font-weight:800; letter-spacing:.03em;
  }
  .cat-company  { background:rgba(76,142,245,.14);  color:#4c8ef5;  border:1px solid rgba(76,142,245,.3);  }
  .cat-debt     { background:rgba(245,86,74,.14);   color:#f5564a;  border:1px solid rgba(245,86,74,.3);   }
  .cat-group    { background:rgba(155,114,245,.14); color:#9b72f5;  border:1px solid rgba(155,114,245,.3); }
  .cat-personal { background:rgba(62,207,142,.14);  color:#3ecf8e;  border:1px solid rgba(62,207,142,.3);  }
  .cat-vip      { background:rgba(245,200,66,.14);  color:#f5c842;  border:1px solid rgba(245,200,66,.3);  }
  .cat-supplier { background:rgba(201,162,46,.14);  color:#c9a22e;  border:1px solid rgba(201,162,46,.3);  }

  /* Clients grid (index page) */
  .clients-toolbar {
    display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;
  }
  .clients-toolbar .clients-search {
    flex:1; min-width:180px; padding:8px 14px;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface2); color:var(--text);
    font-family:'Tajawal',sans-serif; font-size:.88rem;
  }
  .clients-search:focus { outline:none; border-color:var(--accent-gold); }
  .clients-cat-filters { display:flex; gap:5px; flex-wrap:wrap; }
  .party-balance-summary {
    display:grid; grid-template-columns:minmax(160px,.75fr) repeat(3,minmax(110px,1fr));
    gap:8px; align-items:stretch; margin:-6px 0 16px;
  }
  .pbs-heading,
  .pbs-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 12px;
  }
  .pbs-heading {
    display:flex; flex-direction:column; justify-content:center; gap:3px;
    color:var(--text); font-size:.78rem; font-weight:900;
  }
  .pbs-heading b { color:var(--text-muted); font-size:.66rem; font-weight:800; }
  .pbs-cards {
    display:contents;
  }
  .pbs-card {
    text-align:center; position:relative; overflow:hidden;
  }
  .pbs-card.positive { border-color:rgba(62,207,142,.24); }
  .pbs-card.negative { border-color:rgba(245,86,74,.24); }
  .pbs-label {
    font-size:.62rem; color:var(--text-muted); font-weight:900;
    letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px;
  }
  .pbs-value {
    font-size:1rem; font-weight:900; font-variant-numeric:tabular-nums;
    direction:ltr; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pbs-value.positive { color:var(--accent-green); }
  .pbs-value.negative { color:var(--accent-red); }
  @media (max-width: 760px) {
    .party-balance-summary { grid-template-columns:1fr 1fr; }
    .pbs-heading { grid-column:1/-1; }
  }
  .cat-filter-btn {
    padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:700;
    border:1px solid var(--border); background:var(--surface3); color:var(--text-dim);
    cursor:pointer; transition:.15s; font-family:'Tajawal',sans-serif;
  }
  .cat-filter-btn:hover { border-color:var(--accent-gold); color:var(--accent-gold); }
  .cat-filter-btn.active { background:rgba(245,200,66,.15); border-color:var(--accent-gold); color:var(--accent-gold); }

  .clients-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:14px; margin-bottom:24px;
  }
  .client-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:0; overflow:hidden;
    transition:.2s; cursor:pointer; position:relative;
  }
  .client-card:hover { border-color:var(--accent-gold); transform:translateY(-2px); box-shadow:var(--shadow); }
  .client-card-stripe {
    height:3px; width:100%;
  }
  .client-card-body { padding:14px 16px 12px; }
  .client-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
  .client-avatar {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:900; color:#fff;
  }
  .client-card-info { flex:1; min-width:0; }
  .client-card-name { font-size:.95rem; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .client-card-sub  { font-size:.72rem; color:var(--text-muted); margin-top:1px; }
  .client-card-actions { display:flex; gap:5px; flex-shrink:0; }
  .client-card-stats {
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px; padding-top:10px; border-top:1px solid var(--border);
    margin-top:4px;
  }
  .cs-item { text-align:center; min-width:0; }
  .cs-val {
    font-size:.78rem; font-weight:900; font-variant-numeric:tabular-nums;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr;
  }
  .cs-lbl { font-size:.58rem; color:var(--text-muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }
  .cs-val.green { color:var(--accent-green); }
  .cs-val.red   { color:var(--accent-red);   }
  .cs-val.gold  { color:var(--accent-gold);  }
  .client-card-notes {
    font-size:.72rem; color:var(--text-dim); margin-top:8px;
    padding-top:8px; border-top:1px solid var(--border);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Client profile page */
  .client-profile-header {
    border-radius:var(--radius); overflow:hidden; margin-bottom:20px;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  }
  .client-profile-banner { height:80px; position:relative; }
  .client-profile-body   { padding:0 22px 20px; }
  .client-profile-avatar {
    width:64px; height:64px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; font-weight:900; color:#fff;
    border:3px solid var(--surface); margin-top:-32px;
    position:relative; z-index:1;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
  }
  .client-profile-meta { margin-top:10px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  .client-profile-name { font-size:1.3rem; font-weight:900; color:var(--text); }
  .client-profile-sub  { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
  .client-profile-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
  .client-profile-stats {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
    gap:10px; margin:16px 0 0;
  }
  .cps-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:12px 14px; text-align:center;
  }
  .cps-val { font-size:1.1rem; font-weight:900; font-variant-numeric:tabular-nums; }
  .cps-lbl { font-size:.65rem; color:var(--text-muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-top:3px; }
  .client-balance-row {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:10px; margin-bottom:18px;
  }
  .cbal-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:12px 16px;
    position:relative; overflow:hidden;
  }
  .cbal-cur  { font-size:.68rem; font-weight:800; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
  .cbal-val  { font-size:1.1rem; font-weight:900; margin-top:4px; font-variant-numeric:tabular-nums; }
  .cbal-sub  { font-size:.65rem; color:var(--text-muted); margin-top:2px; }
  /* cbal-val colors set dynamically via inline style based on balance sign */

  /* Client modal */
  .client-modal-inner { max-width:560px; }
  .client-cat-select {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:4px 0 12px;
  }
  .cat-opt {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:10px 8px; border-radius:var(--radius-sm);
    border:2px solid var(--border); background:var(--surface2);
    cursor:pointer; transition:.15s; user-select:none;
    font-size:.75rem; font-weight:700; color:var(--text-dim); text-align:center;
  }
  .cat-opt:hover { border-color:var(--accent-gold); color:var(--text); }
  .cat-opt.selected { border-color:var(--accent-gold); background:rgba(245,200,66,.1); color:var(--accent-gold); }
  .cat-opt .cat-icon { font-size:1.4rem; }

  .client-color-row { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
  .color-swatch-btn {
    width:28px; height:28px; border-radius:8px; border:2px solid transparent;
    cursor:pointer; transition:.15s; flex-shrink:0;
  }
  .color-swatch-btn.selected { border-color:var(--text) !important; transform:scale(1.15); }

  /* Empty state inside client profile */
  .client-no-tx { text-align:center; padding:40px 20px; color:var(--text-muted); }

  /* ══ PAYMENT STATUS SYSTEM ══ */

  /* خيار مدفوع / غير مدفوع في المودال */
  .payment-toggle-row {
    display: flex; gap: 8px; margin: 4px 0 12px;
  }
  .pay-opt {
    flex: 1; padding: 10px 8px; border-radius: var(--radius-sm);
    border: 2px solid var(--border); background: var(--surface2);
    cursor: pointer; transition: .15s; text-align: center;
    font-size: .82rem; font-weight: 700; color: var(--text-dim);
    user-select: none;
  }
  .pay-opt:hover { border-color: var(--accent-gold); color: var(--text); }
  .pay-opt.selected.paid       { border-color: var(--accent-green); background: rgba(62,207,142,.1);  color: var(--accent-green); }
  .pay-opt.selected.unpaid     { border-color: var(--accent-red);   background: rgba(245,86,74,.1);   color: var(--accent-red);   }
  .pay-opt.selected.received   { border-color: var(--accent-green); background: rgba(62,207,142,.1);  color: var(--accent-green); }
  .pay-opt.selected.unreceived { border-color: #f59e0b;             background: rgba(245,158,11,.1);  color: #f59e0b;             }

  /* حقل تاريخ الاستحقاق */
  .due-date-row { display: none; }
  .due-date-row.show { display: block; }

  /* شارة الحالة في الجداول */
  .pay-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 10px;
    font-size: .7rem; font-weight: 800; white-space: nowrap;
  }
  .pay-badge.paid   { background: rgba(62,207,142,.12); color: var(--accent-green); border: 1px solid rgba(62,207,142,.3); }
  .pay-badge.unpaid { background: rgba(245,86,74,.12);  color: var(--accent-red);   border: 1px solid rgba(245,86,74,.3); }
  .pay-badge.overdue{ background: rgba(245,86,74,.22);  color: #ff2d1a; border: 1px solid rgba(245,86,74,.5); animation: overdueFlash 2s ease-in-out infinite; }
  @keyframes overdueFlash { 0%,100%{opacity:1} 50%{opacity:.6} }

  /* جدول المدفوعات المعلقة (داشبورد + صفحة عميل) */
  .pending-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); margin-bottom: 20px;
  }
  .pending-section::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg, var(--accent-red), #ff6b35, var(--accent-gold));
    background-size: 200% 100%;
    animation: pendingBar 3s linear infinite;
  }
  @keyframes pendingBar { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
  .pending-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: var(--surface2);
  }
  .pending-title {
    font-size: .9rem; font-weight: 800;
    display: flex; align-items: center; gap: 8px; color: var(--text);
  }
  .pending-count-chip {
    background: var(--accent-red); color: #fff;
    padding: 1px 8px; border-radius: 10px;
    font-size: .7rem; font-weight: 800;
  }
  .pending-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
  .pending-table thead th {
    padding: 8px 14px; font-size: .67rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); background: var(--surface2);
    border-bottom: 1px solid var(--border); text-align: right;
  }
  .pending-table tbody tr { border-bottom: 1px solid var(--border); transition: .12s; }
  .pending-table tbody tr:last-child { border-bottom: none; }
  .pending-table tbody tr:hover { background: var(--surface2); }
  .pending-table td { padding: 9px 14px; vertical-align: middle; }
  .due-date-cell { font-variant-numeric: tabular-nums; }
  .due-overdue { color: var(--accent-red); font-weight: 800; }
  .due-today   { color: var(--accent-gold); font-weight: 800; }
  .due-soon    { color: #f59e0b; }
  .due-ok      { color: var(--text-dim); }
  .pending-empty {
    padding: 28px; text-align: center;
    color: var(--text-muted); font-size: .85rem;
  }

  /* زر دفع سريع */
  .btn-pay-now {
    padding: 4px 12px; border-radius: 7px; font-size: .75rem; font-weight: 700;
    border: 1px solid rgba(62,207,142,.4); background: rgba(62,207,142,.1);
    color: var(--accent-green); cursor: pointer; transition: .15s;
    font-family: 'Tajawal', sans-serif; white-space: nowrap;
  }
  .btn-pay-now:hover { background: rgba(62,207,142,.2); transform: translateY(-1px); }

  /* ملخص الديون في صفحة العميل */
  .client-debt-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
    gap: 10px; margin-bottom: 16px;
  }
  .cds-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 14px; text-align: center;
  }
  .cds-val { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .cds-lbl { font-size: .63rem; color: var(--text-muted); font-weight: 700;
             letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; }

  /* ══ CLIENT PICKER (unpaid debt modal) ══ */
  .client-picker-section {
    display: none; margin-top: 4px;
  }
  .client-picker-section.show { display: block; }
  .client-picker-label {
    font-size: .72rem; font-weight: 800; color: var(--accent-red);
    letter-spacing: .05em; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
  }
  .client-picker-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(245,86,74,.4), transparent);
  }
  .client-picker-search {
    width: 100%; padding: 7px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text); font-family: 'Tajawal', sans-serif;
    font-size: .85rem; margin-bottom: 8px; transition: border-color .15s;
  }
  .client-picker-search:focus { outline: none; border-color: var(--accent-red); }
  .client-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 7px; max-height: 220px; overflow-y: auto;
    padding: 2px; margin-bottom: 4px;
  }
  .client-picker-grid::-webkit-scrollbar { width: 4px; }
  .client-picker-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .cp-card {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    border: 2px solid var(--border); background: var(--surface2);
    cursor: pointer; transition: .15s; user-select: none;
  }
  .cp-card:hover { border-color: var(--accent-gold); background: var(--surface3); }
  .cp-card.selected {
    border-color: var(--accent-red);
    background: rgba(245,86,74,.08);
  }
  .cp-card.cp-hidden { display: none; }
  .cp-avatar {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 900; color: #fff;
  }
  .cp-info { min-width: 0; flex: 1; }
  .cp-name { font-size: .8rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-cat  { font-size: .62rem; color: var(--text-muted); margin-top: 1px; }
  .cp-selected-display {
    display: none; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    background: rgba(245,86,74,.08); border: 1px solid rgba(245,86,74,.3);
    margin-bottom: 8px;
  }
  .cp-selected-display.show { display: flex; }
  .cp-selected-name { font-size: .88rem; font-weight: 800; color: var(--text); flex: 1; }
  .cp-clear-btn {
    font-size: .75rem; color: var(--text-muted); cursor: pointer;
    padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface3); transition: .12s;
  }
  .cp-clear-btn:hover { color: var(--accent-red); border-color: var(--accent-red); }
  .cp-no-clients {
    text-align: center; padding: 20px; color: var(--text-muted);
    font-size: .82rem; grid-column: 1 / -1;
  }
  .cp-add-new-btn {
    width: 100%; padding: 7px; border-radius: var(--radius-sm);
    border: 1px dashed var(--border); background: transparent;
    color: var(--accent-gold); font-family: 'Tajawal', sans-serif;
    font-size: .8rem; font-weight: 700; cursor: pointer; transition: .15s;
    margin-top: 4px;
  }
  .cp-add-new-btn:hover { background: rgba(245,200,66,.08); border-color: var(--accent-gold); }

  /* ══ COMPANIES SECTION ══ */
  .companies-toolbar {
    display:flex; flex-direction:column; gap:8px; margin-bottom:18px;
  }
  .companies-search {
    flex:1; min-width:180px; padding:8px 14px;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface2); color:var(--text);
    font-family:'Tajawal',sans-serif; font-size:.88rem;
  }
  .companies-search:focus { outline:none; border-color:var(--accent-gold); }
  .co-type-filter {
    padding:5px 12px; border-radius:20px; border:1px solid var(--border);
    background:var(--surface2); color:var(--text-muted);
    font-family:'Tajawal',sans-serif; font-size:.8rem; font-weight:700;
    cursor:pointer; transition:.15s; white-space:nowrap;
  }
  .co-type-filter:hover { background:var(--surface3); color:var(--text); }
  .co-type-filter.active {
    background:linear-gradient(135deg,rgba(245,200,66,.22),rgba(245,200,66,.1));
    border-color:var(--accent-gold); color:var(--accent-gold);
    box-shadow:0 1px 4px rgba(245,200,66,.18);
  }
  .companies-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
  }
  .company-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    transition:.2s; cursor:pointer; position:relative;
  }
  .company-card:hover { border-color:var(--accent-gold); transform:translateY(-2px); box-shadow:var(--shadow); }
  .company-card-stripe { height:3px; width:100%; }
  .company-card-body { padding:14px 16px 12px; }
  .company-card-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .company-avatar {
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; font-weight:900; color:#fff;
  }
  .company-card-info { flex:1; min-width:0; }
  .company-card-name { font-size:.95rem; font-weight:800; color:var(--text); }
  .company-card-sub  { font-size:.72rem; color:var(--text-muted); margin-top:1px; }
  .company-card-actions { display:flex; gap:5px; flex-shrink:0; }
  .company-card-balances {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
    padding-top:10px; border-top:1px solid var(--border);
  }
  .ccb-item { text-align:center; }
  .ccb-val { font-size:.8rem; font-weight:900; font-variant-numeric:tabular-nums; }
  .ccb-lbl { font-size:.58rem; color:var(--text-muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  /* ccb-val colors set dynamically via inline style based on balance sign */

  /* Company profile page */
  .company-profile-header {
    border-radius:var(--radius); overflow:hidden; margin-bottom:20px;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  }
  .company-profile-banner { height:70px; position:relative; }
  .company-profile-body   { padding:0 22px 20px; }
  .company-profile-avatar {
    width:60px; height:60px; border-radius:15px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; font-weight:900; color:#fff;
    border:3px solid var(--surface); margin-top:-30px; position:relative; z-index:1;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
  }
  .company-profile-meta { margin-top:10px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  .company-profile-name { font-size:1.2rem; font-weight:900; color:var(--text); }
  .company-profile-stats {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0 0;
  }
  .cmpps-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 14px; text-align:center;
  }
  .cmpps-val { font-size:1.05rem; font-weight:900; font-variant-numeric:tabular-nums; }
  .cmpps-lbl { font-size:.63rem; color:var(--text-muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-top:3px; }
  .company-balance-row {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:18px;
  }

  /* Company modal */
  .company-color-row { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }

  /* ══ COMPANY TRANSFER MODAL ══ */
  .transfer-modal-inner { max-width: 560px; }

  .transfer-company-row {
    display: grid; grid-template-columns: 1fr 48px 1fr;
    gap: 0; align-items: start; margin-bottom: 14px;
  }
  .transfer-side { }
  .transfer-side-label {
    font-size: .68rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .transfer-company-select {
    width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text); font-family: 'Tajawal', sans-serif; font-size: .88rem;
    font-weight: 700; transition: border-color .15s;
  }
  .transfer-company-select:focus { outline: none; border-color: var(--accent-gold); }
  .transfer-company-bal {
    font-size: .72rem; color: var(--text-muted); margin-top: 5px;
    padding: 4px 10px; background: var(--surface3); border-radius: 6px;
    min-height: 24px;
  }
  .transfer-arrow-col {
    display: flex; align-items: center; justify-content: center; padding-top: 38px;
  }
  .transfer-swap-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface3); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--accent-gold); cursor: pointer; transition: .2s;
  }
  .transfer-swap-btn:hover { transform: rotate(180deg); border-color: var(--accent-gold); background: rgba(245,200,66,.1); }

  .transfer-amount-row {
    display: grid; grid-template-columns: 1fr 120px; gap: 10px; margin-bottom: 14px;
  }
  .transfer-preview {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .tp-side { text-align: center; }
  .tp-name  { font-size: .72rem; color: var(--text-muted); margin-bottom: 4px; }
  .tp-val   { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .tp-arrow { font-size: 1.4rem; color: var(--accent-gold); padding: 0 8px; }

  /* Transfer log in company profile */
  .transfer-log-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-bottom: 1px solid var(--border);
    font-size: .83rem; transition: .12s;
  }
  .transfer-log-row:last-child { border-bottom: none; }
  .transfer-log-row:hover { background: var(--surface2); }
  .transfer-dir-badge {
    font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 8px;
    white-space: nowrap; flex-shrink: 0;
  }
  .tdir-out { background: rgba(245,86,74,.12); color: var(--accent-red); }
  .tdir-in  { background: rgba(62,207,142,.12); color: var(--accent-green); }

  /* ══ OVERVIEW / BALANCES PAGE ══ */
  .ov-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-bottom: 24px;
  }
  .ov-hero-card {
    border-radius: var(--radius); padding: 20px 22px;
    border: 1px solid var(--border); background: var(--surface);
    box-shadow: var(--shadow); position: relative; overflow: hidden;
    transition: .2s;
  }
  .ov-hero-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
  .ov-hero-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  }
  .ov-hero-card.usd::before { background: var(--usd); }
  .ov-hero-card.eur::before { background: var(--eur); }
  .ov-hero-card.try::before { background: var(--try); }
  .ov-hero-label  { font-size: .7rem; font-weight: 800; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
  .ov-hero-val    { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
  .ov-hero-sub    { font-size: .72rem; color: var(--text-muted); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
  .ov-hero-sub span { display: inline-flex; align-items: center; gap: 3px; }

  /* Section divider */
  .ov-section {
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: border-color .2s, box-shadow .2s;
  }
  .ov-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--accent-gold) 20%,
      var(--accent-gold) 50%,
      var(--accent-gold) 80%,
      transparent 100%);
    box-shadow: 0 0 12px var(--accent-gold), 0 0 20px rgba(245,200,66,.5);
    opacity: .85;
    z-index: 1;
    transition: opacity .2s;
  }
  .ov-section:hover::before { opacity: 1; }
  .ov-section:hover { border-color: rgba(245,200,66,.35); }

  .ov-section-title {
    font-size: .82rem; font-weight: 800; letter-spacing: .04em;
    color: var(--text); margin: 0;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    padding: 14px 16px;
    background: linear-gradient(180deg, var(--surface2), var(--surface));
    border-bottom: 1px solid var(--border);
    transition: background .2s, color .2s;
  }
  .ov-section-title:hover {
    background: linear-gradient(180deg, rgba(245,200,66,.06), var(--surface));
    color: var(--accent-gold);
  }
  .ov-section-title::after { content: ''; flex: 1; }

  .ov-section-title .ov-toggle-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, rgba(245,200,66,.15), rgba(245,200,66,.05));
    color: var(--accent-gold);
    font-size: .7rem; font-weight: 900;
    transition: transform .25s cubic-bezier(.4,0,.2,1), background .2s;
    border: 1px solid rgba(245,200,66,.25);
    flex-shrink: 0;
  }
  .ov-section-title:hover .ov-toggle-arrow {
    background: linear-gradient(135deg, rgba(245,200,66,.25), rgba(245,200,66,.1));
    border-color: rgba(245,200,66,.5);
  }
  .ov-section.collapsed .ov-toggle-arrow { transform: rotate(-90deg); }
  .ov-section.collapsed::before { opacity: .5; }

  .ov-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 8px;
    border-radius: 11px; font-size: .72rem; font-weight: 900;
    background: rgba(245,200,66,.12); color: var(--accent-gold);
    border: 1px solid rgba(245,200,66,.3);
    margin-right: auto;
  }

  .ov-section-body {
    padding: 14px 16px;
    animation: ovExpand .3s cubic-bezier(.4,0,.2,1);
  }
  .ov-section.collapsed .ov-section-body { display: none; }
  @keyframes ovExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* إزالة أي حدود إضافية من الجداول داخل الأقسام لأن القسم نفسه يحيطها */
  .ov-section-body > div[style*="border:1px solid"] {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* Breakdown table */
  .ov-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
  .ov-table thead th {
    padding: 8px 14px; font-size: .67rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
    background: var(--surface2); border-bottom: 1px solid var(--border); text-align: right;
  }
  .ov-table tbody tr { border-bottom: 1px solid var(--border); transition: .12s; cursor: default; }
  .ov-table tbody tr:last-child { border-bottom: none; }
  .ov-table tbody tr:hover { background: var(--surface2); }
  .ov-table td { padding: 10px 14px; vertical-align: middle; }
  .ov-name-cell { display: flex; align-items: center; gap: 10px; }
  .ov-avatar { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 900; color: #fff; flex-shrink: 0; }
  .ov-val-pos { color: var(--accent-green); font-weight: 800; font-variant-numeric: tabular-nums; }
  .ov-val-neg { color: var(--accent-red);   font-weight: 800; font-variant-numeric: tabular-nums; }
  .ov-val-zero{ color: var(--text-muted);   font-weight: 700; font-variant-numeric: tabular-nums; }
  .ov-pending-chip {
    font-size: .65rem; font-weight: 700;
    padding: 1px 7px; border-radius: 8px;
    background: rgba(245,158,11,.12); color: #f59e0b;
    border: 1px solid rgba(245,158,11,.3);
    white-space: nowrap;
  }
  .ov-total-row td { background: var(--surface2); font-weight: 900; border-top: 2px solid var(--border); }

  /* Net worth card at the bottom */
  .ov-net-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px;
    margin-bottom: 24px;
  }
  .ov-net-card {
    border-radius: var(--radius-sm); padding: 14px 18px;
    border: 1px solid var(--border); background: var(--surface2);
    display: flex; flex-direction: column; gap: 4px;
  }
  .ov-net-label { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .ov-net-val   { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .ov-net-sub   { font-size: .7rem; color: var(--text-muted); }

  /* Pending summary strip */
  .ov-pending-strip {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.25);
    margin-bottom: 20px;
  }
  .ov-ps-item { display: flex; flex-direction: column; gap: 2px; }
  .ov-ps-val  { font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .ov-ps-lbl  { font-size: .65rem; color: var(--text-muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .ov-ps-div  { width: 1px; background: var(--border); align-self: stretch; }

  @media (max-width:700px) {
    .ov-hero { grid-template-columns: 1fr; }
  }

  /* ══ RESET DATA MODAL ══ */
  .reset-modal-inner { max-width: 480px; }
  .reset-option-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
  .reset-option {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    cursor: pointer; transition: .15s; user-select: none;
  }
  .reset-option:hover { border-color: var(--accent-red); background: rgba(245,86,74,.06); }
  .reset-option.selected { border-color: var(--accent-red); background: rgba(245,86,74,.10); }
  .reset-option input[type=checkbox] { width:16px; height:16px; accent-color: var(--accent-red); flex-shrink:0; }
  .reset-option-info { flex:1; }
  .reset-option-label { font-size:.88rem; font-weight:700; color:var(--text); }
  .reset-option-sub   { font-size:.72rem; color:var(--text-muted); margin-top:1px; }
  .reset-confirm-input {
    width:100%; padding:9px 14px; margin-top:4px;
    border:2px solid var(--accent-red); border-radius:var(--radius-sm);
    background:var(--surface2); color:var(--text);
    font-family:'Tajawal',sans-serif; font-size:.9rem; text-align:center;
  }
  .reset-confirm-input:focus { outline:none; }
  .btn-danger {
    background: rgba(245,86,74,.12); border: 1px solid var(--accent-red);
    color: var(--accent-red); padding: 8px 20px; border-radius: var(--radius-sm);
    font-family: 'Tajawal',sans-serif; font-size:.9rem; font-weight:800;
    cursor:pointer; transition:.15s;
  }
  .btn-danger:hover { background: rgba(245,86,74,.25); }
  .btn-danger:disabled { opacity:.4; cursor:not-allowed; }

  /* ══ ALL-TRANSACTIONS — STYLES (مُحوَّل من drawer إلى قسم) ══ */
  /* تم حذف قواعد .tx-drawer-overlay و .tx-drawer ومقبض السحب — لم تعد مستخدمة */
  /* الفئات الداخلية أدناه (head, filters, body, footer) لا تزال مستخدمة في القسم */

  /* Header */
  .tx-drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(180deg, var(--surface2), var(--surface));
    border-bottom: 1px solid var(--border); flex-shrink: 0;
    position: relative;
  }
  .tx-drawer-head::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    opacity: .8;
  }
  .tx-drawer-title { font-size: 1rem; font-weight: 800; flex: 1; }
  .tx-drawer-count {
    font-size: .75rem; font-weight: 700; padding: 2px 10px;
    border-radius: 12px; background: var(--surface3);
    color: var(--text-muted); white-space: nowrap;
  }

  /* Filters bar */
  .tx-drawer-filters {
    padding: 12px 20px; background: var(--surface2);
    border-bottom: 1px solid var(--border);
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    flex-shrink: 0;
  }
  .txf-search {
    flex: 1; min-width: 200px; padding: 7px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface3); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size: .88rem;
    transition: border-color .15s;
  }
  .txf-search:focus { outline: none; border-color: var(--accent-gold); }

  .txf-pills { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
  .txf-label { font-size: .7rem; font-weight: 800; color: var(--text-muted); letter-spacing: .05em; white-space: nowrap; }
  .txf-pill {
    padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface3); color: var(--text-dim);
    font-family: 'Tajawal',sans-serif; font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: .13s; white-space: nowrap;
  }
  .txf-pill:hover { border-color: var(--accent-gold); color: var(--text); }
  .txf-pill.active { background: rgba(245,200,66,.15); border-color: var(--accent-gold); color: var(--accent-gold); }
  .txf-pill.active.in  { background: rgba(62,207,142,.12);  border-color: var(--accent-green); color: var(--accent-green); }
  .txf-pill.active.out { background: rgba(245,86,74,.12);   border-color: var(--accent-red);   color: var(--accent-red);   }
  .txf-pill.active.usd { background: rgba(62,207,142,.1);   border-color: var(--usd);  color: var(--usd);  }
  .txf-pill.active.eur { background: rgba(76,142,245,.1);   border-color: var(--eur);  color: var(--eur);  }
  .txf-pill.active.try { background: rgba(245,200,66,.1);   border-color: var(--try);  color: var(--try);  }

  .txf-date-range { display: flex; align-items: center; gap: 5px; }
  .txf-date {
    padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface3); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size: .82rem;
  }
  .txf-date:focus { outline: none; border-color: var(--accent-gold); }
  .txf-sep { font-size: .8rem; color: var(--text-muted); }

  .txf-clear {
    padding: 5px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: transparent;
    color: var(--accent-red); font-family: 'Tajawal',sans-serif;
    font-size: .78rem; font-weight: 700; cursor: pointer; transition: .13s;
    white-space: nowrap;
  }
  .txf-clear:hover { background: rgba(245,86,74,.1); border-color: var(--accent-red); }

  /* Summary bar */
  .tx-drawer-summary {
    display: flex; gap: 16px; padding: 8px 20px;
    background: var(--surface3); border-bottom: 1px solid var(--border);
    font-size: .78rem; color: var(--text-muted); flex-shrink: 0; flex-wrap: wrap;
  }
  .txs-item { display: flex; gap: 4px; align-items: center; }
  .txs-val { font-weight: 800; font-variant-numeric: tabular-nums; }
  .txs-val.green { color: var(--accent-green); }
  .txs-val.red   { color: var(--accent-red); }
  .txs-val.gold  { color: var(--accent-gold); }

  /* Table */
  .tx-drawer-body {
    flex: 1; overflow-y: auto;
    min-height: 0;
  }
  .tx-drawer-body::-webkit-scrollbar { width: 5px; }
  .tx-drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .txd-table {
    width: 100%;
    min-width: var(--txd-table-min-width, 1320px);
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .82rem;
  }
  .txd-table .txd-col-num { width: 44px; }
  .txd-table .txd-col-date { width: 92px; }
  .txd-table .txd-col-time { width: 86px; }
  .txd-table .txd-col-party { width: 180px; }
  .txd-table .txd-col-company { width: 120px; }
  .txd-table .txd-col-type { width: 78px; }
  .txd-table .txd-col-cur { width: 70px; }
  .txd-table .txd-col-amount { width: 190px; }
  .txd-table .txd-col-status { width: 190px; }
  .txd-table .txd-col-notes { width: 130px; }
  .txd-table .txd-col-user { width: 132px; }
  .txd-table .txd-col-actions { width: 74px; }
  .txd-table thead th {
    position: sticky; top: 0; z-index: 1;
    padding: var(--txd-head-pad-y, 8px) 8px;
    font-size: var(--txd-head-font-size, 11px);
    font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); background: var(--surface2);
    border-bottom: 1px solid var(--border); text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .txd-table tbody tr { border-bottom: 1px solid var(--border); transition: .1s; height: 66px; }
  .txd-table tbody tr:last-child { border-bottom: none; }
  .txd-table tbody tr:hover { background: var(--surface2); }
  .txd-table td {
    height: 66px;
    max-height: 66px;
    padding: 8px 10px;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .txd-table .company-chip,
  .txd-table .pay-badge,
  .txd-table .badge,
  .txd-table .time-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  .txd-party-cell {
    font-weight: 800;
    white-space: normal !important;
    line-height: 1.25;
    word-break: break-word;
  }
  .txd-status-cell {
    white-space: normal !important;
    text-align: center;
    line-height: 1.25;
  }
  .txd-amount-td {
    white-space: normal !important;
    overflow: hidden;
  }
  .txd-status-cell,
  .txd-amount-td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .txd-amount-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    line-height: 1.16;
    max-height: 52px;
  }
  .txd-main-amount {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }
  .txd-meta-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: .64rem;
    font-weight: 700;
    color: var(--accent-blue);
  }
  .txd-fee-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: .64rem;
    font-weight: 700;
  }
  .txd-table .pay-badge {
    white-space: normal;
    justify-content: center;
    line-height: 1.2;
    padding-block: 4px;
  }
  .txd-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
  }
  .txd-actions .btn-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .txd-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }

  /* Footer */
  .tx-drawer-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; background: var(--surface2);
    border-top: 1px solid var(--border); flex-shrink: 0;
    font-size: .8rem; color: var(--text-muted);
  }

  /* ══ PAGINATION ══ */
  .pagination-bar { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:10px 0; justify-content:center; }
  .pg-btn { min-width:32px; height:30px; padding:0 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--text); font-family:Tajawal,sans-serif; font-size:.8rem; cursor:pointer; transition:all .15s; }
  .pg-btn:hover:not(:disabled) { background:var(--accent-gold); color:#fff; border-color:var(--accent-gold); }
  .pg-btn:disabled { opacity:.35; cursor:default; }
  .pg-btn.pg-active { background:var(--accent-gold); color:#fff; border-color:var(--accent-gold); font-weight:700; }
  .pg-btn.pg-nav { padding:0 12px; font-weight:600; }
  .pg-dots { color:var(--text-muted); font-size:.8rem; padding:0 4px; }
  .pg-info { font-size:.75rem; color:var(--text-muted); margin-right:8px; white-space:nowrap; }

  /* Note: زر العمليات في الشريط العلوي يستخدم class="nav-btn" (ليس .btn-all-tx) */

  /* ══ EMPLOYEES V2 BUTTON (الموظفون) ══ */
  .btn-emp-v2 {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 10px;
    background: linear-gradient(135deg, rgba(62,207,142,.12), rgba(62,207,142,.04));
    border: 1px solid rgba(62,207,142,.35);
    border-radius: 10px;
    color: var(--accent-green);
    font-family: 'Tajawal',sans-serif;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
    white-space: nowrap;
    min-height: 38px;
  }
  .btn-emp-v2:hover {
    background: linear-gradient(135deg, rgba(62,207,142,.2), rgba(62,207,142,.1));
    border-color: rgba(62,207,142,.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(62,207,142,.15);
  }
  .btn-emp-v2:active { transform: translateY(0); }
  .btn-emp-v2.open {
    background: linear-gradient(135deg, rgba(245,200,66,.18), rgba(245,200,66,.08));
    border-color: rgba(245,200,66,.5);
    color: var(--accent-gold);
  }
  .btn-emp-v2 .emp-v2-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(62,207,142,.2);
    font-size: 1rem;
    transition: background .2s;
  }
  .btn-emp-v2:hover .emp-v2-icon {
    background: rgba(62,207,142,.3);
  }
  .btn-emp-v2.open .emp-v2-icon {
    background: rgba(245,200,66,.25);
  }
  .btn-emp-v2 .emp-v2-text {
    display: flex; flex-direction: column; gap: 1px;
    line-height: 1.1; text-align: right;
  }
  .btn-emp-v2 .emp-v2-label {
    font-size: .84rem; font-weight: 800; letter-spacing: .01em;
  }
  .btn-emp-v2 .emp-v2-sub {
    font-size: .64rem; font-weight: 600; opacity: .75;
    letter-spacing: .02em;
  }
  .btn-emp-v2 .emp-v2-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: var(--accent-green);
    color: #fff;
    font-size: .7rem; font-weight: 900;
    margin-right: 2px;
    box-shadow: 0 1px 4px rgba(62,207,142,.3);
  }
  .btn-emp-v2.open .emp-v2-badge {
    background: var(--accent-gold);
    color: #000;
  }
  .btn-emp-v2 .emp-v2-vac-dot {
    position: absolute; top: -4px; right: -4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #f5c842;
    border: 2px solid var(--bg, #1a1a1a);
    box-shadow: 0 0 0 2px rgba(245,200,66,.3);
    animation: empVacPulse 1.8s infinite;
  }
  @keyframes empVacPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245,200,66,.3); }
    50%      { box-shadow: 0 0 0 6px rgba(245,200,66,.0); }
  }

  @media (max-width: 640px) {
    .btn-emp-v2 .emp-v2-sub { display: none; }
    .btn-emp-v2 { padding: 6px 12px 6px 8px; gap: 7px; }
  }

  /* ══ EXPENSES MODULE ══ */
  .exp-drawer-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 76px;
  }
  .exp-drawer-overlay.open { display: flex; }
  .exp-drawer {
    width: min(1100px, 97vw); max-height: calc(100vh - 90px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5);
    display: flex; flex-direction: column; overflow: hidden;
    animation: drawerSlideDown .22s ease;
  }
  .exp-drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; background: var(--surface2);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .exp-drawer-title { font-size: 1rem; font-weight: 800; flex: 1; }

  /* Summary cards */
  .exp-summary-row {
    display: flex; gap: 10px; padding: 12px 20px;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    flex-shrink: 0; flex-wrap: wrap;
  }
  .exp-sum-card {
    flex: 1; min-width: 120px; padding: 10px 14px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface3);
  }
  .exp-sum-label { font-size: .68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .exp-sum-val   { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .exp-sum-val.red  { color: var(--accent-red); }
  .exp-sum-val.gold { color: var(--accent-gold); }

  /* Filters */
  .exp-filters {
    display: flex; gap: 8px; padding: 10px 20px; flex-wrap: wrap;
    align-items: center; border-bottom: 1px solid var(--border); flex-shrink: 0;
    background: var(--surface2);
  }
  .exp-search {
    flex: 1; min-width: 180px; padding: 6px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface3); color: var(--text);
    font-family: 'Tajawal',sans-serif; font-size: .86rem;
  }
  .exp-search:focus { outline: none; border-color: var(--accent-gold); }
  .exp-pill {
    padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface3); color: var(--text-dim);
    font-family: 'Tajawal',sans-serif; font-size: .78rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: .13s;
  }
  .exp-pill:hover { border-color: var(--accent-gold); color: var(--text); }
  .exp-pill.active { background: rgba(245,86,74,.12); border-color: var(--accent-red); color: var(--accent-red); }
  .exp-pill.all.active { background: rgba(245,200,66,.1); border-color: var(--accent-gold); color: var(--accent-gold); }

  /* Table */
  .exp-drawer-body { flex: 1; overflow-y: auto; min-height: 0; }
  .exp-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
  .exp-table thead th {
    position: sticky; top: 0; padding: 9px 14px;
    font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); background: var(--surface2);
    border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap;
  }
  .exp-table tbody tr { border-bottom: 1px solid var(--border); transition: .1s; }
  .exp-table tbody tr:hover { background: var(--surface2); }
  .exp-table td { padding: 9px 14px; vertical-align: middle; }

  /* Category badges */
  .exp-cat {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 10px; font-size: .74rem; font-weight: 700;
    white-space: nowrap;
  }
  .exp-cat.general  { background: rgba(76,142,245,.12);  color: #4c8ef5; }
  .exp-cat.salary   { background: rgba(62,207,142,.12);  color: var(--accent-green); }
  .exp-cat.supplier { background: rgba(155,114,245,.12); color: #9b72f5; }
  .exp-cat.personal { background: rgba(245,200,66,.12);  color: var(--accent-gold); }

  /* Footer */
  .exp-drawer-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; background: var(--surface2);
    border-top: 1px solid var(--border); flex-shrink: 0;
  }

  /* Add expense modal */
  .exp-modal-inner { max-width: 500px; }
  .exp-cat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px;
  }
  .exp-cat-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    cursor: pointer; transition: .13s; font-size: .86rem; font-weight: 700;
  }
  .exp-cat-opt:hover { border-color: var(--accent-gold); }
  .exp-cat-opt.selected { border-color: var(--accent-red); background: rgba(245,86,74,.08); }
  .exp-payment-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .exp-payment-btn {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface2);
    color: var(--text-dim);
    font-family: Tajawal, sans-serif;
    font-weight: 800;
    cursor: pointer;
  }
  .exp-payment-btn.paid.active {
    border-color: var(--accent-green);
    background: rgba(62,207,142,.12);
    color: var(--accent-green);
  }
  .exp-payment-btn.unpaid.active {
    border-color: #f59e0b;
    background: rgba(245,158,11,.12);
    color: #d97706;
  }
  .exp-party-box {
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 7px;
    background: rgba(245,158,11,.055);
  }
  .exp-party-title {
    margin-bottom: 8px;
    color: #d97706;
    font-size: .82rem;
    font-weight: 900;
  }
  .exp-party-grid .input-group { margin-bottom: 0; }
  .exp-party-hint {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.5;
  }
  .exp-status-badge,
  .exp-party-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 180px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 800;
    white-space: normal;
    line-height: 1.35;
  }
  .exp-status-badge.paid {
    border-color: rgba(62,207,142,.35);
    background: rgba(62,207,142,.1);
    color: var(--accent-green);
  }
  .exp-status-badge.unpaid {
    border-color: rgba(245,158,11,.35);
    background: rgba(245,158,11,.1);
    color: #d97706;
  }
  .exp-party-badge {
    background: var(--surface2);
    color: var(--text-dim);
  }
  .muted-field {
    opacity: .45;
    filter: grayscale(.35);
  }
  .muted-field select {
    cursor: not-allowed;
  }

  /* Topbar button */
  .btn-expenses {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: var(--radius-sm);
    border: 1px solid rgba(245,86,74,.4); background: rgba(245,86,74,.08);
    color: var(--accent-red); font-family: 'Tajawal',sans-serif;
    font-size: .84rem; font-weight: 700; cursor: pointer; transition: .18s;
    white-space: nowrap;
  }
  .btn-expenses:hover { border-color: var(--accent-red); background: rgba(245,86,74,.15); }
  .btn-expenses.open  { border-color: var(--accent-red); background: rgba(245,86,74,.18); }

  /* ══ EMPLOYEES MODULE ══ */
  .emp-section { margin-top: 20px; }
  .emp-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .emp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px; margin-bottom: 8px;
  }
  .emp-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: .18s; cursor: pointer;
  }
  .emp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
  .emp-card-stripe { height: 3px; }
  .emp-card-body { padding: 14px 16px; }
  .emp-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .emp-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 800; color: #fff; flex-shrink: 0;
  }
  .emp-name  { font-weight: 800; font-size: .92rem; }
  .emp-role  { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
  .emp-salary-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface2); border-radius: var(--radius-sm);
    padding: 8px 12px; font-size: .8rem; gap: 8px; flex-wrap: wrap;
  }
  .emp-sal-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .emp-sal-val  { font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; }
  .emp-sal-lbl  { font-size: .62rem; color: var(--text-muted); }
  .emp-progress-wrap { margin-top: 8px; }
  .emp-progress-bar {
    height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 3px;
  }
  .emp-progress-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
  .emp-progress-lbl { font-size: .65rem; color: var(--text-muted); text-align: left; }

  /* Employee drawer */
  .emp-drawer-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 76px;
  }
  .emp-drawer-overlay.open { display: flex; }
  .emp-drawer {
    width: min(1100px, 97vw); max-height: calc(100vh - 90px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5);
    display: flex; flex-direction: column; overflow: hidden;
    animation: drawerSlideDown .22s ease;
  }
  .emp-drawer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; background: var(--surface2);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  /* القسم الرئيسي: قائمة جانبية + تفاصيل */
  .emp-drawer-main {
    flex: 1; display: flex; min-height: 0;
  }
  .emp-drawer-sidebar {
    width: 260px; border-left: 1px solid var(--border);
    background: var(--surface2);
    display: flex; flex-direction: column; flex-shrink: 0;
    overflow: hidden;
  }
  .emp-drawer-sidebar-head {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: flex; align-items: center; gap: 8px;
    font-size: .75rem; font-weight: 800; color: var(--text-muted);
    letter-spacing: .04em; text-transform: uppercase;
  }
  .emp-drawer-sidebar-list {
    flex: 1; overflow-y: auto; padding: 6px;
  }
  .emp-list-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    cursor: pointer; transition: background .12s, transform .08s;
    margin-bottom: 4px; border: 1px solid transparent;
  }
  .emp-list-item:hover {
    background: var(--surface);
  }
  .emp-list-item.active {
    background: rgba(62,207,142,.12);
    border-color: rgba(62,207,142,.35);
  }
  .emp-list-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: .9rem;
    flex-shrink: 0;
  }
  .emp-list-info { flex: 1; min-width: 0; }
  .emp-list-name {
    font-weight: 800; font-size: .86rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .emp-list-role {
    font-size: .68rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .emp-list-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #f5c842; flex-shrink: 0;
    box-shadow: 0 0 6px rgba(245,200,66,.5);
  }
  .emp-drawer-content {
    flex: 1; overflow-y: auto; padding: 18px 20px; min-height: 0;
  }
  /* للعرض على الجوال */
  @media (max-width: 720px) {
    .emp-drawer-main { flex-direction: column; }
    .emp-drawer-sidebar {
      width: 100%; max-height: 200px;
      border-left: none; border-bottom: 1px solid var(--border);
    }
    .emp-drawer-sidebar-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
    .emp-list-item { min-width: 180px; margin-bottom: 0; }
  }

  .emp-drawer-body { flex: 1; overflow-y: auto; padding: 20px; min-height: 0; }

  /* Advance modal */
  .adv-modal-inner { max-width: 460px; }
  .adv-bal-strip {
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px;
    display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem;
  }
  .adv-bal-item { display: flex; flex-direction: column; gap: 1px; }
  .adv-bal-val  { font-weight: 800; font-variant-numeric: tabular-nums; }
  .adv-type-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .adv-type-btn {
    flex: 1; padding: 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    font-family: 'Tajawal',sans-serif; font-size: .85rem; font-weight: 700;
    cursor: pointer; transition: .13s; text-align: center;
  }
  .adv-type-btn:hover { border-color: var(--accent-gold); }
  .adv-type-btn.selected.salary   { background: rgba(62,207,142,.12);  border-color: var(--accent-green); color: var(--accent-green); }
  .adv-type-btn.selected.advance  { background: rgba(245,200,66,.12);  border-color: var(--accent-gold);  color: var(--accent-gold);  }
  .adv-type-btn.selected.deduction{ background: rgba(245,86,74,.12);   border-color: var(--accent-red);   color: var(--accent-red);   }

  /* ══ CASH LEDGER ══ */
  .cash-widget {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
  }
  .cash-balance-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .cash-bal-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px; text-align: center;
  }
  .cash-bal-cur  { font-size: .65rem; font-weight: 800; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; }
  .cash-bal-val  { font-size: 1.1rem; font-weight: 900; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .cash-type-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .cash-type-btn {
    flex: 1; padding: 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2);
    font-family: 'Tajawal',sans-serif; font-size: .88rem; font-weight: 700;
    cursor: pointer; transition: .13s; text-align: center;
  }
  .cash-type-btn.in.active  { background: rgba(62,207,142,.12);  border-color: var(--accent-green); color: var(--accent-green); }
  .cash-type-btn.out.active { background: rgba(245,86,74,.12);   border-color: var(--accent-red);   color: var(--accent-red);   }

  /* ══ COMPANY BALANCE MODAL ══ */
  .co-bal-modal-inner { max-width: 600px; }
  .co-bal-hero {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; background: var(--surface2);
    border-radius: var(--radius-sm); margin-bottom: 16px;
    border: 1px solid var(--border);
  }
  .co-bal-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 900; color: #fff; flex-shrink: 0;
  }
  .co-bal-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: 16px;
  }
  .co-bal-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; text-align: center;
    position: relative; overflow: hidden;
  }
  .co-bal-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  }
  .co-bal-card.positive::before { background: var(--accent-green); }
  .co-bal-card.negative::before { background: var(--accent-red); }
  .co-bal-card.neutral::before  { background: var(--border); }
  .co-bal-cur   { font-size: .68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .co-bal-val   { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
  .co-bal-dir   { font-size: .7rem; font-weight: 700; margin-top: 4px; }
  .co-bal-sub   { font-size: .68rem; color: var(--text-muted); margin-top: 6px; }
  .co-bal-breakdown {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px;
  }
  .co-bal-breakdown-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: .84rem;
  }
  .co-bal-breakdown-row:last-child { border-bottom: none; }
  .co-bal-breakdown-lbl { color: var(--text-dim); }
  .co-bal-breakdown-val { font-weight: 800; font-variant-numeric: tabular-nums; }

  /* ══ SOURCE TABS (وجهة المبلغ) ══ */
  .source-tab {
    flex: 1; min-width: 90px; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface2); color: var(--text-muted);
    font-family: 'Tajawal', sans-serif; font-size: .84rem; font-weight: 700;
    cursor: pointer; transition: .13s; text-align: center;
  }
  .source-tab:hover { border-color: var(--accent-gold); color: var(--text); }
  .source-tab.active {
    background: rgba(245,200,66,.12); border-color: var(--accent-gold);
    color: var(--accent-gold);
  }
  .source-tab[data-src="company"].active {
    background: rgba(76,142,245,.12); border-color: #4c8ef5; color: #4c8ef5;
  }
  .source-tab[data-src="client"].active {
    background: rgba(62,207,142,.12); border-color: var(--accent-green); color: var(--accent-green);
  }

  /* ══ PROFITS PAGE ══ */
  .profit-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 18px;
  }
  .profit-card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; text-align: center;
    position: relative; overflow: hidden;
  }
  .profit-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-green); }
  .profit-card-label { font-size:.7rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
  .profit-card-val   { font-size:1.15rem; font-weight:900; color:var(--accent-green); margin-top:5px; font-variant-numeric:tabular-nums; }
  .profit-card-sub   { font-size:.65rem; color:var(--text-muted); margin-top:3px; }
  .profit-type-badge {
    display:inline-block; padding:2px 8px; border-radius:10px; font-size:.72rem; font-weight:700;
  }
  .ptype-fee      { background:rgba(62,207,142,.12);  color:var(--accent-green); border:1px solid rgba(62,207,142,.3); }
  .ptype-exchange { background:rgba(76,142,245,.12);  color:#4c8ef5;             border:1px solid rgba(76,142,245,.3); }
  .ptype-manual   { background:rgba(245,200,66,.12);  color:var(--accent-gold);  border:1px solid rgba(245,200,66,.3); }

  /* ══ فلاتر الأرباح السريعة (يوم/شهر/سنة) ══ */
  .pf-quick-btn {
    padding: 5px 11px; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--text-muted);
    font-family: 'Tajawal', sans-serif; font-size: .78rem; font-weight: 800;
    cursor: pointer; transition: .15s; white-space: nowrap;
  }
  .pf-quick-btn:hover { background: var(--surface3); color: var(--text); }
  .pf-quick-btn.active {
    background: linear-gradient(135deg, rgba(245,200,66,.22), rgba(245,200,66,.1));
    border-color: rgba(245,200,66,.5); color: var(--accent-gold);
    box-shadow: 0 1px 4px rgba(245,200,66,.18);
  }

  /* ══ DEX PANEL CARD RESPONSIVE ══ */
  @media (max-width: 768px) {
    #dash-exchange-widget .section-collapsible > div[style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
  }

  /* ══ "العمليات" — تحويل الـ drawer إلى قسم ضمن الشريط الرئيسي ══ */
  #all-tx-section.active {
    display: flex; flex-direction: column;
    min-height: 600px;
    height: calc(100vh - 110px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
  }
  #all-tx-section .tx-drawer-body {
    flex: 1; overflow-y: auto; min-height: 0;
  }
  /* استبعاد القواعد المخصصة للـ overlay عند القسم */
  #all-tx-section .tx-drawer-head { padding: 14px 20px; }
  #all-tx-section .tx-drawer-head::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    opacity: .8;
  }
  @media (max-width: 720px) {
    #all-tx-section.active { height: calc(100vh - 90px); }
  }

  /* علم السعودية المخصص — يحل محل الإيموجي 🇸🇦 */
  .sar-flag {
    display:inline-block;
    width:1.3em;
    height:0.85em;
    vertical-align:middle;
    background-image: url('data:image/png;base64,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');
    background-size:cover;
    background-position:center;
    border-radius:2px;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    margin: 0 1px;
  }

  /* علم الإمارات المخصص — يحل محل الإيموجي 🇦🇪 */
  .ae-flag {
    display:inline-block;
    width:1.3em;
    height:0.85em;
    vertical-align:middle;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAwCAIAAABhdOiYAAABCGlDQ1BJQ0MgUHJvZmlsZQAAeJxjYGA8wQAELAYMDLl5JUVB7k4KEZFRCuwPGBiBEAwSk4sLGHADoKpv1yBqL+viUYcLcKakFicD6Q9ArFIEtBxopAiQLZIOYWuA2EkQtg2IXV5SUAJkB4DYRSFBzkB2CpCtkY7ETkJiJxcUgdT3ANk2uTmlyQh3M/Ck5oUGA2kOIJZhKGYIYnBncAL5H6IkfxEDg8VXBgbmCQixpJkMDNtbGRgkbiHEVBYwMPC3MDBsO48QQ4RJQWJRIliIBYiZ0tIYGD4tZ2DgjWRgEL7AwMAVDQsIHG5TALvNnSEfCNMZchhSgSKeDHkMyQx6QJYRgwGDIYMZAKbWPz9HbOBQAAABCklEQVR42u3YwU3DQBSE4XlmF4IsEYFMDRSQOuBAMTRHC4gWuBORECIhkOMdGnDgEJPD6p8CfPg0fvv04vnyRgfEoTzEqt3dPbx8tEMMcqimNCIAAQQQQAABBBBABCCAADp20lQfCkUoAqB96b1zkYsUAI3V5/qs285KfeeOdDhNX/r56dXT/ePJ/EJ2Lf+ZpZA8UYMiuvNOs5YhvX8GlT7JKq5sUk/8iilUGRB7EEAAAQQQQAABBBD5303atm3ZAI0n51zlySxNVZ/l67L5/qro3DERkO2c8nqzuV0stiohmQaNMr29rz4Z0r/NoCaFBxr01ytWHRB7EEAAAQQQQAABBBABCCCAjp8fIANRh9QxGCQAAAAASUVORK5CYII=');
    background-size:cover;
    background-position:center;
    border-radius:2px;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    margin: 0 1px;
  }

  /* علم بريطانيا المخصص — يحل محل الإيموجي 🇬🇧 */
  .gb-flag {
    display:inline-block;
    width:1.3em;
    height:0.85em;
    vertical-align:middle;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAAAwCAIAAADM9fAxAAABCGlDQ1BJQ0MgUHJvZmlsZQAAeJxjYGA8wQAELAYMDLl5JUVB7k4KEZFRCuwPGBiBEAwSk4sLGHADoKpv1yBqL+viUYcLcKakFicD6Q9ArFIEtBxopAiQLZIOYWuA2EkQtg2IXV5SUAJkB4DYRSFBzkB2CpCtkY7ETkJiJxcUgdT3ANk2uTmlyQh3M/Ck5oUGA2kOIJZhKGYIYnBncAL5H6IkfxEDg8VXBgbmCQixpJkMDNtbGRgkbiHEVBYwMPC3MDBsO48QQ4RJQWJRIliIBYiZ0tIYGD4tZ2DgjWRgEL7AwMAVDQsIHG5TALvNnSEfCNMZchhSgSKeDHkMyQx6QJYRgwGDIYMZAKbWPz9HbOBQAAAWvklEQVR42p1aebwU1ZU+5y61dFd1dQMiKBgQNIlOYjIqgceiKLKIiAqCUdnUiBJN1LjkpyRqomNc45KIGhRZ1IASVFxAQZ8+eDCMSdTMGBeQgRBRfPC6eq+qu8wf1a+XxzOZmfr1H+/116fqnHvP8p1zCwMnAUqBEOrIIeLhh/XYUyBfACmJwR5+9uOFv3k3DKXlGlIoDfULARr/bbwYJRU/uPDMwctuPzXXvtUeOxoo7RJDAAAhyq1tqRHDZy/cuOL5Ty3PFEr3fMv46y4MASgjlXzIDXr7Fd9ZcO7RKhRIqXYdfPMNtmAB+fRTYBQQCSmUUGvknH78kTllCrvlZsIo8VIQietmH7PxsdOOP7ZP5UAAiIQQRGKbDAA1ICICVD8aEJHYJkcgVfUJVi+tEQBtq/43ADaIWxYnSGKZ2g3je1oWI4TEP6eUAGDlQHD8sX02PnbadbOPhUgQL4WMsltvMadMoR9/jJyhlFgqk+iy+RAEUCqD44CI2K2/YOPH4bZt2vNy+XDUt3q3PTH+xgXfVqEKy8JJsCCqbprW1aUHAIJgGTSMpIrXWzesOiLYNkQRKBVDVcti0GRCKKl0FcG6nG1SKbWUGgAoJUFJaKFuXHBc2xPjR3+rdy4faM+DbdvY2JPZLbeCFOAkoFgGBPGjK4lc9Ej00stq6FDIFYBS6NOLbGrnY0+it99GTSMHhgqi26/4142PjfvXY3p3flFSSlNSfXhsmNbAKQmFFFLXtOqyS2vOIIogErU1wC6TOSNaqkiomjG1GzJKpNRhpChFRKgcqBx3dHrjo+Nuv+K7OohyYFDToLffxseeTP59G6QcoBRyRXX0UdGLL8n7HyQ6m5WTThft7XL+pcAoZH1IOaA1W/gzdto4+pf3tOf52fJJ3zmk9bFxP7noWBnKsCwYiz0NlIJenqkBGpWrhgIAGgYiQhQBId0DBkBIDd2kAITUadfgjASh5JyEZSEC+ZNL/qXtiQljjuuT8yva8+j777HTxrGFP0OtwHOhUIBiWS64XLZvkePG66xPEo5llwvCSspHHo2eekYdcUR101IOadvER4+md9/F3GROMSrFPdec8NqiU4850qscqCACJWgaJF+MpNSkm3axJ0aiuku6ORPUftxNCsA2abEsIqkYI5UDlWOO9F5bdOo915xAhchpTpM2ufsuftIY0rapukV+Xn9tULRmjfztw5Fp25VCwjHJjBvadu6reA6XnVl5xhTR3i7nzoFiGYpF8ByUgl1/A5s4gX74V5Xy/Gx53Al9Ny+ZcOWcY6KK1BoIwUhI1RwSgGBwUnWpxviL7TVNIBgHUrd1sAwaf18pRmFZXDnnmM1LJow7oa+fLSvPYx/9lU0Yz66/AUUEngvFIhTLcu6caMtWedZZsjPrOWznvsqMG9rIH9bvGv2D15e8sD2VSZilvHA8ueTJaOXv9WGHg1+AZBIyHtmwkY8eRR+4n7nJnGAmyAdvGLbut6cM7p8o7CtRSgjBmvJaA3BaVRgPSiymAUqBlE2RBKA1mIwAQCRUkA2OOsJ9+aGxD94wzASZE4ylkvSBB9jIkeSNN8FNAmPg5/Vhh0crfy+XPCmclFnMpzKJJS/saJm7/g/rdxHLM/dlg4tu2nTudW/v9YWXJLIzK2fMjLZsled/H/Z3Qi4HnovlErvqanrGZLpzh0x5frY04Xv9Nj0+Yf4F3wyLURhIRkmsISJAJEOhan7YpT0AAIQRhmHT7mkdS2mAQiGMSmL++d/YsnTi6S39/WxJpjy6cwedPJlddRVWyuC5UC5DoSTP/360ZaucMVN2+l6S7M2Jc697+6KbNu0vRJZnECEVo2h65nOv7Bw+69UVr/x3KpMwCnmR6S2fejpavkz3PRT8PBgGuEm6bj1vGUEWLWJeyo+Iw/QjC4c//8DJg/slKp0VQhBj3TV0DxetQUM1wLo5pAYApATLnZXB/ZPPP3DyIwuHJ6n2Q8K8FFn0MB/ZQtetBzcJhgF+Xh/SN1q+TD71tMj0Nor5VMZe8fLO4bNefe6VnaZnMkYioaupSUptpc3Ps8Gs69vOv3HTgYrybJSdvrxwVrRlq5w+DQolKFfAc1FEfMECOvVMtme3cFN+Z2nqSQO2LJs079yjwkCGkaSUHJwDwLKaTKrvITgJJoQK8uG8c4/esmzS1JMO9ztLwk2xPbvo9Gl8wQ8xn4N0CioVKJTk9GnRlq3ywlmy0/cS2FGUF9y4adZPN32eDay0KaVWShuckJpvC6k5p6ZnPLNu14jZ61a9vjuVSfBCTvTtJ599Lnp8se7VC/J5YAycBF37Em8ZQZ54nGU8vwKeCU/cOvK5u0YP7GMXsxVCkJAGqmNZoDUoXa/C1fyHNMH2dwYDelur7jvpiVtaPBP8CrKMRx5fzMeMoX9YA04CLAuyOZ3pFT2+WD77nOjbzyjkU5nEqtd2D5+97ukXdlgpwzCokFprMDihFElj0EqpGEHH5bu+KM289q15P9/sB+BZIDp9edHF0Zat8swzodOHIATPxWwnv/gSeu509vlnwknlOkvTThm4ddnEWVOHqFwQhLJazjgDpSAI6nyii90ppaUfXjBp0NZlE88dd0SusxQ5KbZvLz3nHH7JDzDnQ8qBIIR8UZ45JWpvVxddLDp9z9TZQM/7+eaZ176158uylTaF1FprrYESJATLgaR04FmxUyBCr5RZCWUQKs4JM+kf/7xvdevfBh3mHPfNPlAoRelecP4Fqt+hZNMmzPqQTIBpkHffI6++pA/piyeeUK7IFNfnThjSt38ijORpLQPFvi/Z0iXdq7DWct5FfOCAzX/eO+vsoXf86HgDZFFS5ibJihV85gzyl/egVwaiCAolnfbEffepe+6VSZeXi46XXNu2Z/q1b7Vu2Wt6JqVEKY0IUmk3wQ1GShVBEJGcuCR2BsaQEhJEUseugsAoCcsCpJp/3td/cdlxfVO8UIowlYIPP6RXX0XXrQdGIJmEKIJSRc6cIe++Ww08AnJ51zUL+QAdB//0Dh81snuYCRFtbtcnDtP5guOa+XwAKZf8bTe97nq6ciUYDFwHiiWohHLiBHn//fD1b+hczknwjry46bfvPvbcx4Bo2EzErLOLYXGKUuswUghALJPaJvUcbhlUKWVxYlvUNqltUEbRSRl9Dk0+unr7KT94fcMf93GT62wWhg6VL78ifn2fPrSfZkxTptMpunIVO/lkumYNMXguFxAEQNBCgVLd8rg2DY0kTui5XEAMTtesYSefTFeu1If01pkMVEKd8sT9v5YvvwJDhupslhu89d2O0y7f8NizHzue6XoGo2gb1DapZVA3wVNJpgEIYtJitknxwx1fIGLs5QenrmrDQLBYihgjgw9ztNZVRV0X9uwB3wdKQWtgDEslrTUMHVqNKMeBbduMMaOA0jppMgytZPT6GzBsGBQKVc/cvh0RdSIBSoFSoDW4LgwcCPk8xPwFcdfeQhgpJ8lFXAkbLkJQNXV/wIZ8Ld3QnvVwxRAhqLQOAlWnC8Ui9OsHhx9eY9o6VrFSqVpFSL1fhK5iJQSGEVAKhABjVau+8x0di9SYoZRQKABjNeZx1ODMwdo395YNVpX3+z2Zog+uORg/sREqFnuQwmqCA62hVIIat49LtFKAAKUSFItQKAChoBXkcj3oQAioejmv6OZWuUpWetwLjcGgIxr6oa422zAgjOrb0ngZBkRRdX3qEILWYMaQrhfcKML9+0FrMAwQor6rvXsD51XCYXCQsmp20w0VGEYDVCveXVDMJ7tDGhjFkECdllaLpglKQxjW/aGmqGmC/irIAEAIgi5Si3FIAKVgmoBdUCwYhlUDOAdKq05bk6q2ogwogyCo/hIbIMaAM6j0CFHgBoa22eTNlgUAEATdWyApwTIBESo9QaYJhECl0gABAIKUdb0bXZqQKsQ5lMs9S3FetbYxMpUCSsE0oNwMEQSpgBCwTKgEGFpGHXOSUK6AED0QuWQSggCiqDukNTgOhCF0Y+IxlEyCEE1rVIcSIFV3a2MoToY9QrYNAE0LUYtb2wZCoFSKxzr1kRcgglY9mEQpEOxeeWJnjqWU6iHfxInu/woRAoR0D+Z/ClFaLTDxpoaWAVpXCWi53FRbYgHLBAAo9QTFAVMq9QAZBlACxTLEFL4J4kBZvKhNWmoNnANnUOwJYgwMo5pU/xmEocXBNEE3xFItajWAaQBCcyxBNecYBmC3WMJqSx+bVK50l4r1Zqw5lrqkOAPOmwKmBjEGxldBFAwTyuUm6hAmLKC0Gku1Bag98qug+ElC9DBj6QZV01SDxwrZ5MmNUlJ2nyVWIQpSNUNdS08paAXN1RlDAv+f6x+MpBshROC8qax31bGDpk7/uxv+76BuVbinuv5/ghrdvbEKM1ZlG92qcE2qVnAOvmEVgiYLkAB8FYSY+2JfD8QjfnbDmKjuEd1C/yCpOmNyHHjnHWPcKWBZ1boEAIhaiui1jXDCCVV222MKje9Wn1odlPkQNWjUcLCSgMDs3t4/ZH/VcCCIWusgqq93tWTX8mlNiRq7TSTAtoGxuknxREkDJBOQTHYlOgDbqnPFWI+4fSakNuewTEIQpdSAX0H+dD0S2Y5d2cZDGqm0PqggMEZKFUkJDOqf1BrqncjfdkM+j9zQSgIhWCo3dSJKIQIQ0pSguubO8fFSlbO/+2dEohOJOMcgonYdOHxAYyfy0Q5fCOW5Ru20odu6U4IIEEPs+Dnra9+6CZ4vRVLpWsaKhyqFXDjsuEN+9cPjhgxIRZUAHQcIIfffT+/4N6yUdTqN5RJ8eUAdOVjee6/+xjdkEFVPGCirBka36omIhACikJqaHHfupNdeSz7dCemU1hoTCU2ZvOYa9eOrQCldKDDb3HugctVd7+z4rOi6vFQR1Yl3Q8lwE0xpKJYFQSDlQJYCqRQIqT/rKJcqMghVOZDlUAqpC35YyIU/nHn0i/eeNPa7h0RhhOk0bN/OJp/Orr4acz5whrv3wJcH5Hnnida35FlnqzBKpQwdT/+iqLohjaFICFKilFJap1KmCiN59jmitVXOnAHZHAoBvo+f72XX/IRNPh22b8d0Ogqiccf3fXPx+Asmfe3LvcViQURSl0NZCWQpkEGoKMEOP9zvB2GkyqEkhKBtUs4wEoozjEkJ54QzEvrBkQOdlx4c+5uffs8zIScpui55ZBEf2ULWrYeMB64L+7P6sP7RiuXymWdEn75GMe+m7EdWf3LbE/9pIcqDCyBj2jSkkDYhP3v0/d+u+shN2UYxL/ocKn+/Mnrmae2loVQB2wY3Sdat5yNbyKJF6Lo5yVymF/+85fmHxg4+LBnmQs4IY4RTkrRZJBRBYBQJAUZjD9NQDmRt1k8JBoEM8uHcaUe1Pzlx8sj+fmdJOCm6ZzebOpVdvgALefBcCAL4cr+cPi1q3yIvuFB2+p4FHUU5a2Hb5T/dtOvzIgXQ6qBAJgQrgVaaAnzWUb7ihrZZC9s6itKzQHb68rzvR5vb5bRzIF+ESgU8Fwt5tmABO/ssumdXfai6dOLcaUODfBQG0jBIEEohdU1/pTTRAEGk6mNHipVsMKCPvfKek5b8YqRngh8gy3j08cf5iBFk7VpwEmCa4Od10hFdY0deyKUyiVWv7x4+e92KFz8lNuPsILod2xZ3VogAYHFKUuaKF3cMn73u2dpQ9dD+8rnV0eLFOp0BPw+mCW6SvPAiH9E0VF1y68iV94wZcIhd6CjHSaG5L+lKyIxiFMkgF55/5pCtyybOOK1h7Dh9OrvkEsx2gudCFFXHjlu2ynjsaIEfwNyfb5553dt7OspOxlS6ubzUOv84lde6B62VUG7G2tNRnnHtW/NujoeqWnT66uKLo/Yt8swpkC9CEEC6a6g6fTrbtzdyUrnO0ozTjti6bOL5U4eE+TCMJKN1w0g1eilWskG/tLn8V6OfumP0IUnqlzXNeHTFcj5iBF29ur5FmYxY9LB8/gVx+ECWz3mZxAute4bPenXpmu3p3pZh0ChS9TjCrjYhrki6iwV0ZTCgyCgxDWo4xpPPfTJizrrnW//uZRIsnxMDjpAvvCgWPawdF7J5sG1wEnT1aj58OF2xnGY8v6z7JOlT/zZq+a9G90ubFT+gBBHRNilhFKNIBX44/fTBW5dPunDyoFxnKUi6rLODnv99Pms2duyrRlGhJKdOiVrfkpddLvycZ6iCxPm3bTnrx2/u+rKc6ZsolkR1/FarebFJlgnlSm3ODl2n3ZQgGrQSSiG1UtpKmzv3Fs++uvXSX24pSPQMJbK+vOzyaHO7nDgBcgWIIvAc7PiSz5lNL7yQHegIk26us3Th5EFbl0+aPmlwkAsZRaWBVLJBb4c/cfvIZ+8e099jfknRjEdXreQjRtBnfg9OAiwb/Lx2XPHQg/IPz8tBQ2gu56UTr7TvbZmz7rFnPrJTZsJmhWKke2Q9lFYHDI1z9i7v16GszSGF1IZJjQT/3cqPR81b/0r7Xi+doLmcHDxEvvyyuP/X2rTAL4CXAtehTz3FW0bQVStpJu0XVX+PPXv3mCfvGOVYtNhRJudMHNT+5IR5U4fkOkthwmU5n86dw2eeh5/9vRZF6pSxYvNmecWVIldIMRkAufLObZOveOOT3XkzbboJLpVWB3NwAIwJu5Q99OrxaXfzaFUpLaQ6dICz8/PS5B++8aM7twVAUkyIXFH++KqobZM68ww4kIVSGTwXP/s7n3kenTuX5f0g4eaz5TlThmx6fPy0SYPIqjtHD+5r+UVBM2ny/BreMoIuXQZJG5JJ8POac3HXnWL9ejHkKJLzvbS94T++GDl33W+WfsBtZiU5p+RALpBSIenptDuMdHx00K1rIqRKUBtsiolC0mIHsgEgGEn+0NIPRs5dv+E/9nlpm/i+/OaxYvUaceed2rTAz0MyCUmbLl3KW0bQtS+StOcXoyP7WivvHE1KhUrZdli5ROdfys8+B3f9N6RdkBJyBTV6lHi7TV53vSiUU0RIyq69753xCzZ+sDNnZUyCyCmJq0KDf4EGAIKmQaGRTddfOCE6HhnUaTjWX0UxaRgpBaCU1lpbvawPdvrjF2y89r53FOMpDEWhJK+7Pnq7TY0eBbkCSAmei198zqdOpZf+gJWLZdspFSoE02n66qu8ZQR97HeQtMFxIJvXSMRtvxSvbxDfOg5930vbb73XMWre+nsX/ye3mGkzITWjpBJKVX9dpEtzDcBI0zS8sR1mDIOw3npoDdj4KoqqvYqiNQihzASjBr33yQ/GXLz+rXc7vLSNvi//5dtiwwZx2y8BCeQLYFlgW/R3i3lLC331FUynCbv8Mn7G6fjJdkg5IATkCup7w6LWVnnTQhmEKQjR5Dc+9KdTL93w/sdZq5ellI55cRDJhnPDZgoRyu60Wnd1QmHYwymJBkQIhZKy+wlG/MaP5fI/f3jg1PkbbnzoT2jyFIayEsqbFoZvtqoTT4QDWZAKUg5+sp2fMZldfhlhjzwKhgFJGwoFYFzccrN4sxVOHIa+n3KNtr/sH3PRa3csep8YxEiw+g7gP+z+8Stg/GoI/gECQmojwYlB7lj0/piLXmt7f3/KMdD3Ydgw8WaruOVmYAwLBUjaYBjskUeJchKaUh1F8uivB2vXiptv0VLqXA44u2vZB6de+vof/6vD6mWC1koqRLBNGrfW8WFF7YMAtkkRYvKn4y2I65ZGVLatEeN/FYCudnE6fhmGVEf2zR+tbZNSUn11QSkFWlu9zD/+V8ep81+/7+m/AmfKz2khxc23BGvXiqO/riOhEWWv9P8AX93JgrGTl9cAAAAASUVORK5CYII=');
    background-size:cover;
    background-position:center;
    border-radius:2px;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    margin: 0 1px;
  }

  /* علم سويسرا المخصص — يحل محل الإيموجي 🇨🇭 */
  .ch-flag {
    display:inline-block;
    width:1.3em;
    height:0.85em;
    vertical-align:middle;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAwCAIAAADrW3HZAAABCGlDQ1BJQ0MgUHJvZmlsZQAAeJxjYGA8wQAELAYMDLl5JUVB7k4KEZFRCuwPGBiBEAwSk4sLGHADoKpv1yBqL+viUYcLcKakFicD6Q9ArFIEtBxopAiQLZIOYWuA2EkQtg2IXV5SUAJkB4DYRSFBzkB2CpCtkY7ETkJiJxcUgdT3ANk2uTmlyQh3M/Ck5oUGA2kOIJZhKGYIYnBncAL5H6IkfxEDg8VXBgbmCQixpJkMDNtbGRgkbiHEVBYwMPC3MDBsO48QQ4RJQWJRIliIBYiZ0tIYGD4tZ2DgjWRgEL7AwMAVDQsIHG5TALvNnSEfCNMZchhSgSKeDHkMyQx6QJYRgwGDIYMZAKbWPz9HbOBQAAADIUlEQVR42u2asY5bRRSG///M3LWj7G6CUyClQJuCQCigoIzEKyAaJHpEk1dIAQLxDGkoKBANouEZeAEQSCQ9pFgpC157fdd3zk/h7Gpt32uD5Ot47ZnKmrkj3/PdM+f8c2b43etvvBlDKRA71wR0iGdVivdjeC8Wo12l0AUIxFI4E0ppNymILIVIwABiF30BF7YbcssUJi2+itUo+WRVzjQCMrNtp2CG01N+8HD/qy+YKtiVWCQhxHR8PPz0EQcDhABpSymQSh4ODzvvvF07Pv7nhULgGu1/ZSsCKckdPsZV55fAiOEZtBtxASTMAJujMN2Tc0SmkClkClunmtjcTy6fu2BXo+tDgd7wshTcF8shuuiAQ9ObfQGc9HHjKRAQkGKY/Ji8+6URsKAYEOzKR5+eK1ZFCIUp2gQWpz4/KYXk2mgKRozOde/o8NsnFgvIZz2bQHLs36ScFucXUXHnTu+nH+iuC/svKVBCCOe//nb22SPb62il+nK1vkDJ0dnbu//WMrett8Fi3Ds6WjStfzqcd5FNjAuSzkvGCHl9LCTB5tzk3thvprK8PjnCDGbQf8gItXMXDLGVkljWC5lCptB+XEgJYE105MUOOoRFc1WnHd3hQkrXgoJgxk53+WNNrQlQCAB463DjKUiIBY+P+19+TbNZDQyAptEZHzzY/+RjyqfypQSy6p8OnnyDUQmzWVISovmff1kLJUn+fPfeu7EYrfBsyl39fv3HDkEnJ/bRh70fv6f7XK2J58+fn7z/0E7+Roz1psbI/Zur81t0yV+qcQtxwYy93pwAngwFxMhbB2year3XGEMjBaGN0NBedKz1BaCqFpuhlFillxvInCmzXsgUMoVMYfsU9FJxldJsAVIC2ZJA3jwKEouIEOqV8u3bIol1H1aul4I7b3T99z9ePP6cVZo9uTfz4dBGpcyw3mPrFhT0kj8kxmMNBk2jPDhoqaC0XgW9NCgUBXu9/607tzM65kyZ9UKmsLGqSZOLsDtp/KXtsQN2SWBXb4OTHTA+9TGq2dvguloFFto5Ll+1SQQ0W9xqMv7yIL1DPvXxv1mvTi8Tl15pAAAAAElFTkSuQmCC');
    background-size:cover;
    background-position:center;
    border-radius:2px;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    margin: 0 1px;
  }

  /* علم قطر المخصص — يحل محل الإيموجي 🇶🇦 */
  .qa-flag {
    display:inline-block;
    width:1.3em;
    height:0.85em;
    vertical-align:middle;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAAAwCAIAAABR+Pm5AAABCGlDQ1BJQ0MgUHJvZmlsZQAAeJxjYGA8wQAELAYMDLl5JUVB7k4KEZFRCuwPGBiBEAwSk4sLGHADoKpv1yBqL+viUYcLcKakFicD6Q9ArFIEtBxopAiQLZIOYWuA2EkQtg2IXV5SUAJkB4DYRSFBzkB2CpCtkY7ETkJiJxcUgdT3ANk2uTmlyQh3M/Ck5oUGA2kOIJZhKGYIYnBncAL5H6IkfxEDg8VXBgbmCQixpJkMDNtbGRgkbiHEVBYwMPC3MDBsO48QQ4RJQWJRIliIBYiZ0tIYGD4tZ2DgjWRgEL7AwMAVDQsIHG5TALvNnSEfCNMZchhSgSKeDHkMyQx6QJYRgwGDIYMZAKbWPz9HbOBQAAAESklEQVR42u2bXVPiSBSGuzsfgrLW/PMZ/Qfqzc7c7M5Wua4THATBMnwEFUhIAEniKiEKYhCSKUn3Xgg7Tu1cpuNWpU9xlZtQb956T58nJ5AQAmgXIZgQp2df/nWiHRbtc20+mnAcJ2ykOUEgBAP6f+F/UjAOuV8rj8nA6Ov5cit7ainqfPworK1BBJnc0QuNwxAiiDju5Uowm5d/PfiytTMd3nM8H/ODf5Pi43uwCHJoeTunZ3eKNaNYu73U/YdHxHFJ0Do+uQkhs4nn6ObV2YWRL9vnmueOAIBCSuREAcKkhAkfj9YhDtXc2dH2Xl9uPAd+KpNZf7fJCTzGGIcha5VRKw7Ai4Edw9RyZy3p1Ky2POcOQpjazCAeJUTxGFslIa9Dw3PHptJqHJ409guB9wQ5BBIQ3+itbkzgi6Hhyv3M3RTq1jDbOVmVSmat6Q3uAYTrmxnIwiTqVomVz0dHW7tX5cZz4KczmfRmhhN4gnHIWiUNxecTz9HNrnyh5yvXddW7G0EAhTWRFwUA2VRJs5ye3S0qxkn174bxeOviMGRyR1wYY7IIAUIcvxzi50/z8sf9ow97npuUIf4N3O10LS1XVr8ULUWdjye8KEIOMXdHmdwhIf1qs/57tltU3J79bTqDCAkpEfF8ogBsHLb6d6QEBBAIICAvV2BiVH7LMBl0LP243JJKVq01G0+ENREiFiYUWiVehAghtGqV/nQmfzrIftiduox3Rx5bCCFx6eJhz+6UanqhdtvQ/YnHeHf0Y87swXMM8+rsvF2oXNe1qTsGADDeTUVrHGL1WM5u75nyxXMQrG9kNt79ghjvpno8IQA4htle8u6m59xDCNMMUVHy+OvQmLhjS2m1DouX+/nAm0KOY7ybgsV/vDGBBEAAAEwI8o713E0AGBhmOye3pJK1ChP28iz6GAlxWPvj6OvWXv+s8fzNT614N2uVdGYcQvwHzzHMrnxh5CvWufbkjiABfIrxbvo17NlGSekUqjcNY3Lr4kUIIJM72kjBOFyE8BXvXg7xWztPwxFivJtSOV1LzZVVqWTVmvPxoyiKgPHuaHvlknf/lu2cKnddO5jO0HfeTQBJSq+MyVbw1cEbrn4/OY0zd0cfJh1LOy6rUtGqtebjR57xbipnwZ++Gv70Z/Y94900YgshsOLdTtfulhTjpHrTMPyJBxnvjnywnD14A8O8ki/0fMU+V5+Gy/1unvHuyLXGGGvHsrS11y9fLoIgvbHB9rvp677c716tZDr3EMDUZgaxczcNj/+w3303Mmtqk/FuEKfbE1Zxn7sHhqmtePfUuQeMd1NqlbXPX6XtHVO+XARBiu13051xCJk9eMOO2Xv50K+uTd3vB0HGu+nWsGsbp4pRqN6w/W5akfKfj7T9mV/5uC+932X73fTICXH0vl6oqFLJrKs+Q1Q0eiUmYNizGweFplS8rrfnowniOTGd4kQhUbz7H/xud8AzvB0vAAAAAElFTkSuQmCC');
    background-size:cover;
    background-position:center;
    border-radius:2px;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    margin: 0 1px;
  }

  /* ══ شريط ضوئي متوهج للعملات الأجنبية ══ */
  .fc-card {
    position: relative !important;
  }
  /* الطي/الفتح */
  .fc-card.collapsed .fc-card-body { display: none !important; }
  .fc-card.collapsed .fc-card-head { margin-bottom: 0 !important; }
  .fc-card.collapsed .fc-chevron   { transform: rotate(-90deg); }
  .fc-card .fc-chevron             { transition: transform .25s ease; }
  .fc-led {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    width: auto !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    z-index: 5 !important;
    pointer-events: none;
    display: block !important;
  }
  .fc-led.led-green {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(30,201,107,.18) 12%,
      rgba(30,201,107,.55) 30%,
      rgba(110,255,163,.65) 50%,
      rgba(30,201,107,.55) 70%,
      rgba(30,201,107,.18) 88%,
      transparent 100%);
    box-shadow:
      0 0 4px  rgba(30,201,107,.35),
      0 0 9px  rgba(30,201,107,.18);
    animation: led-pulse-green 4s infinite ease-in-out;
  }
  .fc-led.led-red {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(245,86,74,.18) 12%,
      rgba(245,86,74,.55) 30%,
      rgba(255,138,130,.65) 50%,
      rgba(245,86,74,.55) 70%,
      rgba(245,86,74,.18) 88%,
      transparent 100%);
    box-shadow:
      0 0 4px  rgba(245,86,74,.35),
      0 0 9px  rgba(245,86,74,.18);
    animation: led-pulse-red 4s infinite ease-in-out;
  }
  .fc-led.led-gold {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(245,200,66,.18) 12%,
      rgba(245,200,66,.55) 30%,
      rgba(255,226,138,.65) 50%,
      rgba(245,200,66,.55) 70%,
      rgba(245,200,66,.18) 88%,
      transparent 100%);
    box-shadow:
      0 0 4px  rgba(245,200,66,.35),
      0 0 9px  rgba(245,200,66,.18);
    animation: led-pulse-gold 4s infinite ease-in-out;
  }
  .fc-led.led-gray {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(150,150,150,.18) 25%,
      rgba(150,150,150,.4) 50%,
      rgba(150,150,150,.18) 75%,
      transparent 100%);
    box-shadow: 0 0 2px rgba(120,120,120,.18);
  }
  @keyframes led-pulse-green {
    0%,100% { opacity: .65; box-shadow:0 0 4px rgba(30,201,107,.35), 0 0 9px  rgba(30,201,107,.18); }
    50%     { opacity: .9;  box-shadow:0 0 6px rgba(30,201,107,.5),  0 0 12px rgba(30,201,107,.28); }
  }
  @keyframes led-pulse-red {
    0%,100% { opacity: .65; box-shadow:0 0 4px rgba(245,86,74,.35), 0 0 9px  rgba(245,86,74,.18); }
    50%     { opacity: .9;  box-shadow:0 0 6px rgba(245,86,74,.5),  0 0 12px rgba(245,86,74,.28); }
  }
  @keyframes led-pulse-gold {
    0%,100% { opacity: .65; box-shadow:0 0 4px rgba(245,200,66,.35), 0 0 9px  rgba(245,200,66,.18); }
    50%     { opacity: .9;  box-shadow:0 0 6px rgba(245,200,66,.5),  0 0 12px rgba(245,200,66,.28); }
  }

  /* ── Pagination ── */
  .pagination-bar-wrap { padding: 8px 4px 2px; }
  .pagination-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; padding: 6px 12px;
    background: var(--surface2); border-radius: var(--radius-sm);
    border: 1px solid var(--border); margin-top: 6px;
  }
  .pag-btn {
    padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface3); color: var(--text); cursor: pointer;
    font-family: Tajawal, sans-serif; font-size: .85rem; transition: .2s;
  }
  .pag-btn:hover:not(:disabled) { background: var(--accent-gold); color: #000; }
  .pag-btn:disabled { opacity: .35; cursor: not-allowed; }
  .pag-info { font-size: .82rem; color: var(--text-dim); padding: 0 6px; }

  /* ── Session Warning Banner ── */
  #session-warn-banner {
    display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    background: rgba(245,86,74,.95); color: #fff; padding: 10px 20px;
    align-items: center; justify-content: space-between; gap: 12px;
    font-family: Tajawal, sans-serif; font-size: .9rem; font-weight: 700;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  #session-warn-banner button {
    padding: 4px 14px; border: 2px solid #fff; border-radius: 6px;
    background: transparent; color: #fff; cursor: pointer;
    font-family: Tajawal, sans-serif; font-weight: 700;
  }
  #session-warn-banner button:hover { background: rgba(255,255,255,.2); }

  /* ── Confirm Modal ── */
  .confirm-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
    animation: fadeIn .15s ease;
  }
  .confirm-modal-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px 32px; max-width: 420px; width: 92%; text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,.5); animation: slideUp .2s ease;
  }
  .confirm-modal-icon { font-size: 2.4rem; margin-bottom: 12px; }
  .confirm-modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
  .confirm-modal-msg { font-size: .88rem; color: var(--text-dim); margin-bottom: 22px; line-height: 1.6; }
  .confirm-modal-actions { display: flex; gap: 10px; justify-content: center; }
  .confirm-modal-actions .btn-confirm-yes {
    padding: 8px 24px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--accent-red); color: #fff;
    font-family: Tajawal,sans-serif; font-weight: 800; font-size: .9rem;
    transition: .2s;
  }
  .confirm-modal-actions .btn-confirm-yes:hover { opacity: .85; }
  .confirm-modal-actions .btn-confirm-no {
    padding: 8px 24px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer;
    background: var(--surface2); color: var(--text);
    font-family: Tajawal,sans-serif; font-weight: 800; font-size: .9rem;
    transition: .2s;
  }
  .confirm-modal-actions .btn-confirm-no:hover { background: var(--surface3); }

  /* ── Receipt Modal ── */
  .receipt-modal-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
    animation: fadeIn .15s ease;
  }
  .receipt-modal-box {
    background: #fff; color: #1a1a2e; border-radius: 12px;
    padding: 0; max-width: 420px; width: 95%; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: slideUp .2s ease;
    font-family: Tajawal, sans-serif;
  }
  .receipt-header {
    background: linear-gradient(135deg,#1e2236,#252b42);
    color: #f5c842; padding: 18px 20px; text-align: center;
  }
  .receipt-header h3 { font-size: 1.2rem; margin-bottom: 2px; }
  .receipt-header p  { font-size: .78rem; color: rgba(255,255,255,.6); margin: 0; }
  .receipt-body { padding: 20px; }
  .receipt-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed #e5e7eb; font-size:.88rem; }
  .receipt-row:last-child { border-bottom: none; }
  .receipt-row .rl { color: #64748b; }
  .receipt-row .rv { font-weight: 700; color: #1e293b; text-align: left; }
  .receipt-amount { font-size: 1.5rem; font-weight: 900; text-align: center; padding: 14px 0 8px; }
  .receipt-footer {
    background: #f8fafc; padding: 12px 20px; text-align: center;
    font-size: .75rem; color: #94a3b8; border-top: 1px solid #e2e8f0;
  }
  .receipt-actions { display:flex; gap:8px; padding:12px 20px; background:#f8fafc; justify-content: center; }
  .receipt-actions button {
    padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
    font-family: Tajawal,sans-serif; font-size: .85rem; font-weight: 700;
  }
  .receipt-btn-print { background: #1e293b; color: #fff; }
  .receipt-btn-whatsapp { background: #25d366; color: #fff; }
  .receipt-btn-close { background: #e2e8f0; color: #1e293b; }

  /* ── Daily Close Modal ── */
  .daily-close-section { padding: 20px; }
  .daily-close-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
  .dc-stat {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; text-align: center;
  }
  .dc-stat-label { font-size: .78rem; color: var(--text-dim); margin-bottom: 4px; }
  .dc-stat-val { font-size: 1.3rem; font-weight: 900; color: var(--accent-gold); }


/* ══════════════════════════════════════════════
   SESSION WARNING BANNER
   ══════════════════════════════════════════════ */
@keyframes pulse-bar {
  0%   { opacity: 1; }
  100% { opacity: .82; }
}
#session-warn-banner {
  animation: pulse-bar 1s ease-in-out infinite alternate;
}

/* ══════════════════════════════════════════════
   GUIDED MODE — وضع موجّه
   ══════════════════════════════════════════════ */
.guided-active #tx-modal .modal {
  border: 2px solid rgba(167,139,250,.6);
  box-shadow: 0 0 0 4px rgba(167,139,250,.12), 0 8px 32px rgba(0,0,0,.4);
}
.guided-step-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(167,139,250,.07);
  border-radius: 8px;
  border: 1px solid rgba(167,139,250,.18);
}
.guided-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  transition: all .2s;
}
.guided-step.active {
  background: var(--accent-purple, #a78bfa);
  border-color: var(--accent-purple, #a78bfa);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(167,139,250,.25);
}
.guided-step.done {
  background: var(--accent-green, #34d399);
  border-color: var(--accent-green, #34d399);
  color: #fff;
}
.guided-highlight {
  box-shadow: 0 0 0 3px rgba(167,139,250,.45) !important;
  border-color: rgba(167,139,250,.7) !important;
  transition: box-shadow .2s, border-color .2s;
}
#guided-mode-btn.active {
  background: rgba(167,139,250,.25) !important;
  border-color: rgba(167,139,250,.6) !important;
  color: #c4b5fd !important;
}


/* ══════════════════════════════════════════
   RESPONSIVE TOPBAR — شريط تنقل متجاوب
══════════════════════════════════════════ */

/* ─── شاشات أقل من 1500px: تصغير طفيف ─── */
@media (max-width: 1500px) {
  .nav-btn { padding: 5px 10px; font-size: .80rem; }
}

/* ─── شاشات أقل من 1280px: تبدأ مرحلة التكيف ─── */
@media (max-width: 1280px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 5px 10px;
    gap: 6px;
    min-height: 0;
  }
  .topbar-brand { order: 1; flex-shrink: 0; }
  .topbar-right { order: 2; flex-shrink: 0; }
  nav {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    border-radius: 8px;
    padding: 3px;
  }
  .nav-btn { padding: 5px 10px; font-size: .80rem; }
  .topbar-brand span.brand-sub { display: none; }
}

/* ─── شاشات أقل من 900px ─── */
@media (max-width: 900px) {
  .nav-btn { padding: 5px 8px; font-size: .76rem; }
  .topbar-brand h2 { font-size: .82rem; }
  .topbar-brand-icon { width: 32px; height: 32px; }
  .user-chip { font-size: .75rem; padding: 3px 8px; }
}

/* ─── شاشات أقل من 640px ─── */
@media (max-width: 640px) {
  .nav-btn { padding: 4px 7px; font-size: .72rem; }
  .topbar-brand h2 { font-size: .78rem; }
  .topbar-brand-icon { width: 28px; height: 28px; }
}

/* ─── شاشات أقل من 480px (موبايل) ─── */
@media (max-width: 480px) {
  .nav-btn { padding: 4px 6px; font-size: .68rem; }
  .user-chip { display: none; }
  .topbar-brand h2 { display: none; }
  .topbar-brand-icon { width: 26px; height: 26px; }
}

/* ══════════════════════════════════════════
   NAV SCROLL ARROWS — أسهم تمرير الشريط
══════════════════════════════════════════ */
.nav-scroll-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.nav-scroll-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  backdrop-filter: blur(6px);
}
.nav-scroll-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.nav-scroll-btn:hover {
  background: rgba(245,200,66,.15);
  border-color: rgba(245,200,66,.4);
  color: var(--accent-gold);
}
/* ضبط nav ليكون flex:1 داخل الـ wrapper */
.nav-scroll-wrap nav {
  flex: 1 1 0;
  min-width: 0;
}